:root{
  --bg:#0b0f14; --card:#ffffffea; --text:#0b0f14; --muted:#6b7280; --primary:#111827;
  --glass: rgba(255,255,255,0.65); --glass-border: rgba(255,255,255,0.25);
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
}

/* Splash */
.splash{
  position:fixed; inset:0; display:grid; place-items:center; overflow:hidden; z-index:50;
  animation: fadeOut 0.8s ease 2.2s forwards;
}
.splash__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(0.7);
  animation:zoom 2.3s ease forwards;
}
.splash__overlay{position:relative; text-align:center; color:#fff; padding:2rem}
.splash__title{font-size:clamp(28px,5vw,52px); margin:0 0 .25rem; letter-spacing:.5px}
.splash__subtitle{margin:0; font-size:clamp(14px,2.5vw,20px); opacity:.9}
@keyframes zoom{from{transform:scale(1)} to{transform:scale(1.06)}}
@keyframes fadeOut{to{opacity:0; visibility:hidden}}

.hidden{opacity:0; pointer-events:none}
.form-wrap{
  min-height:100svh; display:grid; place-items:center; padding:24px; transition:opacity .6s ease;
}
.form-hero{
  position:fixed; inset:0; background:url("../assets/hero-form.jpg") center/cover no-repeat;
  filter:brightness(0.6);
}
.card{
  position:relative; width:min(920px,92vw); backdrop-filter: blur(10px);
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:22px; padding:22px 22px 18px; z-index:1; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.card h2{margin:4px 6px 14px; font-size:clamp(20px,3.8vw,28px)}
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.grid .full{grid-column:1/-1}
.field{display:flex; flex-direction:column}
.field span{font-size:14px; color:#fff; margin:2px 6px 6px}
input,select,textarea{
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.28);
  padding:12px 14px; border-radius:14px; color:#fff; outline:none;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,0.75)}
select{color:#111; background:#fff}
textarea{resize:vertical}
.btn{
  margin-top:10px; width:100%; padding:14px 16px; border-radius:16px; border:none;
  background:#fff; color:#111; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.2); transition:transform .05s ease;
}
.btn:active{transform:translateY(1px)}
.status{margin:10px 6px 0; min-height:22px; font-size:14px; color:#fff}
.hint{margin:6px; color:#e5e7eb; font-size:12px}

/* Mobile */
@media (max-width:720px){
  .grid{grid-template-columns:1fr}
  .card{padding:18px 16px}
}