/* Pentacle v4 · light-and-glass editorial. Dark is the default; light is a full theme.
   Art lives in dark "display cases" in both themes (product-shot lighting). No blue-green gradients anywhere. */
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin.woff2) format("woff2");font-weight:100 1000;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";src:url(fonts/dm-sans-latin-ext.woff2) format("woff2");font-weight:100 1000;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#07090c;--bg-2:#0b0e12;--case:#0b0d10;--glass:rgba(255,255,255,.045);--glass-2:rgba(255,255,255,.075);--glass-hi:rgba(255,255,255,.12);
  --line:rgba(255,255,255,.085);--line-2:rgba(255,255,255,.16);--t:#f2f4f7;--t2:#a1a9b4;--t3:#6d7681;
  --sky:#22b5f0;--sky-2:#7fd3f7;--royal:#4d9be0;--good:#22b5f0;--warn:#ff6b5e;
  --shadow:0 40px 80px -40px rgba(0,0,0,.85);--edge:inset 0 1px 0 rgba(255,255,255,.08);
  --logo-sky:#1aa8ea;--logo-royal:#4d9be0;--E:cubic-bezier(.16,1,.3,1);--max:1360px;--gut:clamp(20px,3.2vw,48px);--r:28px;
  color-scheme:dark}
:root[data-theme="light"]{
  --bg:#f2f4f7;--bg-2:#e8ecf1;--glass:rgba(255,255,255,.66);--glass-2:rgba(255,255,255,.86);--glass-hi:#fff;
  --line:rgba(11,26,43,.08);--line-2:rgba(11,26,43,.15);--t:#0b1a2b;--t2:#46535f;--t3:#6f7b87;
  --sky:#0091d4;--sky-2:#3bb3e8;--royal:#0868b0;--shadow:0 30px 60px -36px rgba(11,42,74,.38);--edge:inset 0 1px 0 rgba(255,255,255,.9);
  --logo-sky:#0096d9;--logo-royal:#0868b0;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--t);font:400 17px/1.55 "DM Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 80% -10%,rgba(34,181,240,.08),transparent 60%),radial-gradient(50% 40% at 0% 100%,rgba(77,155,224,.06),transparent 60%)}
:root[data-theme="light"] body::before{background:radial-gradient(60% 50% at 80% -10%,rgba(0,145,212,.10),transparent 60%),radial-gradient(50% 40% at 0% 100%,rgba(8,104,176,.06),transparent 60%)}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.k{font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--t3);font-weight:500}
.k.sky{color:var(--sky)}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.045em;line-height:1}
.h2{font-size:clamp(38px,4.4vw,64px)}
.lead{font-size:18px;color:var(--t2);max-width:44ch;margin:20px 0 0}
/* the accent word: solid sky with a white light sweeping through it (no colour gradient) */
.lit{color:var(--sky);background:linear-gradient(100deg,var(--sky) 0 42%,#fff 50%,var(--sky) 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:400}
:root[data-theme="light"] .lit{background-image:linear-gradient(100deg,var(--sky) 0 42%,#9fe0ff 50%,var(--sky) 58% 100%)}
.glass{background:var(--glass);border:1px solid var(--line);box-shadow:var(--edge),var(--shadow);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.case{position:relative;overflow:hidden;background:#0b0d10;border-radius:22px;isolation:isolate;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 0 1px rgba(255,255,255,.05)}
.case img{width:100%;height:100%;object-fit:cover}
.case::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120px 120px at var(--mx,50%) var(--my,30%),rgba(127,211,247,.14),transparent 70%);opacity:var(--lo,0);transition:opacity .4s}
.case .sweep{position:absolute;inset:-30%;pointer-events:none;background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.13) 50%,transparent 56%);transform:translateX(-70%);mix-blend-mode:screen}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 24px;font:500 16px "DM Sans";text-decoration:none;border:1px solid var(--line-2);background:transparent;color:var(--t);cursor:pointer;white-space:nowrap;transition:background .3s,border-color .3s,transform .3s var(--E)}
.btn:hover{border-color:var(--t2)}
.btn.solid{background:var(--t);color:var(--bg);border-color:var(--t)}
.btn.sky{background:var(--sky);color:#04121c;border-color:var(--sky);font-weight:600}
:root[data-theme="light"] .btn.sky{color:#fff}
.btn.sm{padding:10px 18px;font-size:15px}
.btn .ar{transition:transform .4s var(--E)}.btn:hover .ar{transform:translateX(4px)}
.link{color:var(--sky);text-decoration:none;border-bottom:1px solid currentColor}

/* nav: floating frosted bar */
.nav{position:fixed;left:0;right:0;top:14px;z-index:50;transition:transform .5s var(--E)}
.nav.tucked{transform:translateY(-120%)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.nav-bar{display:flex;align-items:center;gap:20px;padding:10px 12px 10px 20px;border-radius:20px;background:rgba(11,14,18,.58);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
:root[data-theme="light"] .nav-bar{background:rgba(255,255,255,.72);border-color:rgba(11,26,43,.08);box-shadow:inset 0 1px 0 #fff,0 10px 30px -20px rgba(11,42,74,.3)}
.logo{display:block;position:relative;flex:none}
.logo svg{height:34px;width:auto;overflow:visible}
.nav-links{display:flex;gap:30px;list-style:none;margin:0 auto;padding:0}
.nav-links a{text-decoration:none;color:var(--t2);font-size:15px;transition:color .25s}
.nav-links a:hover{color:var(--t)}
.nav-cta{display:flex;align-items:center;gap:8px}
.theme-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.theme-btn .moon{display:none}:root[data-theme="light"] .theme-btn .sun{display:none}:root[data-theme="light"] .theme-btn .moon{display:block}
.menu-btn{display:none;width:40px;height:40px;border:0;background:transparent;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:currentColor;transition:transform .3s}
.menu-btn span:first-child{top:15px}.menu-btn span:last-child{top:23px}
.nav.open .menu-btn span:first-child{transform:translateY(4px) rotate(45deg)}.nav.open .menu-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;background:var(--sky);transform-origin:left;transform:scaleX(0)}
/* logo light: a highlight sweeps through the mark on hover */
.logo .shine{position:absolute;inset:-6px -10px;pointer-events:none;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);background-size:250% 100%;background-position:120% 0;mix-blend-mode:overlay;-webkit-mask:var(--logo-mask) 0 50%/auto 100% no-repeat;mask:var(--logo-mask) 0 50%/auto 100% no-repeat}

/* hero: a dark studio stage in both themes */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;color:#f2f4f7;padding:110px 0 70px}
.stage{position:absolute;inset:0;overflow:hidden;background:#07090c;isolation:isolate}
:root[data-theme="light"] .stage{inset:10px;border-radius:32px}
.stage .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 60%}
.stage .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.72) 30%,rgba(7,9,12,.12) 58%,transparent 70%),linear-gradient(0deg,rgba(7,9,12,.7),transparent 30%)}
.stage .beam{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(520px 420px at var(--bx,78%) var(--by,8%),rgba(127,211,247,.16),transparent 70%)}
.stage .sweep{position:absolute;inset:-20% -40%;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(105deg,transparent 46%,rgba(190,232,255,.10) 50%,transparent 54%);transform:translateX(-60%)}
.stage .grain{position:absolute;inset:0;opacity:.06;pointer-events:none;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'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
.hero .k{color:#8b949f}
.hero h1{font-size:clamp(52px,6.6vw,104px);margin-top:22px}
.hero .lead{color:#b4bcc6}
.hero .acts{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap;align-items:center}
.hero .btn{color:#f2f4f7;border-color:rgba(255,255,255,.22)}
.hero .btn.sky{color:#04121c}
.hero-stats{display:flex;gap:44px;margin-top:52px;flex-wrap:wrap}
.hero-stats b{display:block;font-size:40px;font-weight:300;letter-spacing:-.03em;line-height:1.05}
.hero-stats>div>span{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#8b949f}
/* the one object: policy card -> claim tracker -> paid pill */
.hero-obj{position:relative;height:430px;perspective:1400px}
.obj{position:absolute;left:50%;top:44%;width:420px;height:262px;border-radius:24px;overflow:hidden;transform-style:preserve-3d;
  background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 45%,rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 50px 90px -30px rgba(0,0,0,.85);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);color:#f2f4f7}
.obj .edge{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 100% 0%,rgba(127,211,247,.22),transparent 60%)}
.obj .sheen{position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.18) 49%,transparent 56%);transform:translateX(-60%)}
.obj .layer{position:absolute;inset:0;padding:26px 28px}
.obj .k{font-size:11.5px;color:#8b949f}
.c-policy .row,.c-tracker .row{display:flex;justify-content:space-between;align-items:center}
.c-policy .name{font-size:26px;letter-spacing:-.02em;margin-top:26px}
.c-policy .cover{font-size:40px;font-weight:300;letter-spacing:-.04em;margin-top:4px}
.c-policy .meta{position:absolute;left:28px;right:28px;bottom:24px;display:flex;justify-content:space-between;font-size:13px;color:#a1a9b4}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:8px;box-shadow:0 0 10px rgba(34,181,240,.55);vertical-align:middle}
.dot.sky{background:#22b5f0;box-shadow:0 0 12px rgba(34,181,240,.8)}
.c-tracker{opacity:0}
.c-tracker .amt{font-size:46px;font-weight:300;letter-spacing:-.04em;margin-top:14px;font-variant-numeric:tabular-nums}
.c-tracker .sub{font-size:14px;color:#a1a9b4;margin-top:2px}
.rail{position:absolute;left:28px;right:28px;bottom:70px;height:2px;background:rgba(255,255,255,.12)}
.rail i{position:absolute;inset:0;background:#22b5f0;transform-origin:left;transform:scaleX(0)}
.steps-r{position:absolute;left:28px;right:28px;bottom:26px;display:flex;justify-content:space-between}
.steps-r div{position:relative;font-size:12.5px;color:#8b949f;padding-top:22px;width:25%}
.steps-r div:nth-child(2),.steps-r div:nth-child(3){text-align:center}.steps-r div:last-child{text-align:right}
.steps-r div::before{content:"";position:absolute;top:-1px;width:14px;height:14px;border-radius:50%;background:#0b0e12;border:1.5px solid rgba(255,255,255,.25);transform:translateY(-50%) scale(var(--s,1))}
.steps-r div:first-child::before{left:0}.steps-r div:nth-child(2)::before,.steps-r div:nth-child(3)::before{left:50%;margin-left:-7px}.steps-r div:last-child::before{right:0}
.steps-r div.on{color:#f2f4f7}.steps-r div.on::before{background:#22b5f0;border-color:#22b5f0;box-shadow:0 0 14px rgba(34,181,240,.7)}
.c-pill{opacity:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 20px;font-size:16px;white-space:nowrap}
.hero .scroll-cue{position:absolute;left:50%;bottom:22px;z-index:2;width:22px;height:36px;margin-left:-11px;border:1.5px solid rgba(255,255,255,.35);border-radius:12px}
.hero .scroll-cue::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:cue 1.8s var(--E) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}30%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* odometer numbers */
.odo{display:inline;white-space:nowrap}
.odo-d{position:relative;display:inline-block;line-height:1.4;margin:-.225em 0;clip-path:inset(.22em -.12em .27em);-webkit-mask-image:linear-gradient(transparent 16%,#000 27%,#000 74%,transparent 81%);mask-image:linear-gradient(transparent 16%,#000 27%,#000 74%,transparent 81%)}
.odo-ph{visibility:hidden}
.odo-c{position:absolute;left:0;right:0;top:0;display:block;text-align:center;will-change:transform}
.odo-c i{display:block;font-style:normal}
.num-glow{animation:num-glow 1s ease-out}
@keyframes num-glow{0%{filter:drop-shadow(0 0 0 transparent)}25%{filter:drop-shadow(0 0 14px rgba(34,181,240,.75))}100%{filter:drop-shadow(0 0 0 transparent)}}
.tnum{font-variant-numeric:tabular-nums}

/* sections */
.sec{padding:130px 0 0}
.sec-head{max-width:760px}
.sec-head .h2{margin-top:16px}
.w{display:inline-block}
.line-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}

/* bento track record */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(150px,auto);gap:16px;margin-top:52px}
.tile{position:relative;border-radius:var(--r);padding:28px;overflow:hidden}
.tile .k{display:block}
.tile .v{font-size:52px;font-weight:300;letter-spacing:-.04em;line-height:1.05;margin-top:18px}
.tile .d{font-size:15px;color:var(--t2);margin-top:6px}
.t-hero{grid-column:span 6;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(160deg,rgba(34,181,240,.16),rgba(34,181,240,.03) 55%),var(--glass)}
:root[data-theme="light"] .t-hero{background:linear-gradient(160deg,rgba(0,145,212,.14),rgba(0,145,212,.02) 55%),var(--glass)}
.t-hero .v{font-size:clamp(84px,9vw,140px);color:var(--sky)}
.t-hero p{font-size:20px;color:var(--t2);max-width:30ch;margin:10px 0 0}
.t-hero .bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:28px}
.t-hero .bars i{flex:1;border-radius:4px 4px 2px 2px;background:var(--sky);opacity:.28;transform-origin:bottom}
.t-hero .bars i:last-child{opacity:1}
.t-3{grid-column:span 3}
.t-6{grid-column:span 6}
.t-mini{display:flex;gap:18px;align-items:center}
.t-mini .case{width:96px;height:96px;flex:none;border-radius:18px}
.t-kind{display:grid;grid-template-columns:1fr 1.1fr;gap:20px;align-items:center}
.t-kind .case{aspect-ratio:1;border-radius:20px}
.t-kind .case img{position:absolute;inset:0;opacity:0}
.t-kind .case img.on{opacity:1}
.t-kind .lbl{font-size:30px;font-weight:300;letter-spacing:-.03em;margin-top:12px;min-height:1.2em}
.t-kind .pips{display:flex;gap:6px;margin-top:18px}.t-kind .pips i{width:22px;height:3px;border-radius:2px;background:var(--line-2);transition:background .4s}.t-kind .pips i.on{background:var(--sky)}
.aw{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.aw b{display:block;font-weight:500;font-size:16px}.aw span{font-size:13px;color:var(--t3)}

/* services */
.svc-top{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.seg{position:relative;display:inline-flex;padding:5px;border-radius:999px}
.seg button{position:relative;z-index:1;border:0;background:transparent;padding:10px 18px;border-radius:999px;font-size:15px;color:var(--t2);cursor:pointer;transition:color .3s}
.seg button.on{color:var(--bg)}
.seg .ind{position:absolute;top:5px;bottom:5px;left:5px;width:80px;border-radius:999px;background:var(--t)}
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.svc{display:flex;flex-direction:column;text-align:left;border-radius:var(--r);padding:12px 12px 24px;cursor:pointer;transform-style:preserve-3d;transition:border-color .3s}
.svc:hover{border-color:var(--line-2)}
.svc .case{aspect-ratio:16/11}
.svc .case img{transition:transform .9s var(--E)}
.svc:hover .case img{transform:scale(1.05) translateY(-2%)}
.svc .tx{padding:22px 14px 0}
.svc .grp{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3)}
.svc b{display:block;font-size:24px;font-weight:400;letter-spacing:-.02em;margin-top:8px}
.svc .d{font-size:15px;color:var(--t2);margin-top:6px}
.svc .go{display:inline-flex;gap:8px;margin-top:16px;font-size:15px;color:var(--sky)}
.svc .go i{font-style:normal;transition:transform .4s var(--E)}.svc:hover .go i{transform:translateX(5px)}
.svc.hide{display:none}
.more-q{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.more-q button{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:8px 14px;font-size:14px;cursor:pointer;color:var(--t)}
.more-q button:hover{border-color:var(--sky);color:var(--sky)}

/* how it works: pinned, the case swaps its object as each step lights */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:56px}
.how-case{aspect-ratio:1;border-radius:32px}
.how-case img{position:absolute;inset:0}
.how-case .flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(190,232,255,.5),transparent 60%);opacity:0;mix-blend-mode:screen}
.how-case .no{position:absolute;left:26px;top:22px;font-size:13px;letter-spacing:.24em;color:#8b949f;z-index:2}
.steps{list-style:none;margin:0;padding:0 0 0 34px;position:relative}
.steps::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--line-2)}
.steps .fill{position:absolute;left:6px;top:10px;bottom:10px;width:2px;background:var(--sky);transform-origin:top;transform:scaleY(0)}
.step{position:relative;padding:22px 0 30px}
.step::before{content:"";position:absolute;left:-34px;top:30px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);transition:background .4s,border-color .4s,box-shadow .4s}
.step.on::before{background:var(--sky);border-color:var(--sky);box-shadow:0 0 16px rgba(34,181,240,.6)}
.step .k{display:block}
.step h3{font-size:34px;letter-spacing:-.03em;margin-top:10px}
.step p{color:var(--t2);margin:10px 0 0;max-width:40ch}
.how-cta{display:flex;align-items:center;gap:20px;margin-top:20px;flex-wrap:wrap}
.how-cta p{margin:0;color:var(--t2)}

/* claims */
.claims{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
.claim{border-radius:var(--r);padding:30px;display:grid;grid-template-columns:1fr 132px;gap:8px 24px}
.claim .k{grid-column:1}
.claim .amt{grid-column:1;font-size:clamp(44px,4.6vw,64px);font-weight:300;letter-spacing:-.04em;line-height:1.05;margin-top:10px}
.claim .out{grid-column:1;font-size:17px;font-weight:500;margin-top:4px}
.claim .case{grid-column:2;grid-row:1 / span 3;width:132px;height:132px;border-radius:20px}
.claim p{grid-column:1 / -1;color:var(--t2);margin:14px 0 0}
.ctrack{grid-column:1 / -1;display:flex;gap:6px;margin-top:18px;align-items:center}
.ctrack span{flex:1;position:relative;height:30px;border-radius:999px;border:1px solid var(--line);font-size:12px;display:grid;place-items:center;color:var(--t3);overflow:hidden}
.ctrack span::before{content:"";position:absolute;inset:0;background:rgba(34,181,240,.14);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .8s var(--E)}
.ctrack span.on{color:var(--t);border-color:rgba(34,181,240,.45)}.ctrack span.on::before{--f:1}
.ctrack span.paid.on{color:#04121c;background:var(--sky);border-color:var(--sky)}
:root[data-theme="light"] .ctrack span.paid.on{color:#fff}
.ctrack span em{position:relative;font-style:normal}

/* reviews */
.fq{margin:40px 0 0;max-width:1100px}
.fq blockquote{margin:0;font-size:clamp(30px,3.4vw,50px);font-weight:300;letter-spacing:-.03em;line-height:1.18}
.fq figcaption{display:flex;align-items:center;gap:14px;margin-top:28px}
.mono{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600;background:var(--glass-2);border:1px solid var(--line-2)}
.who b{display:block;font-weight:500}.who span{font-size:14px;color:var(--t3)}
.revs{margin-top:56px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.revs-track{display:flex;gap:16px;width:max-content}
.rc{width:380px;margin:0;border-radius:24px;padding:26px;flex:none}
.rc blockquote{margin:0;font-size:16px;color:var(--t)}
.rc .who{display:flex;align-items:center;gap:12px;margin-top:18px}
.rc .mono{width:38px;height:38px;font-size:13px}
.revs-ctl{display:flex;justify-content:space-between;align-items:center;margin-top:18px;color:var(--t3);font-size:14px}
.revs-ctl button{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:8px 16px;cursor:pointer;font-size:14px}

/* contact */
.panel{border-radius:36px;padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);margin-top:20px}
.panel .case{aspect-ratio:16/12;border-radius:24px;margin-top:30px}
.clist{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.clist span{display:block;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.clist div{font-size:15px}
.form-card{border-radius:26px;padding:28px;background:var(--glass-2);border:1px solid var(--line)}
fieldset{border:0;margin:0;padding:0}
legend{font-size:15px;font-weight:500;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:9px 14px;font-size:14px;cursor:pointer;transition:all .25s}
.tag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tag[aria-checked="true"]{background:var(--t);color:var(--bg);border-color:var(--t)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
.field label{font-size:14px;color:var(--t2)}.field label i{color:var(--t3);font-style:normal}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--t);background:var(--glass);border:1px solid var(--line-2);border-radius:14px;padding:13px 14px;outline:none;transition:border-color .25s,box-shadow .25s}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(34,181,240,.15)}
.field select option{color:#0b1a2b}
.field .msg{display:none;font-size:13px;color:var(--warn)}
.field.err input,.field.err select{border-color:var(--warn)}.field.err .msg{display:block}
.dyn-title{grid-column:1 / -1;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.form-foot p{font-size:13px;color:var(--t3);margin:0;max-width:36ch}
.form-alert{color:var(--warn)!important}
.submit{position:relative;min-width:210px;height:52px;overflow:hidden}
.submit .st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px}
.submit .st2,.submit .st3{opacity:0}
.done{display:none;text-align:left}
.done.show{display:block}
.done .badge{width:56px;height:56px;border-radius:50%;background:var(--sky);display:grid;place-items:center;color:#04121c}
.done h3{font-size:34px;margin-top:20px}.done p{color:var(--t2)}

/* footer: the mark, large, with light that follows the pointer */
footer{margin-top:140px;padding:70px 0 40px;border-top:1px solid var(--line);position:relative;overflow:hidden}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.foot h4{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);font-weight:500;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--t2)}
.foot a{text-decoration:none}.foot a:hover{color:var(--t)}
.foot p{color:var(--t2);max-width:40ch}
.bigmark{position:relative;margin-top:70px;height:clamp(120px,20vw,280px)}
.bigmark svg{position:absolute;inset:0;width:100%;height:100%}
.bigmark .lightmask{position:absolute;inset:0;background:radial-gradient(240px 240px at var(--fx,50%) var(--fy,50%),rgba(127,211,247,.9),transparent 70%);-webkit-mask:url(#bm-mask) center/contain no-repeat;opacity:.0}
.legal{display:flex;justify-content:space-between;gap:30px;margin-top:40px;font-size:13px;color:var(--t3);flex-wrap:wrap}
.legal p{margin:0;max-width:70ch}

/* mobile bar */
.mbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;gap:8px;padding:8px;border-radius:20px;transition:transform .5s var(--E),opacity .4s}
.mbar .btn{flex:1}
.mbar.hide{transform:translateY(140%);opacity:0}

/* loader: four glass panels stack in (kept from v3, refined); the front one becomes the hero stage */
.loader{position:fixed;inset:0;z-index:100;background:#05070a;overflow:hidden}
.ld-card{position:absolute;top:50%;left:50%;width:min(720px,84vw);height:min(420px,50vw);border-radius:26px;transform:translate(50vw,-50%);display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.9)}
.ld-card:nth-child(1){background:#10141a}.ld-card:nth-child(2){background:#141a22}.ld-card:nth-child(3){background:#18212b}
.ld-card.front{background:radial-gradient(70% 70% at 70% 20%,rgba(34,181,240,.16),transparent 70%),#0b0e12;overflow:hidden}
.ld-mark{height:64px;width:auto;max-width:76%}
.ld-meta{position:absolute;left:28px;right:28px;bottom:22px;display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#6d7681}
.ld-count{font-variant-numeric:tabular-nums;color:#f2f4f7;letter-spacing:.05em;font-size:14px}
.ld-bar{position:absolute;left:28px;right:28px;bottom:52px;height:1px;background:rgba(255,255,255,.1)}
.ld-bar i{position:absolute;inset:0;background:#22b5f0;transform-origin:left;transform:scaleX(0)}
.ld-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 60%;opacity:0}
html.is-loading{overflow:hidden}

/* responsive */
@media (max-width:1060px){
  .nav-links{display:none}.nav .btn.ghost-call{display:none}
  .menu-btn{display:block}
  .nav.open .nav-links{display:flex;position:absolute;left:var(--gut);right:var(--gut);top:72px;flex-direction:column;gap:0;padding:10px 20px;border-radius:20px;background:rgba(11,14,18,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08)}
  :root[data-theme="light"] .nav.open .nav-links{background:rgba(255,255,255,.95)}
  .nav.open .nav-links a{display:block;padding:14px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .hero-grid{grid-template-columns:1fr}
  .hero-obj{height:340px}
  .bento{grid-template-columns:repeat(6,1fr)}.t-hero,.t-6{grid-column:span 6}.t-3{grid-column:span 3}
  .svcs{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
  .how-case{max-width:520px}
  .claims{grid-template-columns:1fr}
  .panel{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav{top:8px}.nav-bar{padding:8px 8px 8px 14px;gap:10px}.logo svg{height:28px}.nav-cta .btn{display:none}
  .hero{padding:96px 0 40px;align-items:flex-start}
  .stage .shot{object-position:78% 50%}
  .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.92) 0%,rgba(7,9,12,.75) 45%,rgba(7,9,12,.35) 75%,rgba(7,9,12,.85) 100%)}
  .hero h1{font-size:clamp(46px,12.5vw,60px)}
  .hero-stats{gap:22px;margin-top:34px}.hero-stats b{font-size:28px}.hero-stats>div>span{font-size:11px}
  .hero-obj{height:300px;transform:scale(.8);transform-origin:50% 30%;margin:0 -10%}
  .sec{padding-top:96px}
  .bento{grid-template-columns:1fr 1fr;gap:10px}.t-hero,.t-6{grid-column:span 2}.t-3{grid-column:span 1}
  .tile{padding:20px}.tile .v{font-size:34px}.t-mini .case{display:none}
  .t-kind{grid-template-columns:1fr}.aw{grid-template-columns:1fr}
  .svcs{grid-template-columns:1fr}
  .claim{grid-template-columns:1fr 84px;padding:22px}.claim .case{width:84px;height:84px}
  .ctrack span{font-size:11px}
  .fgrid{grid-template-columns:1fr}.clist{grid-template-columns:1fr}
  .rc{width:300px}
  .mbar{display:flex}
  .foot{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ===================== Liquid Glass (after Apple's material): rim light, pointer specular, lensing, capsules ===================== */
.lg,.glass{position:relative;isolation:isolate}
.lg::before,.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(140deg,rgba(255,255,255,.55),rgba(255,255,255,.10) 28%,rgba(255,255,255,0) 55%,rgba(255,255,255,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:root[data-theme="light"] .lg::before,:root[data-theme="light"] .glass::before{background:linear-gradient(140deg,#fff,rgba(255,255,255,.4) 30%,rgba(11,26,43,.06) 60%,rgba(255,255,255,.8))}
.lg::after,.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:var(--spec,0);transition:opacity .5s;
  background:radial-gradient(260px 200px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.16),transparent 70%)}
:root[data-theme="light"] .lg::after,:root[data-theme="light"] .glass::after{background:radial-gradient(260px 200px at var(--lx,30%) var(--ly,0%),rgba(255,255,255,.75),transparent 70%)}
.lg:hover,.glass:hover{--spec:1}
:where(.lg,.glass)>:not(.ind):not(.abs){position:relative;z-index:3}
html.refract .lg-bar{backdrop-filter:url(#lg-lens) blur(14px) saturate(1.8)}
.btn{transition:background .3s,border-color .3s,transform .5s var(--E)}
.btn:active{transform:scale(.96,.94)}
.btn.lg{background:rgba(255,255,255,.06);backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);border-color:transparent}
:root[data-theme="light"] .btn.lg{background:rgba(255,255,255,.6)}
.hero .btn.lg{background:rgba(255,255,255,.08);color:#f2f4f7}
/* nav condenses into a capsule on scroll (keeps the logo and the quote button) */
.nav-bar{transition:max-width .7s var(--E),padding .5s var(--E),border-radius .5s var(--E);max-width:var(--max);margin:0 auto}
.nav.small .nav-bar{max-width:640px;border-radius:999px;padding:8px 8px 8px 18px}
.nav.small .nav-links,.nav.small .ghost-call{opacity:0;pointer-events:none;width:0;overflow:hidden;margin:0}
.nav-links,.ghost-call{transition:opacity .35s}

/* ===================== r1 fixes ===================== */
.case{display:block}
.svc .d,.svc .grp{display:block}
@media (min-width:1061px){
  .stage .shot{left:24%;top:auto;bottom:0;width:76%;height:auto;aspect-ratio:16/9;object-fit:cover;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 14%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 16%),linear-gradient(180deg,transparent 0,#000 14%);mask-composite:intersect}
  .stage .veil{background:linear-gradient(90deg,rgba(7,9,12,.7) 0%,rgba(7,9,12,0) 46%),linear-gradient(0deg,rgba(7,9,12,.55),transparent 22%)}
  .hero-grid{grid-template-columns:minmax(0,680px)}
  .hero-obj{position:absolute;right:var(--gut);top:118px;width:500px;height:330px;z-index:2}
  .obj{top:50%}
}

@media (min-width:1061px){.hero-grid{position:static}.hero-copy{position:relative;z-index:2}}


/* ===================== light-filament art: current flows through the lines ===================== */
.case .lite,.case .bloom{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;mix-blend-mode:screen}
.case .lite{filter:brightness(2) saturate(1.3);
  -webkit-mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);mask-image:linear-gradient(115deg,transparent 42%,#000 50%,transparent 58%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:current 4.8s cubic-bezier(.45,0,.55,1) infinite;animation-delay:var(--cd,0s)}
@keyframes current{0%{-webkit-mask-position:100% 0;mask-position:100% 0}60%,100%{-webkit-mask-position:0% 0;mask-position:0% 0}}
.case .bloom{filter:blur(10px) brightness(1.4);opacity:.35;animation:breathe 2.4s ease-in-out infinite;animation-delay:var(--cd,0s)}
@keyframes breathe{0%,100%{opacity:.22}50%{opacity:.5}}
/* pointer torch: the current follows you */
.case.torch .lite{animation:none;-webkit-mask-image:radial-gradient(170px 170px at var(--mx,50%) var(--my,50%),#000 0,transparent 72%);mask-image:radial-gradient(170px 170px at var(--mx,50%) var(--my,50%),#000 0,transparent 72%);-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* draw-on: lines trace in when the case first appears */
.case .art{position:absolute;inset:0}
html.mo .case.pending .art{-webkit-mask-image:linear-gradient(115deg,#000 var(--r,0%),transparent calc(var(--r,0%) + 12%));mask-image:linear-gradient(115deg,#000 var(--r,0%),transparent calc(var(--r,0%) + 12%))}
.stage canvas.shot{position:absolute}
@media (prefers-reduced-motion:reduce){.case .lite,.case .bloom{display:none}}

/* hero light without WebGL: the same current, in CSS */
.stage .lite,.stage .bloom{pointer-events:none;mix-blend-mode:screen}
.stage .lite{filter:brightness(2.1) saturate(1.3);-webkit-mask-image:linear-gradient(110deg,transparent 44%,#000 50%,transparent 56%);mask-image:linear-gradient(110deg,transparent 44%,#000 50%,transparent 56%);-webkit-mask-size:340% 100%;mask-size:340% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:current 6s cubic-bezier(.45,0,.55,1) infinite}
.stage .bloom{filter:blur(14px) brightness(1.3);opacity:.3;animation:breathe 2.4s ease-in-out infinite}
@media (min-width:1061px){.stage .lite,.stage .bloom{-webkit-mask-composite:source-in}}

/* ===================== mix: style-5 hero (the card is the subject; the filament scene recedes behind it) ===================== */
@media (min-width:1061px){
  .stage .shot,.stage canvas.shot{opacity:.42;filter:saturate(.85)}
  .stage .veil{background:radial-gradient(60% 70% at 72% 50%,rgba(7,9,12,.15),rgba(7,9,12,.75) 80%),linear-gradient(90deg,rgba(7,9,12,.85) 0%,rgba(7,9,12,0) 50%),linear-gradient(0deg,rgba(7,9,12,.6),transparent 25%)}
  .hero-obj{top:50%;right:calc(var(--gut) + 40px);width:540px;height:360px;transform:translateY(-46%)}
  .obj{width:460px;height:288px}
  .stage::after{content:"";position:absolute;right:8%;top:22%;width:620px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(34,181,240,.14),transparent);pointer-events:none}
}

/* ===================== light theme, designed (critic r1): the filament kit becomes deep-blue ink on paper ===================== */
:root[data-theme="light"] .case{background:#f7f9fb;box-shadow:inset 0 0 0 1px rgba(11,26,43,.06)}
:root[data-theme="light"] .case .art{filter:invert(1) hue-rotate(180deg) saturate(1.15) contrast(1.05)}
:root[data-theme="light"] .case .sweep{background:linear-gradient(115deg,transparent 44%,rgba(8,104,176,.10) 50%,transparent 56%);mix-blend-mode:multiply}
:root[data-theme="light"] .case::after{background:radial-gradient(120px 120px at var(--mx,50%) var(--my,30%),rgba(0,145,212,.10),transparent 70%)}
:root[data-theme="light"] .how-case .no{color:#6f7b87}
/* hero in light: a bright stage, ink-line scene, dark type */
:root[data-theme="light"] .hero{color:var(--t)}
:root[data-theme="light"] .stage{inset:0;border-radius:0;background:#f2f4f7}
:root[data-theme="light"] .stage picture{display:block;position:absolute;inset:0;filter:invert(1) hue-rotate(180deg) saturate(1.1)}
:root[data-theme="light"] .stage .veil{background:linear-gradient(90deg,rgba(242,244,247,.96) 0%,rgba(242,244,247,.6) 40%,rgba(242,244,247,0) 62%),linear-gradient(0deg,rgba(242,244,247,.8),transparent 25%)}
:root[data-theme="light"] .stage::after{background:radial-gradient(closest-side,rgba(0,145,212,.10),transparent)}
:root[data-theme="light"] .stage .beam,:root[data-theme="light"] .stage .sweep{mix-blend-mode:multiply;opacity:.5}
:root[data-theme="light"] .stage .grain{opacity:.035}
:root[data-theme="light"] .hero .k,:root[data-theme="light"] .hero-stats>div>span{color:var(--t3)}
:root[data-theme="light"] .hero .lead{color:var(--t2)}
:root[data-theme="light"] .hero .btn{color:var(--t);border-color:var(--line-2)}
:root[data-theme="light"] .hero .btn.sky{color:#fff;border-color:var(--sky)}
:root[data-theme="light"] .hero .btn.lg{background:rgba(255,255,255,.7)}
:root[data-theme="light"] .hero .scroll-cue{border-color:rgba(11,26,43,.3)}:root[data-theme="light"] .hero .scroll-cue::after{background:var(--t)}
/* the hero card in light: real light glass */
:root[data-theme="light"] .obj{background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.55));border-color:rgba(255,255,255,.9);color:var(--t);box-shadow:inset 0 1px 0 #fff,0 40px 80px -36px rgba(11,42,74,.45)}
:root[data-theme="light"] .obj .k,:root[data-theme="light"] .c-policy .meta,:root[data-theme="light"] .c-tracker .sub{color:var(--t3)}
:root[data-theme="light"] .obj .edge{background:radial-gradient(80% 60% at 100% 0%,rgba(0,145,212,.12),transparent 60%)}
:root[data-theme="light"] .rail{background:rgba(11,26,43,.1)}
:root[data-theme="light"] .steps-r div{color:var(--t3)}:root[data-theme="light"] .steps-r div.on{color:var(--t)}
:root[data-theme="light"] .steps-r div::before{background:#fff;border-color:rgba(11,26,43,.2)}
/* nav: proper light glass, not grey putty */
:root[data-theme="light"] .nav-bar{background:rgba(255,255,255,.66);border-color:rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 12px 34px -20px rgba(11,42,74,.35)}
:root[data-theme="light"] .nav .btn:not(.sky){background:rgba(255,255,255,.55);color:var(--t)}
/* loader in light keeps the dark studio (it hands off to the dark stage only in dark mode) */

/* ===================== craft r1: hero card, small labels, footer, phone ===================== */
.c-tracker .sub{max-width:34ch}
.rail{bottom:62px}
.steps-r{bottom:22px}
.steps-r div{width:auto;flex:1;text-align:center!important}
.steps-r div::before{left:50%!important;right:auto!important;margin-left:-7px}
.steps-r div:first-child{text-align:left!important}.steps-r div:first-child::before{left:0!important;margin-left:0}
.steps-r div:last-child{text-align:right!important}.steps-r div:last-child::before{left:auto!important;right:0!important}
.c-tracker .who-row{position:absolute;left:28px;right:28px;bottom:104px;display:flex;justify-content:space-between;font-size:13px;color:#a1a9b4}
:root[data-theme="light"] .c-tracker .who-row{color:var(--t3)}
.hero .scroll-cue{display:none}
.ctrack span{font-size:12px;height:32px}
.more-q button{font-size:14px}
.bigmark{height:clamp(90px,12vw,170px);margin-top:56px}
@media (max-width:640px){
  .nav-bar{justify-content:space-between}
  .nav-cta{margin-left:auto}
  .logo svg{height:26px}
  .hero .k .mb{display:none}
  .hero .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .hero .acts .btn{padding:14px 10px;font-size:15px}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
  .hero-stats b{font-size:24px}
  .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.86) 62%,rgba(7,9,12,.55) 82%,rgba(7,9,12,.9) 100%)}
  :root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,rgba(242,244,247,.96) 0%,rgba(242,244,247,.88) 62%,rgba(242,244,247,.55) 82%,rgba(242,244,247,.92) 100%)}
  .ctrack span{font-size:11px}
}

/* ===================== critics r1 (brief / motion) ===================== */
@media (min-width:1061px){ #how{padding-top:118px} .how-grid{margin-top:36px} .how-case{max-width:min(560px,56vh);justify-self:center;width:100%} }
@media (max-width:640px){ .nav-cta .btn.sky{display:inline-flex;padding:9px 14px;font-size:14px} }
.bigmark{display:none}
.glass::after,.lg::after{background:radial-gradient(240px 180px at var(--lx,30%) var(--ly,0%),rgba(127,211,247,.10),transparent 70%)}
.svc:hover .case .art>img:not(.lite):not(.bloom){filter:brightness(1.25)}
.case.torch .lite{-webkit-mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),#000 0,transparent 70%);mask-image:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),#000 0,transparent 70%);filter:brightness(2.6) saturate(1.4)}
/* drawn-on swap: a bright scan line leads the new object in */
.case .scan{position:absolute;top:0;bottom:0;width:2px;left:0;z-index:4;background:#bfe9ff;box-shadow:0 0 18px 4px rgba(127,211,247,.8);opacity:0;pointer-events:none}
:root[data-theme="light"] .case .scan{background:#0868b0;box-shadow:0 0 14px 3px rgba(8,104,176,.45)}

/* ===================== system r1 ===================== */
.dot{background:#22b5f0;box-shadow:0 0 12px rgba(34,181,240,.8)}
.t-mini .case,.claim .case{border-radius:20px}
.step p{font-size:17px}
.svc .d,.claim p,.panel .lead{font-size:16px}

/* ===================== calls to action: calm, specific, at decision points ===================== */
.btn .ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}
.assure{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-size:14px;color:#a1a9b4}
.assure span{display:inline-flex;align-items:center;gap:8px}
.assure span::before{content:"";width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#22b5f0 0 3px,transparent 3.5px),rgba(34,181,240,.15)}
:root[data-theme="light"] .assure{color:var(--t2)}
.cta-band{position:relative;margin-top:56px;border-radius:32px;padding:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;overflow:hidden;
  background:radial-gradient(70% 140% at 0% 0%,rgba(34,181,240,.14),transparent 60%),var(--glass)}
:root[data-theme="light"] .cta-band{background:radial-gradient(70% 140% at 0% 0%,rgba(0,145,212,.12),transparent 60%),var(--glass)}
.cta-band h3{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em;margin-top:12px;max-width:24ch}
.cta-band p{color:var(--t2);margin:12px 0 0;max-width:58ch;font-size:16px}
.cta-band .k{margin:0}
.cta-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cta-line{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(127,211,247,.9),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:ctaline 4.8s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}
:root[data-theme="light"] .cta-line{background-image:linear-gradient(90deg,transparent,rgba(0,145,212,.7),transparent)}
@keyframes ctaline{0%{background-position:-60% 0}60%,100%{background-position:160% 0}}
.join{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);flex-wrap:wrap}
.join p{margin:0;font-size:20px;letter-spacing:-.01em}
.join b{color:var(--sky);font-weight:500}
.form-foot p b{color:var(--t);font-weight:500}
@media (max-width:760px){.cta-band{grid-template-columns:1fr}.cta-acts{justify-content:flex-start}.cta-acts .btn{flex:1}}
@media (prefers-reduced-motion:reduce){.cta-line{animation:none;opacity:0}}

:root[data-theme="light"] .case .bloom,:root[data-theme="light"] .stage .bloom{display:none}
:root[data-theme="light"] .case .lite{filter:brightness(1.5) saturate(1.2)}
:root[data-theme="light"] .case .art>img:not(.lite){filter:contrast(1.15) brightness(.92)}


.cta-band h3{max-width:30ch;text-wrap:pretty}


html{overflow-x:clip}
@media (max-width:640px){.hero-obj{margin:0}}


/* ===================== light mode v2 (user: filament art needs the dark) — art lives in lit night "lightboxes" ===================== */
:root[data-theme="light"] .case{background:radial-gradient(90% 90% at 50% 40%,#0d1b2c,#070c14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(11,26,43,.08),0 24px 44px -18px rgba(34,181,240,.45)}
:root[data-theme="light"] .case .art{filter:none}
:root[data-theme="light"] .case .bloom{display:block}
:root[data-theme="light"] .case .lite{filter:brightness(2) saturate(1.3)}
:root[data-theme="light"] .case .art>img:not(.lite){filter:none}
:root[data-theme="light"] .case .sweep{background:linear-gradient(115deg,transparent 44%,rgba(255,255,255,.13) 50%,transparent 56%);mix-blend-mode:screen}
:root[data-theme="light"] .case .scan{background:#bfe9ff;box-shadow:0 0 18px 4px rgba(127,211,247,.8)}
:root[data-theme="light"] .how-case .no{color:#8b949f}
/* light mode hero: the same night stage, full-bleed; the light page starts below it */
:root[data-theme="light"] .hero{color:#f2f4f7}
:root[data-theme="light"] .stage{background:#07090c}
:root[data-theme="light"] .stage picture{filter:none}
:root[data-theme="light"] .stage .bloom{display:block}
:root[data-theme="light"] .stage .veil{background:radial-gradient(60% 70% at 72% 50%,rgba(7,9,12,.15),rgba(7,9,12,.75) 80%),linear-gradient(90deg,rgba(7,9,12,.85) 0%,rgba(7,9,12,0) 50%),linear-gradient(0deg,rgba(7,9,12,.6),transparent 25%)}
:root[data-theme="light"] .stage .beam,:root[data-theme="light"] .stage .sweep{mix-blend-mode:screen;opacity:1}
:root[data-theme="light"] .stage::after{background:radial-gradient(closest-side,rgba(34,181,240,.14),transparent)}
:root[data-theme="light"] .hero .k,:root[data-theme="light"] .hero-stats>div>span{color:#8b949f}
:root[data-theme="light"] .hero .lead{color:#b4bcc6}
:root[data-theme="light"] .assure{color:#a1a9b4}
:root[data-theme="light"] .hero .btn{color:#f2f4f7;border-color:rgba(255,255,255,.22)}
:root[data-theme="light"] .hero .btn.sky{color:#04121c;border-color:#22b5f0;background:#22b5f0}
:root[data-theme="light"] .hero .btn.lg{background:rgba(255,255,255,.08)}
:root[data-theme="light"] .obj{background:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 45%,rgba(255,255,255,.07));border-color:rgba(255,255,255,.16);color:#f2f4f7;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 50px 90px -30px rgba(0,0,0,.85)}
:root[data-theme="light"] .obj .k,:root[data-theme="light"] .c-policy .meta,:root[data-theme="light"] .c-tracker .sub,:root[data-theme="light"] .c-tracker .who-row{color:#a1a9b4}
:root[data-theme="light"] .rail{background:rgba(255,255,255,.12)}
:root[data-theme="light"] .steps-r div{color:#8b949f}:root[data-theme="light"] .steps-r div.on{color:#f2f4f7}
:root[data-theme="light"] .steps-r div::before{background:#0b0e12;border-color:rgba(255,255,255,.25)}
@media (max-width:640px){:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.86) 62%,rgba(7,9,12,.55) 82%,rgba(7,9,12,.9) 100%)}}
/* light nav floating over the night hero: bright glass, dark text */
:root[data-theme="light"] .nav-bar{background:rgba(255,255,255,.82)}

/* ===================== loader 2 · light through the mark (site version) ===================== */
.loader{background:transparent}
.lp{position:absolute;background:#05070a}
#lpT{left:0;right:0;top:0;height:var(--y0,50vh)}#lpB{left:0;right:0;top:var(--y1,50vh);bottom:0}
#lpL{left:0;width:var(--x0,50vw);top:var(--y0,50vh);height:calc(var(--y1,50vh) - var(--y0,50vh))}#lpR{left:var(--x1,50vw);right:0;top:var(--y0,50vh);height:calc(var(--y1,50vh) - var(--y0,50vh))}
.lhole{position:absolute;left:var(--x0,50vw);top:var(--y0,50vh);width:calc(var(--x1,50vw) - var(--x0,50vw));height:calc(var(--y1,50vh) - var(--y0,50vh));border:2px solid #22b5f0;box-shadow:0 0 30px rgba(34,181,240,.6),inset 0 0 30px rgba(34,181,240,.3);opacity:0;pointer-events:none}
.l2{position:absolute;inset:0;background:#05070a}
.l2-stage{position:absolute;left:50%;top:46%;width:220px;height:225px;margin:-112px 0 0 -110px;overflow:hidden;transform-origin:0 0}
.l2-stage svg{width:100%;height:100%;overflow:visible}
.l2-frame{fill:none;stroke:#1aa8ea;stroke-width:9}
.l2-s{fill:#4d9be0;opacity:.12}
.l2-beam{position:absolute;left:-60%;top:-60%;width:220%;height:220%;background:linear-gradient(115deg,transparent 42%,rgba(191,233,255,.5) 50%,transparent 58%);mix-blend-mode:screen;pointer-events:none;transform:translateX(-60%)}
.l2-under{position:absolute;left:0;right:0;top:calc(46% + 140px);text-align:center}
.l2-w{font-size:13px;letter-spacing:.32em;color:#a1a9b4}
.l2-n{margin-top:10px;font-size:13px;letter-spacing:.2em;color:#8b949f;font-variant-numeric:tabular-nums}
@media (max-width:640px){.l2-stage{width:160px;height:164px;margin:-82px 0 0 -80px}.l2-under{top:calc(46% + 110px)}.l2-w{font-size:11px}}

/* ===================== brief r2 ===================== */
.form-foot{display:grid;grid-template-columns:1fr auto;align-items:end}
.form-foot p:first-child{max-width:none;font-size:14px;color:var(--t2);padding:14px 16px;border-radius:16px;background:rgba(34,181,240,.08);border:1px solid rgba(34,181,240,.25)}
.form-foot p:first-child b{display:block;color:var(--sky);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:4px}
@media (max-width:640px){.form-foot{grid-template-columns:1fr}.form-foot .submit{width:100%}}
.svc{transition:border-color .3s,transform .6s var(--E),box-shadow .6s var(--E)}
.svc:hover{transform:translateY(-6px)}
.svc:hover .case{box-shadow:inset 0 0 0 1px rgba(127,211,247,.35),0 24px 50px -20px rgba(34,181,240,.55)}
.svc:hover .case .bloom{opacity:.7;animation:none}
:root[data-theme="light"] .btn.lg{border-color:var(--line-2)}
:root[data-theme="light"] .steps-r div.on::before{background:#22b5f0;border-color:#22b5f0;box-shadow:0 0 14px rgba(34,181,240,.7)}
@media (max-width:640px){
  .hero-stats>div>span{font-size:10px;letter-spacing:.1em;white-space:nowrap}
  .hero{padding-bottom:20px;min-height:auto}
  #quote{padding-top:56px}
  .join{margin-top:28px}
}

/* ===================== craft + motion r2 ===================== */
@media (min-width:1061px){
  .stage .shot,.stage canvas.shot{opacity:.78;filter:none}
  .stage .veil{background:linear-gradient(90deg,rgba(7,9,12,.9) 0%,rgba(7,9,12,.55) 34%,rgba(7,9,12,0) 54%),linear-gradient(0deg,rgba(7,9,12,.5),transparent 22%)}
  .hero-obj{top:30%;width:480px;height:320px;right:calc(var(--gut) + 10px)}
  .obj{transform-origin:50% 50%}
}
:root[data-theme="light"] .stage .veil{background:linear-gradient(90deg,rgba(7,9,12,.9) 0%,rgba(7,9,12,.55) 34%,rgba(7,9,12,0) 54%),linear-gradient(0deg,rgba(7,9,12,.5),transparent 22%)}
:root[data-theme="light"] .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(180deg,rgba(242,244,247,0),#f2f4f7);pointer-events:none;z-index:1}
/* light theme nav: dark glass over the night hero, light glass on the light page */
:root[data-theme="light"] .nav:not(.past) .nav-bar{background:rgba(11,14,18,.55);border-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme="light"] .nav:not(.past) .nav-links a{color:#b4bcc6}
:root[data-theme="light"] .nav:not(.past) .theme-btn{color:#f2f4f7;border-color:rgba(255,255,255,.2)}
:root[data-theme="light"] .nav:not(.past) .btn:not(.sky){background:rgba(255,255,255,.08);color:#f2f4f7;border-color:rgba(255,255,255,.2)}
:root[data-theme="light"] .nav:not(.past) .menu-btn{color:#f2f4f7}
:root[data-theme="light"] .nav.past .nav-bar{background:rgba(255,255,255,.62);border-color:#fff}
/* one lightbox token in light: bezel + glow spill everywhere, same scale feel */
:root[data-theme="light"] .case{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 5px #fff,0 0 0 6px rgba(11,26,43,.07),0 18px 40px -16px rgba(34,181,240,.55)}
.tile .v{white-space:nowrap}
.t-mini .v{font-size:clamp(24px,2.2vw,32px)!important}
.covers{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:none}
.covers em{font-style:normal;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#bfe9ff;margin-right:4px}
.covers i{font-style:normal;font-size:12.5px;color:#eaf7ff;padding:6px 11px;border-radius:999px;background:rgba(7,12,20,.55);border:1px solid rgba(127,211,247,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.how-case .bloom{opacity:.18!important}
@media (max-width:640px){.hero-obj{transform:scale(.78);transform-origin:50% 20%}.t-mini .v{font-size:22px!important}}

/* ===================== system r2 ===================== */
:root,:root[data-theme="light"]{--logo-sky:#0096d9;--logo-royal:#0868b0}
.case .bloom{opacity:.35;animation:breathe2 2.4s ease-in-out infinite;animation-delay:var(--cd,0s)}
@keyframes breathe2{0%,100%{filter:blur(10px) brightness(1.1)}50%{filter:blur(10px) brightness(1.9)}}
.stage .bloom{animation:breathe2 2.4s ease-in-out infinite}
.join{position:relative;margin-top:40px;padding:24px 28px;border-top:0;border-radius:28px;overflow:hidden;background:radial-gradient(70% 140% at 0% 0%,rgba(34,181,240,.14),transparent 60%),var(--glass)}

@media (max-width:640px){:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.94) 0%,rgba(7,9,12,.86) 62%,rgba(7,9,12,.55) 82%,rgba(7,9,12,.9) 100%)}}


/* ===================== brief r3 ===================== */
html{scroll-padding-top:110px}
.t-mini .case{width:120px;height:120px}
.t-mini .case .art{transform:scale(1.45)}
.aw b{font-size:17px}.aw span{font-size:14px;color:var(--t2)}
@media (max-width:640px){
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.92) 0%,rgba(7,9,12,.8) 46%,rgba(7,9,12,.3) 72%,rgba(7,9,12,.75) 100%)}
  .stage .shot{object-position:72% 100%}
  .panel>div:first-child{display:contents}
  .panel>div:first-child>.k,.panel>div:first-child>.h2,.panel>div:first-child>.lead{order:0}
  .panel .form-card{order:1}
  #postCase{display:none}
  .clist{order:2;margin-top:6px}
}

/* ===================== round 3 fixes ===================== */
.case .flash2{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 48%,rgba(220,244,255,.95),rgba(127,211,247,.35) 22%,transparent 50%);mix-blend-mode:screen}
.svc:hover .case.torch .lite{filter:brightness(3.2) saturate(1.5)}
.case .art{transition:transform .9s var(--E)}.svc:hover .case .art{transform:scale(1.06)}
.covers em{margin-right:8px}
/* timeline: four evenly spaced stops */
.steps-r{display:block;height:34px}
.steps-r div{position:absolute;top:0;width:auto!important;flex:none;padding-top:22px;white-space:nowrap;transform:translateX(-50%);text-align:center!important}
.steps-r div:nth-child(1){left:0;transform:none;text-align:left!important}.steps-r div:nth-child(2){left:33.333%}.steps-r div:nth-child(3){left:66.667%}.steps-r div:nth-child(4){left:100%;transform:translateX(-100%);text-align:right!important}
.steps-r div::before{left:50%!important;right:auto!important;margin-left:-7px!important}
.steps-r div:nth-child(1)::before{left:0!important;margin-left:0!important}.steps-r div:nth-child(4)::before{left:auto!important;right:0!important;margin-left:0!important}
/* type: a touch more air in display tracking; 12px minimum */
h1,h2,h3,.h2{letter-spacing:-.035em}
.hero h1{letter-spacing:-.038em}
.ctrack span{font-size:12px}
/* light mode: the night hero sets onto the page through deep navy, below the stats */
:root[data-theme="light"] .hero{padding-bottom:150px}
:root[data-theme="light"] .hero::after{height:150px;background:linear-gradient(180deg,rgba(7,9,12,0) 0%,#0b1a2b 35%,#c9dceb 80%,#f2f4f7 100%)}
/* light mode: one lightbox token at every size (pale-blue bezel ring + glow spill) */
:root[data-theme="light"] .case{box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 4px #fff,0 0 0 5px rgba(34,181,240,.3),0 14px 34px -10px rgba(34,181,240,.6)}
/* phones: text on clean night; a real art band below */
@media (max-width:640px){
  .stage .veil,:root[data-theme="light"] .stage .veil{background:linear-gradient(180deg,rgba(7,9,12,.97) 0%,rgba(7,9,12,.95) 52%,rgba(7,9,12,.2) 70%,rgba(7,9,12,.05) 86%,rgba(7,9,12,.7) 100%)}
  .stage .shot{object-position:70% 100%}
  .hero-stats>div>span{font-size:11.5px;letter-spacing:.06em}
  .ctrack span{font-size:12px}
  :root[data-theme="light"] .hero{padding-bottom:90px}
}

@media (max-width:640px){.nav-bar{gap:6px;padding:7px 7px 7px 12px}.logo svg{height:23px}.theme-btn,.menu-btn{width:34px;height:34px}.menu-btn span{left:8px;right:8px}.menu-btn span:first-child{top:12px}.menu-btn span:last-child{top:20px}.nav-cta{gap:6px}.nav-cta .btn.sky{padding:8px 12px;font-size:13px}}