/* Yoma · yomacom.com
   Layout: editorial, asymmetric. Huge two-weight headlines, a single
   photographic element per section, mono labels as the "technical" voice.
   Tone: dark by default; sections marked data-tone="light" carry their own light palette,
   so the page reads dark → light → dark as you scroll, with clean section edges. */
@property --ink{syntax:"<color>";inherits:true;initial-value:#050608}
@property --ink-2{syntax:"<color>";inherits:true;initial-value:#0a0c13}
@property --ink-3{syntax:"<color>";inherits:true;initial-value:#10131d}
@property --paper{syntax:"<color>";inherits:true;initial-value:#eef0f6}
@property --mist{syntax:"<color>";inherits:true;initial-value:#9ba1b6}
@property --dim{syntax:"<color>";inherits:true;initial-value:#5d6378}
@property --line{syntax:"<color>";inherits:true;initial-value:rgba(238,240,246,.09)}
@property --line-2{syntax:"<color>";inherits:true;initial-value:rgba(238,240,246,.18)}
:root{
  color-scheme:dark;
  --ink:#050608;          /* page */
  --ink-2:#0a0c13;        /* raised band */
  --ink-3:#10131d;        /* panel */
  --paper:#eef0f6;        /* text */
  --mist:#9ba1b6;         /* secondary text */
  --dim:#5d6378;          /* tertiary */
  --line:rgba(238,240,246,.09);
  --line-2:rgba(238,240,246,.18);
  --blue:#3d7bff;
  --violet:#8b5cf6;
  --brand:linear-gradient(100deg,#3d7bff 0%,#7c5cff 60%,#a26bff 100%);
  --wa:#25d366;
  --f:"IBM Plex Sans Hebrew","Heebo","Segoe UI",Arial,sans-serif;
  --f-mono:"IBM Plex Mono","IBM Plex Sans Hebrew",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1240px;
  --ease:cubic-bezier(.16,.84,.24,1);
  --s-1:clamp(15px,1vw,16px);
  --s-lede:clamp(18px,1.45vw,21px);
  --s-h3:clamp(21px,1.7vw,26px);
  --s-h2:clamp(40px,5.6vw,84px);
  --s-h1:clamp(56px,10.5vw,168px);
}
:not(html)[data-tone="light"],html[data-tone="light"] .nav{
  --ink:#f3f4f8;--ink-2:#e9ebf2;--ink-3:#dfe2ea;
  --paper:#0b0d14;--mist:#4b5166;--dim:#7a8094;
  --line:rgba(11,13,20,.1);--line-2:rgba(11,13,20,.22);
}
section[data-tone="light"]{background:var(--ink);color:var(--paper);color-scheme:light}
.nav{color:var(--paper);--tone-t:.5s ease;transition:background .4s,border-color .4s,--ink var(--tone-t),--paper var(--tone-t),--mist var(--tone-t),--line var(--tone-t),--line-2 var(--tone-t)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--f);font-size:var(--s-1);line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3{font-weight:700;letter-spacing:-.03em;line-height:1;text-wrap:balance}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum";letter-spacing:.02em}
.thin{font-weight:200;letter-spacing:-.035em;color:var(--mist)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
::selection{background:var(--blue);color:#fff}
.skip{position:absolute;inset-inline-start:12px;top:-80px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:6px}

.eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:.16em;color:var(--mist);display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 14px var(--blue)}
.lede{font-size:var(--s-lede);color:var(--mist);font-weight:300;line-height:1.6;max-width:34ch}
.h2{font-size:var(--s-h2)}

/* pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding-inline:28px;border-radius:999px;font-weight:500;font-size:16px;border:1px solid transparent;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform .5s var(--ease),background .3s,border-color .3s,color .3s}
.pill--brand{background:var(--brand);color:#fff;box-shadow:0 14px 40px -12px rgba(61,123,255,.7)}
.pill--brand:hover{transform:translateY(-2px)}
.pill--line{border-color:var(--line-2);color:var(--paper)}
.pill--line:hover{border-color:var(--paper)}
.pill--light{height:42px;padding-inline:20px;font-size:14.5px;background:var(--paper);color:var(--ink)}
.pill--light:hover{background:#fff}
.pill--block{width:100%}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:50;padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid transparent}
.nav.is-scrolled{background:color-mix(in srgb,var(--ink) 80%,transparent);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:36px;height:76px}
.nav__logo{display:grid}
.nav__logo img{height:30px;width:auto;grid-area:1/1;transition:opacity .6s}
.nav__logo .logo-d{opacity:0}
html[data-tone="light"] .nav__logo .logo-d{opacity:1}
html[data-tone="light"] .nav__logo .logo-l{opacity:0}
.nav__links{display:flex;gap:32px;margin-inline-start:auto;font-size:14.5px;color:var(--mist)}
.nav__links a{transition:color .25s}
.nav__links a:hover{color:var(--paper)}
.nav__burger{display:none;margin-inline-start:auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.nav__burger span{width:16px;height:1.5px;background:var(--paper);transition:transform .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mnav{display:grid;padding:8px clamp(16px,4vw,40px) 24px;background:color-mix(in srgb,var(--ink) 96%,transparent);border-bottom:1px solid var(--line)}
.mnav[hidden]{display:none}
.mnav a{padding:16px 0;font-size:20px;border-bottom:1px solid var(--line)}

/* hero */
.hero{position:relative;padding-top:clamp(130px,16vh,190px);padding-bottom:clamp(60px,9vh,110px);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:1100px;max-height:1100px;border-radius:50%;
  background:radial-gradient(circle,rgba(61,123,255,.22),rgba(124,92,255,.08) 45%,transparent 70%);z-index:-2;inset-inline-start:-20%;top:-30%}
.hero__media{position:absolute;left:max(0px,calc((100vw - 1240px)/2 - 40px));top:0;bottom:0;width:min(36vw,520px);z-index:-1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(40px,7vh,90px)}
.tower{position:relative;height:min(64%,540px);aspect-ratio:755/1116;max-width:100%;transition:transform 1.2s var(--ease);will-change:transform}
.tower__body{position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.tower__body img{width:100%;height:100%;object-fit:contain;opacity:.95;will-change:transform,opacity;transform-origin:50% 55%}
/* LEDs breathe: colour-dodge leaves black pixels black, so only the lit parts brighten */
.tower__pulse{position:absolute;inset:0;background:linear-gradient(180deg,#2f5bff,#7a4dff);mix-blend-mode:color-dodge;opacity:0;animation:pulse 3.6s ease-in-out infinite;pointer-events:none}
/* a slow glint that travels down the stack */
.tower__sweep{position:absolute;inset:-20% 0;background:linear-gradient(180deg,transparent 42%,rgba(190,210,255,.9) 50%,transparent 58%);mix-blend-mode:overlay;transform:translateY(-60%);animation:sweep 6.5s cubic-bezier(.45,0,.25,1) infinite 1.2s;pointer-events:none}
.tower__glow{position:absolute;left:-10%;right:-10%;bottom:6%;height:14%;border-radius:50%;background:radial-gradient(closest-side,rgba(61,123,255,.55),rgba(124,92,255,.18) 55%,transparent);filter:blur(8px);animation:glow 3.6s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes pulse{50%{opacity:.32}}
@keyframes glow{50%{opacity:.55;transform:scaleX(.92)}}
@keyframes sweep{0%{transform:translateY(-60%)}55%,100%{transform:translateY(60%)}}
.hero__media{animation:drift 14s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(-14px) scale(1.02)}}
.hero__in{position:relative}
.hero__title{font-size:var(--s-h1);line-height:.92;letter-spacing:-.045em;margin-top:28px;max-width:11ch}
.hero__title span{display:block}
.hero__title .l2{font-weight:200;letter-spacing:-.05em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.hero__lead{margin-top:36px;font-size:var(--s-lede);color:var(--mist);font-weight:300;max-width:40ch;line-height:1.65}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.rating{display:inline-flex;align-items:center;gap:14px;margin-top:56px;padding:12px 18px 12px 22px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--mist);transition:border-color .3s}
.rating:hover{border-color:var(--line-2)}
.rating b{color:var(--paper);font-weight:500}
.rating__stars{color:#f5c451;letter-spacing:2px;font-size:14px}

/* ticker */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding-block:26px;background:var(--ink-2)}
.ticker__track{display:flex;align-items:center;gap:34px;width:max-content;animation:tick 55s linear infinite}
.ticker span{font-size:clamp(22px,2.6vw,38px);font-weight:200;letter-spacing:-.02em;white-space:nowrap;color:var(--paper)}
.ticker i{width:10px;height:10px;flex:none;transform:rotate(45deg);background:var(--brand)}
@keyframes tick{to{transform:translateX(50%)}}

/* sections */
.sec{padding-block:clamp(120px,15vw,220px)}
.sec--tight{padding-top:0}

/* services */
.services{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,110px);align-items:start}
.services__head{position:sticky;top:110px;display:grid;gap:22px}
.services .h2,.about .h2,.shelf__head .h2{font-size:clamp(36px,4.1vw,62px)}
.svc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
@media (min-width:1001px){.svc{padding-bottom:calc(72vh - 150px)}#services{padding-bottom:clamp(40px,5vw,80px)}}
.svc__row{display:grid;grid-template-columns:1fr;gap:12px;padding:44px 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate;transition:padding .5s var(--ease)}
.svc__row::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(61,123,255,.07),transparent 70%)}
.svc__row:hover::after{opacity:1}
.svc__row::before{content:"";position:absolute;inset-inline-start:0;top:-1px;height:1px;width:0;background:var(--brand);transition:width .7s var(--ease)}
.svc__row:hover::before{width:100%}
.svc__row:hover{padding-inline-start:18px}
.svc__row h3{font-size:var(--s-h3);font-weight:600;letter-spacing:-.02em}
.svc__row p{color:var(--mist);font-weight:300;max-width:52ch}
.tags{font-size:12px;color:var(--dim);letter-spacing:.06em;direction:ltr;text-align:right}
.svc__row{grid-template-columns:52px 1fr}
.svc__row>*:not(.svc__n){grid-column:2}
.svc__n{grid-row:1/span 3;font-size:13px;letter-spacing:.08em;color:var(--dim);padding-top:7px;transition:color .5s}
.svc__row.is-active .svc__n{color:var(--blue)}
.svc__row.is-active::before{width:100%}
.svc__img{display:none}
.svc__vis{position:relative;margin-top:14px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#05060a;
  box-shadow:0 30px 60px -30px rgba(20,30,90,.55),0 0 0 1px rgba(124,92,255,.25),0 0 46px -6px rgba(61,123,255,.45),0 0 90px -20px rgba(139,92,246,.45);
  animation:vglow 4s ease-in-out infinite}
@keyframes vglow{50%{box-shadow:0 30px 60px -30px rgba(20,30,90,.55),0 0 0 1px rgba(124,92,255,.35),0 0 60px -4px rgba(61,123,255,.65),0 0 120px -16px rgba(139,92,246,.6)}}
/* a light that circles the frame */
@property --va{syntax:"<angle>";inherits:false;initial-value:0deg}
.vis__frame{position:absolute;inset:0;border-radius:inherit;padding:2.5px;z-index:3;pointer-events:none;
  background:
    conic-gradient(from var(--va),transparent 0 45%,#3d7bff 62%,#ffffff 70%,#a26bff 78%,transparent 92%),
    linear-gradient(135deg,rgba(61,123,255,.55),rgba(139,92,246,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 6px rgba(120,140,255,.9));
  animation:vframe 5s linear infinite}
@keyframes vframe{to{--va:360deg}}
/* viewfinder corners */
.vis__corners{position:absolute;inset:12px;z-index:2;pointer-events:none;opacity:.85;
  --c:rgba(238,240,246,.9);--l:18px;--w:1.5px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 0/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 0/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 100%/var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 100%/var(--w) var(--l);
  background-repeat:no-repeat}
.svc__vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);filter:blur(10px) brightness(.7);
  transition:opacity 1.1s var(--ease),transform 1.8s var(--ease),filter 1.2s var(--ease);
  animation:kb 16s ease-in-out infinite alternate;animation-play-state:paused}
.svc__vis img.is-on{opacity:1;transform:none;filter:none;animation-play-state:running}
/* slow "camera" drift per shot, so the still reads like footage */
.svc__vis img:nth-of-type(1){--kx:-3%;--ky:-2%;--ks:1.14}
.svc__vis img:nth-of-type(2){--kx:2%;--ky:-3%;--ks:1.16}
.svc__vis img:nth-of-type(3){--kx:0%;--ky:3%;--ks:1.12}
.svc__vis img:nth-of-type(4){--kx:3%;--ky:1%;--ks:1.15}
.svc__vis img:nth-of-type(5){--kx:-2%;--ky:2%;--ks:1.13}
.svc__vis img:nth-of-type(6){--kx:2%;--ky:-2%;--ks:1.14}
@keyframes kb{from{scale:1.02;translate:0 0}to{scale:var(--ks);translate:var(--kx) var(--ky)}}
/* lights breathe and a glint passes, like a live shot */
.vis__pulse{position:absolute;inset:0;background:linear-gradient(160deg,#2f5bff,#7a4dff);mix-blend-mode:color-dodge;opacity:0;animation:pulse 3.4s ease-in-out infinite;pointer-events:none}
.vis__sweep{position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 44%,rgba(200,215,255,.55) 50%,transparent 56%);mix-blend-mode:overlay;transform:translateX(-70%);animation:vsweep 7s cubic-bezier(.45,0,.25,1) infinite 1.5s;pointer-events:none}
@keyframes vsweep{0%{transform:translateX(70%)}45%,100%{transform:translateX(-70%)}}
/* story-style progress: which of the six you're watching */
.vis__bars{position:absolute;top:21px;right:44px;left:44px;display:flex;gap:5px;z-index:2}
.vis__bars i{flex:1;height:2px;border-radius:2px;background:rgba(238,240,246,.22);overflow:hidden;position:relative}
.vis__bars i::after{content:"";position:absolute;inset:0;background:#eef0f6;transform-origin:100% 50%;transform:scaleX(0)}
.vis__bars i.done::after{transform:scaleX(1)}
.vis__bars i.now::after{animation:bar 5s linear forwards}
@keyframes bar{to{transform:scaleX(1)}}
.svc__vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(5,6,8,.7));pointer-events:none}
.svc__vis figcaption{position:absolute;bottom:22px;inset-inline-start:26px;z-index:1;font-size:12px;letter-spacing:.14em;color:#eef0f6}

/* about */
.about{background:var(--ink-2);border-block:1px solid var(--line);padding-block:clamp(120px,14vw,200px);overflow:hidden}
.about__in{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.about__photo{position:relative;border-radius:4px;overflow:hidden;background:var(--ink-3);width:100%;max-width:380px}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.95) contrast(1.04)}
.about__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(5,6,8,.85));pointer-events:none}
.about__photo figcaption{position:absolute;bottom:20px;inset-inline-start:22px;z-index:1;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#eef0f6}
.about__copy{display:grid;gap:22px}
.about__copy>p:not(.eyebrow):not(.certs){color:var(--mist);font-size:var(--s-lede);font-weight:300;max-width:46ch;line-height:1.65}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border-top:1px solid var(--line)}
.facts div{padding:22px 0 0;display:grid;gap:4px}
.facts dt{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:-.02em;direction:ltr;text-align:right}
.facts dd{font-size:14px;color:var(--mist)}
.certs{font-size:12px;color:var(--dim);letter-spacing:.08em;margin-top:6px}

/* shelf */
.shelf__head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;margin-bottom:56px}
.shelf__head>div{display:grid;gap:28px}
.shelf{--gut:max(clamp(16px,4vw,40px),calc((100vw - var(--wrap))/2 + 40px));display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);padding-bottom:12px;scrollbar-width:none}
.shelf::-webkit-scrollbar{display:none}
.shelf::before,.shelf::after{content:"";flex:0 0 calc(var(--gut) - 20px)}
.prod{flex:0 0 clamp(260px,26vw,340px);scroll-snap-align:start;display:grid;gap:8px}
.prod__img{aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:radial-gradient(circle at 50% 60%,#13205a 0%,#010a26 62%);display:grid;place-items:center;padding:12%;margin-bottom:14px}
.prod__img img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--ease);
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 70%,transparent 100%)}
.prod:hover .prod__img img{transform:scale(1.07)}
.prod__tag{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.prod h3{font-size:22px;font-weight:600;letter-spacing:-.02em;text-align:right}
.prod__d{font-size:14.5px;color:var(--mist)}
.shelf__foot{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:20px}
.fine{font-size:13px;color:var(--dim)}
.shelf__nav{display:flex;gap:10px}
.arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--paper);font-size:18px;cursor:pointer;transition:background .3s,border-color .3s}
.arrow:hover{background:var(--paper);color:var(--ink)}

/* reviews */
.rev__head{margin-top:-40px;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:56px}
.rev__score{display:flex;align-items:center;gap:20px}
.rev__num{font-size:clamp(72px,9vw,130px);font-weight:300;letter-spacing:-.05em;line-height:.9}
.rev__meta{font-size:14px;color:var(--mist);line-height:1.6}
.rev{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto;gap:1px;background:var(--line);border:1px solid var(--line)}
.q{background:var(--ink);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:36px;min-width:0}
.q blockquote{font-size:clamp(19px,1.6vw,23px);font-weight:300;line-height:1.5;letter-spacing:-.01em}
.q blockquote::before{content:"״";display:block;font-size:56px;line-height:.6;font-weight:200;margin-bottom:14px;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.q--lead{grid-row:span 2;background:var(--ink-2)}
.q--lead blockquote{font-size:clamp(26px,2.6vw,38px);font-weight:200;letter-spacing:-.025em;line-height:1.3}
.q figcaption{display:flex;justify-content:space-between;gap:12px;align-items:baseline;border-top:1px solid var(--line);padding-top:16px;flex-wrap:wrap}
.q figcaption b{font-weight:500}
.q figcaption span{font-size:11.5px;letter-spacing:.12em;color:var(--dim)}

/* steps */
@media (min-width:1001px) and (min-height:640px){
  .proc{padding-block:0}
  .proc__pin{height:240vh}
  .proc__sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:60px}
  .proc__sticky>.wrap{width:100%}
}
.proc__head{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.proc__head>div{display:grid;gap:26px}
.proc__head .h2{font-size:clamp(36px,4.1vw,62px)}
.steps{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);position:relative}
.steps__track{position:absolute;top:var(--ty,129px);right:0;left:0;height:2px;margin-top:-1px;background:var(--line-2)}
.steps__fill{position:absolute;inset:0;background:var(--brand);transform-origin:100% 50%;transform:scaleX(var(--fill,0))}
/* a glowing "data packet" rides the cable */
.steps__packet{position:absolute;top:50%;right:calc(var(--fill,0) * 100%);width:120px;height:3px;transform:translate(100%,-50%);pointer-events:none;
  background:linear-gradient(to right,#fff,rgba(124,92,255,.8) 12%,rgba(61,123,255,0) 100%);border-radius:3px;filter:drop-shadow(0 0 6px #6d8bff);opacity:var(--pk,0);transition:opacity .4s}
.steps__packet::before{content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 12px 4px rgba(120,140,255,.9),0 0 30px 8px rgba(124,92,255,.5)}
.steps li{display:grid;gap:12px;align-content:start;position:relative}
.steps__n,.steps li h3,.steps li p{transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease)}
.js .steps li:not(.on) .steps__n{opacity:.12;transform:translateY(18px) scale(.94);filter:blur(4px)}
.js .steps li:not(.on) h3,.js .steps li:not(.on) p{opacity:.25;transform:translateY(14px)}
.steps li.on h3{transition-delay:.08s}.steps li.on p{transition-delay:.16s}
.steps__n{font-family:var(--f);font-size:clamp(64px,7vw,104px);font-weight:200;line-height:1;letter-spacing:-.05em;height:96px;transform-origin:100% 100%;
  background:linear-gradient(100deg,#3d7bff,#7c5cff 45%,#c4b5fd 55%,#7c5cff 65%,#a26bff);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.steps li.on .steps__n{animation:shine 1.6s var(--ease) .1s both}
@keyframes shine{from{background-position:100% 0}to{background-position:0 0}}
.steps__dot{width:11px;height:11px;border-radius:50%;background:var(--ink);border:1.5px solid var(--line-2);margin:16px 0 18px;position:relative;transition:background .5s,border-color .5s,box-shadow .5s}
.steps__dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:1.5px solid var(--blue);opacity:0}
.steps li.on .steps__dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 6px rgba(61,123,255,.15)}
.steps li.on .steps__dot::after{animation:ping 1.2s var(--ease) both}
@keyframes ping{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(4.5)}}
.steps h3{font-size:var(--s-h3);font-weight:600}
.steps p{color:var(--mist);font-weight:300;font-size:15.5px;max-width:28ch}

/* contact */
.contact{background:radial-gradient(ellipse 60% 80% at 15% 100%,rgba(61,123,255,.18),transparent 60%),var(--ink-2);border-top:1px solid var(--line);padding-block:clamp(120px,14vw,200px)}
.contact__in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(40px,6vw,90px);align-items:end}
.contact__big{display:grid;gap:30px;min-width:0}
.phone{font-family:var(--f);font-size:clamp(40px,6vw,92px);font-weight:200;letter-spacing:-.03em;white-space:nowrap;line-height:.95;text-align:right;transition:color .3s}
.phone:hover{color:var(--blue)}
.cinfo{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--line)}
.cinfo li{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);color:var(--mist)}
.cinfo .mono{font-size:12px;letter-spacing:.14em;color:var(--dim);padding-top:3px}
.cinfo a:hover{color:var(--paper)}
.plinks{display:flex;gap:22px;flex-wrap:wrap}
.plinks a{color:var(--paper);border-bottom:1px solid var(--line-2);padding-bottom:2px}
.textlink{color:var(--paper);border-bottom:1px solid var(--line-2);display:inline-block;margin-top:6px}
.textlink:hover{border-color:var(--blue)}
.form{display:grid;gap:18px;padding:clamp(24px,3vw,38px);background:var(--ink);border:1px solid var(--line-2);border-radius:4px}
.form__t{font-size:24px;font-weight:600;letter-spacing:-.02em}
.form__sub{font-size:14.5px;color:var(--mist);margin:-8px 0 6px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:grid;gap:8px;font-size:13.5px;color:var(--mist)}
.form input:not([type=radio]):not([type=checkbox]),.form textarea{width:100%;font:inherit;font-size:16px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid var(--line-2);padding:10px 0;border-radius:0;transition:border-color .3s;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--blue)}
.form textarea::placeholder{color:var(--dim)}
.form [aria-invalid="true"]{border-color:#f87171!important}
.seg{border:0;margin:0;padding:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.seg legend{float:right;font-size:13.5px;color:var(--mist);margin-inline-end:8px;padding:0}
.seg label{display:block}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-block;padding:7px 20px;border:1px solid var(--line-2);border-radius:999px;font-size:14px;cursor:pointer;transition:all .25s;color:var(--mist)}
.seg input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.seg input:focus-visible+span{outline:2px solid var(--blue);outline-offset:2px}
.consent{grid-template-columns:auto 1fr!important;align-items:start;font-size:12.5px!important;color:var(--dim)!important}
.consent input{width:16px;height:16px;margin-top:3px;accent-color:var(--blue)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.form__note{font-size:13.5px;color:#6ee7b7;min-height:1em;text-align:center}

/* footer */
.foot{border-top:1px solid var(--line);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));font-size:13.5px;color:var(--dim)}
.foot__in{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot img{height:22px;width:auto}
.foot nav{display:flex;gap:22px;margin-inline-start:auto}
.foot nav a:hover{color:var(--paper)}

.fab{position:fixed;left:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:60;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--wa);box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:transform .4s var(--ease)}
.fab svg{width:28px;height:28px;fill:#fff}
.fab:hover{transform:scale(1.07)}

/* motion: content is visible at rest; JS adds a gentle rise only when it runs */
.js .rise{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rise.pre{opacity:0;transform:translateY(28px)}
.hero__title .l1,.hero__title .l2,.hero .eyebrow,.hero__lead,.hero__ctas,.rating{animation:in 1.2s var(--ease) both}
.hero__title .l2{animation-delay:.12s}.hero__lead{animation-delay:.24s}.hero__ctas{animation-delay:.34s}.rating{animation-delay:.44s}
@keyframes in{from{opacity:0;transform:translateY(24px)}}

/* headline line reveal (JS adds .split only to headings below the fold) */
.split br{display:none}
.split .w{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.split .w>span{display:block;text-wrap:balance;transform:translateY(102%);transition:transform 1.3s var(--ease);transition-delay:calc(var(--i) * 140ms)}
.split.in .w>span{transform:none}

/* pinned horizontal shelf (desktop; JS adds .is-pinned) */
.pin.is-pinned .pin__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:60px}
.shelfsec.has-pin{padding-block:0}
.pin.is-pinned .shelf{overflow:visible;scroll-snap-type:none;will-change:transform}
.pin.is-pinned .shelf__head{margin-bottom:clamp(24px,4vh,48px)}
.pin.is-pinned .prod{flex-basis:clamp(240px,min(24vw,40vh),330px)}
.pin.is-pinned .shelf__nav{display:none}
.pin.is-pinned .shelf__foot{margin-top:clamp(16px,3vh,28px)}

/* cost calculator */
.cost{border-top:1px solid var(--line);padding-block:clamp(110px,13vw,190px);background:radial-gradient(ellipse 50% 70% at 10% 50%,rgba(61,123,255,.10),transparent 70%),var(--ink)}
.cost__in{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,110px);align-items:center}
.cost__copy{display:grid;gap:26px}
.cost .h2{font-size:clamp(36px,4.1vw,62px)}
.calc{display:grid;gap:26px;padding:clamp(24px,3vw,38px);border:1px solid var(--line-2);border-radius:4px;background:var(--ink-2)}
.calc__row{display:grid;grid-template-columns:1fr auto;gap:12px 16px;align-items:baseline}
.calc__lbl{font-size:14.5px;color:var(--mist)}
.calc__val{font-size:18px;color:var(--paper);direction:ltr}
.calc input[type=range]{grid-column:1/-1;-webkit-appearance:none;appearance:none;width:100%;height:2px;border-radius:2px;margin:6px 0;cursor:pointer;direction:rtl;
  background:linear-gradient(to left,#3d7bff 0,#8b5cf6 var(--p,20%),var(--line-2) var(--p,20%))}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--paper);border:0;box-shadow:0 0 0 6px rgba(61,123,255,.18);transition:box-shadow .3s}
.calc input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--paper);border:0;box-shadow:0 0 0 6px rgba(61,123,255,.18)}
.calc input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 10px rgba(61,123,255,.22)}
.calc__out{border-top:1px solid var(--line);padding-top:22px;display:grid;gap:6px}
.calc__sum{font-size:clamp(48px,5.4vw,80px);font-weight:300;letter-spacing:-.04em;line-height:1;direction:ltr;text-align:right;
  background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc__cap{font-size:14.5px;color:var(--mist)}
.calc__cap #c-hrs{color:var(--dim)}
.calc__fine{font-size:12px;color:var(--dim);text-align:center;margin-top:-10px}
@media (max-width:1000px){.cost__in{grid-template-columns:1fr}}

/* nav: deals link gets a small live dot */
.nav__deals{position:relative}
.nav__deals::after{content:"";position:absolute;top:2px;inset-inline-end:-9px;width:6px;height:6px;border-radius:50%;background:#a26bff;box-shadow:0 0 0 3px rgba(162,107,255,.2);animation:pulse 2.4s ease-in-out infinite}

/* pause decorative loops while they are off screen (battery + smoothness) */
.is-off,.is-off *{animation-play-state:paused!important}

/* responsive */
@media (max-width:1000px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:flex}
  .services,.about__in,.contact__in{grid-template-columns:1fr}
  .services__head{position:static}
  .svc__vis{display:none}
  .svc__img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;margin-bottom:10px;border:1px solid var(--line)}
  .svc__row{grid-template-columns:40px 1fr}
  .svc__n{grid-row:2/span 3}
  .hero__media{width:100%;opacity:.35}
  .rev{grid-template-columns:1fr 1fr}
  .q--lead{grid-row:auto;grid-column:1/-1}
  .steps{grid-template-columns:1fr 1fr;row-gap:48px}
  .steps__track{display:none}
  .about__photo{max-width:300px}
}
@media (max-width:640px){
  .hero__ctas .pill{flex:1 1 100%}
  .rating{margin-top:40px}
  .shelf__head{grid-template-columns:1fr}
  .rev{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;row-gap:36px}
  .facts{grid-template-columns:1fr 1fr 1fr;gap:8px}
  .form__row{grid-template-columns:1fr}
  .cinfo li{grid-template-columns:64px 1fr}
  .foot nav{margin-inline-start:0}
  .fab{width:52px;height:52px;left:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rise.pre{opacity:1;transform:none}
  .split .w>span{transform:none}
}

/* custom-PC card in the shelf (links to the deals questionnaire) */
.prod--custom .prod__img{padding:0;background:linear-gradient(150deg,#2f6bff 0%,#5b4cf0 55%,#9b5cf6 100%)}
.custom__box{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:12%;color:#fff;text-align:right}
.custom__badge{align-self:flex-start;font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.custom__box ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:clamp(16px,1.5vw,19px);font-weight:500}
.custom__box li::before{content:"✓";margin-inline-end:10px;opacity:.85}
.custom__cta{align-self:flex-start;font-size:15px;font-weight:600;padding:10px 18px;border-radius:999px;background:#fff;color:#2b2fd6;transition:transform .4s var(--ease)}
.prod--custom:hover .custom__cta{transform:translateX(-4px)}
@media (max-width:600px){.custom__box{padding:9% 8%}.custom__box ul{gap:8px;font-size:15px}.custom__badge{font-size:12px}.custom__cta{font-size:14px;padding:8px 16px}}