/* =============================================================================
   KuDor client site — the designs own stylesheet.
   
   Taken verbatim from site/client/index.html. Re-export it from there rather
   than editing it here; anything of ours goes in a marked block at the end.
   ============================================================================= */

  :root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7F5; --surface-3:#EBF0ED;
    --ink:#12201A; --muted:#54635B; --faint:#8A968E;
    --brand:#526D4E; --brand-2:#698A64; --brand-3:#84A37F; --brand-deep:#3C5138; --brand-soft:#E9EFE7;
    --gold:#966F75; --gold-2:#C4A996; --gold-soft:#F1E8E6;
    --border:#E7ECE9; --border-soft:#F0F3F1;
    --shadow:0 24px 60px -30px rgba(24,45,32,.34); --shadow-sm:0 12px 30px -20px rgba(24,45,32,.3);
    --dsp:"Tajawal","Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
    --body:"IBM Plex Sans Arabic","Tajawal","Cairo",system-ui,"Segoe UI",Tahoma,sans-serif;
    --maxw:1640px;
  }
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
    --bg:#0B1210; --surface:#111C17; --surface-2:#0E1613; --surface-3:#16211C;
    --ink:#EAF2ED; --muted:#9EB2A6; --faint:#71857A;
    --brand:#9CBE95; --brand-2:#84A37F; --brand-deep:#D6E4D1; --brand-soft:#1E2A1C;
    --gold:#C99AA0; --gold-2:#D4BBAC; --gold-soft:#2A2320;
    --border:#20302A; --border-soft:#18231E;
    --shadow:0 24px 60px -28px rgba(0,0,0,.7); --shadow-sm:0 12px 30px -18px rgba(0,0,0,.6);
  }}
  :root[data-theme="dark"]{
    --bg:#0B1210; --surface:#111C17; --surface-2:#0E1613; --surface-3:#16211C;
    --ink:#EAF2ED; --muted:#9EB2A6; --faint:#71857A;
    --brand:#9CBE95; --brand-2:#84A37F; --brand-deep:#D6E4D1; --brand-soft:#1E2A1C;
    --gold:#C99AA0; --gold-2:#D4BBAC; --gold-soft:#2A2320;
    --border:#20302A; --border-soft:#18231E;
    --shadow:0 24px 60px -28px rgba(0,0,0,.7); --shadow-sm:0 12px 30px -18px rgba(0,0,0,.6);
  }
  *{box-sizing:border-box} html{scroll-behavior:smooth}
  body{margin:0;direction:rtl;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,h4{font-family:var(--dsp);font-weight:800;line-height:1.22;text-wrap:balance;margin:0}
  p{margin:0} a{color:inherit;text-decoration:none} img,svg{max-width:100%}
  .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:26px;position:relative;z-index:1}
  .eyebrow{font-family:var(--dsp);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--gold);text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
  .eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:2px}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--dsp);font-weight:700;font-size:15px;padding:13px 24px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 14px 28px -12px rgba(82,109,78,.7)}
  .btn-primary:hover{transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border)}
  .btn-ghost:hover{background:var(--surface-2);transform:translateY(-2px)}
  :root[data-theme="dark"] .btn-primary,:root:not([data-theme="light"]) .btn-primary{color:#0B1210}
  nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--bg) 84%,transparent);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:.3s}
  nav.scrolled{border-color:var(--border);background:color-mix(in oklab,var(--bg) 95%,transparent)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:72px}
  .logo{display:flex;align-items:center;gap:10px;font-family:var(--dsp);font-weight:800;font-size:22px}
  .logo .mark{width:36px;height:36px;border-radius:11px;background:linear-gradient(140deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#fff}
  .nav-links{display:flex;gap:24px;font-weight:600;font-size:15px;color:var(--muted)}
  .nav-links a{position:relative;transition:.2s}.nav-links a:hover{color:var(--ink)}
  .nav-links a::after{content:"";position:absolute;bottom:-6px;right:0;width:0;height:2px;background:var(--gold);transition:.25s}
  .nav-links a:hover::after{width:100%}
  section{padding:84px 0;position:relative;overflow:hidden}
  .sec-tint{background:var(--surface-2)}
  .head{text-align:center;max-width:680px;margin:0 auto 48px}
  .head .eyebrow{justify-content:center;display:inline-flex}
  .head h2{font-size:clamp(28px,3.6vw,44px);margin-top:14px}
  .head p{color:var(--muted);font-size:17px;margin-top:14px}
  /* device */
  .dev{position:relative;width:298px;background:#0f1a14;border-radius:46px;padding:10px;box-shadow:var(--shadow)}
  .dev .scr{border-radius:37px;overflow:hidden;background:#fff}
  .dev .scr img{display:block;width:100%;height:auto}
  .dev .notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:96px;height:24px;border-radius:0 0 16px 16px;background:#0f1a14;z-index:2}
  .store-row{display:flex;gap:12px;flex-wrap:wrap}
  .store{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 18px;transition:.25s}
  .store:hover{transform:translateY(-3px);opacity:.9}
  .store small{display:block;font-size:11px;opacity:.75;line-height:1.2}
  .store b{font-family:var(--dsp);font-weight:700;font-size:16px;line-height:1.2}
  /* hero */
  .hero{padding:60px 0 64px;background:radial-gradient(1000px 480px at 84% -10%,var(--brand-soft) 0,transparent 62%),radial-gradient(760px 440px at 6% 110%,var(--gold-soft) 0,transparent 60%),var(--bg)}
  .hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
  .hero-pill{display:inline-flex;align-items:center;gap:9px;background:var(--brand-soft);color:var(--brand-deep);border:1px solid color-mix(in oklab,var(--brand) 22%,transparent);border-radius:999px;padding:8px 15px;font-family:var(--dsp);font-weight:700;font-size:13px}
  .hero-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px color-mix(in oklab,var(--brand) 20%,transparent)}
  .hero h1{font-size:clamp(34px,5vw,58px);margin-top:18px}
  .hero h1 .hl{background:linear-gradient(120deg,var(--brand),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero-sub{font-size:18px;color:var(--muted);margin-top:20px;max-width:40ch}
  .hero-cta{margin-top:28px}
  .hero-stats{display:flex;gap:26px;margin-top:30px;flex-wrap:wrap}
  .hero-stats .col:not(:last-child){padding-inline-end:26px;border-inline-end:1px solid var(--border)}
  .hero-stats b{font-family:var(--dsp);font-weight:800;font-size:28px;display:block;line-height:1.1}
  .hero-stats b .s{color:var(--gold)} .hero-stats span{color:var(--faint);font-size:13px;font-weight:600}
  .hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:600px}
  .hero-visual .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:var(--brand-soft);filter:blur(80px);opacity:.7;z-index:0}
  .hero-visual .dev{z-index:1;transform:none;animation:floatY 7s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-14px) rotate(-4deg)}}
  .flabel{position:absolute;z-index:3;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:9px 14px;box-shadow:0 18px 40px -18px rgba(24,45,32,.4);font-family:var(--dsp);font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px;white-space:nowrap}
  .flabel .e{font-size:16px}
  .fa{top:6%;inset-inline-end:-2%;animation:fl 5.6s ease-in-out infinite}
  .fb{top:15%;inset-inline-start:-5%;animation:fl 6.4s ease-in-out .4s infinite}
  .fc{top:70%;inset-inline-start:-3%;animation:fl 6.0s ease-in-out .2s infinite}
  .fd{top:32%;inset-inline-end:-6%;animation:fl 6.8s ease-in-out .6s infinite}
  .fe{top:59%;inset-inline-end:-3%;animation:fl 5.9s ease-in-out .35s infinite}
  .ff{top:85%;inset-inline-end:5%;animation:fl 6.5s ease-in-out .15s infinite}
  .fg{top:44%;inset-inline-start:-8%;animation:fl 6.2s ease-in-out .5s infinite}
  @keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
  @media(max-width:1050px){.flabel{position:static;display:inline-flex;margin:4px}}
  /* modes/features grids */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 24px;transition:transform .3s,box-shadow .3s}
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .card .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px;color:#fff}
  .card h3{font-size:20px}.card p{color:var(--muted);margin-top:8px;font-size:15px}
  .g1{background:linear-gradient(140deg,var(--brand),var(--brand-2))}
  .g2{background:linear-gradient(140deg,var(--gold),var(--gold-2))}
  .g3{background:linear-gradient(140deg,var(--brand-3),var(--brand-2))}
  /* steps */
  .steps-flow{display:flex;align-items:flex-start;justify-content:center;max-width:1120px;margin:0 auto}
  .steps-flow .step{flex:1;text-align:center;padding:0 14px;max-width:260px}
  .steps-flow .sn{position:relative;width:90px;height:90px;border-radius:50%;color:#fff;display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 20px 38px -14px rgba(24,45,32,.55);transition:transform .35s}
  .steps-flow .sn::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1.5px solid rgba(255,255,255,.28)}
  .steps-flow .sn svg{position:relative;z-index:1}
  .steps-flow .step:hover .sn{transform:translateY(-5px) scale(1.05)}
  .steps-flow .sn .num{position:absolute;top:-3px;inset-inline-start:-3px;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:13px;border:2.5px solid var(--bg);direction:ltr}
  .steps-flow .step h3{font-size:18px}
  .steps-flow .step p{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.7}
  .steps-flow .arrow{flex:0 0 auto;color:var(--brand-2);align-self:flex-start;margin-top:32px;opacity:.65}
  :root[data-theme="dark"] .steps-flow .sn,:root:not([data-theme="light"]) .steps-flow .sn{color:#0B1210}
  @media(max-width:760px){.steps-flow{flex-direction:column;align-items:center}.steps-flow .step{max-width:360px}.steps-flow .arrow{transform:rotate(-90deg);margin:6px auto;align-self:center}}
  /* app cascade */
  .cascade{display:flex;justify-content:center;align-items:flex-start;padding:20px 0 6px}
  .cascade .dev{flex:0 0 auto;width:250px;transition:transform .35s,margin .35s}
  .cascade .dev:nth-child(1){transform:rotate(-6deg);z-index:2}
  .cascade .dev:nth-child(2){margin-inline-start:-66px;margin-top:30px;z-index:4}
  .cascade .dev:nth-child(3){margin-inline-start:-66px;margin-top:60px;transform:rotate(0);z-index:3}
  .cascade .dev:nth-child(4){margin-inline-start:-66px;margin-top:30px;transform:rotate(4deg);z-index:2}
  .cascade .dev:nth-child(5){margin-inline-start:-66px;margin-top:0;transform:rotate(8deg);z-index:1}
  .cascade:hover .dev{transform:none;margin-top:0;margin-inline-start:12px}
  .cascade:hover .dev:nth-child(1){margin-inline-start:0}
  @media(max-width:900px){.cascade{flex-wrap:wrap;gap:18px}.cascade .dev,.cascade .dev:nth-child(n){transform:none;margin:0;width:210px}}
  /* spotlight (gift/wallet) */
  .spot{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
  .spot.rev{direction:ltr}.spot.rev>*{direction:rtl}
  .spot .txt h2{font-size:clamp(26px,3.4vw,38px);margin:12px 0}
  .spot .txt p{color:var(--muted);font-size:16.5px}
  .spot ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
  .spot li{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:15px}
  .spot li .ck{width:22px;height:22px;border-radius:7px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex:0 0 auto;margin-top:2px}
  .spot .pv{display:flex;justify-content:center}
  .app-tag{display:inline-block;background:var(--gold-soft);color:var(--gold);font-family:var(--dsp);font-weight:700;font-size:12px;padding:5px 13px;border-radius:999px}
  /* partner marquee */
  .track-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
  .marq{display:flex;gap:14px;width:max-content;padding-inline:26px;animation:scrollx 34s linear infinite}
  .marq:hover{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(50%)}}
  .chip{display:flex;align-items:center;gap:10px;padding:12px 20px;background:var(--surface);border:1px solid var(--border);border-radius:14px;font-family:var(--dsp);font-weight:700;white-space:nowrap;color:var(--muted)}
  .chip .d{width:26px;height:26px;border-radius:8px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
  /* testimonials */
  .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .tst{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:26px;position:relative;overflow:hidden}
  .tst .q{font-family:Georgia,serif;position:absolute;top:6px;inset-inline-end:20px;font-size:80px;color:var(--brand-soft);z-index:0}
  .tst .stars{display:flex;gap:3px;color:var(--gold);margin-bottom:12px;position:relative}
  .tst blockquote{margin:0;font-size:15.5px;line-height:1.85;position:relative}
  .tst .who{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;border-top:1px solid var(--border-soft)}
  .tst .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-family:var(--dsp);font-weight:800}
  .tst .nm{font-weight:700;font-size:14.5px}.tst .rl{color:var(--faint);font-size:12.5px}
  /* cta band */
  .cta{background:linear-gradient(135deg,var(--brand),var(--brand-deep));border-radius:28px;padding:52px 44px;color:#fff;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;overflow:hidden;position:relative}
  .cta h2{color:#fff;font-size:clamp(26px,3.4vw,40px)}.cta p{color:#CFDCC7;margin:14px 0 24px;font-size:17px}
  .cta .store{background:#fff;color:var(--brand-deep)}
  .cta .pv{display:flex;justify-content:center}
  .cta .dev{width:220px;transform:rotate(4deg)}
  footer{background:var(--brand-deep);color:#B7C7BC;padding:56px 0 28px}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
  .foot-grid h4{font-family:var(--dsp);font-weight:700;color:#fff;margin:0 0 12px;font-size:15px}
  .foot-grid a{display:block;color:#B7C7BC;font-size:14px;padding:5px 0}.foot-grid a:hover{color:var(--gold-2)}
  .foot-bottom{display:flex;justify-content:space-between;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px;flex-wrap:wrap;gap:12px}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;transform:none}
  @media(max-width:900px){.hero-grid,.spot,.cta{grid-template-columns:1fr}.grid3,.steps,.tst-grid{grid-template-columns:1fr 1fr}.nav-links{display:none}.cta .pv{display:none}}
  @media(max-width:600px){.grid3,.steps,.tst-grid{grid-template-columns:1fr}.dev{width:250px}}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

  /* ==== gift section ==== */
  .gift-wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
  .gift-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:560px}
  .gift-visual .glow{position:absolute;width:400px;height:400px;border-radius:50%;background:var(--gold-soft);filter:blur(80px);opacity:.85;z-index:0}
  .gift-visual .dev{z-index:1;transform:rotate(-4deg);animation:floaty 7s ease-in-out infinite}
  .gift-badge{position:absolute;z-index:3;bottom:20%;inset-inline-start:-4%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px 15px;box-shadow:var(--shadow);display:flex;gap:11px;align-items:center;max-width:236px}
  .gift-badge .bow{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,var(--gold),var(--gold-2));display:grid;place-items:center;color:#fff;flex:0 0 auto}
  .gift-badge b{font-family:var(--dsp);font-size:14px;display:block}.gift-badge small{color:var(--muted);font-size:11px}
  .gift-float{position:absolute;z-index:3;top:13%;inset-inline-end:-2%;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:8px 13px;box-shadow:var(--shadow);font-family:var(--dsp);font-weight:700;font-size:12.5px;display:flex;gap:7px;align-items:center}
  .gift-float .e{font-size:15px}
  .gift-tag{color:var(--gold);font-family:var(--dsp);font-weight:700;font-size:14px;display:block;margin-bottom:8px}
  .gc-h{font-size:clamp(24px,3vw,34px);margin-bottom:20px}
  .occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
  .occ{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 10px;text-align:center;transition:transform .25s,box-shadow .25s,border-color .25s}
  .occ:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--gold-2)}
  .occ .e{font-size:26px;display:block;margin-bottom:8px}
  .occ b{font-family:var(--dsp);font-size:13.5px}
  .gc-sub{font-family:var(--dsp);font-size:16px;margin-bottom:12px}
  .gsteps{display:flex;flex-wrap:wrap;gap:10px}
  .gstep{display:flex;gap:9px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 15px;font-weight:600;font-size:13.5px}
  .gstep .gn{width:22px;height:22px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:12px;flex:0 0 auto}
  @media(max-width:900px){.gift-wrap{grid-template-columns:1fr}.gift-badge,.gift-float{position:static;display:inline-flex;margin:6px}}
  @media(max-width:600px){.occasions{grid-template-columns:repeat(2,1fr)}}

  /* ==== wallet duo ==== */
  .wallet-duo{position:relative;display:flex;justify-content:center;align-items:flex-start;padding-top:8px}
  .wallet-duo .dev{width:244px;transition:transform .35s,margin .35s}
  .wallet-duo .wd-1{transform:rotate(-4deg);z-index:2}
  .wallet-duo .wd-2{margin-inline-start:-64px;margin-top:46px;transform:rotate(4deg);z-index:1}
  .wallet-duo:hover .dev{transform:none;margin-top:0}
  .wallet-duo:hover .wd-2{margin-inline-start:16px}
  @media(max-width:600px){.wallet-duo{flex-wrap:wrap;gap:16px}.wallet-duo .dev,.wallet-duo .wd-1,.wallet-duo .wd-2{transform:none;margin:0;width:200px}}

  /* ==== featured testimonials ==== */
  .tst-featured{display:grid;grid-template-columns:1.5fr 1fr;gap:22px}
  .tf-main{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:44px 40px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;justify-content:center;min-height:360px}
  .tf-main .qd{position:absolute;top:2px;inset-inline-end:30px;font-family:Georgia,serif;font-size:130px;color:var(--brand-soft);line-height:1;z-index:0;pointer-events:none}
  .tf-in{position:relative;z-index:1}
  .tf-in .stars{display:flex;gap:4px;color:var(--gold);margin-bottom:18px}
  .tf-in blockquote{margin:0;font-size:clamp(19px,2.1vw,26px);line-height:1.85;font-weight:600;color:var(--ink)}
  .tf-in .who{display:flex;align-items:center;gap:14px;margin-top:26px}
  .tf-in .av{width:54px;height:54px;border-radius:50%;background:linear-gradient(140deg,var(--brand),var(--brand-2));color:#fff;display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:20px;flex:0 0 auto}
  .tf-in .nm{font-family:var(--dsp);font-weight:800;font-size:17px}.tf-in .rl{color:var(--faint);font-size:14px}
  .tf-anim{animation:tfIn .55s cubic-bezier(.2,.8,.2,1)}
  @keyframes tfIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .tf-ctrl{display:flex;align-items:center;gap:14px;margin-top:28px;position:relative;z-index:1}
  .tf-arrow{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink);transition:.25s;flex:0 0 auto}
  .tf-arrow:hover{background:var(--brand);color:#fff;border-color:transparent}
  :root[data-theme="dark"] .tf-arrow:hover,:root:not([data-theme="light"]) .tf-arrow:hover{color:#0B1210}
  .tf-dots{display:flex;gap:7px;position:relative;z-index:1}
  .tf-dots i{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:.3s}
  .tf-dots i.on{width:26px;border-radius:6px;background:var(--brand)}
  .tf-side{display:flex;flex-direction:column;gap:18px}
  .tf-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px;cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;flex:1;display:flex;flex-direction:column;justify-content:center}
  .tf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--brand-2)}
  .tf-card .stars{display:flex;gap:3px;color:var(--gold);margin-bottom:10px}
  .tf-card blockquote{margin:0;font-size:14.5px;line-height:1.8;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tf-card .who{display:flex;align-items:center;gap:10px;margin-top:14px}
  .tf-card .av{width:36px;height:36px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:14px;flex:0 0 auto}
  .tf-card .nm{font-weight:700;font-size:13.5px}.tf-card .rl{color:var(--faint);font-size:12px}
  @media(max-width:900px){.tst-featured{grid-template-columns:1fr}.tf-side{flex-direction:row}}
  @media(max-width:600px){.tf-side{flex-direction:column}}

  /* ==== partner salon cards ==== */
  .marq{gap:18px}
  .salon-card{flex:0 0 264px;border-radius:20px;overflow:hidden;border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
  .salon-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .salon-card .ph{position:relative;height:132px;display:grid;place-items:center}
  .salon-card .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 78% 20%,rgba(255,255,255,.22),transparent)}
  .salon-card .emblem{width:58px;height:58px;border-radius:17px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;position:relative;z-index:1}
  .salon-card .srate{position:absolute;top:12px;inset-inline-start:12px;z-index:2;background:rgba(255,255,255,.96);color:#12201A;border-radius:999px;padding:5px 11px;font-weight:800;font-size:12.5px;display:flex;gap:5px;align-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.35)}
  .salon-card .srate svg{color:var(--gold)}
  .salon-card .sinfo{padding:14px 16px}
  .salon-card .sinfo b{font-family:var(--dsp);font-size:16px;display:block}
  .salon-card .smeta{color:var(--muted);font-size:12.5px;margin-top:5px;display:flex;gap:6px;align-items:center}
  .salon-card .stags{margin-top:11px;display:flex;gap:6px;flex-wrap:wrap}
  .salon-card .stags span{font-size:10.5px;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);border-radius:999px;padding:3px 9px}

  /* salon cards v2 (centered logo, no location) */
  .salon-card{flex:0 0 232px;text-align:center;padding:28px 20px 22px;height:auto;transition:transform .3s,box-shadow .3s,border-color .3s}
  .salon-card:hover{border-color:var(--brand-2)}
  .salon-card .slogo{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;color:#fff;margin:0 auto 14px;box-shadow:0 12px 26px -12px rgba(24,45,32,.5)}
  .salon-card b{font-family:var(--dsp);font-size:16.5px;display:block}
  .salon-card .srate{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:9px;color:var(--gold)}
  .salon-card .srate span{color:var(--ink);font-family:var(--dsp);font-weight:800;font-size:13px;margin-inline-start:5px}
  .salon-card .stags{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
  .salon-card .stags span{font-size:10.5px;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);border-radius:999px;padding:4px 10px}

  /* ==== salon photo cards (pro) ==== */
  .salon-card{flex:0 0 286px;text-align:start;padding:0;overflow:hidden;border-radius:20px;height:auto}
  .salon-card .ph{position:relative;height:174px}
  .salon-card .ph img{width:100%;height:100%;object-fit:cover;display:block}
  .salon-card .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,15,.3),transparent 55%)}
  .salon-card .srate{position:absolute;top:12px;inset-inline-start:12px;z-index:2;background:rgba(255,255,255,.96);color:#12201A;border-radius:999px;padding:5px 11px;font-weight:800;font-size:12.5px;display:flex;gap:5px;align-items:center;box-shadow:0 6px 16px -6px rgba(0,0,0,.35);margin:0}
  .salon-card .srate svg{color:var(--gold)}
  .salon-card .fav{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--gold)}
  .salon-card .sinfo{padding:14px 16px 16px}
  .salon-card .sinfo b{font-family:var(--dsp);font-size:16.5px;display:block}
  .salon-card .smeta{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
  .salon-card .smeta .rv{display:flex;align-items:center;gap:4px;color:var(--gold);font-weight:800}
  .salon-card .smeta .rv i{color:var(--faint);font-weight:600;font-style:normal}
  .salon-card .smeta .sep{color:var(--border)}
  .salon-card .smeta .sv{color:var(--ink);font-weight:700}
  .salon-card .stags{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
  .salon-card .stags span{font-size:10.5px;font-weight:700;color:var(--brand-deep);background:var(--brand-soft);border-radius:999px;padding:4px 10px}

  /* ==== salon full-image overlay cards ==== */
  .salon-card{flex:0 0 270px;height:326px;border-radius:22px;overflow:hidden;position:relative;padding:0;border:none;box-shadow:var(--shadow-sm);transition:transform .3s,box-shadow .3s}
  .salon-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .salon-card .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .salon-card:hover .bg{transform:scale(1.06)}
  .salon-card .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,20,15,.92) 0%,rgba(6,20,15,.6) 32%,rgba(6,20,15,.08) 66%,transparent 100%)}
  .salon-card .overlay{position:absolute;inset-inline:0;bottom:0;padding:18px 18px 20px;color:#fff;z-index:2}
  .salon-card .overlay b{font-family:var(--dsp);font-size:19px;display:block;color:#fff;line-height:1.3}
  .salon-card .meta{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:12.5px;color:#E7EFE9;flex-wrap:wrap}
  .salon-card .meta .r{display:flex;align-items:center;gap:4px;color:var(--gold-2);font-family:var(--dsp);font-weight:800}
  .salon-card .meta .r svg{color:var(--gold-2)}
  .salon-card .meta .sep{opacity:.5}
  .salon-card .tags{margin-top:13px;display:flex;gap:6px;flex-wrap:wrap}
  .salon-card .tags span{font-size:10.5px;font-weight:700;color:#fff;background:rgba(255,255,255,.2);border-radius:999px;padding:4px 11px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

  /* ==== salon logo monogram ==== */
  .salon-card .overlay .top{display:flex;align-items:center;gap:11px}
  .salon-card .logo{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--dsp);font-weight:800;font-size:19px;color:#fff;flex:0 0 auto;box-shadow:0 8px 18px -8px rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.35)}
  .salon-card .overlay b{margin:0}

  /* ==== cta download band ==== */
  .cta-badge{display:inline-block;background:rgba(255,255,255,.16);color:#fff;font-family:var(--dsp);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:999px;margin-bottom:16px}
  .cta-txt h2{margin-bottom:0}
  .cta-proof{display:flex;align-items:center;gap:10px;margin-top:22px}
  .cta-proof .st{color:var(--gold-2);font-size:17px;letter-spacing:1px}
  .cta-proof span:last-child{color:#CFDCC7;font-size:13.5px;font-weight:600}
  .cta-duo{display:flex;justify-content:center;align-items:flex-start}
  .cta-duo .dev{width:188px;transform:none;flex:0 0 auto;box-shadow:0 32px 64px -26px rgba(0,0,0,.6)}
  .cta-duo .dev:nth-child(1){z-index:2}
  .cta-duo .dev:nth-child(2){margin-inline-start:-48px;margin-top:52px;z-index:1}
  @media(max-width:900px){.cta .pv{display:flex!important}.cta-duo .dev{width:150px}.cta-duo .dev:nth-child(2){margin-top:40px;margin-inline-start:-40px}}
  @media(max-width:600px){.cta-duo{flex-wrap:nowrap}.cta-duo .dev{width:135px}}

  /* ==== footer v2 ==== */
  .foot-social{display:flex;gap:10px;margin-top:18px}
  .foot-social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;padding:0;transition:.25s}
  .foot-social a:hover{background:var(--gold);color:#0B1210;transform:translateY(-3px)}
  .foot-contact .crow{display:flex;align-items:center;gap:11px;padding:7px 0;color:#B7C7BC}
  .foot-contact .crow:hover{color:#fff}
  .foot-contact .ci{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:var(--gold-2);flex:0 0 auto}
  .foot-contact .crow span:not(.ci){font-size:13.5px;font-weight:700;color:#fff;display:block}
  .foot-contact .crow small{display:block;color:#B7C7BC;font-weight:500;font-size:12.5px;margin-top:1px}
  .foot-bottom a{display:inline;color:#B7C7BC}.foot-bottom a:hover{color:var(--gold-2)}
  .foot-pay b{font-weight:700;color:#EAF1EC}

  /* ==== about / vision ==== */
  .about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:stretch}
  .about-visual{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(160deg,var(--brand-soft),var(--surface));border:1px solid var(--border);padding:40px 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .about-visual .ab-blob{position:absolute;width:260px;height:260px;border-radius:50%;background:var(--gold-soft);filter:blur(70px);opacity:.7;top:-90px;inset-inline-end:-70px}
  .about-visual .logo-card{background:#fff;border-radius:22px;padding:18px 22px;box-shadow:var(--shadow-sm);position:relative;z-index:1}
  .about-visual .logo-card img{width:210px;max-width:70vw;display:block}
  .about-visual .astats{display:flex;gap:22px;margin-top:30px;padding-top:24px;border-top:1px solid var(--border);position:relative;z-index:1}
  .about-visual .astats b{font-family:var(--dsp);font-size:24px;color:var(--brand);display:block;line-height:1}
  .about-visual .astats span{color:var(--faint);font-size:12px;font-weight:600;margin-top:5px;display:block}
  .about-content h2{font-size:clamp(26px,3.4vw,38px)}
  .ab-intro{color:var(--muted);font-size:16.5px;margin-top:14px}
  .goal{display:flex;gap:15px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 24px;margin-top:16px;transition:transform .3s,box-shadow .3s}
  .goal:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
  .goal .gi{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:0 0 auto}
  .goal.g-brand .gi{background:var(--brand-soft);color:var(--brand)}
  .goal.g-gold .gi{background:var(--gold-soft);color:var(--gold)}
  .goal b{font-family:var(--dsp);font-size:18px;display:block}
  .goal p{color:var(--muted);font-size:14.5px;margin-top:6px}
  .values-head{text-align:center;margin:56px 0 34px}
  .values-head h3{font-size:clamp(22px,2.6vw,30px);margin-top:12px}
  .values{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
  .value{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:32px 20px;text-align:center;transition:transform .35s,box-shadow .35s,border-color .35s}
  .value:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
  .value .vi{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;margin:0 auto 16px;color:#fff;box-shadow:0 16px 32px -12px rgba(24,45,32,.55);transition:transform .35s}
  .value:hover .vi{transform:translateY(-3px) rotate(-4deg) scale(1.05)}
  .value b{font-family:var(--dsp);font-size:17px;display:block}
  .value p{color:var(--muted);font-size:12.5px;margin-top:9px;line-height:1.7}
  @media(max-width:900px){.about-grid{grid-template-columns:1fr}.values{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:600px){.values{grid-template-columns:1fr 1fr}}
  /* ==== newsletter ==== */
  .foot-news{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
  .foot-news h3{color:#fff;font-size:23px}
  .foot-news p{color:#B7C7BC;font-size:14.5px;margin-top:6px}
  .news-form{display:flex;gap:10px;flex:0 0 auto}
  .news-form input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:13px 16px;color:#fff;font-family:var(--body);font-size:14.5px;min-width:250px;outline:none}
  .news-form input::placeholder{color:#9FB2A6}
  .news-form input:focus{border-color:var(--gold-2)}
  .news-form button{all:unset;cursor:pointer;background:var(--gold-2);color:#0B1210;font-family:var(--dsp);font-weight:700;font-size:14.5px;padding:13px 26px;border-radius:12px;transition:.25s}
  .news-form button:hover{background:#fff}
  .news-ok{color:var(--gold-2);font-weight:700;font-size:14px;flex:1 1 100%;display:none}
  .news-ok.show{display:block}
  @media(max-width:760px){.news-form{flex:1 1 100%}.news-form input{flex:1;min-width:0}}

  /* ==== nav cta + payment icons ==== */
  .nav-cta{display:flex;gap:10px;align-items:center}
  .pay-icons{display:inline-flex;gap:7px;align-items:center;flex-wrap:wrap;vertical-align:middle;margin-inline-start:10px}
  .pay{height:27px;min-width:43px;background:#fff;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  @media(max-width:1050px){.nav-cta .btn-ghost{display:none}}

  /* ===== customer stats band ===== */
  .cstats-band{padding:34px 0;border-bottom:1px solid var(--border-soft);background:var(--surface)}
  .cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:920px;margin:0 auto}
  .cstat{text-align:center}
  .cstat b{font-family:var(--dsp);font-weight:800;font-size:clamp(24px,3vw,34px);color:var(--brand);display:block;direction:ltr}
  .cstat span{color:var(--muted);font-size:13px;font-weight:600}
  /* ===== popular services ===== */
  .svc-marq{display:flex;gap:40px;width:max-content;padding:12px 26px;animation:scrollx 46s linear infinite}
  .svc-marq:hover{animation-play-state:paused}
  .svc{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;width:132px}
  .svc-i{position:relative;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;box-shadow:0 20px 38px -14px rgba(24,45,32,.5);transition:transform .35s}
  .svc-i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.25)}
  .svc:hover .svc-i{transform:translateY(-8px) scale(1.06)}
  .svc b{font-family:var(--dsp);font-size:15.5px}
  /* ===== offers ===== */
  .off-slider{display:flex;align-items:center;gap:14px;max-width:var(--maxw);margin:0 auto;padding-inline:22px}
  .off-arrow{all:unset;cursor:pointer;flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid var(--border);display:grid;place-items:center;color:var(--ink);background:var(--surface);transition:.25s}
  .off-arrow:hover{background:var(--brand);color:#fff;border-color:transparent}
  :root[data-theme="dark"] .off-arrow:hover,:root:not([data-theme="light"]) .off-arrow:hover{color:#0B1210}
  .off-track{flex:1;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:12px 4px;scrollbar-width:none}
  .off-track::-webkit-scrollbar{display:none}
  .coupon{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg,#D2AC5E,#B8892F);color:#fff;box-shadow:0 20px 42px -20px rgba(184,137,47,.55);display:flex;align-items:stretch;height:156px;flex:0 0 340px;scroll-snap-align:start;transition:transform .3s,box-shadow .3s}
  .coupon:hover{transform:translateY(-4px)}
  .cpn-stub{flex:0 0 104px;display:grid;place-items:center;text-align:center;padding:8px}
  .cpn-off{font-family:var(--dsp);font-weight:800;font-size:38px;line-height:1;display:inline-flex;align-items:baseline;direction:ltr}
  .cpn-off i{font-size:.5em;font-style:normal;margin-inline-start:2px;font-weight:800}
  .cpn-perf{position:relative;align-self:stretch;width:0;border-inline-start:2px dashed rgba(255,255,255,.65)}
  .cpn-perf::before,.cpn-perf::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;background:var(--bg)}
  .cpn-perf::before{top:-11px}
  .cpn-perf::after{bottom:-11px}
  .cpn-body{flex:1;padding:16px 20px;display:flex;flex-direction:column;justify-content:center}
  .cpn-body b{font-family:var(--dsp);font-size:17px;display:block}
  .cpn-body p{color:rgba(255,255,255,.9);font-size:12.5px;margin-top:4px}
  .cpn-code{align-self:flex-start;margin-top:12px;background:#fff;color:#8a6410;border-radius:999px;padding:7px 15px;font-size:12px;font-weight:700;font-family:var(--dsp);box-shadow:0 6px 14px -6px rgba(0,0,0,.3)}
  .cpn-code{cursor:pointer;border:none;display:inline-flex;align-items:center;gap:4px}
  .cpn-code b{color:#7a5410;letter-spacing:1px;margin-inline-start:3px;display:inline}
  .cpn-code .cpy{margin-inline-start:5px;opacity:.65}
  .cpn-code:hover{transform:translateY(-1px)}
  .cpn-code.copied{color:#3E6B4A}
  @media(max-width:600px){.coupon{flex:0 0 300px}.off-slider{padding-inline:14px}}
  /* ===== safety ===== */
  .saf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  #safety .scard{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 20px;text-align:center;transition:transform .3s,box-shadow .3s}
  #safety .scard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  #safety .sc-i{width:58px;height:58px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;margin:0 auto 14px}
  #safety .scard b{font-family:var(--dsp);font-size:16px;display:block}
  #safety .scard p{color:var(--muted);font-size:13.5px;margin-top:8px}
  @media(max-width:900px){.saf-grid{grid-template-columns:1fr 1fr}}
  /* ===== referral ===== */
  .ref-band{background:linear-gradient(135deg,var(--brand),var(--brand-deep));border-radius:28px;padding:44px 44px;color:#fff;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;overflow:hidden;position:relative}
  .ref-band::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(210,172,94,.16);filter:blur(70px);bottom:-140px;inset-inline-start:-60px;pointer-events:none}
  .ref-txt{position:relative;z-index:1}
  .ref-badge{display:inline-block;background:rgba(255,255,255,.16);color:#fff;font-family:var(--dsp);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:999px;margin-bottom:14px}
  .ref-txt h2{color:#fff;font-size:clamp(24px,3vw,36px)}
  .ref-txt p{color:#CFDCC7;font-size:15.5px;margin-top:12px;max-width:52ch}
  .ref-rewards{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
  .reward{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 18px}
  .reward b{font-family:var(--dsp);font-size:20px;color:var(--gold-2);direction:ltr}
  .reward span{font-size:13px;color:#CFDCC7;font-weight:600}
  .ref-code-row{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--dsp);font-weight:700}
  .ref-side{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px}
  .ref-step{display:flex;align-items:center;gap:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:15px 17px}
  .ref-step .rn{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);color:var(--gold-2);display:grid;place-items:center;font-family:var(--dsp);font-weight:800;flex:0 0 auto}
  .ref-step b{font-family:var(--dsp);font-size:14.5px;color:#fff}
  .ref-step .rs-ic{margin-inline-start:auto;color:rgba(255,255,255,.55);flex:0 0 auto}
  @media(max-width:820px){.ref-band{grid-template-columns:1fr;gap:26px}}
  /* ===== cities ===== */
  .city-wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
  .city{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:11px 22px;font-family:var(--dsp);font-weight:700;font-size:15px;transition:.25s}
  .city:hover{border-color:var(--brand-2);color:var(--brand);transform:translateY(-3px)}
  /* ===== faq ===== */
  .faq-list{display:flex;flex-direction:column;gap:12px}
  .faq{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
  .faq summary{cursor:pointer;list-style:none;padding:18px 20px;font-family:var(--dsp);font-weight:700;font-size:16.5px;display:flex;align-items:center;justify-content:space-between;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:24px;color:var(--brand);font-weight:400;line-height:1;transition:transform .3s}
  .faq[open] summary::after{transform:rotate(45deg)}
  .faq p{padding:0 20px 18px;color:var(--muted);font-size:15px;margin:0;line-height:1.85}
  /* ===== floating buttons ===== */
  .floaters{position:fixed;bottom:22px;inset-inline-start:22px;z-index:60;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
  .fbtn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-family:var(--dsp);font-weight:700;box-shadow:0 14px 30px -10px rgba(0,0,0,.4);transition:transform .25s}
  .fbtn:hover{transform:translateY(-3px)}
  .fbtn.wa{width:54px;height:54px;justify-content:center;background:#25D366;color:#fff}
  .fbtn.dl{background:var(--brand);color:#fff;padding:13px 20px;font-size:14.5px}
  :root[data-theme="dark"] .fbtn.dl,:root:not([data-theme="light"]) .fbtn.dl{color:#0B1210}
  @media(min-width:901px){.fbtn.dl{display:none}}
  .lang-btn{all:unset;cursor:pointer;font-family:var(--dsp);font-weight:700;font-size:13px;color:var(--ink);border:1px solid var(--border);border-radius:999px;padding:8px 13px;transition:.25s}
  .lang-btn:hover{background:var(--surface-2);border-color:var(--brand-2)}
  :root[dir="ltr"] .hero-sub,:root[dir="ltr"] .head p{margin-inline:auto}


/* =============================================================================
   Ours, on top of the design.

   1. A rail that is not full.

      Every rail here is `width: max-content` with a scrolling animation, which
      the design could rely on because its lists were long enough to overflow
      any screen. Ours come from the database: with four services or three
      salons the rail is narrower than the page, so it sat against the start
      edge — the right, in Arabic — with the rest of the row empty, and the
      animation slid it further off.

      The script adds `is-still` when the list does not fill the rail. Then it
      centres and stops, which is what a short row should do.

   2. A service's own picture sits INSIDE its circle rather than filling it,
      so an uploaded icon reads at the size the design drew its own at.

   3. An occasion's drawing sits where the design put a small emoji.
   ============================================================================= */

.svc-marq.is-still,
.marq.is-still {
  width: 100%;
  justify-content: center;
  animation: none;
}

.svc .svc-i img {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  object-fit: cover;
}

/*
   A service with a real photo.

   The photo used to sit at 62% inside a coloured circle, so every service read
   as a tinted badge with a small picture in the middle rather than as the
   service itself. It fills the circle now, and the circle carries no colour of
   its own — there is nothing behind the photo to show through.
*/
.svc .svc-i--photo {
  background: none !important;
  overflow: hidden;
}

.svc .svc-i--photo img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}

.occ img {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px;
  border-radius: 11px;
  object-fit: cover;
}

/* The site's own logo in the header and the footer, sized to the line it sits
   on rather than to whatever the file happens to be. */

.logo__img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
}

.logo--light .logo__img { height: 30px; }

/* The featured review is not repeated in the column beside itself.
   `.tf-card` sets `display:flex`, which beats the browser's own rule for
   `[hidden]` — so with a single review the same card was drawn twice. */

.tf-card[hidden] { display: none; }

/* One review: no column beside it and nothing to page through, so the card
   takes the width on its own rather than leaving half the row empty. */

.tst-featured.is-single { grid-template-columns: 1fr; }
.tst-featured.is-single .tf-main { min-height: 0; }

/* =============================================================================
   Ours, on top of the design.

   Reading left to right.

   The design was drawn for Arabic and says so in three places, each of which
   beats the `dir` on the document:

     body            direction:rtl — everything on the page, whatever <html> says
     .spot.rev       a two-column block flipped by nesting one direction in the
                     other, which puts the picture on the wrong side in English
     .cpn-off etc    direction:ltr on the numbers, which is right either way

   Everything else in the design is written with logical properties
   (inset-inline-start, margin-inline, padding-inline), so it turns round on
   its own once the direction above is right. Only the hardcoded ones need
   saying again here, and only for English — Arabic is left exactly as drawn.
   ============================================================================= */

:root[dir="ltr"] body {
  direction: ltr;
}

/* The flip is the same trick, mirrored. */
:root[dir="ltr"] .spot.rev { direction: rtl; }
:root[dir="ltr"] .spot.rev > * { direction: ltr; }

/* The hover underline grows from the edge the line starts at. `right:0` is the
   right one in Arabic and the wrong one in English. */

:root[dir="ltr"] .nav-links a::after { right: auto; left: 0; }

/* An arrow drawn pointing the way Arabic reads points the wrong way in English.
   Only the horizontal ones carry this class — the FAQ caret, the download
   arrow and the "opens elsewhere" mark are not direction's business. */

:root[dir="ltr"] .dir-flip { transform: scaleX(-1); }