:root{
 --night:#0c0e13;--night-2:#141821;--ink:#16181d;--muted:#5c606b;--paper:#faf8f4;--line:#e8e3d9;
 --gold:#ffc83d;--gold-2:#ffb300;--teal:#2bb5b0;--violet:#7a5cff;--card:#fff;
 --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;--serif:'Lora',Georgia,serif;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.7 var(--serif);overflow-x:hidden}
a{color:#0f7f7b}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.025em;line-height:1.15;margin:0}
h2{font-size:clamp(26px,3.4vw,38px)}h3{font-size:20px}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
header.scrolled{background:rgba(12,14,19,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;flex-wrap:nowrap}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 19px/1 var(--sans);color:#fff;text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.logo b{font-weight:800;color:var(--gold)}
.mark{width:22px;height:22px;border-radius:7px;background:conic-gradient(from 200deg,var(--gold),var(--teal),var(--violet),var(--gold));box-shadow:0 0 18px rgba(255,200,61,.45);animation:spin 9s linear infinite}
nav{display:flex;gap:6px}
nav a{font:500 15px var(--sans);color:rgba(255,255,255,.72);text-decoration:none;padding:8px 12px;border-radius:99px;transition:color .2s,background .2s}
nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav a.on{color:#fff;background:rgba(255,255,255,.12)}

/* animated aurora background */
.aurora{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,#161a26 0%,var(--night) 60%)}
.aurora i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;will-change:transform}
.aurora .b1{width:48vw;height:48vw;left:-10vw;top:-18vw;background:radial-gradient(circle,var(--gold) 0%,transparent 65%);animation:f1 18s ease-in-out infinite alternate}
.aurora .b2{width:42vw;height:42vw;right:-8vw;top:-6vw;background:radial-gradient(circle,var(--teal) 0%,transparent 65%);animation:f2 22s ease-in-out infinite alternate}
.aurora .b3{width:36vw;height:36vw;left:30vw;bottom:-22vw;background:radial-gradient(circle,var(--violet) 0%,transparent 65%);animation:f3 26s ease-in-out infinite alternate}
.aurora .b4{width:22vw;height:22vw;left:55vw;top:10%;background:radial-gradient(circle,#ff7a59 0%,transparent 65%);opacity:.35;animation:f1 30s ease-in-out infinite alternate-reverse}
.grain{position:absolute;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes f1{to{transform:translate(18vw,10vw) scale(1.15)}}
@keyframes f2{to{transform:translate(-16vw,14vw) scale(.9)}}
@keyframes f3{to{transform:translate(-12vw,-12vw) scale(1.2)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* hero */
.hero{position:relative;color:#fff;overflow:hidden;isolation:isolate}
.hero-in{position:relative;z-index:1}
.hero-lg{min-height:min(92vh,820px);display:flex;align-items:center;padding:120px 0 90px}
.hero-lg h1{font-size:clamp(38px,6.4vw,76px);font-weight:800;max-width:900px;margin:22px 0 22px}
.hl{background:linear-gradient(90deg,var(--gold),#ffe08a 40%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shine 6s ease-in-out infinite alternate}
@keyframes shine{to{background-position:100% 0}}
.hero .lead{font:400 clamp(18px,2vw,21px)/1.6 var(--serif);color:rgba(255,255,255,.78);max-width:640px;margin:0}
.hero-sm{padding:140px 0 64px}
.hero-sm h1{font-size:clamp(30px,4.6vw,50px);font-weight:800;max-width:900px;margin:14px 0 14px}
.hero-sm .meta{color:rgba(255,255,255,.6)}
.hero-sm .tag{background:rgba(255,200,61,.14);color:var(--gold)}
.pill{display:inline-flex;align-items:center;gap:10px;font:500 13px var(--sans);color:rgba(255,255,255,.85);padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,200,61,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(255,200,61,0)}100%{box-shadow:0 0 0 0 rgba(255,200,61,0)}}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:26px;height:42px;border:2px solid rgba(255,255,255,.35);border-radius:14px;z-index:1}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{60%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);color:#15161a;text-decoration:none;font:700 15px/1 var(--sans);letter-spacing:.02em;text-transform:uppercase;padding:18px 28px;border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .25s,background .2s;box-shadow:0 10px 30px -10px rgba(255,200,61,.7)}
.btn:hover{transform:translateY(-2px);background:#ffd25e;box-shadow:0 16px 40px -12px rgba(255,200,61,.85)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);box-shadow:none}
.btn-ghost:hover{background:rgba(255,255,255,.08);box-shadow:none}

/* bands */
.band{position:relative;padding:96px 0;isolation:isolate}
.band>.wrap{position:relative;z-index:1}
.band-dark{color:#fff;overflow:hidden}
.band-dark .aurora i{opacity:.35}
.band-head{max-width:640px;margin-bottom:44px}
.band-head p{color:var(--muted);margin:14px 0 0}
.band-dark .band-head p{color:rgba(255,255,255,.7)}
.eyebrow{display:inline-block;font:600 13px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#0f8e89;margin-bottom:12px}
.band-dark .eyebrow{color:var(--gold)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.grid1{display:grid;gap:18px}

/* cards */
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;text-decoration:none;color:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--gold),var(--teal),var(--violet));transform:scaleX(0);transform-origin:left;transition:transform .5s}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -24px rgba(20,24,33,.35);border-color:transparent}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0 0 10px;font-size:20px}
.card p{margin:0 0 20px;color:var(--muted);font-size:16px;line-height:1.6}
.more{margin-top:auto;font:600 14px var(--sans);color:#0f7f7b}
.more em{font-style:normal;display:inline-block;transition:transform .25s}
.card:hover .more em{transform:translateX(5px)}
.tag{align-self:flex-start;display:inline-block;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.1em;color:#0d7773;background:#e3f5f4;padding:5px 11px;border-radius:99px;margin-bottom:14px}

.step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:26px;backdrop-filter:blur(8px);transition:transform .3s,background .3s}
.step:hover{transform:translateY(-4px);background:rgba(255,255,255,.08)}
.num{display:inline-block;font:800 34px/1 var(--sans);background:linear-gradient(135deg,var(--gold),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.step h3{margin-bottom:8px}.step p{margin:0;color:rgba(255,255,255,.7);font-size:16px;line-height:1.6}

.cta{display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(120deg,#fff4d1,#e5f7f5);border-radius:24px;padding:48px}
.cta p{margin:10px 0 0;color:var(--muted)}

/* article content */
.content{padding:64px 0 96px}
.content h2{font-size:clamp(24px,2.6vw,30px);margin:48px 0 14px}
.content h3{margin:32px 0 10px}
.content p{margin:0 0 18px}
.content ul{padding-left:0;list-style:none;margin:0 0 22px}
.content li{position:relative;padding-left:30px;margin:10px 0}
.content li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,var(--gold),var(--teal));transform:rotate(45deg)}
.content .lead{font-size:20px;color:var(--muted)}
.meta{font:14px var(--sans);color:var(--muted);margin:0}
.note{background:#fff8e1;border-left:4px solid var(--gold);border-radius:10px;padding:16px 20px;font:15px/1.6 var(--sans);margin:0 0 28px}
.content .btn{margin-top:8px}
.content .card{margin:0}

/* footer */
footer{background:var(--night);color:rgba(255,255,255,.6);font:14px/1.7 var(--sans)}
footer .wrap{padding:56px 20px 40px}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 18px}
.flinks a{color:rgba(255,255,255,.8);text-decoration:none}
.flinks a:hover{color:var(--gold)}
footer p{margin:8px 0 0}
footer .inl{color:var(--gold)}

/* reveal on scroll */
.js .reveal,.js .reveal-group>*{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal-group>*{animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards}
.js .reveal-group>*:nth-child(2){animation-delay:.06s}.js .reveal-group>*:nth-child(3){animation-delay:.12s}.js .reveal-group>*:nth-child(n+4){animation-delay:.18s}
@keyframes rise{to{opacity:1;transform:none}}

@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}.grid4{grid-template-columns:1fr 1fr}.cta{flex-direction:column;align-items:flex-start;padding:34px}}
@media (max-width:640px){
 body{font-size:17px}
 .bar{height:auto;padding-top:14px;padding-bottom:10px;flex-wrap:wrap}
 nav{width:100%;overflow-x:auto;gap:2px;margin:0 -8px}
 nav a{padding:7px 10px;font-size:14px}
 header{background:rgba(12,14,19,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
 .grid3,.grid4{grid-template-columns:1fr}
 .hero-lg{padding:150px 0 90px;min-height:auto}
 .hero-sm{padding:150px 0 48px}
 .band{padding:70px 0}
 .aurora i{filter:blur(50px)}
 .aurora .b1{width:90vw;height:90vw}.aurora .b2{width:80vw;height:80vw}.aurora .b3{width:80vw;height:80vw}
 .btn{width:100%}
 .scroll-cue{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.js .reveal,.js .reveal-group>*{opacity:1;transform:none}}