/* Shared site styles (index.html, solutions.html). */
:root{
  /* Black & white base. Steel blue (logo 3M-b2) is reserved for brand accents: logo, buttons, slogan, active states. */
  --bg:#0a0a0a; --bg1:#101010; --surface:#151515; --surface2:#1c1c1c; --surface3:#262626;
  --line:#ffffff17; --line-strong:#ffffff2e; --line-quiet:#ffffff0d;
  --fg:#ededed; --fg-strong:#ffffff; --muted:#a3a3a3; --dim:#7a7a7a;
  --accent:#5B9BD5; --accent-hover:#7FB3E0; --accent-text:#9CC9EE; --accent-soft:#5B9BD51f; --accent-line:#5B9BD566; --on-accent:#06121F;
  --ok:#3ef0c3; --warn:#ffb347; --bad:#ff4d4d; --info:#4FB3D9;
  --steel:linear-gradient(180deg,#D2E6F7 0%,#9CC9EE 48%,#5B9BD5 100%);
  --script:'Mr Dafoe','Brush Script MT',cursive;
  --display:'Big Shoulders Display','Arial Narrow','Roboto Condensed',sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:radial-gradient(1200px 600px at 50% -200px,#1a1a1a 0%,transparent 70%),var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,select{font:inherit;color:inherit}
.wrap{width:100%;padding:0 clamp(24px,4vw,72px)}
.mono{font-family:var(--mono)}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:.005em;color:var(--fg-strong)}
.display .a{background:var(--steel);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;filter:drop-shadow(0 0 18px rgba(91,155,213,.4))}
.h1{font-size:clamp(50px,6.6vw,92px)}
.h2{font-size:clamp(40px,5.6vw,72px)}
.h3{font-size:clamp(30px,3.6vw,44px)}
.lead{color:var(--muted);font-size:18px;max-width:560px}
.tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);border:1px solid var(--line-strong);background:rgba(255,255,255,.04);padding:7px 12px;border-radius:2px}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-strong);padding:5px 12px;border-radius:99px}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:8px;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary{box-shadow:0 0 0 1px rgba(91,155,213,.5),0 8px 28px -8px rgba(91,155,213,.7)}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 0 1px rgba(127,179,224,.7),0 10px 36px -6px rgba(91,155,213,.9)}
.btn-hero{position:relative;overflow:hidden;padding:14px 22px;font-size:15.5px;font-weight:700;letter-spacing:.01em;color:#06121F;border-radius:10px;
  background:linear-gradient(135deg,#9CC9EE 0%,#5B9BD5 55%,#3C78AE 100%);box-shadow:0 0 0 1px rgba(156,201,238,.55),0 10px 34px -8px rgba(91,155,213,.85),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .2s,box-shadow .25s}
.btn-hero .ni{width:18px;height:18px;color:#06121F;transition:transform .25s}
.btn-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-130%);animation:btn-shine 4.5s 3s ease-in-out infinite}
.btn-hero:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(210,230,247,.8),0 16px 44px -8px rgba(91,155,213,1),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-hero:hover .ni{transform:translateX(4px)}
@keyframes btn-shine{0%,70%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.btn-dark{background:var(--surface2);border-color:var(--line-strong);color:var(--fg-strong)}
.btn-dark:hover{background:var(--surface3)}
.btn-sm{padding:9px 16px;font-size:14px}
.link{color:var(--accent-text);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.link:hover{color:var(--accent-hover)}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(9,11,18,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-quiet)}
nav .wrap{display:flex;align-items:center;height:56px;gap:36px}
.logo{display:flex;align-items:center;gap:10px;font-size:21px;color:var(--fg-strong)}
.logo svg{width:32px;height:32px;flex:none}
.nav-links{display:flex;gap:4px;font-size:14px;color:var(--muted)}
.nav-links a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:8px;white-space:nowrap;transition:color .2s,background .2s}
@media (max-width:1180px){.nav-links a{padding:7px 7px}.nav-links a .ni{display:none}nav .wrap{gap:20px}}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links a:hover .ni{color:var(--accent-text)}
.nav-links a.on{color:#fff;background:rgba(91,155,213,.12)}.nav-links a.on .ni{color:var(--accent-text)}
.ni{width:16px;height:16px;flex:none;color:#7a7a7a;transition:color .2s}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.login{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-weight:500;color:var(--fg);font-size:14px;padding:7px 10px;border-radius:8px}
.login:hover{background:rgba(255,255,255,.05)}.login:hover .ni{color:var(--accent-text)}
.dash{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:8px;font-size:13.5px;font-weight:600;color:#fff;
  border:1px solid rgba(91,155,213,.45);background:rgba(91,155,213,.08);transition:background .2s,border-color .2s}
.dash .ni{color:var(--accent-text)}
.dash:hover{background:rgba(91,155,213,.18);border-color:var(--accent)}
.lang{background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:8px;padding:7px 10px;font-size:14px;cursor:pointer}
.lang option{background:var(--surface)}
.burger{display:none;margin-left:4px;background:none;border:1px solid var(--line);border-radius:8px;width:40px;height:40px;cursor:pointer;color:var(--fg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:32px 0 96px;overflow:hidden;min-height:calc(100svh - 56px);display:flex;align-items:center}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse 80% 70% at 70% 40%,#000 30%,transparent 75%)}
.hero::after{content:"";position:absolute;z-index:1;width:820px;height:820px;right:-200px;top:-260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(91,155,213,.12),rgba(255,255,255,.03) 40%,transparent 64%)}


.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:clamp(28px,2.6vw,48px);align-items:center}
.hero .h1{margin:22px 0 22px;font-size:clamp(42px,4.6vw,76px)}
.hero .lead+.lead{margin-top:12px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:30px}
.hero-bg{position:absolute;inset:-40px;z-index:0;pointer-events:none;background:url(../img/hero-bg.jpg) 70% 60%/cover no-repeat;
  filter:blur(12px) grayscale(1) brightness(.62) contrast(1.15);transform:scale(1.06)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.9) 0%,rgba(10,10,10,.45) 42%,rgba(10,10,10,.2) 100%),linear-gradient(180deg,rgba(10,10,10,0) 60%,var(--bg) 100%)}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hero-meta span::before{content:"● ";color:var(--ok)}
.scroll-cue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);transition:opacity .4s,color .2s}
.scroll-cue span{padding-left:.32em}
.scroll-cue:hover{color:#fff}
.scroll-cue.gone{opacity:0;pointer-events:none}
/* A beam of light runs down a thin track, and a ring pulses where it lands */
.scroll-cue i{position:relative;display:block;width:2px;height:64px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-45%;width:100%;height:45%;border-radius:2px;background:linear-gradient(180deg,transparent,var(--accent-text) 70%,#fff);animation:beam 2.2s cubic-bezier(.65,0,.25,1) infinite}
.scroll-cue b{display:block;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(91,155,213,.6);animation:land 2.2s cubic-bezier(.65,0,.25,1) infinite}
@keyframes beam{0%{top:-45%}55%,100%{top:100%}}
@keyframes land{0%,48%{transform:scale(.6);box-shadow:0 0 0 0 rgba(91,155,213,.7)}60%{transform:scale(1.15)}100%{transform:scale(.6);box-shadow:0 0 0 14px rgba(91,155,213,0)}}

/* Console card */
.console{background:linear-gradient(180deg,var(--surface),var(--bg1));border:1px solid var(--line-strong);border-radius:14px;padding:20px;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(91,155,213,.05)}
.console-head{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.console-head b{color:var(--fg-strong);font-weight:500}
.console-head i{flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--accent));border-radius:2px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1vw,16px);padding:0 16px 0 8px}
.scard{position:relative;display:block;aspect-ratio:320/600;border-radius:10px;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface);
  transform:skewX(-7deg);box-shadow:0 30px 60px -28px rgba(0,0,0,.9);transition:transform .25s,box-shadow .25s,border-color .25s}
.scard:nth-child(1){margin-top:14%}.scard:nth-child(2){margin-top:0}.scard:nth-child(3){margin-top:20%}.scard:nth-child(4){margin-top:6%}
.scard img{position:absolute;top:0;left:-12%;width:124%;height:100%;object-fit:cover;transform:skewX(7deg)}
.scard:hover,.scard:focus-visible,
.scard.peek{transform:skewX(-7deg) translateY(-10px) scale(1.03);z-index:4;border-color:var(--accent-line);box-shadow:0 0 0 1px rgba(91,155,213,.45),0 28px 60px -20px rgba(91,155,213,.5);outline:none}
.slabel{position:absolute;left:10%;bottom:6%;transform:skewX(7deg);font-family:var(--display);font-weight:900;font-size:clamp(15px,1.35vw,21px);line-height:1.05;text-transform:uppercase;letter-spacing:.03em;
  color:#fff;background:rgba(10,10,10,.9);border:1px solid var(--line-strong);padding:7px 10px;border-radius:3px;max-width:82%;transition:opacity .2s}
.scard{container-type:inline-size}
/* Hover: colour and slow zoom on the photo, a light sweep, and a glass panel whose lines arrive one after another */
.sinfo{position:absolute;inset:0;padding:0 11% 9% 13%;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .35s;
  background:linear-gradient(180deg,rgba(8,8,8,0) 22%,rgba(8,8,8,.72) 50%,rgba(8,8,8,.96) 100%);pointer-events:none}
.sinfo>*{opacity:0;translate:0 16px;transition:opacity .45s,translate .55s cubic-bezier(.2,.8,.2,1)}
/* The panel leans with the card: title and its bar keep the slant, body text and the button content stand upright. */
.sinfo p,.sinfo ul,.sinfo .more>*{transform:skewX(7deg)}
.sinfo ul{transform-origin:left bottom}
.sinfo .more>span{white-space:nowrap}
@container (max-width:170px){.sinfo .more{font-size:12px}.sinfo .more i{width:28px;height:28px;font-size:14px}}
.sinfo b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(18px,1.6vw,27px);line-height:.95;text-transform:uppercase;color:#fff;margin-bottom:10px;padding-left:10px;border-left:3px solid var(--accent)}
.sinfo p{font-size:clamp(12px,.85vw,14px);line-height:1.45;color:#d4d4d4;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sinfo ul{list-style:none;display:grid;gap:6px;margin-bottom:14px}
.sinfo li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:clamp(10px,.72vw,12px);letter-spacing:.08em;text-transform:uppercase;color:#fff}
.sinfo li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.sinfo li.n{color:var(--muted)}
.sinfo li.n::before{background:none;border:1px dashed var(--line-strong)}
.sinfo .more{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:#fff;padding-top:12px;border-top:1px solid var(--line-strong)}
.sinfo .more i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font-size:16px;transition:transform .3s}
.scard:hover .sinfo,.scard:focus-visible .sinfo,
.scard.peek .sinfo{opacity:1}
.scard:hover .sinfo>*,.scard:focus-visible .sinfo>*,
.scard.peek .sinfo>*{opacity:1;translate:none}
.scard:hover .sinfo>:nth-child(2),
.scard.peek .sinfo>:nth-child(2){transition-delay:.06s}.scard:hover .sinfo>:nth-child(3),.scard.peek .sinfo>:nth-child(3){transition-delay:.12s}.scard:hover .sinfo>:nth-child(4),.scard.peek .sinfo>:nth-child(4){transition-delay:.18s}
.scard:hover .sinfo .more i,
.scard.peek .sinfo .more i{transform:skewX(7deg) translateX(2px) rotate(-45deg)}
.scard:hover .slabel,.scard:focus-visible .slabel,
.scard.peek .slabel{opacity:0;transform:skewX(7deg) translateY(-10px)}
.slabel{transition:opacity .25s,transform .35s}
.shine{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-130%)}
.scard:hover .shine,
.scard.peek .shine{transform:translateX(130%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
@container (max-width:210px){.scard .sinfo ul li:nth-child(n+3):not(.n){display:none}.scard .sinfo p{-webkit-line-clamp:2}}
.scard:hover img,
.scard.peek img{filter:saturate(1.3) contrast(1.1) brightness(1.02);transform:skewX(7deg) scale(1.09)}
.scard img{transition:filter .5s,transform 1.4s cubic-bezier(.2,.7,.2,1);filter:saturate(.5) contrast(1.05) brightness(.78);z-index:0}
.scard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.08),rgba(10,10,10,0) 45%,rgba(10,10,10,.5))}
.scard::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(rgba(10,10,10,.28) 1px,transparent 1.5px) 0 0/4px 4px,linear-gradient(180deg,rgba(43,93,138,.22) 0%,rgba(19,41,64,.1) 45%,rgba(10,10,10,.75) 100%)}
.slabel,.sinfo{z-index:2}
@media (hover:none){.sinfo{display:none}}
.console-head .mode{color:var(--accent-text);font-weight:500;min-width:62px;text-align:right}
.heat-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--dim)}
.console-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.console-list span b{color:var(--accent);font-weight:500;margin-right:8px}
.console-stats{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-family:var(--mono);font-size:12px}
.console-stats div{flex:1;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.console-stats small{display:block;color:var(--dim);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.console-stats .ok{color:var(--ok)}

/* ---------- Sections ---------- */
section{padding:110px 0;position:relative}
.sec-head{max-width:760px;margin-bottom:56px}
.sec-head .h2{margin:18px 0 16px}
.divider{border-top:1px solid var(--line-quiet)}

/* Finder */
.finder{display:grid;grid-template-columns:minmax(260px,.42fr) 1fr;gap:22px;background:linear-gradient(160deg,#151515,#0d0d0d);border:1px solid var(--line);border-radius:16px;padding:24px;position:relative;overflow:hidden}
.finder::before{content:"";position:absolute;inset:-1px;border-radius:16px;pointer-events:none;background:linear-gradient(120deg,rgba(91,155,213,.35),transparent 30%,transparent 70%,rgba(91,155,213,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.fd-sub{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.fd-step{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}
.fd-step em{font-style:normal;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--dim);font-size:10px;transition:all .3s}
.fd-step.done em{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.finder select{width:100%;background:#0a0a0a;border:1px solid var(--line-strong);border-radius:10px;padding:13px 14px;font-size:15px;color:#fff;transition:border-color .2s,box-shadow .2s}
.finder select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,155,213,.18)}
.finder select:disabled{opacity:.4}
.fd-demo{font-size:11px;color:var(--dim);margin-top:16px}
.result{background:#0a0a0a;border:1px solid var(--line);border-radius:12px;padding:22px;min-height:420px;display:flex;flex-direction:column;justify-content:center;position:relative}
.result .empty{text-align:center;color:var(--dim);font-size:15px}
.fd-ghost{width:min(360px,90%);margin:0 auto 14px;display:block}
.fd-ghost .ax{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.fd-ghost .g1,.fd-ghost .g2{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:6 10;animation:ghost 3s linear infinite}
.fd-ghost .g1{stroke:rgba(91,155,213,.7)}.fd-ghost .g2{stroke:rgba(255,255,255,.25);animation-duration:4.5s}
@keyframes ghost{to{stroke-dashoffset:-160}}
#fdOut>*{animation:fd-in .6s cubic-bezier(.2,.8,.2,1) backwards}
#fdOut>:nth-child(2){animation-delay:.08s}#fdOut>:nth-child(3){animation-delay:.16s}#fdOut>:nth-child(4){animation-delay:.24s}
@keyframes fd-in{from{opacity:0;transform:translateY(14px)}}
.fd-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.fd-title b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(24px,2.4vw,34px);line-height:1;text-transform:uppercase;color:#fff}
.fd-title small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--dim);margin-top:8px}
.stage-tabs{position:relative;display:flex;padding:4px;background:#141414;border:1px solid var(--line);border-radius:12px}
.stage-tabs .glider{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:9px;background:var(--accent);box-shadow:0 6px 22px -6px rgba(91,155,213,.8);transition:left .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1)}
.stage-tabs button{position:relative;z-index:1;background:none;border:0;color:var(--muted);padding:9px 16px;border-radius:9px;font-family:var(--display);font-weight:800;font-size:18px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;transition:color .3s}
.stage-tabs button.on{color:var(--on-accent)}
.stage-tabs button:disabled{opacity:.25;cursor:not-allowed}
.fd-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.fd-stat{background:#121212;border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.fd-stat small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.fd-stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(40px,4.4vw,64px);line-height:1;color:#fff;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.fd-stat b .a{color:var(--accent-text)}
.fd-from{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:12px}
.bar{height:6px;background:#1f1f1f;border-radius:3px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:3px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar .stock{background:#4a4a4a;z-index:1}
.bar .tuned{background:linear-gradient(90deg,var(--accent),var(--accent-text))}
.fd-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.fd-chart{margin:0;background:#121212;border:1px solid var(--line);border-radius:12px;padding:12px 12px 6px;position:relative}
.fd-chart figcaption{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:0 2px 6px}
.fd-chart figcaption i{font-style:normal;display:inline-flex;align-items:center;gap:5px;margin-left:10px}
.fd-chart figcaption i::before{content:"";width:12px;height:2px;background:currentColor}
.fd-chart figcaption .k-s{color:#8a8a8a}.fd-chart figcaption .k-t{color:var(--accent-text)}
.fd-chart svg{display:block;width:100%;height:auto;overflow:visible}
.fd-chart text{font-family:var(--mono);font-size:9px;fill:#7a7a7a}
.fd-chart .grid{stroke:rgba(255,255,255,.07)}
.fd-chart .stock{fill:none;stroke:#8a8a8a;stroke-width:1.6;stroke-dasharray:4 4}
.fd-chart .tuned{fill:none;stroke:var(--accent-text);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s .15s cubic-bezier(.4,0,.2,1) forwards}
.fd-chart .fill{opacity:0;animation:in-fade .8s .9s forwards}
.fd-chart .peak{opacity:0;animation:in-fade .4s 1.2s forwards}
.fd-chart .peak text{fill:#fff;font-size:10px}
@keyframes draw{to{stroke-dashoffset:0}}
.fd-chart .xh{stroke:rgba(255,255,255,.35);opacity:0}
.fd-tip{position:absolute;pointer-events:none;background:#000;border:1px solid var(--line-strong);border-radius:8px;padding:6px 9px;font-family:var(--mono);font-size:11px;color:#fff;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .15s}
.fd-tip.show{opacity:1}
.fd-tip span{color:var(--accent-text)}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px}
.fd-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#5a5a5a;background:#0f0f0f;
  animation:chip-in .45s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--i) * 45ms + .3s)}
.fd-chip::before{content:"–";width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:11px;border:1px solid #333;color:#555}
.fd-chip.yes{color:#fff;border-color:rgba(91,155,213,.45);background:rgba(91,155,213,.08)}
.fd-chip.yes::before{content:"✓";background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.fd-chip.off{color:var(--warn);border-color:rgba(255,179,71,.35);background:rgba(255,179,71,.06)}
.fd-chip.off::before{content:"!";background:var(--warn);border-color:var(--warn);color:#0a0a0a;font-weight:700}
.fd-chip.off small{font-size:10px;color:rgba(255,179,71,.75);text-transform:none;letter-spacing:0}
@keyframes chip-in{from{opacity:0;transform:scale(.7) translateY(8px)}}

/* Job blocks */
.job{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px 0;border-top:1px solid var(--line-quiet)}
.job:nth-child(even) .job-visual{order:-1}
.job .h3{margin:12px 0 14px}
.job p{color:var(--muted);max-width:520px}
.steps{list-style:none;margin:26px 0 28px;display:grid;gap:10px}
.steps li{display:flex;gap:14px;align-items:baseline;color:var(--fg)}
.steps li b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--accent);flex:none;width:22px}
.job-visual{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;min-height:300px}
.vis-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:16px}
.vbars{display:flex;align-items:flex-end;gap:12px;height:200px;padding-top:10px}
.vbars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.vbars .pair{display:flex;gap:4px;align-items:flex-end;height:100%;width:100%;justify-content:center}
.vbars .pair i{width:38%;border-radius:4px 4px 0 0;display:block}
.vbars .s{background:#3a3a3a}.vbars .t{background:var(--accent)}
.vbars small{font-family:var(--mono);font-size:11px;color:var(--dim)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:14px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.rep{font-family:var(--mono);font-size:13px}
.rep .r{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.rep .r:last-of-type{border:0}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.verdict{margin-top:14px;padding:12px 14px;border-radius:8px;border:1px solid rgba(248,189,64,.35);background:rgba(248,189,64,.07);color:var(--warn);font-family:var(--sans);font-size:14px;font-weight:600}
.dmap{display:grid;grid-template-columns:repeat(12,1fr);gap:2px}
.dmap div{aspect-ratio:1.3;border-radius:2px;font-family:var(--mono);font-size:9px;display:grid;place-items:center;color:var(--fg-strong)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--line-strong);border-radius:6px;background:var(--bg);color:var(--fg)}
.chip.off{border-color:rgba(248,189,64,.4);color:var(--warn)}

/* Levels */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px}
.card h3{font-family:var(--display);font-weight:800;font-size:28px;text-transform:uppercase;line-height:1;margin:16px 0 10px;color:var(--fg-strong)}
.card p{color:var(--muted);font-size:15px}
.badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.b1{color:var(--info);background:rgba(79,179,217,.12)}
.b2{color:var(--warn);background:rgba(248,189,64,.1)}
.b3{color:var(--ok);background:rgba(40,212,178,.1)}

/* Numbers */
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.numbers div{background:var(--bg1);padding:30px 24px}
.numbers b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--fg-strong)}
.numbers b .a{color:var(--accent)}
.numbers>div>span{display:block;margin-top:10px;color:var(--muted);font-size:15px}
.numbers b .a{display:inline;color:var(--accent-text);font-size:.6em;margin-left:2px}
.numbers div{transition:background .3s}.numbers div:hover{background:#121212}

/* Pricing */
.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:28px}
.toggle button{background:none;border:0;padding:8px 18px;border-radius:7px;cursor:pointer;color:var(--muted);font-weight:600}
.toggle button.on{background:var(--surface3);color:var(--fg-strong)}
.toggle em{font-style:normal;color:var(--ok);font-family:var(--mono);font-size:12px;margin-left:6px}
.price{display:flex;flex-direction:column}
.price.feat{border-color:var(--accent-line);background:linear-gradient(180deg,rgba(255,255,255,.05),var(--surface) 40%)}
.price .amt{font-family:var(--display);font-weight:900;font-size:60px;line-height:1;margin:16px 0 4px;color:var(--fg-strong)}
.price .amt small{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted)}
.price .was{font-family:var(--mono);font-size:12px;color:var(--dim);min-height:18px}
.price ul{list-style:none;margin:20px 0 26px;flex:1}
.price li{padding:8px 0 8px 24px;position:relative;color:var(--fg);font-size:15px;border-top:1px solid var(--line-quiet)}
.price li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:6px;border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}

/* FAQ */
.faq{max-width:860px}
details{border-bottom:1px solid var(--line)}
summary{padding:22px 0;cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--fg-strong)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:22px;line-height:1}
details[open] summary::after{content:"−"}
details p{padding:0 0 22px;color:var(--muted);max-width:720px}

/* Final CTA */
.final{text-align:center;padding:120px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;left:50%;top:0;width:900px;height:500px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(255,255,255,.06),transparent 65%);pointer-events:none}
.final .h2{margin:18px auto 16px;max-width:900px;position:relative}
.final .lead{margin:0 auto;position:relative}
.final .chips{justify-content:center;margin:34px auto 0;max-width:720px;position:relative}
.final .hero-cta{justify-content:center;position:relative}

/* Footer */
footer{border-top:1px solid var(--line);padding:60px 0 32px;color:var(--muted);font-size:14px}
.foot{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
footer h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;margin-bottom:14px}
footer li{list-style:none;padding:4px 0}
footer a:hover{color:var(--fg-strong)}
.disclaimer{margin-top:44px;padding:16px 18px;border:1px solid rgba(248,189,64,.22);border-radius:10px;font-size:13px;color:#b7ab8c;background:rgba(248,189,64,.035)}
.copy{margin-top:26px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--dim)}

/* Intro: on every load the hero assembles itself */
@keyframes in-bg{from{opacity:0;transform:scale(1.25);filter:blur(40px) grayscale(1) brightness(.2)}}
@keyframes in-down{from{opacity:0;transform:translateY(-24px)}}
@keyframes in-up{from{opacity:0;transform:translateY(28px);filter:blur(6px)}}
@keyframes in-wipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-18px)}to{clip-path:inset(0 0 0 0)}}
@keyframes in-card{from{opacity:0;transform:skewX(-7deg) translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.55);filter:blur(10px)}}
@keyframes in-label{from{opacity:0;transform:skewX(7deg) translateX(-30px)}}
@keyframes in-fade{from{opacity:0}}
.hero-bg{animation:in-bg 1.6s cubic-bezier(.2,.7,.2,1) both}
nav{animation:in-down .7s .1s cubic-bezier(.2,.8,.2,1) both}
.hero .h1{animation:in-wipe 1s .35s cubic-bezier(.7,0,.2,1) both}
.hero .lead{animation:in-up .8s .85s cubic-bezier(.2,.8,.2,1) both}
.hero .lead+.lead{animation-delay:1s}
.hero-cta{animation:in-up .8s 1.15s cubic-bezier(.2,.8,.2,1) both}
.hero-meta{animation:in-fade .8s 1.4s both}
.scard{animation:in-card 1.1s cubic-bezier(.16,.84,.24,1) backwards}
.scard:nth-child(1){--fx:-120%;--fy:40%;--fr:-14deg;animation-delay:.5s}
.scard:nth-child(2){--fx:30%;--fy:-90%;--fr:10deg;animation-delay:.65s}
.scard:nth-child(3){--fx:-40%;--fy:90%;--fr:-8deg;animation-delay:.8s}
.scard:nth-child(4){--fx:140%;--fy:-30%;--fr:16deg;animation-delay:.95s}
.scard .slabel{animation:in-label .6s cubic-bezier(.2,.8,.2,1) backwards}
.scard:nth-child(1) .slabel{animation-delay:1.35s}.scard:nth-child(2) .slabel{animation-delay:1.5s}
.scard:nth-child(3) .slabel{animation-delay:1.65s}.scard:nth-child(4) .slabel{animation-delay:1.8s}
.scroll-cue{animation:in-fade .8s 2s backwards}

/* Reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:1000px){
  .hero-grid,.job,.finder{grid-template-columns:1fr}
  .job:nth-child(even) .job-visual{order:0}
  .job{gap:32px}
  .grid3{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(4,1fr);max-width:720px}
  .numbers{grid-template-columns:1fr 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-links.open{display:flex;flex-direction:column;gap:4px;position:absolute;top:56px;left:0;right:0;background:var(--bg1);padding:22px 24px;border-bottom:1px solid var(--line)}
  .burger{display:grid;place-items:center}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  section{padding:76px 0}
  .hero{padding:44px 0 64px}
  .nav-right .login,.dash span{display:none}
  .dash{padding:0 9px}
  .numbers,.foot{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr;padding:0 8px}
  .scard:nth-child(n){margin-top:0}.scard:nth-child(even){margin-top:14%}
  .console-list{grid-template-columns:1fr}
  .finder{padding:16px}
  .fd-stats{grid-template-columns:1fr 1fr;gap:10px}
  .fd-stat{padding:12px}
  .fd-stat b{font-size:30px;white-space:nowrap}
  .fd-charts{grid-template-columns:1fr}
}
.wm{font-family:'Manrope',var(--sans,var(--font));font-weight:800;letter-spacing:-.02em;color:#fff}.wm b{color:#5B9BD5;font-weight:800}

/* ---------- Bento: how a file runs ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.bx{grid-column:span 5;display:flex;flex-direction:column;gap:22px;background:linear-gradient(160deg,#141414,#0c0c0c);border:1px solid var(--line);border-radius:18px;padding:28px;position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.bx-wide{grid-column:span 7;flex-direction:row;align-items:center}
.bx-wide>*{flex:1;min-width:0}
.bx::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(500px 220px at var(--mx,80%) var(--my,0%),rgba(91,155,213,.12),transparent 70%);opacity:0;transition:opacity .3s}
.bx:hover{border-color:rgba(91,155,213,.35);transform:translateY(-3px)}
.bx:hover::after{opacity:1}
.bx h3{font-family:var(--display);font-weight:900;font-size:clamp(26px,2.3vw,34px);line-height:1;text-transform:uppercase;color:#fff;margin:10px 0 12px}
.bx p{color:var(--muted);font-size:15px;margin-bottom:14px}
.bx-vis{background:#0a0a0a;border:1px solid var(--line);border-radius:12px;padding:18px}
.bx-vis.rep .r{padding:6px 0}
.bx-vis .vbars{height:160px}
.bento-more{display:flex;justify-content:center;margin-top:28px}
@media (max-width:1000px){.bx,.bx-wide{grid-column:1/-1}.bx-wide{flex-direction:column;align-items:stretch}}

.grid3 .card{position:relative;overflow:hidden;transition:border-color .3s,transform .3s}
.grid3 .card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--accent),transparent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.grid3 .card.in::before{transform:scaleX(1);transition-delay:.3s}
.grid3 .card:hover{border-color:rgba(91,155,213,.35);transform:translateY(-3px)}
.numbers b i{font-style:normal}

.price{transition:transform .3s,border-color .3s}
.price:hover{transform:translateY(-4px)}
.price.feat{position:relative;border-color:rgba(91,155,213,.55);box-shadow:0 0 0 1px rgba(91,155,213,.25),0 30px 70px -30px rgba(91,155,213,.55);background:linear-gradient(180deg,rgba(91,155,213,.10),#121212 45%)}
.ribbon{position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border-radius:99px;padding:4px 10px}
.price .btn-hero{justify-content:center}

.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,90px);align-items:start}
.faq-side{position:sticky;top:90px}
.faq-help{margin-top:10px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:#121212}
.faq-help b{display:block;color:#fff;font-size:16px;margin-bottom:6px}
.faq-help p{color:var(--muted);font-size:14.5px;margin-bottom:10px}
.faq-grid .faq{max-width:none}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:10px;background:#0f0f0f;transition:border-color .25s,background .25s}
.faq details[open]{border-color:rgba(91,155,213,.4);background:#121417}
.faq summary{padding:18px 0;font-size:17px}
.faq summary::after{content:"+";width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-size:16px;flex:none;transition:transform .3s,background .3s,color .3s}
.faq details[open] summary::after{content:"+";transform:rotate(45deg);background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.faq details[open] p{animation:in-up .45s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1000px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}

.final{background:radial-gradient(700px 380px at 50% 0%,rgba(91,155,213,.16),transparent 70%)}
.final::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 60% 70% at 50% 30%,#000 20%,transparent 75%)}
.final .wrap{position:relative;z-index:1}
.final .chip{transition:border-color .2s,color .2s}.final .chip:hover{border-color:var(--accent);color:#fff}
.bx-wide .bx-vis .vbars{height:250px}
.bx-vis.rep .verdict{margin-top:10px}

/* ---------- Logo: Orbitron wordmark that decodes from its own hex bytes ---------- */
.logo .lm{--lh:20px;display:inline-flex;height:var(--lh)}   /* logo size: change --lh only */
.lm .lc{position:relative;display:inline-block;height:var(--lh,24px);width:calc(var(--lh,24px) * var(--w) / 810)}
/* The box also holds the descender of "p", so the letters sit high in it; nudge the x-height band onto the nav's centre line. */
.logo .lm{position:relative;top:calc(var(--lh) * .145);animation:lm-pulse 3.2s ease-in-out 2s infinite}
/* Calm breathing glow on the whole wordmark: one element, no movement, so it stays crisp. */
@keyframes lm-pulse{0%,100%{filter:drop-shadow(0 0 0 rgba(91,155,213,0))}50%{filter:drop-shadow(0 0 5px rgba(91,155,213,.45))}}
.lm .lc{position:static!important}
.logo .lm svg{display:block;width:auto;height:100%;opacity:0;overflow:visible;
  animation:lm-glyph .45s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.75s + var(--i) * .11s)}
/* The byte sits on the same x-height box as the letters: x-height tall digits, slightly condensed so neighbours do not touch. */
.lm .lc b{position:absolute;left:calc((var(--i) + .5) * 100% / 6);top:0;height:calc(var(--lh) * .716);display:grid;place-items:center;white-space:nowrap;
  font:700 calc(var(--lh) * .98)/1 'JetBrains Mono',monospace;letter-spacing:-.02em;color:#9CC9EE;text-shadow:0 0 10px rgba(91,155,213,.55);
  transform:translateX(-50%) scaleX(.62);animation:lm-byte .32s forwards;animation-delay:calc(.75s + var(--i) * .11s)}
@keyframes lm-glyph{from{opacity:0;transform:translateY(5px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes lm-byte{to{opacity:0;transform:translateX(-50%) translateY(-6px) scaleX(.62);filter:blur(3px)}}
.logo .rm-logo{width:auto;height:21px}
footer .logo .rm-logo{height:24px}

/* ---------- Vehicle finder v2: search or tiles, then the result ---------- */
.finder2{position:relative;border:1px solid var(--line);border-radius:20px;padding:22px;overflow:hidden;
  background:radial-gradient(600px 300px at var(--gx,20%) 0%,rgba(91,155,213,.14),transparent 70%),linear-gradient(160deg,#141414,#0b0b0b);animation:fd-drift 14s ease-in-out infinite alternate}
@keyframes fd-drift{from{--gx:15%}to{--gx:85%}}
@property --gx{syntax:'<percentage>';inherits:false;initial-value:20%}
.finder2::before{content:"";position:absolute;inset:-1px;border-radius:20px;pointer-events:none;padding:1px;background:linear-gradient(120deg,rgba(91,155,213,.5),transparent 30%,transparent 70%,rgba(91,155,213,.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fd-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.fd-steps{list-style:none;display:flex;gap:6px;flex-wrap:wrap;margin:0;padding:0}
.fd-steps li{display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:12px;border:1px solid var(--line);background:#0e0e0e;font-size:13.5px;color:var(--dim);transition:all .3s}
.fd-steps li em{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font:600 11px var(--mono);background:#1a1a1a;color:var(--dim);transition:all .3s}
.fd-steps li b{color:#fff;font-weight:600;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fd-steps li.now{border-color:rgba(91,155,213,.6);color:#fff;box-shadow:0 0 0 3px rgba(91,155,213,.12)}
.fd-steps li.now em{background:var(--accent);color:var(--on-accent);animation:fd-pulse 1.6s ease-in-out infinite}
@keyframes fd-pulse{50%{box-shadow:0 0 0 6px rgba(91,155,213,.18)}}
.fd-steps li.done{cursor:pointer;color:var(--muted)}
.fd-steps li.done em{background:rgba(91,155,213,.18);color:var(--accent-text)}
.fd-steps li.done:hover{border-color:var(--line-strong)}
.fd-search{position:relative;flex:1;max-width:420px;min-width:240px;display:flex;align-items:center;gap:10px;padding:0 12px;height:46px;border-radius:12px;border:1px solid var(--line-strong);background:#090909;transition:border-color .2s,box-shadow .2s}
.fd-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(91,155,213,.16),0 10px 40px -10px rgba(91,155,213,.5)}
.fd-search>svg{width:18px;height:18px;color:var(--dim);flex:none}
.fd-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:#fff;font-size:15px}
.fd-search input::-webkit-search-cancel-button{filter:invert(1);opacity:.5}
.fd-search kbd{font:11px var(--mono);color:var(--dim);border:1px solid var(--line-strong);border-radius:5px;padding:2px 6px}
.fd-sugg{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;padding:6px;border-radius:14px;border:1px solid var(--line-strong);background:rgba(14,14,14,.94);backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px #000;animation:fd-in .2s ease}
.fd-sugg button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:0;border-radius:9px;background:none;color:var(--fg);font-size:14px;text-align:left;cursor:pointer}
.fd-sugg button.on,.fd-sugg button:hover{background:rgba(91,155,213,.14)}
.fd-sugg mark{background:none;color:var(--accent-text);font-weight:700}
.fd-sugg small{font:11px var(--mono);color:var(--dim);white-space:nowrap}
.fd-sugg .none{padding:12px;color:var(--dim);font-size:14px}
.fd-stage{position:relative;min-height:380px}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.fd-grid.leave{animation:fd-leave .22s ease forwards}
@keyframes fd-leave{to{opacity:0;transform:translateX(-24px);filter:blur(4px)}}
.tile{position:relative;overflow:hidden;text-align:left;cursor:pointer;border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;background:#101010;color:var(--fg);min-height:120px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  animation:tile-in .5s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 45ms);transition:transform .25s,border-color .25s,background .25s}
@keyframes tile-in{from{opacity:0;transform:translateY(18px) scale(.97);filter:blur(4px)}}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(260px 180px at var(--mx,50%) var(--my,50%),rgba(91,155,213,.22),transparent 65%);opacity:0;transition:opacity .25s}
.tile:hover{transform:translateY(-4px);border-color:rgba(91,155,213,.55);background:#13161a}
.tile:hover::before{opacity:1}
.tile:active{transform:translateY(-1px) scale(.98)}
.tile .tn{position:relative;font-family:var(--display);font-weight:900;font-size:28px;line-height:1;text-transform:uppercase;color:#fff}
.tile .ts{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;font:12px var(--mono);color:var(--dim);letter-spacing:.04em}
.tile .ts i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:#fff;transition:all .25s}
.tile:hover .ts i{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateX(3px)}
.tile .fu{position:relative;display:inline-flex;gap:6px;flex-wrap:wrap}
.tile .fu span{font:10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:6px;border:1px solid var(--line-strong);color:#cfcfcf}
.tile .fu .up{color:var(--accent-text);border-color:rgba(91,155,213,.45);background:rgba(91,155,213,.08)}
.tile.eng .tn{font-size:24px}
#fdOut{position:relative}
#fdOut::after{content:"";position:absolute;inset:-22px;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(156,201,238,.16) 50%,transparent 60%);transform:translateX(-100%);animation:fd-scan 1.1s .1s cubic-bezier(.4,0,.2,1)}
@keyframes fd-scan{to{transform:translateX(100%)}}
.fd-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--accent-text);font-size:13px;cursor:pointer;padding:0;margin-bottom:8px}
.fd-back:hover{color:#fff}
.fd-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;margin-bottom:16px;align-items:stretch}
.fd-gauge{position:relative;width:190px;border-radius:12px;border:1px solid var(--line);background:#121212;display:grid;place-items:center;padding:10px}
.fd-gauge svg{width:160px;height:160px}
#gArc{transition:stroke-dasharray 1.2s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 6px rgba(91,155,213,.6))}
.fd-gauge-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.fd-gauge-in b{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:#fff}
.fd-gauge-in small{font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.fd-hero .fd-stats{margin:0}
.fd-cta{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:14px;border:1px solid rgba(91,155,213,.35);background:linear-gradient(120deg,rgba(91,155,213,.14),rgba(91,155,213,.02))}
.fd-cta b{display:block;font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;color:#fff;line-height:1.05}
.fd-cta small{color:var(--muted);font-size:13.5px}
@media (max-width:760px){.fd-hero{grid-template-columns:1fr}.fd-gauge{width:auto}.fd-search{max-width:none}.fd-steps li{padding:6px 10px 6px 6px}.fd-steps li b{max-width:90px}}
.fd-grid[hidden],#fdOut[hidden]{display:none!important}
.fd-stage{min-height:0}
@media (max-width:600px){.fd-grid{grid-template-columns:1fr 1fr;gap:8px}.tile{min-height:92px;padding:14px}.tile .tn{font-size:21px}.tile.eng{grid-column:1/-1}.finder2{padding:14px}}

/* ---------- Finder v3: guided steps, detailed dyno, selectable + configurable options ---------- */
.fd-wiz{margin-bottom:20px}
.fd-wiz[hidden],.fd-hint[hidden]{display:none!important}
.fd-wiz-top{display:flex;align-items:center;gap:14px;margin-bottom:10px;min-height:24px}
.fd-wiz-top .fd-back{margin:0}
.fd-wiz-top .fd-back[hidden]{display:none}
.fd-stepn{font:600 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.fd-prog{position:relative;height:3px;border-radius:2px;background:#1c1c1c;overflow:hidden;margin-bottom:20px}
.fd-prog i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#2B5D8A,#9CC9EE);box-shadow:0 0 12px rgba(91,155,213,.8);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.fd-wiz h3{font-family:var(--display);font-weight:900;font-size:clamp(28px,3vw,44px);line-height:1;text-transform:uppercase;color:#fff;margin:0 0 8px;animation:fd-q .5s cubic-bezier(.2,.8,.2,1)}
.fd-wiz p{color:var(--muted);font-size:15px;margin:0;animation:fd-q .5s .06s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes fd-q{from{opacity:0;transform:translateY(10px);filter:blur(4px)}}
.tile .kn{position:absolute;top:10px;right:12px;font:600 11px var(--mono);color:var(--dim);border:1px solid var(--line-strong);border-radius:5px;padding:1px 6px;transition:all .2s}
.tile:hover .kn{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
.fd-hint{margin:14px 0 0;font:11.5px var(--mono);color:var(--dim)}
.fd-hint kbd{font:11px var(--mono);color:var(--fg);border:1px solid var(--line-strong);border-radius:4px;padding:1px 5px;margin:0 2px}

/* Dyno */
.fd-sub2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 12px;font:11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.fd-sub2 small{font:inherit;color:var(--accent-text);letter-spacing:.08em}
.fd-link{background:none;border:1px solid var(--line-strong);border-radius:8px;padding:7px 11px;color:var(--fg);font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.fd-link:hover{border-color:var(--accent);color:#fff}
.fd-chart{padding:14px 14px 12px}
.fd-chart figcaption .k-g{color:var(--accent-text)}
.fd-chart figcaption .k-g::before{height:9px;width:12px;background:repeating-linear-gradient(45deg,rgba(91,155,213,.6) 0 2px,transparent 2px 4px)}
.fd-chart figcaption .k-s::before{background:repeating-linear-gradient(90deg,#8a8a8a 0 3px,transparent 3px 5px)}
.fd-chart .gridx{stroke:rgba(255,255,255,.045)}
.fd-chart text{font-size:10px}
.fd-chart .ax{fill:var(--dim);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.fd-chart .gain{opacity:0;animation:in-fade .6s 1.1s forwards}
.fd-chart .pks{fill:#8a8a8a}
.fd-chart .pkst{fill:#9a9a9a;font-size:10px}
.fd-chart .pkl{stroke:rgba(156,201,238,.35);stroke-dasharray:2 3}
.fd-chart .pkt rect{fill:#0a0a0a;stroke:rgba(156,201,238,.55)}
.fd-chart .pkt text{fill:#fff;font-size:10.5px;font-weight:600}
.fd-chart .xhg{opacity:0;transition:opacity .15s;pointer-events:none}
.fd-chart .xhg.on{opacity:1}
.fd-chart .ds{fill:#9a9a9a}.fd-chart .dt{fill:#fff;stroke:var(--accent);stroke-width:2}
.fd-chart .hit{cursor:crosshair}
.fd-tip{min-width:130px;padding:8px 10px;line-height:1.55;transform:translate(-50%,-105%);box-shadow:0 14px 30px -10px #000}
.fd-tip b{display:block;color:#fff;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:3px;margin-bottom:3px}
.fd-tip .s,.fd-tip .t,.fd-tip .d{display:flex;justify-content:space-between;gap:12px}
.fd-tip em{font-style:normal}
.fd-tip .s{color:#9a9a9a}.fd-tip .t{color:var(--accent-text)}.fd-tip .d{color:#fff;font-weight:700}
.fd-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
.fd-ins span{display:flex;flex-direction:column;gap:3px;min-width:0}
.fd-ins small{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.fd-ins b{font-family:var(--display);font-weight:900;font-size:24px;color:#fff;line-height:1;white-space:nowrap}
.fd-ins b.a{color:var(--accent-text)}
.fd-ins b em{font-style:normal;font-size:14px;color:var(--muted)}
.fd-ins i{font-style:normal;font:11px var(--mono);color:var(--muted)}
.fd-table{margin:-4px 0 18px;overflow-x:auto;border:1px solid var(--line);border-radius:12px;animation:fd-q .35s ease}
.fd-table[hidden]{display:none}
.fd-table table{width:100%;border-collapse:collapse;font:12.5px var(--mono);font-variant-numeric:tabular-nums}
.fd-table th,.fd-table td{padding:7px 12px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.fd-table thead th{color:var(--dim);font-weight:500;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:#101010}
.fd-table thead th[colspan]{text-align:center;color:#fff}
.fd-table thead th[rowspan],.fd-table tbody th{text-align:left}
.fd-table tbody th{color:#fff;font-weight:600}
.fd-table td{color:#9a9a9a}.fd-table td.a{color:var(--accent-text)}.fd-table td.d{color:#fff}
.fd-table tbody tr:last-child>*{border-bottom:0}
.fd-table tbody tr:hover{background:rgba(91,155,213,.07)}

/* Options */
.fd-optwrap{margin-top:6px}
.fd-optlay{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.fd-ogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.oc{position:relative;text-align:left;display:flex;flex-direction:column;gap:7px;padding:15px 14px 14px 48px;border-radius:12px;border:1px solid var(--line);background:#101010;color:var(--fg);cursor:pointer;font:inherit;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;animation:tile-in .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i) * 35ms)}
.oc:hover{border-color:rgba(91,155,213,.5);transform:translateY(-2px)}
.oc .ck{position:absolute;left:15px;top:15px;width:20px;height:20px;border-radius:6px;border:1.5px solid #474747;display:grid;place-items:center;transition:all .2s}
.oc:hover .ck{border-color:var(--accent)}
.oc.on .ck{background:var(--accent);border-color:var(--accent);box-shadow:0 0 12px rgba(91,155,213,.7)}
.oc.on .ck::after{content:"";width:9px;height:5px;border:2px solid var(--on-accent);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.oc .ot{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.oc b{font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;color:#fff;line-height:1}
.oc em{font-style:normal;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(255,179,71,.4);border-radius:5px;padding:2px 5px}
.oc em.sn{color:var(--accent-text);border-color:rgba(91,155,213,.45)}
.oc small{font-size:12.5px;line-height:1.4;color:var(--muted)}
.oc .cfgd{font:11px var(--mono);color:var(--accent-text);letter-spacing:.03em;min-height:0}
.oc .cfgd:empty{display:none}
.oc.on{border-color:rgba(91,155,213,.6);background:linear-gradient(160deg,rgba(91,155,213,.15),rgba(91,155,213,.03))}
.oc.cur{box-shadow:0 0 0 1px var(--accent),0 14px 30px -14px rgba(91,155,213,.7)}
.oc.na{opacity:.35;cursor:not-allowed;animation-name:tile-in-dim}
.oc.na:hover{transform:none;border-color:var(--line)}
@keyframes tile-in-dim{from{opacity:0;transform:translateY(18px)}}
.fd-cfg{position:sticky;top:76px;border:1px solid rgba(91,155,213,.4);border-radius:16px;background:radial-gradient(400px 200px at 100% 0,rgba(91,155,213,.12),transparent 70%),linear-gradient(180deg,#13171c,#0d0d0d);padding:18px;min-height:260px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.fd-cfg.empty{border-style:dashed;border-color:var(--line-strong);background:#0d0d0d;box-shadow:none}
.fd-cfg.in{animation:fd-q .35s cubic-bezier(.2,.8,.2,1)}
.cfg-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:var(--muted);padding:0 10px}
.cfg-empty svg{width:34px;height:34px;color:var(--accent-text);opacity:.75;margin-bottom:4px}
.cfg-empty b{color:#fff;font-weight:600;font-size:15px}
.cfg-empty small{font-size:13px;line-height:1.45}
.cfg-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cfg-h small{display:block;font:10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.cfg-h b{display:block;font-family:var(--display);font-weight:900;font-size:30px;text-transform:uppercase;color:#fff;line-height:1;margin-top:5px}
.cfg-x{flex:none;background:none;border:1px solid var(--line-strong);border-radius:8px;color:var(--muted);font-size:12px;padding:6px 10px;cursor:pointer;transition:all .2s}
.cfg-x:hover{color:#fff;border-color:var(--bad)}
.cfg-d{color:var(--muted);font-size:13.5px;line-height:1.5;margin:10px 0 16px}
.cf{margin-bottom:16px}
.cf>label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.cf output{color:#fff;letter-spacing:.02em;font-size:12.5px}
.seg{display:flex;gap:4px;padding:4px;border-radius:10px;background:#090909;border:1px solid var(--line)}
.seg button{flex:1;min-width:0;border:0;background:none;color:var(--muted);padding:9px 6px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button:hover{color:#fff;background:rgba(255,255,255,.04)}
.seg button.on{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -6px rgba(91,155,213,.9)}
.rg{position:relative;height:24px;--a:0%;--b:100%}
.rg::before,.rg::after{content:"";position:absolute;top:10px;height:4px;border-radius:2px}
.rg::before{left:0;right:0;background:#232323}
.rg::after{left:var(--a);right:calc(100% - var(--b));background:linear-gradient(90deg,#2B5D8A,#9CC9EE);box-shadow:0 0 10px rgba(91,155,213,.6)}
.rg input{position:absolute;inset:0;z-index:1;width:100%;height:24px;margin:0;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;outline:none}
.rg input::-webkit-slider-runnable-track{height:24px;background:none}
.rg input::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#fff;border:4px solid var(--accent);cursor:grab;box-shadow:0 2px 10px rgba(0,0,0,.7)}
.rg input:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12)}
.rg input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(91,155,213,.35)}
.rg input::-moz-range-track{background:none}
.rg input::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--accent);cursor:grab}
.rg-sc{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--dim);margin-top:4px}
.cfg-tog{position:relative;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fg);cursor:pointer;margin-bottom:16px;line-height:1.35}
.cfg-tog input{position:absolute;opacity:0;width:0;height:0}
.cfg-tog span{flex:none;width:38px;height:22px;border-radius:11px;background:#2a2a2a;position:relative;transition:background .2s}
.cfg-tog span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#bdbdbd;transition:all .25s cubic-bezier(.3,1.3,.5,1)}
.cfg-tog input:checked+span{background:var(--accent)}
.cfg-tog input:checked+span::after{left:19px;background:#fff}
.cfg-tog input:focus-visible+span{box-shadow:0 0 0 3px rgba(91,155,213,.45)}
.cfg-tog.wn{padding:12px;border:1px solid rgba(255,179,71,.4);border-radius:10px;background:rgba(255,179,71,.07);color:#ffd59a}
.cfg-tog.wn input:checked+span{background:var(--warn)}
.cf input[type=text]{width:100%;height:42px;border-radius:9px;border:1px solid var(--line-strong);background:#090909;color:#fff;padding:0 12px;font:13px var(--mono)}
.cf input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(91,155,213,.2)}
.cfg-none{color:var(--muted);font-size:13.5px;padding:12px;border:1px dashed var(--line-strong);border-radius:10px;margin-bottom:14px}
.snd{margin:0 0 18px;padding:12px;border-radius:12px;background:#07090b;border:1px solid rgba(91,155,213,.25)}
.snd-top{display:flex;align-items:center;gap:12px}
.snd-play{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px 0 6px;border-radius:21px;border:0;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 8px 24px -8px rgba(91,155,213,.9);transition:transform .15s}
.snd-play:hover{transform:scale(1.04)}
.snd-play i{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.18);display:grid;place-items:center}
.snd-play i::before{content:"";border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.snd-play.on i::before{border:0;width:10px;height:10px;background:currentColor;margin:0;border-radius:2px}
.snd-play.on{animation:fd-pulse 1s ease-in-out infinite}
.snd canvas{flex:1;min-width:0;width:100%;height:58px}
.snd small{display:block;margin-top:8px;font-size:11.5px;line-height:1.4;color:var(--dim)}
.fd-sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.fd-sum span{font:11.5px var(--mono);padding:4px 8px;border-radius:6px;background:rgba(91,155,213,.12);border:1px solid rgba(91,155,213,.35);color:#fff;animation:tile-in .3s ease backwards}
.fd-sum span.st{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:700}
.fd-sum span.w{background:rgba(255,179,71,.1);border-color:rgba(255,179,71,.45);color:#ffd59a}
.fd-sum span.nx{background:none;border-style:dashed;border-color:var(--line-strong);color:var(--dim)}
.fd-need{display:block;color:var(--warn);font-size:12.5px;margin-top:4px}
.fd-need:empty{display:none}
.fd-cta .btn.dis{opacity:.45;filter:grayscale(.7);cursor:not-allowed}
@media (max-width:980px){.fd-optlay{grid-template-columns:1fr}.fd-cfg{position:relative;top:0}}
@media (max-width:700px){.fd-ins b{font-size:19px}.fd-ins{gap:6px}.fd-ogrid{grid-template-columns:1fr 1fr}.oc{padding-left:42px}.oc .ck{left:12px}}
@media (max-width:480px){.fd-ogrid{grid-template-columns:1fr}}
/* in-fade only has a "from" frame, so on elements that start at opacity 0 it ended invisible; this one ends visible. */
@keyframes fd-show{from{opacity:0}to{opacity:1}}
.fd-chart .fill{animation:fd-show .8s .9s forwards}
.fd-chart .gain{animation:fd-show .6s 1.1s forwards}
.fd-chart .peak{animation:fd-show .4s 1.25s forwards}

/* ---------- Finder v4: lighter surfaces, "Build your tune" as the hero of the result ---------- */
.finder2{--line:#ffffff1c;--line-strong:#ffffff36;--dim:#98a1ab;--muted:#c3cad2;
  background:radial-gradient(800px 380px at var(--gx,20%) 0%,rgba(91,155,213,.24),transparent 70%),linear-gradient(160deg,#1e232a,#16191e)}
.finder2 .tile,.finder2 .fd-stat,.finder2 .fd-gauge,.finder2 .fd-steps li{background:#242930}
.finder2 .tile:hover{background:#2a3038}
.finder2 .fd-steps li em{background:#323840}
.finder2 .fd-search{background:#181b20}
.finder2 .stage-tabs{background:#242930}
.finder2 .bar{background:#353b44}
.finder2 .bar .stock{background:#7d858f}
.finder2 .fd-prog{background:#2c3138}
.finder2 .fd-cta{background:linear-gradient(120deg,rgba(91,155,213,.22),rgba(91,155,213,.06));border-color:rgba(91,155,213,.5)}

/* Build your tune */
.fd-build{position:relative;margin:22px -6px 0;padding:26px;border-radius:20px;border:1px solid rgba(91,155,213,.45);overflow:hidden;
  background:radial-gradient(700px 320px at 85% 0%,rgba(91,155,213,.32),transparent 70%),radial-gradient(500px 260px at 0% 100%,rgba(91,155,213,.14),transparent 70%),linear-gradient(160deg,#232c37,#1a1f26);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}
.fd-build::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(rgba(156,201,238,.12) 1px,transparent 1.5px) 0 0/14px 14px;-webkit-mask:linear-gradient(180deg,#000,transparent 60%);mask:linear-gradient(180deg,#000,transparent 60%)}
.fb-head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.fb-kick{display:inline-flex;align-items:center;gap:8px;font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-text)}
.fb-kick::before{content:"";width:22px;height:2px;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.fb-head h3{font-family:var(--display);font-weight:900;font-size:clamp(34px,4vw,58px);line-height:.95;text-transform:uppercase;margin:8px 0 10px;
  background:linear-gradient(180deg,#fff 30%,#9CC9EE);-webkit-background-clip:text;background-clip:text;color:transparent}
.fb-head p{max-width:560px;color:var(--muted);font-size:15.5px;line-height:1.5;margin:0}
.fb-count{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:9px 14px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(0,0,0,.2);transition:all .3s}
.fb-count b{font-size:15px;color:#fff;margin-right:2px}
.fb-count.on{border-color:var(--accent);background:rgba(91,155,213,.18);box-shadow:0 0 24px -6px rgba(91,155,213,.8)}
.fd-build .fd-optlay{position:relative;grid-template-columns:minmax(0,1fr) minmax(400px,46%);gap:18px}
.fd-build .fd-ogrid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}

/* Option cards */
.fd-build .oc{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;column-gap:12px;row-gap:6px;padding:16px 16px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,#2b3139,#22272e)}
.fd-build .oc .oi{grid-row:1/4;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#1a1e24;border:1px solid rgba(255,255,255,.12);color:var(--accent-text);transition:all .25s}
.fd-build .oc .oi svg{width:22px;height:22px}
.fd-build .oc .ot{flex-direction:column;align-items:flex-start;gap:6px}
.fd-build .oc b{font-size:21px}
.fd-build .oc .tags{display:flex;gap:5px;flex-wrap:wrap}
.fd-build .oc .tags:empty{display:none}
.fd-build .oc small{color:#b8c0c9}
.fd-build .oc .ck{left:auto;right:14px;top:14px;border-radius:50%;width:22px;height:22px;border-color:rgba(255,255,255,.3)}
.fd-build .oc:hover{border-color:rgba(91,155,213,.7);background:linear-gradient(160deg,#313842,#262b33);transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(91,155,213,.7)}
.fd-build .oc:hover .oi{border-color:var(--accent);box-shadow:0 0 18px -4px rgba(91,155,213,.8)}
.fd-build .oc.on{border-color:var(--accent);background:linear-gradient(160deg,rgba(91,155,213,.42),rgba(43,93,138,.28));box-shadow:0 0 0 1px rgba(91,155,213,.5),0 18px 40px -20px rgba(91,155,213,.9)}
.fd-build .oc.on .oi{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 0 22px -2px rgba(91,155,213,.9)}
.fd-build .oc.on .cfgd{color:#fff}
.fd-build .oc.cur{outline:2px solid #9CC9EE;outline-offset:2px}
.fd-build .oc.na{background:#1f2328;opacity:.45}
.fd-build .oc.na .oi{color:#6c737b}

/* Setup panel */
.fd-build .fd-cfg{top:72px;padding:22px;border-radius:18px;border:1px solid rgba(91,155,213,.6);min-height:420px;
  background:radial-gradient(500px 240px at 100% 0,rgba(91,155,213,.3),transparent 70%),linear-gradient(180deg,#26313d,#1b2128);
  box-shadow:0 0 0 1px rgba(91,155,213,.15),0 40px 90px -30px rgba(91,155,213,.55)}
.fd-build .fd-cfg.added{border-color:#9CC9EE}
.fd-build .fd-cfg.empty{background:rgba(0,0,0,.15)}
.fd-build .cfg-h{justify-content:flex-start;align-items:center;gap:14px}
.ci{flex:none;width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);box-shadow:0 0 34px -4px rgba(91,155,213,.95),inset 0 1px 0 rgba(255,255,255,.35)}
.ci svg{width:30px;height:30px}
.fd-build .cfg-h b{font-size:clamp(30px,2.8vw,42px)}
.fd-build .cfg-d{color:#c3cad2;font-size:14.5px}
.fd-build .snd{position:relative;margin:0 0 20px;padding:0;border-radius:16px;overflow:hidden;border:1px solid rgba(91,155,213,.45);
  background:radial-gradient(400px 160px at 50% 50%,rgba(91,155,213,.25),transparent 70%),linear-gradient(180deg,#0f1823,#0b1118)}
.fd-build .snd::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/24px 100%,linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/100% 24px}
.fd-build .snd canvas{display:block;width:100%;height:120px;position:relative}
.snd-row{position:relative;display:flex;align-items:center;gap:14px;padding:12px 16px 14px;border-top:1px solid rgba(91,155,213,.25);background:rgba(0,0,0,.25)}
.snd-row b{display:block;font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;color:#fff;line-height:1}
.snd-row small{display:block;margin-top:3px;font:11px var(--mono);letter-spacing:.06em;color:var(--accent-text)}
.fd-build .snd-play{position:relative;width:60px;height:60px;padding:0;border-radius:50%;justify-content:center;flex:none;background:linear-gradient(180deg,#9CC9EE,#5B9BD5);box-shadow:0 0 0 6px rgba(91,155,213,.18),0 10px 30px -6px rgba(91,155,213,.95)}
.fd-build .snd-play::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(156,201,238,.6);animation:snd-ring 2s ease-out infinite}
@keyframes snd-ring{from{transform:scale(.9);opacity:1}to{transform:scale(1.45);opacity:0}}
.fd-build .snd-play i{width:auto;height:auto;background:none}
.fd-build .snd-play i::before{border-left-width:16px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}
.fd-build .snd-play.on i::before{width:16px;height:16px;margin:0}
.fd-build .snd-play.on{animation:none}
.fd-build .snd.live{border-color:#9CC9EE;box-shadow:0 0 40px -10px rgba(91,155,213,.9)}
.snd-note{margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--dim)}
.fd-build .cf>label{color:#aeb6bf}
.fd-build .seg{background:#14181d;border-color:rgba(255,255,255,.12)}
.seg-big{gap:8px;padding:0;background:none!important;border:0!important}
.seg-big button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#1d2228;font-size:13.5px}
.seg-big button.on{border-color:#9CC9EE;background:linear-gradient(180deg,rgba(91,155,213,.55),rgba(43,93,138,.45));color:#fff;box-shadow:0 10px 26px -10px rgba(91,155,213,.9)}
.seg-big .mt{display:flex;align-items:flex-end;gap:3px;height:22px}
.seg-big .mt i{width:7px;border-radius:2px;background:rgba(255,255,255,.18)}
.seg-big .mt i:nth-child(1){height:9px}.seg-big .mt i:nth-child(2){height:15px}.seg-big .mt i:nth-child(3){height:22px}
.seg-big .mt i.f{background:linear-gradient(180deg,#ffd27a,#ff8a3d)}
.seg-big button.on .mt i.f{box-shadow:0 0 10px rgba(255,150,60,.8)}
.rg-tk{position:relative;height:16px;margin-top:4px}
.rg-tk span{position:absolute;top:0;transform:translateX(-50%);font:10px var(--mono);color:var(--dim)}
.rg-tk span::before{content:"";position:absolute;left:50%;top:-6px;width:1px;height:4px;background:rgba(255,255,255,.25)}
.fd-build .rg::before{background:#2c323a}
.fd-build .cf output{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:.02em;color:#fff}
.cfg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.cfg-foot .ok{font-weight:700;color:#9CC9EE}
.cfg-add{width:100%;height:54px;border:0;border-radius:14px;cursor:pointer;font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:.02em;text-transform:uppercase;color:var(--on-accent);
  background:linear-gradient(180deg,#B9DAF4,#5B9BD5);box-shadow:0 14px 34px -10px rgba(91,155,213,.95),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .15s,box-shadow .2s}
.cfg-add:hover{transform:translateY(-2px);box-shadow:0 20px 40px -10px rgba(91,155,213,1),inset 0 1px 0 rgba(255,255,255,.5)}
@media (max-width:980px){.fd-build .fd-optlay{grid-template-columns:1fr}.fd-build .fd-cfg{position:relative;top:0;min-height:0}}
@media (max-width:600px){.fd-build{margin:18px -4px 0;padding:16px}.fd-build .fd-ogrid{grid-template-columns:1fr}.fd-build .fd-cfg{padding:16px}}
.fd-build .oc .ot{padding-right:26px}

/* ---------- Finder v5: brand tiles with marks, icon steps ---------- */
.fd-steps li em svg{width:15px;height:15px}
.fd-steps li.done em{background:rgba(91,155,213,.22);color:var(--accent-text)}
.fd-grid.brands{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
.tile.brand{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:86px;padding:16px 16px}
.tile.brand .bl{position:relative;flex:none;width:42px;height:42px;background:#e9edf2;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:background .25s,transform .25s}
.tile.brand .bl.txt{-webkit-mask-image:none;mask-image:none;background:none;border:2px solid #e9edf2;border-radius:50%;display:grid;place-items:center;font:800 13px var(--sans);color:#e9edf2;letter-spacing:.02em}
.tile.brand:hover .bl{background:var(--accent-text);transform:scale(1.08)}
.tile.brand:hover .bl.txt{background:none;border-color:var(--accent-text);color:var(--accent-text)}
.tile.brand .bn{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
.tile.brand .tn{font-size:21px;line-height:1;overflow-wrap:anywhere}
.fd-steps li em{color:var(--muted)}
.tile.brand .ts{font-size:11px}
.tile.brand .kn{top:8px;right:9px;font-size:10px}
@media (max-width:600px){.fd-grid.brands{grid-template-columns:1fr 1fr}.tile.brand{min-height:70px;padding:12px;gap:10px}.tile.brand .bl{width:32px;height:32px}.tile.brand .tn{font-size:17px}}

/* ---------- Finder v6: flat surfaces, sharp corners, no gloss ---------- */
.finder2{border-radius:6px;background:#1b1f24;animation:none;border-color:var(--line-strong)}
.finder2::before,.tile::before,.fd-build::before,#fdOut::after,.fd-build .snd-play::after{display:none}
.finder2 .tile,.finder2 .fd-stat,.finder2 .fd-gauge,.finder2 .fd-search,.finder2 .stage-tabs,.finder2 .fd-cta,.fd-sugg,.fd-table{border-radius:3px}
.finder2 .fd-steps li,.finder2 .fd-steps li em,.tile .ts i,.tile .kn,.fd-hint kbd,.fd-search kbd,.stage-tabs button,.stage-tabs .glider,.fd-sum span,.fb-count{border-radius:2px}
.finder2 .tile{background:#23282e;transition:border-color .15s,background .15s}
.finder2 .tile:hover{transform:none;background:#292f36;border-color:var(--accent)}
.finder2 .fd-steps li.now,.fd-search:focus-within,.stage-tabs .glider,.fd-prog i,.rg::after,.fd-sugg{box-shadow:none}
#gArc{filter:none}
.finder2 .fd-cta{background:#20262c;border-color:var(--line-strong)}
.fd-build{margin:22px 0 0;border-radius:4px;border-color:var(--line-strong);background:#20262d;box-shadow:none}
.fb-head h3{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#fff}
.fb-kick::before{box-shadow:none}
.fb-count.on{box-shadow:none}
.fd-build .oc{border-radius:3px;background:#272d34;border-color:rgba(255,255,255,.13);transition:border-color .15s,background .15s}
.fd-build .oc:hover{transform:none;background:#2c333b;box-shadow:none;border-color:var(--accent)}
.fd-build .oc:hover .oi,.fd-build .oc.on .oi,.oc.on .ck{box-shadow:none}
.fd-build .oc .oi{border-radius:2px}
.fd-build .oc .ck{border-radius:2px}
.fd-build .oc.on{background:rgba(91,155,213,.16);box-shadow:none;border-color:var(--accent)}
.fd-build .oc.cur{outline:1px solid var(--accent-text);outline-offset:-1px}
.fd-build .oc em{border-radius:2px}
.fd-build .fd-cfg{border-radius:4px;background:#232a31;border-color:var(--accent);box-shadow:none}
.fd-build .fd-cfg.added{border-color:var(--accent-text)}
.ci{border-radius:3px;box-shadow:none}
.fd-build .snd{border-radius:3px;background:#12171d}
.fd-build .snd.live{box-shadow:none}
.fd-build .snd-play{background:var(--accent);box-shadow:none}
.fd-build .seg,.fd-build .seg button,.seg-big button,.cf input[type=text],.cfg-x,.cfg-tog.wn,.cfg-none{border-radius:2px}
.fd-build .seg button.on,.seg-big button.on{background:var(--accent);color:var(--on-accent);box-shadow:none;border-color:var(--accent)}
.seg-big button.on .mt i.f{box-shadow:none}
.seg-big .mt i{border-radius:1px}
.cfg-tog span,.cfg-tog span::after{border-radius:2px}
.cfg-add{border-radius:3px;background:var(--accent);box-shadow:none;transition:background .15s}
.cfg-add:hover{transform:none;background:var(--accent-hover);box-shadow:none}
/* Brand names stay on one line ("Volkswagen" no longer breaks); only hyphenated names may wrap. */
.tile.brand{gap:12px;padding:14px}
.tile.brand .bl{width:34px;height:34px}
.tile.brand .tn{font-size:19px;overflow-wrap:normal;word-break:normal}
@media (max-width:600px){.tile.brand{gap:9px;padding:11px}.tile.brand .bl{width:28px;height:28px}.tile.brand .tn{font-size:15px}}
.tile.brand .bn{padding-right:16px}

/* ---------- Finder v7: compact layout ---------- */
.finder2{padding:16px}
.fd-top{margin-bottom:12px}
.fd-steps li{padding:5px 11px 5px 5px;font-size:12.5px;gap:7px}
.fd-steps li em{width:22px;height:22px}
.fd-steps li em svg{width:13px;height:13px}
.fd-search{height:38px}
.fd-wiz{margin-bottom:12px}
.fd-wiz-top{margin-bottom:6px}
.fd-prog{margin-bottom:12px}
.fd-wiz h3{font-size:clamp(22px,2.1vw,30px);margin-bottom:4px}
.fd-wiz p{font-size:13.5px}
.fd-stage{min-height:0}
.fd-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.finder2 .tile{min-height:84px;padding:12px 14px;gap:8px}
.tile .tn{font-size:21px}
.tile.eng .tn{font-size:18px}
.tile .ts{font-size:11px}
.tile .ts i{width:22px;height:22px}
.tile .fu span{font-size:10px;padding:2px 6px}
.fd-grid.brands{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.finder2 .tile.brand{min-height:58px;padding:10px 12px;gap:10px}
.tile.brand .bl{width:28px;height:28px}
.tile.brand .tn{font-size:17px}
.tile.brand .ts{font-size:10.5px}
.fd-hint{margin-top:10px}
.fd-demo{margin-top:10px}
.fd-title{margin-bottom:10px}
.fd-title b{font-size:clamp(20px,1.9vw,26px)}
.fd-title small{margin-top:5px}
.stage-tabs button{padding:6px 12px;font-size:15px}
.fd-hero{gap:10px;margin-bottom:0}
.fd-gauge{width:140px;padding:6px}
.fd-gauge svg{width:118px;height:118px}
.fd-gauge-in b{font-size:28px}
.fd-stats{gap:10px}
.finder2 .fd-stat{padding:12px 14px}
.fd-stat b{font-size:clamp(30px,3vw,42px)}
.fd-from{margin-bottom:8px}
.fd-build{padding:16px;margin-top:12px}
.fb-head{margin-bottom:12px}
.fb-head h3{font-size:clamp(24px,2.4vw,34px);margin:5px 0 5px}
.fb-head p{font-size:13.5px}
.fb-count{padding:6px 10px}
.fd-build .fd-optlay{grid-template-columns:minmax(0,1fr) minmax(400px,50%);gap:12px}
.fd-build .fd-ogrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.fd-build .oc{grid-template-columns:32px 1fr;padding:10px 12px;row-gap:3px;column-gap:10px}
.fd-build .oc .oi{width:32px;height:32px}
.fd-build .oc .oi svg{width:17px;height:17px}
.fd-build .oc b{font-size:16.5px}
.fd-build .oc .ot{gap:4px}
.fd-build .oc small{font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-build .oc .ck{width:18px;height:18px;top:10px;right:10px}
.finder2 .fd-cta{padding:12px 16px;margin-top:12px}
.fd-cta b{font-size:20px}
.fd-sum{margin:6px 0 4px}

/* ---------- Configurator: the strong part ---------- */
.fd-build .fd-cfg{padding:16px 18px 18px;border-top:3px solid var(--accent);background:#222930}
.fd-build .cfg-h{gap:12px}
.fd-build .ci{width:48px;height:48px}
.fd-build .ci svg{width:26px;height:26px}
.fd-build .cfg-h b{font-size:clamp(28px,2.6vw,38px);letter-spacing:.01em}
.fd-build .cfg-d{margin:8px 0 14px;font-size:13.5px}
.fd-build .snd{margin:0 -18px 16px;border-radius:0;border-left:0;border-right:0;border-color:var(--line-strong);background:#14191f}
.fd-build .snd canvas{height:84px}
.fd-build .snd-row{padding:10px 18px 12px;background:#101418;border-top:1px solid var(--line)}
.fd-build .snd-play{width:52px;height:52px}
.snd-row b{font-size:22px}
.tach{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;padding:14px 18px 4px}
.tach-read{min-width:96px}
.tach-read b{display:block;font:900 38px/1 var(--display);color:#fff;font-variant-numeric:tabular-nums;transition:color .1s}
.tach-read small{font:10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tach-bar{position:relative;height:34px}
.tach-bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:12px;background:#1b2128;border:1px solid rgba(255,255,255,.12)}
.tach-bar .tw{position:absolute;top:6px;height:12px;background:rgba(91,155,213,.4);border-left:2px solid var(--accent-text);border-right:2px solid var(--accent-text);transition:left .2s,width .2s,background .1s}
.tach-bar .tr{position:absolute;top:6px;right:0;width:7%;height:12px;background:repeating-linear-gradient(45deg,rgba(255,77,77,.55) 0 3px,transparent 3px 6px)}
.tach-bar .tn{position:absolute;top:0;left:0;width:3px;height:24px;background:#fff;transform:translateX(-50%)}
.tach-bar .tk{position:absolute;left:0;right:0;top:22px}
.tach-bar .tk span{position:absolute;transform:translateX(-50%);font:9.5px var(--mono);color:var(--dim)}
.tach.hit .tw{background:rgba(255,160,60,.6);border-color:var(--warn)}
.tach.hit .tach-read b{color:var(--warn)}
.fd-build .cf{margin-bottom:13px}
.fd-build .seg-big button{padding:10px 8px 9px}
.fd-build .cfg-add{height:48px;font-size:19px}
@media (max-width:980px){.fd-build .fd-optlay{grid-template-columns:1fr}}
@media (max-width:600px){.fd-gauge{width:auto}.tach{grid-template-columns:1fr;gap:6px}.tach-read b{font-size:30px}.fd-build .fd-ogrid{grid-template-columns:1fr}}

/* ---------- Finder v8: photo backgrounds with a dot screen, like the hero ---------- */
.finder2{isolation:isolate;background:#161a1f}
.finder2>*{position:relative;z-index:1}
.finder2::before{content:"";display:block;position:absolute;inset:-30px;z-index:0;pointer-events:none;border-radius:0;padding:0;-webkit-mask:none;mask:none;
  background:url(../img/hero-bg.jpg) 60% 45%/cover no-repeat;filter:blur(10px) saturate(.7);opacity:.55}
.finder2::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(10,10,10,.5) 1px,transparent 1.5px) 0 0/4px 4px,
    linear-gradient(90deg,rgba(18,21,26,.94) 0%,rgba(18,21,26,.78) 45%,rgba(18,21,26,.55) 100%),
    linear-gradient(180deg,rgba(43,93,138,.18),rgba(18,21,26,.6))}
.finder2 .tile{background:rgba(32,37,43,.78)}
.finder2 .tile:hover{background:rgba(40,46,54,.9)}
.finder2 .fd-stat,.finder2 .fd-gauge,.finder2 .fd-steps li,.finder2 .stage-tabs{background:rgba(32,37,43,.8)}
.finder2 .fd-search{background:rgba(14,17,21,.8)}
.finder2 .fd-cta{background:rgba(28,33,39,.85)}

.fd-build{isolation:isolate;background:#1b2027}
.fd-build>*{position:relative;z-index:1}
.fd-build::before{content:"";display:block;position:absolute;inset:0;z-index:0;pointer-events:none;opacity:1;-webkit-mask:none;mask:none;
  background:radial-gradient(rgba(10,10,10,.55) 1px,transparent 1.5px) 0 0/4px 4px,
    linear-gradient(90deg,rgba(27,32,39,.97) 0%,rgba(27,32,39,.9) 40%,rgba(27,32,39,.55) 75%,rgba(27,32,39,.35) 100%),
    url(../img/photo-options.jpg) right 0 top 62%/55% auto no-repeat;filter:saturate(.85)}
.fd-build .oc{background:rgba(36,42,49,.82)}
.fd-build .oc:hover{background:rgba(44,51,59,.92)}
.fd-build .oc.on{background:rgba(43,93,138,.45)}
.fd-build .oc.na{background:rgba(30,34,39,.6)}
.fd-build .fd-cfg{background:rgba(30,36,43,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fd-build .snd{background:rgba(12,16,20,.82)}
@media (max-width:980px){.fd-build::before{background:radial-gradient(rgba(10,10,10,.55) 1px,transparent 1.5px) 0 0/4px 4px,linear-gradient(180deg,rgba(27,32,39,.6),rgba(27,32,39,.95) 40%),url(../img/photo-options.jpg) center 60%/cover no-repeat}}
.finder2::before{background-position:70% 58%;filter:blur(5px) saturate(.8);opacity:.9}
.finder2::after{background:radial-gradient(rgba(10,10,10,.45) 1px,transparent 1.5px) 0 0/4px 4px,
    linear-gradient(90deg,rgba(18,21,26,.9) 0%,rgba(18,21,26,.62) 45%,rgba(18,21,26,.3) 100%),
    linear-gradient(180deg,rgba(18,21,26,.1),rgba(18,21,26,.55))}
/* Put the exhaust flame next to the "Build your tune" heading, where it is not covered by the panel. */
@media (min-width:981px){.fd-build::before{background:radial-gradient(rgba(10,10,10,.5) 1px,transparent 1.5px) 0 0/4px 4px,
    linear-gradient(90deg,rgba(27,32,39,.97) 0%,rgba(27,32,39,.9) 38%,rgba(27,32,39,.45) 70%,rgba(27,32,39,.2) 100%),
    linear-gradient(180deg,rgba(27,32,39,0) 0,rgba(27,32,39,0) 90px,rgba(27,32,39,.75) 260px),
    url(../img/photo-options.jpg) right -30px top -600px/720px auto no-repeat}}
.fb-count{background:rgba(10,12,15,.75)}
@media (max-width:600px){.fd-grid,.fd-grid.brands{grid-template-columns:1fr 1fr}.tile.eng{grid-column:1/-1}}

/* ---------- Build your tune: a photo per option, cross-fading ---------- */
.fd-build::before{display:none!important}
.fd-build>.fb-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fb-bg i{position:absolute;top:0;right:0;bottom:0;width:66%;background-size:cover;background-repeat:no-repeat;opacity:0;transform:scale(1.05);transition:opacity .6s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);filter:saturate(.9)}
.fb-bg i.on{opacity:1;transform:none}
.fd-build::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(10,10,10,.5) 1px,transparent 1.5px) 0 0/4px 4px,
    linear-gradient(90deg,rgba(27,32,39,.98) 0%,rgba(27,32,39,.92) 34%,rgba(27,32,39,.5) 62%,rgba(27,32,39,.22) 100%),
    linear-gradient(180deg,rgba(27,32,39,0) 0,rgba(27,32,39,0) 140px,rgba(27,32,39,.7) 100%)}
@media (max-width:980px){.fb-bg i{width:100%;bottom:auto;height:360px}
  .fd-build::after{background:radial-gradient(rgba(10,10,10,.5) 1px,transparent 1.5px) 0 0/4px 4px,linear-gradient(180deg,rgba(27,32,39,.5) 0,rgba(27,32,39,.96) 340px)}}
/* Option photo as the configurator's banner */
.cfg-photo{position:relative;margin:-16px -18px 0;height:190px;background-size:cover;background-repeat:no-repeat;animation:cfg-ph .7s cubic-bezier(.2,.7,.2,1)}
.cfg-photo::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(10,10,10,.45) 1px,transparent 1.5px) 0 0/4px 4px,linear-gradient(180deg,rgba(30,36,43,.05) 0%,rgba(30,36,43,.25) 45%,rgba(30,36,43,.98) 100%)}
@keyframes cfg-ph{from{opacity:0;transform:scale(1.04)}}
.fd-build .cfg-photo+.cfg-h{position:relative;margin-top:-52px}
.fd-build .fd-cfg{overflow:hidden}
@media (max-width:600px){.cfg-photo{height:150px}}

/* Search suggestions sit above the tiles (both rows are stacking contexts) */
.finder2>.fd-top{z-index:6}
/* Engine tiles: plain facts with icons, no boxes; the gain is orange or red by size */
.finder2 .tile .fu{display:flex;flex-wrap:wrap;gap:6px 14px}
.finder2 .tile .fu span{display:inline-flex;align-items:center;gap:6px;border:0;padding:0;background:none;border-radius:0;font:11.5px var(--mono);letter-spacing:.04em;text-transform:none;color:#c9d0d7}
.finder2 .tile .fu svg{width:14px;height:14px;flex:none;color:var(--dim)}
.finder2 .tile .fu .up{font-weight:700;width:100%}
.finder2 .tile .fu .up.warm{color:#ffa53d}
.finder2 .tile .fu .up.hot{color:#ff5545}
.finder2 .tile .fu .up svg{color:currentColor}

/* ---------- Finder v9: less blue. White = selected / active, orange = gains and sound, blue only for the order buttons ---------- */
.finder2{--hot:#ff6a2b;--warm:#ffa53d}
.finder2::after{background:radial-gradient(rgba(10,10,10,.45) 1px,transparent 1.5px) 0 0/4px 4px,linear-gradient(90deg,rgba(18,21,26,.9) 0%,rgba(18,21,26,.62) 45%,rgba(18,21,26,.3) 100%),linear-gradient(180deg,rgba(18,21,26,.1),rgba(18,21,26,.55))}
.finder2 .fd-steps li.now{border-color:rgba(255,255,255,.55)}
.finder2 .fd-steps li.now em{background:#fff;color:#111;animation:none}
.finder2 .fd-steps li.done em{background:rgba(255,255,255,.12);color:#fff}
.fd-stepn{color:var(--muted)}
.fd-prog i{background:#fff}
.finder2 .fd-search:focus-within{border-color:rgba(255,255,255,.6)}
.fd-sugg mark{color:#fff;text-decoration:underline;text-underline-offset:3px}
.fd-sugg button.on,.fd-sugg button:hover{background:rgba(255,255,255,.08)}
.fd-sugg small{color:var(--warm)}
.fd-back{color:var(--muted)}
.finder2 .tile:hover{border-color:rgba(255,255,255,.5)}
.tile:hover .kn{background:#fff;border-color:#fff;color:#111}
.tile:hover .ts i{background:#fff;border-color:#fff;color:#111}
.tile.brand:hover .bl{background:#fff}
.tile.brand:hover .bl.txt{border-color:#fff;color:#fff}
.finder2 .stage-tabs .glider{background:#fff}
.finder2 .stage-tabs button.on{color:#0a0a0a}
.fd-stat b .a{color:var(--warm)}
.bar .tuned{background:linear-gradient(90deg,var(--hot),#ffd27a)}
.fb-kick{color:var(--muted)}
.fb-kick::before{background:#fff}
.fb-count.on{border-color:#fff}
.fd-sum span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2)}
.fd-sum span.st{background:#fff;color:#111;border-color:#fff}

/* Option groups */
#fdOpts{display:block}
.og{margin-bottom:14px}
.og h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#cfd5db}
.og h4 span{font-size:10px;color:var(--dim);border:1px solid var(--line-strong);padding:0 5px;border-radius:2px;letter-spacing:0}
.og-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.og-na{margin:4px 0 0;padding-top:10px;border-top:1px dashed var(--line-strong);font-size:12.5px;color:var(--dim);line-height:1.5}
.og-na b{color:var(--muted);font-weight:600;margin-right:4px}
.fd-build .oc .oi{color:#d5dbe1}
.fd-build .oc:hover{border-color:rgba(255,255,255,.5)}
.fd-build .oc:hover .oi{border-color:rgba(255,255,255,.5)}
.fd-build .oc.on{background:rgba(255,255,255,.09);border-color:#fff}
.fd-build .oc.on .oi{background:#fff;border-color:#fff;color:#111}
.fd-build .oc.on .ck{background:#fff;border-color:#fff}
.fd-build .oc.on .ck::after{border-color:#111}
.fd-build .oc.on .cfgd{color:var(--warm)}
.fd-build .oc.cur{outline-color:#fff}
.fd-build .oc em.sn{color:var(--warm);border-color:rgba(255,165,61,.45)}

/* Configurator */
.fd-build .fd-cfg{border-color:var(--line-strong);border-top:3px solid #fff}
.fd-build .fd-cfg.added{border-color:var(--line-strong);border-top-color:var(--warm)}
.fd-build .ci{background:#fff;color:#111}
.cfg-sec{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#cfd5db}
.cfg-sec::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.fd-build .seg button.on,.seg-big button.on{background:#fff;color:#111;border-color:#fff}
.fd-build .rg::after{background:linear-gradient(90deg,var(--hot),#ffd27a);box-shadow:none}
.rg input::-webkit-slider-thumb{background:#fff;border-color:var(--hot)}
.rg input::-moz-range-thumb{background:#fff;border-color:var(--hot)}
.cfg-tog input:checked+span{background:#fff}
.cfg-tog input:checked+span::after{background:#111}
.cfg-foot .ok{color:var(--warm)}

/* Player */
.fd-build .snd{margin:0 -18px 16px;padding:0;background:rgba(10,13,16,.85);border-color:var(--line-strong)}
.snd-head{display:flex;align-items:center;gap:14px;padding:14px 18px 6px}
.fd-build .snd-play{width:56px;height:56px;background:#fff;color:#111;flex:none}
.fd-build .snd-play.on{background:var(--hot);color:#fff}
.snd-t{flex:1;min-width:0}
.snd-t b{display:block;font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;color:#fff;line-height:1}
.snd-t small{display:block;margin-top:4px;font:11.5px var(--mono);color:var(--warm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snd-time{font:600 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.fd-build .snd canvas{height:70px;padding:0 18px;box-sizing:border-box}
.snd-prog{height:3px;margin:2px 18px 4px;background:rgba(255,255,255,.1)}
.snd-prog i{display:block;height:100%;width:0;background:var(--hot)}
.fd-build .snd.live{border-color:var(--line-strong)}
.tach{padding:10px 18px 0}
.tach-read small:first-child{display:block;margin-bottom:3px;letter-spacing:.14em}
.tach-bar .tw{background:rgba(255,165,61,.35);border-color:var(--warm)}
.tach.hit .tw{background:rgba(255,106,43,.75);border-color:#fff}
.tach.hit .tach-read b{color:var(--hot)}
.tach-leg{display:flex;justify-content:flex-end;gap:16px;padding:2px 18px 12px;font:10.5px var(--mono);color:var(--dim)}
.tach-leg span{display:inline-flex;align-items:center;gap:6px}
.tach-leg span::before{content:"";width:12px;height:8px}
.tach-leg .lz::before{background:rgba(255,165,61,.6);border:1px solid var(--warm)}
.tach-leg .lr::before{background:repeating-linear-gradient(45deg,rgba(255,77,77,.7) 0 2px,transparent 2px 4px)}
@media (max-width:600px){.tach-leg{justify-content:flex-start}.og-grid{grid-template-columns:1fr}}
.fd-title small .src{color:var(--dim)}
.fd-title small .src.real{color:#3ee08f;font-weight:600}

/* ---------- File Check (beta): already tuned? ---------- */
.beta{display:inline-block;margin-left:6px;padding:1px 6px;font:700 10px var(--mono);letter-spacing:.12em;color:#111;background:var(--warm,#ffa53d);border-radius:2px;vertical-align:1px}
.fc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
.fc-steps{list-style:none;margin:0;padding:0;counter-reset:fc}
.fc-steps li{position:relative;padding:0 0 18px 48px;counter-increment:fc}
.fc-steps li::before{content:counter(fc,decimal-leading-zero);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;font:600 12px var(--mono);color:#fff;border:1px solid var(--line-strong);background:#15191e}
.fc-steps li:not(:last-child)::after{content:"";position:absolute;left:16px;top:36px;bottom:4px;width:1px;background:var(--line-strong)}
.fc-steps b{display:block;font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase;color:#fff;line-height:1.1}
.fc-steps span{display:block;color:var(--muted);font-size:14.5px;line-height:1.5;margin-top:4px}
.fc-cta{margin-top:6px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fc-cta small{color:var(--dim);font-size:12.5px;max-width:420px}
.fc-demo{border:1px solid var(--line-strong);background:#14181d;padding:14px}
.fc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.fc-head .mono{font-size:11.5px;color:var(--dim)}
.fc-tabs{display:flex;border:1px solid var(--line-strong)}
.fc-tabs button{background:none;border:0;color:var(--muted);padding:7px 14px;font:600 12.5px var(--sans);cursor:pointer}
.fc-tabs button.on{background:#fff;color:#111}
.fc-pane[hidden]{display:none}
.fc-finds{display:grid;gap:8px;margin-top:12px}
.ff{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--line);background:#181c22}
.ff i{width:22px;height:22px;display:grid;place-items:center;font:800 13px var(--sans);font-style:normal;color:#111}
.ff.bad{border-color:rgba(255,77,77,.45)}.ff.bad i{background:#ff4d4d}
.ff.warn{border-color:rgba(255,165,61,.45)}.ff.warn i{background:#ffa53d}
.ff.ok i{background:#3ee08f}
.ff b{display:block;color:#fff;font-size:14px}
.ff span{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-top:2px}
.fc-pane.rep{padding:4px 2px}
/* chart (shared with the dealer panel) */
.lc-svg{display:block;width:100%;height:auto;font-family:var(--mono,monospace)}
.lc-svg .lc-n{fill:#c9d0d7;font-size:10.5px;font-weight:600}
.lc-svg .lc-u{fill:#8b949e;font-size:9.5px}
.lc-svg .lc-ev text{font-size:10px;font-weight:700}
.lc-tip{position:absolute;pointer-events:none;opacity:0;transition:opacity .12s;background:#0b0d10;border:1px solid rgba(255,255,255,.2);padding:7px 9px;font:11px var(--mono,monospace);color:#fff;min-width:150px}
.lc-tip div{display:flex;justify-content:space-between;gap:12px}.lc-tip span{color:#8b949e}
@media (max-width:980px){.fc-grid{grid-template-columns:1fr}}

/* Tighter rhythm: half the vertical space between sections */
section{padding:55px 0}
.final{padding:60px 0}
@media (max-width:760px){section{padding:38px 0}}
.fd-build{padding:16px}
/* File Check: heading in the left column, demo report level with it */
.fc-head-l{margin-bottom:28px}
.fc-grid{align-items:start}

/* v25: latest changelog entry above the hero headline */
.news-pill{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-bottom:18px;padding:6px 12px 6px 6px;border:1px solid var(--line-strong);background:rgba(10,10,10,.55);color:var(--fg);font-size:13.5px;text-decoration:none;transition:border-color .15s}
.news-pill[hidden]{display:none}
.news-pill:hover{border-color:#fff}
.news-pill .np-k{flex:none;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 7px;background:#ffa53d;color:#111}
.news-pill b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.news-pill svg{flex:none;width:14px;height:14px;color:var(--muted)}

/* v26: trust bar under the hero buttons. Compact, sharp, live queue. */
.trust{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:600px;margin-top:28px;border:1px solid var(--line-strong);background:rgba(10,10,10,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:in-up .8s 1.35s cubic-bezier(.2,.8,.2,1) both}
.trust::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#fff 35%,#ffa53d 65%,transparent);background-size:200% 100%;animation:tr-sweep 5s 2s linear infinite}
@keyframes tr-sweep{from{background-position:100% 0}to{background-position:-100% 0}}
.tr{display:flex;flex-direction:column;gap:3px;min-width:0;padding:12px 14px 12px;border-right:1px solid var(--line)}
.tr:last-child{border-right:0}
.tr i{display:block;width:16px;height:16px;margin-bottom:5px;color:var(--dim)}
.tr i svg{width:16px;height:16px}
.tr b{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;letter-spacing:.01em;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.tr b em{font-style:normal;font-size:15px;color:var(--muted);margin-left:3px}
.tr small{font:600 9.5px/1.35 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.tr.live b{color:#3ee08f}
.tr .lv{display:block;width:8px;height:8px;margin:4px;border-radius:50%;background:#3ee08f;box-shadow:0 0 0 0 rgba(62,224,143,.6);animation:tr-live 2s infinite}
@keyframes tr-live{0%{box-shadow:0 0 0 0 rgba(62,224,143,.55)}70%{box-shadow:0 0 0 7px rgba(62,224,143,0)}100%{box-shadow:0 0 0 0 rgba(62,224,143,0)}}
@media (max-width:560px){.trust{grid-template-columns:1fr 1fr}.tr:nth-child(2){border-right:0}.tr:nth-child(-n+2){border-bottom:1px solid var(--line)}.tr b{font-size:26px}}
@media (prefers-reduced-motion:reduce){.trust::before,.tr .lv{animation:none}}

/* v27: news line without a frame; an animated sparkle instead of the "New" tag */
.news-pill{gap:12px;padding:0;border:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;font-size:14px;color:#d8d8d8}
.news-pill:hover{color:#fff}
.news-pill b{font-weight:600;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .3s}
.news-pill:hover b{background-size:100% 1px}
.news-pill svg{transition:transform .2s}
.news-pill:hover>svg{transform:translateX(4px);color:#fff}
.np-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.np-i{position:relative;flex:none;width:22px;height:22px;display:grid;place-items:center}
.np-i svg{width:22px!important;height:22px!important;overflow:visible;color:#ffa53d!important;transform:none!important}
.np-i path{fill:currentColor;transform-box:fill-box;transform-origin:center}
.np-i .s1{animation:np-twinkle 2.8s cubic-bezier(.5,0,.3,1) infinite}
.np-i .s2{opacity:.85;animation:np-twinkle2 2.8s cubic-bezier(.5,0,.3,1) infinite}
.np-i i{position:absolute;inset:3px;border-radius:50%;border:1px solid rgba(255,165,61,.7);animation:np-ping 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.np-i::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(rgba(255,165,61,.35),transparent 65%);animation:np-glow 2.8s ease-in-out infinite}
@keyframes np-twinkle{0%,100%{transform:scale(.82) rotate(0)}12%{transform:scale(1.12) rotate(45deg)}24%{transform:scale(.9) rotate(90deg)}60%{transform:scale(.86) rotate(90deg)}}
@keyframes np-twinkle2{0%,30%{transform:scale(0)}42%{transform:scale(1.2)}55%,100%{transform:scale(0)}}
@keyframes np-ping{0%,8%{transform:scale(.6);opacity:0}14%{opacity:.9}55%,100%{transform:scale(1.9);opacity:0}}
@keyframes np-glow{0%,100%{opacity:.35}14%{opacity:1}}
@media (prefers-reduced-motion:reduce){.np-i .s1,.np-i .s2,.np-i i,.np-i::after{animation:none}.np-i .s2{transform:none}}

/* v28: trust row over the solution cards: icon + text, no box. Absolutely placed so the cards do not move. */
.cards{position:relative}
.trust-row{position:absolute;left:8px;right:16px;bottom:calc(100% + 34px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.trust-row .ti{display:inline-flex;align-items:center;gap:8px;animation:in-up .7s cubic-bezier(.2,.8,.2,1) backwards}
.trust-row .ti:nth-child(1){animation-delay:1.3s}.trust-row .ti:nth-child(2){animation-delay:1.4s}.trust-row .ti:nth-child(3){animation-delay:1.5s}.trust-row .ti:nth-child(4){animation-delay:1.6s}
.trust-row svg{width:17px;height:17px;flex:none;color:#ffa53d}
.trust-row b{color:#fff;font-weight:600}
.trust-row i{font-style:normal;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.trust-row .ti:first-child svg{animation:tr-bolt 3.2s 2.4s ease-in-out infinite}
@keyframes tr-bolt{0%,86%,100%{opacity:1;filter:none}89%{opacity:.35}92%{opacity:1;filter:drop-shadow(0 0 6px rgba(255,165,61,.9))}95%{opacity:.6}}
@media (max-width:980px){.trust-row{position:static;margin:0 0 18px;white-space:normal;gap:10px 20px}}
@media (max-width:560px){.trust-row{display:grid;grid-template-columns:1fr 1fr;font-size:12.5px}.trust-row .ti{align-items:flex-start;flex-wrap:wrap;gap:2px 8px}.trust-row .ti svg{margin-top:1px}}
@media (prefers-reduced-motion:reduce){.trust-row .ti,.trust-row .ti:first-child svg{animation:none}}
@media (max-width:980px){.trust-row{order:-1;grid-column:1/-1}}
/* The boxed trust panel left the left column; keep the cards exactly where they were. */
@media (min-width:981px){.cards{top:13px}}
@media (min-width:981px) and (max-width:1320px){.trust-row{font-size:12.5px;gap:8px 16px}.trust-row .ti{gap:6px}.trust-row svg{width:15px;height:15px}}

/* v32: one line at the top of the hero: news on the left, trust row on the right edge of the cards.
   The trust row hangs off the left column into the right one (column ratio 1.42 / .58 = 244.83 %), so it never moves the cards. */
.hero-top{position:relative;min-height:22px;margin-bottom:18px;display:flex;align-items:center}
.hero-top .news-pill{margin-bottom:0}
.hero-top .trust-row{position:absolute;bottom:auto;top:50%;transform:translateY(-50%);left:calc(100% + clamp(28px,2.6vw,48px));right:auto;width:calc(244.83% - 16px);justify-content:flex-end}
@media (max-width:980px){
  .hero-top{flex-wrap:wrap;gap:12px}
  .hero-top .trust-row{position:static;transform:none;width:100%;justify-content:flex-start;margin:0}
}
@media (max-width:980px){.hero-top .trust-row{order:1;grid-column:auto}}

/* ---------- Homepage 2026-11-11: live map background, price cards, hardware, price, request dialog ---------- */
.hero-bg.live{background:none;filter:none;transform:none;animation:in-live 1.6s ease both}
@keyframes in-live{from{opacity:0}to{opacity:1}}
.hero-bg.live::after{background:linear-gradient(90deg,rgba(10,10,10,.8) 0%,rgba(10,10,10,.3) 40%,rgba(10,10,10,.05) 100%),linear-gradient(180deg,rgba(10,10,10,0) 78%,var(--bg) 100%)}
.hero-bg.live canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-bg.live::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1.4px) 0 0/22px 22px}
.sprice{position:absolute;left:10%;top:5%;z-index:2;transform:skewX(7deg);display:flex;flex-direction:column;line-height:1;padding:8px 10px;background:rgba(10,10,10,.72);border:1px solid var(--accent-line);backdrop-filter:blur(4px)}
.sprice small{font:600 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text);margin-bottom:4px}
.sprice b{font-family:var(--display);font-weight:900;font-size:clamp(22px,2vw,32px);color:#fff;letter-spacing:.01em}
.fd-hw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin:14px 0 4px;padding:14px 16px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.hw-row{display:flex;flex-direction:column;gap:6px;min-width:0}
.hw-l{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hw-seg{display:flex;border:1px solid var(--line-strong);flex-wrap:wrap}
.hw-seg button{flex:1;background:none;border:0;border-right:1px solid var(--line-strong);color:var(--muted);padding:8px 8px;font:600 13px var(--sans);cursor:pointer;white-space:nowrap}
.hw-seg button:last-child{border-right:0}
.hw-seg button.on{background:#fff;color:#0a0a0a}
.hw-ind{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;cursor:pointer;padding-top:6px;border-top:1px solid var(--line-quiet)}
.hw-ind input{position:absolute;opacity:0;pointer-events:none}
.hw-ind>span{grid-row:1/3;width:38px;height:22px;border-radius:11px;background:var(--surface3);position:relative;transition:background .2s}
.hw-ind>span::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.hw-ind input:checked+span{background:var(--accent)}
.hw-ind input:checked+span::after{left:19px}
.hw-ind input:focus-visible+span{outline:2px solid var(--accent-text);outline-offset:2px}
.hw-ind b{color:#fff;font-size:14px}.hw-ind small{color:var(--muted);font-size:12.5px}
.hw-ind.locked{cursor:default;opacity:.85}
.hw-note{grid-column:1/-1;color:var(--dim);font-size:12px}
.fd-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 6px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fd-price .pl{color:var(--muted);font-size:13px;line-height:1.5}
.fd-price .pl i{font-style:normal;color:#fff;font-family:var(--mono)}
.fd-price>b{font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:#fff}
.fd-go{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fd-dealer{font-size:13px;color:var(--muted)}.fd-dealer:hover{color:#fff}
.cfg-legal{font-size:12.5px;line-height:1.5;color:var(--warn);border-left:2px solid var(--warn);padding:6px 10px;margin:10px 0}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.retail{margin-bottom:56px}
.retail .amt small{font:600 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.optprices{list-style:none}
.optprices li{display:flex;justify-content:space-between;gap:10px}
.optprices li::before{display:none}
.optprices li b{font-family:var(--mono);color:#fff}
.sec-head.dealers{margin-top:8px}
.sec-head .h3{font-size:clamp(28px,3vw,42px);line-height:1}
/* request dialog */
.qdlg{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 24px;border:1px solid var(--line-strong);background:var(--bg1);color:var(--fg)}
.qdlg::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.qdlg h3{font-size:34px;text-transform:uppercase;color:#fff;margin-bottom:10px}
.qx{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--muted);font-size:28px;cursor:pointer}
.qsum{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px;border:1px solid var(--accent-line);background:var(--accent-soft);margin-bottom:14px}
.qsum b{color:#fff}.qsum span{grid-column:1;color:var(--muted);font-size:13px}.qsum em{grid-row:1/3;grid-column:2;align-self:center;font-style:normal;font-family:var(--display);font-weight:900;font-size:30px;color:#fff}
.qlead{color:var(--muted);font-size:14px;margin-bottom:12px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qdlg label>span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.qdlg input:not([type=radio]):not([type=checkbox]),.qdlg textarea{width:100%;background:var(--surface);border:1px solid var(--line-strong);color:#fff;padding:10px 12px;font:15px var(--sans)}
.qdlg input:focus,.qdlg textarea:focus{outline:2px solid var(--accent);outline-offset:0}
.qflash{border:0;margin:14px 0 4px;display:grid;gap:6px}
.qflash legend{font-size:12px;color:var(--muted);margin-bottom:6px}
.qflash label,.qconsent{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.qflash label span,.qconsent span{display:inline;color:#ddd;font-size:14px;margin:0}
.qconsent a{color:var(--accent-text);text-decoration:underline}
.qmsg{display:block;margin:10px 0}
.qhp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.qerr{color:var(--bad);font-size:13px;min-height:18px;margin:8px 0}
.qdone b{color:#fff;font-size:18px}.qdone p{color:var(--muted);margin:8px 0 16px}
@media (max-width:760px){.fd-hw{grid-template-columns:1fr}.fd-go{align-items:stretch}.qgrid{grid-template-columns:1fr}.fd-price>b{font-size:34px}}

/* ---------- Homepage pass 2: price badges, motto ---------- */
.sprice{left:9%;top:4.5%;padding:9px 14px 10px 12px;background:linear-gradient(135deg,rgba(8,10,14,.86),rgba(22,36,54,.72));border:1px solid rgba(255,255,255,.12);border-left:3px solid var(--accent);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.85);backdrop-filter:blur(6px);transition:background .35s,border-color .35s,box-shadow .35s}
.sprice small{font:700 9.5px var(--mono);letter-spacing:.18em;color:var(--accent-text);margin-bottom:2px}
.sprice b{display:flex;align-items:flex-start;gap:2px;font-size:clamp(28px,2.4vw,40px);line-height:.95}
.sprice b sup,.retail .amt sup{font-size:.46em;line-height:1;margin-top:.18em;color:var(--accent-text);font-weight:800}
.scard:hover .sprice,.scard.peek .sprice{background:linear-gradient(135deg,#5B9BD5,#7FB3E0);border-color:#9CC9EE;box-shadow:0 16px 40px -10px rgba(91,155,213,.7)}
.scard:hover .sprice small,.scard:hover .sprice b,.scard:hover .sprice sup,.scard.peek .sprice small,.scard.peek .sprice b,.scard.peek .sprice sup{color:#06121F}
.retail .amt{display:flex;align-items:baseline;gap:8px}
.retail .amt span[data-price]{display:inline-flex;align-items:flex-start;gap:2px}
.hero .lead.motto{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,1.6vw,24px);color:#fff}

/* ---------- Staggered Six logo (2026-11-11): VR6 icon + capital wordmark that decodes from its 13 bytes ---------- */
.logo .s6-ic{display:inline-flex;width:24px;height:24px;flex:none;animation:s6-ic .6s cubic-bezier(.2,.8,.2,1) .4s both}
.logo .s6-ic svg{width:100%;height:100%}
@keyframes s6-ic{from{opacity:0;transform:scale(.6) rotate(-12deg)}}
.logo .lm{--lh:17px;top:0}
.lm .lc b{left:calc((var(--i) + .5) * 100% / var(--n,6));height:var(--lh);font-size:calc(var(--lh) * .72)}
.logo .rm-logo{height:20px}
footer .logo .rm-logo{height:26px}

/* ---------- Owner's logo (icon + staggeredsix.com) and sharp cards, 2026-11-11 ---------- */
.logo .s6-ic{width:auto;height:22px}
.logo .s6-ic svg{width:auto;height:100%}
.logo .lm{--lh:21px;top:1px}
.logo .rm-logo{height:22px}
footer .logo .rm-logo{height:30px}
/* cards: sharp corners, crisp edges */
.scard,.scard .sinfo,.scard .shine,.scard img{border-radius:0!important}
.scard .slabel,.scard .sprice{border-radius:0}
.scard img{image-rendering:auto;backface-visibility:hidden}

/* ---------- Michroma wordmark (owner's choice): icon 1.75x the capitals, text centred on it ---------- */
.logo{gap:11px}
.logo .s6-ic{height:19px}
.logo .lm{--lh:11px;top:0}
@media (max-width:700px){
  .logo{gap:8px}
  .logo .s6-ic{height:14px}
  .logo .lm{--lh:8px}
  .logo .lm .lc:nth-last-child(-n+4){display:none}     /* ".COM" hidden on phones: the bar is narrow */
}
.logo .rm-logo{height:24px}
footer .logo .rm-logo{height:34px}
footer .logo{max-width:100%}
footer .logo .rm-logo{max-width:100%;height:auto;max-height:28px;width:auto}
@media (max-width:700px){footer .logo .rm-logo{width:85%;max-height:none}}

/* ---------- First card: ECU Tuning, best seller ---------- */
.sbadge{position:absolute;left:9%;top:calc(4.5% + 72px);z-index:3;transform:skewX(7deg);padding:5px 9px;background:#ffa53d;color:#1a0d00;font:800 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 22px -8px rgba(255,165,61,.8)}
.slabel .ssub{display:block;margin-top:5px;font:600 10px var(--mono);letter-spacing:.14em;color:var(--accent-text);text-transform:uppercase}
.ribbon.best{left:auto;right:16px;background:#ffa53d;color:#1a0d00}

/* Best seller: hot gradient with a sweeping shine */
.sbadge,.ribbon.best{background:linear-gradient(100deg,#ff2d6f 0%,#ff6a3d 55%,#ffb13d 100%);color:#fff;text-shadow:0 1px 2px rgba(80,0,20,.45);
  box-shadow:0 0 0 1px rgba(255,120,90,.5),0 10px 28px -6px rgba(255,60,100,.75);overflow:hidden;isolation:isolate}
.sbadge::after,.ribbon.best::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:best-shine 3.2s ease-in-out 1.5s infinite}
@keyframes best-shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.sbadge::after,.ribbon.best::after{animation-duration:9s}}

/* Soft drop shadow behind price and best seller; nav bytes as tall as the letters */
.sprice{box-shadow:0 10px 26px -6px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.5)}
.sbadge{box-shadow:0 0 0 1px rgba(255,120,90,.5),0 8px 20px -4px rgba(0,0,0,.7),0 10px 28px -6px rgba(255,60,100,.6)}
.logo .lm .lc b{height:var(--lh);font-size:calc(var(--lh) * 1.36);line-height:1}

/* badge hangs under the price box, whatever its height */
.sprice .sbadge{left:-3px;top:calc(100% + 8px);transform:none;white-space:nowrap}

/* v53: the top-right segment is one item: live delivery time with a green icon. */
.trust-row .ti.ti-live svg{color:#3ee08f;animation:tr-live-ic 2.4s 2s ease-in-out infinite}
@keyframes tr-live-ic{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px rgba(62,224,143,.75))}}
@media (max-width:560px){.trust-row .ti-live{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.trust-row .ti-live svg{animation:none}}

/* v54: phones. The four solution cards sit side by side in one row on the first screen; the news line says it is news. */
@media (max-width:640px){
  .hero{padding:28px 0 40px}
  .hero-top{margin-bottom:14px}
  .hero .lead{font-size:16px;line-height:1.5}
  .hero-cta{margin-top:20px;gap:8px}
  .hero-cta .btn{padding:12px 16px;font-size:14px}
  .cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:0 6px 0 2px;margin-top:22px}
  .scard:nth-child(n){margin-top:0}
  .scard:nth-child(even){margin-top:12px}
  .scard{aspect-ratio:320/580;border-width:1px}
  .sprice{left:7%;top:5%;padding:4px 6px 5px 5px;border-left-width:2px;box-shadow:0 6px 14px -6px rgba(0,0,0,.8)}
  .sprice small{font-size:6.5px;letter-spacing:.1em;margin-bottom:1px}
  .sprice b{font-size:17px}
  .sbadge{left:7%;top:calc(5% + 36px);padding:2px 4px;font-size:6px;letter-spacing:.06em;box-shadow:none}
  .slabel{left:6%;right:6%;bottom:5%;max-width:none;padding:4px 5px;font-size:10px;line-height:1.05;letter-spacing:.01em;word-break:break-word}
  .slabel .ssub{display:none}
  .news-pill{gap:8px;font-size:13px}
  .news-pill .np-sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;flex:none;font:700 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:3px 6px;background:#ffa53d;color:#111}
  .news-pill b{white-space:normal;line-height:1.3}
  .scroll-cue{display:none}
}

/* v55: one hero button; a tuning icon in front of its label (the arrow after it still slides on hover). */
.btn-hero .ni-lead,.btn-hero:hover .ni-lead{transform:none}
.btn-hero .ni-lead{width:19px;height:19px}

/* v56: plain, flat primary button: one solid colour, no gradient, glow or moving shine. */
.btn-hero{background:var(--accent);box-shadow:none;border-radius:4px;border:1px solid var(--accent);transition:background .15s,border-color .15s}
.btn-hero::after{content:none;animation:none}
.btn-hero:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:none;transform:none}
.btn-hero:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* v57: the ECU Tuning photo is a dark engine shot; the shared card filter would make it muddy. */
.scard img[src*="ecu-tuning"]{filter:saturate(.85) contrast(1.12) brightness(1.18)}
.scard:hover img[src*="ecu-tuning"],.scard.peek img[src*="ecu-tuning"]{filter:saturate(1.1) contrast(1.15) brightness(1.3)}

/* v58: white navigation. Logo left, links centred, on the right one block in our blue with search, account and cart. */
nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid #e6e8ec;color:#111418}
nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;height:60px}
nav .logo{justify-self:start;color:#0b0d12}
nav .logo [fill="#ffffff"]{fill:#0b0d12}
nav .logo [stroke="#ffffff"]{stroke:#0b0d12}
nav .logo .lm{animation:none}
nav .lm .lc b{color:#2f6db0;text-shadow:none}
.nav-links{justify-self:center;color:#3b4250}
.nav-links a:hover{color:#0b0d12;background:#f1f3f6}
.nav-links a:hover .ni,.nav-links a.on .ni{color:var(--accent)}
.nav-links a.on{color:#0b0d12;background:#eaf2fa}
.nav-links .ni{color:#8a919c}
.nav-right{justify-self:end;margin-left:0;height:100%;gap:10px}
nav .lang{border-color:#d9dce1;color:#111418;background:#fff}
nav .lang option{background:#fff;color:#111418}
nav .burger{color:#111418;border-color:#d9dce1;background:#fff}
/* The blue block runs from the icons to the right edge of the screen. */
.nav-act{position:relative;display:flex;align-items:stretch;height:100%;background:var(--accent);padding:0 6px}
.nav-act::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:100vw;background:var(--accent)}
.na-btn{position:relative;display:grid;place-items:center;width:46px;height:100%;background:none;border:0;color:#fff;cursor:pointer;transition:background .15s}
.na-btn .ni{width:20px;height:20px;color:#fff}
.na-btn:hover,.na-btn[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.na-btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.na-n{position:absolute;top:11px;right:7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#fff;color:var(--accent);font:800 10.5px/17px var(--mono);font-style:normal;text-align:center}
.na-n[hidden]{display:none}
.na-pop{position:absolute;top:100%;right:0;z-index:60;background:#fff;color:#111418;border:1px solid #e1e4e8;border-top:3px solid var(--accent);box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
.na-pop[hidden]{display:none}
.na-search{display:flex;width:min(380px,calc(100vw - 32px))}
.na-search input{flex:1;min-width:0;border:0;padding:14px 16px;font-size:15px;color:#111418;background:#fff;outline:none}
.na-search button{width:50px;border:0;background:var(--accent);color:#fff;cursor:pointer}
.na-search button .ni{width:19px;height:19px;color:#fff}
.na-cart{width:min(340px,calc(100vw - 32px));padding:18px}
.cb-car{font-weight:700;font-size:15px;margin-bottom:10px}
.cb-items{list-style:none;display:grid;gap:6px;font-size:13.5px;color:#3b4250}
.cb-items li,.cb-total{display:flex;justify-content:space-between;gap:12px}
.cb-items b{font-weight:600;color:#111418}
.cb-total{margin-top:12px;padding-top:12px;border-top:1px solid #e6e8ec;font-weight:700}
.cb-go{display:flex;width:100%;margin-top:14px;justify-content:center}
.cb-x{display:block;margin:10px auto 0;background:none;border:0;color:#6b7280;font-size:13px;cursor:pointer;text-decoration:underline}
.cb-note{margin-top:10px;font-size:12px;line-height:1.45;color:#6b7280}
.cb-empty{color:#3b4250;font-size:14px}
@media (max-width:1000px){
  nav .wrap{grid-template-columns:auto 1fr}
  .nav-links.open{background:#fff;border-bottom:1px solid #e6e8ec;top:60px}
  .nav-links.open a{color:#111418}
}
@media (max-width:600px){
  nav .wrap{gap:10px}
  .nav-right{gap:6px}
  nav .lang{padding:6px 6px;font-size:13px}
  .na-btn{width:40px}
  .nav-act{padding:0 2px}
}

/* v59: phones keep only search and cart in the blue block; Login / Register moves into the menu. */
.nl-login{display:none!important}
@media (max-width:1000px){.nav-links.open .nl-login{display:inline-flex!important;margin-top:6px;font-weight:700;color:var(--accent)!important}}
@media (max-width:600px){
  .na-user{display:none}
  nav .burger{width:36px;height:36px}
  nav .lang{padding:5px 4px}
}

/* v60: page background #091019 (deep navy) everywhere on the public site. */
:root{--bg:#091019;--bg1:#0c1520}
body{background:#091019}

/* v61: top bar above the navigation, no background. Left: round white social icons (icon in the page colour) + Discord hotline in yellow.
   Right: language, account, news. */
.topbar{position:relative;z-index:51;background:transparent;color:#fff;font-size:13px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px}
.tb-left,.tb-right{display:flex;align-items:center;gap:8px}
.tb-soc{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#091019;transition:transform .15s,background .15s}
.tb-soc svg{width:15px;height:15px}
.tb-soc:hover{transform:translateY(-1px);background:#dfe9f5}
.tb-hot{display:inline-flex;align-items:center;gap:7px;margin-left:10px;color:#FFD23F;font-weight:700;letter-spacing:.02em}
.tb-hot svg{width:22px;height:22px}
.tb-hot:hover{color:#ffe27a}
.tb-lang{display:inline-flex;align-items:center;gap:6px;color:#c9d3df;cursor:pointer}
.tb-lang svg{width:16px;height:16px}
.topbar .lang{background:transparent;border:0;color:#fff;font-size:13px;padding:4px 2px;cursor:pointer}
.topbar .lang option{background:#091019;color:#fff}
.tb-acc{display:inline-flex;align-items:center;gap:7px;margin-left:10px;padding:5px 10px;color:#fff;font-weight:600}
.tb-acc svg{width:17px;height:17px}
.tb-acc:hover,.tb-news:hover{color:var(--accent-text)}
.tb-news{position:relative;display:grid;place-items:center;width:32px;height:32px;color:#fff}
.tb-news svg{width:19px;height:19px}
.tb-dot{position:absolute;top:5px;right:4px;width:8px;height:8px;border-radius:50%;background:#FFD23F;box-shadow:0 0 0 2px #091019}
.tb-dot[hidden]{display:none}
@media (max-width:600px){
  .topbar .wrap{gap:8px;height:42px}
  .tb-left{gap:5px}
  .tb-soc{width:24px;height:24px}.tb-soc svg{width:13px;height:13px}
  .tb-hot{margin-left:4px}.tb-hot span{display:none}
  .tb-lang svg{display:none}
  .tb-acc{margin-left:0;padding:4px}.tb-acc span{display:none}
  .tb-right{gap:2px}
}

/* The blue block reaches the screen edge without widening the page. */
nav{overflow-x:clip}

/* v63: more room left and right for all content (nav and top bar stay aligned with it). */
.wrap{padding-left:clamp(32px,6vw,120px);padding-right:clamp(32px,6vw,120px)}
@media (max-width:600px){.wrap{padding-left:22px;padding-right:22px}}

/* v64: a bit more side room still. */
.wrap{padding-left:clamp(40px,8vw,160px);padding-right:clamp(40px,8vw,160px)}
@media (max-width:600px){.wrap{padding-left:26px;padding-right:26px}}

/* v65: the white navigation is a box exactly as wide as the content (same side room); the blue block ends at its right edge. */
:root{--side:clamp(40px,8vw,160px)}
@media (max-width:600px){:root{--side:26px}}
.wrap{padding-left:var(--side);padding-right:var(--side)}
nav{background:transparent;border-bottom:0;padding:0 var(--side)}
nav .wrap{background:#fff;padding-left:20px;padding-right:0;border-bottom:1px solid #e6e8ec}
.nav-act::after{content:none}
@media (max-width:1000px){.nav-links.open{left:var(--side);right:var(--side)}}
@media (max-width:600px){nav .wrap{padding-left:12px}}

/* v66: soft corners on the white navigation (the blue block follows the right corners); more air in the top bar. */
nav .wrap{border-radius:8px}
.nav-act{border-radius:0 8px 8px 0}
nav .wrap{border-bottom:0}
.topbar .wrap{height:auto;padding-top:12px;padding-bottom:12px}
@media (max-width:600px){.topbar .wrap{padding-top:10px;padding-bottom:10px}}

/* v67: Manrope for all text (self-hosted, fonts/fonts.css); bolder links in the white navigation;
   a thin sale strip under the navigation, as wide as it. */
:root{--sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif}
body{font-family:var(--sans)}
.nav-links{font-weight:600}
.promo{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;margin-top:8px;padding:0 14px;
  background:#070d12;border:1px solid #1d2b39;border-radius:8px;color:#dfe7f0;font-size:13px;letter-spacing:.01em}
.promo svg{width:16px;height:16px;flex:none;color:#FFD23F;filter:drop-shadow(0 0 6px rgba(255,210,63,.45))}
.promo b{color:#FFD23F;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
@media (max-width:600px){.promo{height:32px;margin-top:6px;font-size:12.5px}}

/* v68 */
/* Navigation: search is a plain white button; only the cart sits on the blue, a darker blue that reads well against white. */
:root{--nav-blue:#2563a8;--nav-blue-hover:#1d5491}
.nav-act{background:transparent;padding:0}
#navSearchBtn{color:#1d2430}
#navSearchBtn .ni{color:#1d2430}
#navSearchBtn:hover,#navSearchBtn[aria-expanded="true"]{background:#f1f3f6}
#navCartBtn{width:60px;background:var(--nav-blue);border-radius:0 8px 8px 0}
#navCartBtn:hover,#navCartBtn[aria-expanded="true"]{background:var(--nav-blue-hover)}
.na-n{color:var(--nav-blue)}
.na-pop{border-top-color:var(--nav-blue)}
.na-search button{background:var(--nav-blue)}
nav .logo [fill="#4F8DFF"]{fill:var(--nav-blue)}
.nav-links a:hover .ni,.nav-links a.on .ni{color:var(--nav-blue)}
.nav-links a.on{background:#e8f0f9}
@media (max-width:600px){#navCartBtn{width:48px}}

/* Solution cards: same look as the sale strip (dark #070d12, lighter border) and a drop shadow. */
.scard{background:#070d12;border:1px solid #1d2b39;border-radius:8px!important;box-shadow:0 26px 50px -14px rgba(0,0,0,.85),0 6px 16px -6px rgba(0,0,0,.6)}
.scard img,.scard .sinfo,.scard .shine{border-radius:7px!important}
.sprice,.slabel{background:#070d12;border:1px solid #1d2b39;border-radius:6px!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.sprice{border-left:1px solid #1d2b39}
.scard:hover .sprice,.scard.peek .sprice{background:#070d12;border-color:#2b3d50;box-shadow:0 14px 30px -10px rgba(0,0,0,.8)}
.scard:hover .sprice small,.scard:hover .sprice b,.scard:hover .sprice sup,.scard.peek .sprice small,.scard.peek .sprice b,.scard.peek .sprice sup{color:inherit}
.scard:hover .sprice b,.scard.peek .sprice b{color:#fff}
.scard:hover .sprice small,.scard:hover .sprice sup,.scard.peek .sprice small,.scard.peek .sprice sup{color:var(--accent-text)}

/* 3D map behind the hero: more transparent. */
.hero-bg.live canvas{opacity:.55}

/* v69: the solution cards sit in one framed box like the sale strip (dark bg, lighter border, shadow), and the whole block is a bit smaller. */
@media (min-width:1001px){.hero-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.cards{justify-self:end;width:100%;max-width:820px;top:0!important;padding:28px 26px 30px;gap:clamp(10px,1vw,14px);
  background:#070d12;border:1px solid #1d2b39;border-radius:10px;box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 8px 20px -8px rgba(0,0,0,.6)}
.scard{box-shadow:0 14px 28px -12px rgba(0,0,0,.8)}
@media (max-width:1000px){.cards{justify-self:stretch;max-width:none;margin-top:28px}}
@media (max-width:640px){.cards{padding:14px 10px 16px;gap:6px;border-radius:8px}}

/* v71: the whole hero (headline, text, button and cards) is one framed box like the sale strip, with the live 3D map as its background. */
.hero{min-height:0;padding:22px 0 56px}
.hero > .hero-grid{width:auto;margin:0 var(--side);padding:clamp(28px,4vw,56px) clamp(24px,3.4vw,52px);overflow:hidden;
  background:#070d12;border:1px solid #1d2b39;border-radius:10px;box-shadow:0 30px 60px -18px rgba(0,0,0,.85),0 8px 20px -8px rgba(0,0,0,.6)}
.hero-grid > :not(.hero-bg){position:relative;z-index:1}
.hero-grid > .hero-bg{inset:0;z-index:0;border-radius:inherit}
.hero-bg.live::after{background:linear-gradient(90deg,rgba(7,13,18,.85) 0%,rgba(7,13,18,.35) 45%,rgba(7,13,18,.1) 100%)}
/* The cards no longer need their own frame inside the box. */
.cards{background:none;border:0;box-shadow:none;padding:6px 4px 10px;max-width:none}
@media (min-width:1001px){.hero-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
@media (max-width:640px){.hero > .hero-grid{padding:24px 16px 20px}.cards{padding:4px 0 6px}}
.scroll-cue{display:none}

/* v72: the hero box always spans the same width as the navigation (it is a flex item, so it must grow), and less room on top. */
.hero{padding-top:12px}
.hero > .hero-grid{flex:1 1 auto;min-width:0;padding-top:clamp(20px,2.6vw,34px)}
@media (max-width:640px){.hero{padding-top:8px}.hero > .hero-grid{padding-top:18px}}

/* v73: bigger cards (more of the box goes to the card column). */
@media (min-width:1001px){.hero-grid{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr);gap:clamp(20px,2vw,36px)}.cards{padding:4px 0 8px}}

/* v74: tighter top. */
.hero{padding-top:8px}
.hero > .hero-grid{padding-top:clamp(14px,1.6vw,22px)}
@media (max-width:640px){.hero{padding-top:6px}.hero > .hero-grid{padding-top:14px}}

/* v75: navigation logo without ".com" and without the byte-decode letters; the logo mark itself is animated instead:
   the six staggered bars slide in one after another, then a blue "gear shift" wave runs through them every few seconds. */
nav .logo .lm .lc:nth-last-child(-n+4){display:none}
nav .logo .lm .lc b{display:none}
nav .logo .lm svg{opacity:1;animation:none;filter:none;transform:none}
nav .logo .s6-ic{animation:none}
nav .logo .s6-ic path{transform-box:fill-box;transform-origin:left center;
  animation:s6-in .5s cubic-bezier(.2,.8,.2,1) both,s6-wave 6s ease-in-out 2.2s infinite}
nav .logo .s6-ic path:nth-child(1){animation-delay:.10s,2.20s}
nav .logo .s6-ic path:nth-child(2){animation-delay:.18s,2.28s}
nav .logo .s6-ic path:nth-child(3){animation-delay:.26s,2.36s}
nav .logo .s6-ic path:nth-child(4){animation-delay:.34s,2.44s}
nav .logo .s6-ic path:nth-child(5){animation-delay:.42s,2.52s}
nav .logo .s6-ic path:nth-child(6){animation-delay:.50s,2.60s}
@keyframes s6-in{from{opacity:0;transform:translateX(-35%) scaleX(.6)}to{opacity:1;transform:none}}
@keyframes s6-wave{0%,14%,100%{fill:#0b0d12;stroke:#0b0d12;transform:none}5%{fill:var(--nav-blue);stroke:var(--nav-blue);transform:translateX(6%)}}
nav .logo:hover .s6-ic path{animation:s6-in .5s cubic-bezier(.2,.8,.2,1) both,s6-wave 1.2s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){nav .logo .s6-ic path{animation:none}}

/* v76: new solution cards (Performance / Ultimate / Options / File Check). Headline on top, the four cards in a row below it,
   all inside the hero box. Each card: kicker, title, line, photo in the middle (faded into the card), key figure, price, button. */
.hero > .hero-grid{grid-template-columns:minmax(0,1fr)!important;align-items:start}
.hero-grid > div:first-of-type{max-width:760px}
.cards.pcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:6px;padding:0;background:none;border:0;box-shadow:none;max-width:none;top:0}
.pcard{--c:#4F8DFF;position:relative;display:flex;flex-direction:column;min-width:0;padding:20px 18px 18px;background:#070d12;
  border:1px solid color-mix(in srgb,var(--c) 45%,#1d2b39);border-radius:12px;overflow:hidden;color:#fff;text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 26px -12px var(--c),0 22px 44px -18px rgba(0,0,0,.9);transition:transform .2s,box-shadow .2s,border-color .2s}
.pcard.pc2{--c:#9b6bff}.pcard.pc3{--c:#ff8a3d}.pcard.pc4{--c:#2fd08a}
.pcard:hover,.pcard:focus-visible{transform:translateY(-4px);border-color:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 34px -8px var(--c),0 28px 50px -18px rgba(0,0,0,.95);outline:none}
.pc-k{display:flex;align-items:center;gap:7px;min-height:18px;font:700 11.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93a4b8}
.pc-k.gold{color:#FFC83D;font-style:italic}
.pc-k svg{width:17px;height:17px;flex:none}
.pc-t{margin:10px 0 0;font:800 clamp(19px,1.55vw,24px)/1.12 var(--sans);letter-spacing:-.01em;color:#fff}
.pc-s{margin:8px 0 0;font-size:13.5px;line-height:1.45;color:#b4c0cd;min-height:2.9em}
.pc-img{position:relative;display:block;height:clamp(120px,10.5vw,170px);margin:14px -18px 4px}
.pc-img img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.95) contrast(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 70%,transparent 100%)}
.pc-stat{display:flex;align-items:center;gap:10px;margin-top:6px}
.pc-stat>svg{width:24px;height:24px;flex:none;color:var(--c)}
.pc-stat b{display:block;font:800 19px/1.1 var(--sans);color:#fff}
.pc-stat small{display:block;font-size:12.5px;color:#93a4b8}
.pc-price{display:flex;align-items:baseline;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid #16222e}
.pc-price small{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93a4b8}
.pc-price b{font-family:var(--display);font-weight:900;font-size:30px;line-height:1;color:#fff}
.pc-price b sup{font-size:.5em;vertical-align:top;margin-right:1px;color:var(--c)}
.pc-btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;height:42px;border:1px solid var(--c);border-radius:10px;
  font-size:14px;font-weight:700;color:#fff;transition:background .15s}
.pc-btn svg{width:16px;height:16px;transition:transform .2s}
.pcard:hover .pc-btn{background:color-mix(in srgb,var(--c) 18%,transparent)}
.pcard:hover .pc-btn svg{transform:translateX(3px)}
@media (max-width:1100px) and (min-width:641px){.cards.pcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: the four cards sit side by side and swipe. */
@media (max-width:640px){
  .cards.pcards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:18px -16px 0;padding:2px 16px 10px;scrollbar-width:none}
  .cards.pcards::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 76%;scroll-snap-align:start;padding:18px 16px 16px}
  .pc-img{margin:12px -16px 4px;height:130px}
}
@media (prefers-reduced-motion:reduce){.pcard,.pc-btn svg{transition:none}}

/* Align photo, figure, price and button across the four cards even when a title wraps. */
.pc-s{flex:1 0 auto}

/* v78: cards beside the headline again, staggered up/down like before, no glow, and they fly together on page load.
   Photos melt into the card on all sides; figure and price centred; a proper Learn more button. */
@media (min-width:1101px){
  .hero > .hero-grid{grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr)!important;align-items:center}
  .hero-grid .h1{font-size:clamp(46px,4.6vw,74px)}
}
.cards.pcards{gap:14px;margin-top:0;align-items:start;padding:10px 0 34px}
.pcard{border:1px solid #1d2b39;box-shadow:0 22px 44px -18px rgba(0,0,0,.9);padding:18px 16px 16px}
.pcard:hover,.pcard:focus-visible{border-color:#2c4054;box-shadow:0 28px 52px -18px rgba(0,0,0,.95)}
@media (min-width:641px){
  .pcard:nth-child(1){margin-top:30px}.pcard:nth-child(2){margin-top:0}.pcard:nth-child(3){margin-top:44px}.pcard:nth-child(4){margin-top:14px}
}
/* Fly together on load (each card from its own direction), like the old cards. */
.pcard{animation:pc-in 1s cubic-bezier(.16,.84,.24,1) backwards}
.pcard:nth-child(1){--fx:-90%;--fy:30%;--fr:-10deg;animation-delay:.35s}
.pcard:nth-child(2){--fx:20%;--fy:-70%;--fr:8deg;animation-delay:.5s}
.pcard:nth-child(3){--fx:-30%;--fy:70%;--fr:-6deg;animation-delay:.65s}
.pcard:nth-child(4){--fx:100%;--fy:-20%;--fr:12deg;animation-delay:.8s}
@keyframes pc-in{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.6);filter:blur(8px)}}
@media (prefers-reduced-motion:reduce){.pcard{animation:none}}
/* Compact type for the narrower cards beside the headline. */
.pc-k{font-size:10.5px;letter-spacing:.12em}
.pc-t{font-size:clamp(16px,1.3vw,20px);margin-top:9px}
.pc-s{font-size:12.5px;line-height:1.42;margin-top:6px}
/* Photo: full bleed, fading out on every side into the card so there is no edge. */
.pc-img{height:clamp(110px,9.5vw,150px);margin:10px -16px 0}
.pc-img::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 50%,transparent 45%,#070d12 100%);pointer-events:none}
.pc-img img{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 100%),linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
/* Figure and price, centred. */
.pc-stat{justify-content:center;text-align:left;margin-top:2px}
.pc-stat b{font-size:17px}
.pc-price{justify-content:center;margin-top:10px;padding-top:10px}
.pc-price b{font-size:28px}
/* Learn more: a solid, quiet button with the card colour in a round arrow. */
.pc-btn{position:relative;height:40px;margin-top:12px;padding:0 6px 0 16px;justify-content:space-between;border:1px solid rgba(255,255,255,.12);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));font-size:13px;font-weight:700;letter-spacing:.01em;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transition:background .2s,border-color .2s}
.pc-btn svg{box-sizing:content-box;width:14px;height:14px;padding:7px;border-radius:50%;background:var(--c);color:#06121F;transition:transform .25s}
.pcard:hover .pc-btn{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.22)}
.pcard:hover .pc-btn svg{transform:translateX(2px) rotate(-45deg)}
@media (max-width:640px){.pcard{animation:none}.pc-img{margin:10px -16px 0}}

/* v79: fit at laptop width: headline never clipped, one-line Learn more. */
@media (min-width:1101px){
  .hero > .hero-grid{grid-template-columns:minmax(0,.56fr) minmax(0,1.44fr)!important;padding-left:clamp(24px,2.4vw,40px);padding-right:clamp(20px,2vw,36px);gap:clamp(18px,2vw,32px)}
  .hero-grid .h1{font-size:clamp(38px,3.6vw,64px)}
  .hero-grid .lead{font-size:15.5px}
}
.cards.pcards{gap:12px}
.pc-btn{white-space:nowrap;padding:0 5px 0 13px;font-size:12.5px;height:38px}
.pc-btn svg{width:13px;height:13px;padding:6px}

/* v80: cards slightly slanted again (like the old ones); everything inside stays upright. */
.pcard{transform:skewX(-6deg)}
.pcard>*{transform:skewX(6deg)}
.pcard .pc-img{transform:none;margin-left:-26px;margin-right:-26px}
.pcard .pc-img img{transform:skewX(6deg) scale(1.06)}
.pcard:hover,.pcard:focus-visible{transform:skewX(-6deg) translateY(-4px)}
@keyframes pc-in{from{opacity:0;transform:skewX(-6deg) translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.6);filter:blur(8px)}}
@media (max-width:640px){.pcard,.pcard:hover{transform:skewX(-4deg)}.pcard>*{transform:skewX(4deg)}.pcard .pc-img{transform:none}.pcard .pc-img img{transform:skewX(4deg) scale(1.05)}}

/* v81: motion is part of the brand and always plays (Windows "Animation effects: off" reports reduced motion; see index.html `reduced`).
   The cards fly together on every load, also on phones, and the logo bars keep their wave. */
@media (prefers-reduced-motion:reduce){.pcard{animation:pc-in 1s cubic-bezier(.16,.84,.24,1) backwards}
  nav .logo .s6-ic path{animation:s6-in .5s cubic-bezier(.2,.8,.2,1) both,s6-wave 6s ease-in-out 2.2s infinite}
  .pcard,.pc-btn svg{transition:transform .2s,box-shadow .2s,border-color .2s}}
@media (max-width:640px){.pcard{animation:pc-in 1s cubic-bezier(.16,.84,.24,1) backwards}}

/* v82: hero slogan "Precision is not optional. It's engineered." The blue line is plain solid blue (no gradient, no glow). */
.hero .h1 .a{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#4F8DFF;-webkit-text-fill-color:#4F8DFF;filter:none;text-shadow:none}
@media (min-width:1101px){.hero-grid .h1{font-size:clamp(36px,3.3vw,60px)}}
.hero .motto{letter-spacing:.04em}
/* Configure your tune: a big, solid, obviously clickable button: bold label, arrow in its own dark circle, lifts and presses. */
.hero-cta .btn-hero{height:60px;padding:0 8px 0 22px;gap:12px;border-radius:12px;font-size:16.5px;font-weight:800;letter-spacing:.01em;
  background:#4F8DFF;border:1px solid #79a9ff;color:#04101f;box-shadow:0 14px 28px -12px rgba(0,0,0,.85),inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .15s,background .15s,box-shadow .15s}
.hero-cta .btn-hero .ni-lead{width:20px;height:20px;color:#04101f}
.hero-cta .btn-hero>.ni:not(.ni-lead){box-sizing:content-box;width:18px;height:18px;padding:12px;margin-left:8px;border-radius:9px;background:#04101f;color:#fff;transition:transform .2s}
.hero-cta .btn-hero:hover{background:#6aa0ff;transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(0,0,0,.9),inset 0 -3px 0 rgba(0,0,0,.18)}
.hero-cta .btn-hero:hover>.ni:not(.ni-lead){transform:translateX(3px)}
.hero-cta .btn-hero:active{transform:translateY(1px);box-shadow:0 6px 14px -8px rgba(0,0,0,.9),inset 0 2px 0 rgba(0,0,0,.2)}
.hero-cta .btn-hero:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:640px){.hero-cta .btn-hero{height:56px;font-size:15.5px;width:100%;justify-content:space-between}}

/* Keep the slogan on its three lines. */
@media (min-width:1101px){.hero-grid .h1{font-size:clamp(30px,2.85vw,54px);white-space:nowrap}}

/* v84: navigation links are text only and a bit darker; Home first. */
.nav-links{gap:2px;color:#1f2530;font-size:14px}
.nav-links .ni{display:none}
.nav-links a{padding:8px 11px;color:#1f2530}
.nav-links a:hover{color:#05070a;background:#eef1f5}
.nav-links a.on{color:#05070a;background:#e5edf7;font-weight:700}
@media (max-width:1240px) and (min-width:1001px){.nav-links a{padding:8px 7px;font-size:13.5px}}

/* How it works: four numbered steps in the same dark boxes as the sale strip. */
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.how-steps li{position:relative;padding:22px 20px 22px;background:#070d12;border:1px solid #1d2b39;border-radius:10px;box-shadow:0 22px 44px -22px rgba(0,0,0,.9)}
.how-n{display:block;font-family:var(--display);font-weight:900;font-size:40px;line-height:1;color:#4F8DFF;margin-bottom:14px}
.how-steps b{display:block;font-size:17px;font-weight:800;color:#fff;margin-bottom:6px}
.how-steps p{margin:0;font-size:14px;line-height:1.5;color:#a9b6c4}
.how-steps li:not(:last-child)::after{content:"";position:absolute;top:42px;right:-14px;width:14px;height:1px;background:#2b3d50}
@media (max-width:1000px){.how-steps{grid-template-columns:1fr 1fr}.how-steps li::after{display:none}}
@media (max-width:560px){.how-steps{grid-template-columns:1fr}}

/* v85: Services: what each card offers (the cards link here). Same dark boxes, photo on the side, accent per service. */
.svc-list{display:grid;gap:16px}
.svc{--c:#4F8DFF;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);min-height:300px;background:#070d12;border:1px solid #1d2b39;border-radius:12px;overflow:hidden;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.9);scroll-margin-top:140px;transition:border-color .3s}
.svc:nth-child(even){grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr)}
.svc:nth-child(even) .svc-img{order:2}
.svc-img{position:relative;min-height:220px}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 40%,#070d12 100%)}
.svc:nth-child(even) .svc-img::after{background:linear-gradient(270deg,transparent 40%,#070d12 100%)}
.svc-body{padding:28px 30px 26px;display:flex;flex-direction:column}
.svc-k{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.svc-k.gold{color:#FFC83D;font-style:italic}
.svc h3{margin:8px 0 6px;font:800 clamp(22px,2vw,28px)/1.1 var(--sans);color:#fff}
.svc-lead{margin:0 0 14px;color:#b8c4d2;font-size:15px;line-height:1.5;max-width:640px}
.svc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.svc li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:#dfe7f0}
.svc li svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--c)}
.svc-who{margin:14px 0 0;font-size:13px;color:#8fa0b2}
.svc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px}
.svc-price small{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#93a4b8;margin-right:6px}
.svc-price b{font-family:var(--display);font-weight:900;font-size:34px;line-height:1;color:#fff}
.svc-price b sup{font-size:.5em;vertical-align:top;color:var(--c)}
.svc-go{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 6px 0 18px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:14px;white-space:nowrap;transition:background .2s,border-color .2s}
.svc-go svg{box-sizing:content-box;width:15px;height:15px;padding:8px;border-radius:50%;background:var(--c);color:#06121F;transition:transform .2s}
.svc-go:hover{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));border-color:rgba(255,255,255,.24)}
.svc-go:hover svg{transform:translateX(2px)}
.svc.svc-hit{animation:svc-hit 1.6s ease}
@keyframes svc-hit{0%,100%{border-color:#1d2b39}25%,60%{border-color:var(--c)}}
@media (max-width:900px){.svc,.svc:nth-child(even){grid-template-columns:1fr}.svc:nth-child(even) .svc-img{order:0}.svc-img{min-height:180px}
  .svc-img::after,.svc:nth-child(even) .svc-img::after{background:linear-gradient(180deg,transparent 40%,#070d12 100%)}.svc ul{grid-template-columns:1fr}}
@media (max-width:560px){.svc-body{padding:20px 18px}.svc-foot{flex-wrap:wrap}.svc-go{width:100%;justify-content:space-between}}

/* Configurator: no heading; hidden until opened; slides in with a close button. */
#finder.cfg{scroll-margin-top:140px}
#finder.cfg[hidden]{display:none}
#finder.cfg-in{animation:cfg-in .6s cubic-bezier(.2,.8,.2,1)}
@keyframes cfg-in{from{opacity:0;transform:translateY(24px)}}
.finder2{position:relative}
.fd-close{position:absolute;top:10px;right:10px;z-index:5;width:38px;height:38px;border-radius:50%;border:1px solid #2b3d50;background:#070d12;color:#dfe7f0;font-size:22px;line-height:1;cursor:pointer}
.fd-close:hover{border-color:#4F8DFF;color:#fff}

/* Close button sits on the corner of the configurator, clear of the search field. */
.fd-close{top:-16px;right:-16px;box-shadow:0 6px 16px -6px rgba(0,0,0,.8)}
@media (max-width:640px){.fd-close{top:-12px;right:-6px}}

/* v87: configurator in car-configurator style (dark): numbered step rail, progress line, big step title with Back / Continue,
   content in the middle, a bar at the bottom with the car, total price and the order button. Animated between steps. */
.finder2.cfgx{display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:1fr auto;padding:0;gap:0;background:#070d12;border:1px solid #1d2b39;border-radius:14px;box-shadow:0 30px 60px -26px rgba(0,0,0,.9)}
.cx-rail{border-right:1px solid #16222e;padding:132px 0 24px}
.cx-rail .fd-steps{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;gap:0}
.cx-rail .fd-steps li{position:relative;display:grid;place-items:center;height:54px;margin:0;padding:0;border:0;background:none;font-size:0;color:#45576a;cursor:default;transition:color .3s}
.cx-rail .fd-steps li>*{display:none}
.cx-rail .fd-steps li::before{content:attr(data-n);font:700 12.5px var(--mono);letter-spacing:.06em}
.cx-rail .fd-steps li::after{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:#4F8DFF;transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cx-rail .fd-steps li.now{color:#fff}.cx-rail .fd-steps li.now::after{transform:scaleY(1)}
.cx-rail .fd-steps li.done{color:#8fa0b2;cursor:pointer}.cx-rail .fd-steps li.done:hover{color:#fff}
.cx-main{min-width:0;padding:0 34px 22px}
.cx-top{display:flex;align-items:center;gap:14px;height:64px}
.cx-backlink{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 2px;border:0;background:none;color:#8fa0b2;font:600 13px var(--sans);cursor:pointer}
.cx-backlink svg{width:16px;height:16px}.cx-backlink:hover{color:#fff}
.cfgx .fd-search{margin-left:auto;flex:0 1 380px;height:42px;background:#0b141c;border-color:#1d2b39}
.cfgx .fd-close{position:relative;top:auto;right:auto;flex:none;width:40px;height:40px;box-shadow:none}
.cfgx .fd-prog{height:2px;margin:0 -34px;background:#16222e;border-radius:0;overflow:hidden}
.cfgx .fd-prog i{display:block;height:100%;background:#4F8DFF;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.cfgx .fd-wiz{padding:0;margin:0;background:none;border:0}
.cx-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:30px 0 22px}
.cfgx .fd-stepn{display:block;font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#6f8296}
.cfgx #fdQh{margin:8px 0 6px;font:800 clamp(32px,3.6vw,54px)/1.02 var(--sans);letter-spacing:-.025em;color:#fff;animation:cx-title .55s cubic-bezier(.2,.8,.2,1) both}
.cfgx #fdQp{margin:0;color:#8fa0b2;font-size:14.5px;animation:cx-title .55s .08s cubic-bezier(.2,.8,.2,1) both}
@keyframes cx-title{from{opacity:0;transform:translateY(14px)}}
.cx-nav{display:flex;gap:10px;flex:none;padding-top:22px}
.cx-prev{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid #2b3d50;background:#0b141c;color:#dfe7f0;cursor:pointer}
.cx-prev svg{width:18px;height:18px}
.cx-next{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 16px 0 22px;border-radius:999px;border:1.5px solid #4F8DFF;background:transparent;color:#fff;font:700 14px var(--sans);cursor:pointer;transition:background .2s}
.cx-next svg{width:16px;height:16px;transition:transform .2s}
.cx-next:hover:not(:disabled){background:rgba(79,141,255,.14)}.cx-next:hover:not(:disabled) svg{transform:translateX(2px)}
.cx-prev:disabled,.cx-next:disabled{opacity:.32;cursor:default}
.cfgx .fd-stage{animation:cx-stage .5s cubic-bezier(.2,.8,.2,1)}
@keyframes cx-stage{from{opacity:0;transform:translateY(10px)}}
.cfgx #fdBack,.cfgx #fdCar{display:none}
.cfgx .fd-demo{margin:16px 0 0}
/* Bottom bar */
.cx-bar{grid-column:1/-1;position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:22px;padding:14px 22px 14px 26px;
  background:rgba(10,18,25,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid #1d2b39;border-radius:0 0 14px 14px}
.cx-car{display:flex;align-items:center;gap:12px;min-width:0}
.cx-car>svg{width:26px;height:26px;flex:none;color:#4F8DFF}
.cx-car b{display:block;font-size:15px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-car small{display:block;font-size:12.5px;color:#8fa0b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-total{margin-left:auto;text-align:right;white-space:nowrap}
.cx-total small{display:block;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8fa0b2}
.cx-total b{font-family:var(--display);font-weight:900;font-size:28px;line-height:1;color:#fff}
.cx-bar .fd-go{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0}
.cx-bar .fd-dealer{display:none}
.cx-bar #fdOrder{height:50px;padding:0 20px;border-radius:999px;font-size:15px;font-weight:800;background:#4F8DFF;border:1px solid #79a9ff;color:#04101f;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.cx-bar #fdOrder:hover{background:#6aa0ff}
.cx-bar .fd-addcart{height:50px;border-radius:999px;padding:0 18px;background:#0b141c;border:1px solid #2b3d50;color:#dfe7f0}
.cx-bar:not(.ready) #fdOrder,.cx-bar:not(.ready) .fd-addcart{opacity:.35;pointer-events:none}
#fdOrder.cx-pulse{animation:cx-pulse 1.1s ease 2}
@keyframes cx-pulse{50%{transform:scale(1.06)}}
@media (max-width:760px){
  .finder2.cfgx{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
  .cx-rail{border-right:0;border-bottom:1px solid #16222e;padding:0 12px}
  .cx-rail .fd-steps{flex-direction:row;justify-content:space-around}
  .cx-rail .fd-steps li{height:44px;width:56px}
  .cx-rail .fd-steps li::after{left:10px;right:10px;top:auto;bottom:-1px;width:auto;height:2px;transform:scaleX(0)}
  .cx-rail .fd-steps li.now::after{transform:scaleX(1)}
  .cx-main{padding:0 16px 16px}
  .cx-top{height:auto;padding:12px 0;flex-wrap:wrap}
  .cfgx .fd-search{order:3;flex:1 1 100%;margin-left:0}
  .cfgx .fd-close{margin-left:auto}
  .cfgx .fd-prog{margin:0 -16px}
  .cx-head{flex-direction:column;padding:20px 0 16px}.cx-nav{padding-top:0}
  .cx-bar{flex-wrap:wrap;gap:12px;padding:12px 14px}
  .cx-total{margin-left:auto}
  .cx-bar .fd-go{flex:1 1 100%}.cx-bar #fdOrder{flex:1;justify-content:center}
}
.cfgx #fdQh{text-transform:none}
/* The bottom bar sticks to the screen while you scroll through the options (the old finder box clipped it). */
.finder2.cfgx{overflow:visible}
.cx-rail{border-radius:14px 0 0 0}
@media (max-width:760px){.cx-top{flex-wrap:nowrap}.cfgx .fd-search{order:0;flex:1 1 auto;margin-left:0;min-width:0}.cx-backlink span{display:none}}

/* v90: configurator, round 2.
   No background photo, no dot pattern: plain dark surfaces. */
.finder2.cfgx{background:#070d12!important;animation:none}
.finder2.cfgx::before,.finder2.cfgx::after,.cfgx .fd-build::before,.cfgx .fd-build::after,.cfgx #fdOut::after,.cfgx .fb-bg{display:none!important}
.cfgx .fd-build{background:#0a1219;border:1px solid #1d2b39;margin:22px 0 0}
.cfgx .fd-cfg{background:#0b141c;border-color:#1d2b39}
.cfgx .fd-stat,.cfgx .fd-gauge,.cfgx .stage-tabs{background:#0b141c;border-color:#1d2b39}
.cfgx .fd-cta{background:#0b141c;border-color:#1d2b39}
.cfgx .tile .kn,.cfgx .fd-hint,.cfgx .hw-ind{display:none!important}

/* Brands: big logo on top, name and model count under it; tiles fly in one after another. */
.cfgx .fd-grid.brands{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.cfgx .tile{background:#0b141c!important;border:1px solid #1d2b39;border-radius:12px!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .2s,background .2s;
  animation:cx-tile .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 35ms)}
@keyframes cx-tile{from{opacity:0;transform:translateY(16px) scale(.96)}}
.cfgx .tile:hover{transform:translateY(-4px);border-color:#4F8DFF!important;background:#0e1a25!important}
.cfgx .tile.brand{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;min-height:138px;padding:20px 12px 16px}
.cfgx .tile.brand .bl{width:54px;height:54px;background:#dfe7f0;transition:background .2s,transform .3s cubic-bezier(.2,.8,.2,1)}
.cfgx .tile.brand:hover .bl{background:#4F8DFF;transform:scale(1.1)}
.cfgx .tile.brand .bn{align-items:center}
.cfgx .tile.brand .tn{font:800 15px/1.15 var(--sans);text-transform:none;letter-spacing:0;color:#fff}
.cfgx .tile.brand .ts{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#7d8fa2}
.cfgx .fd-grid.leave{animation:cx-leave .2s ease forwards}
@keyframes cx-leave{to{opacity:0;transform:translateY(-8px)}}

/* Models: a line drawing of the car body draws itself in each tile. */
.cfgx .fd-grid:not(.brands){grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cfgx .tile.model{min-height:0;padding:12px 16px 16px;gap:6px}
.car-pic{display:block;margin:0 -6px 6px}
.car-pic svg{display:block;width:100%;height:auto;overflow:visible}
.car-pic path,.car-pic circle{fill:none;stroke:#dfe7f0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:cp-draw 1.1s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i,0) * 60ms + .15s)}
.car-pic .cp-w{stroke:#4F8DFF;animation-delay:calc(var(--i,0) * 60ms + .55s)}
.car-pic .cp-g{stroke:#2b3d50;animation-delay:calc(var(--i,0) * 60ms)}
.car-pic .cp-t{animation-delay:calc(var(--i,0) * 60ms + .4s)}
.car-pic .cp-h{stroke:none;fill:#2b3d50;opacity:0;animation:cp-fade .4s forwards;animation-delay:calc(var(--i,0) * 60ms + .9s)}
@keyframes cp-draw{to{stroke-dashoffset:0}}
@keyframes cp-fade{to{opacity:1}}
.cfgx .tile.model:hover .car-pic .cp-b{stroke:#fff}
.cfgx .tile.model:hover .car-pic svg{transform:translateX(4px);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cfgx .tile.model .tn{font:800 18px/1.15 var(--sans);text-transform:none;letter-spacing:0;color:#fff}
.cfgx .tile.model .ts{color:#8fa0b2}

/* Package choice at the top of the result. */
.cx-pkg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
.cx-pkg button{--c:#4F8DFF;position:relative;display:grid;grid-template-columns:1fr auto;grid-template-areas:"k dot" "b price" "s price";align-items:center;gap:3px 16px;padding:16px 18px;
  text-align:left;border:1px solid #1d2b39;border-radius:12px;background:#0b141c;color:#fff;cursor:pointer;transition:border-color .25s,background .25s,transform .2s;animation:cx-tile .5s cubic-bezier(.2,.8,.2,1) both}
.cx-pkg button+button{animation-delay:.08s}
.cx-pkg .k{grid-area:k;display:flex;align-items:center;gap:6px;font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8fa0b2}
.cx-pkg .k.gold{color:#FFC83D;font-style:italic}.cx-pkg .k svg{width:15px;height:15px}
.cx-pkg b{grid-area:b;font:800 20px/1.1 var(--sans)}
.cx-pkg button>small{grid-area:s;font-size:13px;color:#8fa0b2}
.cx-pkg em{grid-area:price;font-style:normal;text-align:right;white-space:nowrap}
.cx-pkg em small{font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8fa0b2}
.cx-pkg em span{font-family:var(--display);font-weight:900;font-size:28px;line-height:1}
.cx-pkg em sup{font-size:.5em;vertical-align:top;color:var(--c)}
.cx-pkg-dot{grid-area:dot;justify-self:end;width:20px;height:20px;border-radius:50%;border:2px solid #2b3d50;transition:border-color .2s,background .2s,box-shadow .2s}
.cx-pkg button:hover{border-color:#2c4054;transform:translateY(-2px)}
.cx-pkg button.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#0b141c)}
.cx-pkg button.on .cx-pkg-dot{border-color:var(--c);background:var(--c);box-shadow:inset 0 0 0 4px #0b141c}
.stage-tabs.cx-hide{display:none!important}
@media (max-width:640px){.cx-pkg{grid-template-columns:1fr}.cfgx .fd-grid.brands{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.cfgx .tile.brand{min-height:104px;padding:14px 6px 12px;gap:8px}.cfgx .tile.brand .bl{width:38px;height:38px}.cfgx .tile.brand .tn{font-size:12.5px}.cfgx .fd-grid:not(.brands){grid-template-columns:1fr 1fr}}

/* v91: the configurator opens as a full-screen view over the page (page navigation hidden); × / Escape / Back close it. */
html.cfg-lock,html.cfg-lock body{overflow:hidden}
#finder.cfg-full{position:fixed;inset:0;z-index:2000;margin:0;padding:0;border:0;background:#091019;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scroll-margin:0}
#finder.cfg-full::before,#finder.cfg-full::after{display:none}
#finder.cfg-full>.wrap{max-width:none;width:auto;margin:0;padding:0;min-height:100%;display:flex}
#finder.cfg-full .finder2.cfgx{flex:1;min-height:100vh;min-height:100dvh;border:0;border-radius:0;box-shadow:none}
#finder.cfg-full .cx-rail,#finder.cfg-full .cx-bar{border-radius:0}
#finder.cfg-full .cx-main{justify-self:center;width:100%;max-width:1360px;padding:0 44px 30px}
#finder.cfg-full .cx-bar{padding-left:max(26px,calc((100vw - 1360px) / 2 + 26px));padding-right:max(22px,calc((100vw - 1360px) / 2 + 22px))}
#finder.cfg-full .fd-close{position:static;flex:none;width:42px;height:42px;box-shadow:none;transition:border-color .2s,color .2s,transform .3s}
#finder.cfg-full .fd-close:hover{transform:rotate(90deg)}
.cx-mark{display:none}
#finder.cfg-full .cx-rail{position:relative}
#finder.cfg-full .cx-mark{display:grid;place-items:center;position:absolute;top:20px;left:0;right:0;height:30px}
#finder.cfg-full .cx-mark svg{width:36px;height:auto;transition:transform .3s}
#finder.cfg-full .cx-mark:hover svg{transform:translateX(3px)}
#finder.cfg-full.cfg-in{animation:cfgf-in .42s cubic-bezier(.2,.8,.2,1)}
@keyframes cfgf-in{from{opacity:0;transform:scale(.985)}}
#finder.cfg-full.cfg-in .cx-rail{animation:cfgf-rail .6s .06s cubic-bezier(.2,.8,.2,1) both}
@keyframes cfgf-rail{from{transform:translateX(-100%);opacity:0}}
#finder.cfg-full.cfg-in .cx-top{animation:cfgf-top .55s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes cfgf-top{from{transform:translateY(-16px);opacity:0}}
#finder.cfg-full.cfg-in .cx-bar{animation:cfgf-bar .6s .14s cubic-bezier(.2,.8,.2,1) both}
@keyframes cfgf-bar{from{transform:translateY(100%)}}
#finder.cfg-full.cfg-out{animation:cfgf-out .26s ease forwards}
@keyframes cfgf-out{to{opacity:0;transform:scale(.985)}}
@media (max-width:760px){
  #finder.cfg-full .cx-main{padding:0 16px 18px}
  #finder.cfg-full .cx-bar{padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  #finder.cfg-full .cx-mark{display:none}
  #finder.cfg-full.cfg-in .cx-rail{animation-name:cfgf-top}
}

/* v92: licensed car pictures (IMAGIN.studio, transparent webp) in the configurator; drawings stay without a key. */
.car-pic.car-img{display:grid;place-items:end center;height:92px;margin:-4px -6px 4px}
.car-pic.car-img img{max-width:100%;max-height:92px;object-fit:contain;opacity:0;transform:translateX(-14px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.car-pic.car-img img.ok{opacity:1;transform:none}
.tile.model:hover .car-pic.car-img img.ok{transform:translateX(4px) scale(1.03)}
.cx-head{position:relative}
.cx-shot{flex:0 1 420px;align-self:center;display:grid;place-items:center;min-height:120px;margin:0 8px 0 auto;position:relative}
.cx-shot::after{content:"";position:absolute;left:12%;right:12%;bottom:4px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent)}
.cx-shot img{position:relative;z-index:1;width:100%;max-height:200px;object-fit:contain;opacity:0;transform:translateX(40px);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.cx-shot img.ok{opacity:1;transform:none}
.cx-car-img{width:64px;height:34px;object-fit:contain;flex:none;opacity:0;transition:opacity .4s}
.cx-car-img.ok{opacity:1}
.cx-car.has-img>svg{display:none}
@media (max-width:760px){
  .cx-shot{order:-1;flex:none;width:100%;margin:0 0 6px;min-height:0}
  .cx-shot img{max-height:150px}
  .car-pic.car-img,.car-pic.car-img img{height:72px;max-height:72px}
}
.cx-shot[hidden],.cx-car-img[hidden]{display:none}

/* Narrow desktops (1001–1360 px): the links used to push the search/cart block out of the white navigation.
   Logo | links | actions, tighter links, and FAQ / Contact (also in the footer) hidden below 1120 px. */
@media (min-width:1001px) and (max-width:1360px){
  nav .wrap{grid-template-columns:auto 1fr auto;gap:14px}
  #navLinks{gap:0}
  #navLinks a{padding-left:7px;padding-right:7px;font-size:13px}
}
@media (min-width:1001px) and (max-width:1120px){#navLinks a[href$="#faq"],#navLinks a[href$="#contact"]{display:none}}

/* v97: on scroll the sale strip folds away and the white navigation gets a little slimmer (60 -> 50 px, smaller logo,
   soft shadow). The bottom margin makes up for the lost height, so the page under it does not jump. */
nav{--fold:52px;transition:margin-bottom .45s cubic-bezier(.2,.8,.2,1)}
@media (max-width:600px){nav{--fold:48px}}
nav .wrap{transition:height .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
nav .logo .s6-ic{transition:height .45s cubic-bezier(.2,.8,.2,1)}
.promo{overflow:hidden;transform-origin:50% 0;transition:height .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1),opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1),border-width .45s}
nav.scrolled{margin-bottom:var(--fold)}
nav.scrolled .promo{height:0;margin-top:0;border-width:0;opacity:0;transform:perspective(500px) rotateX(-70deg);pointer-events:none}
nav.scrolled .wrap{height:50px;box-shadow:0 14px 34px -18px rgba(0,0,0,.8)}
nav.scrolled .logo .s6-ic{height:16px}
@media (max-width:1000px){nav.scrolled .nav-links.open{top:50px}}
@media (max-width:600px){nav.scrolled .logo .s6-ic{height:12px}}