:root{
  --bg: #f4f8ff;           /* sky tint */
  --card: #ffffff;         /* panels/cards */
  --muted: #4b5563;        /* secondary text */
  --text: #0b0b0c;         /* primary text */
  --accent: #2563eb;       /* blue */
  --accent-2:#f59e0b;      /* amber */
  --ring: rgba(37,99,235,.25);
  --radius: 16px;
  --barH: clamp(56px, 12vh, 50vh); /* bottom bar height */
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; font-family: Tahoma, Helvetica, sans-serif, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1000px 600px at 50% -20%, #1a1a1a 0%, rgba(26,26,26,0) 60%), #0b0b0c;
  overflow: hidden; /* avoid scrollbars with fixed layers */
}
.video-shell{
  position: relative;
  width: 100%; height: 100vh;
  display: grid; place-items: center;
}
.hero-title{
  position:fixed; top:20px; left:50%; transform:translateX(-50%);
  text-align:center; padding:10px 16px; border-radius:14px;
  background: rgba(0,0,0,.45);
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  z-index:3;
}
.hero-title .title{ color:#fff; font-weight:800; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.hero-title .subtitle{ color:#e5efff; opacity:1; font-weight:600; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.wrap{ max-width:960px; margin:0 auto; padding:24px; }
header{ padding:32px 0 16px; text-align:center; }
.title{
  font-size: clamp(28px, 4vw, 48px);
  line-height:1.05; margin:0 0 10px;
  letter-spacing:.2px;
}
.subtitle{ margin:0; color:var(--muted); font-size: clamp(14px, 1.6vw, 18px); }

/* VIDEO */
.video-card{
  margin:28px auto 32px; background:var(--card); border-radius: var(--radius);
  box-shadow: 0 15px 50px rgba(0,0,0,.25);
  overflow:hidden; border:1px solid rgba(255,255,255,.06);
}
.video-wrap{
  position:fixed; top:0; left:0; right:0; bottom: var(--barH);
  background:#000; cursor:pointer; z-index:1;
}
.video-thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05);
  object-position: center top;
  transition: transform .35s ease;
}
.video-wrap:hover .video-thumb{ transform: scale(1.02); }
.play-btn{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
}
.play-btn span{
  display:inline-grid; place-items:center; width:84px; height:84px; border-radius:999px;
  background:rgba(11,11,12,.6); backdrop-filter: blur(6px);
  border:1px solid rgba(255,255,255,.2);
}
.play-btn svg{ width:34px; height:34px; margin-left:4px; fill:white; filter: drop-shadow(0 4px 16px rgba(0,0,0,.5)); }

/* FORM */
.card{ background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius: var(--radius); padding:20px; }
form{ display:grid; gap:14px; }
.grid{ display:grid; gap:12px; }
@media (min-width:720px){ .grid-2{ grid-template-columns: 1fr 1fr; } }

label{ display:block; font-size:14px; color:var(--muted); margin:0 0 6px; }
input, select{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5e7eb;
  background:#ffffff; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s;
}
input[type=checkbox]{ width:auto; }
input:focus, select:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.hint{ font-size:12px; color:var(--muted); margin-top:6px; }
.row{ display:grid; gap:12px; }
@media (min-width:600px){ .row-2{ grid-template-columns: 1fr 1fr; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color:#fff; font-weight:600; cursor:pointer;
  box-shadow: 0 10px 30px rgba(37,99,235,.35);
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; box-shadow:none; }

.bottom-bar{
  position:fixed; left:0; right:0; bottom:0; height: var(--barH);
  background: linear-gradient(180deg, rgba(2,6,23,.88), rgba(2,6,23,.96)); /* very dark blue */
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.bottom-cta{
  background: transparent; border: none; color: #ffffff; cursor: pointer;
  font-weight: 900; letter-spacing: .3px;
  font-size: clamp(18px, 4vw, 28px);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  color: #c0c9d5;
  border: 1px solid #c0c9d5;
  padding: 12px 20px;
}
/* .bottom-cta:hover{ text-decoration: underline; } */
.bottom-cta:hover {
  border: 1px solid #ffffff;
  color: #ffffff;
}
.bottom-cta:focus{ outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.modal{ position:fixed; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.35); backdrop-filter: blur(3px); z-index:10; }
.modal.hidden{ display:none; }
.modal-content{ width:min(560px, 92vw); }
.modal-close{ position:absolute; top:10px; right:12px; background:transparent; border:none; font-size:26px; line-height:1; cursor:pointer; color:#4b5563 }

.notice{ font-size:14px; color:var(--muted); }
.success, .error{
  padding:12px 14px; border-radius:12px; font-size:14px;
  border:1px solid transparent;
}
.success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); }
.error{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }

footer{ text-align:center; color:var(--muted); font-size:13px; padding:28px 0 60px; }
.pill{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03);
  margin: 6px 8px 0 0; font-size:13px;
}
.video-wrap iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}