:root{--bg:#06080c;--bg2:#0b0f16;--line:#1c222e;--a:#f2b84b;--on:#000;--sky1:#04060b;--sky2:#131a2c;--hz:#6a4420;--far:#1a2232;--near:#090c12;--m:#9aa3b2;--txt:#b9c0cd}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:Barlow,system-ui,sans-serif;background:var(--bg);color:#fff;line-height:1.6;font-size:17px}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
:focus-visible{outline:3px solid var(--a);outline-offset:3px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;color:#000;padding:8px 12px}
h1,h2,h3,.logo{font-family:Oswald,sans-serif;text-transform:uppercase;font-weight:600;line-height:1}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:30px;padding:18px 32px;background:linear-gradient(var(--sky1),transparent);transition:background .3s}
.nav.solid{background:rgba(6,8,12,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-size:1.5rem;text-decoration:none;letter-spacing:.02em}
.logo small{display:block;font:500 .62rem Barlow;letter-spacing:.18em;color:var(--m)}
.nav nav{margin-left:auto}
.nav ul{list-style:none;padding:0;display:flex;gap:26px}
.nav ul a{text-decoration:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#d3d9e4}
.nav ul a:hover{color:var(--a)}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer}
.burger i{position:absolute;left:8px;right:8px;height:2px;background:#fff;transition:.2s}
.burger i:first-child{top:15px}.burger i:last-child{top:23px}

/* buttons */
.btn{display:inline-block;border:1px solid #fff;padding:13px 28px;font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:.2s;cursor:pointer;background:none;color:#fff;font-family:Barlow}
.btn:hover{background:#fff;color:#000}
.btn.f{background:var(--a);border-color:var(--a);color:var(--on)}
.btn.f:hover{background:#fff;border-color:#fff}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:120px 0 150px;overflow:hidden;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 62%,var(--hz) 100%)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%}
.glow{position:absolute;left:50%;bottom:-10%;width:130%;height:70%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 100%,var(--hz) 0%,transparent 65%);opacity:.9}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 65%)}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(0,0,0,.5) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E")}
.far{fill:var(--far)}.near{fill:var(--near)}.nearstroke{fill:none;stroke:var(--near)}.star{fill:#fff}
.gridl{stroke:#fff;stroke-opacity:.05}
.chart{fill:none;stroke:var(--a);stroke-width:2.6;opacity:.7;stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.6s .4s cubic-bezier(.3,.6,.2,1) forwards}
.chart-fill{fill:url(#cf);opacity:0;animation:fadein 2s 2.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes fadein{to{opacity:.22}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.chart{animation:none;stroke-dashoffset:0}.chart-fill{animation:none;opacity:.22}}
.hero .wrap{position:relative;z-index:3;width:100%}
.hero h1{font-size:clamp(3.2rem,8.2vw,7.2rem);letter-spacing:-.01em;max-width:12em;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero h1 em{font-style:normal;color:var(--a)}
.info{display:flex;gap:14px 44px;flex-wrap:wrap;margin:34px 0 26px;font:500 1.1rem Oswald;letter-spacing:.12em;text-transform:uppercase}
.info span{color:var(--a)}.count b{font-weight:600}
.lede{max-width:36em;color:#d0d6e2;margin-bottom:10px;font-size:1.1rem}
.tag{font-family:Oswald;text-transform:uppercase;letter-spacing:.1em;font-size:.9rem;color:var(--a);margin-bottom:28px}
.brk{position:relative;display:inline-block;padding:10px;margin-right:4px}
.brk::before,.brk::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--a)}
.brk::before{left:0;top:0;border-right:0;border-bottom:0}.brk::after{right:0;bottom:0;border-left:0;border-top:0}

/* sections */
section{padding:110px 0;border-top:1px solid var(--line);position:relative}
section.hero{border-top:0;padding:120px 0 250px}
section.alt{background:radial-gradient(ellipse at 85% 0%,rgba(242,184,75,.09),transparent 55%),var(--bg2)}
h2{font-size:clamp(2.4rem,5.5vw,4.6rem);margin-bottom:26px}
h3{letter-spacing:.01em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.two p{color:var(--txt);margin-bottom:1em;max-width:34em}
.sub{color:var(--m);max-width:42em;font-size:1.05rem}
.big{font:500 1.5rem/1.35 Oswald;text-transform:uppercase;color:#fff!important;letter-spacing:.02em}
.pull{border-left:3px solid var(--a);padding-left:20px;color:#fff!important;font-size:1.15rem;margin-top:1.6em}
.soon{font-family:Oswald;text-transform:uppercase;letter-spacing:.08em;color:var(--a)!important;font-size:1.1rem}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:44px;background:var(--line)}
.why-grid article{background:var(--bg2);padding:30px 26px}
.why-grid h3{font-size:1.4rem;margin-bottom:14px;color:var(--a)}
.why-grid p{color:var(--txt);font-size:.96rem}
.themes{list-style:none;padding:0;margin-top:40px}
.themes li{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;padding:26px 0;border-top:1px solid var(--line);align-items:baseline;transition:.2s}
.themes li:hover{padding-left:16px;border-color:var(--a)}
.themes h3{font-size:1.7rem}.themes p{color:var(--m)}
.placeholders{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:34px}
.placeholders i{aspect-ratio:3/4;border:1px dashed rgba(242,184,75,.4);background:linear-gradient(180deg,rgba(242,184,75,.07),transparent)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:40px;background:var(--line)}
.tiles div{background:var(--bg);padding:34px 24px;font:500 1.15rem/1.25 Oswald;text-transform:uppercase;letter-spacing:.04em;min-height:140px;display:flex;align-items:flex-end}
.tiles .hl{background:var(--a);color:var(--on)}
.note{margin-top:40px;max-width:40em;color:var(--txt)}

/* forms */
.form{display:grid;gap:18px;background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--a);padding:clamp(22px,3vw,36px)}
section.alt .form{background:var(--bg)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:6px;font-size:.85rem;font-weight:500;color:var(--m);letter-spacing:.03em}
input,select,textarea{font:inherit;font-size:1rem;color:#fff;padding:12px;border:1px solid #2a3240;background:#0d121a;width:100%;border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--a);border-color:var(--a)}
select option{background:#0d121a}
input.bad,select.bad{border-color:#ff6b5e}
.form .btn{justify-self:start}
.status{min-height:1.3em;font-size:.92rem;color:var(--a)}.status.err{color:#ff8a7e}

/* footer */
.foot{position:relative;background:var(--near);overflow:hidden;padding:200px 0 36px;background:linear-gradient(180deg,var(--bg),var(--sky2) 60%,var(--hz))}
.foot>svg{position:absolute;left:0;right:0;top:0;width:100%;height:auto;transform:scaleY(-1);opacity:0}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg2),transparent 40%)}
.foot-in{position:relative;z-index:2}
.foot-line{font-family:Oswald;text-transform:uppercase;font-weight:600;font-size:clamp(2.2rem,6vw,5rem);line-height:1;max-width:12em;margin-bottom:48px}
.foot-meta{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:32px;color:#d0d6e2}
.foot-cta .btn{margin-top:16px}
.copy{margin-top:70px;font-size:.85rem;color:var(--m)}
.foot>svg{opacity:1;transform:none;top:auto;bottom:0;z-index:1}
.foot-in{z-index:2}

@media(max-width:960px){
  .two,.themes li{grid-template-columns:1fr;gap:10px}
  .two{gap:34px}
  .why-grid,.tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .burger{display:block;margin-left:auto}
  .nav-cta{display:none}
  .nav nav{position:absolute;top:100%;left:0;right:0;background:rgba(6,8,12,.97);margin:0;display:none;padding:10px 32px 24px}
  .nav.open nav{display:block}
  .nav ul{flex-direction:column;gap:16px}
  .nav.open .burger i:first-child{top:19px;transform:rotate(45deg)}
  .nav.open .burger i:last-child{top:19px;transform:rotate(-45deg)}
  .hero{padding-bottom:150px}
  .brk{padding:0;margin:0 0 12px}.brk::before,.brk::after{display:none}
  .btn{margin-bottom:0}
  .hero h1{font-size:clamp(2.8rem,13vw,4.2rem)}
  .why-grid,.tiles,.row2{grid-template-columns:1fr}
  .placeholders{grid-template-columns:1fr 1fr}
  section{padding:80px 0}
  .wrap{padding:0 22px}
}