/* =====================================================================
   CLICK CELLULAR PLUS  —  clickcellular.co.il
   Design system  ·  Hebrew RTL  ·  dark "lab" theme + light editorial bands
   Brand: ink #0a0b0e  ·  red #e23a2e (from logo)  ·  bone #f4f5f7
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#0a0b0e;
  --ink-2:#0e1015;
  --ink-3:#14171d;
  --panel:#111419;
  --panel-2:#171b22;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.17);
  --txt:#e9ecf2;
  --muted:#98a1b1;

  --red:#e23a2e;
  --red-2:#ff5949;
  --red-deep:#7f150f;
  --red-soft:rgba(226,58,46,.14);

  --light:#f3f4f7;
  --light-2:#ffffff;
  --on-light:#0c0e12;
  --on-light-mute:#5a6472;
  --line-light:rgba(10,12,16,.10);

  --f-display:"Heebo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-body:"Assistant",-apple-system,"Segoe UI",system-ui,sans-serif;

  --r:14px;
  --r-lg:22px;
  --notch:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
  --notch-sm:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));

  --pad-y:clamp(62px,7.5vw,116px);
  --gut:clamp(16px,4vw,28px);
  --maxw:1240px;

  --sh-1:0 2px 6px rgba(0,0,0,.3);
  --sh-2:0 18px 44px -18px rgba(0,0,0,.75);
  --sh-red:0 14px 40px -14px rgba(226,58,46,.55);
  --ease:cubic-bezier(.22,.8,.28,1);
  --hdr:72px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
/* author `display` rules beat the UA [hidden] rule — this keeps hidden elements
   out of the layout so they can never sit invisibly on top of real content */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr) + 18px)}
body{
  margin:0;background:var(--ink);color:var(--txt);
  font-family:var(--f-body);font-size:17px;line-height:1.75;font-weight:400;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* --pad-bot reserves room for the fixed mobile action bar; the cookie bar adds
     its own measured height on top so the footer links never end up underneath. */
  --pad-bot:0px;padding-bottom:var(--pad-bot);
}
body.cc-open{padding-bottom:calc(var(--pad-bot) + var(--cc-h,0px) + 34px)}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:800;line-height:1.14;margin:0;letter-spacing:-.01em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-2);outline-offset:3px;border-radius:4px}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#08090b}
::-webkit-scrollbar-thumb{background:#23272f;border-radius:8px;border:2px solid #08090b}
::-webkit-scrollbar-thumb:hover{background:var(--red-deep)}

/* ---------- 3. LAYOUT ---------- */
.wrap{width:min(100% - (var(--gut)*2),var(--maxw));margin-inline:auto}
/* overflow:hidden keeps decorative glows/rings from creating an RTL scroll offset */
.sec{position:relative;padding-block:var(--pad-y);overflow:hidden}
.sec--tight{padding-block:clamp(44px,5vw,72px)}
.sec--light{background:var(--light);color:var(--on-light)}
.sec--light h1,.sec--light h2,.sec--light h3,.sec--light h4{color:var(--on-light)}
.sec--panel{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.sec--dark{background:#07080a}
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.hide{display:none !important}

/* diagonal cut between bands */
.cut-top::before,.cut-bot::after{
  content:"";position:absolute;inset-inline:0;height:64px;background:inherit;z-index:2;pointer-events:none;
}
.cut-top::before{top:-1px;transform:translateY(-100%) ;clip-path:polygon(0 100%,100% 0,100% 100%)}
.cut-bot::after{bottom:-1px;transform:translateY(100%);clip-path:polygon(0 0,100% 0,0 100%)}

/* circuit texture */
.circuit{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1'%3E%3Cpath d='M0 40h58l16 16h52l16-16h68M0 120h34l18-18h60l14 14h84M40 0v34l16 16v56l-16 16v88M150 0v58l-16 16v70l16 16v50'/%3E%3C/g%3E%3Cg fill='%23e23a2e' fill-opacity='.16'%3E%3Ccircle cx='58' cy='40' r='2.6'/%3E%3Ccircle cx='134' cy='120' r='2.6'/%3E%3Ccircle cx='40' cy='34' r='2.6'/%3E%3Ccircle cx='150' cy='58' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
.sec--light .circuit{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%230a0c10' stroke-opacity='.05' stroke-width='1'%3E%3Cpath d='M0 40h58l16 16h52l16-16h68M0 120h34l18-18h60l14 14h84M40 0v34l16 16v56l-16 16v88M150 0v58l-16 16v70l16 16v50'/%3E%3C/g%3E%3C/svg%3E");
}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.glow--red{background:radial-gradient(circle,rgba(226,58,46,.34),transparent 68%)}
.glow--cold{background:radial-gradient(circle,rgba(80,130,255,.13),transparent 68%)}

/* ---------- 4. TYPE ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--f-display);
  font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red-2);margin-bottom:14px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--red);display:block}
.sec--light .eyebrow{color:#c22a20}
.h-xl{font-size:clamp(34px,6.4vw,68px);letter-spacing:-.028em;line-height:1.05}
.h-lg{font-size:clamp(28px,4.4vw,46px);letter-spacing:-.02em;line-height:1.1}
.h-md{font-size:clamp(21px,2.4vw,29px)}
.h-sm{font-size:clamp(18px,1.7vw,21px)}
.lead{font-size:clamp(16.5px,1.6vw,19.5px);color:var(--muted);max-width:62ch}
.sec--light .lead{color:var(--on-light-mute)}
.txt-red{color:var(--red-2)}
.sec--light .txt-red{color:#cf2b20}
.sec-head{max-width:760px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head.center{margin-inline:auto}
.sec-head .lead{margin-top:14px}
.underline-mark{position:relative;display:inline-block;z-index:0}
.underline-mark::after{
  /* HEBREW HAS NO DESCENDERS on most letters, so a bar 0.30em tall starting 0.08em
     up reached 0.38em and cut straight through the BODY of the glyphs instead of
     sitting under them. It now lives in the descent space below the baseline. */
  content:"";position:absolute;inset-inline:-2px;bottom:.01em;height:.17em;background:var(--red);
  opacity:.9;z-index:-1;transform:skewX(-12deg);
}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- 5. BUTTONS ---------- */
.btn{
  --bg:var(--red);--fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);font-weight:800;font-size:16px;letter-spacing:-.01em;
  padding:14px 26px;background:var(--bg);color:var(--fg);
  clip-path:var(--notch-sm);transition:transform .22s var(--ease),filter .22s,background .22s;
  white-space:nowrap;
}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn:active{transform:translateY(0)}
.btn--red{background:linear-gradient(135deg,#f0453a,#bf221a);box-shadow:var(--sh-red)}
.btn--ghost{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--red);color:#fff;background:rgba(226,58,46,.10)}
.btn--dark{background:var(--on-light);color:#fff}
.btn--light{background:#fff;color:var(--on-light)}
.btn--lg{padding:17px 34px;font-size:17.5px}
.btn--sm{padding:10px 18px;font-size:14.5px}
.btn--block{display:flex;width:100%}
.btn--wa{background:#22b357;color:#fff}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:800;
  color:var(--red-2);font-size:15.5px;transition:gap .2s var(--ease)
}
.link-arrow svg{width:17px;height:17px;transition:transform .2s var(--ease)}
.link-arrow:hover{gap:13px}
.sec--light .link-arrow{color:#c22a20}

/* ---------- 6. NOTCH FRAME (shared card chrome) ---------- */
.notch{position:relative;background:var(--panel);clip-path:var(--notch);isolation:isolate}
.notch::before{
  content:"";position:absolute;inset:0;z-index:-2;clip-path:var(--notch);
  background:linear-gradient(150deg,rgba(226,58,46,.75),rgba(255,255,255,.14) 34%,rgba(255,255,255,.05) 62%,rgba(226,58,46,.22));
  opacity:.5;transition:opacity .3s
}
.notch::after{content:"";position:absolute;inset:1.4px;z-index:-1;clip-path:var(--notch);background:var(--panel)}
.notch:hover::before{opacity:1}

/* ---------- 7. TOPBAR + HEADER ---------- */
.topbar{
  background:#060709;border-bottom:1px solid var(--line);font-size:13.5px;color:#aab3c0;
  position:relative;z-index:60
}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px}
.topbar a{color:#c3cad5}
.topbar__list{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar__list li{display:inline-flex;align-items:center;gap:7px}
.topbar__list svg{width:15px;height:15px;color:var(--red-2)}
.topbar__list a:hover{color:#fff}
.dot-live{width:7px;height:7px;border-radius:50%;background:#2bd06a;box-shadow:0 0 0 3px rgba(43,208,106,.2);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(43,208,106,0)}}

.header{position:sticky;top:0;z-index:70;background:rgba(9,10,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background .3s,box-shadow .3s}
.header.is-stuck{background:rgba(7,8,11,.96);box-shadow:0 12px 34px -20px #000}
.header__in{display:flex;align-items:center;gap:clamp(12px,2vw,30px);min-height:var(--hdr)}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{height:38px;width:auto}
.brand__txt{display:none}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(4px,1.1vw,14px)}
.nav a{
  position:relative;font-family:var(--f-display);font-weight:700;font-size:15.5px;color:#cfd5df;
  padding:9px 12px;border-radius:8px;transition:color .2s,background .2s;white-space:nowrap
}
.nav a::after{content:"";position:absolute;inset-inline:12px;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:100% 50%;transition:transform .26s var(--ease)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:#fff}
.header__cta{display:flex;align-items:center;gap:10px;flex:none}
.callpill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px;background:linear-gradient(135deg,#f0453a,#bf221a);
  color:#fff;font-family:var(--f-display);font-weight:900;font-size:15.5px;clip-path:var(--notch-sm);
  box-shadow:var(--sh-red);transition:transform .2s var(--ease)
}
.callpill svg{width:17px;height:17px}
.callpill:hover{transform:translateY(-2px)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:11px}
.burger span{display:block;width:20px;height:2px;background:#fff;position:relative;transition:.25s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:#fff;transition:.25s}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:rotate(45deg);top:0}
body.nav-open .burger span::after{transform:rotate(-45deg);top:0}

/* progress bar */
.progress{position:fixed;top:0;inset-inline-start:0;height:3px;background:linear-gradient(90deg,var(--red),#ff8a5c);width:0;z-index:99;transition:width .12s linear}

/* ---------- 8. HERO ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 80% -10%,#1b1216 0%,var(--ink) 55%)}
.hero__in{position:relative;z-index:3;display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(24px,4vw,58px);align-items:center;
  padding-block:clamp(46px,6vw,96px) clamp(52px,6vw,104px)}
.hero .glow--red{width:640px;height:640px;top:-230px;inset-inline-end:-160px}
.hero .glow--cold{width:520px;height:520px;bottom:-280px;inset-inline-start:-180px}
.badge{
  display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:100px;
  font-size:14px;font-weight:700;color:#dfe4ec;margin-bottom:22px
}
.badge b{color:#fff}
.hero h1{font-size:clamp(35px,5.6vw,66px);letter-spacing:-.03em;line-height:1.04}
.hero h1 .line{display:block}
.hero__sub{margin-top:20px;font-size:clamp(16.5px,1.7vw,20px);color:#b6bfcd;max-width:56ch;line-height:1.7}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;font-size:14.5px;font-weight:700;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:100px;color:#d4dae4
}
.chip svg{width:17px;height:17px;color:var(--red-2)}
a.chip{transition:border-color .22s,background .22s,color .22s}
a.chip:hover{border-color:rgba(226,58,46,.6);background:rgba(226,58,46,.12);color:#fff}
.sec--light .chip{background:rgba(10,12,16,.04);border-color:var(--line-light);color:#2a3140}
.sec--light .chip svg{color:#cf2b20}

/* --- exploded device (CSS 3D) --- */
.device{position:relative;height:clamp(400px,46vw,580px);perspective:1400px;display:grid;place-items:center}
.device__stage{position:relative;height:78%;width:auto;aspect-ratio:9/18.6;transform-style:preserve-3d;transform:rotateX(12deg) rotateY(-20deg) rotateZ(6deg);animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{transform:rotateX(12deg) rotateY(-16deg) rotateZ(6deg) translateY(-14px)}}
.layer{position:absolute;inset:0;border-radius:30px;transform-style:preserve-3d;transition:transform .5s var(--ease)}
/* fanned-out exploded stack so every drawn layer stays visible */
.layer--board{background:linear-gradient(150deg,#12331f,#0a1c12);border:1px solid #1f5c39;transform:translateZ(-96px) translate(46%,19%) rotate(4deg)}
.layer--batt{background:linear-gradient(150deg,#1b1d24,#101218);border:1px solid #2a2f3a;transform:translateZ(-58px) translate(29%,12%) rotate(2.5deg)}
.layer--lcd{background:linear-gradient(150deg,#0b0d12,#05060a);border:1px solid #232833;transform:translateZ(-24px) translate(12%,5%) rotate(1deg)}
.layer--glass{
  background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 42%,rgba(226,58,46,.16));
  border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(2px);transform:translateZ(16px);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9)
}
.device__stage:hover .layer--board{transform:translateZ(-140px) translate(60%,33%) rotate(6deg)}
.device__stage:hover .layer--batt{transform:translateZ(-86px) translate(38%,21%) rotate(3.5deg)}
.device__stage:hover .layer--glass{transform:translateZ(46px) translate(-6%,-4%)}
.layer__inner{position:absolute;inset:11px;border-radius:22px;overflow:hidden}
/* drawn artwork inside each exploded layer (SVG, see icons.js #a-pcb / #a-batt / #a-lcd) */
.layer__art{position:absolute;inset:7px;border-radius:24px;overflow:hidden}
.layer__art svg{width:100%;height:100%;display:block}
.notch-bar{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:38%;height:16px;background:#05060a;border-radius:0 0 12px 12px;z-index:3}
.screen{position:absolute;inset:11px;border-radius:22px;background:linear-gradient(165deg,#101822,#07090d 60%);overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.screen__ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--red) 0 78%,rgba(255,255,255,.09) 78% 100%);position:relative}
.screen__ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#080a0e}
.screen__ring b{position:relative;z-index:2;font-family:var(--f-display);font-size:23px;font-weight:900;color:#fff}
.screen small{color:#8b93a3;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.screen__bars{display:flex;gap:5px;align-items:flex-end;height:34px;margin-top:2px}
.screen__bars i{width:5px;background:linear-gradient(180deg,var(--red-2),var(--red-deep));border-radius:2px;animation:eq 1.5s ease-in-out infinite}
@keyframes eq{0%,100%{height:26%}50%{height:100%}}
.tag{
  position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(15,17,22,.92);
  border:1px solid var(--line-2);border-radius:100px;font-size:13.5px;font-weight:800;color:#eaeef5;
  box-shadow:var(--sh-2);white-space:nowrap;z-index:6;backdrop-filter:blur(6px)
}
.tag svg{width:16px;height:16px;color:var(--red-2)}
.tag--1{top:8%;inset-inline-start:-2%;animation:bob 5s ease-in-out infinite}
.tag--2{top:44%;inset-inline-end:-4%;animation:bob 6.4s ease-in-out .6s infinite}
.tag--3{bottom:9%;inset-inline-start:4%;animation:bob 5.8s ease-in-out 1.1s infinite}
@keyframes bob{50%{transform:translateY(-11px)}}
.device__ring{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(255,255,255,.10);animation:spin 44s linear infinite}
.device__ring--2{width:112%;border-style:solid;border-color:rgba(226,58,46,.14);animation-duration:66s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 9. TRUST STRIP / MARQUEE ---------- */
.strip{background:#06070a;border-block:1px solid var(--line);padding-block:20px;overflow:hidden;position:relative}
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none}
.strip::before{inset-inline-start:0;background:linear-gradient(to right,#06070a,transparent)}
.strip::after{inset-inline-end:0;background:linear-gradient(to left,#06070a,transparent)}
.marquee{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.strip:hover .marquee{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.marquee span{
  font-family:var(--f-display);font-weight:900;font-size:clamp(17px,2vw,23px);letter-spacing:.02em;
  color:#5b6473;white-space:nowrap;transition:color .25s;display:inline-flex;align-items:center;gap:12px
}
.marquee span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);opacity:.55}
.marquee span:hover{color:#e9ecf2}

/* ---------- 10. CARDS ---------- */
.card{padding:clamp(20px,2.3vw,30px);display:flex;flex-direction:column;gap:12px;transition:transform .32s var(--ease)}
.card:hover{transform:translateY(-6px)}
.card__ico{
  width:56px;height:56px;display:grid;place-items:center;flex:none;
  background:linear-gradient(150deg,rgba(226,58,46,.22),rgba(226,58,46,.05));
  border:1px solid rgba(226,58,46,.32);clip-path:var(--notch-sm)
}
.card__ico svg{width:27px;height:27px;color:var(--red-2)}
.card h3{font-size:20.5px}
.card p{color:var(--muted);font-size:15.6px;line-height:1.68;margin:0}
.card__list{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.card__list li{font-size:13px;font-weight:700;color:#aab3c1;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:5px 11px;border-radius:100px}
.card__num{position:absolute;top:14px;inset-inline-end:18px;font-family:var(--f-display);font-size:44px;font-weight:900;color:rgba(255,255,255,.045);line-height:1;pointer-events:none}

/* light cards */
.lcard{background:#fff;border:1px solid var(--line-light);border-radius:var(--r);padding:clamp(20px,2.3vw,28px);
  box-shadow:0 1px 2px rgba(12,14,18,.05),0 14px 34px -26px rgba(12,14,18,.5);transition:transform .3s var(--ease),box-shadow .3s}
.lcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px -22px rgba(12,14,18,.42)}
.lcard h3{font-size:20px;margin-bottom:8px}
.lcard p{color:var(--on-light-mute);font-size:15.6px;margin:0}
.lcard__ico{width:50px;height:50px;display:grid;place-items:center;background:var(--red-soft);border-radius:13px;margin-bottom:14px}
.lcard__ico svg{width:25px;height:25px;color:#cf2b20}

/* ---------- 11. STATS ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);clip-path:var(--notch)}
.stat{background:var(--ink-2);padding:clamp(20px,2.4vw,32px) 18px;text-align:center}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(30px,4vw,46px);font-weight:900;line-height:1;
  background:linear-gradient(180deg,#fff,#98a1b1);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:9px;font-size:14.5px;color:var(--muted);font-weight:600}
.stat i{color:var(--red-2);font-style:normal}

/* ---------- 12. PROCESS RAIL ---------- */
.rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.rail::before{content:"";position:absolute;top:31px;inset-inline:8%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(10,12,16,.22) 0 8px,transparent 8px 16px)}
.sec:not(.sec--light) .rail::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 8px,transparent 8px 16px)}
.step{position:relative;text-align:center}
/* the hexagon plates themselves live in the GRAPHICS PASS block (::before/::after) */
.step b{
  position:relative;z-index:2;width:66px;height:66px;margin-inline:auto;display:grid;place-items:center;
  font-family:var(--f-display);font-size:23px;font-weight:900;color:#fff
}
.step h4{margin-top:16px;font-size:18.5px}
.step p{margin-top:7px;font-size:15px;color:var(--muted)}
.sec--light .step p{color:var(--on-light-mute)}

/* ---------- 13. PRICE TABLE ---------- */
.ptable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;
  box-shadow:0 20px 46px -30px rgba(12,14,18,.6);border:1px solid var(--line-light)}
.ptable caption{caption-side:bottom;padding-top:14px;font-size:13.6px;color:var(--on-light-mute);text-align:start}
.ptable thead th{background:linear-gradient(135deg,#16191f,#0c0e12);color:#fff;font-family:var(--f-display);font-weight:800;
  font-size:15px;padding:15px 20px;text-align:start;letter-spacing:.01em}
.ptable td{padding:14px 20px;border-top:1px solid var(--line-light);font-size:16px;vertical-align:middle}
.ptable tbody tr:nth-child(even){background:#fafbfc}
.ptable tbody tr:hover{background:#fff3f2}
.ptable .price{font-family:var(--f-display);font-weight:900;color:#cf2b20;white-space:nowrap;font-size:17px}
.ptable .dev{display:flex;align-items:center;gap:11px;font-weight:700}
.ptable .dev svg{width:21px;height:21px;color:#8a93a2;flex:none}
.ptable .tt{font-size:14px;color:var(--on-light-mute)}

/* ---------- 14. TABS ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px}
.tab{
  padding:11px 20px;font-family:var(--f-display);font-weight:800;font-size:15px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#c3cad6;transition:.22s
}
.tab:hover{color:#fff;border-color:var(--line-2)}
.tab.is-on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:var(--sh-red)}
.sec--light .tab{background:#fff;border-color:var(--line-light);color:#39414f}
.sec--light .tab.is-on{background:var(--on-light);border-color:var(--on-light);color:#fff;box-shadow:none}
.tabpane{display:none;animation:fadeUp .45s var(--ease)}
.tabpane.is-on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}

/* ---------- 15. ACCORDION ---------- */
.acc{border-top:1px solid var(--line)}
.sec--light .acc{border-color:var(--line-light)}
.acc__item{border-bottom:1px solid var(--line)}
.sec--light .acc__item{border-color:var(--line-light)}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:start;
  padding:20px 4px;font-family:var(--f-display);font-weight:800;font-size:clamp(16.5px,1.8vw,19px);transition:color .2s
}
.acc__q:hover{color:var(--red-2)}
.sec--light .acc__q:hover{color:#cf2b20}
.acc__q i{position:relative;flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:50%;transition:.28s var(--ease);font-style:normal}
.sec--light .acc__q i{border-color:var(--line-light)}
.acc__q i::before,.acc__q i::after{content:"";position:absolute;width:12px;height:2px;background:currentColor;transition:.28s var(--ease)}
.acc__q i::after{transform:rotate(90deg)}
.acc__item.is-open .acc__q{color:var(--red-2)}
.sec--light .acc__item.is-open .acc__q{color:#cf2b20}
.acc__item.is-open .acc__q i{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(135deg)}
.acc__a{max-height:0;overflow:hidden;transition:max-height .42s var(--ease)}
.acc__a p{padding:0 4px 22px;color:var(--muted);font-size:16px;max-width:78ch}
.sec--light .acc__a p{color:var(--on-light-mute)}

/* ---------- 16. REVIEWS ---------- */
.rev{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;gap:14px;height:100%}
.stars{display:flex;gap:3px;color:#ffb400}
.stars svg{width:17px;height:17px}
.rev p{font-size:16.4px;line-height:1.72;color:#d3d9e3;margin:0}
.rev__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:6px}
.rev__av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:900;
  background:linear-gradient(140deg,#f0453a,#8e1a12);color:#fff;flex:none;font-size:16px}
.rev__who b{display:block;font-size:15.5px}
.rev__who span{font-size:13px;color:var(--muted)}
.gscore{display:flex;align-items:center;gap:16px;padding:18px 22px;background:#fff;border-radius:var(--r);border:1px solid var(--line-light);color:var(--on-light)}
.gscore b{font-family:var(--f-display);font-size:40px;font-weight:900;line-height:1}

/* ---------- 17. BRANCHES ---------- */
.branch{overflow:hidden;border-radius:var(--r);border:1px solid var(--line-light);background:#fff;display:flex;flex-direction:column}
.branch__map{aspect-ratio:16/10;background:#e7e9ee;position:relative}
.branch__map iframe{width:100%;height:100%;border:0;filter:grayscale(.25) contrast(1.04)}
.branch__body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:12px;flex:1}
.branch__body h3{font-size:21px}
.branch__meta{display:grid;gap:9px;font-size:15.6px;color:var(--on-light-mute)}
.branch__meta li{display:flex;align-items:flex-start;gap:10px}
.branch__meta svg{width:18px;height:18px;color:#cf2b20;flex:none;margin-top:4px}
.branch__acts{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
/* single-branch layout: map beside the details instead of above them */
.branch--wide{display:grid;grid-template-columns:1.05fr .95fr}
.branch--wide .branch__map{aspect-ratio:auto;min-height:370px}
.branch--wide .branch__body{padding:clamp(22px,2.6vw,34px)}
@media (max-width:860px){
  .branch--wide{grid-template-columns:1fr}
  .branch--wide .branch__map{aspect-ratio:16/10;min-height:0}
}
.tagline{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;background:var(--red);color:#fff;font-family:var(--f-display);
  font-weight:800;font-size:12.5px;padding:5px 12px;border-radius:100px;letter-spacing:.02em}

/* ---------- 18. CTA BAND ---------- */
.ctaband{position:relative;overflow:hidden;background:linear-gradient(120deg,#c0261c,#7d1009 60%,#4a0a06);color:#fff}
.ctaband .wrap{position:relative;z-index:2;padding-block:clamp(46px,5.5vw,80px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.ctaband h2{font-size:clamp(26px,3.6vw,42px);max-width:19ch}
.ctaband p{margin-top:10px;color:rgba(255,255,255,.86);font-size:17px;max-width:52ch}
.ctaband__acts{display:flex;gap:12px;flex-wrap:wrap}
.ctaband::after{content:"";position:absolute;inset:0;opacity:.24;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 30h60M30 0v60' stroke='%23fff' stroke-opacity='.25'/%3E%3C/svg%3E")}

/* ---------- 19. FORMS ---------- */
.form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-family:var(--f-display);font-weight:700;font-size:14.5px;color:#cfd6e0}
.sec--light .field label{color:#39414f}
.field input,.field select,.field textarea{
  width:100%;padding:13px 15px;background:rgba(255,255,255,.045);border:1px solid var(--line-2);border-radius:11px;
  color:var(--txt);font-size:16px;transition:border-color .2s,background .2s
}
.sec--light .field input,.sec--light .field select,.sec--light .field textarea{background:#fff;border-color:var(--line-light);color:var(--on-light)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:rgba(226,58,46,.06)}
.sec--light .field input:focus,.sec--light .field select:focus,.sec--light .field textarea:focus{background:#fff}
.field textarea{min-height:118px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23949daa' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 15px center;padding-inline-start:15px;padding-inline-end:38px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__note{font-size:13.4px;color:var(--muted)}
.sec--light .form__note{color:var(--on-light-mute)}
.formcard{padding:clamp(22px,2.6vw,34px)}
.form__done{margin-top:2px;padding:12px 15px;background:rgba(43,208,106,.10);border:1px solid rgba(43,208,106,.35);border-radius:11px;font-size:15px;line-height:1.6}

/* ---------- 20. PAGE HERO (subpages) ---------- */
.phero{position:relative;overflow:hidden;background:radial-gradient(110% 120% at 78% -30%,#1d1216,#0a0b0e 58%);border-bottom:1px solid var(--line)}
.phero__in{position:relative;z-index:3;padding-block:clamp(40px,5vw,72px) clamp(44px,5vw,76px);max-width:820px}
.phero .glow--red{width:520px;height:520px;top:-260px;inset-inline-end:-120px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.6px;color:var(--muted);margin-bottom:18px}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.45}
.phero h1{font-size:clamp(31px,4.8vw,54px);letter-spacing:-.025em}
.phero .lead{margin-top:16px}
.phero__acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* ---------- 21. FEATURE / SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.feat{display:flex;gap:15px;align-items:flex-start}
.feat__ico{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--red-soft);border:1px solid rgba(226,58,46,.28);clip-path:var(--notch-sm)}
.feat__ico svg{width:23px;height:23px;color:var(--red-2)}
.sec--light .feat__ico{background:var(--red-soft);border-color:rgba(226,58,46,.2)}
.sec--light .feat__ico svg{color:#cf2b20}
.feat h4{font-size:18.5px;margin-bottom:5px}
.feat p{font-size:15.6px;color:var(--muted);margin:0}
.sec--light .feat p{color:var(--on-light-mute)}
.checks{display:grid;gap:11px}
.checks li{display:flex;align-items:flex-start;gap:11px;font-size:16.2px}
.checks svg{width:21px;height:21px;color:var(--red-2);flex:none;margin-top:3px}
.sec--light .checks svg{color:#cf2b20}
.imgframe{position:relative;clip-path:var(--notch);background:linear-gradient(150deg,rgba(226,58,46,.5),rgba(255,255,255,.1) 40%,transparent 70%);padding:1.5px}
.imgframe>*{clip-path:var(--notch);display:block;width:100%}

/* pill row */
.pills{display:flex;flex-wrap:wrap;gap:9px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;font-size:14.6px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#cfd6e1}
.sec--light .pill{background:#fff;border-color:var(--line-light);color:#39414f}
.pill svg{width:16px;height:16px;color:var(--red-2)}
.sec--light .pill svg{color:#cf2b20}

/* product-ish tile */
.tile{position:relative;overflow:hidden;padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:10px;min-height:196px;transition:transform .3s var(--ease)}
.tile:hover{transform:translateY(-6px)}
.tile__art{position:absolute;inset-inline-end:-14px;bottom:-18px;width:120px;height:120px;opacity:.13;color:#fff;pointer-events:none}
.tile__art svg{width:100%;height:100%}
.tile h3{font-size:19.5px}
.tile p{font-size:15.2px;color:var(--muted);margin:0}
.tile .k{margin-top:auto;font-family:var(--f-display);font-weight:900;color:var(--red-2);font-size:15px}

/* ---------- 22. FOOTER ---------- */
.foot{background:#06070a;border-top:1px solid var(--line);padding-block:clamp(44px,5vw,68px) 26px;position:relative}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;gap:clamp(22px,3vw,44px)}
.foot img.flogo{height:44px;margin-bottom:16px}
.foot p{color:var(--muted);font-size:15.4px}
.foot h5{font-family:var(--f-display);font-weight:800;font-size:16px;margin-bottom:15px;letter-spacing:.01em}
.foot ul{display:grid;gap:10px}
.foot ul a,.foot ul li{color:var(--muted);font-size:15.2px}
.foot ul a:hover{color:#fff}
.foot__meta{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:15.2px}
.foot__meta svg{width:17px;height:17px;color:var(--red-2);flex:none;margin-top:4px}
.foot__bar{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 18px;
  align-items:center;justify-content:space-between;font-size:13.6px;color:#79828f}
.foot__bar a:hover{color:#fff}
/* builder credit — Vision Media */
.builtby{display:inline-flex;align-items:center;gap:9px;font-size:13.4px;color:#79828f;transition:color .25s}
.builtby img{height:21px;width:auto;filter:saturate(.7) brightness(.85);transition:filter .3s var(--ease),transform .3s var(--ease)}
.builtby b{font-family:var(--f-display);font-weight:800;color:#98a1b1;transition:color .25s}
.builtby:hover{color:#c9d0da}
.builtby:hover b{color:#fff}
.builtby:hover img{filter:none;transform:scale(1.1)}
/* roomier, easier-to-tap footer bottom row on phones */
@media (max-width:620px){
  .foot__bar{flex-direction:column;justify-content:center;text-align:center;gap:16px;padding-top:24px}
  .foot__bar a{display:inline-block;padding:4px 6px}
  .builtby{padding:2px 0}
}
.socials{display:flex;gap:9px}
.socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;transition:.22s}
.socials a:hover{border-color:var(--red);background:var(--red-soft);color:#fff}
.socials svg{width:18px;height:18px}

/* ---------- 23. FLOATING UI ---------- */
.fab{position:fixed;inset-inline-end:18px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:11px}
.fab a,.fab button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);transition:transform .22s var(--ease)}
.fab a:hover,.fab button:hover{transform:scale(1.08)}
.fab svg{width:26px;height:26px}
.fab__wa{background:#25d366;color:#0b2f18}
.fab__top{background:var(--panel-2);border:1px solid var(--line-2);color:#fff;opacity:0;pointer-events:none}
.fab__top.is-on{opacity:1;pointer-events:auto}
.fab__a11y{background:#1b62d4;color:#fff}

.mbar{position:fixed;inset-inline:0;bottom:0;z-index:78;display:none;background:rgba(9,10,13,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:9px 8px calc(9px + env(safe-area-inset-bottom))}
/* auto columns so a hidden action (e.g. WhatsApp before it is configured) leaves no gap */
.mbar ul{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.mbar a{display:grid;justify-items:center;gap:4px;padding:7px 2px;font-size:11.6px;font-weight:700;color:#c6ccd7;border-radius:11px}
.mbar a svg{width:21px;height:21px;color:var(--red-2)}
.mbar a.is-call{background:var(--red);color:#fff}
.mbar a.is-call svg{color:#fff}

/* cookie / tracking consent bar */
.cookiebar{
  position:fixed;z-index:84;inset-inline:16px;bottom:16px;margin-inline:auto;max-width:760px;
  background:rgba(14,16,21,.97);border:1px solid var(--line-2);clip-path:var(--notch);
  padding:18px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  box-shadow:0 22px 60px -18px rgba(0,0,0,.9);backdrop-filter:blur(10px);
  opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease)
}
/* CRITICAL: an author `display` beats the UA `[hidden]{display:none}` rule, so without
   these two lines the dismissed bar stays in the layout at opacity:0 and silently
   swallows every tap at the bottom of the screen (the footer links). */
.cookiebar[hidden]{display:none}
.cookiebar{pointer-events:none}
.cookiebar.is-on{opacity:1;transform:none;pointer-events:auto}
.cookiebar p{flex:1 1 320px;margin:0;font-size:14.4px;line-height:1.6;color:#b9c1cd}
.cookiebar a{color:var(--red-2);text-decoration:underline;text-underline-offset:3px}
.cookiebar__acts{display:flex;gap:9px;flex-wrap:wrap}
@media (max-width:940px){.cookiebar{bottom:92px}}
@media (max-width:620px){.cookiebar{padding:14px 16px;gap:11px}.cookiebar p{font-size:13.6px;flex-basis:100%}.cookiebar .btn{flex:1 1 auto}.cc-long{display:none}}

/* a11y panel */
.a11y{position:fixed;inset-inline-end:18px;bottom:88px;z-index:82;width:264px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:16px;padding:16px;box-shadow:var(--sh-2);display:none}
.a11y.is-on{display:block;animation:fadeUp .3s var(--ease)}
.a11y h6{font-family:var(--f-display);font-size:15px;font-weight:800;margin:0 0 12px}
.a11y button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;font-size:14.4px;
  font-weight:700;color:#d5dbe4;border:1px solid var(--line);margin-bottom:7px;transition:.2s}
.a11y button:hover{border-color:var(--red);background:var(--red-soft);color:#fff}
body.a11y-contrast{filter:contrast(1.32) saturate(1.15)}
body.a11y-links a{text-decoration:underline !important;text-underline-offset:3px}
body.a11y-nomotion *{animation:none !important;transition:none !important}

/* ---------- 23b. PROSE (legal / text pages) ---------- */
.prose{max-width:82ch}
.prose h2{font-size:clamp(21px,2.3vw,28px);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:26px 0 8px}
.prose p,.prose li{color:var(--muted);font-size:16.4px;line-height:1.82}
.sec--light .prose p,.sec--light .prose li{color:var(--on-light-mute)}
.prose ul{display:grid;gap:9px;margin:12px 0 0;padding-inline-start:0}
.prose ul li{position:relative;padding-inline-start:20px}
.prose ul li::before{content:"";position:absolute;inset-inline-start:0;top:12px;width:7px;height:7px;background:var(--red);border-radius:50%}
.prose a{color:var(--red-2);text-decoration:underline;text-underline-offset:3px}
.sec--light .prose a{color:#cf2b20}
.prose .box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-top:20px}
.sec--light .prose .box{background:#fff;border-color:var(--line-light)}

/* =====================================================================
   23c. GRAPHICS PASS — drawn artwork, structural frames, cut edges
   ===================================================================== */

/* --- ghosted line-art watermark inside every service card (added by main.js) --- */
.card__art{position:absolute;inset-inline-end:-20px;bottom:-24px;width:136px;height:136px;
  color:#fff;opacity:.055;pointer-events:none;z-index:0}
.card__art svg{width:100%;height:100%;stroke-width:1.1}
.card>*{position:relative;z-index:1}
.card:hover .card__art{opacity:.1;transition:opacity .35s}

/* --- hexagon step markers --- */
.step b::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(150deg,var(--line-2),rgba(255,255,255,.06));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
}
.step b::after{
  content:"";position:absolute;inset:1.5px;z-index:-1;background:linear-gradient(150deg,#1a1e26,#0c0e12);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
}
.step b span{position:relative;z-index:1}
.sec--light .step b::after{background:linear-gradient(150deg,#1b1f29,#2d3340)}
.step.is-red b::before{background:linear-gradient(150deg,#ff6a5c,#8e1a12)}
.step.is-red b::after{background:linear-gradient(150deg,#f0453a,#b81f17)}
.step.is-red b{filter:drop-shadow(0 10px 22px rgba(226,58,46,.4))}

/* --- angled band edges (structural cut between light and dark sections) --- */
.sec--angle-t{margin-top:-2px;padding-top:calc(var(--pad-y) + 40px);clip-path:polygon(0 46px,100% 0,100% 100%,0 100%)}
.sec--angle-b{margin-bottom:-2px;padding-bottom:calc(var(--pad-y) + 40px);clip-path:polygon(0 0,100% 0,100% calc(100% - 46px),0 100%)}
.sec--angle-t.sec--angle-b{clip-path:polygon(0 46px,100% 0,100% calc(100% - 46px),0 100%)}
@media (max-width:700px){
  .sec--angle-t{padding-top:calc(var(--pad-y) + 22px);clip-path:polygon(0 26px,100% 0,100% 100%,0 100%)}
  .sec--angle-b{padding-bottom:calc(var(--pad-y) + 22px);clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),0 100%)}
  .sec--angle-t.sec--angle-b{clip-path:polygon(0 26px,100% 0,100% calc(100% - 26px),0 100%)}
}

/* --- hairline + hex node section flourish --- */
.railstrip{position:relative;height:58px;display:grid;place-items:center;margin-top:8px}
.railstrip::before{content:"";position:absolute;inset-inline:8%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.railstrip i{position:relative;width:46px;height:46px;display:grid;place-items:center;color:var(--red-2);
  background:linear-gradient(150deg,#1a1e26,#0b0d11);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.railstrip i::before{content:"";position:absolute;inset:-1.4px;z-index:-1;background:var(--line-2);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.railstrip i svg{width:21px;height:21px}

/* --- workbench illustration frame --- */
.bench{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/26px 26px,
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/26px 26px,
    radial-gradient(80% 110% at 78% 100%,rgba(226,58,46,.20),transparent 62%),
    linear-gradient(180deg,#141c28,#0b0f16)}
.bench svg{width:100%;height:auto;display:block;position:relative;z-index:1}
.bench::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 24% 32%,rgba(120,180,255,.10),transparent 70%)}
.sec--light .bench{border-color:var(--line-light)}

/* --- before / after comparison --- */
.ba{position:relative;max-width:420px;margin-inline:auto;aspect-ratio:200/300;--p:52%;
  border-radius:26px;isolation:isolate}
.ba__l,.ba__r{position:absolute;inset:0}
.ba__l svg,.ba__r svg{width:100%;height:100%;display:block;filter:drop-shadow(0 26px 46px rgba(0,0,0,.6))}
.ba__r{clip-path:inset(0 0 0 var(--p))}
.ba__bar{position:absolute;top:0;bottom:0;inset-inline-start:auto;left:var(--p);width:2px;
  background:linear-gradient(180deg,transparent,var(--red-2) 12%,var(--red-2) 88%,transparent);z-index:3;pointer-events:none}
.ba__knob{position:absolute;top:50%;left:var(--p);transform:translate(-50%,-50%);width:44px;height:44px;z-index:4;
  display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#f0453a,#b81f17);
  box-shadow:0 10px 26px -8px rgba(226,58,46,.85);pointer-events:none;color:#fff}
.ba__knob svg{width:20px;height:20px}
/* direction:ltr so dragging right always RAISES the value (an RTL range inverts it) */
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0;direction:ltr}
.ba__tag{position:absolute;top:16px;z-index:4;font-family:var(--f-display);font-weight:800;font-size:12.5px;
  letter-spacing:.08em;padding:6px 13px;border-radius:100px;background:rgba(10,12,16,.78);border:1px solid var(--line-2);
  backdrop-filter:blur(4px)}
.ba__tag--b{right:14px;color:#ff8f85}
.ba__tag--a{left:14px;color:#5ce08a}

/* --- offer ribbon (gift / promo) --- */
.offer{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 22px;margin-bottom:26px;clip-path:var(--notch-sm);
  background:linear-gradient(105deg,rgba(226,58,46,.20),rgba(226,58,46,.06) 60%,transparent);
  border:1px solid rgba(226,58,46,.4)
}
.offer__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#f0453a,#b81f17);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.offer__ico svg{width:22px;height:22px}
.offer b{font-family:var(--f-display);font-size:clamp(16.5px,1.9vw,20px);display:block;line-height:1.3}
.offer span{font-size:14.8px;color:var(--muted)}
.sec--light .offer{background:linear-gradient(105deg,rgba(226,58,46,.14),rgba(226,58,46,.04) 60%,transparent);
  border-color:rgba(226,58,46,.3)}
.sec--light .offer span{color:var(--on-light-mute)}

/* --- delivery band (homepage) --- */
.delivery{position:relative;overflow:hidden;background:linear-gradient(120deg,#0d1a2b,#0a0c12 62%)}
.delivery .wrap{position:relative;z-index:2}
.delivery__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,54px);align-items:center}
.wolt{--bg:#00c2e8;background:#00c2e8;color:#04252c}
.wolt:hover{filter:brightness(1.08)}
@media (max-width:940px){.delivery__in{grid-template-columns:1fr}}

/* --- brand strip as cut chips --- */
.marquee span{padding:10px 20px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  clip-path:var(--notch-sm);font-size:clamp(14.5px,1.4vw,17.5px);color:#6d7686;transition:color .25s,border-color .25s,background .25s}
.marquee span::after{display:none}
.marquee span:hover{color:#fff;border-color:rgba(226,58,46,.55);background:rgba(226,58,46,.09)}
.strip{padding-block:22px}

/* --- footer: ghosted brand mark + top flourish --- */
.foot{overflow:hidden}
.foot__mark{position:absolute;inset-inline-start:-40px;bottom:-46px;width:270px;opacity:.028;pointer-events:none;
  filter:grayscale(1) brightness(3)}
.foot::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,58,46,.55),transparent)}

/* --- headings: brushed-metal fill (kept subtle) --- */
.h-xl,.hero h1,.phero h1{
  background:linear-gradient(178deg,#fff 26%,#c3cad6 72%,#8d95a4);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.sec--light .h-lg,.sec--light .h-md{color:var(--on-light)}

/* --- ticked list marker refinement --- */
.checks li{position:relative}

/* ---------- 24. REVEAL ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s}.rv-d5{transition-delay:.4s}.rv-d6{transition-delay:.48s}

/* ---------- 25. RESPONSIVE ---------- */
/* 7 nav items need a little breathing room on narrow laptops */
@media (max-width:1320px){
  .nav a{font-size:14.8px;padding:9px 9px}
  .brand img{height:34px}
  .callpill{padding:9px 13px;font-size:14.6px}
  .header__in{gap:10px}
}
@media (max-width:1080px){
  .hero__in{grid-template-columns:1fr;text-align:start}
  .device{order:-1;height:clamp(300px,60vw,430px)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:940px){
  :root{--hdr:64px}
  .burger{display:flex}
  .nav{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:6px;
    background:rgba(6,7,10,.985);backdrop-filter:blur(8px);padding:calc(var(--hdr) + 42px) 26px 30px;
    transform:translateY(-100%);z-index:69;overflow-y:auto;margin:0;
    /* visibility:hidden while closed — the header's backdrop-filter makes this fixed
       child anchor to the HEADER box, so translateY(-100%) parks it right on top of
       the topbar and would black it out. Also keeps the closed menu out of the tab order. */
    visibility:hidden;transition:transform .42s var(--ease),visibility 0s linear .42s
  }
  body.nav-open{overflow:hidden}
  body.nav-open .nav{transform:none;visibility:visible;transition:transform .42s var(--ease),visibility 0s}
  .header.nav-open-fix{backdrop-filter:none}
  /* keep the logo + burger (turned X) clickable ABOVE the open overlay */
  .brand,.header__cta{position:relative;z-index:71}
  .nav a{font-size:24px;padding:14px 10px;width:100%;max-width:420px;text-align:center}
  .nav a::after{inset-inline:35%}
  /* .nav becomes position:fixed here, so its margin-inline-start:auto no longer
     pushes anything — the burger must claim the free space itself. */
  .header__cta{margin-inline-start:auto}
  .header__cta .callpill{display:none}
  .g3,.split,.rail,.form__row{grid-template-columns:1fr}
  .rail::before{display:none}
  .rail{gap:20px}
  .step{display:grid;grid-template-columns:62px 1fr;gap:14px;text-align:start;align-items:start}
  .step b{margin:0}
  .step h4{margin-top:2px}
  .step > div{grid-column:2}
  .stats{grid-template-columns:repeat(2,1fr)}
  .mbar{display:block}
  body{--pad-bot:calc(92px + env(safe-area-inset-bottom))}
  .fab{bottom:88px}
  .a11y{bottom:152px}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
}
@media (max-width:620px){
  body{font-size:16.4px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:28px}
  /* mobile topbar: one readable, centred line (no cramped 11px grey text) */
  .topbar__list .hide-sm,.topbar__list li.hide-sm{display:none}
  .topbar{font-size:13.2px}
  .topbar__in{justify-content:center;gap:14px;min-height:40px}
  .topbar__list{gap:14px}
  .topbar__list li{font-weight:600;color:#c3cad5}
  .btn{padding:13px 20px;font-size:15.4px}
  .btn--lg{padding:15px 24px;font-size:16px}
  .hero__cta .btn{flex:1 1 100%}
  .ptable thead th:nth-child(3),.ptable td:nth-child(3){display:none}
  .ptable td,.ptable thead th{padding:12px 13px}
  .tabs{gap:7px}
  .tab{padding:9px 14px;font-size:14px}
  .device__stage{height:76%}
  .tag{font-size:12px;padding:7px 11px}
}

/* ---------- 26. MOTION / PRINT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
}
@media print{
  .header,.topbar,.fab,.mbar,.a11y,.ctaband,.progress{display:none !important}
  body{background:#fff;color:#000}
}