/* ============================================================
   ArabAlgo - arabalgo.trade
   Design tokens derived from the ArabAlgo brand kit:
   gold #D2AA4B | bull blue #20A0E0 | bear amber #E89A17
   ink #0E0F11 | graphite #252324 | grey #757170 | Inter
   ------------------------------------------------------------
   1. Tokens            10. Why / features
   2. Base              11. How it works
   3. Ambient bg        12. Flow diagram
   4. Layout            13. Request form
   5. Brand lockup      14. FAQ
   6. Navigation        15. Contact band
   7. Buttons           16. Footer
   8. Hero + slides     17. Reveal animation
   9. Cards             18. Responsive
                        19. Motion / print preferences
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#07080A;
  --bg-soft:#0A0B0D;
  --panel:#0F1115;
  --panel-2:#13161B;
  --line:#21242B;
  --line-strong:#2C3038;

  --ink:#F5F6F8;
  --ink-2:#D6D9DE;
  --muted:#979CA5;
  --muted-2:#6E737C;

  --gold:#D2AA4B;
  --gold-light:#F5D77A;
  --gold-grad:linear-gradient(135deg,#8E6A17 0%,#F7DC86 18%,#D2AA4B 46%,#EFCB68 64%,#A87F23 100%);
  --gold-soft:rgba(210,170,75,.10);
  --gold-line:rgba(210,170,75,.24);

  --blue:#20A0E0;
  --amber:#E89A17;
  --green:#79E33A;
  --danger:#E8776F;

  --radius:14px;
  --radius-lg:20px;
  --radius-xl:26px;

  --shadow:0 18px 44px -20px rgba(0,0,0,.85);
  --shadow-gold:0 14px 40px -18px rgba(210,170,75,.42);

  --container:1200px;
  --nav-h:74px;
  --ease:cubic-bezier(.16,1,.3,1);

  --font:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","Noto Kufi Arabic","Inter",system-ui,sans-serif;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.7;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[lang="ar"] body{
  font-family:var(--font-ar);
  letter-spacing:0;
  line-height:1.85;
}
body.is-locked{position:fixed;inset-inline:0;width:100%;overflow:hidden}

h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.12;letter-spacing:-.032em;color:var(--ink)}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0;line-height:1.35}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}

::selection{background:rgba(210,170,75,.28);color:#fff}

a,button,summary,label,input,textarea{-webkit-tap-highlight-color:transparent}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip-link{
  position:fixed;top:-100px;inset-inline-start:16px;z-index:200;
  background:var(--gold);color:#0A0B0D;font-weight:600;
  padding:12px 18px;border-radius:0 0 10px 10px;transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

.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;
}

/* ---------- 3. Ambient background ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ambient::before,.ambient::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.ambient::before{
  width:60vw;height:60vw;max-width:820px;max-height:820px;
  top:-22vw;inset-inline-start:-14vw;
  background:radial-gradient(circle,rgba(210,170,75,.15),transparent 66%);
}
.ambient::after{
  width:54vw;height:54vw;max-width:760px;max-height:760px;
  bottom:-18vw;inset-inline-end:-16vw;
  background:radial-gradient(circle,rgba(32,160,224,.10),transparent 66%);
}
@media (max-width:900px){
  .ambient::before,.ambient::after{filter:none;opacity:.75}
}
.ambient__aurora{
  position:absolute;top:-28vh;inset-inline-start:-10vw;width:120vw;height:110vh;
  pointer-events:none;opacity:.75;
  background:
    radial-gradient(38vw 30vw at 22% 28%,rgba(210,170,75,.13),transparent 62%),
    radial-gradient(32vw 26vw at 70% 16%,rgba(32,160,224,.10),transparent 64%),
    radial-gradient(30vw 24vw at 52% 54%,rgba(245,215,122,.07),transparent 66%);
  filter:blur(26px);
  animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.05)}
  100%{transform:translate3d(-2%,1.5%,0) scale(1.02)}
}
.ambient__grid{
  position:absolute;inset:0;opacity:.4;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 110% 70% at 50% 0%,#000 8%,transparent 72%);
  mask-image:radial-gradient(ellipse 110% 70% at 50% 0%,#000 8%,transparent 72%);
}

/* ---------- 4. Layout ---------- */
.page{position:relative;z-index:1}
.container{
  width:100%;max-width:var(--container);margin-inline:auto;
  padding-inline:clamp(20px,5vw,44px);
}
.section{padding-block:clamp(76px,9vw,132px);position:relative}
.section--tight{padding-block:clamp(60px,7vw,96px)}
.section + .section{border-top:1px solid rgba(255,255,255,.045)}

.section-head{max-width:660px;margin-bottom:clamp(40px,5vw,64px)}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
}
html[lang="ar"] .eyebrow{letter-spacing:.06em;font-size:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.section-head--center .eyebrow::before,.eyebrow--center::before{display:none}
.eyebrow--center{justify-content:center}
h2.section-title{font-size:clamp(1.85rem,3.7vw,2.85rem)}
.section-title .w{display:inline-block;overflow:hidden;vertical-align:top}
.section-title .w > span{display:inline-block}
.js .section-title .w > span{transform:translateY(100%);opacity:0}
.reveal.is-visible .section-title .w > span,
.section-title.is-visible .w > span{
  animation:wordUp .8s var(--ease) forwards;
  animation-delay:calc(var(--i,0) * .045s);
}
@keyframes wordUp{to{transform:none;opacity:1}}
.section-sub{margin-top:20px;color:var(--muted);font-size:clamp(1rem,1.3vw,1.08rem);max-width:60ch}
.section-head--center .section-sub{margin-inline:auto}

/* ---------- 5. Brand lockup ---------- */
.logo{display:inline-flex;align-items:center;gap:11px;direction:ltr}
.logo__mark{width:34px;height:34px;flex:none}
.nav .logo__mark path{
  clip-path:inset(0 0 100% 0);
  animation:markIn 1.05s var(--ease) .15s forwards;
}
@keyframes markIn{to{clip-path:inset(0 0 -2% 0)}}
.nav .logo:hover .logo__mark{transform:scale(1.06);transition:transform .4s var(--ease)}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__name{font-size:15px;font-weight:700;letter-spacing:.2em;color:#fff}
.logo__name span{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.logo__tag{
  margin-top:4px;font-size:7.5px;font-weight:500;letter-spacing:.34em;
  color:var(--muted-2);text-transform:uppercase;white-space:nowrap;
}

/* ---------- 6. Navigation ---------- */
.progress{
  position:fixed;top:0;inset-inline:0;height:2px;z-index:110;pointer-events:none;
  background:var(--gold-grad);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;opacity:.9;
}
html[dir="rtl"] .progress{transform-origin:100% 50%}

.nav{
  position:fixed;top:0;inset-inline:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(7,8,10,.55);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.nav.is-scrolled{
  background:rgba(7,8,10,.86);
  border-bottom-color:rgba(255,255,255,.07);
  box-shadow:0 12px 34px -26px rgba(0,0,0,.9);
}
.nav__inner{display:flex;align-items:center;gap:clamp(14px,3vw,34px);width:100%}
.nav__links{display:flex;align-items:center;gap:clamp(0px,.6vw,6px);margin-inline:auto}
.nav__link{
  position:relative;padding:8px 11px;border-radius:8px;white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--muted);
  transition:color .25s var(--ease);
}
.nav__link::before{
  content:"";position:absolute;bottom:1px;inset-inline-start:12px;width:0;height:1.5px;border-radius:2px;
  background:var(--gold-grad);transition:width .35s var(--ease);
}
.nav__link:hover::before{width:calc(100% - 24px)}
.nav__link.is-active::before{width:0}
.nav__link:hover,.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{
  content:"";position:absolute;bottom:1px;inset-inline:12px;height:1.5px;border-radius:2px;
  background:var(--gold-grad);
}
.nav__actions{display:flex;align-items:center;gap:12px}
.nav__cta-short{display:none}

.lang{
  display:inline-flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.02);
  direction:ltr;
}
.lang__btn{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--muted-2);transition:color .22s var(--ease),background .22s var(--ease);
}
.lang__btn:hover{color:var(--ink-2)}
.lang__btn.is-active{color:#0A0B0D;background:var(--gold-grad);box-shadow:0 2px 10px -4px rgba(210,170,75,.7)}

.nav__toggle{
  display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.02);cursor:pointer;position:relative;
}
.nav__toggle span{
  position:absolute;inset-inline:11px;height:1.5px;background:var(--ink-2);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s var(--ease);
}
.nav__toggle span:nth-child(1){top:14px}
.nav__toggle span:nth-child(2){top:20px}
.nav__toggle span:nth-child(3){top:26px}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
  background:rgba(7,8,10,.97);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  padding:14px clamp(20px,5vw,44px) 26px;
  display:none;
  max-height:calc(100dvh - var(--nav-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mobile-menu.is-open{display:block;animation:menuIn .34s var(--ease) both}
@keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.mobile-menu__link{
  display:block;padding:14px 2px;font-size:17px;font-weight:500;color:var(--ink-2);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-menu__link:last-of-type{border-bottom:0}
.mobile-menu__foot{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}

/* ---------- 7. Buttons ---------- */
.btn{
  --btn-py:14px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:var(--btn-py) 24px;border-radius:11px;border:1px solid transparent;
  font-size:14.8px;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),
             background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease);
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn svg{width:16px;height:16px;flex:none}
.btn--sm{--btn-py:10px;padding-inline:18px;font-size:13.6px;border-radius:9px}
.btn--block{width:100%}

.btn--primary{background:var(--gold-grad);color:#0A0B0D;box-shadow:0 8px 26px -14px rgba(210,170,75,.7)}
.btn--primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn{transform:translate3d(var(--mgx,0px),calc(var(--mgy,0px) + var(--lift,0px)),0)}
.btn--primary:hover{--lift:-2px;box-shadow:var(--shadow-gold)}
.btn--primary:hover::after{transform:translateX(120%)}

.btn--ghost{border-color:var(--line-strong);color:var(--ink-2);background:rgba(255,255,255,.015)}
.btn--ghost:hover{--lift:-2px;border-color:var(--gold-line);color:#fff;background:var(--gold-soft)}

html[dir="rtl"] .arrow{transform:scaleX(-1)}

.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none!important}

/* ---------- 8. Hero + slideshow ---------- */
.hero{
  position:relative;padding-top:calc(var(--nav-h) + clamp(48px,7vw,86px));
  padding-bottom:clamp(44px,5vw,72px);overflow:hidden;
}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(38px,5vw,64px);align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  padding-block:7px;padding-inline:9px 15px;
  border:1px solid var(--gold-line);border-radius:999px;
  background:linear-gradient(100deg,rgba(210,170,75,.12),rgba(210,170,75,.02));
  font-size:12.4px;font-weight:500;color:var(--ink-2);margin-bottom:26px;
}
.hero__badge .dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(121,227,58,.16);
}
.hero__title{font-size:clamp(2.25rem,5.1vw,3.95rem);letter-spacing:-.04em}
/* each line rides up from behind its own mask on first paint */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero__title .line > span{display:block}
.js .hero__title .line > span{transform:translateY(105%);opacity:0}
.is-hero-in .hero__title .line > span{
  animation:lineUp 1.05s var(--ease) forwards;
  animation-delay:calc(.12s + var(--i,0) * .13s);
}
@keyframes lineUp{to{transform:none;opacity:1}}

.js .hero__copy > .hero__badge,
.js .hero__copy > .hero__lead,
.js .hero__copy > .hero__cta,
.js .hero__copy > .hero__meta{opacity:0;transform:translateY(14px)}
.is-hero-in .hero__copy > .hero__badge{animation:heroIn .8s var(--ease) .05s forwards}
.is-hero-in .hero__copy > .hero__lead{animation:heroIn .8s var(--ease) .46s forwards}
.is-hero-in .hero__copy > .hero__cta{animation:heroIn .8s var(--ease) .58s forwards}
.is-hero-in .hero__copy > .hero__meta{animation:heroIn .8s var(--ease) .7s forwards}
@keyframes heroIn{to{opacity:1;transform:none}}

.js .hero__visual{opacity:0;transform:translateY(20px) scale(.99)}
.is-hero-in .hero__visual{animation:heroPanel 1.1s var(--ease) .3s forwards}
@keyframes heroPanel{to{opacity:1;transform:none}}
html[lang="ar"] .hero__title{letter-spacing:0}
.hero__title .line-2{
  display:block;margin-top:.16em;
  background:linear-gradient(96deg,#A87F23 0%,#D2AA4B 26%,#F7DC86 42%,#D2AA4B 58%,#A87F23 100%);
  background-size:260% 100%;background-position:88% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 2.6s var(--ease) .5s 1 both;
}
@keyframes sheen{from{background-position:100% 0}to{background-position:14% 0}}
.hero__lead{margin-top:26px;max-width:54ch;color:var(--muted);font-size:clamp(1rem,1.35vw,1.12rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:38px;
  padding-top:30px;border-top:1px solid rgba(255,255,255,.06);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.018);font-size:12.6px;font-weight:500;color:var(--muted);
}
.chip svg{width:14px;height:14px;flex:none;color:var(--gold)}

.chart-frame{
  position:relative;border:1px solid var(--line);border-radius:var(--radius-lg);
  transform:translate3d(0,var(--chart-shift,0px),0);will-change:transform;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 42%),
    linear-gradient(180deg,#0C0E12,#090A0D);
  box-shadow:var(--shadow);overflow:hidden;direction:ltr;
}
.chart-frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 6%,rgba(210,170,75,.10),transparent 58%);
}
.chart-frame__bar{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.014);position:relative;
}
.chart-frame__sym{font-size:12.6px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);unicode-bidi:plaintext}
.chart-frame__live{
  margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:10.8px;font-weight:600;letter-spacing:.14em;color:var(--green);text-transform:uppercase;
}
.chart-frame__live .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(121,227,58,.4)}
  50%{opacity:.55;box-shadow:0 0 0 5px rgba(121,227,58,0)}
}

/* --- hero slideshow ----------------------------------------------------- */
.slides{position:relative;padding:14px 14px 10px;direction:ltr}
.slides__stage{position:relative}
/* the outgoing slide clears quickly, the incoming one starts just after, so
   two dense panels are never legible on top of each other */
.slide{
  margin:0;position:absolute;inset:0;opacity:0;visibility:hidden;
  transform:translateX(14px);
  transition:opacity .26s var(--ease),transform .26s var(--ease),visibility 0s .26s;
}
.slide.is-active{
  position:relative;opacity:1;visibility:visible;transform:none;
  transition:opacity .5s var(--ease) .18s,transform .5s var(--ease) .18s,visibility 0s;
}
.slide.is-leaving{transform:translateX(-14px)}
.slide img{
  width:100%;height:auto;border-radius:12px;display:block;
  background:#0B0D10;border:1px solid rgba(255,255,255,.045);
}
.slide__caption{padding:16px 4px 0;min-height:96px}
.slide__caption h3{font-size:1.02rem;letter-spacing:-.02em}
html[lang="ar"] .slide__caption h3{letter-spacing:0}
.slide__caption p{margin-top:8px;color:var(--muted);font-size:13.6px;line-height:1.6}
.slide__note{margin-top:8px;color:#5E636B;font-size:11.4px;line-height:1.5}
html[dir="rtl"] .slide__caption{direction:rtl;text-align:right}

.slides__controls{
  display:flex;align-items:center;gap:12px;padding:6px 4px 4px;position:relative;
}
.slides__arrow{
  width:34px;height:34px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  display:grid;place-items:center;color:var(--muted);
  transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);
}
.slides__arrow svg{width:15px;height:15px}
.slides__arrow:first-of-type svg{transform:scaleX(-1)}
.slides__arrow:hover{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.slides__dots{display:flex;align-items:center;gap:7px;margin-inline:auto;flex-wrap:wrap;justify-content:center}
.slides__dot{
  width:8px;height:8px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid var(--line-strong);background:transparent;
  transition:width .4s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.slides__dot:hover{border-color:var(--gold-line)}
.slides__dot.is-active{width:26px;border-radius:5px;background:rgba(210,170,75,.22);border-color:transparent;position:relative;overflow:hidden}
.slides__dot.is-active::after{
  content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);
  background:var(--gold-grad);
}
html[dir="rtl"] .slides__dot.is-active::after{transform-origin:100% 50%}
.slides.is-playing .slides__dot.is-active::after{animation:dotTimer var(--slide-interval,6.5s) linear forwards}
@keyframes dotTimer{to{transform:scaleX(1)}}
.slides__count{
  font-size:11px;font-weight:600;color:var(--muted-2);letter-spacing:.08em;
  font-variant-numeric:tabular-nums;direction:ltr;min-width:52px;text-align:end;
}
.slides__count b{color:var(--gold-light);font-weight:700}

@media (max-width:720px){
  .slides{padding:12px 12px 8px}
  .slide__caption{min-height:112px;padding-top:14px}
  .slide__caption h3{font-size:.98rem}
  .slide__caption p{font-size:13.2px}
  .slides__arrow{width:38px;height:38px}
}
@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
}

/* --- proof strip: the client's own tester figures --------------------- */
.proof{
  margin-top:clamp(34px,4vw,54px);padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,34px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 160% at 6% 0%,rgba(210,170,75,.09),transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.004));
}
.proof__label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
}
html[lang="ar"] .proof__label{letter-spacing:.04em;font-size:12px}
.proof__label::before{content:"";width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.proof__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,26px);
  margin:20px 0 0;padding:0;
}
.proof__stat{position:relative;padding-inline-start:clamp(14px,1.6vw,22px)}
.proof__stat:first-child{padding-inline-start:0}
.proof__stat::before{
  content:"";position:absolute;inset-block:4px;inset-inline-start:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-strong),transparent);
}
.proof__stat:first-child::before{display:none}
.proof__stat dt{
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-2);
}
.proof__stat dd{
  margin:6px 0 0;font-size:clamp(1.5rem,2.8vw,2.05rem);font-weight:700;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;direction:ltr;
}
html[dir="rtl"] .proof__stat dd{text-align:right}
.proof__stat:nth-child(2) dd,.proof__stat:nth-child(3) dd{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.proof__note{margin-top:18px;font-size:11.8px;line-height:1.6;color:#5E636B;max-width:78ch}

@media (max-width:880px){
  .proof__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .proof__stat:nth-child(3){padding-inline-start:0}
  .proof__stat:nth-child(3)::before{display:none}
}
@media (max-width:460px){
  .proof__stats{grid-template-columns:1fr;gap:14px}
  .proof__stat{padding-inline-start:0}
  .proof__stat::before{display:none}
  .proof__stat dd{font-size:1.45rem}
}

/* ---------- 9. Cards ---------- */
.grid{display:grid;gap:clamp(18px,2.2vw,26px)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{
  position:relative;padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  overflow:hidden;display:flex;flex-direction:column;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 60% at 50% 0%,rgba(210,170,75,.10),transparent 60%);
  transition:opacity .4s var(--ease);
}
.card{
  transform:perspective(900px) translateY(var(--cardY,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
}
.card:hover{--cardY:-5px;border-color:var(--gold-line);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
/* a soft highlight follows the cursor across the card */
.card::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(210,170,75,.13),transparent 62%);
  transition:opacity .45s var(--ease);
}
@media (hover:hover){.card:hover::after{opacity:1}}
/* a gold edge that brightens on the side the cursor is on */
.card__edge{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  padding:1px;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(245,215,122,.65),rgba(210,170,75,0) 60%);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;transition:opacity .4s var(--ease);
}
@media (hover:hover){.card:hover .card__edge{opacity:1}}
.card > *{position:relative}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card__badge{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold-line);border-radius:999px;padding:4px 10px;
  background:var(--gold-soft);white-space:nowrap;
}
html[lang="ar"] .card__badge{letter-spacing:.02em;font-size:11px}
.card__title{font-size:1.28rem;margin-top:22px}
.card__text{margin-top:14px;color:var(--muted);font-size:15.2px}
.card__list{margin-top:22px;display:grid;gap:11px}
.card__list li{display:flex;gap:11px;align-items:flex-start;font-size:14.4px;color:var(--ink-2)}
.card__list svg{width:15px;height:15px;flex:none;margin-top:5px;color:var(--gold)}
.card__cta{margin-top:auto;padding-top:28px}

.icon-ring{
  width:56px;height:56px;flex:none;border-radius:50%;
  border:1px solid var(--gold-line);display:grid;place-items:center;
  background:radial-gradient(circle at 50% 22%,rgba(210,170,75,.14),rgba(255,255,255,.014));
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.icon-ring svg{width:26px;height:26px;color:var(--gold)}
.card:hover .icon-ring{border-color:rgba(210,170,75,.5);transform:scale(1.04)}

/* ---------- 10. Why / features ---------- */
.feature{
  padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.006));
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.feature{position:relative;overflow:hidden}
.feature::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(210,170,75,.12),transparent 62%);
  transition:opacity .4s var(--ease);
}
@media (hover:hover){.feature:hover::after{opacity:1}}
.feature:hover{border-color:var(--gold-line);transform:translateY(-3px)}
.feature__icon{transition:transform .45s var(--ease),background .45s var(--ease)}
.feature:hover .feature__icon{transform:translateY(-2px) scale(1.05);background:rgba(210,170,75,.14)}
.feature__icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(210,170,75,.07);margin-bottom:20px;
}
.feature__icon svg{width:21px;height:21px;color:var(--gold)}
.feature h3{font-size:1.075rem}
.feature p{margin-top:12px;color:var(--muted);font-size:14.6px}

/* ---------- 11. How it works ---------- */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,28px);
  position:relative;list-style:none;margin:0;padding:0;
}
.steps::before{
  content:"";position:absolute;top:27px;inset-inline:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line) 14%,var(--gold-line) 86%,transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease) .25s;
}
html[dir="rtl"] .steps::before{transform-origin:100% 50%}
.steps.is-drawn::before{transform:scaleX(1)}
.step{position:relative}
.step__num{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold-line);background:var(--bg-soft);
  font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--gold);
  position:relative;z-index:1;margin-bottom:24px;direction:ltr;
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.step:hover .step__num{box-shadow:0 0 0 6px rgba(210,170,75,.08);border-color:rgba(210,170,75,.55)}
.step.is-visible .step__num{animation:stepPulse 1.5s var(--ease) both}
@keyframes stepPulse{
  0%{box-shadow:0 0 0 0 rgba(210,170,75,.32)}
  60%{box-shadow:0 0 0 12px rgba(210,170,75,0)}
  100%{box-shadow:0 0 0 0 rgba(210,170,75,0)}
}
.step__num span{font-variant-numeric:tabular-nums}
.step h3{font-size:1.08rem}
.step p{margin-top:12px;color:var(--muted);font-size:14.6px;max-width:34ch}

/* ---------- 12. Flow diagram ---------- */
.flow{
  margin-top:clamp(34px,4vw,52px);padding:clamp(22px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.004));
}
.flow__row{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px)}
.flow__node{
  flex:1 1 0;min-width:128px;padding:16px 18px;border:1px solid var(--line);
  border-radius:var(--radius);background:rgba(255,255,255,.018);text-align:center;
}
.flow__node strong{display:block;font-size:13.6px;font-weight:600;color:var(--ink)}
.flow__node span{display:block;margin-top:5px;font-size:11.8px;color:var(--muted-2)}
.flow__arrow{flex:none;color:var(--gold);opacity:.55;display:grid;place-items:center}
.flow__arrow svg{width:26px;height:14px}
html[dir="rtl"] .flow__arrow svg{transform:scaleX(-1)}

/* ---------- 13. Request form ---------- */
.request__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(34px,4vw,64px);align-items:start;
}
.request__aside{position:sticky;top:calc(var(--nav-h) + 34px)}
.assure{margin-top:34px;display:grid;gap:18px}
.assure li{display:flex;gap:14px;align-items:center}
.assure__ic{
  width:36px;height:36px;flex:none;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(210,170,75,.07);
}
.assure__ic svg{width:17px;height:17px;color:var(--gold)}
.assure__copy{display:flex;flex-direction:column;min-width:0}
.assure strong{display:block;font-size:14.6px;font-weight:600;line-height:1.4}
/* scoped to the copy block: a bare `.assure span` also hit .assure__ic and
   killed the icon's centring */
.assure__copy span{display:block;margin-top:3px;font-size:13.6px;color:var(--muted)}

.form-card{
  position:relative;padding:clamp(24px,3vw,40px);
  border:1px solid var(--line);border-radius:var(--radius-xl);
  background:linear-gradient(180deg,#14171C,#0D0F13);
  box-shadow:var(--shadow);
}
.form-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 40% at 22% 0%,rgba(210,170,75,.09),transparent 62%);
}
.form-card__head{position:relative;margin-bottom:28px}
.form-card__head h3{font-size:clamp(1.35rem,2.3vw,1.65rem)}
.form-card__head p{margin-top:12px;color:var(--muted);font-size:14.8px;max-width:46ch}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;position:relative}
.field{display:flex;flex-direction:column;gap:9px}
.field--full{grid-column:1/-1}
/* direct children only: the radio-card labels inside .choices must stay blocks */
.field > label{font-size:13.4px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.field > label .req{color:var(--gold);font-size:14px;line-height:1}
.field .hint{font-size:12.4px;color:var(--muted-2)}

.input,.textarea{
  width:100%;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line-strong);background:rgba(8,9,11,.72);
  color:var(--ink);font-size:16px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
}
.textarea{min-height:118px;resize:vertical;line-height:1.65}
.input::placeholder,.textarea::placeholder{color:#5B5F67}
.input:hover,.textarea:hover{border-color:#363B44}
.input:focus,.textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(8,9,11,.95);
  box-shadow:0 0 0 3px rgba(210,170,75,.13);
}
.input[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(232,119,111,.14)}
/* phone and email are always typed left-to-right, even in the RTL layout */
input[type="tel"],input[type="email"]{direction:ltr}
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="email"]{text-align:right}
/* honeypot: hidden without off-screen offsets, which would create
   horizontal overflow (especially in RTL) */
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}

.error{font-size:12.6px;color:var(--danger);display:none;align-items:center;gap:6px}
.error.is-shown{display:flex;animation:fadeIn .25s var(--ease)}

.choices-field{border:0;padding:0;margin:0}
.choices-legend{
  display:flex;align-items:center;gap:6px;padding:0;margin-bottom:11px;
  font-size:13.4px;font-weight:600;color:var(--ink-2);
}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.choice{position:relative;cursor:pointer;display:block}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice__box{
  height:100%;padding:16px 14px;border-radius:13px;border:1px solid var(--line-strong);
  background:rgba(8,9,11,.5);display:flex;flex-direction:column;gap:10px;
  transition:border-color .28s var(--ease),background .28s var(--ease),
             transform .28s var(--ease),box-shadow .28s var(--ease);
}
.choice__box svg.ic{width:22px;height:22px;color:var(--muted);transition:color .28s var(--ease)}
.choice__box b{font-size:13.6px;font-weight:600;line-height:1.35;display:block;padding-inline-end:22px}
.choice__box small{font-size:11.8px;color:var(--muted-2);line-height:1.45;display:block;margin-top:4px}
.choice:hover .choice__box{border-color:#3A3F49;transform:translateY(-2px)}
.choice input:checked + .choice__box{
  border-color:var(--gold);background:linear-gradient(180deg,rgba(210,170,75,.12),rgba(210,170,75,.03));
  box-shadow:0 0 0 3px rgba(210,170,75,.11);
}
.choice input:checked + .choice__box svg.ic{color:var(--gold)}
.choice input:focus-visible + .choice__box{outline:2px solid var(--gold);outline-offset:3px}
.choice__check{
  position:absolute;top:12px;inset-inline-end:12px;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line-strong);display:grid;place-items:center;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.choice input:checked ~ .choice__check{background:var(--gold-grad);border-color:transparent}
.choice__check svg{width:9px;height:9px;color:#0A0B0D;opacity:0;transition:opacity .2s var(--ease)}
.choice input:checked ~ .choice__check svg{opacity:1}

.form-foot{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative}
.form-foot .note{font-size:12.4px;color:var(--muted-2);max-width:34ch}

.spinner{
  width:16px;height:16px;border-radius:50%;flex:none;
  border:2px solid rgba(10,11,13,.28);border-top-color:#0A0B0D;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none}
/* the button fills while the request is in flight */
.btn--primary.is-loading::before{
  content:"";position:absolute;inset:0;transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(255,255,255,.34),rgba(255,255,255,.06));
  animation:btnFill 1.6s var(--ease) infinite;
}
html[dir="rtl"] .btn--primary.is-loading::before{transform-origin:100% 50%}
@keyframes btnFill{0%{transform:scaleX(0);opacity:.9}70%{transform:scaleX(1);opacity:.35}100%{transform:scaleX(1);opacity:0}}

.form-alert{
  display:none;margin-top:20px;padding:14px 16px;border-radius:12px;
  border:1px solid rgba(232,119,111,.4);background:rgba(232,119,111,.08);
  color:#F3B3AE;font-size:13.8px;gap:10px;align-items:flex-start;position:relative;
}
.form-alert.is-shown{display:flex;animation:fadeIn .3s var(--ease)}
.form-alert svg{width:17px;height:17px;flex:none;margin-top:2px}
.form-alert a{color:#fff;text-decoration:underline}

.success{display:none;text-align:center;padding:clamp(22px,4vw,44px) 8px;position:relative}
.success.is-shown{display:block;animation:successIn .55s var(--ease) both}
@keyframes successIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.success__ring{
  width:78px;height:78px;margin:0 auto 28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold-line);
  background:radial-gradient(circle at 50% 25%,rgba(210,170,75,.2),rgba(255,255,255,.02));
}
.success__ring svg{width:34px;height:34px;color:var(--gold)}
.success__check circle,.success__check path{stroke-dasharray:100;stroke-dashoffset:100}
.success.is-shown .success__check circle{animation:drawCheck .85s var(--ease) .12s forwards}
.success.is-shown .success__check path{animation:drawCheck .5s var(--ease) .6s forwards}
@keyframes drawCheck{to{stroke-dashoffset:0}}
.success h3{font-size:clamp(1.4rem,2.4vw,1.75rem)}
.success p{margin-top:16px;color:var(--muted);max-width:42ch;margin-inline:auto;font-size:15.4px}
.success__actions{margin-top:32px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- 14. FAQ ---------- */
.faq{max-width:860px;margin-inline:auto;display:grid;gap:12px}
.faq__item{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.005));
  overflow:hidden;transition:border-color .3s var(--ease);
}
.faq__item[open]{border-color:var(--gold-line)}
.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:19px clamp(18px,2.2vw,26px);cursor:pointer;list-style:none;
  font-size:15.6px;font-weight:600;color:var(--ink);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--gold-light)}
.faq__sign{
  width:26px;height:26px;flex:none;border-radius:50%;border:1px solid var(--line-strong);
  position:relative;transition:border-color .3s var(--ease),transform .35s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--gold);border-radius:2px;
  transform:translate(-50%,-50%);transition:opacity .3s var(--ease);
}
.faq__sign::before{width:11px;height:1.5px}
.faq__sign::after{width:1.5px;height:11px}
.faq__item[open] .faq__sign{border-color:var(--gold-line);transform:rotate(180deg)}
.faq__item[open] .faq__sign::after{opacity:0}
.faq__a{padding:0 clamp(18px,2.2vw,26px) 22px;color:var(--muted);font-size:14.8px;max-width:72ch}
.faq__item[open] .faq__a{animation:faqIn .38s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- 15. Contact band ---------- */
.contact-band{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  border:1px solid var(--gold-line);
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(210,170,75,.16),transparent 56%),
    radial-gradient(90% 120% at 92% 100%,rgba(32,160,224,.10),transparent 58%),
    linear-gradient(180deg,#13161B,#0B0D10);
  padding:clamp(34px,5vw,68px);text-align:center;
}
.contact-band__mark{width:52px;height:52px;margin:0 auto 26px;opacity:.95}
.contact-band h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
.contact-band p{margin:20px auto 0;max-width:58ch;color:var(--muted)}
.contact-band__actions{margin-top:34px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
/* official channels: email, Instagram, Facebook */
.channels{
  margin-top:36px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;max-width:1040px;margin-inline:auto;
}
.channel{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.02);text-align:start;
  transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.channel__ic{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--gold-line);background:rgba(210,170,75,.08);
  transition:background .35s var(--ease),border-color .35s var(--ease);
}
.channel__ic svg{width:18px;height:18px;color:var(--gold)}
.channel__text{display:flex;flex-direction:column;min-width:0}
.channel__label{
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
html[lang="ar"] .channel__label{letter-spacing:.04em;font-size:11px}
.channel__value{
  font-size:13.6px;font-weight:600;color:var(--ink-2);direction:ltr;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html[dir="rtl"] .channel__value{text-align:right}
.channel:hover{transform:translateY(-3px);border-color:var(--gold-line);background:rgba(210,170,75,.06)}
.channel:hover .channel__ic{background:rgba(210,170,75,.16);border-color:rgba(210,170,75,.5)}
.channel:hover .channel__value{color:#fff}

.social{display:flex;gap:10px;margin-top:20px}
.social__btn{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.social__btn svg{width:18px;height:18px;color:var(--muted)}
.social__btn:hover{transform:translateY(-3px);border-color:var(--gold-line);background:rgba(210,170,75,.1)}
.social__btn:hover svg{color:var(--gold)}

/* ---------- 16. Footer ---------- */
.footer{border-top:1px solid rgba(255,255,255,.06);padding-block:clamp(44px,5vw,64px) 30px;position:relative}
.footer__top{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,56px);
}
.footer__about{max-width:38ch;margin-top:22px;color:var(--muted-2);font-size:14px}
.footer h4{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;
}
html[lang="ar"] .footer h4{letter-spacing:.04em;font-size:12px}
.footer__links{display:grid;gap:11px}
.footer__links a{font-size:14.4px;color:var(--muted);transition:color .25s var(--ease)}
.footer__links a:hover{color:var(--gold-light)}
.footer__bottom{
  margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid rgba(255,255,255,.055);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer__copy{font-size:13.2px;color:var(--muted-2)}
.legal{margin-top:26px;display:grid;gap:12px}
.disclaimer{margin:0;font-size:12.2px;color:#5E636B;line-height:1.7;max-width:104ch}
.disclaimer:first-child{color:#6B7079}

/* ---------- 17. Reveal animation ---------- */
.js .reveal{opacity:0;transform:translateY(22px) scale(.995);filter:blur(3px)}
.reveal{transition:opacity .7s var(--ease),transform .7s var(--ease),filter .5s var(--ease)}
.reveal.is-visible{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}

/* ---------- 18. Responsive ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .request__grid{grid-template-columns:1fr;gap:40px}
  .request__aside{position:static}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .steps::before{display:none}
  .footer__top{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}
@media (max-width:1180px){
  /* tablets and small laptops: the CTA keeps its place but loses its tail */
  .nav__cta-full{display:none}
  .nav__cta-short{display:inline}
  .nav__link{padding:8px 9px;font-size:13.6px}
}
@media (max-width:1040px){
  /* below this the seven links stop fitting, so the menu takes over */
  .nav__links,.nav__lang{display:none}
  .nav__toggle{display:block}
  .nav__actions{margin-inline-start:auto}
  /* tablet: three-up becomes two-up rather than jumping straight to one */
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
  .card__title{font-size:1.2rem}
}
@media (max-width:880px){
  /* the flow reads top-to-bottom once there is no room for one row */
  .flow__row{flex-direction:column;align-items:stretch;gap:12px}
  .flow__node{width:100%}
  .flow__arrow{margin-inline:auto}
  .flow__arrow svg,html[dir="rtl"] .flow__arrow svg{transform:rotate(90deg)}
  .channels{grid-template-columns:repeat(2,minmax(0,1fr));max-width:560px}
}
@media (max-width:720px){
  :root{--nav-h:64px}
  body{font-size:16px}
  .section{padding-block:clamp(60px,11vw,84px)}
  .form-grid,.choices,.grid--3{grid-template-columns:1fr}
  .channels{grid-template-columns:1fr;max-width:420px}
  .choice__box{flex-direction:row;align-items:center;gap:14px;padding:15px}
  .choice__box svg.ic{width:20px;height:20px}
  .steps{grid-template-columns:1fr;row-gap:32px}
  .step p{max-width:none}
  .step__num{width:48px;height:48px;margin-bottom:18px}
  .hero__cta .btn{flex:1 1 100%}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
  
  /* the panel header stays on one line instead of wrapping to three */
  .chart-frame__bar{padding:11px 12px;gap:9px}
  .chart-frame__sym{white-space:nowrap;font-size:12px}
  .chart-frame__live{font-size:10px;letter-spacing:.07em;white-space:nowrap}

  /* capability chips in a tidy 2-up grid instead of four stacked rows */
  .hero__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .chip{font-size:11.5px;padding:9px 10px;gap:6px;justify-content:center;text-align:center}
  .form-foot > .btn{width:100%}


  /* comfortable thumb targets everywhere (44px is the usual floor) */
  .btn{--btn-py:15px}
  .footer__links a{display:inline-flex;align-items:center;min-height:44px}
  .mail-link{min-height:44px}
  .lang__btn{padding:11px 16px}
  .nav__toggle{width:44px;height:44px}
  .faq__q{padding-block:20px}
  .assure li{gap:16px}
}
@media (max-width:420px){
  .logo__tag{display:none}
  .chip{font-size:12px;padding:7px 12px}
  .hero__meta{gap:8px}
  .card,.form-card{padding:22px 18px}
  .contact-band{padding:30px 20px}
}

/* ---------- 18b. Touch devices ---------- */
@media (hover:none){
  /* hover lifts would stick after a tap, so touch gets a press state instead */
  .card:hover,.feature:hover,.btn:hover,.choice:hover .choice__box{transform:none}
  .card:hover{border-color:var(--line);box-shadow:none}
  .card:hover::before{opacity:0}
  .card:hover .icon-ring{transform:none;border-color:var(--gold-line)}
  .feature:hover{border-color:var(--line)}
  .btn:active{transform:scale(.985)}
  .card:active,.feature:active{border-color:var(--gold-line)}
  .nav__link:active,.mobile-menu__link:active,.footer__links a:active{color:var(--gold-light)}
  .choice:active .choice__box{border-color:var(--gold-line)}
}
/* fixed/overlay surfaces stay clear of notches and home indicators */
@supports (padding:max(0px)){
  .container{
    padding-inline:
      max(clamp(20px,5vw,44px),env(safe-area-inset-left))
      max(clamp(20px,5vw,44px),env(safe-area-inset-right));
  }
  .mobile-menu{padding-bottom:max(26px,calc(env(safe-area-inset-bottom) + 14px))}
}

/* ---------- 19. Motion / print preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .reveal{opacity:1;transform:none;filter:none}
  .hero__title .line > span,
  .hero__copy > .hero__badge,.hero__copy > .hero__lead,
  .hero__copy > .hero__cta,.hero__copy > .hero__meta,
  .hero__visual{opacity:1;transform:none}
  .section-title .w > span{opacity:1;transform:none}
  .nav .logo__mark path{clip-path:none}
  .ambient__aurora{animation:none}
  .card{transform:none!important}
  .slides__dot.is-active::after{transform:scaleX(1)}
        .chart-frame{transform:none!important}
  .steps::before{transform:scaleX(1)}
  .hero__title .line-2{animation:none;background-position:40% 0}
  .progress{display:none}
}
@media print{
  .nav,.mobile-menu,.ambient,.hero__cta,.form-card{display:none}
  body{background:#fff;color:#000}
}