/* ═══════════════════════════════════════════════════════════════
   mabt.sa — «مدى البداية»
   Concept: one drop in still water; the circles are the reach.
   Light = pearl water at day. Dark = deep-sea night with
   bioluminescent rings. Motion is calm: fades, slow widening
   rings and travelling light only — nothing floats or shakes.
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────── */
:root{
  --bg:#F5F4F8; --bg-2:#EFEDF5; --water-1:#EEEBF4; --water-2:#E3DEEE;
  --surface:#FFFFFF; --card:rgba(255,255,255,.72); --tint:#F0EEF6;
  --ink:#15121F; --muted:#575265; --faint:#8B869A;
  --line:rgba(46,16,101,.10); --line2:rgba(46,16,101,.20);
  --am:#6D28D9; --am-2:#7C3AED; --em:#047857; --em-2:#10B981; --teal:#0F766E;
  --mint:#047857; --mint-bright:#34D399; --road:rgba(46,16,101,.08);
  --glow:rgba(124,58,237,.30); --halo:rgba(124,58,237,.10); --glint:rgba(255,255,255,.92);
  --caus:rgba(124,58,237,.10); --caus-2:rgba(4,120,87,.07);
  --shadow:rgba(46,16,101,.16); --shadow-2:rgba(46,16,101,.28);
  --btn:#15121F; --btn-ink:#F5F4F8; --on-accent:#FFFFFF;
  --ring-glow:none; --grad:linear-gradient(90deg,#6D28D9,#047857);
  --nav-bg:rgba(245,244,248,.72);
  --f-display:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif;
  --f-lat:"Italiana","Times New Roman",serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gut:clamp(20px,5vw,80px);
  color-scheme:light;
}
/* Dark: deep-sea night. Text is near-white lavender (14:1), muted stays
   above 7:1, accents are lifted so they read on near-black, and rings
   glow like bioluminescence. */
:root[data-theme="dark"]{
  --bg:#07060F; --bg-2:#0B0919; --water-1:#0B0A1F; --water-2:#130D30;
  --surface:#13112A; --card:rgba(19,17,42,.62); --tint:#1B1838;
  --ink:#EFEBFA; --muted:#ADA7C4; --faint:#7E7899;
  --line:rgba(167,139,250,.13); --line2:rgba(167,139,250,.26);
  --am:#B9A2FF; --am-2:#A78BFA; --em:#4ADE80; --em-2:#34D399; --teal:#2DD4BF;
  --mint:#4ADE80; --mint-bright:#4ADE80; --road:rgba(167,139,250,.12);
  --glow:rgba(139,92,246,.62); --halo:rgba(124,58,237,.22); --glint:rgba(203,190,255,.55);
  --caus:rgba(167,139,250,.17); --caus-2:rgba(74,222,128,.11);
  --shadow:rgba(0,0,0,.55); --shadow-2:rgba(0,0,0,.75);
  --btn:#EFEBFA; --btn-ink:#07060F; --on-accent:#07060F;
  --ring-glow:drop-shadow(0 0 6px rgba(139,92,246,.7)) drop-shadow(0 0 14px rgba(74,222,128,.25));
  --grad:linear-gradient(90deg,#C4B1FF,#4ADE80);
  --nav-bg:rgba(7,6,15,.66);
  color-scheme:dark;
}

/* ── Base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;transition:background-color .6s var(--ease),color .6s var(--ease)}
.lang-en{font-size:16.5px;line-height:1.7}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--f-display);font-weight:600;line-height:1.2;text-wrap:balance}
[lang="en"]{font-feature-settings:"kern"}
:focus-visible{outline:2px solid var(--am-2);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut)}
.wrap.narrow{max-width:900px}
.center{text-align:center}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--btn);color:var(--btn-ink);padding:10px 16px;border-radius:8px;transition:top .3s}
.skip:focus{top:12px}
.ico{flex-shrink:0}
.ico.ext{opacity:.8}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── Type scale ───────────────────────────────────────────── */
.h1{font-size:clamp(40px,6vw,76px);font-weight:600}
.h2{font-size:clamp(32px,4.4vw,58px)}
.h3{font-size:clamp(22px,2.4vw,28px)}
.sub{color:var(--muted);font-size:clamp(16px,1.4vw,19px);margin-top:14px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);font-family:var(--f-lat);letter-spacing:.24em}
.eyebrow i{width:34px;height:1px;background:linear-gradient(90deg,#7C3AED,#4ADE80)}
.eyebrow.center{display:flex;justify-content:center}
.eyebrow .dom{letter-spacing:.12em;opacity:.8}

/* ── Buttons ──────────────────────────────────────────────── */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-body);white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:box-shadow .6s var(--ease),background-color .4s,color .4s,border-color .4s}
.btn-sm{height:42px;padding:0 18px;font-size:14.5px}
.btn-lg{height:58px;padding:0 32px;font-size:17px}
.btn.wide{width:100%}
.btn-solid{background:var(--btn);color:var(--btn-ink)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-link{height:auto;padding:6px 2px;border-radius:4px;color:var(--ink);background:none}
.b-hr{background:var(--am);color:var(--on-accent)}
.b-tr{background:var(--teal);color:var(--on-accent)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.34) 50%,transparent 70%);transform:translateX(120%);transition:transform 1.1s var(--ease)}
.btn:hover::after{transform:translateX(-120%)}
.btn-solid:hover,.b-hr:hover,.b-tr:hover{box-shadow:0 18px 36px -18px var(--shadow-2)}
.btn-ghost:hover{border-color:var(--am-2)}
.btn-link:hover{color:var(--am)}
[data-theme="dark"] .btn-solid:hover{box-shadow:0 0 0 1px rgba(196,177,255,.4),0 18px 40px -16px rgba(139,92,246,.6)}
/* click ripple (JS adds .rp spans) */
.rp{position:absolute;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,rgba(255,255,255,.55),rgba(167,139,250,.25) 45%,transparent 70%);animation:rp .9s var(--ease) forwards;z-index:-1}
.btn-ghost .rp{background:radial-gradient(circle,rgba(124,58,237,.28),rgba(74,222,128,.14) 45%,transparent 70%)}
@keyframes rp{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ── Scroll progress ─────────────────────────────────────── */
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7C3AED,#4ADE80);transform-origin:var(--po,right);transform:scaleX(var(--p,0))}
.lang-en .progress i{--po:left}
[data-theme="dark"] .progress i{box-shadow:0 0 12px rgba(139,92,246,.8)}

/* ── Navigation ───────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;transition:background-color .5s,box-shadow .5s,backdrop-filter .5s}
.nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
.nav-in{max-width:1280px;margin-inline:auto;padding:0 var(--gut);height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-t{display:flex;flex-direction:column;line-height:1.2}
.brand-t b{font-family:var(--f-display);font-weight:600;font-size:19px}
.brand-t small{font-family:var(--f-lat);font-size:9.5px;letter-spacing:.32em;color:var(--muted)}
.links{display:flex;gap:30px;font-size:15px;font-weight:500}
.links a{padding-bottom:4px;background:linear-gradient(90deg,#7C3AED,#4ADE80) no-repeat 100% 100%/0 1px;transition:background-size .6s var(--ease)}
.links a:hover{background-size:100% 1px}
.nav-act{display:flex;align-items:center;gap:12px}
.icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .4s,background-color .4s}
.icon-btn:hover{border-color:var(--am-2)}
.i-sun{display:none}
[data-theme="dark"] .i-sun{display:block}
[data-theme="dark"] .i-moon{display:none}
.lang{font-family:var(--f-lat);font-size:14px;letter-spacing:.14em;padding:8px 4px}
.lang-en .lang{font-family:var(--f-display);letter-spacing:0}
.menu-btn{display:none}

/* ── Hero ─────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;padding-bottom:clamp(60px,8vw,110px);background:linear-gradient(180deg,var(--bg) 0%,var(--water-1) 30%,var(--water-2) 62%,var(--bg) 100%);margin-top:-84px;padding-top:84px}
.hero::before{content:"";position:absolute;left:50%;top:6%;width:min(1000px,90vw);height:560px;transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--halo),transparent 64%);pointer-events:none}
.hero-scene{position:relative;height:clamp(330px,40vw,560px);margin-inline:auto;max-width:1600px}
.hero-par{position:absolute;inset:0;will-change:transform}
.hero-rings{position:absolute;inset:0;width:100%;height:100%}
/* Dark-mode glow: a blurred copy of each ring line (.glw), drawn once into its layer — never a CSS filter,
   which the browser would redraw on every frame of the ripples. */
.glw{display:none;stroke-width:5px;stroke-opacity:.5}
[data-theme="dark"] .glw{display:inline}
.hr-org-l{will-change:transform}
.hr-static{opacity:0;animation:fadeIn 1.8s ease-out forwards}
.hr-static.far{stroke-opacity:.55}
/* Each ripple is its own layer, scaled and faded by the compositor (no repaint). Its origin is the drop's
   landing point, (720,330) of the sliced 1440×560 scene, expressed in container units. */
.hero-scene{container-type:size}
.hr-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 58.9%;transform-origin:50% calc(50% + max(3.4722cqw,8.9286cqh));transform:scale(.02);opacity:0;animation:ring 14s cubic-bezier(.2,.75,.35,1) infinite}
.hr-org{transform-box:fill-box;transform-origin:center;transform:scale(.4);opacity:0;animation:org 14s ease-out 1.05s infinite}
@keyframes fadeIn{to{opacity:1}}
@keyframes ring{0%{transform:scale(.02);opacity:0}5%{opacity:.95}62%{opacity:.25}86%,100%{transform:scale(1);opacity:0}}
@keyframes org{0%{opacity:.9;transform:scale(.4)}12%{opacity:.5;transform:scale(1)}40%,100%{opacity:0;transform:scale(1.2)}}
.hero-drop{position:absolute;left:50%;top:calc(58.9% - 30px);width:22px;height:32px;margin-left:-11px;opacity:0;filter:drop-shadow(0 0 9px var(--glow));animation:dropFall 14s linear .15s infinite both}
@keyframes dropFall{0%{opacity:0;transform:translateY(-260px) scaleY(.92);animation-timing-function:cubic-bezier(.5,0,.9,.6)}6.4%{opacity:1;transform:translateY(0) scaleY(1.08);animation-timing-function:ease-out}7.2%,100%{opacity:0;transform:translateY(4px) scale(1.25,.5)}}
.hero-jet{position:absolute;left:50%;top:calc(58.9% - 6px);width:6px;height:6px;margin-left:-3px;border-radius:50%;background:linear-gradient(135deg,#8B5CF6,#4ADE80);opacity:0;animation:jet 14s 1.1s infinite both}
@keyframes jet{0%{opacity:0;transform:translateY(0);animation-timing-function:cubic-bezier(0,0,.4,1)}.6%{opacity:1}3.2%{transform:translateY(-22px);animation-timing-function:cubic-bezier(.6,0,1,1)}6.4%{opacity:.8;transform:translateY(0)}7.2%,100%{opacity:0}}
.hero-mark,.hero-mirror{position:absolute;left:50%;top:58.9%;width:clamp(110px,11.8vw,170px);color:var(--ink)}
.hero-mark .mark,.hero-mirror .mark{width:100%;height:auto}
.hero-mark{transform:translate(-50%,-88%);animation:rise 1.6s var(--ease) 1s both}
.hero-mirror{transform:translate(-50%,-12%) scaleY(-1);opacity:.32;-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 72%);mask-image:linear-gradient(0deg,#000 0%,transparent 72%);animation:fadeIn32 2s ease-out 1.4s both;overflow:hidden}
[data-theme="dark"] .hero-mirror{opacity:.42}
/* The glow sits on the still logo (own layer), not on the box whose sheen animates. */
[data-theme="dark"] .hero-mark .mark{filter:drop-shadow(0 0 22px rgba(139,92,246,.45));will-change:transform}
@keyframes rise{0%{opacity:0;transform:translate(-50%,-80%) scale(.94)}100%{opacity:1;transform:translate(-50%,-88%)}}
@keyframes fadeIn32{from{opacity:0}}
.mark-sheen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mark-sheen path{fill:none;stroke:rgba(255,255,255,.95);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 140;stroke-dashoffset:14;opacity:0;animation:sheen 13s ease-in-out 3.6s infinite both}
@keyframes sheen{0%{stroke-dashoffset:14;opacity:0}6%{opacity:.85}34%{stroke-dashoffset:-100;opacity:.85}38%,100%{stroke-dashoffset:-100;opacity:0}}
.mirror-sheen{position:absolute;inset:0;background:linear-gradient(100deg,transparent 38%,var(--glint) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:150% 0;animation:sweep 13s ease-in-out 4s infinite}
@keyframes sweep{0%{background-position:150% 0}26%,100%{background-position:-60% 0}}
.caus{position:absolute;left:0;right:0;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 46% 50% at 50% 50%,#000 30%,transparent 100%)}
.caus.a{top:42%;height:45%;background:radial-gradient(ellipse 52px 11px at 50% 50%,var(--caus),transparent 72%) 0 0/170px 44px;animation:drift 26s ease-in-out infinite alternate}
.caus.b{top:48%;height:38%;background:radial-gradient(ellipse 38px 8px at 50% 50%,var(--caus-2),transparent 72%) 40px 18px/128px 36px;animation:drift 34s ease-in-out infinite alternate-reverse}
@keyframes drift{from{transform:translateX(-36px)}to{transform:translateX(36px)}}
.gl{position:absolute;height:1px;background:linear-gradient(90deg,transparent,var(--glint),transparent);opacity:.2;animation:gl 19s ease-in-out infinite alternate}
@keyframes gl{0%{transform:translateX(0);opacity:.2}50%{opacity:.9}100%{transform:translateX(-120px);opacity:.2}}
.hero-lab{position:absolute;top:8%;font-family:var(--f-lat);font-size:12px;letter-spacing:.3em;color:var(--muted)}
.hero-lab.s{inset-inline-end:calc(50% + 24px)}
.hero-lab.e{inset-inline-start:calc(50% + 24px)}
.hero-copy{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-name{font-size:clamp(58px,10vw,144px);font-weight:600;line-height:1.18;letter-spacing:-.01em}
.lang-en .hero-name{letter-spacing:-.03em;font-weight:500}
.hero-name-r{height:clamp(30px,5vw,80px);overflow:hidden;margin-top:-6px;pointer-events:none;user-select:none}
.hero-name-r span{display:block;font:600 clamp(58px,10vw,144px)/1.18 var(--f-display);transform:scaleY(-1);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.28;filter:blur(.5px);-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9),transparent 55%);mask-image:linear-gradient(0deg,rgba(0,0,0,.9),transparent 55%);animation:breath 11s ease-in-out 3s infinite}
.lang-en .hero-name-r span{font-weight:500;letter-spacing:-.03em}
@keyframes breath{0%,100%{opacity:.28}50%{opacity:.16}}
.hero-tag{margin-top:18px;font:500 clamp(24px,2.8vw,38px)/1.4 var(--f-display)}
.hero-p{margin-top:16px;max-width:760px;color:var(--muted);font-size:clamp(16px,1.35vw,18.5px)}
.hero-p b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.hero-points{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:26px 0 0;padding:0;font-size:14.5px;color:var(--muted)}
.hero-points li{display:inline-flex;align-items:center;gap:8px}
.hero-points .ico,.next-notes .ico{color:var(--em)}

/* ── Reveal on scroll (JS adds .in) ──────────────────────── */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ── Section opener: drop → hairline → ring ──────────────── */
.sec{position:relative;padding-block:clamp(70px,9vw,130px)}
.sec-drop{position:relative;height:70px;margin:0 auto clamp(22px,3vw,40px);width:min(560px,100%)}
.sd-line{position:absolute;left:0;right:0;bottom:12px;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 30%,var(--line2) 70%,transparent);transform:scaleX(.2);opacity:0}
.sd-drop{position:absolute;left:50%;bottom:12px;width:14px;height:20px;margin-left:-7px;opacity:0;filter:drop-shadow(0 0 6px var(--glow))}
.sd-ring{position:absolute;left:50%;bottom:12px;width:220px;height:30px;margin:0 0 -15px -110px;border-radius:50%;border:1px solid var(--am-2);opacity:0;transform:scale(.05)}
.sd-ring.r2{border-color:var(--em-2)}
.sec-drop.in .sd-drop{animation:sdDrop 1s cubic-bezier(.5,0,.9,.6) both}
.sec-drop.in .sd-line{animation:sdLine 1.8s var(--ease) .75s both}
.sec-drop.in .sd-ring{animation:sdRing 2.2s var(--ease) .78s both}
.sec-drop.in .sd-ring.r2{animation-delay:1.05s}
@keyframes sdDrop{0%{opacity:0;transform:translateY(-56px)}20%{opacity:1}80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2px) scale(1.3,.4)}}
@keyframes sdLine{to{opacity:1;transform:scaleX(1)}}
@keyframes sdRing{0%{opacity:0;transform:scale(.05)}12%{opacity:.9}100%{opacity:0;transform:scale(1.25)}}
[data-theme="dark"] .sd-ring{box-shadow:0 0 12px rgba(139,92,246,.55)}

/* ── Name triptych + scroll-lit sentence ─────────────────── */
.lead-hl{max-width:1000px;margin:0 auto clamp(40px,5vw,70px);text-align:center;font:500 clamp(24px,3vw,40px)/1.55 var(--f-display)}
.hw{color:var(--faint);transition:color .5s ease}
.hw.on{color:var(--ink)}
.lead-hl .hw.on:nth-of-type(n){background:none}
.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.tri-h{font-size:clamp(40px,4.4vw,58px);margin:10px 0 8px}
.tri-c p{color:var(--muted)}
.tri-m{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--muted);font-size:15px;text-align:center}
.tri-art{position:relative;width:100%}
.tri-art svg{display:block;width:100%;height:auto}
.tri-clip{position:absolute;inset:0;overflow:hidden}
.dm-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:93.333% 50%;transform:scale(.02);opacity:0;animation:ring 9s cubic-bezier(.22,1,.36,1) 1s infinite}

/* ── Facts strip ──────────────────────────────────────────── */
.facts{border-block:1px solid var(--line);background:var(--bg-2)}
.facts-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding-block:clamp(28px,3.4vw,44px)}
.fact{display:flex;flex-direction:column;gap:4px;text-align:center}
.fact b{font:600 clamp(36px,4vw,56px)/1 var(--f-display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fact>span{color:var(--muted);font-size:14.5px}

/* ── Products ─────────────────────────────────────────────── */
.prod-copy{display:flex;flex-direction:column;gap:12px}
.prod-lead{font:500 clamp(20px,2vw,26px)/1.45 var(--f-display)}
.p-hr .prod-lead{color:var(--am)}
.p-tr .prod-lead{color:var(--teal)}
.prod-aud{color:var(--muted);font-size:15.5px}
.prod-btns{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.prod-vis{position:relative;padding-bottom:40px}
.vis{position:relative;border-radius:16px;box-shadow:0 50px 90px -46px var(--shadow-2);transform-origin:50% 100%;transition:box-shadow .9s var(--ease)}
.vis:hover{box-shadow:0 60px 110px -46px var(--shadow-2),0 0 0 1px var(--am-2)}
[data-theme="dark"] .vis{box-shadow:0 50px 90px -46px rgba(0,0,0,.8),0 0 0 1px rgba(167,139,250,.14)}
.glass{position:absolute;inset:0;border-radius:16px;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;animation:sweep 16s ease-in-out 3s infinite}
[data-theme="dark"] .glass{background-image:linear-gradient(115deg,transparent 40%,rgba(196,177,255,.12) 50%,transparent 60%)}
.p-tr .glass{animation-delay:9s}
.vis-phone{position:absolute;inset-inline-end:-34px;bottom:-60px;width:clamp(120px,13vw,170px);filter:drop-shadow(0 30px 40px var(--shadow-2))}
.pool{position:absolute;left:-4%;right:-4%;bottom:0;width:108%;height:auto}
.pool-ring{overflow:visible;transform-origin:50% 50%;transform:scale(.55);opacity:0;animation:ring 11s cubic-bezier(.22,1,.36,1) infinite}
.p-tr .pool-ring{animation-delay:4s}
.vis-cap{position:absolute;bottom:0;inset-inline-start:0;font-size:12.5px;color:var(--faint)}

/* ── Mock screens (fluid) ─────────────────────────────────── */
.mock{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:13px;line-height:1.5}
.mk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.mk-head div{display:flex;flex-direction:column}
.mk-head b{font-size:14.5px}
.mk-head span{font-size:12px;color:var(--muted)}
.live{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12px;font-weight:600;color:var(--mint)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--mint-bright)}
.ma-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 18px}
.ma-stats div{display:flex;flex-direction:column;padding:10px 12px;background:var(--tint);border-radius:10px}
.ma-stats span{font-size:11.5px;color:var(--muted)}
.ma-stats b{font:500 20px/1.3 var(--f-display)}
.ma-grid{display:flex;flex-direction:column;gap:5px;padding:0 18px 16px}
.ma-row{display:grid;grid-template-columns:minmax(76px,118px) repeat(14,minmax(0,1fr));gap:3px;align-items:center}
.ma-row b{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-days span{text-align:center;font-size:10px;color:var(--muted)}
.ma-row i{height:24px;border-radius:5px;display:flex;align-items:center;justify-content:center;font:500 9.5px/1 var(--f-body);font-style:normal}
.c-P{background:rgba(52,211,153,.22)}
.c-A{background:rgba(234,88,12,.28)}
.c-V{background:rgba(139,92,246,.3)}
.c-DO{background:rgba(128,128,128,.14);color:var(--muted)}
.mm{display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr)}
.mm-side{border-inline-end:1px solid var(--line)}
.mm-v{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.mm-v.on{background:var(--tint)}
.mm-v div{display:flex;flex-direction:column}
.mm-v b{font-size:12.5px}
.mm-v span{font-size:11px;color:var(--muted)}
.mm-v em{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap}
.st-move{background:rgba(45,212,191,.2)}
.st-stop{background:rgba(234,88,12,.24)}
.st-off{background:rgba(128,128,128,.15);color:var(--muted)}
.mm-map{position:relative;background:var(--tint);min-height:300px}
.mm-map svg{position:absolute;inset:0;width:100%;height:100%}
.mm-route{stroke-dasharray:640;stroke-dashoffset:640;animation:route 6s var(--ease) 1s forwards}
@keyframes route{to{stroke-dashoffset:0}}
.mm-pop{position:absolute;top:22%;inset-inline-end:26%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;box-shadow:0 10px 24px -12px var(--shadow-2)}
.mm-pop b{font-size:12.5px}
.mm-pop span{font-size:11px;color:var(--muted)}
.mm-alert{position:absolute;bottom:12px;inset-inline:12px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:11.5px}
.mm-alert i{width:8px;height:8px;border-radius:50%;background:#EA580C;flex-shrink:0}
.mm-alert span{color:var(--muted)}
.mp{padding:7px;background:#121019;border-radius:36px;border:none}
.mp-scr{background:var(--surface);border-radius:30px;padding:30px 14px 14px;display:flex;flex-direction:column;gap:7px;font-size:11px}
.mp-k{color:var(--muted);font-size:10px}
.mp-t{font-size:13px;line-height:1.35}
.mp-l{font-weight:600;font-size:10.5px;margin-top:3px}
.mp-ph{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mp-ph i{height:38px;border-radius:7px;background:var(--tint);display:flex;align-items:center;justify-content:center;font-style:normal;color:var(--muted)}
.mp-ph i.add{background:none;border:1.5px dashed var(--line2)}
.mp-sig{height:48px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.mp-sig svg{width:80%}
.mp-otp{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.mp-otp i{font-style:normal;text-align:center;padding:4px 0;border-radius:7px;background:var(--tint);font:500 14px/1.4 var(--f-display)}
.mp-btn{margin-top:4px;text-align:center;background:var(--teal);color:var(--on-accent);border-radius:9px;padding:8px;font-weight:700;font-size:12px}
.mp-n{text-align:center;font-size:9.5px;color:var(--muted)}

/* ── Compare ──────────────────────────────────────────────── */
.c-h{max-width:820px;margin:0 auto clamp(30px,4vw,54px);text-align:center}
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cmp-c{border-radius:22px;padding:clamp(24px,3vw,40px);border:1px solid var(--line)}
.cmp-c h3{font-size:22px;margin-bottom:14px}
.cmp-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.cmp-c li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.cmp-c .ico{margin-top:5px}
.before{background:var(--bg-2);color:var(--muted)}
.before .ico{color:#B45309}
[data-theme="dark"] .before .ico{color:#FB923C}
.after{background:var(--card);border-color:transparent;box-shadow:0 0 0 1px var(--am-2) inset,0 40px 80px -50px var(--glow)}
.after .ico{color:var(--em)}

/* ── Pricing ──────────────────────────────────────────────── */
.prices .h2{margin-top:12px}
.q-card{border-radius:24px;padding:clamp(24px,3vw,40px);background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:16px;backdrop-filter:blur(8px)}
.q-card p{color:var(--muted)}
.q-card .btn{margin-top:auto}

/* ── Pillars ──────────────────────────────────────────────── */
.pil-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(26px,3vw,44px)}
.pil{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.pil-i{display:flex;gap:14px;align-items:flex-start}
.pil-i svg{flex-shrink:0;filter:var(--ring-glow)}
.pil-i div{display:flex;flex-direction:column;gap:4px}
.pil-i b{font:600 20px/1.35 var(--f-display)}
.pil-i span{color:var(--muted);font-size:14.5px;line-height:1.7}

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-l{display:flex;flex-direction:column;margin-top:clamp(26px,3vw,44px);border-bottom:1px solid var(--line)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4px;font:500 clamp(17px,1.6vw,20px)/1.5 var(--f-display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:16px;height:16px;flex-shrink:0}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--am);transition:transform .5s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq-a{padding:0 4px 22px;color:var(--muted)}
.faq-a a{color:var(--am);text-decoration:underline;text-underline-offset:3px}
.faq details[open] .faq-a{animation:faqIn .6s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}}

/* ── Finale ───────────────────────────────────────────────── */
.finale{position:relative;overflow:hidden;padding-block:clamp(90px,12vw,170px);text-align:center;background:linear-gradient(180deg,var(--bg),var(--water-1) 40%,var(--water-2))}
.fin-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.fin-in .mark{color:var(--ink)}
[data-theme="dark"] .fin-in .mark{filter:drop-shadow(0 0 22px rgba(139,92,246,.5))}
.fin-h{font-size:clamp(40px,6vw,84px)}
.fin-in>p{color:var(--muted);max-width:620px;font-size:clamp(16px,1.4vw,19px)}
.fin-rings{position:absolute;left:50%;top:50%;width:0;height:0}
.fin-rings span{position:absolute;left:0;top:0;width:min(1400px,180vw);aspect-ratio:4/1;border-radius:50%;border:1px solid var(--am-2);transform:translate(-50%,-50%) scale(.04);opacity:0;animation:finRing 12s cubic-bezier(.2,.75,.35,1) infinite}
/* Glow as a shadow (drawn once, moves with the ring), not a filter (redrawn every frame). */
[data-theme="dark"] .fin-rings span{box-shadow:0 0 6px rgba(139,92,246,.55),inset 0 0 6px rgba(139,92,246,.35),0 0 14px rgba(74,222,128,.18)}
.fin-rings span:nth-child(2){animation-delay:3s;border-color:var(--em-2)}
.fin-rings span:nth-child(3){animation-delay:6s}
.fin-rings span:nth-child(4){animation-delay:9s;border-color:var(--em-2)}
@keyframes finRing{0%{transform:translate(-50%,-50%) scale(.04);opacity:0}8%{opacity:.6}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ── Footer ───────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);padding-block:48px 34px;font-size:14.5px}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:30px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:16px;color:var(--ink)}
.foot-brand div{display:flex;flex-direction:column}
.foot-brand b{font:600 18px/1.4 var(--f-display)}
.foot-brand span{color:var(--muted);font-size:13.5px}
.foot-line{font:500 19px/1.5 var(--f-display);color:var(--muted);text-align:center}
.foot-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 22px}
.foot-links a:hover{color:var(--am)}
.lat-link{font-family:var(--f-lat);letter-spacing:.06em}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;font-family:var(--f-lat);letter-spacing:.12em}
.foot-bot span:last-child{font-family:var(--f-body);letter-spacing:0}

/* ── Sticky CTA ───────────────────────────────────────────── */
.sticky-cta{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:55;display:flex;align-items:center;gap:12px;padding:8px 8px;padding-inline-start:20px;border-radius:999px;background:var(--nav-bg);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 0 0 1px var(--line2),0 20px 50px -20px var(--shadow-2);transform:translate(-50%,140%);opacity:0;transition:transform .9s var(--ease),opacity .9s var(--ease);max-width:calc(100vw - 24px)}
.sticky-cta.show{transform:translate(-50%,0);opacity:1}
.sticky-t{font-size:14.5px;font-weight:500;white-space:nowrap}
[data-theme="dark"] .sticky-cta{box-shadow:0 0 0 1px rgba(167,139,250,.3),0 0 40px -10px rgba(139,92,246,.45)}

/* ── Exit card ────────────────────────────────────────────── */
.exit{border:none;border-radius:28px;padding:40px 36px 32px;max-width:440px;width:calc(100% - 32px);background:var(--surface);color:var(--ink);text-align:center;box-shadow:0 0 0 1px var(--line2),0 40px 120px -30px var(--shadow-2)}
.exit::backdrop{background:rgba(10,8,20,.45);backdrop-filter:blur(4px)}
.exit[open]{animation:exitIn .7s var(--ease)}
@keyframes exitIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.exit-x{position:absolute;top:14px;inset-inline-end:14px}
.exit-drop{display:flex;justify-content:center;color:var(--ink);margin-bottom:12px}
.exit h2{font-size:28px}
.exit p{color:var(--muted);margin-top:10px}
.exit-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}

/* ── Inner pages ──────────────────────────────────────────── */
.ph{position:relative;overflow:hidden;margin-top:-84px;padding:calc(84px + clamp(50px,7vw,100px)) 0 clamp(40px,5vw,70px);background:linear-gradient(180deg,var(--bg),var(--water-1) 55%,var(--bg))}
.ph-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ph-drop{width:18px;height:26px;filter:drop-shadow(0 0 8px var(--glow));animation:phDrop 1.2s cubic-bezier(.5,0,.9,.6) both}
@keyframes phDrop{from{opacity:0;transform:translateY(-40px)}}
.ph-rings{position:absolute;left:50%;top:62%;width:0;height:0}
.ph-rings span{position:absolute;width:min(1100px,160vw);aspect-ratio:5/1;border-radius:50%;border:1px solid var(--line2);transform:translate(-50%,-50%) scale(.05);opacity:0;animation:finRing 10s cubic-bezier(.2,.75,.35,1) infinite}
.ph-rings span:nth-child(2){animation-delay:3.3s}
.ph-rings span:nth-child(3){animation-delay:6.6s}
.sub-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.form{display:flex;flex-direction:column;gap:16px;padding:clamp(22px,3vw,40px);border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:0 50px 90px -60px var(--glow)}
.seg{border:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg legend{font-weight:600;margin-bottom:8px;padding:0}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{display:flex;align-items:center;justify-content:center;height:48px;border-radius:14px;border:1px solid var(--line2);font-weight:500;transition:border-color .4s,background-color .4s,color .4s;text-align:center;padding:0 6px}
.seg input:checked+span{border-color:var(--am-2);background:var(--tint);color:var(--am)}
.seg input:focus-visible+span{outline:2px solid var(--am-2);outline-offset:2px}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f{display:flex;flex-direction:column;gap:6px;font-size:14.5px;font-weight:500}
.f input,.f textarea{font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;transition:border-color .4s,box-shadow .4s;width:100%}
.f textarea{resize:vertical;min-height:90px}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--am-2);box-shadow:0 0 0 4px var(--halo)}
.f input[aria-invalid="true"]{border-color:#DC2626}
.chk{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;color:var(--muted)}
.chk input{width:18px;height:18px;margin-top:4px;accent-color:#7C3AED}
.chk a{color:var(--am);text-decoration:underline;text-underline-offset:3px}
.f-err{color:#B91C1C;font-size:14px}
[data-theme="dark"] .f-err{color:#FCA5A5}
.f-ok{color:var(--em);font-weight:500}
.f-note{color:var(--muted);font-size:13px}
.next{padding:clamp(10px,2vw,20px) 0}
.next h2{font-size:24px}
.next ol{list-style:none;counter-reset:s;margin:20px 0;padding:0;display:flex;flex-direction:column;gap:18px}
.next li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px}
.next li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 15px/1 var(--f-display);border:1px solid var(--am-2);color:var(--am)}
.lang-ar .next li::before{content:counter(s,arabic-indic)}
.next li b{font:600 17px/1.4 var(--f-display)}
.next li span{color:var(--muted);font-size:14.5px}
.next-notes{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px}
.next-notes p{display:flex;align-items:center;gap:8px}
.sup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sup-c{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,3vw,34px);border-radius:22px;border:1px solid var(--line);background:var(--card)}
.sup-c .ico{color:var(--am)}
.sup-c h2{font-size:22px}
.sup-c p{color:var(--muted);font-size:15px;flex-grow:1}
.sup-login{margin-top:clamp(40px,5vw,70px);display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.sup-l{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.prose{display:flex;flex-direction:column;gap:30px}
.pv-s h2{font-size:24px;margin-bottom:10px}
.pv-s p{color:var(--muted);margin-bottom:10px}
.pv-s a{color:var(--am);text-decoration:underline;text-underline-offset:3px}

/* ── Products menu (desktop dropdown; plain links inside the mobile menu) ─ */
.links>a[aria-current="page"],.dd.here .dd-btn{background-size:100% 1px}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:6px;padding:0 0 4px;border:0;background:linear-gradient(90deg,#7C3AED,#4ADE80) no-repeat 100% 100%/0 1px;color:inherit;font:inherit;cursor:pointer;transition:background-size .6s var(--ease)}
.dd-btn:hover{background-size:100% 1px}
.dd-btn .ico{transition:transform .5s var(--ease)}
.dd.open .dd-btn .ico{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 22px);left:50%;width:330px;display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line2),0 30px 60px -24px var(--shadow-2);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.dd-panel::before{content:"";position:absolute;inset-inline:0;top:-24px;height:24px}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
@media (hover:hover) and (min-width:861px){
  .dd:hover .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
  .dd:hover .dd-btn .ico{transform:rotate(180deg)}
}
.links .dd-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:none;transition:background-color .3s}
.links .dd-item:hover,.links .dd-item[aria-current="page"]{background:var(--tint)}
.dd-item b{display:flex;align-items:center;gap:9px;font:600 16px/1.4 var(--f-display)}
.dd-item b::before{content:"";width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dd-hr b::before{background:var(--am)}
.dd-tr b::before{background:var(--teal)}
.dd-item span{font-size:13px;color:var(--muted);font-weight:400}
.m-only{display:none}
.nav-login .ico{color:var(--am)}

/* ── Start page: who we are ───────────────────────────────── */
.about-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}
.about-copy{display:flex;flex-direction:column;gap:14px}
.about .h2{font-size:clamp(30px,3.4vw,46px)}
.about-p{color:var(--muted);font-size:clamp(16px,1.35vw,18.5px)}
.about-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ab-i{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,2.4vw,28px);border-radius:22px;border:1px solid var(--line);background:var(--card)}
.ab-i div{display:flex;flex-direction:column;gap:6px}
.ab-i b{font:600 19px/1.4 var(--f-display)}
.ab-i span{color:var(--muted);font-size:14.5px;line-height:1.75}

/* ── Start page: the two products ─────────────────────────── */
.prods .h2,.steps .h2,.feats .h2,.prices .h2{margin-top:12px}
.pc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:clamp(30px,4vw,54px)}
.pc{position:relative;display:flex;flex-direction:column;border-radius:28px;border:1px solid var(--line);background:var(--card);overflow:hidden;transition:transform .8s var(--ease),box-shadow .8s var(--ease),border-color .6s}
.pc:hover{transform:translateY(-4px);box-shadow:0 40px 80px -50px var(--glow);border-color:var(--am-2)}
.pc-tr:hover{border-color:var(--teal)}
.pc-vis{height:270px;overflow:hidden;padding:26px 26px 0;background:linear-gradient(180deg,var(--water-1),transparent);-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent);pointer-events:none}
.pc-vis .mock{transition:transform 1.2s var(--ease)}
.pc:hover .pc-vis .mock{transform:translateY(-10px)}
.pc-body{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.6vw,34px)}
.pc h3{font-size:clamp(30px,3vw,40px)}
.pc-lead{font:500 19px/1.45 var(--f-display)}
.pc-hr .pc-lead{color:var(--am)}
.pc-tr .pc-lead{color:var(--teal)}
.pc ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;color:var(--muted)}
.pc li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start}
.pc li .ico{margin-top:5px}
.pc-hr li .ico{color:var(--am)}
.pc-tr li .ico{color:var(--teal)}
.pc-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-weight:600}
.pc-more .ico{transition:transform .6s var(--ease)}
.pc:hover .pc-more .ico{transform:translateX(-4px)}
.lang-en .pc:hover .pc-more .ico{transform:translateX(4px)}

/* ── Start page: how we start (a real sequence) ───────────── */
.st-l{list-style:none;margin:clamp(30px,4vw,54px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative}
.st-l::before{content:"";position:absolute;inset-inline:8%;top:27px;height:1px;background:linear-gradient(90deg,transparent,var(--line2) 15%,var(--line2) 85%,transparent)}
.st-l li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.st-n{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 20px/1 var(--f-display);background:var(--bg);border:1px solid var(--am-2);color:var(--am);margin-bottom:6px}
[data-theme="dark"] .st-n{box-shadow:0 0 18px -4px rgba(139,92,246,.6)}
.st-l b{font:600 19px/1.4 var(--f-display)}
.st-l li>span:last-child{color:var(--muted);font-size:14.5px;max-width:240px}

/* ── Product pages ────────────────────────────────────────── */
.phero{position:relative;overflow:hidden;margin-top:-84px;padding:calc(84px + clamp(40px,6vw,90px)) 0 clamp(50px,6vw,90px);background:linear-gradient(180deg,var(--bg),var(--water-1) 55%,var(--bg))}
.phero .ph-rings{top:76%}
.phero-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,72px);align-items:center}
.phero h1{margin-top:2px;font-size:clamp(40px,5vw,66px)}
.phero-p{color:var(--muted);font-size:clamp(16px,1.35vw,18px);max-width:620px}
.fit{list-style:none;margin:2px 0 4px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fit li{padding:5px 14px;border-radius:999px;border:1px solid var(--line2);font-size:13.5px;color:var(--muted);background:var(--card)}
.phero .prod-btns{margin-top:8px}
.ft-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(30px,4vw,54px)}
.ft{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,30px);border-radius:22px;border:1px solid var(--line);background:var(--card);transition:border-color .6s,transform .8s var(--ease),box-shadow .8s var(--ease)}
.ft:hover{transform:translateY(-3px);box-shadow:0 30px 60px -44px var(--glow)}
.p-hr .ft svg{color:var(--am)}
.p-tr .ft svg{color:var(--teal)}
.p-hr .ft:hover{border-color:var(--am-2)}
.p-tr .ft:hover{border-color:var(--teal)}
.ft h3{font-size:20px;line-height:1.4}
.ft p{color:var(--muted);font-size:15px;line-height:1.75}
.q-one{margin-top:clamp(26px,3vw,44px);align-items:center;text-align:center;gap:22px}
.q-one>p{font-size:clamp(17px,1.5vw,20px);max-width:560px;color:var(--ink)}
.q-act{display:flex;flex-direction:column;align-items:center;gap:10px}
.q-one.q-hr{box-shadow:0 0 0 1px var(--am-2) inset,0 50px 90px -60px var(--glow)}
.q-one.q-track{box-shadow:0 0 0 1px var(--teal) inset,0 50px 90px -60px rgba(45,212,191,.35)}

/* ── Sign-in page ─────────────────────────────────────────── */
.lg-sec{padding-top:clamp(10px,2vw,30px)}
.lg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1040px}
.lg{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(26px,3.2vw,44px);border-radius:28px;border:1px solid var(--line);background:var(--card);transition:border-color .6s,box-shadow .8s var(--ease)}
.lg-hr{--c:var(--am)}
.lg-track{--c:var(--teal)}
.lg:hover{border-color:var(--c);box-shadow:0 40px 80px -50px var(--glow)}
.lg-mark{color:var(--c);margin-bottom:4px}
.lg h2{font-size:clamp(30px,3vw,40px)}
.lg-who{font:600 17px/1.4 var(--f-display);color:var(--c)}
.lg>p{color:var(--muted)}
.lg .btn.wide{margin-top:10px}
.lg-note{font-size:13.5px;color:var(--muted)}
a.lg-note{color:var(--ink);font-size:14.5px;height:auto;padding:4px 0}
.lg-new{text-align:center;margin-top:clamp(30px,4vw,50px);color:var(--muted)}
.lg-new a{color:var(--am);font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* ── Trust strip: the registered organisation behind the site ─ */
.trust{border-block:1px solid var(--line);background:var(--bg-2)}
.trust-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding-block:clamp(26px,3.2vw,40px)}
.tr-i{display:flex;align-items:flex-start;gap:12px}
.tr-i>.ico{color:var(--am);margin-top:3px}
.tr-i div{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--muted)}
.tr-i b{font:600 15.5px/1.4 var(--f-display);color:var(--ink)}
.tr-i a{color:var(--am)}
.guide-l{color:var(--am);text-decoration:underline;text-underline-offset:4px;display:inline-flex;align-items:center;gap:6px}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:1180px){
  .nav-login span{display:none}
  .nav-act .nav-login{width:42px;padding:0}
}
@media (max-width:1080px){
  .links{gap:20px}
  .about-in,.phero-in{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-l{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .st-l::before{display:none}
  .tri{grid-template-columns:1fr}
  .tri-m{order:-1;max-width:420px;margin:0 auto}
  .tri-c{text-align:center}
  .tri-c .eyebrow{justify-content:center;display:flex}
  .prod-vis{max-width:760px;margin-inline:auto;width:100%}
  .sub-grid{grid-template-columns:1fr}
  .pil{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:1fr;text-align:center;justify-items:center}
  .foot-links{justify-content:center}
}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .links{position:fixed;inset-inline:12px;top:92px;flex-direction:column;gap:0;padding:10px;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line2),0 30px 60px -20px var(--shadow-2);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .links a{padding:14px 12px;border-radius:12px;background:none}
  .links a:hover{background:var(--tint)}
  .nav.open .links{opacity:1;pointer-events:auto;transform:none}
  .nav-act .btn-sm{display:none}
  .links .dd-btn{display:none}
  .links .dd-panel{position:static;width:auto;opacity:1;visibility:visible;transform:none;box-shadow:none;background:none;padding:0;gap:0}
  .links .dd-panel::before{display:none}
  .links .m-only{display:block}
  .links .m-cta{display:flex;margin-top:8px;height:50px;padding:0 18px;border-radius:999px;background:var(--btn);color:var(--btn-ink);justify-content:center;align-items:center}
  .links .m-cta:hover{background:var(--btn)}
  .pc-grid,.lg-grid{grid-template-columns:1fr}
  .facts-in{column-gap:10px}
  .trust-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp,.sup-grid{grid-template-columns:1fr}
  .vis-phone{inset-inline-end:-6px;bottom:-30px;width:92px}
  .hero-lab{display:none}
  .sticky-t{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .nav-in{height:72px}
  .hero,.ph{margin-top:-72px;padding-top:72px}
  .phero{margin-top:-72px;padding-top:calc(72px + 36px)}
  .links{top:80px}
  .brand-t small{display:none}
  .pil,.about-pts,.ft-grid,.st-l,.trust-in{grid-template-columns:1fr}
  .pc-vis{height:220px;padding:18px 18px 0}
  .f-row{grid-template-columns:1fr}
  .seg{grid-template-columns:1fr}
  .mm{grid-template-columns:1fr}
  .mm-side{display:none}
  .ma-row{grid-template-columns:70px repeat(14,minmax(0,1fr))}
  .ma-row i{height:18px;font-size:7.5px}
}

/* ── Reduced motion: everything rests in its final state ─── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  .hero-drop,.hero-jet,.hr-ring,.hr-org,.sd-drop,.sd-ring,.fin-rings span,.ph-rings span,.dm-ring,.pool-ring{display:none}
  .hr-static,.sd-line{opacity:1;transform:none}
  .mm-route{stroke-dashoffset:0}
  .hw{color:var(--ink)}
}