/* Tokens lifted from onemanaistudio.com — identical to the promo film's palette */
:root{
  --bg:#0A0A0A; --bg2:#161616; --teal:#01272F; --cyan:#03C1ED; --cyan-lt:#55CDFF;
  --panel:rgba(0,86,105,.42); --glass:rgba(3,193,237,.10); --line:rgba(3,193,237,.22);
  --white:#fff; --muted:rgba(255,255,255,.62); --muted2:rgba(255,255,255,.45);
  --maxw:1180px;
}
@font-face{font-family:Brutalist;src:url(/fonts/TelAviv-BrutalistBold.woff2) format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:Brutalist;src:url(/fonts/TelAviv-BrutalistLight.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-900.woff2) format("woff2");font-weight:900;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--white);font-family:Assistant,Rubik,system-ui,sans-serif;
  font-weight:300;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.disp{font-family:Brutalist,Assistant,sans-serif;font-weight:900;line-height:1.1;letter-spacing:-.01em}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.cy{color:var(--cyan)}
section{position:relative;padding:96px 0}

/* ── hero ── */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:64px 0 72px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(78% 62% at 50% 46%,rgba(10,10,10,.86) 0%,rgba(10,10,10,.55) 45%,transparent 78%),
    radial-gradient(125% 95% at 50% 38%,transparent 4%,rgba(10,10,10,.70) 56%,var(--bg) 100%)}
.hero .wrap{position:relative;z-index:1;text-align:center}
.logo{width:212px;margin:0 auto 26px;display:block}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:Rubik;font-size:14px;letter-spacing:.16em;
  color:var(--cyan);border:1px solid var(--line);background:var(--glass);padding:9px 20px;border-radius:999px;margin-bottom:26px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
h1{font-size:clamp(42px,7.4vw,104px);margin-bottom:20px;text-shadow:0 8px 46px rgba(0,0,0,.92),0 2px 10px rgba(0,0,0,.7)}
h1 .line2{display:block}
.sub{font-size:clamp(17px,2.1vw,23px);color:rgba(255,255,255,.80);max-width:760px;margin:0 auto 34px;text-shadow:0 3px 20px rgba(0,0,0,.9)}
.cta{display:inline-block;background:var(--cyan);color:#00171d;font-family:Brutalist,sans-serif;font-weight:900;
  font-size:clamp(19px,2.3vw,26px);padding:19px 46px;border-radius:14px;text-decoration:none;border:none;cursor:pointer;
  box-shadow:0 0 0 0 rgba(3,193,237,.55);transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.cta:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 46px rgba(3,193,237,.42)}
.cta-note{display:block;margin-top:12px;font-size:14px;color:var(--muted2);font-family:Rubik}

/* ── video ── */
.video-wrap{margin:52px auto 0;max-width:940px;position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.75),0 0 70px rgba(3,193,237,.10)}
.video-wrap video{width:100%;display:block;background:#000}
.vhint{font-family:Rubik;font-size:13px;color:var(--muted2);margin-top:12px;letter-spacing:.05em}

/* ── stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;margin:0 auto}
.stat{background:linear-gradient(180deg,var(--glass),transparent);border:1px solid var(--line);
  border-radius:16px;padding:30px 18px;text-align:center}
.stat b{display:block;font-family:Brutalist,sans-serif;font-weight:900;font-size:clamp(38px,5.6vw,62px);color:var(--cyan);line-height:1}
.stat span{display:block;margin-top:8px;font-size:16px;color:var(--muted);font-family:Rubik}

/* ── generic section head ── */
.head{text-align:center;margin-bottom:52px}
.head h2{font-size:clamp(30px,4.6vw,54px);margin-bottom:14px}
.head p{color:var(--muted);max-width:660px;margin:0 auto}
.band{position:absolute;inset:0;z-index:0;overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;opacity:.24}
.band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 22%,transparent 78%,var(--bg))}
section > .wrap{position:relative;z-index:1}

/* ── syllabus ── */
.parts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.part{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:11px;padding:15px 18px;font-size:17px;transition:border-color .2s,transform .2s,background .2s}
.part:hover{border-color:var(--cyan);transform:translateX(-4px);background:rgba(0,86,105,.6)}
.part i{font-family:Rubik;font-weight:900;font-style:normal;font-size:14px;color:var(--cyan);
  min-width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.35)}

/* ── tools ── */
.chips{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:900px;margin:0 auto}
.chip{font-family:Rubik;font-size:16px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);
  background:var(--glass);color:#cfefff}

/* ── audience ── */
.who{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto}
.who div{border:1px solid var(--line);border-radius:14px;padding:24px 26px;background:linear-gradient(180deg,var(--glass),transparent)}
.who h3{font-size:22px;margin-bottom:8px;color:var(--cyan)}
.who p{font-size:16px;color:var(--muted)}

/* ── work ── */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.work img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;border:1px solid var(--line)}

/* ── form ── */
.form-sec{background:linear-gradient(180deg,transparent,rgba(1,39,47,.55),transparent)}
.form-card{max-width:720px;margin:0 auto;background:rgba(8,20,24,.82);border:1px solid var(--line);
  border-radius:22px;padding:44px;backdrop-filter:blur(10px);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.field{margin-bottom:20px}
.field label{display:block;font-family:Rubik;font-size:15px;margin-bottom:8px;color:#dff4ff}
.field label span{color:var(--cyan)}
.field input,.field textarea{width:100%;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:11px;
  padding:15px 17px;color:var(--white);font-family:Assistant,sans-serif;font-size:17px;font-weight:300;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(3,193,237,.16)}
.field textarea{min-height:118px;resize:vertical;line-height:1.6}
.field .err{color:#ff8f8f;font-size:14px;margin-top:6px;display:none;font-family:Rubik}
.field.invalid input,.field.invalid textarea{border-color:#ff8f8f}
.field.invalid .err{display:block}
.form-card .cta{width:100%;margin-top:8px}
.form-msg{margin-top:18px;text-align:center;font-family:Rubik;font-size:16px;display:none;border-radius:11px;padding:14px}
.form-msg.ok{display:block;background:rgba(3,193,237,.12);border:1px solid var(--line);color:#cfefff}
.form-msg.bad{display:block;background:rgba(255,143,143,.10);border:1px solid rgba(255,143,143,.4);color:#ffc9c9}
.privacy{text-align:center;font-size:13px;color:var(--muted2);margin-top:16px;font-family:Rubik}

/* ── footer ── */
footer{border-top:1px solid rgba(255,255,255,.07);padding:44px 0;text-align:center;color:var(--muted2);font-size:14px;font-family:Rubik}
footer a{color:var(--cyan);text-decoration:none}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
  .cta{transition:none}.part{transition:none}}

@media(max-width:860px){
  section{padding:70px 0}
  .parts,.who,.stats{grid-template-columns:1fr}
  .work{grid-template-columns:1fr 1fr}
  .form-card{padding:30px 22px}
  .logo{width:168px}
}

/* ══ custom video player ══════════════════════════════════════════════════ */
.player{position:relative;margin:52px auto 0;max-width:960px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:#000;line-height:0;
  box-shadow:0 40px 120px rgba(0,0,0,.78),0 0 70px rgba(3,193,237,.10)}
.player video{width:100%;display:block;background:#000}

/* poster-state play button */
.big-play{position:absolute;inset:0;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;border:0;cursor:pointer;
  background:radial-gradient(60% 60% at 50% 50%,rgba(0,0,0,.30),rgba(0,0,0,.62));
  color:var(--white);font-family:Brutalist,sans-serif;font-weight:900;font-size:20px;line-height:1;
  transition:opacity .3s,visibility .3s}
.big-play svg{width:82px;height:82px;fill:#00171d;background:var(--cyan);border-radius:50%;padding:22px 18px 22px 26px;
  box-shadow:0 0 0 0 rgba(3,193,237,.45);animation:pulse 2.6s ease-out infinite;transition:transform .2s cubic-bezier(.16,1,.3,1)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(3,193,237,.45)}70%{box-shadow:0 0 0 26px rgba(3,193,237,0)}100%{box-shadow:0 0 0 0 rgba(3,193,237,0)}}
.big-play:hover svg{transform:scale(1.07)}
.player[data-state="playing"] .big-play,.player[data-state="paused"] .big-play{opacity:0;visibility:hidden}

/* control bar */
.ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:11px;
  padding:14px 16px;line-height:1;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.55) 58%,transparent);
  opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.player[data-state="playing"] .ctrl,.player[data-state="paused"] .ctrl,.player:hover .ctrl,
.player.show-ctrl .ctrl,.player:focus-within .ctrl{opacity:1;transform:none;pointer-events:auto}
.player[data-state="idle"] .ctrl{opacity:0;pointer-events:none}

.ic{width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:9px;
  background:transparent;cursor:pointer;transition:background .18s}
.ic:hover{background:rgba(3,193,237,.16)}
.ic svg{width:19px;height:19px;fill:var(--white)}
.ic:focus-visible,.bar:focus-visible,.vol:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.i-pause,.player[data-state="playing"] .i-play{display:none}
.player[data-state="playing"] .i-pause{display:block}
.i-mute{display:none}
.player.muted .i-mute{display:block}
.player.muted .i-vol{display:none}

.bar{position:relative;flex:1 1 auto;height:16px;display:flex;align-items:center;cursor:pointer;touch-action:none}
.bar::before{content:"";position:absolute;left:0;right:0;height:5px;border-radius:3px;background:rgba(255,255,255,.22)}
.buf{position:absolute;left:0;height:5px;border-radius:3px;background:rgba(255,255,255,.30);width:0}
.fill{position:absolute;left:0;height:5px;border-radius:3px;background:var(--cyan);width:0;
  box-shadow:0 0 12px rgba(3,193,237,.7)}
.knob{position:absolute;right:-6px;top:50%;transform:translateY(-50%) scale(0);width:13px;height:13px;
  border-radius:50%;background:var(--cyan);box-shadow:0 0 12px rgba(3,193,237,.9);transition:transform .18s}
.bar:hover .knob,.bar:focus-visible .knob,.player.scrubbing .knob{transform:translateY(-50%) scale(1)}

.time{flex:0 0 auto;font-family:Rubik;font-size:13px;color:rgba(255,255,255,.82);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.time b{font-weight:400;color:#fff}

.vol{flex:0 0 76px;height:4px;-webkit-appearance:none;appearance:none;background:rgba(255,255,255,.24);
  border-radius:3px;cursor:pointer}
.vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px rgba(3,193,237,.8);cursor:pointer}
.vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--cyan);cursor:pointer}

@media(max-width:640px){
  .ctrl{gap:7px;padding:10px 10px}
  .vol{display:none}
  .time{font-size:12px}
  .big-play svg{width:64px;height:64px;padding:17px 14px 17px 20px}
  .big-play{font-size:16px}
}
@media (prefers-reduced-motion:reduce){ .big-play svg{animation:none} }
