/* ============================================================
   DAYLIGHT — variant B. All colour lives in :root. No raw hex
   below the token blocks.
   ============================================================ */
:root{--wm-tick:var(--blue);
  color-scheme: light dark;

  /* canvas + ink */
  --canvas:#FBFCFD;
  --canvas-2:#F1F6F9;
  --surface:#FFFFFF;
  --ink:#0B0D0E;
  --ink-2:#39424A;
  --ink-3:#6A757F;
  --rule:#E2E8ED;
  --rule-2:#C9D6DE;
  --grid:#E9EFF3;
  --wire:#A9BCC7;

  /* blue family, all one hue */
  --blue:#93DEFE;
  --blue-soft:#D9F3FF;
  --blue-wash:#EDF9FE;
  --blue-mid:#5B9FC4;
  --blue-deep:#14607F;
  --blue-ink:#0C4A63;

  /* full-bleed near-black bands */
  --band:#0B0D0E;
  --band-2:#15191B;
  --band-ink:#F5F9FB;
  --band-ink-2:#A6B3BC;
  --band-rule:#262D32;
  --band-blue:#93DEFE;

  --focus:#14607F;
  --shadow:0 1px 2px rgba(11,13,14,.04), 0 8px 26px -18px rgba(11,13,14,.35);
  --shadow-lift:0 2px 4px rgba(11,13,14,.05), 0 20px 46px -26px rgba(11,13,14,.45);

  /* headline gradient — deep stops only, so every stop passes AA on the light canvas */
  --grad-1:#14607F;
  --grad-2:#4A6E88;
  --grad-3:#0B0D0E;
  --grad-solid:#0C4A63;
  /* headline gradient on the near-black bands — the pale blues get to glow here */
  --grad-band-1:#93DEFE;
  --grad-band-2:#BCEAFF;
  --grad-band-3:#F5F9FB;
  --grad-band-solid:#93DEFE;

  --display:'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap:1180px;
  --gut:clamp(20px, 5vw, 48px);
}

/* genuine inversion, not a filter */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --canvas:#0B0D0E;
    --canvas-2:#121618;
    --surface:#15191B;
    --ink:#F5F9FB;
    --ink-2:#BCC7CE;
    --ink-3:#8A959D;
    --rule:#262D32;
    --rule-2:#384248;
    --grid:#1B2125;
  --wire:#414C53;
    --wire:#414C53;

    --blue:#93DEFE;
    --blue-soft:#16323F;
    --blue-wash:#101E25;
    --blue-mid:#7CC4E8;
    --blue-deep:#A8E5FE;
    --blue-ink:#C6EEFF;

    --band:#000000;
    --band-2:#0B0D0E;
    --band-ink:#F5F9FB;
    --band-ink-2:#A6B3BC;
    --band-rule:#22292E;

    /* inverted: on a near-black canvas the pale hues carry the headline */
    --grad-1:#93DEFE;
    --grad-2:#7FB4D4;
    --grad-3:#F5F9FB;
    --grad-solid:#A8E5FE;

    --focus:#93DEFE;
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 20px 46px -26px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --canvas:#0B0D0E;
  --canvas-2:#121618;
  --surface:#15191B;
  --ink:#F5F9FB;
  --ink-2:#BCC7CE;
  --ink-3:#8A959D;
  --rule:#262D32;
  --rule-2:#384248;
  --grid:#1B2125;

  --blue:#93DEFE;
  --blue-soft:#16323F;
  --blue-wash:#101E25;
  --blue-mid:#7CC4E8;
  --blue-deep:#A8E5FE;
  --blue-ink:#C6EEFF;

  --band:#000000;
  --band-2:#0B0D0E;
  --band-ink:#F5F9FB;
  --band-ink-2:#A6B3BC;
  --band-rule:#22292E;

  --grad-1:#93DEFE;
  --grad-2:#7FB4D4;
  --grad-3:#F5F9FB;
  --grad-solid:#A8E5FE;

  --focus:#93DEFE;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 8px 26px -18px rgba(0,0,0,.9);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 20px 46px -26px rgba(0,0,0,.95);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.66;
  font-weight:400; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--blue-deep); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--blue-ink)}
:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:3px}
::selection{background:var(--blue); color:var(--band)}

h1,h2,h3,h4{font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.06; margin:0; text-wrap:balance}
h1{font-size:clamp(2.55rem, 6.1vw, 4.5rem); font-weight:800; letter-spacing:-.03em}
h2{font-size:clamp(2rem, 4vw, 3.1rem)}
h3{font-size:clamp(1.15rem, 1.7vw, 1.4rem); line-height:1.2; letter-spacing:-.01em}
h4{font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700}
p{margin:0 0 1.1em}
.lede{font-size:clamp(1.08rem, 1.7vw, 1.35rem); line-height:1.6; color:var(--ink-2); max-width:62ch}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--canvas); padding:14px 20px; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- gradient headline ----------
   Fallback first: a solid, AA-safe colour. The gradient is only applied
   where background-clip:text is actually supported, so the words can
   never come out invisible. */
.ln{display:block}
.grad{
  display:inline-block; color:var(--grad-solid);
  padding-bottom:.08em; margin-bottom:-.08em;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)){
  .grad{
    background-image:linear-gradient(90deg, var(--grad-1) 0%, var(--grad-2) 46%, var(--grad-3) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.band .grad{color:var(--grad-band-solid)}
@supports ((background-clip: text) or (-webkit-background-clip: text)){
  .band .grad{
    background-image:linear-gradient(90deg, var(--grad-band-1) 0%, var(--grad-band-2) 46%, var(--grad-band-3) 100%);
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}

.eyebrow{
  font-family:var(--body); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue-deep);
  margin:0 0 18px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--blue); display:block}

/* ---------- top bar ---------- */
.topbar{border-bottom:1px solid var(--rule); background:var(--canvas-2); font-size:.82rem}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px}
.topbar span{color:var(--ink-3)}
.topbar nav{display:flex; align-items:center; gap:4px}
.topbar a{color:var(--ink-2); text-decoration:none; padding:10px 10px; display:inline-flex; align-items:center; min-height:40px}
.topbar a:hover{color:var(--blue-deep)}
.topbar a{white-space:nowrap}
@media (max-width:640px){ .topbar span{display:none} .topbar .wrap{justify-content:flex-end} }

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:90; background:var(--canvas); border-bottom:1px solid var(--rule)}
.header .wrap{display:flex; align-items:center; gap:14px; min-height:72px}
.logo{
  font-family:var(--display); font-weight:800; font-size:1.42rem;
  letter-spacing:.045em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; line-height:1; white-space:nowrap;
}
.logo .tick{color:var(--blue)}
:root[data-theme="light"] .logo .tick,
.band .logo .tick{color:var(--blue)}
.brand{display:inline-flex; align-items:center; min-height:44px; text-decoration:none}

.nav{display:none; margin-inline:auto}
@media (min-width:1080px){ .nav{display:flex; align-items:center; gap:2px} }
.nav-item{position:relative}
.nav-btn{
  font:inherit; font-size:.94rem; font-weight:500; color:var(--ink-2);
  background:none; border:0; cursor:pointer; padding:11px 14px;
  min-height:44px; display:inline-flex; align-items:center; gap:6px;
  border-radius:8px; text-decoration:none;
}
.nav-btn:hover{color:var(--ink); background:var(--canvas-2)}
.nav-btn .caret{width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease}
.nav-item:hover .caret, .nav-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}

.mega{
  position:absolute; top:calc(100% + 10px); left:-12px; z-index:95;
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow-lift); padding:16px;
  min-width:340px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-item:hover > .mega,
.nav-item:focus-within > .mega,
.nav-btn[aria-expanded="true"] + .mega{opacity:1; visibility:visible; transform:none}
.mega.two{min-width:660px}
.mega-cols{display:grid; gap:14px}
.mega.two .mega-cols{grid-template-columns:1fr 1fr}
.mega-head{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:4px 10px 8px; font-weight:700}
.mlink{display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink)}
.mlink:hover{background:var(--blue-wash); color:var(--ink)}
.mlink strong{display:block; font-size:.94rem; font-weight:600; line-height:1.3}
.mlink span{display:block; font-size:.8rem; color:var(--ink-3); line-height:1.4}
.mega-foot{margin-top:12px; padding-top:12px; border-top:1px solid var(--rule)}
.mega-foot a{font-size:.84rem; font-weight:600; text-decoration:none}
.mega-foot a::after{content:" \2192"}

.head-cta{display:flex; align-items:center; gap:10px; margin-left:auto}
.head-cta .btn{white-space:nowrap}
@media (max-width:719px){ .head-cta .btn-p{display:none} }
@media (min-width:1080px){ .head-cta{margin-left:0} }
.icon-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:10px; background:var(--surface);
  color:var(--ink-2); cursor:pointer; padding:0;
}
.icon-btn:hover{border-color:var(--rule-2); color:var(--ink)}
.icon-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round}
.icon-btn .moon{display:none}
:root[data-theme="dark"] .icon-btn .sun{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .icon-btn .sun{display:none}
  :root:not([data-theme="light"]) .icon-btn .moon{display:block}
}

.burger{display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center;
  border:1px solid var(--rule); border-radius:10px; background:var(--surface); cursor:pointer; color:var(--ink)}
.burger svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round}
@media (min-width:1080px){ .burger{display:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px; border-radius:10px;
  font-family:var(--body); font-size:.96rem; font-weight:600; line-height:1.2;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.btn svg{width:18px; height:18px; flex:none}
.btn-p{background:var(--ink); color:var(--canvas); border-color:var(--ink)}
.btn-p:hover{background:var(--blue-ink); border-color:var(--blue-ink); color:var(--canvas); transform:translateY(-1px)}
.btn-s{background:var(--surface); color:var(--ink); border-color:var(--rule-2)}
.btn-s:hover{border-color:var(--ink); color:var(--ink); transform:translateY(-1px)}
.btn-b{background:var(--blue); color:var(--band); border-color:var(--blue)}
.btn-b:hover{background:var(--blue-soft); color:var(--band); transform:translateY(-1px)}
.band .btn-p{background:var(--band-ink); color:var(--band); border-color:var(--band-ink)}
.band .btn-s{background:transparent; color:var(--band-ink); border-color:var(--band-rule)}
.band .btn-s:hover{border-color:var(--band-ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.small{font-size:.82rem; color:var(--ink-3)}

/* ---------- sections ---------- */
.sec{padding:clamp(60px, 9vw, 116px) 0}
.sec-tight{padding:clamp(44px, 6vw, 74px) 0}
.hr{height:1px; background:var(--rule); border:0; margin:0}
.sec-head{max-width:64ch; margin-bottom:clamp(36px, 5vw, 58px)}
.sec-head p{color:var(--ink-2); font-size:1.06rem; margin-bottom:0}

.band{background:var(--band); color:var(--band-ink); border-block:1px solid var(--band-rule)}
.band h2,.band h3{color:var(--band-ink)}
.band p{color:var(--band-ink-2)}
.band .eyebrow{color:var(--band-blue)}
.band .eyebrow::before{background:var(--band-blue)}
.band .small{color:var(--band-ink-2)}
.band a{color:var(--band-blue)}

/* ---------- hero ---------- */
.hero{padding:clamp(48px,7vw,84px) 0 0; background:
  radial-gradient(1100px 420px at 50% -8%, var(--blue-wash), transparent 70%);
}
.hero-top{max-width:56ch}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:28px}
.hero-meta{display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:26px; font-size:.86rem; color:var(--ink-3)}
.hero-meta b{color:var(--ink-2); font-weight:600}

/* ---------- the schematic ---------- */
.osw{
  margin:clamp(30px,5vw,54px) auto 0; max-width:960px; position:relative;
}
.os{display:block; width:100%; height:auto; font-family:var(--body)}
.os-l{font-size:22px; font-weight:600; fill:var(--ink)}
.os-c{font-size:12.5px; font-weight:400; fill:var(--ink-3)}
.os-core-l{font-size:27px; font-weight:700; fill:var(--ink); font-family:var(--display); letter-spacing:-.01em}
.os-val{font-size:27px; font-weight:700; fill:var(--ink); font-family:var(--display)}
.os-sm{font-size:19px}
.os-cap{font-size:12.5px; font-weight:600; fill:var(--ink-3); letter-spacing:.09em; text-transform:uppercase}
.node{fill:var(--surface); stroke:var(--rule-2); stroke-width:1.25}
.node-core{fill:var(--surface); stroke:var(--ink); stroke-width:1.6}
.cap{fill:var(--blue)}
.cap-deep{fill:var(--blue-mid)}
.link{fill:none; stroke:var(--wire); stroke-width:1.4}
.link-sub{fill:none; stroke:var(--wire); stroke-width:1.2; stroke-dasharray:3 6}
.orbit{fill:none; stroke:var(--rule-2); stroke-width:1; stroke-dasharray:2 9}
.tick-m{fill:none; stroke:var(--blue-mid); stroke-width:1.6; stroke-linecap:round}
.bar{fill:var(--blue)}
.bar-hi{fill:var(--blue-mid)}
.dot{fill:var(--blue-mid)}
.pulse{fill:none; stroke:var(--blue); stroke-width:1.6; opacity:0}
.sig{fill:var(--blue-mid); r:4.6}
.halo{fill:var(--blue-soft); opacity:.55}

/* signals ride the same geometry as the drawn links */
.sig{offset-distance:0%; offset-rotate:0deg}
.s1{offset-path:path("M480 154 L480 278"); animation:travel 2.6s linear 0.0s infinite}
.s2{offset-path:path("M634 227 C598 227 596 262 585 292"); animation:travel 2.9s linear 0.9s infinite}
.s3{offset-path:path("M634 432 C598 432 596 398 585 368"); animation:travel 3.4s linear 0.2s infinite}
.s4{offset-path:path("M480 506 L480 382"); animation:travel 3.0s linear 1.3s infinite}
.s5{offset-path:path("M326 432 C362 432 364 398 375 368"); animation:travel 3.3s linear 0.7s infinite}
.s6{offset-path:path("M326 227 C362 227 364 262 375 292"); animation:travel 3.1s linear 0.4s infinite}
.s7{offset-path:path("M790 592 C755 520 660 425 585 374"); animation:travel-back 4.2s linear 0.0s infinite}
.s8{offset-path:path("M260 56 C360 66 430 160 455 278"); animation:travel-back 4.6s linear 0.6s infinite}
@keyframes travel{
  0%{offset-distance:0%; opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{offset-distance:100%; opacity:0}
}
@keyframes travel-back{
  0%{offset-distance:100%; opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{offset-distance:0%; opacity:0}
}
.pulse{transform-box:fill-box; transform-origin:center; animation:pulse 5.4s ease-out infinite}
.p1{animation-delay:0s}.p2{animation-delay:.9s}.p3{animation-delay:1.8s}
.p4{animation-delay:2.7s}.p5{animation-delay:3.6s}.p6{animation-delay:4.5s}
@keyframes pulse{
  0%{opacity:.85; transform:scale(1)}
  55%{opacity:0; transform:scale(1.12)}
  100%{opacity:0; transform:scale(1.12)}
}
.corepulse{transform-box:fill-box; transform-origin:center; animation:corepulse 2.6s ease-in-out infinite}
@keyframes corepulse{0%,100%{opacity:.25; transform:scale(.98)} 50%{opacity:.75; transform:scale(1.03)}}
.bar{transform-box:fill-box; transform-origin:bottom; animation:grow 4.8s ease-in-out infinite}
.b2{animation-delay:.18s}.b3{animation-delay:.36s}.b4{animation-delay:.54s}.b5{animation-delay:.72s}
@keyframes grow{0%,100%{transform:scaleY(.42)} 50%{transform:scaleY(1)}}
.orbit{animation:spin 26s linear infinite}
@keyframes spin{to{stroke-dashoffset:-220}}
.tick-m{stroke-dasharray:180; stroke-dashoffset:180; animation:draw 5.2s ease-in-out infinite}
@keyframes draw{0%{stroke-dashoffset:180} 45%,100%{stroke-dashoffset:0}}
.live{transform-box:fill-box; transform-origin:center; animation:blink 1.9s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.35} 50%{opacity:1}}

@media (max-width:820px){
  .os-l{font-size:34px}
  .os-l.os-sm{font-size:32px}
  .os-core-l{font-size:34px}
  .os-c{display:none}
  .os-tile{display:none}
  .s8{display:none}
}

/* ---------- grids and cards ---------- */
.grid{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:14px; overflow:hidden}
.grid-3{grid-template-columns:repeat(auto-fit, minmax(255px, 1fr))}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}
.cell{background:var(--surface); padding:clamp(22px, 2.6vw, 34px)}
.cell .num{font-family:var(--display); font-size:.78rem; font-weight:700; letter-spacing:.12em; color:var(--blue-deep); display:block; margin-bottom:16px}
.cell h3{margin-bottom:9px}
.cell p{color:var(--ink-2); font-size:.95rem; margin-bottom:0}
.cell ul{margin:14px 0 0; padding:0; list-style:none; font-size:.9rem; color:var(--ink-3)}
.cell ul li{padding-left:16px; position:relative; margin-bottom:5px}
.cell ul li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:2px; background:var(--blue)}
.band .grid{background:var(--band-rule); border-color:var(--band-rule)}
.band .cell{background:var(--band-2)}
.band .cell p{color:var(--band-ink-2)}
.band .cell .num{color:var(--band-blue)}
.band .cell ul{color:var(--band-ink-2)}

.clouds{display:grid; gap:1px; background:var(--rule); border-block:1px solid var(--rule); grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.cloud{background:var(--canvas); padding:26px 22px 28px}
.cloud .k{display:block; width:26px; height:3px; background:var(--blue); margin-bottom:16px; border-radius:2px}
.cloud strong{display:block; font-family:var(--display); font-size:1.12rem; font-weight:700; margin-bottom:6px}
.cloud span{display:block; font-size:.87rem; color:var(--ink-3); line-height:1.5}

.two-col{display:grid; gap:clamp(30px, 5vw, 72px); align-items:start}
@media (min-width:900px){ .two-col{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)} }

.stack{display:grid; gap:0; border-top:1px solid var(--rule)}
.stack > div{padding:24px 0; border-bottom:1px solid var(--rule); display:grid; gap:6px 28px}
@media (min-width:700px){ .stack > div{grid-template-columns:200px 1fr} }
.stack h3{font-size:1.05rem}
.stack p{margin:0; color:var(--ink-2); font-size:.96rem}
.band .stack, .band .stack > div{border-color:var(--band-rule)}
.band .stack p{color:var(--band-ink-2)}

.quote{
  font-family:var(--display); font-size:clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight:700; line-height:1.2; letter-spacing:-.025em; max-width:22ch;
}
.quote em{font-style:normal; color:var(--blue)}

.pricebox{border:1px solid var(--rule); border-radius:14px; background:var(--surface); padding:clamp(24px,3vw,36px)}
.pricebox .amount{font-family:var(--display); font-size:2.1rem; font-weight:700; letter-spacing:-.02em; display:block; margin-bottom:4px}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none; cursor:pointer; padding:22px 44px 22px 0; position:relative;
  font-family:var(--display); font-size:clamp(1.02rem,1.6vw,1.2rem); font-weight:700;
  letter-spacing:-.01em; min-height:44px; display:flex; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--blue-deep); border-bottom:2px solid var(--blue-deep);
  transform:translateY(-70%) rotate(45deg); transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq .a{padding:0 0 24px; max-width:76ch; color:var(--ink-2)}
.faq .a p:last-child{margin-bottom:0}

/* breadcrumb */
.crumb{font-size:.82rem; color:var(--ink-3); padding:20px 0 0}
.crumb a{color:var(--ink-3); text-decoration:none}
.crumb a:hover{color:var(--blue-deep)}
.crumb span{margin:0 8px; color:var(--rule-2)}

/* CTA band */
.cta .wrap{display:grid; gap:28px; align-items:center}
@media (min-width:860px){ .cta .wrap{grid-template-columns:1.2fr auto} }

/* ---------- footer ---------- */
.footer{background:var(--canvas-2); border-top:1px solid var(--rule); padding:clamp(48px,6vw,76px) 0 28px}
.fgrid{display:grid; gap:36px; grid-template-columns:repeat(auto-fit, minmax(170px,1fr))}
.fbrand{grid-column:1/-1}
@media (min-width:900px){ .fbrand{grid-column:auto; max-width:300px} }
.fbrand p{font-size:.88rem; color:var(--ink-3); margin:16px 0 0}
.fbrand a{color:var(--ink-2); text-decoration:none}
.fbrand a:hover{color:var(--blue-deep)}
.footer h4{color:var(--ink-3); margin-bottom:14px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{margin-bottom:9px}
.footer li a{font-size:.9rem; color:var(--ink-2); text-decoration:none; display:inline-block; padding:2px 0}
.footer li a:hover{color:var(--blue-deep)}
.legal{margin-top:44px; padding-top:22px; border-top:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:8px 28px; font-size:.8rem; color:var(--ink-3)}

/* ---------- drawer ---------- */
.drawer{
  position:fixed; inset:0; z-index:120; background:var(--canvas);
  transform:translateX(100%); transition:transform .24s ease;
  overflow-y:auto; visibility:hidden;
}
.drawer[data-open="true"]{transform:none; visibility:visible}
.drawer-top{display:flex; align-items:center; justify-content:space-between; padding:16px var(--gut); border-bottom:1px solid var(--rule); min-height:72px}
.drawer-body{padding:8px var(--gut) 28px}
.acc{border-bottom:1px solid var(--rule)}
.acc-btn{
  width:100%; text-align:left; font:inherit; font-size:1.02rem; font-weight:600;
  background:none; border:0; color:var(--ink); padding:16px 0; min-height:52px;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; text-decoration:none;
}
.acc-btn .caret{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; transition:transform .18s}
.acc-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.acc-panel{display:none; padding-bottom:12px}
.acc-btn[aria-expanded="true"] + .acc-panel{display:block}
.acc-panel a{display:block; padding:11px 0 11px 14px; border-left:2px solid var(--rule); color:var(--ink-2); text-decoration:none; font-size:.94rem; min-height:44px}
.acc-panel a:hover{border-color:var(--blue); color:var(--ink)}
.drawer-cta{padding:0 var(--gut) 40px; display:grid; gap:10px}

/* ---------- floating whatsapp ---------- */
.wafloat{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:inline-flex; align-items:center; gap:9px; min-height:48px;
  padding:12px 18px; border-radius:999px; background:var(--ink); color:var(--canvas);
  text-decoration:none; font-size:.9rem; font-weight:600; box-shadow:var(--shadow-lift);
}
.wafloat:hover{background:var(--blue-ink); color:var(--canvas)}
.wafloat svg{width:19px; height:19px; fill:currentColor}
@media (max-width:520px){ .wafloat b{display:none} .wafloat{padding:13px; border-radius:50%} }

/* ---------- reduced motion: everything stops ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms;
    animation-iteration-count:1;
    transition-duration:.001ms;
  }
  /* the class-level rules above out-specify the universal reset, so every
     animated and transitioned selector is named again here */
  .sig,.pulse,.corepulse,.live,.bar,.orbit,.tick-m,
  .s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8{animation:none}
  .mega,.btn,.icon-btn,.drawer,.nav-btn .caret,.acc-btn .caret{transition:none}
  .faq summary::after{transition:none}
  .sig{display:none}
  .pulse{opacity:0}
  .corepulse,.live{opacity:.5}
  .tick-m{stroke-dashoffset:0}
  .bar{transform:none}
  .btn:hover{transform:none}
}

/* ---------- real logo: alpha-masked so it inherits the theme ---------- */
.wordmark,.logo{
  display:inline-block;position:relative;
  width:var(--wm-w,124px);aspect-ratio:1200/313;
  font-size:0;line-height:0;vertical-align:middle;
}
.wordmark img,.logo img{width:100%;height:auto;display:block}
@supports ((-webkit-mask-image:url()) or (mask-image:url())){
  .wordmark img,.logo img{visibility:hidden}
  .wordmark::before,.wordmark::after,.logo::before,.logo::after{
    content:"";position:absolute;inset:0;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-position:center;mask-position:center;
  }
  .wordmark::before,.logo::before{
    background:currentColor;
    -webkit-mask-image:url(/assets/img/yumin-wordmark-letters.png);
            mask-image:url(/assets/img/yumin-wordmark-letters.png);
  }
  .wordmark::after,.logo::after{
    background:var(--wm-tick);
    -webkit-mask-image:url(/assets/img/yumin-wordmark-tick.png);
            mask-image:url(/assets/img/yumin-wordmark-tick.png);
  }
}
.footer-brand .wordmark,.footer-brand .logo{--wm-w:132px}


/* ============================================================
   AZURE NIGHT on DAYLIGHT — the locked-in direction.
   Daylight keeps its light structure; Azure supplies the colour.
   Bands become deep navy instead of near-black, azure carries the
   actions, and the band gradient runs logo blue -> azure -> mint.
   Raw #4E9BFF cannot hold white text (2.82:1), so light-mode
   actions use #006FF5 (4.57:1) and links #006CEF (4.66:1); the
   bright azure is kept for the dark bands where it reads at 6.99:1.
   ============================================================ */
:root{
  --canvas:#FBFCFD; --canvas-2:#F1F5FB; --surface:#FFFFFF;
  --ink:#070B14; --ink-2:#39424F; --ink-3:#6A7484;
  --rule:#E1E7F0; --rule-2:#C7D3E2; --grid:#E8EEF6; --wire:#A7B7CC;

  --blue:#93DEFE; --blue-soft:#D9F3FF; --blue-wash:#EDF6FE;
  --blue-mid:#4E9BFF; --blue-deep:#006CEF; --blue-ink:#0051B9;

  --band:#070B14; --band-2:#0F1728;
  --band-ink:#EEF3FA; --band-ink-2:#A3B2C9; --band-rule:#22304B;
  --band-blue:#4E9BFF;

  --focus:#006CEF;
  --action:#006FF5; --action-hover:#0051B9; --on-action:#FFFFFF;

  --grad-1:#0051B9; --grad-2:#006CEF; --grad-3:#070B14; --grad-solid:#0051B9;
  --grad-band-1:#93DEFE; --grad-band-2:#4E9BFF; --grad-band-3:#34D399;
  --grad-band-solid:#93DEFE;
}
/* dark mode is Azure Night proper */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --canvas:#070B14; --canvas-2:#0B1120; --surface:#0F1728;
  --ink:#EEF3FA; --ink-2:#A3B2C9; --ink-3:#71809A;
  --rule:#22304B; --rule-2:#2C3D5C; --grid:#16223A; --wire:#41536F;
  --blue:#93DEFE; --blue-soft:#CFE3FF; --blue-wash:#101B2E;
  --blue-mid:#4E9BFF; --blue-deep:#7FB9FF; --blue-ink:#A8D3FF;
  --band:#04070E; --band-2:#0B1120;
  --band-ink:#EEF3FA; --band-ink-2:#A3B2C9; --band-rule:#1B2740;
  --focus:#7FB9FF;
  --action:#4E9BFF; --action-hover:#7FB9FF; --on-action:#040A16;
  --grad-1:#93DEFE; --grad-2:#4E9BFF; --grad-3:#34D399; --grad-solid:#93DEFE;
}}
:root[data-theme="dark"]{
  --canvas:#070B14; --canvas-2:#0B1120; --surface:#0F1728;
  --ink:#EEF3FA; --ink-2:#A3B2C9; --ink-3:#71809A;
  --rule:#22304B; --rule-2:#2C3D5C; --grid:#16223A; --wire:#41536F;
  --blue:#93DEFE; --blue-soft:#CFE3FF; --blue-wash:#101B2E;
  --blue-mid:#4E9BFF; --blue-deep:#7FB9FF; --blue-ink:#A8D3FF;
  --band:#04070E; --band-2:#0B1120;
  --band-ink:#EEF3FA; --band-ink-2:#A3B2C9; --band-rule:#1B2740;
  --focus:#7FB9FF;
  --action:#4E9BFF; --action-hover:#7FB9FF; --on-action:#040A16;
  --grad-1:#93DEFE; --grad-2:#4E9BFF; --grad-3:#34D399; --grad-solid:#93DEFE;
}


/* Azure actions. .btn-p was painted with --ink (the body-text colour);
   point it at the action token so the primary CTA carries the brand. */
.btn-p{background:var(--action);color:var(--on-action);border-color:var(--action)}
.btn-p:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--on-action)}
.band .btn-p{background:var(--band-blue);color:var(--band);border-color:var(--band-blue)}
.band .btn-p:hover{background:var(--blue);border-color:var(--blue);color:var(--band)}