/* ============================================================
   Aurora Native — shared styles
   Palette is locked: teal → cyan → (late) violet → magenta accent
   ============================================================ */
:root{
  --bg:#05060a;
  --bg-soft:#0a0c14;
  --panel:#0e111b;
  --line:rgba(255,255,255,.08);
  --txt:#eef1f7;
  --muted:#9aa3b4;
  --faint:#646d80;

  /* ===== PALETTE — swap these 6 lines to reskin the whole site ===== */
  --c1:#2dd4bf;
  --c2:#38bdf8;
  --c3:#8b5cf6;
  --c4:#e15bd6;
  --accent:#2dd4bf;
  --grad:linear-gradient(100deg,var(--c1) 0%,var(--c2) 46%,var(--c3) 78%,var(--c4) 100%);
  --glow:color-mix(in srgb, var(--accent) 55%, transparent);

  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);
  font-family:'Inter',system-ui,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.05}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- aurora backdrop ---------- */
.aurora{position:fixed;inset:-20% -10% auto -10%;height:120vh;z-index:0;pointer-events:none;filter:blur(70px);opacity:.55}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.a1{width:55vw;height:55vw;left:-5vw;top:-10vh;background:radial-gradient(circle at 30% 30%,var(--c1),transparent 60%);animation:drift1 22s ease-in-out infinite}
.a2{width:48vw;height:48vw;left:8vw;top:-4vh;background:radial-gradient(circle at 50% 50%,var(--c2),transparent 60%);animation:drift1 28s ease-in-out infinite reverse}
.a3{width:40vw;height:40vw;right:-8vw;top:-2vh;background:radial-gradient(circle at 50% 50%,var(--c3),transparent 60%);animation:drift2 26s ease-in-out infinite}
.a4{width:30vw;height:30vw;right:6vw;top:18vh;background:radial-gradient(circle at 50% 50%,var(--c4),transparent 58%);animation:drift3 30s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-7vw,4vh) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,-5vh) scale(1.15)}}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,6,10,0) 0%,rgba(5,6,10,.55) 58%,rgba(5,6,10,.92) 78%,#05060a 100%)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.content{position:relative;z-index:2}

/* ---------- nav ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
header.scrolled{background:rgba(7,8,14,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:600;font-size:18px;letter-spacing:-.01em}
.logo .dot{width:13px;height:13px;border-radius:50%;background:var(--grad);box-shadow:0 0 16px 2px var(--glow)}
.navlinks{display:flex;gap:32px;align-items:center}
.navlinks a{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--txt)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;border-radius:999px;padding:11px 22px;transition:transform .2s,box-shadow .2s,background .2s;cursor:pointer;border:0;font-family:inherit}
.btn-primary{background:var(--grad);color:#05060a;box-shadow:0 6px 30px -8px var(--glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 42px -6px var(--glow)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--txt);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
/* language switcher */
.langswitch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.03);margin-left:22px}
.langswitch button{background:none;border:0;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--faint);padding:5px 10px;border-radius:999px;transition:color .2s,background .2s}
.langswitch button:hover{color:var(--muted)}
.langswitch button.active{color:#05060a;background:var(--grad)}
.nav-right{display:flex;align-items:center}
@media(max-width:820px){.langswitch.desktop{display:none}}
.mobilemenu .langswitch{margin:18px 28px 6px;display:inline-flex}
.navtoggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:30px;flex-direction:column;justify-content:center;gap:6px}
.navtoggle span{display:block;height:2px;width:24px;background:var(--txt);transition:.25s}
.mobilemenu{display:none}
@media(max-width:820px){
  .navlinks{display:none}
  .nav-cta{display:none}
  .navtoggle{display:flex}
  .mobilemenu{display:block;position:fixed;inset:70px 0 auto 0;z-index:49;background:rgba(8,9,14,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    transform:translateY(-130%);transition:transform .32s cubic-bezier(.2,.7,.2,1)}
  .mobilemenu.open{transform:translateY(0)}
  .mobilemenu a{display:block;padding:16px 28px;border-top:1px solid var(--line);color:var(--muted);font-weight:500}
  .mobilemenu a:first-child{border-top:0}
  .mobilemenu .btn{margin:16px 28px;display:flex;justify-content:center}
}

/* ---------- hero (home) ---------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 90px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;background:rgba(255,255,255,.03);margin-bottom:30px;width:fit-content}
.eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 2.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(44px,8.2vw,104px);font-weight:600;max-width:14ch}
.hero h1 .line2{display:block}
.hero p.sub{margin-top:30px;font-size:clamp(17px,2.1vw,22px);color:var(--muted);max-width:62ch;font-weight:400}
.hero p.sub b{color:var(--txt);font-weight:600}
.hero-cta{margin-top:42px;display:flex;gap:14px;flex-wrap:wrap}
.scrollhint{margin-top:80px;color:var(--faint);font-size:13px;letter-spacing:.05em;display:flex;align-items:center;gap:10px}
.scrollhint .ln{width:38px;height:1px;background:linear-gradient(90deg,var(--faint),transparent)}

/* ---------- inner page hero ---------- */
.page-hero{padding:160px 0 70px}
.page-hero h1{font-size:clamp(38px,6.4vw,76px);font-weight:600;max-width:18ch}
.page-hero .lead{margin-top:26px;font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:60ch}
.page-hero .lead b{color:var(--txt);font-weight:600}

/* ---------- section scaffold ---------- */
section.blk{padding:110px 0}
section.tight{padding:72px 0}
.kicker{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:18px}
.blk h2{font-size:clamp(32px,5vw,56px);font-weight:600;max-width:20ch}
.lead{color:var(--muted);font-size:clamp(16px,1.7vw,19px);max-width:60ch;margin-top:22px}
.divider{height:1px;background:var(--line);max-width:var(--maxw);margin:0 auto}

/* stat band */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:42px 26px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat .num{font-family:'Space Grotesk';font-size:clamp(34px,4vw,52px);font-weight:600}
.stat .lbl{color:var(--muted);font-size:14.5px;margin-top:8px}
@media(max-width:860px){.stats .grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-left:0}}

/* reframe */
.reframe .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.reframe .quote{font-family:'Space Grotesk';font-size:clamp(24px,3vw,34px);font-weight:500;line-height:1.25}
.reframe .quote .x{color:var(--faint);text-decoration:line-through;text-decoration-color:var(--glow)}
@media(max-width:820px){.reframe .row{grid-template-columns:1fr;gap:30px}}

/* cards grid (4P / generic) */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:56px}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{position:relative;border:1px solid var(--line);border-radius:18px;padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--glow)}
.card::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .3s;mix-blend-mode:overlay}
.card:hover::before{opacity:.10}
.card .idx{font-family:'Space Grotesk';font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.1em}
.card h3{font-size:23px;font-weight:600;margin:14px 0 12px}
.card p{color:var(--muted);font-size:15px}
.card ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:9px}
.card ul li{color:var(--muted);font-size:14.5px;padding-left:20px;position:relative}
.card ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--grad)}
@media(max-width:820px){.cards,.cards.three{grid-template-columns:1fr}}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.chip{border:1px solid var(--line);border-radius:999px;padding:9px 17px;font-size:14px;color:var(--muted);background:rgba(255,255,255,.02)}
.chip b{color:var(--txt);font-weight:600}

/* feature rows (pillars in depth) */
.features{margin-top:56px;border-top:1px solid var(--line)}
.feature{display:grid;grid-template-columns:.42fr 1fr;gap:48px;padding:40px 0;border-bottom:1px solid var(--line);align-items:start}
.feature .ft-h{display:flex;flex-direction:column;gap:10px}
.feature .ft-n{font-family:'Space Grotesk';color:var(--accent);font-size:14px;font-weight:600;letter-spacing:.08em}
.feature .ft-h h3{font-size:26px;font-weight:600}
.feature .ft-b{color:var(--muted);font-size:16px}
@media(max-width:820px){.feature{grid-template-columns:1fr;gap:14px}}

/* process steps / timeline */
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{border:1px solid var(--line);border-radius:16px;padding:28px;background:rgba(255,255,255,.02);position:relative}
.step .ph{font-family:'Space Grotesk';font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.06em}
.step h4{font-size:19px;font-weight:600;margin:10px 0 10px;font-family:'Space Grotesk'}
.step p{color:var(--muted);font-size:14.5px}
.step .bar{height:3px;border-radius:3px;background:var(--grad);margin-top:18px;opacity:.7}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* economics bars */
.econ .row{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.bars{display:flex;flex-direction:column;gap:20px;margin-top:10px}
.bar .t{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.bar .track{height:12px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden}
.bar .fill{height:100%;border-radius:999px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.bar.show .fill{transform:scaleX(1)}
.fill.payroll{background:linear-gradient(90deg,#475569,#64748b);width:45%}
.fill.tokens{background:linear-gradient(90deg,var(--c1),var(--c2));width:18%}
.fill.margin{background:var(--grad);width:78%}
@media(max-width:820px){.econ .row{grid-template-columns:1fr;gap:34px}}

/* three-column list (why / deliverables) */
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.tc-item{border-top:2px solid transparent;border-image:var(--grad);border-image-slice:1;padding-top:24px}
.tc-item .n{font-family:'Space Grotesk';color:var(--faint);font-size:14px}
.tc-item h3{font-size:21px;font-weight:600;margin:12px 0 12px}
.tc-item p{color:var(--muted);font-size:15px}
@media(max-width:820px){.three-col{grid-template-columns:1fr;gap:34px}}

/* commercial layers */
.layers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.layer{border:1px solid var(--line);border-radius:18px;padding:32px;background:rgba(255,255,255,.02)}
.layer .ln{font-family:'Space Grotesk';font-size:13px;color:var(--accent);letter-spacing:.08em;font-weight:600}
.layer h3{font-size:22px;font-weight:600;margin:12px 0 12px}
.layer p{color:var(--muted);font-size:15px}
@media(max-width:880px){.layers{grid-template-columns:1fr}}

/* split (generic two column with prose) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.wide-left{grid-template-columns:1.1fr .9fr}
.prose p{color:var(--muted);font-size:16px;margin-top:16px}
.prose p:first-child{margin-top:0}
.prose p b{color:var(--txt)}
@media(max-width:820px){.split,.split.wide-left{grid-template-columns:1fr;gap:32px}}

/* callout */
.callout{border:1px solid var(--line);border-radius:20px;padding:44px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));position:relative;overflow:hidden}
.callout::after{content:"";position:absolute;inset:0;background:var(--grad);opacity:.06}
.callout .q{position:relative;font-family:'Space Grotesk';font-size:clamp(22px,2.6vw,30px);font-weight:500;line-height:1.3}
.callout .who{position:relative;color:var(--muted);margin-top:18px;font-size:15px}

/* roles / team list */
.roles{margin-top:48px;border-top:1px solid var(--line)}
.role{display:grid;grid-template-columns:.34fr 1fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--line)}
.role h4{font-size:20px;font-weight:600;font-family:'Space Grotesk'}
.role p{color:var(--muted);font-size:15.5px}
@media(max-width:760px){.role{grid-template-columns:1fr;gap:10px}}

.fit{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.fit .col{border:1px solid var(--line);border-radius:16px;padding:30px}
.fit .col h4{font-family:'Space Grotesk';font-size:17px;margin-bottom:16px}
.fit .col.yes h4{color:var(--c1)}
.fit .col.no h4{color:var(--faint)}
.fit .col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.fit .col li{color:var(--muted);font-size:15px;padding-left:22px;position:relative}
.fit .col.yes li::before{content:"+";position:absolute;left:0;color:var(--c1);font-weight:700}
.fit .col.no li::before{content:"–";position:absolute;left:0;color:var(--faint);font-weight:700}
@media(max-width:700px){.fit{grid-template-columns:1fr}}

/* CTA */
.cta{text-align:center;padding:140px 0}
.cta h2{font-size:clamp(36px,6vw,72px);font-weight:600;margin:0 auto;max-width:16ch}
.cta p{color:var(--muted);font-size:19px;margin:24px auto 40px;max-width:48ch}

/* contact form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.form .full{grid-column:1 / -1}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:8px;letter-spacing:.02em}
.field input,.field textarea{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--txt);font-family:inherit;font-size:15px;transition:border-color .2s,background .2s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--glow);background:rgba(255,255,255,.05)}
.field textarea{min-height:140px;resize:vertical}
@media(max-width:640px){.form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding:60px 0 40px;margin-top:40px}
footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px}
footer .col h5{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:16px;font-weight:600}
footer .col a{display:block;color:var(--muted);font-size:14.5px;margin-bottom:10px;transition:color .2s}
footer .col a:hover{color:var(--txt)}
footer .brandcol .logo{margin-bottom:14px}
footer .brandcol p{color:var(--muted);font-size:14.5px;max-width:30ch}
footer .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;border-top:1px solid var(--line);padding-top:24px;color:var(--faint);font-size:13.5px}
@media(max-width:820px){footer .top{grid-template-columns:1fr 1fr;gap:30px 20px}footer .brandcol{grid-column:1 / -1}}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.aurora span{animation:none}}