/* Inter, served from this site (latin subset, variable 400–900; OFL) and preloaded so it is ready before first paint. */
@font-face{font-family:Inter;font-style:normal;font-weight:400 900;font-display:block;src:url(/fonts/inter-latin-var.woff2) format("woff2");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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial sized to Inter's metrics, so the web font swapping in doesn't move the layout. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
/* Layer1 SEO — premium public site. Tokens are shared with /theme.css (dashboard, auth, legal pages). */
:root{
  --bg:#050914;--bg2:#08111f;--panel:#0b1526;--line:#22405f;--line2:#2f5c8c;
  --blue:#2a8bff;--blue-deep:#1764e5;--cyan:#67ddff;--green:#42e8b1;--amber:#f5b85c;--red:#ff8a8a;
  --text:#f4f8ff;--muted:#9db3cf;--muted2:#7f97b6;
  --glass:linear-gradient(145deg,rgba(20,40,66,.62),rgba(8,21,38,.88));
  --font:Inter,"Inter Fallback",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gx:70%;--gy:20%;
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:124px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);background:var(--bg);font:16px/1.6 var(--font);overflow-x:hidden;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{line-height:1.12;margin:0}
.wrap{width:min(1320px,100% - 32px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blue);padding:10px 14px;border-radius:8px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.blue{color:#4ea6ff}
.shine{background:linear-gradient(100deg,#d2f0ff,#63bbff 45%,#237bff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- Family bar + header ---- */
.family-bar{background:#030710;border-bottom:1px solid #12243b;font-size:12px;line-height:1.5;color:var(--muted2);letter-spacing:.3px}
.family-bar .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;padding:8px 0;min-height:34px}
.fam{display:inline-flex;align-items:center;white-space:nowrap}
.fam+.fam:before{content:"·";margin:0 11px;opacity:.45}
.family-bar a:hover{color:var(--text)}
.family-bar .current{color:#8fcaff;font-weight:700}
.family-bar em{font-style:normal;color:var(--amber);font-size:10.5px;line-height:1.4;border:1px solid #5b4a2a;border-radius:20px;padding:1px 7px;margin-left:6px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(5,9,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(47,92,140,.28)}
.nav{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{flex:none;width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:19px;letter-spacing:-1.5px;color:#fff;background:linear-gradient(135deg,#2a83ff,#0843b3);border:1px solid #79b6ff;box-shadow:0 0 26px rgba(20,121,255,.45),inset 0 1px rgba(255,255,255,.35)}
.brand-text strong{display:block;font-size:20px;letter-spacing:-.6px;line-height:1.1}
.brand-text small{display:block;font-size:9px;letter-spacing:1.4px;color:var(--muted);white-space:nowrap}
#main-nav{display:flex;gap:26px;font-size:14px;color:#bed0e8}
#main-nav a:hover{color:#fff}
.nav-login-m{display:none}
.actions{display:flex;align-items:center;gap:10px}
.lang{display:flex;border:1px solid #2f4b6b;border-radius:999px;padding:3px;background:#0a1626}
.lang button{border:0;background:transparent;font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;color:#bcd2ec}
.lang button[aria-pressed="true"]{background:#1765d8;color:#fff;box-shadow:0 0 14px rgba(42,139,255,.55)}
.login{font-size:14px;color:#d8e6f7;padding:8px 6px}
.login:hover{color:#fff}
.menu{display:none;border:1px solid #2f4b6b;background:#0a1626;border-radius:9px;width:42px;height:42px;font-size:18px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #4a9bff;border-radius:11px;padding:13px 22px;background:linear-gradient(125deg,var(--blue-deep),#2999ff);box-shadow:0 10px 32px rgba(8,122,255,.33),inset 0 1px rgba(255,255,255,.25);color:#fff;font-weight:750;font-size:15px;text-align:center;transition:transform .2s,box-shadow .2s,filter .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(8,122,255,.5)}
.btn:disabled{opacity:.7;cursor:progress;transform:none}
.btn-sm{padding:9px 15px;font-size:13.5px}
.btn-lg{padding:16px 24px;font-size:16px}
.btn-ghost{background:rgba(12,26,43,.6);box-shadow:none;border-color:#3a5a80}
.btn-ghost:hover{border-color:#5aa9ff;box-shadow:0 0 24px rgba(42,139,255,.25)}

/* ---- Hero ---- */
/* Background: Unsplash photo by JC Gellidon (see CREDITS.md), served at 1280/1920/2560/3200px; edges already softened in the file. */
.hero{--bgimg:url(/assets/office-night-2560.webp);position:relative;isolation:isolate;overflow:hidden;padding:56px 0 40px;background:linear-gradient(90deg,rgba(4,8,18,.8),rgba(4,8,18,.5) 32%,rgba(4,8,18,.12) 58%,transparent 82%),linear-gradient(rgba(4,10,26,.12),rgba(4,10,26,.12)),radial-gradient(ellipse 60% 55% at 72% 38%,rgba(20,80,190,.3),transparent 70%),var(--bgimg) left -8vw top 0/max(112%,1600px) auto no-repeat,var(--bg)}
@media (min-width:1101px) and (min-resolution:1.5dppx){.hero{--bgimg:url(/assets/office-night-3200.webp)}}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(transparent,var(--bg));z-index:-1}
#particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.glow-follow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(600px circle at var(--gx) var(--gy),rgba(42,139,255,.20),transparent 60%);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75}50%{opacity:1}}
.hero-grid{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:28px;align-items:center;min-height:660px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;border:1px solid #2b5b8d;background:rgba(11,38,67,.66);border-radius:40px;padding:7px 14px;color:#8bcaff;font-size:10.5px;font-weight:800;letter-spacing:1.2px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);flex:none}
.hero-copy{container-type:inline-size}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1{font-size:clamp(34px,3.6vw,52px);font-size:min(58px,9.5cqi);letter-spacing:-.045em;line-height:1.04;margin:22px 0 18px;font-weight:850}
.hero h1,.lead,.hero-note{text-shadow:0 2px 18px rgba(2,6,16,.85)}
.hero h1 .shine{text-shadow:none;filter:drop-shadow(0 0 14px rgba(60,150,255,.55)) drop-shadow(0 0 34px rgba(35,123,255,.35))}
.lead{color:#c3d4e8;font-size:clamp(16px,1.35vw,19px);max-width:560px;margin:0 0 26px}
.hero-form{display:flex;gap:8px;max-width:600px;padding:7px;border-radius:15px;background:rgba(6,16,30,.78);border:1px solid #2f5c8c;box-shadow:0 0 0 1px rgba(42,139,255,.08),0 0 40px rgba(42,139,255,.22)}
.hero-form input,.audit-row input{flex:1;min-width:0;background:transparent;border:0;padding:12px 14px;font-size:16px;color:#fff;outline:none}
.hero-form:focus-within{border-color:#5aa9ff;box-shadow:0 0 0 3px rgba(42,139,255,.25),0 0 50px rgba(42,139,255,.35)}
.hero-note{color:var(--muted);font-size:13px;margin:12px 0 0}
.price-badge{display:inline-flex;flex-direction:column;align-items:center;margin-top:26px;padding:14px 26px;border-radius:999px;border:1px solid #4a9bff;background:radial-gradient(circle at 30% 20%,rgba(42,139,255,.35),rgba(6,16,30,.9) 70%);box-shadow:0 0 40px rgba(42,139,255,.35),inset 0 1px rgba(255,255,255,.2);text-transform:uppercase;font-size:11px;letter-spacing:1.6px;color:#cfe3fa;line-height:1.2;transform-style:preserve-3d}
.price-badge strong{font-size:42px;letter-spacing:-1px;color:#fff;line-height:1.05;text-shadow:0 0 18px rgba(103,221,255,.6)}

/* ---- Command Center ---- */
.cc-scene{position:relative;perspective:1400px;min-width:0;margin:0 0 64px}
.cc-halo{position:absolute;inset:2% -6%;background:radial-gradient(ellipse,rgba(19,122,246,.42),transparent 66%);filter:blur(28px);animation:breathe 6s ease-in-out infinite;z-index:-1}
.cc-frame,.cc-glow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cc-frame{z-index:-1;transform:translateZ(-2px);filter:drop-shadow(0 40px 60px rgba(0,0,0,.65))}
.cc-glow{z-index:2;filter:drop-shadow(0 0 6px rgba(95,180,255,.95)) drop-shadow(0 0 22px rgba(30,130,255,.8));animation:edge 5s ease-in-out infinite}
@keyframes edge{0%,100%{opacity:.5}50%{opacity:1}}
.cc-reflect{position:absolute;left:4%;right:4%;top:calc(100% + 8px);height:96px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 46% 5px at 50% 0,rgba(160,215,255,.85),transparent),radial-gradient(ellipse 55% 100% at 50% 0,rgba(30,130,255,.42),transparent 70%),linear-gradient(rgba(95,170,255,.2),transparent 85%);border-radius:50% 50% 0 0/18px 18px 0 0;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);filter:blur(2px);animation:breathe 5s ease-in-out infinite}
.cc-screen{--rx:3deg;--ry:-5deg;position:relative;padding:42px 34px 40px;transform:rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s ease-out}
.cc-body>.cc-gauges{transform:rotateY(13deg);transform-origin:right center}
.cc-body>.cc-checks{transform:rotateY(-13deg);transform-origin:left center}
.cc-body>*,.tile{transform:translateZ(2px)}
.tile:nth-child(-n+2){transform-origin:right center}.tile:nth-child(n+4){transform-origin:left center}
.tile:nth-child(1){transform:rotateY(14deg)}.tile:nth-child(2){transform:rotateY(6deg)}.tile:nth-child(4){transform:rotateY(-6deg)}.tile:nth-child(5){transform:rotateY(-14deg)}
.cc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid rgba(53,84,114,.5);margin-bottom:14px}
.cc-title{font-size:17px;letter-spacing:.5px;color:#d7eaff}
.cc-title b{color:#fff;letter-spacing:1px}
.cc-status{display:inline-flex;align-items:center;gap:7px;font-size:11px;border:1px solid #2e5a46;background:rgba(14,48,38,.6);color:#9cf3d3;border-radius:20px;padding:4px 10px;white-space:nowrap}
.cc-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.cc-status.running i{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.cc-body{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:14px;transform-style:preserve-3d}
.cc-card{border:1px solid rgba(58,98,142,.8);border-radius:16px;background:rgba(9,25,43,.8);padding:18px;min-width:0;box-shadow:inset 0 1px rgba(141,213,255,.12)}
.cc-card-title{display:block;font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;color:#8fb3d8;margin-bottom:10px;font-weight:700}
.cc-gauges{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:center}
.gauge{position:relative;text-align:center}
.g-ring{position:relative;display:block;max-width:142px;margin:auto}
.gauge svg{width:100%;transform:rotate(-90deg)}
.g-track{fill:none;stroke:#1b3350;stroke-width:9}
.g-fill{fill:none;stroke:#38b6ff;stroke-width:9;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;filter:drop-shadow(0 0 6px rgba(56,182,255,.8));transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
#gauge-geo .g-fill{stroke:var(--green);filter:drop-shadow(0 0 6px rgba(66,232,177,.7))}
.gauge.idle .g-val small{display:none}
.gauge.idle .g-fill{stroke-dashoffset:250;animation:sweep 2.6s linear infinite;transform-origin:60px 60px;transition:none}
@keyframes sweep{to{transform:rotate(360deg)}}
.g-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px}
.g-val strong{font-size:36px;letter-spacing:-1px}
.g-val small{font-size:10px;color:var(--muted);margin-top:12px}
.g-label{display:block;font-size:12.5px;color:#aac6e4;margin-top:4px}
.cc-hint{grid-column:1/-1;margin:10px 0 0;font-size:12.5px;color:var(--muted);text-align:center}
.cc-globe{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:#9fc6ec;font-weight:700}
.cc-globe canvas{width:100%;max-width:196px;height:auto;aspect-ratio:1;filter:drop-shadow(0 0 16px rgba(42,139,255,.55))}
.cc-checks ul{list-style:none;margin:0;padding:0;font-size:14px;color:#cfe0f2}
.cc-checks li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(40,64,93,.6)}
.cc-checks li:last-child{border:0}
.cc-checks li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#2b4f78;box-shadow:0 0 0 3px rgba(43,79,120,.25);animation:scanDot 5s infinite}
.cc-checks li:nth-child(2):before{animation-delay:1s}.cc-checks li:nth-child(3):before{animation-delay:2s}.cc-checks li:nth-child(4):before{animation-delay:3s}.cc-checks li:nth-child(5):before{animation-delay:4s}
@keyframes scanDot{0%,15%{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}25%,100%{background:#2b4f78;box-shadow:0 0 0 3px rgba(43,79,120,.25)}}
.cc-engines{margin-top:16px;transform-style:preserve-3d}
.tiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;transform-style:preserve-3d}
.tile{border:1px solid rgba(64,110,160,.65);border-radius:12px;padding:13px 8px;text-align:center;background:linear-gradient(160deg,rgba(23,54,88,.85),rgba(8,23,45,.9));box-shadow:inset 0 1px rgba(141,213,255,.18);transition:border-color .3s,box-shadow .3s}
.tile b{display:block;font-size:15.5px;letter-spacing:-.2px}
.tile small{display:block;font-size:11px;color:var(--muted)}
.tile:hover{border-color:#6fc1ff;box-shadow:0 0 22px rgba(42,139,255,.4)}
.hero-features{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:40px}
.fcard{padding:20px}
.fcard h2{font-size:17px;margin:14px 0 6px;letter-spacing:-.2px}
.fcard p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.ficon{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1px solid #4b8fd6;background:radial-gradient(circle at 50% 40%,rgba(42,139,255,.42),rgba(12,30,56,.92) 72%);color:#8ad8ff;box-shadow:0 0 24px rgba(42,139,255,.45),inset 0 0 14px rgba(103,200,255,.25)}
.ficon svg{width:28px;height:28px;filter:drop-shadow(0 0 5px rgba(120,205,255,.75))}

/* ---- Glass cards, tilt, glare ---- */
.glass{position:relative;background:var(--glass);border:1px solid rgba(48,82,120,.8);border-radius:20px;box-shadow:0 18px 55px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
[data-tilt]{--tx:0deg;--ty:0deg;--px:50%;--py:0%;transform:perspective(900px) rotateX(var(--tx)) rotateY(var(--ty));transition:transform .25s ease-out,border-color .3s,box-shadow .3s}
.glass[data-tilt]:after,.price-badge:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(400px circle at var(--px) var(--py),rgba(150,210,255,.14),transparent 45%);opacity:0;transition:opacity .3s}
.glass[data-tilt]:hover{border-color:rgba(90,169,255,.75);box-shadow:0 22px 60px rgba(0,0,0,.45),0 0 34px rgba(42,139,255,.22)}
[data-tilt]:hover:after{opacity:1}
.cc-screen[data-tilt]{transform:rotateX(calc(var(--rx) + var(--tx))) rotateY(calc(var(--ry) + var(--ty)))}

/* ---- Sections ---- */
.section{padding:96px 0}
.section-head{text-align:center;max-width:800px;margin:0 auto 44px}
.kicker{display:block;color:#69bcff;text-transform:uppercase;letter-spacing:2.4px;font-size:11.5px;font-weight:850}
.section h2{font-size:clamp(30px,3.6vw,50px);letter-spacing:-.035em;margin:14px 0}
.sub{color:var(--muted);font-size:17px;margin:0}
.note{color:var(--muted2);font-size:13.5px;text-align:center;max-width:860px;margin:30px auto 0}
.note a{color:#7cc4ff;text-decoration:underline}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pcard,.step{padding:28px}
.pcard .num,.step-n{display:block;color:#5fb2ff;font-weight:800;letter-spacing:1.5px;font-size:12px}
.step-n{font-size:34px;letter-spacing:-1px;color:#3a86d6}
.pcard h3,.step h3{font-size:21px;margin:14px 0 8px}
.pcard p,.step p{color:var(--muted);margin:0 0 14px}
.pcard a{color:#7cc4ff;font-weight:650;font-size:14px}

/* ---- Audit ---- */
.audit-row{display:flex;gap:8px;max-width:720px;margin:0 auto;padding:8px;border-radius:16px}
.audit-msg{text-align:center;min-height:24px;margin:14px 0 0;color:var(--muted)}
.audit-msg.error{color:var(--red)}
.results{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
.rpanel{padding:26px}
.rhead{display:flex;align-items:center;gap:12px}
.rtag{flex:none;font-weight:850;font-size:12px;letter-spacing:1.5px;border:1px solid #3a7bc4;border-radius:8px;padding:5px 9px;color:#8fd0ff;background:rgba(23,62,104,.5)}
.rpanel h3{font-size:19px}
.rcopy{color:var(--muted);font-size:14.5px}
.rbox{border-top:1px solid rgba(48,82,120,.6);padding-top:14px;margin-top:6px}
.rurl{font-size:12.5px;color:var(--muted2);word-break:break-all}
.rscore{display:flex;align-items:baseline;gap:6px;margin:4px 0}
.rscore strong{font-size:52px;letter-spacing:-2px;line-height:1}
.rscore span{color:var(--muted)}
.rverdict{color:#9cf3d3;font-weight:650;margin-bottom:10px}
.breakdown{display:grid;gap:9px;margin-top:10px}
.breakdown .row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:#cfe0f2}
.track{height:6px;border-radius:9px;background:#1b3350;overflow:hidden;margin-top:4px}
.fill{height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2b83ff,#65e9cc);transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.save-cta{text-align:center;margin-top:24px}

/* ---- Engines strip ---- */
.engines-strip{padding:24px 0;border-block:1px solid rgba(34,64,95,.6);background:linear-gradient(90deg,transparent,rgba(17,56,107,.25),transparent)}
.engines-strip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 34px}
.engines-strip .names{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px}
.engines-strip b{font-size:19px;color:#dbe8f7;letter-spacing:-.2px}

/* ---- Pricing ---- */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.plan{padding:30px;display:flex;flex-direction:column}
.plan.featured{border-color:#409dff;box-shadow:0 0 60px rgba(20,126,255,.28),0 18px 55px rgba(0,0,0,.4)}
.plan-name{font-weight:850;letter-spacing:2px;font-size:12px;color:#7cc4ff}
.plan-tag{align-self:flex-start;margin-bottom:12px;font-size:10.5px;font-weight:800;letter-spacing:1px;padding:4px 10px;border-radius:30px;background:#14539d;border:1px solid #3999ff;color:#d9efff}
.plan-tag.gold{background:#4a3a16;border-color:#c99a3d;color:#ffe2a8}
.plan h3{font-size:22px;margin:8px 0 4px}
.money{font-size:48px;font-weight:850;letter-spacing:-2px}
.money small{font-size:15px;letter-spacing:0;color:var(--muted);font-weight:500}
.plan p{color:var(--muted);margin:0 0 4px}
.plan ul{list-style:none;padding:0;margin:18px 0 24px}
.plan li{position:relative;padding:7px 0 7px 26px;font-size:14px;color:#cddcec;border-bottom:1px solid rgba(40,64,93,.45)}
.plan li:before{content:"✓";position:absolute;left:2px;color:var(--green)}
.plan .btn{margin-top:auto;width:100%}

/* ---- FAQ ---- */
.faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:44px}
.faq-list{display:grid;gap:10px}
.faq details{padding:0 20px;border-radius:14px}
.faq summary{cursor:pointer;padding:17px 0;font-weight:650;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:#5fb2ff;font-size:20px;line-height:1}
.faq details[open] summary:after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--muted)}

/* ---- Closing + footer ---- */
.closing{padding-top:20px}
.closing-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:44px;background:radial-gradient(ellipse at 80% 0,rgba(42,139,255,.28),transparent 60%),var(--glass)}
.closing-actions{display:flex;flex-wrap:wrap;gap:12px}
.site-footer{border-top:1px solid #16304d;padding:40px 0;color:var(--muted);font-size:13.5px;background:#03070f}
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px}
.foot-contact{margin:14px 0 0}
.foot-family,.foot-legal{display:flex;flex-direction:column;gap:7px}
.foot-family em{font-style:normal;color:var(--amber)}
.site-footer a:hover{color:#fff}
.foot-legal a{text-decoration:underline;text-decoration-color:#2f4b6b}

/* ---- Rise-in with depth ---- */
.js .reveal{opacity:0;transform:perspective(900px) translate3d(0,40px,-60px) rotateX(8deg);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.js .reveal.visible{opacity:1;transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .cc-scene{max-width:860px;width:100%;margin:10px auto 70px}
  .cc-screen{padding-top:54px;padding-bottom:50px}
  .hero{--bgimg:url(/assets/office-night-1920.webp);background:linear-gradient(180deg,rgba(4,8,18,.45),rgba(4,8,18,.25) 30%,rgba(4,8,18,.5) 60%,var(--bg) 92%),radial-gradient(ellipse 80% 40% at 60% 30%,rgba(20,80,190,.25),transparent 70%),var(--bgimg) 42% 0/auto min(1100px,120vh) no-repeat,var(--bg)}
  .hero-features{grid-template-columns:repeat(3,minmax(0,1fr))}
  #main-nav{gap:18px}
}
@media (max-width:900px){
  #main-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:rgba(5,9,20,.97);border-bottom:1px solid #1c3653;padding:8px 16px}
  #main-nav.open{display:flex}
  #main-nav a{padding:13px 4px;border-bottom:1px solid #12243b}
  .nav-login-m{display:block}
  .menu{display:block}
  .login{display:none}
  .grid3,.plans,.results{grid-template-columns:1fr}
  .plans{max-width:560px;margin-inline:auto}
  .faq-grid,.foot{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nav{height:64px;gap:8px}
  .mark{width:38px;height:38px;font-size:16px}
  .brand-text strong{font-size:17px}
  .brand-text small{font-size:7.5px;letter-spacing:.8px;white-space:normal;max-width:150px;line-height:1.35}
  .eyebrow{letter-spacing:1px;font-size:10.5px}
  .actions .btn-sm{display:none}
  .hero{padding:34px 0 24px}
  .hero h1{letter-spacing:-.04em}
  .hero-form,.audit-row{flex-direction:column;padding:8px}
  .hero-form .btn,.audit-row .btn{width:100%}
  .price-badge{flex-direction:row;gap:8px;padding:10px 18px}
  .price-badge strong{font-size:28px}
  .cc-screen{--rx:0deg;--ry:0deg;padding:68px 14px 62px}
  .cc-body>*,.tile{transform:none!important}
  .cc-scene{margin-bottom:56px}
  .cc-reflect{height:50px}
  .ficon{width:50px;height:50px}
  .ficon svg{width:24px;height:24px}
  .family-bar{font-size:11.5px}
  .family-bar em{font-size:10px;padding:0 6px}
  html{scroll-padding-top:118px}
  .family-bar .wrap{gap:6px 16px;padding:8px 0}
  .fam+.fam:before{display:none}
  .cc-body{grid-template-columns:1fr 1fr}
  .cc-gauges{grid-column:1/-1}
  .cc-title{font-size:12.5px}
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-features{grid-template-columns:1fr 1fr;gap:10px}
  .hero-features .fcard:last-child{grid-column:1/-1}
  .fcard{padding:16px}
  .fcard h2{font-size:15.5px}
  .section{padding:64px 0}
  .closing-card{padding:26px}
  .glass{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:380px){.hero-features{grid-template-columns:1fr}.lang button{padding:5px 8px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  [data-tilt]{transform:none}
  .cc-screen{transform:rotateX(var(--rx)) rotateY(var(--ry))}
}
@media (max-width:640px) and (max-resolution:1.49dppx){.hero{--bgimg:url(/assets/office-night-1280.webp)}}

/* ---- Command Center monitor (monitor.js): panels on the hero's screen, full-screen on phones ---- */
.mon{display:none;z-index:6;font-size:14px;line-height:1.5}
.mon[data-open="true"]{display:block}
.mon[data-host="coded"]{position:absolute;inset:92px 26px 34px;transform:translateZ(8px)}
.mon-shell{height:100%;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(160deg,#0b1e38,#040b16 60%,#08142a);border:1px solid rgba(98,170,240,.65);box-shadow:0 0 0 1px rgba(42,139,255,.12),0 0 46px rgba(30,130,255,.45),0 30px 80px rgba(0,0,0,.6);animation:monIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes monIn{from{opacity:0;transform:scale(.93) rotateX(6deg)}}
.mon-top{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border-bottom:1px solid rgba(53,84,114,.55);background:rgba(5,14,28,.6)}
.mon-brand{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:#9fc6ec;white-space:nowrap}
.mon-brand b{color:#fff}
.mon-menu{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.mon-menu::-webkit-scrollbar{display:none}
.mon-menu button,.mon-more button{flex:none;background:none;border:1px solid transparent;border-radius:8px;padding:5px 10px;font-size:12.5px;color:#b9cde4;white-space:nowrap}
.mon-menu button:hover,.mon-more button:hover{color:#fff;border-color:#2f5c8c}
.mon-menu button[aria-current]{background:#1765d8;color:#fff;border-color:#4a9bff}
.mon-close{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid #2f4b6b;background:#0a1626;font-size:18px;line-height:1;color:#dbe8f7}
.mon-sub{display:flex;align-items:center;gap:10px;padding:6px 14px;font-size:12px;color:var(--muted);border-bottom:1px solid rgba(40,64,93,.5)}
.mon-back{flex:none;background:none;border:1px solid #2f4b6b;border-radius:7px;padding:3px 9px;font-size:12px;color:#cfe0f2}
.mon-back:disabled{opacity:.4;cursor:default}
.mon-crumbs{min-width:0;overflow:hidden}
.mon-crumbs ol{display:flex;margin:0;padding:0;list-style:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-crumbs li+li:before{content:"›";margin:0 7px;opacity:.5}
.mon-crumbs button{background:none;border:0;padding:0;color:#8fcaff;font-size:12px}
.mon-crumbs [aria-current]{color:#fff}
.mon-stage{position:relative;flex:1;min-height:0;perspective:1300px;overflow:hidden}
.mon-panel[hidden]{display:none!important}
.mon-panel{position:absolute;inset:0;overflow:auto;padding:16px 18px 22px;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;backface-visibility:hidden;scrollbar-width:thin}
.mon-panel.from-right:not(.go){transform:translateX(38%) rotateY(-32deg);opacity:0}
.mon-panel.from-left:not(.go){transform:translateX(-38%) rotateY(32deg);opacity:0}
.mon-panel.to-left.go{transform:translateX(-38%) rotateY(32deg);opacity:0}
.mon-panel.to-right.go{transform:translateX(38%) rotateY(-32deg);opacity:0}
.mon-panel h2{font-size:19px;margin:0 0 6px;letter-spacing:-.3px;outline:none}
.mon-panel h3{font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:#8fb3d8;margin:16px 0 6px}
.mon-panel p{margin:0 0 8px;color:#cfdcec}
.mon-lead{color:var(--muted)!important}
.mon-fine{font-size:12px;color:var(--muted2)}
.mon-msg{min-height:1.5em;font-size:13px;color:#9cf3d3}
.mon-msg.error{color:var(--red)}
.mon-form{display:flex;gap:8px;margin:14px 0 10px;padding:6px;border-radius:13px;background:rgba(6,16,30,.85);border:1px solid #2f5c8c}
.mon-form input{flex:1;min-width:0;background:transparent;border:0;padding:10px 12px;font-size:16px;color:#fff;outline:none}
.mon-form:focus-within{border-color:#5aa9ff;box-shadow:0 0 0 3px rgba(42,139,255,.25)}
.mon-form .btn{padding:10px 16px;font-size:14px}
.mon-progress{height:4px;border-radius:4px;background:#12263f;overflow:hidden}
.mon-progress i{display:block;width:40%;height:100%;background:linear-gradient(90deg,transparent,#3d9bff,#67ddff,transparent);animation:monProg 1.2s linear infinite}
@keyframes monProg{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.mon-more{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px!important}
.mon-more button{border-color:#2f4b6b}
.mon-gauges{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:12px 0 6px}
.mg{position:relative;width:104px;text-align:center}
.mg svg{width:104px;height:104px;transform:rotate(-90deg)}
.mg-t{fill:none;stroke:#1b3350;stroke-width:9}
.mg-f{fill:none;stroke:#38b6ff;stroke-width:9;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 6px rgba(56,182,255,.8))}
.mg.geo .mg-f{stroke:var(--green);filter:drop-shadow(0 0 6px rgba(66,232,177,.7))}
.mg strong{position:absolute;left:0;right:0;top:34px;font-size:30px;letter-spacing:-1px}
.mg span{display:block;font-size:12px;color:#aac6e4}
.mon-verdict{display:flex;flex-direction:column;gap:3px;min-width:180px;flex:1}
.mon-verdict b{font-size:16px}
.mon-verdict span{font-size:13px;color:var(--muted)}
.mon-lists{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.mon-lists ul{list-style:none;margin:0;padding:0}
.mrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid rgba(40,64,93,.6);padding:7px 4px;font-size:13px;color:#dbe8f7;border-radius:6px}
.mrow:hover,.mrow:focus-visible{background:rgba(42,139,255,.12)}
.mrow-s{font-variant-numeric:tabular-nums;color:#fff;font-weight:700}
.chip{display:inline-block;min-width:76px;text-align:center;font-size:11px;font-weight:700;letter-spacing:.3px;border-radius:20px;padding:2px 8px;border:1px solid}
.chip.pass{color:#9cf3d3;background:rgba(14,48,38,.7);border-color:#2e6a52}
.chip.warn{color:#ffd79a;background:rgba(58,42,14,.7);border-color:#6b5226}
.chip.fail{color:#ffb3b3;background:rgba(66,18,22,.7);border-color:#7a3036}
.mon-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.mon-ctas .btn{padding:10px 18px;font-size:14px}
.btn.ghost{background:transparent;box-shadow:none}
.mon-detail-head{display:flex;align-items:center;gap:12px;margin:6px 0 4px}
.mon-score b{font-size:24px}
.mon-cat{font-size:11px;letter-spacing:1.4px;color:#8fb3d8;border:1px solid #2f4b6b;border-radius:6px;padding:1px 7px}
.mon-note{border-left:3px solid #3d9bff;padding:6px 10px!important;background:rgba(42,139,255,.08);border-radius:0 8px 8px 0}
.mon-fixes{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.mon-fixes li{display:flex;gap:12px;padding:12px;border:1px solid rgba(58,98,142,.7);border-radius:12px;background:rgba(9,25,43,.75)}
.mon-fixes b{display:block;margin-bottom:3px}
.mon-fixes p{font-size:13px;margin:0 0 4px}
.mon-rank{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1765d8;font-weight:800;font-size:13px}
.mon-locked{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px;border:1px dashed #3b6a9c;border-radius:12px;background:rgba(23,101,216,.08)}
.mon-locked p{font-size:13px;margin:0}
.mon-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:12px 0}
.mplan{position:relative;display:block;padding:12px 12px 10px;border:1px solid rgba(58,98,142,.8);border-radius:14px;background:rgba(9,25,43,.8);cursor:pointer;font-size:12.5px}
.mplan:has(input:checked){border-color:#5aa9ff;box-shadow:0 0 0 2px rgba(90,169,255,.35),0 0 30px rgba(42,139,255,.3)}
.mplan:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
.mplan input{position:absolute;top:12px;right:12px;accent-color:#3d9bff}
.mplan .plan-tag{position:static;display:inline-block;margin-bottom:4px;font-size:10px}
.mplan .plan-name{display:block;font-size:11px;letter-spacing:1.5px;color:#8fb3d8}
.mplan h3{font-size:14px!important;text-transform:none!important;letter-spacing:0!important;color:#fff!important;margin:4px 0!important}
.mplan .money{font-size:26px;font-weight:800;margin:2px 0 6px}
.mplan .money small{font-size:12px;color:var(--muted)}
.mplan ul{margin:0;padding-left:16px;color:#bfd0e4;line-height:1.45}
.mon-buybar{position:sticky;bottom:-22px;margin:0 -18px -22px;padding:12px 18px 14px;background:linear-gradient(rgba(5,13,26,.86),rgba(5,13,26,.98) 30%);border-top:1px solid rgba(53,84,114,.6)}
.mon-buybar .mon-msg{margin:6px 0 0}
.mon-buybar .mon-fine{margin:4px 0 0}
.mon-agree{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:#cfdcec;margin:4px 0 12px}
.mon-agree input{margin-top:3px;accent-color:#3d9bff}
.mon-agree a{color:#8fcaff;text-decoration:underline}
.mon-frame-panel{padding:0;display:flex;flex-direction:column;overflow:hidden}
.mon-frame-panel .mon-msg{margin:0;padding:8px 14px;background:rgba(42,139,255,.1);border-bottom:1px solid #1e3a5c}
.mon-frame-panel .mon-msg[hidden]{display:none}
.mon-frame-panel iframe{flex:1;width:100%;min-height:0;border:0;background:#050914}
.mon-info .section-head{text-align:left;margin:0 0 12px}
.mon-info .section-head h2,.mon-info h2{font-size:21px!important;line-height:1.15}
.mon-info .sub{font-size:14px}
.mon-info .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.mon-info .glass{padding:14px;border-radius:14px;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none}
.mon-info .glass h3{font-size:15px!important;text-transform:none;letter-spacing:0;color:#fff;margin:6px 0}
.mon-info p{font-size:13.5px}
.mon-info details{margin-bottom:8px}
.cc-screen [data-go]{cursor:pointer}
.cc-card[data-go]:hover,.cc-card[data-go]:focus-visible{border-color:#5aa9ff}
button.tile{font:inherit;color:inherit;cursor:pointer;width:100%}
@media (max-width:1100px){.mon[data-host="coded"]{inset:104px 22px 48px}}
@media (max-width:640px){
  .mon[data-open="true"]{position:fixed!important;inset:0!important;width:auto!important;height:auto!important;transform:none!important;z-index:400}
  .mon-shell{border-radius:0;border:0;padding-bottom:env(safe-area-inset-bottom)}
  .mon-top{padding-top:max(8px,env(safe-area-inset-top))}
  .mon-brand{display:none}
  .mon-lists,.mon-plans{grid-template-columns:1fr}
  .mon-form{flex-direction:column}
}
html.mon-lock,html.mon-lock body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.mon-shell{animation:none}.mon-panel{transition:none}.mon-progress i{animation:none;width:100%;opacity:.6}}
/* The coded screen's angled cards would poke through the open monitor in 3D; hide them meanwhile. */
.cc-screen:has(> .mon[data-open="true"]) > :is(.cc-body,.cc-engines){visibility:hidden}
.cc-screen:has(> .mon[data-open="true"]) .cc-frame{visibility:visible}

/* ---- WebGL globe (globe.js): home in the globe card, moves onto the monitor's scan/results panels ---- */
.globe3d{position:relative;width:100%;max-width:196px;aspect-ratio:1}
.globe3d canvas#globe{width:100%;height:100%}
.globe-3d .globe3d canvas#globe{display:none}
.globe-gl{display:block;width:100%!important;height:100%!important;touch-action:pan-y}
.globe-slot{position:relative}
.globe-lg{width:min(100%,300px);aspect-ratio:1;margin:4px auto 0}
.globe-sm{width:118px;height:118px;flex:none}
html:not(.globe-3d) .globe-slot{display:none}
@media (max-width:640px){.globe-lg{width:min(78vw,280px)}.globe-sm{width:96px;height:96px}}

/* While a scan runs: the screen's edge glow pulses fast and bright, the status says Scanning… */
.cc-screen.scanning .cc-glow{animation:edgeScan .7s ease-in-out infinite}
.cc-screen.scanning ~ .cc-reflect,.cc-scene:has(.cc-screen.scanning) .cc-halo{animation-duration:1.2s}
@keyframes edgeScan{0%,100%{opacity:.6}50%{opacity:1;filter:drop-shadow(0 0 8px rgba(120,200,255,1)) drop-shadow(0 0 34px rgba(30,140,255,1))}}
.mon-lists li.fill-in{animation:fillIn .45s both}
@keyframes fillIn{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.cc-screen.scanning .cc-glow{animation:none;opacity:1}.mg-f{transition:none}}

/* ---- The Command Center as a physical curved monitor on a desk at night ---- */
.cc-scene{margin-bottom:150px}
.cc-bezel{position:absolute;inset:-13px -13px -15px;width:calc(100% + 26px);height:calc(100% + 28px);z-index:-2;transform:translateZ(-4px);pointer-events:none;overflow:visible;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.cc-frame{filter:none}
.cc-glow{filter:drop-shadow(0 0 4px rgba(95,180,255,.8)) drop-shadow(0 0 16px rgba(30,130,255,.55))}
.cc-stand{position:absolute;left:50%;top:calc(100% - 30px);width:0;height:0;z-index:-3;pointer-events:none}
.cc-neck{position:absolute;left:-38px;top:0;width:76px;height:118px;border-radius:6px 6px 10px 10px;background:linear-gradient(90deg,#0b111b,#2a3545 30%,#3d4b5f 48%,#1a2230 70%,#0a0f18);box-shadow:inset 0 -18px 20px rgba(0,0,0,.55),0 0 18px rgba(30,130,255,.12);clip-path:polygon(14% 0,86% 0,100% 100%,0 100%)}
.cc-base{position:absolute;left:-170px;top:104px;width:340px;height:34px;border-radius:50%;background:radial-gradient(ellipse 50% 60% at 50% 35%,#3a475a,#151c28 62%,#070b12);box-shadow:0 10px 24px rgba(0,0,0,.8),inset 0 2px 0 rgba(160,205,255,.25),0 -1px 18px rgba(40,140,255,.25)}
.cc-desk{position:absolute;left:-14%;right:-14%;top:calc(100% + 108px);height:150px;z-index:-4;pointer-events:none;border-radius:50% 50% 0 0/26px 26px 0 0;background:linear-gradient(180deg,rgba(18,30,50,.95),rgba(8,14,26,.92) 40%,rgba(5,9,20,0));box-shadow:inset 0 1px 0 rgba(120,190,255,.35);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.cc-spill{position:absolute;left:8%;right:8%;top:-6px;height:130px;background:radial-gradient(ellipse 52% 60% at 50% 0,rgba(40,140,255,.55),rgba(30,110,240,.18) 45%,transparent 72%);animation:breathe 5s ease-in-out infinite}
.cc-reflect{top:calc(100% + 112px);height:120px;left:10%;right:10%;transform:scaleY(-1);transform-origin:top;opacity:.7}
.cc-screen.scanning ~ .cc-reflect{opacity:1}
.cc-scene:has(.cc-screen.scanning) .cc-spill{animation:spillScan .7s ease-in-out infinite}
@keyframes spillScan{0%,100%{opacity:.7}50%{opacity:1;filter:brightness(1.35)}}
@media (max-width:1100px){.cc-scene{margin-bottom:150px}}
@media (max-width:640px){
  .cc-scene{margin-bottom:96px}
  .cc-bezel{inset:-8px -8px -10px;width:calc(100% + 16px);height:calc(100% + 18px)}
  .cc-stand{top:calc(100% - 18px)}
  .cc-neck{left:-24px;width:48px;height:70px}
  .cc-base{left:-100px;top:62px;width:200px;height:22px}
  .cc-desk{left:-16px;right:-16px;top:calc(100% + 66px);height:90px;border-radius:50% 50% 0 0/14px 14px 0 0}
  .cc-reflect{top:calc(100% + 70px);height:70px}
}
@media (prefers-reduced-motion:reduce){.cc-spill{animation:none}}

/* ==== Hero scene (2026-10-27): owner's photo, never shown wider than its 1672px; the coded
   dashboard sits on his monitor in the photo's own pixel space (.scene-layer, scaled by --k). ==== */
.scene-hero{padding:0;background:var(--bg);overflow:hidden;overflow:clip;contain:paint}
.scene{position:relative;width:100%;margin:0 auto;aspect-ratio:1672/941;container-type:inline-size;--k:.861}
.scene-img{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto}
.scene-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(3,7,17,.9) 0%,rgba(3,7,17,.8) 16%,rgba(3,7,17,.5) 27%,rgba(3,7,17,.12) 33%,transparent 37%),
             linear-gradient(180deg,transparent 80%,rgba(5,9,20,.75) 94%,var(--bg))}
.scene-copy{position:absolute;z-index:3;left:3.6%;top:7%;width:35%}
.scene-copy h1{margin:0 0 1.4cqw;text-shadow:0 2px 22px rgba(2,6,16,.9)}
.h-big{display:block;font-size:6.3cqw;line-height:.95;font-weight:900;letter-spacing:-.045em;white-space:nowrap;
  background:linear-gradient(100deg,#eaf7ff 10%,#7cc8ff 45%,#2f8dff 85%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(64,160,255,.55)) drop-shadow(0 0 42px rgba(35,123,255,.35));text-shadow:none}
.h-sub{display:block;margin-top:.9cqw;font-size:3.05cqw;line-height:1.06;font-weight:800;letter-spacing:-.03em;color:#f4f9ff}
.h-sub .ln{display:block;white-space:nowrap}
.scene-copy .lead{font-size:max(15px,1.22cqw);line-height:1.5;color:#d6e6f8;max-width:33cqw;margin:0 0 .9cqw;text-shadow:0 2px 14px rgba(2,6,16,.95)}
.lead-small{font-size:max(13px,.95cqw);line-height:1.55;color:#a9c3df;max-width:25.6cqw;margin:0 0 1.5cqw;text-shadow:0 2px 12px rgba(2,6,16,.95)}
.scene-copy .hero-form{max-width:25.6cqw;padding:6px;border-color:#3d8bff;
  box-shadow:0 0 0 1px rgba(90,170,255,.25),0 0 26px rgba(42,139,255,.55),0 0 70px rgba(42,139,255,.3)}
.scene-copy .hero-form .btn{white-space:nowrap;padding-inline:18px;box-shadow:0 0 22px rgba(60,150,255,.8),0 10px 32px rgba(8,122,255,.45)}
.hero-checks{list-style:none;display:flex;flex-wrap:wrap;gap:.5em 1.3em;padding:0;margin:1.3cqw 0 0;max-width:25.6cqw;font-size:max(12.5px,.9cqw);color:#cfe1f6}
.hero-checks li{display:flex;align-items:center;gap:.45em;white-space:nowrap}
.hero-checks li:before{content:"";flex:none;width:1.25em;height:1.25em;border-radius:50%;background:#0f3a2e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.3 2.6 2.6L12 5.4' fill='none' stroke='%2342e8b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;box-shadow:0 0 10px rgba(66,232,177,.55)}

/* Monitor layer: photo pixels; slices are bent onto the curved screen by scene.js (matrix3d). */
.scene-layer{position:absolute;left:0;top:0;width:1672px;height:941px;transform:scale(var(--k));transform-origin:0 0;pointer-events:none;z-index:2}

.scr-edge{position:absolute;left:0;top:0;width:1672px;height:941px;overflow:visible;pointer-events:none}
.scr-edge path{fill:none;stroke:#7fd0ff;stroke-width:2.2;filter:drop-shadow(0 0 6px #49a8ff) drop-shadow(0 0 16px #2a7dff)}
.scr.scanning .scr-edge path{animation:edgeScan .7s ease-in-out infinite}
.slice{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;opacity:0;transition:opacity .5s;display:flex;flex-direction:column;gap:10px;padding:10px 12px;color:#eaf4ff;font-size:15px;line-height:1.3}
.slice.placed{opacity:1}
.scr-scan{display:none}
.pn{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;border-radius:12px;padding:11px 13px;background:linear-gradient(160deg,rgba(14,36,72,.72),rgba(5,14,34,.82));border:1.5px solid rgba(110,190,255,.6);
  box-shadow:0 0 0 1px rgba(60,140,255,.18) inset,0 0 18px rgba(50,140,255,.45),inset 0 0 26px rgba(40,120,255,.18);cursor:pointer;transition:border-color .2s,box-shadow .2s}
.pn:hover,.pn:focus-visible{border-color:#a9dcff;box-shadow:0 0 0 1px rgba(120,200,255,.4) inset,0 0 28px rgba(80,170,255,.75),inset 0 0 30px rgba(60,150,255,.25)}
.pn-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.pn-h h2{font-size:16.5px;line-height:1.15;min-width:0;font-weight:800;letter-spacing:.2px;color:#fff;text-shadow:0 0 12px rgba(120,200,255,.6)}
.ex-tag,.soon-tag{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.4px;border-radius:20px;padding:2px 9px;white-space:nowrap}
.ex-tag{color:#ffd58f;border:1px solid #8a6a2c;background:rgba(80,58,16,.55)}
.soon-tag{color:#9fd3ff;border:1px solid #3a6fa6;background:rgba(20,52,92,.6)}
.pn.live .ex-tag{display:none}
.ov-domain{margin:0 0 8px;font-size:15px;color:#9fd3ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-gauges{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.pn-overview .g-ring{max-width:118px}
.pn-overview .g-val strong{font-size:31px}
.pn-overview .g-label{font-size:12px;font-weight:700;letter-spacing:.6px;color:#bcd9f6}
.ov-line{display:flex;align-items:center;gap:8px;margin:6px 0 0;font-size:14.5px;font-weight:600}
.ov-line i{flex:none;width:10px;height:10px;border-radius:50%}
.ov-line.ok i{background:var(--green);box-shadow:0 0 10px var(--green)}
.ov-line.warn i{background:var(--amber);box-shadow:0 0 10px var(--amber)}
.ov-msg{margin:8px 0 0;font-size:13.5px;color:#ffc2c2}
.ai-rows{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ai-rows li{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:8px;font-size:13.5px}
.ai-rows b{font-weight:700;color:#fff}
.ai-bar{height:9px;border-radius:9px;background:#14304f;overflow:hidden}
.ai-bar i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#2a8bff,#67ddff);box-shadow:0 0 10px #4aa8ff;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.ai-v{font-size:12.5px;color:#cfe6ff;white-space:nowrap;text-align:right;min-width:78px}
.ai-rows li.soon .ai-bar,.ai-rows li.nm .ai-bar{opacity:.35}
.ai-rows li.soon .ai-v{color:#9fd3ff}.ai-rows li.nm .ai-v{color:#8aa3c2}
.fix-list{margin:0;padding:0;list-style:none;display:grid;gap:6px;counter-reset:fx}
.fix-list li.fill-in{animation:fillIn .45s both}
.fix-list li{counter-increment:fx;display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.3}
.fix-list li:before{content:counter(fx);flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:12px;font-weight:800;background:#123a6b;border:1px solid #4a9bff;box-shadow:0 0 8px rgba(74,155,255,.6)}
.fix-platforms{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:#a9c7e6}
.plat{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#0e2546;border:1px solid #3c78b8}
.plat svg{width:17px;height:17px;fill:#d9ecff}
.mon-link{color:#8fcaff;text-decoration:underline}
.kw-soon{display:flex;align-items:flex-end;gap:10px;height:64px;padding:0 4px;opacity:.28;filter:grayscale(.4)}
.kw-soon i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(#5fb4ff,#1d5fb8)}
.kw-note{margin:8px 0 0;font-size:13px;color:#9fd3ff}
.pn-kw{flex:0 0 auto}
.comp-chart{width:100%;height:auto;display:block;overflow:visible}
.comp-chart .grid line{stroke:#1d3a5e;stroke-width:1}
.comp-chart .ax text{fill:#9fbfe0;font-size:12px}
.comp-chart .ln{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.comp-chart .ln.you{stroke-width:3.4}
.comp-chart circle{stroke:none}
.comp-legend{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:#d3e7fb}
.comp-legend li{display:flex;align-items:center;gap:5px;white-space:nowrap;max-width:48%;overflow:hidden;text-overflow:ellipsis}
.comp-legend i{flex:none;width:12px;height:4px;border-radius:2px}
.comp-legend .off{opacity:.55;text-decoration:line-through}
.comp-msg{margin:6px 0 0;font-size:12.5px;color:#ffd58f}
/* Right-hand monitor: status, globe, scan steps. */
.side{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:auto;opacity:0;transition:opacity .5s;display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 10px;color:#eaf4ff;text-align:center}
.side.placed{opacity:1}
.side-brand{font-size:17px;font-weight:800;letter-spacing:.3px}.side-brand b{color:#67ddff}
.side .cc-status{font-size:11px;white-space:normal;justify-content:center;line-height:1.25;padding:4px 8px}
.side .globe3d{width:112px;max-width:none;cursor:pointer}
.side-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:12.5px;color:#9fbfe0;text-align:left;width:100%}
.side-steps li{display:flex;gap:7px;align-items:center}
.side-steps li:before{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:1.5px solid #4c7fb3}
.side-steps li.run:before{border-color:#67ddff;background:#67ddff;animation:pulse 1s ease-in-out infinite}
.side.summed .side-steps{display:none}
.side-steps li.done{color:#d9f6ea}.side-steps li.done:before{background:var(--green);border-color:var(--green);box-shadow:0 0 8px var(--green)}
.side-steps li.fail{color:#ffc2c2}.side-steps li.fail:before{background:#ff8a8a;border-color:#ff8a8a}
.scr.scanning .pn{animation:pnPulse 1.1s ease-in-out infinite}
@keyframes pnPulse{50%{box-shadow:0 0 0 1px rgba(120,200,255,.35) inset,0 0 30px rgba(80,170,255,.85),inset 0 0 30px rgba(60,150,255,.3)}}

/* Below the hero: AI platforms strip + four big cards */
.platforms-strip{padding:34px 0 30px;border-top:1px solid #12243b;border-bottom:1px solid #12243b;background:linear-gradient(180deg,#040a17,#06101f)}
.platforms-strip .kicker{display:block;text-align:center;font-size:13px;letter-spacing:2.6px;color:#8fd0ff;margin:0 0 14px;font-weight:800;text-shadow:0 0 14px rgba(90,170,255,.6)}
.platform-names{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;font-size:clamp(17px,1.6vw,22px);font-weight:800;color:#e8f3ff}
.platform-names li+li:before{content:"·";margin-right:34px;color:#3d6fa3}
.big-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.big-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 22px 22px;border-radius:18px;
  background:linear-gradient(160deg,rgba(18,44,84,.85),rgba(6,16,34,.92));border:1.5px solid rgba(100,180,255,.55);
  box-shadow:0 0 0 1px rgba(60,140,255,.15) inset,0 0 26px rgba(42,139,255,.35),0 18px 50px rgba(0,0,0,.4);transition:transform .25s,box-shadow .25s,border-color .25s}
.big-card:hover,.big-card:focus-visible{transform:translateY(-4px);border-color:#9fd6ff;box-shadow:0 0 0 1px rgba(120,200,255,.35) inset,0 0 40px rgba(70,160,255,.6),0 22px 60px rgba(0,0,0,.45)}
.big-card h3{font-size:18px;font-weight:800}
.big-card p{margin:0;color:#a9c3df;font-size:14.5px;line-height:1.5}
.orb{position:relative;flex:none;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 26%,#bfe6ff 0,#4fa8ff 18%,#1657c9 55%,#0a2a6e 100%);
  box-shadow:inset -6px -8px 16px rgba(0,10,40,.65),inset 4px 5px 10px rgba(255,255,255,.35),0 0 24px rgba(60,150,255,.75),0 10px 22px rgba(0,0,0,.45)}
.orb:after{content:"";position:absolute;left:18%;top:10%;width:38%;height:24%;border-radius:50%;background:radial-gradient(rgba(255,255,255,.75),transparent 70%);filter:blur(1px)}
.orb svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(0,20,60,.6))}
.orb-kw{background:radial-gradient(circle at 32% 26%,#d3f7ff 0,#4fd6ff 18%,#1186c9 55%,#073e6e 100%)}
.orb-comp{background:radial-gradient(circle at 32% 26%,#e3d9ff 0,#9b8cff 18%,#5531d6 55%,#22136e 100%);box-shadow:inset -6px -8px 16px rgba(10,0,40,.65),inset 4px 5px 10px rgba(255,255,255,.35),0 0 24px rgba(140,110,255,.7),0 10px 22px rgba(0,0,0,.45)}
.orb-fix{background:radial-gradient(circle at 32% 26%,#d6ffef 0,#42e8b1 18%,#0f9a72 55%,#06483a 100%);box-shadow:inset -6px -8px 16px rgba(0,30,20,.65),inset 4px 5px 10px rgba(255,255,255,.35),0 0 24px rgba(66,232,177,.6),0 10px 22px rgba(0,0,0,.45)}
.insights .ins-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ins-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px;border-radius:18px;scroll-margin-top:130px}
.ins-card h3{font-size:20px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ins-card p{margin:0;color:#b5c9e0;line-height:1.6;flex:1}
.ins-card .soon-tag{font-size:12px}

/* Monitor (#mon) on desktop now opens as a large screen over the page. */
.mon[data-host="desk"]{position:fixed;z-index:80;left:50%;top:50%;width:min(1000px,calc(100vw - 48px));height:min(700px,calc(100vh - 140px));transform:translate(-50%,-44%);border-radius:18px;
  box-shadow:0 0 0 1px rgba(110,190,255,.5),0 0 50px rgba(42,139,255,.55),0 40px 120px rgba(0,0,0,.7)}
.mon-backdrop{position:fixed;inset:0;z-index:79;background:rgba(2,6,14,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.mon-backdrop[hidden]{display:none}
.aiv-plat{border:1px solid #23466e;border-radius:12px;padding:14px 16px;margin:0 0 12px;background:rgba(9,22,42,.7)}
.aiv-plat h3{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:16px;margin:0 0 8px}
.aiv-q{border-top:1px solid #1a3558;padding:10px 0 2px}
.aiv-q p{margin:4px 0;font-size:14px;color:#c9dbef}
.aiv-q .q{font-weight:700;color:#fff}
.aiv-q .src{font-size:12.5px;color:#8fb0d3}
.cmp-table{width:100%;border-collapse:collapse;font-size:14px;margin:6px 0 14px}
.cmp-table th,.cmp-table td{padding:8px 8px;border-bottom:1px solid #1a3558;text-align:center}
.cmp-table th:first-child,.cmp-table td:first-child{text-align:left}
.cmp-table td.you{color:#67ddff;font-weight:800}
.cmp-swap{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cmp-swap input{flex:1;min-width:160px;background:#081629;border:1px solid #2f5c8c;border-radius:9px;padding:9px 12px;color:#fff}
.cmp-row-actions button{font-size:12.5px;border:1px solid #3a6fa6;background:#0c2140;border-radius:8px;padding:4px 10px}

@media (max-width:1199px){
  .scene{aspect-ratio:auto;width:100%;padding:28px 0 26px}
  .scene-img{height:min(118vw,720px);object-fit:cover;object-position:52% 30%}
  .scene-shade{height:min(118vw,720px);bottom:auto;background:linear-gradient(180deg,rgba(3,7,17,.55),rgba(3,7,17,.62) 45%,rgba(3,7,17,.85) 80%,var(--bg))}
  .scene-copy{position:relative;left:auto;top:auto;width:auto;max-width:640px;padding:0 20px;margin:0 auto}
  .h-big{font-size:min(13.5vw,104px)}
  .h-sub{font-size:min(7.6vw,46px);margin-top:10px}
  .scene-copy .lead,.lead-small,.scene-copy .hero-form,.hero-checks{max-width:none}
  .scene-copy .lead{font-size:17px;margin-bottom:10px}
  .lead-small{font-size:14.5px;margin-bottom:18px}
  .hero-checks{font-size:13.5px;margin-top:14px}
  .scene-layer{position:relative;width:auto;height:auto;transform:none;margin:30px 16px 0;pointer-events:auto}
  .scr{position:relative;border-radius:20px;padding:12px;background:rgba(5,13,30,.9);border:1.5px solid rgba(110,190,255,.65);box-shadow:0 0 30px rgba(42,139,255,.5),inset 0 0 30px rgba(42,139,255,.15)}
  .scr{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .scr-edge{display:none}

  .slice{position:static;transform:none!important;width:auto!important;height:auto!important;opacity:1;padding:0}
  .slice.s1{grid-column:1/-1}
  .side{position:static;transform:none!important;width:auto!important;height:auto!important;opacity:1;flex-direction:row;flex-wrap:wrap;justify-content:center;margin:12px 0 0;padding:10px;border-radius:16px;border:1px solid rgba(110,190,255,.4);background:rgba(5,13,30,.75)}
  .side .globe3d{width:84px}
  .side-steps{width:auto;grid-auto-flow:column;gap:14px}
  .pn-overview .ov-gauges{max-width:360px}
  .big-cards{grid-template-columns:1fr 1fr}
  .insights .ins-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .scr{grid-template-columns:1fr}
  .platform-names{gap:8px 18px}.platform-names li+li:before{margin-right:18px}
  .big-cards{grid-template-columns:1fr}
  .side-steps{grid-auto-flow:row}
  .h-big{font-size:min(15.5vw,104px)}
  .h-sub{font-size:min(8.4vw,46px)}
}
@media (prefers-reduced-motion:reduce){.scr.scanning .pn,.scr.scanning .scr-edge path{animation:none}.ai-bar i{transition:none}}

/* (Paid panels for free visitors now show crisp example data — see "Example business" below.) */
.ai-rows .lock-group{position:relative;display:block}
.ai-rows .lock-group>.ai-rows{gap:7px}
.lock-cta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-size:13px;font-weight:800;color:#fff;border:1px solid #6fb8ff;border-radius:999px;padding:6px 14px;background:linear-gradient(125deg,#1764e5,#2999ff);box-shadow:0 0 18px rgba(60,150,255,.75)}
.lock-cta:hover{box-shadow:0 0 26px rgba(90,170,255,1)}
.ai-rows li.locked-row .ai-v{color:#9fd3ff}
.aiv-locked{position:relative;border:1px dashed #3b6a9c;border-radius:12px;padding:14px 16px 60px;margin:0 0 12px;background:rgba(23,101,216,.08)}
.aiv-locked p{margin:0}
.aiv-locked .lock-cta{top:auto;bottom:12px;transform:translateX(-50%)}
.side-steps li.soon{color:#9fd3ff}.side-steps li.soon:before{border-style:dashed}
.side-steps li.lock{color:#7f97b6}.side-steps li.lock:before{content:"🔒";border:0;width:auto;height:auto;font-size:9px}
@media (max-width:1199px){.lock-cta{font-size:14px}}
.hero-msg{margin:.9cqw 0 0;max-width:25.6cqw;font-size:max(13px,.92cqw);line-height:1.45;color:#ffd58f;text-shadow:0 2px 12px rgba(2,6,16,.95)}
.hero-msg[hidden]{display:none}
@media (max-width:1199px){.hero-msg{max-width:none;font-size:14px;margin-top:10px}}
/* Room for "Scan another website…": tighter button; on narrower desktops the button drops under the box. */
.scene-copy .hero-form input{font-size:15px;padding:10px 8px 10px 12px}
.scene-copy .hero-form .btn{padding-inline:14px;font-size:15px}
@container (min-width:1200px) and (max-width:1439px){.scene-copy .hero-form{flex-direction:column;max-width:24cqw}.scene-copy .hero-form .btn{width:100%;padding-block:12px}}
@container (min-width:1200px) and (max-width:1299px){.scene-copy{top:5%}}

/* ==== Living scene (2026-10-27): monitor pulse, light on the desk, twinkling city ==== */
.city-lights{position:absolute;left:0;top:0;pointer-events:none}
@media (max-width:1199px){.city-lights{height:min(118vw,720px)}}
/* Edge glow breathes about every 3.6s; faster and brighter while scanning, then settles. */
.scr-edge .pulse path{stroke:#bfe6ff;stroke-width:3.4;filter:drop-shadow(0 0 10px #5fb4ff) drop-shadow(0 0 28px #2a7dff) drop-shadow(0 0 60px #1d5fe0);opacity:.25;animation:monPulse 3.6s ease-in-out infinite}
.desk-spill{position:absolute;left:800px;top:585px;width:880px;height:190px;pointer-events:none;border-radius:50%;
  background:radial-gradient(ellipse 50% 46% at 52% 18%,rgba(70,150,255,.42),rgba(40,110,255,.16) 55%,transparent 78%);mix-blend-mode:screen;opacity:.45;animation:monPulse 3.6s ease-in-out infinite}
.scene.scanning .scr-edge .pulse path,.scene.scanning .desk-spill{animation:monPulseFast 1.1s ease-in-out infinite}
@keyframes monPulse{0%,100%{opacity:.22}50%{opacity:.75}}
@keyframes monPulseFast{0%,100%{opacity:.45}50%{opacity:1}}
@media (max-width:1199px){
  .scr::after{content:"";position:absolute;inset:-2px;border-radius:21px;pointer-events:none;box-shadow:0 0 24px rgba(80,170,255,.9),0 0 60px rgba(42,139,255,.55);opacity:.3;animation:monPulse 3.6s ease-in-out infinite}
  .scene.scanning .scr::after{animation:monPulseFast 1.1s ease-in-out infinite}
  .desk-spill{display:none}
}
@media (prefers-reduced-motion:reduce){
  .scr-edge .pulse path,.desk-spill,.scr::after{animation:none!important}
  .scr-edge .pulse path{opacity:.4}.desk-spill{opacity:.45}
}

/* NYC-at-night pass: stronger haze, and on smaller screens the skyline shows above the headline. */
@media (max-width:1199px){
  .scene{padding-top:calc(min(118vw,720px) * .36)}
  .scene-shade{background:linear-gradient(180deg,rgba(3,7,17,.12),rgba(3,7,17,.18) 26%,rgba(3,7,17,.62) 40%,rgba(3,7,17,.82) 70%,var(--bg))}
}

/* Smaller screens: the photo sits as a band above the headline (skyline, the man and his monitors all
   visible, nothing under the text). --ph is the band height; .58/0 is where the crop sits (city.js and
   the mug use the same numbers). */
@media (max-width:1199px){
  .scene{--ph:min(78vw,560px);padding-top:calc(var(--ph) + 10px)}
  .scene-img,.city-lights{height:var(--ph)!important;object-position:58% 0}
  .scene-shade{height:var(--ph);background:linear-gradient(180deg,rgba(3,7,17,.05) 0,rgba(3,7,17,0) 60%,rgba(5,9,20,.7) 88%,var(--bg))}
}

/* Activity light on the small black box right of the mug (strip from 1533,686 to 1586,689 in the photo).
   At rest it breathes about every 2s with a glow on the desk; while scanning it flickers like busy
   hardware (in step with the monitors); when the results land it flashes once. */
.srv{position:absolute;left:1515px;top:670px;width:95px;height:62px;pointer-events:none;z-index:3}
.srv i{position:absolute;display:block}
.srv-dim,.srv-glow{left:18px;top:13.8px;width:53px;height:5px;border-radius:3px;transform:rotate(2.7deg);transform-origin:0 50%}
.srv-dim{background:#0b2f9e;opacity:0;animation:srvDim 2s ease-in-out infinite}
.srv-glow{background:linear-gradient(90deg,rgba(120,190,255,.6),#e8f6ff 20%,#ffffff 50%,#e8f6ff 80%,rgba(120,190,255,.6));
  box-shadow:0 0 4px 1px rgba(90,170,255,.95),0 0 12px 3px rgba(40,120,255,.75),0 0 26px 6px rgba(30,100,255,.35);mix-blend-mode:screen;opacity:.2;animation:srvGlow 2s ease-in-out infinite}
.srv-desk{left:0;top:38px;width:95px;height:18px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(80,160,255,.55),rgba(40,110,255,.18) 50%,transparent 72%);mix-blend-mode:screen;opacity:.25;animation:srvGlow 2s ease-in-out infinite}
@keyframes srvGlow{0%,100%{opacity:.12}50%{opacity:.85}}
@keyframes srvDim{0%,100%{opacity:.55}50%{opacity:0}}
.scene.scanning .srv-glow,.scene.scanning .srv-desk{animation:srvBusy .9s steps(1,end) infinite}
.scene.scanning .srv-dim{animation:srvBusyDim .9s steps(1,end) infinite}
@keyframes srvBusy{0%{opacity:.9}8%{opacity:.25}14%{opacity:1}22%{opacity:.4}30%{opacity:.95}41%{opacity:.15}47%{opacity:.8}58%{opacity:1}63%{opacity:.3}71%{opacity:.9}80%{opacity:.5}88%{opacity:1}94%{opacity:.2}}
@keyframes srvBusyDim{0%{opacity:0}8%{opacity:.5}14%{opacity:0}22%{opacity:.4}30%{opacity:0}41%{opacity:.6}47%{opacity:.1}58%{opacity:0}63%{opacity:.45}71%{opacity:0}80%{opacity:.25}88%{opacity:0}94%{opacity:.5}}
.scene.srv-flash .srv-glow,.scene.srv-flash .srv-desk{animation:srvFlash .7s ease-out 1}
.scene.srv-flash .srv-dim{animation:none;opacity:0}
@keyframes srvFlash{0%{opacity:1;filter:brightness(2.2)}25%{opacity:1;filter:brightness(1.6)}100%{opacity:.5;filter:none}}
@media (max-width:1199px){.srv{display:none;transform-origin:0 0}}
@media (prefers-reduced-motion:reduce){.srv-dim,.srv-glow,.srv-desk{animation:none!important}.srv-dim{opacity:0}.srv-glow{opacity:.5}.srv-desk{opacity:.4}}



/* Lightning's faint reflection on the desk (opacity driven by city.js; never above .55). */
.desk-flash{position:absolute;left:560px;top:640px;width:1112px;height:200px;pointer-events:none;opacity:0;z-index:1;border-radius:50%;
  background:radial-gradient(ellipse 60% 50% at 60% 30%,rgba(190,205,255,.35),rgba(150,175,255,.12) 55%,transparent 75%);mix-blend-mode:screen}
@media (max-width:1199px){.desk-flash{display:none}}

/* Example business on the paid panels for free visitors: crisp and readable, clearly tagged. */
.pn-overview .ex-tag{display:none}
.pn-comp:not(.sample) .pn-h .ex-tag{display:none}
.pn-comp .pn-h{align-items:center}
.sample-group{display:block!important;border:1px dashed rgba(255,213,143,.5);border-radius:9px;padding:6px 7px 7px;margin:1px 0}
.sample-h{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:12px;color:#ffe3b3;white-space:nowrap;overflow:hidden}
.sample-h>span:not(.ex-tag):not(.unlock-cta){overflow:hidden;text-overflow:ellipsis;min-width:0}
.unlock-cta{flex:none;margin-left:auto;display:inline-flex;align-items:center;white-space:nowrap;font-size:12px;font-weight:800;color:#fff;border:1px solid #6fb8ff;border-radius:999px;padding:3px 10px;background:linear-gradient(125deg,#1764e5,#2999ff);box-shadow:0 0 14px rgba(60,150,255,.7);cursor:pointer}
.mon .unlock-cta{font-size:14px;padding:9px 16px;margin:10px 0 0}
.aiv-sample{border:1px dashed rgba(255,213,143,.5);border-radius:12px;padding:14px 16px;margin:0 0 12px;background:rgba(80,58,16,.14)}
.aiv-sample p{margin:0}
.fix-list li.blank{color:#9fbfe0}.fix-list li.blank:before{visibility:hidden}
/* Idle rings: both sweep round slowly with a soft glow; faster while scanning, then fill to the scores. */
.gauge.idle .g-fill{filter:drop-shadow(0 0 8px rgba(56,182,255,.9))}
#gauge-geo.idle .g-fill{filter:drop-shadow(0 0 8px rgba(66,232,177,.85))}
.scr.scanning .gauge.idle .g-fill{animation-duration:.8s}

.ov-line[hidden]{display:none}
.sample-h{justify-content:space-between}
.sample-group .unlock-cta{font-size:11px;padding:2px 8px}
.sample-group .ai-rows li{grid-template-columns:68px 1fr auto}
.comp-cta{margin:6px 0 0;display:flex;justify-content:flex-end}
.comp-cta .unlock-cta{margin-left:0}

/* Every card on the site pops out on hover (tap on touch screens), in its own colour (--c on the card):
   lift + 3D tilt toward the cursor (--rx/--ry from scene.js), coloured border, background and glow, the
   round icon floats and bounces, one glare sweep, buttons and links light up, the other cards in the same
   group dim. Transform-only, so nothing in the layout moves. */
.pop{--c:#4fa8ff;--rx:0deg;--ry:0deg;overflow:hidden;transform-style:preserve-3d;will-change:transform;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s,opacity .3s,filter .3s}
.pop-group{perspective:1100px}
.pop:before{content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-70%);pointer-events:none;opacity:0;z-index:1}
.pop .orb{transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s,box-shadow .3s}
.pop .btn,.pop a:not(.btn){transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s,box-shadow .3s,color .3s}
.pop a:not(.btn){display:inline-block}
.pop:is(:hover,:focus-visible,:focus-within,.is-active){transform:translateY(-10px) scale(1.05) rotateX(var(--rx)) rotateY(var(--ry));
  border-color:var(--c);background:linear-gradient(160deg,color-mix(in srgb,var(--c) 26%,rgba(10,28,58,.92)),rgba(6,16,34,.94));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent) inset,0 0 26px color-mix(in srgb,var(--c) 80%,transparent),0 0 64px color-mix(in srgb,var(--c) 38%,transparent),0 30px 70px rgba(0,0,0,.6)}
.pop:is(:hover,:focus-visible,:focus-within,.is-active):before{opacity:1;transform:translateX(70%);transition:transform .8s ease-out,opacity .2s}
.pop:is(:hover,:focus-visible,:focus-within,.is-active) .orb{transform:translateY(-6px) translateZ(30px);filter:brightness(1.3) saturate(1.15);animation:orbBounce .6s cubic-bezier(.3,1.6,.5,1) 1}
.pop:is(:hover,:focus-visible,:focus-within,.is-active) .btn{border-color:var(--c);background:color-mix(in srgb,var(--c) 45%,#0b1a33);box-shadow:0 0 22px color-mix(in srgb,var(--c) 75%,transparent)}
.pop:is(:hover,:focus-visible,:focus-within,.is-active) a:not(.btn){color:var(--c);transform:translateX(6px)}
@keyframes orbBounce{0%{transform:translateY(0)}45%{transform:translateY(-9px)}70%{transform:translateY(-4px)}100%{transform:translateY(-6px)}}
.pop-group:has(.pop:is(:hover,.is-active)) .pop:not(:hover):not(.is-active){opacity:.6;filter:saturate(.7) brightness(.85)}
.mon .pop,.mon .pop:hover{transform:none;animation:none}
/* The numbered platform cards: their own colour on the label, link and icon; idle they float gently
   (staggered) with a slow light travelling round the border. */
.pcard .orb{width:52px;height:52px;margin-bottom:14px}.pcard .orb svg{width:28px;height:28px}
.pcard .num{color:var(--c)}.pcard a{color:color-mix(in srgb,var(--c) 75%,#fff)}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.pcard:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 70%,color-mix(in srgb,var(--c) 90%,#fff) 82%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:borderRun 7s linear infinite}
.pcard:nth-child(2):after{animation-delay:-2.3s}.pcard:nth-child(3):after{animation-delay:-4.6s}
@keyframes borderRun{to{--ang:360deg}}
.pcard:not(.reveal){animation:cardFloat 6s ease-in-out infinite}
.pcard:nth-child(2):not(.reveal){animation-delay:-2s}.pcard:nth-child(3):not(.reveal){animation-delay:-4s}
.pcard:not(.reveal):is(:hover,:focus-visible,:focus-within,.is-active){animation:none}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media (prefers-reduced-motion:reduce){
  .pop,.pop .orb,.pop .btn,.pop a:not(.btn){transition:box-shadow .3s,border-color .3s,opacity .3s}
  .pop:is(:hover,:focus-visible,:focus-within,.is-active),.pop:is(:hover,:focus-visible,:focus-within,.is-active) .orb,.pop:is(:hover,:focus-visible,:focus-within,.is-active) a:not(.btn){transform:none;animation:none}
  .pop:before{display:none}
  .pcard:after,.pcard:not(.reveal){animation:none}
}
.platform-names li{transition:transform .3s cubic-bezier(.2,.8,.2,1),color .3s,text-shadow .3s;cursor:default}
.platform-names li:is(:hover,.is-active){transform:scale(1.12);color:#fff;text-shadow:0 0 12px rgba(120,200,255,.95),0 0 30px rgba(60,150,255,.7)}

/* Headline (2026-10-27): "SEO + GEO" huge and premium (a light sweep every few seconds, a breathing blue
   glow, a cyan "+"), then "Found on Google." in white and "Recommended by AI." in the blue gradient, slightly
   smaller and tight so the three lines read as one block. Lines rise in one after another on load. */
.h-big{background:linear-gradient(100deg,#eaf7ff 0%,#7cc8ff 30%,#2f8dff 52%,#eaf7ff 58%,#7cc8ff 70%,#2f8dff 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:hRise .38s cubic-bezier(.2,.8,.2,1) both,hShine 5.5s ease-in-out .9s infinite,hGlow 4.2s ease-in-out .9s infinite}
.h-big .plus{color:#67ddff;-webkit-text-fill-color:#67ddff;background:none;text-shadow:0 0 18px rgba(103,221,255,.75)}
.h-sub{margin-top:.5cqw;font-size:2.72cqw;line-height:1.04;letter-spacing:-.035em}
.h-sub .ln-1{color:#ffffff;animation:hRise .38s cubic-bezier(.2,.8,.2,1) .11s both}
.h-sub .ln-2{background:linear-gradient(100deg,#d2f0ff,#63bbff 45%,#237bff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 14px rgba(60,150,255,.5));animation:hRise .38s cubic-bezier(.2,.8,.2,1) .22s both}
@keyframes hRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes hShine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
@keyframes hGlow{0%,100%{filter:drop-shadow(0 0 14px rgba(64,160,255,.45)) drop-shadow(0 0 34px rgba(35,123,255,.25))}50%{filter:drop-shadow(0 0 22px rgba(64,160,255,.7)) drop-shadow(0 0 50px rgba(35,123,255,.42))}}
@media (max-width:1199px){.h-sub{font-size:min(6.6vw,42px);margin-top:6px}}
@media (max-width:640px){.h-sub{font-size:min(7.4vw,42px)}}
@media (prefers-reduced-motion:reduce){.h-big,.h-sub .ln-1,.h-sub .ln-2{animation:none}.h-big{filter:drop-shadow(0 0 18px rgba(64,160,255,.55))}}

/* The free offer under the audit box: two groups, two columns on desktop, one on smaller screens. */
.hero-offer{display:grid;grid-template-columns:1.05fr 1fr;gap:.4cqw 1.3cqw;max-width:25.6cqw;margin-top:1.2cqw}
.hero-offer .offer-h{font-size:max(10.5px,.72cqw);font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:#8fd0ff;margin:0 0 .5cqw;text-shadow:0 2px 10px rgba(2,6,16,.9)}
.hero-offer .hero-checks{display:grid;gap:.32cqw;margin:0;max-width:none;font-size:max(11px,.78cqw)}
.hero-offer .hero-checks li{white-space:normal;align-items:flex-start;line-height:1.3}
.hero-offer .hero-checks li:before{width:1.15em;height:1.15em;margin-top:.05em}
.hero-offer .hero-checks li.soon{color:#a9c3df}.hero-offer .hero-checks li.soon:before{filter:grayscale(1);opacity:.6}
.hero-offer .soon-tag{font-style:normal;font-size:.82em;padding:0 6px;margin-left:2px}
.offer-link{display:inline-block;margin-top:.5cqw;font-size:max(11.5px,.8cqw);font-weight:700;color:#8fd0ff}
.offer-link:hover{color:#fff}
@media (max-width:1199px){.hero-offer{grid-template-columns:1fr;max-width:none;gap:14px;margin-top:16px}.hero-offer .offer-h{font-size:12px;margin-bottom:8px}.hero-offer .hero-checks{font-size:14px;gap:7px}.offer-link{font-size:14px;margin-top:8px}}
/* Every card floats gently on its own (staggered), not only the numbered ones. */
.pop:not(.reveal){animation:cardFloat 7s ease-in-out infinite}
.pop:nth-child(2):not(.reveal){animation-delay:-2.3s}.pop:nth-child(3):not(.reveal){animation-delay:-4.6s}.pop:nth-child(4):not(.reveal){animation-delay:-1.2s}
.pop:not(.reveal):is(:hover,:focus-visible,:focus-within,.is-active){animation:none}
@media (prefers-reduced-motion:reduce){.pop:not(.reveal){animation:none}}
/* Desktop: the text is in normal flow, so if the copy is taller than the photo (narrow desktops, Spanish)
   the hero grows below it instead of cutting text off. The photo keeps its own shape (never stretched). */
@media (min-width:1200px){
  .scene{aspect-ratio:1672/941;height:auto}
  .scene-img{height:auto;aspect-ratio:1672/941;bottom:auto}
  .scene-shade{bottom:auto;height:auto;aspect-ratio:1672/941}
  .scene-copy{position:relative;top:auto;left:auto;margin-left:3.6%;padding:3.94cqw 0 2.2cqw}
}
@container (min-width:1200px) and (max-width:1299px){.scene-copy{padding-top:2.8cqw}}
.hero-offer .hero-checks li{display:block;position:relative;padding-left:1.6em}
.hero-offer .hero-checks li:before{position:absolute;left:0;top:.08em;margin:0}
.h-sub .ln-2{background:linear-gradient(100deg,#e6f6ff 0%,#8fd3ff 40%,#4aa6ff 75%,#7fd0ff 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(70,165,255,.6))}
/* Sized for the longest line in either language ("Haz que la IA te recomiende."), same in EN and ES. */
.h-sub{font-size:2.56cqw}
@media (max-width:1199px){.h-sub{font-size:min(6.1vw,40px)}}
@media (max-width:640px){.h-sub{font-size:min(6.45vw,40px)}}

/* Power surge: when lightning strikes, the monitors and the server light dip twice in 0.4 s with a slight
   colour shift (never dark, never longer than half a second; scene.js skips it while scanning and for 3 s
   after results land). */
.scene.surge .scene-layer,.scene.surge .srv{animation:surge .42s linear 1}
@keyframes surge{0%{filter:none}18%{filter:brightness(.62) hue-rotate(-12deg) saturate(1.2)}34%{filter:brightness(1.08)}55%{filter:brightness(.7) hue-rotate(8deg)}75%,100%{filter:none}}
@media (prefers-reduced-motion:reduce){.scene.surge .scene-layer,.scene.surge .srv{animation:none}}
/* free vs paid comparison table (plans section) */
.cmp{max-width:980px;margin:40px auto 0}
.cmp h3{text-align:center;font-size:20px;margin:0 0 16px}
.cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:rgba(8,17,31,.72)}
.cmp-scroll:focus-visible{outline:2px solid #7cc4ff;outline-offset:2px}
.cmp-t{width:100%;border-collapse:collapse;font-size:14px}
.cmp-t th,.cmp-t td{padding:11px 12px;border-bottom:1px solid #16304d;text-align:center;vertical-align:middle}
.cmp-t tbody tr:last-child th,.cmp-t tbody tr:last-child td{border-bottom:0}
.cmp-t thead th{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#7cc4ff;font-weight:800}
.cmp-t tbody th{text-align:left;font-weight:600;color:var(--text)}
.cmp-t td{color:var(--muted)}
.cmp-y{color:#42e8b1;font-weight:800}
.cmp-n{color:var(--muted2)}
.cmp-note{color:var(--muted2);font-size:13px;text-align:center;margin:14px auto 0;max-width:760px}
@media (max-width:640px){
  .cmp-t{font-size:12px}
  .cmp-t th,.cmp-t td{padding:9px 4px}
  .cmp-t thead th{font-size:9px;letter-spacing:.6px}
  .cmp-t tbody th{min-width:96px;hyphens:auto}
}
/* Hero video (scene-video.js): under the coded screens; the file's cut-out strip stays hidden below the picture */
.hv-box{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hv{position:absolute;left:0;top:0;width:100%;height:144.68%;max-width:none;opacity:0;transition:opacity .4s linear}
.hv.on{opacity:1}
.hv-plain{bottom:auto}
@media (max-width:1199px){.vid-on .scr-plate,.vid-on .hv-fg{display:none}}
.hv-fg{position:absolute;left:700px;top:270px;width:740px;height:420px;pointer-events:none;z-index:3;opacity:0;transition:opacity .4s}
.scr-plate{position:absolute;left:0;top:0;width:1672px;height:941px;pointer-events:none;opacity:0;transition:opacity .4s}
.scr-plate polygon{fill:#071a3e}
.scr-plate path{fill:none;stroke:#7fd0ff;stroke-width:2.2;filter:drop-shadow(0 0 6px #49a8ff)}
.hv-base{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.vid-on .scr-plate,.vid-on .hv-fg,.vid-on .hv-base{opacity:1}
.vid-on .desk-spill,.vid-on .scr-edge .pulse{display:none} /* the video has the screens' real light on the desk */
/* Code on the monitors (scene-code.js) */
.scr-code{position:absolute;inset:0;z-index:5;background:#040a16;border-radius:6px;overflow:hidden;padding:10px 12px;font:600 13.5px/1.42 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.scr-code[hidden]{display:none}
.code-lines{overflow:hidden;min-height:0}
.cl{margin:0;white-space:normal;overflow-wrap:anywhere;color:#dbe9ff}
.cl.ok{color:#42e8b1}.cl.info{color:#7cc4ff}.cl.warn{color:#ffd58f}.cl.fail{color:#ff9a9a}.cl.you{color:#fff}
.code-cur{flex:none;display:block;width:9px;height:16px;background:#42e8b1;margin-top:3px;animation:codeBlink 1s steps(2) infinite}
@keyframes codeBlink{50%{opacity:0}}
.scr-code.wipe{animation:codeWipe .22s ease-in forwards}
@keyframes codeWipe{to{clip-path:inset(0 0 100% 0)}}
.side .scr-code{font-size:11.5px;padding:8px 6px}
@media (prefers-reduced-motion:reduce){.code-cur{animation:none}.scr-code.wipe{animation:none}}
/* Results: the site's placeholder next to the scores, and the side monitor's summary */
.ov-gauges:has(.ov-site:not([hidden])){grid-template-columns:1.15fr 1fr 1fr;gap:8px}
.ov-site{min-width:0;border:1px solid #2f5c8c;border-radius:9px;background:rgba(5,14,34,.9);padding:6px 7px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.ov-site[hidden]{display:none}
.ov-site-bar{display:flex;gap:3px}.ov-site-bar i{width:6px;height:6px;border-radius:50%;background:#3d6a9c}
.ov-site b{font-size:12.5px;overflow-wrap:anywhere;line-height:1.2;color:#eaf4ff}
.ov-site small{font-size:10.5px;line-height:1.25;color:#9fd3ff}
.side-sum{display:grid;gap:7px;text-align:center;font-size:14px;width:100%}
.side:not(.summed) .side-sum{display:none}
.side-sum b{color:#42e8b1;font-size:14px;line-height:1.2}
.side-sum span{color:#dbe9ff;font-weight:700}
@media (max-width:1199px){.slice,.side{position:relative}.scr-code{min-height:150px;border-radius:12px}.side .scr-code{font-size:12.5px}}
/* Second headline line: solid and readable over the city; headline never closer than 40px to the edge */
.h-sub .ln-2{color:#bfe2ff!important;-webkit-text-fill-color:#bfe2ff;background:none!important;text-shadow:0 0 18px rgba(4,10,24,.95),0 2px 10px rgba(2,6,16,.95)}
@media (min-width:1200px){.scene-copy{left:max(40px,3.6%)}}
/* Score colors: green 80+, amber 50-79, red under 50 (same bands as the check rows) */
.gauge[data-tone=good] .g-fill,#gauge-geo[data-tone=good] .g-fill{stroke:#42e8b1;filter:drop-shadow(0 0 6px rgba(66,232,177,.7))}
.gauge[data-tone=ok] .g-fill,#gauge-geo[data-tone=ok] .g-fill{stroke:#ffc24d;filter:drop-shadow(0 0 6px rgba(255,194,77,.7))}
.gauge[data-tone=bad] .g-fill,#gauge-geo[data-tone=bad] .g-fill{stroke:#ff6b6b;filter:drop-shadow(0 0 6px rgba(255,107,107,.7))}
.gauge[data-tone=good] .g-n{color:#7df2cb}.gauge[data-tone=ok] .g-n{color:#ffd58f}.gauge[data-tone=bad] .g-n{color:#ff9a9a}

/* ==== hero-v2: Command Center on the monitors ==== */
.scene-steam{position:absolute;pointer-events:none;z-index:4}
.scr-home,.scr-box{position:absolute;inset:0;z-index:6;background:linear-gradient(170deg,#071530,#040a18);border-radius:6px;overflow:hidden;padding:12px 14px;color:#eaf4ff;display:flex;flex-direction:column;gap:9px;pointer-events:auto;box-shadow:inset 0 0 22px rgba(79,168,255,.14)}
.scr-home[hidden],.scr-box[hidden]{display:none}
.scr-box{animation:ccOpen .26s ease-out}.scr-box.closing{animation:ccClose .26s ease-in forwards}
@keyframes ccOpen{from{opacity:0;transform:scale(.97)}}@keyframes ccClose{to{opacity:0}}
.cc-tag{margin:0;font-size:12.5px;letter-spacing:.06em;color:#9fd3ff}.cc-tag b{color:#67ddff}
.cc-prod{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.cc-prod h3{margin:0;font-size:23px;color:#fff}
.cc-badge{font-size:11.5px;padding:3px 8px;border-radius:20px;border:1px solid #3d6a9c;color:#9fd3ff;white-space:nowrap}
.cc-badge.live{border-color:#2e8a66;color:#7df0c2;background:rgba(14,64,48,.6)}
.cc-line{margin:0;font-size:15px;line-height:1.3;color:#cfe3fb}
.cc-mini{flex:1;min-height:0;display:flex;flex-direction:column;gap:9px;padding:11px;border:1px solid rgba(103,221,255,.24);border-radius:9px;background:rgba(10,28,60,.7);overflow:hidden}
.cc-mini{position:relative}
.m-shield{display:block;flex:none;align-self:center;width:54px;height:62px;border-radius:0;background:linear-gradient(160deg,#42e8b1,#1764e5);clip-path:polygon(50% 0,100% 15%,100% 58%,50% 100%,0 58%,0 15%)}
.side .scr-home,.side .scr-box{padding:12px 8px;gap:8px;align-items:stretch}.side .cc-prod h3{font-size:17px}.side .cc-tag{font-size:10.5px}.side .cc-line{font-size:13px}
.code-dom{flex:none;margin:0 0 6px;font:700 17px/1.2 Inter,system-ui,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.code-dom:empty{display:none}
.side .code-dom{font-size:13px}
.code-bars{flex:none;display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:auto}
.code-bars i{flex:1;height:100%;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#67ddff,#1764e5);transform-origin:bottom;animation:ccBar 1.1s ease-in-out infinite alternate}
.code-bars i:nth-child(2n){animation-duration:.8s;animation-delay:-.3s}.code-bars i:nth-child(3n){animation-duration:1.4s;animation-delay:-.6s}.code-bars i:nth-child(4n){animation-duration:.95s;animation-delay:-.1s}
@keyframes ccBar{from{transform:scaleY(.18)}to{transform:scaleY(1)}}
.cc-dom{margin:0;font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-rings{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;min-height:0}
.cc-ring{position:relative;width:112px;text-align:center}.cc-ring svg{display:block;width:112px;height:112px;transform:rotate(-90deg)}
.cc-ring circle{fill:none;stroke-width:10}.cc-ring .t{stroke:rgba(121,182,255,.2)}
.cc-ring .f{stroke:#67ddff;stroke-linecap:round;stroke-dasharray:314.16;stroke-dashoffset:314.16;transition:stroke-dashoffset 1s ease-out,stroke .3s;filter:drop-shadow(0 0 6px currentColor)}
.cc-ring b{position:absolute;left:0;right:0;top:36px;font-size:30px;line-height:40px;color:#fff}
.cc-ring span{display:block;margin-top:3px;font-size:13px;color:#cfe3fb}
.cc-ring[data-tone=good] .f{stroke:#42e8b1}.cc-ring[data-tone=mid] .f{stroke:#ffa63d}.cc-ring[data-tone=low] .f{stroke:#ff6b6b}
.cc-globe{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.scr-box .globe3d{width:230px;max-width:100%}
.cc-cap{margin:0;text-align:center;font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#67ddff}
.cc-checks,.cc-eng{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.cc-checks li{display:flex;gap:9px;align-items:center;font-size:15px;line-height:1.25;color:#7f9cbe;transition:color .2s}
.cc-checks li:before{content:"";flex:none;width:13px;height:13px;border-radius:50%;border:2px solid #4c7fb3}
.cc-checks li.run{color:#fff}.cc-checks li.run:before{border-color:#67ddff;background:#67ddff;animation:pulse 1s ease-in-out infinite}
.cc-checks li.on{color:#d9f6ea}.cc-checks li.on:before{background:#42e8b1;border-color:#42e8b1;box-shadow:0 0 9px #42e8b1}
.cc-state{align-self:flex-end;display:inline-flex;align-items:center;gap:5px;font-size:11px;line-height:1.2;padding:4px 7px;border-radius:20px;border:1px solid #2e5a46;background:rgba(14,48,38,.6);color:#9cf3d3}
.cc-state em{font-style:normal}.cc-state i{flex:none;width:7px;height:7px;border-radius:50%;background:#42e8b1}
.cc-state[data-s=run]{color:#9fd3ff;border-color:#3d6a9c;background:rgba(14,36,70,.6)}.cc-state[data-s=run] i{background:#67ddff;animation:pulse 1s ease-in-out infinite}
.side .cc-cap{font-size:11px}.cc-eng{gap:10px;margin-top:6px}.cc-eng li{text-align:center;font-size:13.5px;padding:7px 2px;border-radius:7px;border:1px solid rgba(103,221,255,.24);color:#d9ebff}
@media (max-width:1199px){
  .slice,.side{min-height:210px}
  .scr-home,.scr-box{border-radius:12px}.side .scr-home,.side .scr-box{align-items:stretch}
  .cc-rings{flex-direction:row;gap:14px}.cc-ring,.cc-ring svg{width:92px}.cc-ring svg{height:92px}.cc-ring b{top:28px;font-size:24px;line-height:36px}
  .scr-box .globe3d{width:150px}.cc-eng{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){.scr-box,.scr-box.closing{animation:none}.code-bars i{animation:none;transform:scaleY(.6)}.code-bars i:nth-child(2n){transform:scaleY(.35)}.cc-checks li.run:before,.cc-state i{animation:none!important}.cc-ring .f{transition:none}}

/* Command Center panels: score area and mini previews (hero-v2) */
.scr-home{gap:7px;padding:10px 12px}
.scr-home .cc-tag{font-size:11px}.scr-home .cc-prod h3{font-size:20px}.scr-home .cc-line{font-size:13px}
.sc-area{flex:none;display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:9px;background:rgba(10,28,60,.55);border:1px solid rgba(103,221,255,.18)}
.sr{position:relative;flex:none;width:46px;display:block;text-align:center}
.sr svg{display:block;width:46px;height:46px;transform:rotate(-90deg)}
.sr circle{fill:none;stroke-width:11}.sr .t{stroke:rgba(121,182,255,.2)}.sr.empty .t{stroke-dasharray:8 7}
.sr .f{stroke:#67ddff;stroke-linecap:round;stroke-dasharray:314.16}
.sr[data-tone=good] .f{stroke:#42e8b1}.sr[data-tone=mid] .f{stroke:#ffa63d}.sr[data-tone=low] .f{stroke:#ff6b6b}
.sr b{position:absolute;left:0;right:0;top:0;line-height:46px;font-size:14px;color:#fff}
.sr em{display:block;font-style:normal;font-size:10.5px;color:#9fd3ff;margin-top:1px}
.sc-soon{margin:0;font-size:12px;line-height:1.2;color:#9fd3ff}
.sc-grade b{display:block;font-size:30px;line-height:1;color:#42e8b1;text-shadow:0 0 12px rgba(66,232,177,.55)}
.sc-ver{display:inline-flex;align-items:center;gap:3px;margin-top:4px;font-size:10.5px;color:#7df0c2;white-space:nowrap}
.sc-ver svg,.sc-list svg{flex:none;width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scr-home[data-p=seo]{box-shadow:inset 0 0 34px rgba(79,168,255,.3),0 0 0 1.5px rgba(103,221,255,.55)}
.scr-home[data-p=seo] .sc-area.real{flex:1;flex-wrap:wrap;justify-content:center;align-content:center;gap:16px 22px}
.scr-home[data-p=seo] .sr,.scr-home[data-p=seo] .sr svg{width:112px}.scr-home[data-p=seo] .sr svg{height:112px}
.scr-home[data-p=seo] .sr b{line-height:112px;font-size:34px}.scr-home[data-p=seo] .sr em{font-size:14px;margin-top:3px}
.scr-home[data-p=seo] .sc-grade{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:12px}
.scr-home[data-p=seo] .sc-grade b{font-size:46px}.scr-home[data-p=seo] .sc-ver{margin:0;font-size:14px;padding:4px 9px;border-radius:20px;border:1px solid #2e8a66;background:rgba(14,64,48,.6)}
.scr-home[data-p=seo] .cc-prod h3{font-size:27px}.scr-home[data-p=seo] .cc-line{font-size:15px}
.cc-mini{padding:8px;gap:6px}
.ms-tag{position:absolute;right:6px;top:5px;z-index:1;font-size:9.5px;color:#9fd3ff;background:rgba(5,14,34,.8);padding:1px 5px;border-radius:4px}
.ms-nav{display:flex;align-items:center;gap:5px;font-size:11px;color:#fff}.ms-nav b{margin-right:auto}.ms-nav i{display:block;width:16px;height:4px;border-radius:2px;background:rgba(121,182,255,.4)}.ms-nav i:last-child{margin-right:44px}
.ms-hero{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:8px 10px;border-radius:6px;background:radial-gradient(120% 120% at 85% 15%,rgba(255,180,90,.55),transparent 50%),linear-gradient(120deg,#123a86,#1764e5);color:#fff;font-size:14px;line-height:1.15}
.ms-hero span{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;background:#fff;color:#0d2c66}
.ms-cards{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.ms-cards i{display:block;height:24px;border-radius:4px;background:rgba(121,182,255,.24)}
.ms-price{position:absolute;right:13px;bottom:39px;font-size:11.5px;font-weight:800;padding:3px 7px;border-radius:6px;background:#42e8b1;color:#04261a;box-shadow:0 0 10px rgba(66,232,177,.5)}
.mp-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mp{position:relative;overflow:hidden;border-radius:6px;display:flex;align-items:flex-end;padding:4px;min-height:60px}
.mp b{position:relative;font-size:9.5px;line-height:1.1;color:#fff;text-shadow:0 1px 3px #000}
.mp.a{background:linear-gradient(150deg,#ff9b5c,#b5306a)}.mp.b{background:linear-gradient(150deg,#42c4d8,#2b4fc9);}.mp.c{background:linear-gradient(150deg,#8a6bff,#26307f)}
.mp-play{position:absolute;left:50%;top:38%;width:22px;height:22px;margin:-11px;border-radius:50%;background:rgba(255,255,255,.9);clip-path:polygon(22% 8%,92% 50%,22% 92%);animation:ccBeat 2.4s ease-in-out infinite}
.mp-prog{position:absolute;left:4px;right:4px;bottom:17px;height:2px;background:#fff;transform-origin:left;animation:ccProg 4s linear infinite}
@keyframes ccBeat{50%{transform:scale(1.12)}}@keyframes ccProg{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
.mp-icons{flex:none;display:flex;gap:7px;color:#9fd3ff}.mp-icons svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3}.mp-icons .fl{fill:currentColor;stroke:none}
.mp-ok{flex:none;margin:0;font-size:11px;line-height:1.2;color:#7df0c2}
.cc-secure{align-items:stretch;justify-content:space-evenly;gap:10px}
.sc-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sc-list li{display:flex;gap:5px;align-items:flex-start;font-size:12px;line-height:1.2;color:#d9f6ea;animation:ccTick 7.5s linear infinite both}
.sc-list li svg{color:#42e8b1;margin-top:1px}
.sc-list li:nth-child(2){animation-delay:.8s}.sc-list li:nth-child(3){animation-delay:1.6s}
@keyframes ccTick{0%{opacity:.25}6%,92%{opacity:1}100%{opacity:.25}}
.sc-w{margin:0;text-align:center;font-size:12.5px;font-weight:700;color:#67ddff}
.side .scr-home .sc-area{flex-wrap:wrap;justify-content:center;gap:4px 8px;padding:6px 4px}.side .sr{width:40px}.side .sr svg{width:40px;height:40px}.side .sr b{line-height:40px;font-size:12px}.side .sc-soon{text-align:center;font-size:11px}.side .cc-prod h3{font-size:17px}
@media (min-width:1200px){
  .slice.s2{z-index:2}
  .scr-home[data-spot="1"]{left:-44px;right:-44px}
  /* the neighbours stay full size under it (no dashboard shows in a gap); only their content moves over */
  .scr-home[data-spot="0"]{padding-right:52px}.scr-home[data-spot="2"]{padding-left:52px}
}
@media (max-width:1199px){.slice,.side{min-height:320px}.slice.s1{min-height:350px}.side .scr-home{align-items:stretch}.mp{min-height:90px}.ms-hero{min-height:90px}}
@media (prefers-reduced-motion:reduce){.mp-play,.mp-prog,.sc-list li{animation:none}.mp-prog{transform:scaleX(.6)}.sc-list li{opacity:1}}