/* =====================================================================
 * Homepage (front-page.php). Shared parts (reviews, product cards, close,
 * footer) live in pulse.css; this file holds what only the homepage has.
 * One dark world: sections alternate between ink0 and ink1 only.
 * ===================================================================== */

/* ---------- Section heads ---------- */
.hd{max-width:780px;margin-bottom:clamp(44px,6vw,72px)}
.hd h2{font-size:clamp(34px,4.8vw,64px);font-weight:700;letter-spacing:-.042em;line-height:.98;margin-top:20px}
.hd p{margin-top:22px;font-size:clamp(16.5px,1.35vw,19px);color:var(--sub);max-width:58ch;line-height:1.6}

/* =====================================================================
 * 1. Hero: the translator
 * ===================================================================== */
.hl-hero{position:relative;overflow:hidden;isolation:isolate;margin-top:calc(-1 * var(--nav-h));min-height:clamp(700px,100svh,1000px);display:flex;align-items:center;
  background:radial-gradient(52% 64% at 76% 40%,rgba(47,125,246,.2),transparent 66%),radial-gradient(38% 46% at 4% 100%,rgba(237,50,55,.12),transparent 70%),var(--ink0)}
.hl-hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain);opacity:.05;mix-blend-mode:overlay}

/* faint field of raw messages, texture only */
.hl-field{position:absolute;top:0;bottom:0;left:46%;right:0;z-index:0;display:flex;gap:28px;padding-left:24px;overflow:hidden;opacity:.16;pointer-events:none;
  -webkit-mask-image:radial-gradient(70% 86% at 55% 46%,#000 18%,transparent 74%);mask-image:radial-gradient(70% 86% at 55% 46%,#000 18%,transparent 74%)}
.hf-col{flex:none;width:228px}
.hf-tr{display:flex;flex-direction:column;animation:lf-up var(--d) linear infinite;animation-delay:calc(var(--d) * var(--o) * -1);will-change:transform}
@keyframes lf-up{to{transform:translate3d(0,-50%,0)}}
.hf-c{height:112px;padding-top:16px;border-top:1px solid rgba(140,170,220,.08)}
.hf-c::before{content:attr(data-t);display:block;font:500 9.5px/1 var(--f-mono);letter-spacing:.16em;color:rgba(110,155,230,.8);margin-bottom:10px}
.hf-c::after{content:attr(data-r);display:block;white-space:pre;font:400 11.5px/1.62 var(--f-mono);color:rgba(168,190,226,.75)}
.hf-c.ar::after{direction:rtl;text-align:right;font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;font-size:12.5px}

.hl-grid{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.96fr);gap:clamp(32px,5vw,84px);align-items:center;padding-top:calc(var(--nav-h) + clamp(28px,5vh,56px));padding-bottom:clamp(40px,6vh,64px)}
.hl-copy{position:relative}
.hl-hero .eyebrow{display:inline-flex;align-items:center;gap:10px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);padding:8px 15px;border-radius:100px;margin-bottom:28px;animation:hl-up .8s var(--ease) .05s both}
.hl-hero .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:beat 2s infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(255,74,79,.6)}70%{box-shadow:0 0 0 10px rgba(255,74,79,0)}100%{box-shadow:0 0 0 0 rgba(255,74,79,0)}}
.hl-hero h1{color:#fff;font-size:clamp(40px,calc((min(100vw,1220px) - 160px) / 16.8),66px);font-weight:700;line-height:.98;letter-spacing:-.046em}
.hl-hero h1 .hl{position:relative;white-space:nowrap}
.hl-hero h1 .hl::after{content:"";position:absolute;left:-.02em;right:-.05em;bottom:-.13em;height:.24em;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16 C 70 6 170 3 297 10' fill='none' stroke='%23FF4A4F' stroke-width='6.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  clip-path:inset(0 100% 0 0);animation:hl-draw 1.05s cubic-bezier(.6,.1,.2,1) .45s forwards}
@keyframes hl-draw{to{clip-path:inset(0 0 0 0)}}
@keyframes hl-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hl-lead{color:rgba(228,236,248,.84);font-size:clamp(17px,1.4vw,20.5px);line-height:1.6;margin-top:26px;max-width:46ch;animation:hl-up .8s var(--ease) .2s both}
.hl-hero .hero-cta{margin-top:36px;animation:hl-up .8s var(--ease) .32s both}
.hl-trust{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:30px 0 0;padding:0;animation:hl-up .8s var(--ease) .44s both}
.hl-trust li{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);display:flex;align-items:center;gap:9px}
.hl-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);flex:none}

/* the translator: raw message in, plain line out */
.tx{position:relative;display:flex;flex-direction:column;width:100%;max-width:540px;justify-self:end;animation:hl-up 1s var(--ease) .3s both}
.tx-lab{display:flex;align-items:center;gap:10px;font:500 11px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:12px}
.tx-src{margin-left:auto;color:#8FC1FF;letter-spacing:.04em;text-transform:none;font-size:12px;white-space:nowrap;transition:opacity .3s}
.tx-src.fade{opacity:0}
.tx-dot{width:7px;height:7px;border-radius:50%;flex:none;background:#FEBC2E;box-shadow:0 0 10px #FEBC2E;animation:blink 1.4s infinite}
.tx-dot.g{background:#3ED598;box-shadow:0 0 10px #3ED598}
@keyframes blink{50%{opacity:.3}}
.tx-stack{position:relative;height:126px}
.tx-raw{position:absolute;left:0;right:0;top:12px;height:112px;padding:15px 18px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#0C1220,#080C15);border:1px solid rgba(140,170,220,.16);box-shadow:0 26px 60px -30px rgba(0,0,0,.9);transition:transform .7s var(--ease),opacity .7s}
.tx-raw::before{content:attr(data-t);display:inline-block;font:600 10px/1 var(--f-mono);letter-spacing:.14em;color:#FEC85A;background:rgba(254,188,46,.1);border:1px solid rgba(254,188,46,.25);padding:5px 8px;border-radius:6px;margin-bottom:11px}
.tx-raw::after{content:attr(data-r);display:block;white-space:pre;font:400 13px/1.55 var(--f-mono);color:#A4B8DA}
.tx-raw.ar::after{direction:rtl;text-align:right;font-family:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;font-size:14px;line-height:1.5}
.tx-raw.is-now{z-index:2}
/* The card behind is narrowed with a clip, never scaled: scaling redraws the
   text at every step of the motion and makes it shimmer. */
.tx-raw{clip-path:inset(0 0 0 0 round 16px);transition:transform .7s var(--ease),opacity .7s,clip-path .7s var(--ease)}
.tx-raw.is-next{z-index:1;transform:translateY(-12px);clip-path:inset(0 4% 0 4% round 16px);opacity:.32}
.tx-raw.is-now.read{transform:translateY(46px);clip-path:inset(0 9% 0 9% round 16px);opacity:0}
.tx-raw.enter{opacity:0!important}
.tx-raw.noanim{transition:none!important}
.tx-wire{position:relative;width:2px;height:40px;margin:0 auto;background:linear-gradient(rgba(140,170,220,.04),rgba(140,170,220,.3),rgba(140,170,220,.04))}
.tx-wire i{position:absolute;left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px 3px rgba(90,160,255,.95);opacity:0}
.tx-wire.go i{animation:tx-drop .5s ease-in forwards}
@keyframes tx-drop{0%{top:-4px;opacity:0}25%{opacity:1}100%{top:100%;opacity:0}}
.tx-core{position:relative;width:128px;height:128px;margin:0 auto;border-radius:50%;border:0;padding:0;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 30%,rgba(110,165,255,.18),transparent 62%),#060A14;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 80px -12px rgba(47,125,246,.5);transition:box-shadow .5s}
.tx-core::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1.5px solid rgba(90,160,255,.75);opacity:0;pointer-events:none}
.tx-core.pulse{box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 120px -4px rgba(47,125,246,.85)}
.tx-core.pulse::after{animation:tx-ping .8s ease-out}
@keyframes tx-ping{from{opacity:.9;transform:scale(.86)}to{opacity:0;transform:scale(1.25)}}
/* max-width:none, or the site-wide svg rule squeezes the ring to the disc's
   width and pulls it off centre. The arcs travel by dash offset rather than by
   rotating the whole picture, so they are drawn sharp on every frame. */
.tx-ring{position:absolute;inset:-9px;width:calc(100% + 18px);height:calc(100% + 18px);max-width:none;overflow:visible;filter:drop-shadow(0 0 6px rgba(80,150,255,.55))}
.tx-ring circle{fill:none}
.tx-ring .r0{stroke:rgba(255,255,255,.1);stroke-width:.6}
.tx-ring .r1{stroke:#3D8BFF;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:43 57;animation:tx-run 22s linear infinite}
.tx-ring .r2{stroke:#FF4A4F;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:43 57;stroke-dashoffset:-50;animation:tx-run2 22s linear infinite}
@keyframes tx-run{from{stroke-dashoffset:0}to{stroke-dashoffset:-100}}
@keyframes tx-run2{from{stroke-dashoffset:-50}to{stroke-dashoffset:-150}}
/* The mark glows on a pulse instead of growing: scaling it up stretches the
   pixels of the drawn layer. */
.tx-mark{width:66px;transition:filter .5s}
.tx-mark svg{display:block;width:100%;height:auto}
.tx-core.pulse .tx-mark{filter:drop-shadow(0 0 10px rgba(120,175,255,.55))}
.tx-core:focus-visible{outline:2px solid var(--blue-glow);outline-offset:8px}
.tx-feed{position:relative;display:flex;flex-direction:column;gap:10px}
.tx-row{transition:transform .6s var(--ease),opacity .45s}
.tx-row.enter{opacity:0;transform:translateY(-14px)}
.tx-row.leave{position:absolute;left:0;right:0;opacity:0;transform:translateY(12px);pointer-events:none}
.tx-item{min-height:0;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:13px 16px;border-radius:16px;
  background:linear-gradient(180deg,#141C2E,#0D1321);border:1px solid rgba(255,255,255,.1);transition:border-color .6s,box-shadow .6s}
.tx-row.is-new .tx-item{border-color:rgba(90,160,255,.55);box-shadow:0 0 0 1px rgba(90,160,255,.18),0 20px 44px -22px rgba(47,125,246,.7)}
.tx-item>*{transition:opacity .6s}
.tx-row.is-old .tx-item>*{opacity:.5}
.tx-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#A9CCFF;background:rgba(47,125,246,.15);box-shadow:inset 0 0 0 1px rgba(90,160,255,.28)}
.tx-ic svg{width:19px;height:19px}
.tx-item.ok .tx-ic{color:#7EE8B5;background:rgba(62,213,152,.13);box-shadow:inset 0 0 0 1px rgba(62,213,152,.3)}
.tx-item.warn .tx-ic{color:#FF9497;background:rgba(255,74,79,.13);box-shadow:inset 0 0 0 1px rgba(255,74,79,.32)}
.tx-txt{min-width:0}
.tx-txt b::before{content:attr(data-h);display:block;font:600 16px/1.2 var(--f-disp);letter-spacing:-.01em;color:#fff}
.tx-txt span::before{content:attr(data-d);display:block;margin-top:4px;font-size:13.5px;line-height:1.35;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-when::before{content:attr(data-w);font:500 10.5px/1 var(--f-mono);letter-spacing:.06em;color:var(--mut);white-space:nowrap}

/* ---------- Works with ---------- */
.ww{position:relative;display:flex;align-items:center;gap:30px;padding:22px 0 22px clamp(20px,4.5vw,44px);background:var(--ink0);border-top:1px solid rgba(255,255,255,.06);overflow:hidden}
.ww-l{flex:none;font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.42)}
.ww-m{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ww-t{display:flex;width:max-content;animation:ww-slide 52s linear infinite}
@keyframes ww-slide{to{transform:translateX(-50%)}}
.ww-t span{padding-right:48px;font-family:var(--f-disp);font-weight:600;font-size:18px;letter-spacing:-.01em;color:rgba(255,255,255,.42);white-space:nowrap}
.ww-t span.ww-i{display:inline-flex;align-items:center}
.ww-t .ww-i img{display:block;height:22px;width:auto;max-width:150px;filter:brightness(0) invert(1);opacity:.5}
.ww:hover .ww-t{animation-play-state:paused}

/* =====================================================================
 * 2. What we connect: pinned. The screen stays put while the four
 *    services scroll past it, and swaps to whichever one is in view.
 * ===================================================================== */
.svc{position:relative;background:var(--ink1);padding:clamp(56px,6.5vw,92px) 0 clamp(40px,4.5vw,64px);border-top:1px solid rgba(255,255,255,.04)}
.svc::before{content:"";position:absolute;top:0;right:0;width:min(60vw,900px);height:min(60vw,900px);pointer-events:none;background:radial-gradient(circle,rgba(47,125,246,.1),transparent 62%)}
.svc-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,6vw,100px);align-items:start}
.svc-steps{list-style:none;margin:0;padding:0}
.svc-step{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:30px 0 30px 28px;border-left:1px solid rgba(255,255,255,.1);position:relative;transition:opacity .5s}
.js .svc-step{opacity:.3}
.js .svc-step.on{opacity:1}
.svc-step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue-glow),var(--red));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.svc-step.on::before{transform:none}
.svc-tag{display:inline-flex;align-items:center;gap:12px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#A9CCFF}
.svc-tag em{font-style:normal;color:var(--red);margin-left:4px}
.svc-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(47,125,246,.16);box-shadow:inset 0 0 0 1px rgba(90,160,255,.35),0 0 30px -8px rgba(47,125,246,.6)}
.svc-ic svg{width:21px;height:21px}
.svc-step h3{font-size:clamp(28px,3.1vw,44px);letter-spacing:-.036em;line-height:1.02;margin:22px 0 16px}
.svc-step p{color:var(--sub);font-size:17px;line-height:1.66;max-width:48ch}
.svc-step ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.svc-step li{position:relative;padding-left:22px;color:#D3DBE7;font-size:15.5px;line-height:1.5}
.svc-step li::before{content:"";position:absolute;left:1px;top:.68em;width:10px;height:1.5px;background:var(--blue-glow)}
.svc-more{display:inline-flex;align-items:center;gap:9px;margin-top:26px;color:#fff;font-weight:600;font-size:15px;border-bottom:1.5px solid rgba(255,255,255,.3);padding-bottom:3px;width:fit-content;transition:gap .2s,border-color .2s}
.svc-more:hover{gap:14px;border-color:#fff}
.svc-more svg{width:16px;height:16px}
.svc-view{position:sticky;top:max(calc(var(--nav-h) + 24px),calc(50vh - 290px));height:580px}
.svc-view::before{content:"";position:absolute;inset:10% 2% 0;z-index:-1;border-radius:40px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(47,125,246,.2),transparent),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 28px);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent);mask-image:radial-gradient(closest-side,#000 40%,transparent)}
.svc-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.svc-tabs span{font:500 11px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 12px;border-radius:99px;color:var(--mut);border:1px solid var(--line);cursor:pointer;transition:color .3s,background .3s,border-color .3s}
.svc-tabs span.on{color:#fff;background:rgba(47,125,246,.18);border-color:rgba(90,160,255,.5)}
.svc-screens{position:relative;height:530px}
.sv{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s,transform .7s var(--ease);pointer-events:none}
.sv.on{opacity:1;transform:none}

/* =====================================================================
 * 3. One order, every system
 * ===================================================================== */
.os{position:relative;background:var(--ink0);padding:clamp(48px,5vw,76px) 0;border-top:1px solid rgba(255,255,255,.04)}
.os::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--grain);opacity:.04;mix-blend-mode:overlay}
.os-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);align-items:start}
.os-view{order:2;position:sticky;top:max(calc(var(--nav-h) + 24px),calc(50vh - 280px));z-index:2}
.os-steps{order:1;list-style:none;margin:0;padding:0}
.os-step{position:relative;min-height:40vh;display:flex;flex-direction:column;justify-content:center;padding:22px 0 22px 30px;border-left:1px solid rgba(255,255,255,.1);transition:opacity .5s}
.js .os-step{opacity:.3}
.js .os-step.on{opacity:1}
.os-step::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue-glow),var(--red));transform:scaleY(0);transform-origin:top;transition:transform .6s var(--ease)}
.os-step.on::before{transform:none}
.os-step time{font:500 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--blue-glow)}
.os-step h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(22px,2.1vw,29px);letter-spacing:-.022em;line-height:1.18;margin:14px 0 10px;max-width:24ch}
.os-step p{color:var(--sub);font-size:16px;line-height:1.6;max-width:44ch}
.os-sum{margin-top:clamp(36px,5vw,60px);font-family:var(--f-disp);font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;color:var(--sub);text-align:center}
.os-sum b{color:#fff}
.os-rail{display:flex;justify-content:space-between;list-style:none;margin:0 0 22px;padding:0;position:relative}
.os-rail::before{content:"";position:absolute;left:5%;right:5%;top:14px;height:1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 5px,transparent 5px 10px)}
.os-rail li{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);transition:color .4s}
.os-rail li::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--ink2);border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 5px var(--ink0);transition:background .4s,border-color .4s,box-shadow .4s}
.os-rail li.done{color:var(--sub)}
.os-rail li.done::before{border-color:rgba(90,160,255,.55);background:radial-gradient(circle,var(--blue-glow) 0 3px,transparent 3.5px),var(--ink2)}
.os-rail li.on{color:#fff}
.os-rail li.on::before{border-color:var(--blue-glow);background:radial-gradient(circle,#fff 0 4px,transparent 4.5px),rgba(47,125,246,.35);box-shadow:0 0 0 5px var(--ink0),0 0 26px rgba(47,125,246,.75)}
.os-stage{position:relative;height:clamp(380px,46vh,470px);border-radius:24px;overflow:hidden;background:radial-gradient(80% 70% at 50% 0%,rgba(47,125,246,.15),transparent 70%),var(--ink2);border:1px solid rgba(255,255,255,.08)}
.os-stage::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 30px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 30px)}
.os-ui{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;transform:translateY(20px) scale(.97);transition:opacity .45s,transform .65s var(--ease)}
.os-ui.on{opacity:1;transform:none}
.o-card{position:relative;width:min(100%,410px);background:linear-gradient(180deg,#151D2F,#0D1320);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 24px;font-size:14.5px;color:var(--sub);box-shadow:0 44px 80px -36px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.06)}
.o-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.o-h b{color:#fff;font-family:var(--f-disp);font-size:18px;letter-spacing:-.01em}
.o-line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07)}
.o-line b{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.o-line b svg{width:17px;height:17px;color:#3ED598;flex:none}
.o-line b.g{color:#6EE7B7}
.o-tot{font-size:16px}.o-tot b{font-size:18px}
.o-ok{font:600 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#6EE7B7;padding:7px 10px;border-radius:99px;background:rgba(62,213,152,.12);border:1px solid rgba(62,213,152,.32);white-space:nowrap}
.o-stamp{font:700 13px/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:#6EE7B7;border:2px solid rgba(62,213,152,.75);padding:7px 11px;border-radius:7px;transform:rotate(-7deg)}
.o-check{background:linear-gradient(180deg,#FBFCFE,#EDF1F7);color:#4A5568;border-color:rgba(255,255,255,.6)}
.o-check .o-line{border-color:#DEE4ED}.o-check .o-line b{color:#111827}
.o-url{font:500 11.5px/1 var(--f-mono);color:#6B7280;background:#E3E8F0;border-radius:8px;padding:9px 11px;margin-bottom:12px}
.o-pay{margin-top:16px;background:#000;color:#fff;border-radius:12px;padding:15px;text-align:center;font-weight:600;font-size:15.5px}
.o-term{font:500 13.5px/2 var(--f-mono);background:#06090F;color:rgba(234,241,255,.88)}
.o-term p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.o-term p i{font-style:normal;color:#6AABFF;display:inline-block;width:84px}
.o-term p.g,.o-term p.g i{color:#6EE7B7}
.o-wa{background:#0B141A;border-color:rgba(255,255,255,.08)}
.o-wah{display:flex;align-items:center;gap:11px;padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid rgba(255,255,255,.07)}
.o-wah b{color:#fff;font-size:15px}
.o-wah small{display:block;color:#8696A0;font-size:12px;margin-left:auto}
.o-wai{width:36px;height:36px;border-radius:50%;flex:none;background:#25D366 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 3a9 9 0 0 0-7.7 13.6L3 21l4.5-1.2A9 9 0 1 0 12 3Z' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px}
.o-bub{background:#202C33;color:#E9EDEF;border-radius:14px 14px 14px 4px;padding:12px 15px;font-size:14.5px;line-height:1.45;max-width:90%}
.o-me{background:#005C4B;margin:10px 0 0 auto;border-radius:14px 14px 4px 14px;width:fit-content}

/* =====================================================================
 * 4. Products, 5. reviews (shared styles in pulse.css)
 * ===================================================================== */
.pr{background:var(--ink1);padding:clamp(48px,5vw,76px) 0;border-top:1px solid rgba(255,255,255,.04)}
.rv{background:var(--ink0);border-top:1px solid rgba(255,255,255,.04)}

/* =====================================================================
 * 6. How we work
 * ===================================================================== */
.hw{background:var(--ink1);padding:clamp(48px,5vw,76px) 0;border-top:1px solid rgba(255,255,255,.04)}
.hw-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.1)}
.hw-steps::before{content:"";position:absolute;left:0;top:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--blue-glow),#8B6CF6 55%,var(--red));transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .2s}
.hw-steps.in::before{transform:none}
.hw-steps li{padding:32px 28px 0 0}
.hw-steps li+li{padding-left:28px;border-left:1px solid rgba(255,255,255,.06)}
.hw-n{font-size:11px;letter-spacing:.18em;color:var(--blue-glow)}
.hw-steps h3{font-family:var(--f-disp);font-size:clamp(22px,2.1vw,29px);letter-spacing:-.025em;margin:16px 0 10px}
.hw-steps p{color:var(--sub);font-size:15.5px;line-height:1.6;max-width:30ch}
#faq{background:var(--ink0);border-top:1px solid rgba(255,255,255,.04);padding-top:clamp(56px,6vw,88px)!important}

/* =====================================================================
 * Responsive
 * ===================================================================== */
@media (max-width:1100px){
  .hl-grid{grid-template-columns:minmax(0,1fr) minmax(0,.9fr)}
  .tx-raw::after{font-size:12px}
}
@media (max-width:899px){
  .hl-hero{min-height:0;display:block}
  .hl-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:48px}
  .hl-hero h1{font-size:clamp(34px,10.4vw,60px)}
  .hl-field{left:0;opacity:.12}
  .tx{justify-self:stretch;max-width:none}
  .tx-src{display:none}
  .tx-raw::after{font-size:11.5px}
  .tx-when{display:none}
  .tx-item{grid-template-columns:auto minmax(0,1fr)}
  .svc-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .svc-view{display:none}
  .svc-step{min-height:0;padding:30px 0 30px 22px}
  .js .svc-step{opacity:1}
  .svc-step .sv{position:relative;inset:auto;opacity:1;transform:none;margin-top:26px;display:block}
  .svc-step .sv .u-win{max-width:none}
  .os-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .os-view{order:0;top:calc(var(--nav-h) + 6px);background:var(--ink0);padding:10px 0 14px;margin:0 calc(-1 * clamp(20px,4.5vw,44px));padding-inline:clamp(20px,4.5vw,44px)}
  .os-stage{height:300px;border-radius:18px}
  .os-ui{padding:14px}
  .o-card{padding:14px 16px;font-size:13.5px}
  .o-h{margin-bottom:8px}
  .o-h b{font-size:16px}
  .o-line{padding:7px 0}
  .o-term{font-size:12px}
  .o-term p i{width:64px}
  .os-rail{margin-bottom:12px}
  .os-rail li{font-size:8.5px;letter-spacing:.04em;gap:7px}
  .os-rail li::before{width:22px;height:22px}
  .os-rail::before{top:11px}
  .os-step{min-height:34vh;padding-left:22px}
  .hw-steps{grid-template-columns:1fr 1fr;row-gap:10px}
  .hw-steps li:nth-child(3){padding-left:0;border-left:0}
}
@media (max-width:560px){
  .ww-l{display:none}
  .ww{padding-left:0}
  .hw-steps{grid-template-columns:1fr}
  .hw-steps li,.hw-steps li+li{padding:26px 0 0;border-left:0}
}
@media (prefers-reduced-motion:reduce){
  .hf-tr{animation:none}
  .hl-hero h1 .hl::after{clip-path:none}
}