/* =============================================================================
   KuDor landing — the design, verbatim.

   Taken straight from site/kudor_site/index.html rather than rebuilt by eye:
   the earlier hand-written version was close but never matched, and matching
   is the whole point. Do not hand-edit to "fix" a section — re-export from the
   design file so the two cannot drift.
   ============================================================================= */


  :root{
    --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F7F5; --surface-3:#EBF0ED;
    --ink:#0F1A14; --muted:#57635B; --faint:#8A968E;
    --brand:#526D4E; --brand-2:#698A64; --brand-deep:#3C5138; --brand-soft:#E9EFE7;
    --gold:#966F75; --gold-2:#C4A996; --gold-soft:#F1E8E6;
    --blue:#C4A996; --blue-soft:#F3ECE6;
    --border:#E7ECE9; --border-soft:#F0F3F1;
    --shadow:0 24px 60px -30px rgba(11,40,30,.34);
    --shadow-sm:0 12px 30px -20px rgba(11,40,30,.3);
    --radius:18px;
    --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:1460px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A100D; --surface:#111A16; --surface-2:#0E1512; --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;
      --blue:#CBB2A2; --blue-soft:#241E1A;
      --border:#1F2B25; --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:#0A100D; --surface:#111A16; --surface-2:#0E1512; --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;
    --blue:#CBB2A2; --blue-soft:#241E1A;
    --border:#1F2B25; --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}
  .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(14,90,70,.7)}
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -12px rgba(14,90,70,.8)}
  .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:#06140F}

  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:border-color .3s, background .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:color .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:width .25s}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex; gap:12px; align-items:center}

  section{padding:84px 0; position:relative; overflow:hidden}
  .sec-tint{background:var(--surface-2)}
  .blob{position:absolute; border-radius:50%; filter:blur(90px); pointer-events:none; z-index:0}
  .head{text-align:center; max-width:660px; margin:0 auto 48px; position:relative; z-index:1}
  .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}
  .wrap{position:relative; z-index:1}

  /* hero */
  .hero{padding:64px 0 56px; 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.05fr .95fr; gap:48px; align-items:center}
  .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:38ch}
  .hero-cta{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap}
  .hero-rate{display:flex; align-items:center; gap:12px; margin-top:24px; flex-wrap:wrap}
  .hero-rate .st{display:flex; gap:2px; color:var(--gold); font-size:18px}
  .hero-rate b{font-family:var(--dsp)} .hero-rate span{color:var(--faint); font-size:13.5px; font-weight:600}
  .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-stats{display:flex; gap:26px; margin-top:32px; flex-wrap:wrap}
  .hero-stats .col{position:relative}
  .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:30px; color:var(--ink); 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:560px}
  .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-dev{position:relative; z-index:1; width:298px; background:#0f1a14; border-radius:46px; padding:10px; box-shadow:0 40px 80px -30px rgba(12,50,38,.55); transform:rotate(-5deg); animation:floaty 7s ease-in-out infinite}
  .hero-dev .scr{border-radius:37px; overflow:hidden; background:#fff}
  .hero-dev .scr img{display:block; width:100%; height:auto}
  .hero-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}
  .hero-label{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(12,50,38,.4); font-family:var(--dsp); font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:8px; white-space:nowrap}
  .hero-label .e{font-size:16px}
  .hl-a{top:14%; inset-inline-end:-2%; animation:floaty 5.6s ease-in-out infinite}
  .hl-b{top:46%; inset-inline-start:-8%; animation:floaty 6.6s ease-in-out .6s infinite}
  .hl-c{bottom:15%; inset-inline-end:4%; animation:floaty 6.1s ease-in-out .3s infinite}
  @media (max-width:600px){.hero-visual{min-height:480px} .hero-dev{width:250px} .hero-label{font-size:12px; padding:7px 11px}}
  .hero-shot{position:relative; z-index:1; width:100%; max-width:640px; border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--surface); box-shadow:0 44px 90px -34px rgba(12,50,38,.5); animation:floaty 7s ease-in-out infinite}
  .hero-shot .bar{display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--border-soft); background:var(--surface-2)}
  .hero-shot .bar .d{width:11px; height:11px; border-radius:50%}
  .hero-shot .bar .u{margin-inline-start:auto; font-size:11px; color:var(--faint); font-weight:600; font-family:var(--dsp)}
  .hero-shot img{display:block; width:100%; height:auto}
  .cascade-wrap{position:relative; max-width:730px; margin:0 auto}
  .flabel{position:absolute; z-index:5; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:9px 13px; box-shadow:0 18px 40px -18px rgba(12,50,38,.42); font-family:var(--dsp); font-weight:700; font-size:13px; display:flex; align-items:center; gap:8px; white-space:nowrap}
  .flabel .e{font-size:16px}
  .cl-1{top:1%; inset-inline-end:1%; animation:floaty 5.6s ease-in-out infinite}
  .cl-2{top:40%; inset-inline-start:-3%; animation:floaty 6.6s ease-in-out .5s infinite}
  .cl-3{bottom:9%; inset-inline-end:9%; animation:floaty 6.1s ease-in-out .3s infinite}
  @media (max-width:820px){.flabel{display:none}}
  .hero-callout{position:absolute; z-index:6; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 14px; box-shadow:0 22px 46px -22px rgba(12,50,38,.5); display:flex; gap:11px; align-items:center; width:214px; direction:rtl}
  .hero-callout .ci{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:0 0 auto}
  .hero-callout b{font-family:var(--dsp); font-size:14px; display:block; line-height:1.3}
  .hero-callout small{color:var(--muted); font-size:11.5px}
  .hero-callout .arrow{position:absolute; left:100%; top:50%; transform:translateY(-50%); margin-left:5px; color:var(--brand)}
  .hc-1{top:13%; left:-34px; animation:floaty 6s ease-in-out infinite}
  .hc-2{top:44%; left:-56px; animation:floaty 6.8s ease-in-out .5s infinite}
  .hc-3{top:73%; left:-26px; animation:floaty 6.3s ease-in-out .3s infinite}
  @media (max-width:1050px){.hero-callout{display:none}}

  .mock{position:relative; animation:floaty 7s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  .mock-card{background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden}
  .mock-top{display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--border-soft)}
  .dot{width:10px; height:10px; border-radius:50%}
  .mock-body{padding:16px}
  .mock-row{display:flex; gap:12px}
  .kpi{flex:1; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px; padding:12px}
  .kpi b{font-family:var(--dsp); font-size:22px; display:block; color:var(--brand)}
  .kpi small{color:var(--faint); font-size:12px; font-weight:600}
  .bars{display:flex; align-items:flex-end; gap:8px; height:96px; margin-top:14px; padding:12px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:14px}
  .bars i{flex:1; background:var(--brand); border-radius:6px 6px 3px 3px; opacity:.9; transform-origin:bottom; animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both}
  .bars i:nth-child(even){background:var(--gold)}
  @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .appt{display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--border-soft); border-radius:12px}
  .appt .av{width:30px; height:30px; border-radius:9px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto}
  .appt .nm{font-weight:700; font-size:13px}
  .appt .tm{margin-inline-start:auto; font-size:12px; color:var(--faint); font-weight:600}
  .pill{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep)}
  .float-badge{position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:10px 13px; box-shadow:var(--shadow); display:flex; align-items:center; gap:9px; font-weight:700; font-size:13px}
  .fb1{top:-18px; left:-14px; animation:floaty 5.5s ease-in-out infinite}
  .fb2{bottom:44px; right:-18px; animation:floaty 6.5s ease-in-out .8s infinite}
  .hero-phone{position:absolute; bottom:-28px; inset-inline-start:-26px; width:150px; border-radius:26px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); padding:7px; z-index:3; animation:floaty 6s ease-in-out .4s infinite}
  .hero-phone .sc{border-radius:20px; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-soft)}
  .hero-phone .hh{background:linear-gradient(140deg,var(--brand),var(--brand-2)); color:#fff; padding:11px 10px}
  .hero-phone .hh b{font-family:var(--dsp); font-size:11px; display:block}
  .hero-phone .hh small{font-size:8.5px; opacity:.85}
  .hero-phone .bd{padding:8px}
  .hero-phone .rw{background:var(--surface); border:1px solid var(--border-soft); border-radius:9px; padding:6px 7px; margin-bottom:6px; display:flex; align-items:center; gap:6px}
  .hero-phone .rw .d{width:17px; height:17px; border-radius:5px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto}
  .hero-phone .rw span{font-size:8.5px; font-weight:700}
  .hero-phone .rw .p{margin-inline-start:auto; color:var(--brand); font-size:8px; font-weight:700}
  @media (max-width:600px){.hero-phone{display:none}}

  /* salon types grid */
  .types-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
  .type-card{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:1/1.16; cursor:pointer; border:1px solid var(--border); box-shadow:var(--shadow-sm)}
  .type-card .svgwrap{position:absolute; inset:0; transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .type-card .svgwrap svg{width:100%; height:100%; display:block}
  .type-card:hover .svgwrap{transform:scale(1.07)}
  .type-card .scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(6,20,15,.82) 0%, rgba(6,20,15,.2) 46%, transparent 72%)}
  .type-card .lb{position:absolute; bottom:14px; inset-inline:14px; color:#fff}
  .type-card .lb b{font-family:var(--dsp); font-size:16px; display:block}
  .type-card .lb small{opacity:.86; font-size:12px}
  .type-card .cta-ico{position:absolute; top:12px; inset-inline-start:12px; width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.92); color:var(--brand); display:grid; place-items:center; opacity:0; transform:translateY(-6px); transition:.3s}
  .type-card:hover .cta-ico{opacity:1; transform:none}
  @media (max-width:900px){.types-grid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:600px){.types-grid{grid-template-columns:repeat(2,1fr)}}

  /* salon showcase */
  .showcase{padding-bottom:74px}
  .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)}
  .track{display:flex; gap:18px; width:max-content; padding-inline:26px; animation:scrollx 48s linear infinite}
  .track:hover{animation-play-state:paused}
  @keyframes scrollx{to{transform:translateX(50%)}}
  .salon-card{flex:0 0 292px; 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:186px}
  .salon-card .ph svg{width:100%; height:100%; display:block}
  .salon-card .scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(6,20,15,.72) 0%, rgba(6,20,15,.14) 42%, transparent 70%)}
  .salon-card .rate{position:absolute; top:12px; inset-inline-start:12px; background:rgba(255,255,255,.96); color:#0F1A14; border-radius:999px; padding:5px 11px; font-weight:800; font-size:13px; display:flex; gap:5px; align-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
  .salon-card .rate svg{color:var(--gold)}
  .salon-card .on-ph{position:absolute; bottom:12px; inset-inline:14px; color:#fff}
  .salon-card .on-ph h4{font-size:18px; color:#fff}
  .salon-card .on-ph .t{font-size:12.5px; opacity:.9; margin-top:2px}
  .salon-card .foot{display:flex; align-items:center; justify-content:space-between; padding:12px 15px}
  .salon-card .foot .loc{color:var(--muted); font-size:13px; font-weight:600; display:flex; gap:6px; align-items:center}
  .salon-card .foot .book{color:var(--brand); font-family:var(--dsp); font-weight:700; font-size:13px; display:flex; gap:4px; align-items:center}

  /* modes */
  .modes{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
  .mode{position:relative; border-radius:22px; padding:30px 26px; overflow:hidden; border:1px solid var(--border); background:var(--surface); transition:transform .3s, box-shadow .3s}
  .mode:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .mode .ico{width:58px; height:58px; border-radius:16px; display:grid; place-items:center; margin-bottom:16px; color:#fff; background:linear-gradient(140deg,var(--brand),var(--brand-2))}
  .mode:nth-child(2) .ico{background:linear-gradient(140deg,var(--gold),var(--gold-2))}
  .mode:nth-child(3) .ico{background:linear-gradient(140deg,var(--gold),var(--gold-2))}
  .mode h3{font-size:21px}
  .mode p{color:var(--muted); margin-top:8px; font-size:15px}
  .mode .k{margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:var(--brand); font-weight:700; font-size:14px; font-family:var(--dsp)}

  /* ===== features — interactive tabs ===== */
  .fx{display:grid; grid-template-columns:360px 1fr; gap:26px; align-items:start}
  .fx-tabs{display:flex; flex-direction:column; gap:9px}
  .tab{position:relative; display:flex; gap:13px; align-items:center; padding:15px 16px; border-radius:15px; cursor:pointer; border:1px solid transparent; background:var(--surface-2); transition:background .25s, border-color .25s, transform .2s}
  .tab:hover{transform:translateX(-3px)}
  .tab.active{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm)}
  .tab .ti{width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto; background:var(--surface); color:var(--muted); border:1px solid var(--border); transition:.25s}
  .tab.active .ti{background:var(--brand); color:#fff; border-color:transparent}
  :root[data-theme="dark"] .tab.active .ti,:root:not([data-theme="light"]) .tab.active .ti{color:#06140F}
  .tab .tt{flex:1}
  .tab .tt b{font-family:var(--dsp); font-size:16px; display:block}
  .tab .tt small{color:var(--faint); font-size:12.5px; font-weight:600}
  .tab .tn{font-family:var(--dsp); font-weight:800; font-size:15px; color:var(--border); }
  .tab.active .tn{color:var(--gold)}
  .fx-preview{position:sticky; top:90px}
  .pv{background:var(--surface); border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow); overflow:hidden; animation:fade .45s ease}
  @keyframes fade{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
  .pv-top{display:flex; align-items:center; gap:8px; padding:13px 18px; border-bottom:1px solid var(--border-soft); background:var(--surface-2)}
  .pv-top .d{width:11px; height:11px; border-radius:50%}
  .pv-top .u{margin-inline-start:auto; font-size:12px; color:var(--faint); font-weight:600; font-family:var(--dsp)}
  .pv-body{display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:26px}
  .pv-info .ic{width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin-bottom:14px}
  .pv-info .tag{font-size:12px; color:var(--gold); font-weight:700; font-family:var(--dsp)}
  .pv-info h3{font-size:24px; margin-top:4px}
  .pv-info p{color:var(--muted); font-size:15px; margin-top:10px}
  .pv-info ul{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:11px}
  .pv-info li{display:flex; gap:9px; align-items:flex-start; color:var(--ink); font-size:14.5px; font-weight:600}
  .pv-info li .ck{width:20px; height:20px; border-radius:6px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto; margin-top:2px}
  .pv-visual{background:var(--surface-2); border:1px solid var(--border-soft); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:10px; min-height:260px}
  .ico-a{background:var(--brand-soft); color:var(--brand)} .ico-b{background:var(--gold-soft); color:var(--gold)} .ico-c{background:var(--blue-soft); color:var(--blue)}
  /* preview mini-visuals */
  .vhead{display:flex; align-items:center; justify-content:space-between}
  .vhead b{font-family:var(--dsp); font-size:14px}
  .vhead .chip{font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; background:var(--brand-soft); color:var(--brand-deep)}
  .vrow{display:flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border-soft); border-radius:11px; padding:9px 11px}
  .vrow .vc{width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto}
  .vrow .vt{font-size:12px; font-weight:700}.vrow .vt small{display:block; color:var(--faint); font-weight:500; font-size:10.5px}
  .vrow .vp{margin-inline-start:auto; font-size:11px; font-weight:700; color:var(--brand)}
  .vbar{height:8px; border-radius:5px; background:var(--surface-3); overflow:hidden}
  .vbar i{display:block; height:100%; background:var(--brand); border-radius:5px}
  .vchart{display:flex; align-items:flex-end; gap:7px; height:96px; padding-top:6px}
  .vchart i{flex:1; background:var(--brand); border-radius:5px 5px 2px 2px}
  .vchart i:nth-child(even){background:var(--gold)}
  .vcal{display:grid; grid-template-columns:repeat(5,1fr); gap:5px}
  .vcal span{aspect-ratio:1; border-radius:7px; background:var(--surface); border:1px solid var(--border-soft)}
  .vcal span.b{background:var(--brand-soft)} .vcal span.g{background:var(--gold-soft)} .vcal span.c{background:var(--blue-soft)}
  .vkpis{display:flex; gap:8px}
  .vkpi{flex:1; background:var(--surface); border:1px solid var(--border-soft); border-radius:10px; padding:8px}
  .vkpi b{font-family:var(--dsp); color:var(--brand); font-size:16px; display:block}
  .vkpi small{color:var(--faint); font-size:10px; font-weight:600}

  /* stats band */
  .stats-band{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); color:#fff}
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
  .stat{padding:8px 6px; text-align:center}
  .stat b{font-family:var(--dsp); font-weight:800; font-size:clamp(34px,4vw,48px); display:block; color:#fff}
  .stat b .u{color:var(--gold-2)}
  .stat span{color:#C7D8CE; font-size:15px; font-weight:600}
  .stat i{display:block; width:34px; height:3px; background:var(--gold-2); border-radius:3px; margin:12px auto 0}

  /* apps */
  .app-row{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; margin-top:30px}
  .app-row.rev{direction:ltr}.app-row.rev>*{direction:rtl}
  .app-txt h3{font-size:clamp(24px,3vw,32px); margin:12px 0}
  .app-txt p{color:var(--muted); font-size:16px}
  .store-row{display:flex; gap:12px; margin-top:22px; 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:transform .25s, opacity .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}
  .phones{display:flex; justify-content:center}
  .phone{width:214px; border-radius:34px; border:1px solid var(--border); background:var(--surface); box-shadow:var(--shadow); overflow:hidden; padding:9px}
  .phone .screen{border-radius:26px; overflow:hidden; background:var(--surface-2); border:1px solid var(--border-soft)}
  .ph-head{background:linear-gradient(140deg,var(--brand),var(--brand-2)); padding:16px 14px 22px; color:#fff}
  .ph-head .t{font-family:var(--dsp); font-weight:800; font-size:15px}
  .ph-head .s{font-size:11px; opacity:.85; margin-top:2px}
  .ph-body{padding:12px}
  .ph-card{background:var(--surface); border:1px solid var(--border-soft); border-radius:12px; padding:9px 11px; margin-bottom:8px; display:flex; align-items:center; gap:9px}
  .ph-card .c{width:26px; height:26px; border-radius:8px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto}
  .ph-card .l{font-size:11.5px; font-weight:700}
  .ph-card .l small{display:block; color:var(--faint); font-weight:500; font-size:10px}
  .ph-card .p{margin-inline-start:auto; font-size:10px; font-weight:700; color:var(--brand)}
  .app-tag{display:inline-block; background:var(--brand-soft); color:var(--brand-deep); font-family:var(--dsp); font-weight:700; font-size:12px; padding:5px 13px; border-radius:999px}

  /* device mockups — real app screenshots (colors hardcoded so the "screenshot" stays consistent in dark mode; swap .scr for <img> in Laravel) */
  .phones{display:flex; justify-content:center; perspective:1200px}
  .dev{width:246px; background:#0f1a14; border-radius:42px; padding:9px; box-shadow:var(--shadow); animation:floaty 6.5s ease-in-out infinite}
  .app-row.rev .dev{animation-delay:.9s}
  .dev .scr{background:#fff; border-radius:33px; overflow:hidden; direction:rtl; color:#111c16}
  .sbar{display:flex; justify-content:space-between; align-items:center; padding:10px 16px 4px; font-size:10px; font-weight:800; color:#111c16}
  .sbar .ic{display:flex; gap:4px; align-items:center; color:#111c16}
  .ascreen{padding:12px 13px 0}
  .ahd{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
  .ahd .flag{width:22px; height:15px; border-radius:3px; overflow:hidden; display:block}
  .ahd .ttl{font-family:var(--dsp); font-weight:800; font-size:15px; color:#111c16}
  .ahd .bell{width:28px; height:28px; border-radius:9px; background:#f2f4f2; display:grid; place-items:center; position:relative; color:#111c16}
  .ahd .bell i{position:absolute; top:6px; inset-inline-end:7px; width:5px; height:5px; border-radius:50%; background:#E5534B}
  .pcard{border:1px solid #ecefec; border-radius:17px; padding:13px; text-align:center; box-shadow:0 10px 22px -18px rgba(0,0,0,.5)}
  .pcard .av{width:56px; height:56px; border-radius:50%; margin:0 auto 8px; overflow:hidden; border:2px solid #fff; box-shadow:0 5px 12px -5px rgba(0,0,0,.4)}
  .pcard .nm{font-family:var(--dsp); font-weight:800; font-size:14px; color:#111c16}
  .pcard .rol{color:#4E7A54; font-size:10px; font-weight:700; margin-top:1px}
  .pcard .dv{height:1px; background:#ecefec; margin:10px 0}
  .pcard .meta{display:flex; align-items:stretch}
  .pcard .meta>.c{flex:1}
  .pcard .meta .k{font-weight:800; font-size:10px; color:#111c16}
  .pcard .meta .v{color:#8a938c; font-size:9.5px; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:3px}
  .pcard .meta .sep{flex:0 0 1px; background:#ecefec; margin:2px 8px}
  .tiles{display:flex; gap:10px; margin-top:11px}
  .tile{flex:1; border-radius:15px; padding:13px 8px; text-align:center; background:#efefee}
  .tile.g{background:#E9F3E8; box-shadow:inset 0 0 0 1.5px #cfe6cd}
  .tile .ci{width:36px; height:36px; border-radius:50%; margin:0 auto 8px; display:grid; place-items:center; color:#fff; background:#3E6B4A}
  .tile.g .ci{background:#84B583}
  .tile .lb{font-size:9.5px; font-weight:700; color:#4E7A54}
  .tile .vv{font-family:var(--dsp); font-weight:800; font-size:16px; color:#111c16; margin-top:3px}
  .att{border:1px solid #ecefec; border-radius:15px; padding:11px 12px; margin-top:11px}
  .att .th{display:flex; align-items:center; justify-content:center; gap:6px; color:#3E6B4A; font-family:var(--dsp); font-weight:800; font-size:12px}
  .att .dv{height:1px; background:#ecefec; margin:9px 0}
  .att .row{display:flex}
  .att .row>div{flex:1; text-align:center}
  .att .k{font-weight:800; font-size:9.5px; color:#111c16}
  .att .v{font-size:9.5px; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:3px}
  .anav{display:flex; align-items:flex-end; justify-content:space-between; padding:9px 16px 10px; margin-top:12px; border-top:1px solid #f0f1f0; position:relative}
  .anav a{font-size:8px; font-weight:700; color:#9aa39c; display:flex; flex-direction:column; align-items:center; gap:3px}
  .anav a.on{color:#3E6B4A}
  .anav .fab{position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:40px; height:40px; border-radius:50%; background:#3E6B4A; display:grid; place-items:center; color:#fff; box-shadow:0 8px 16px -6px rgba(62,107,74,.7)}
  /* customer screen bits */
  .search{display:flex; align-items:center; gap:8px; background:#f2f4f2; border-radius:12px; padding:9px 11px; color:#8a938c; font-size:10px; font-weight:600; margin-bottom:11px}
  .banner{border-radius:15px; padding:13px; color:#fff; background:linear-gradient(135deg,#3E6B4A,#0E5A46); margin-bottom:11px}
  .banner b{font-family:var(--dsp); font-size:12px; display:block}
  .banner small{font-size:9px; opacity:.9}
  .sec-t{font-family:var(--dsp); font-weight:800; font-size:11px; color:#111c16; margin:0 0 8px; display:flex; justify-content:space-between; align-items:center}
  .sec-t span{color:#4E7A54; font-size:9px}
  .scard{border:1px solid #ecefec; border-radius:14px; overflow:hidden; margin-bottom:9px}
  .scard .im{height:78px; position:relative}
  .scard .im svg{width:100%; height:100%; display:block}
  .scard .im .rt{position:absolute; top:7px; inset-inline-start:7px; background:rgba(255,255,255,.95); border-radius:999px; padding:2px 7px; font-size:8.5px; font-weight:800; color:#111c16; display:flex; gap:3px; align-items:center}
  .scard .im .rt svg{width:9px; height:9px; color:#C7A253}
  .scard .inf{display:flex; align-items:center; justify-content:space-between; padding:8px 10px}
  .scard .inf b{font-family:var(--dsp); font-size:11px}
  .scard .inf small{color:#8a938c; font-size:8.5px; display:block; font-weight:600}
  .scard .inf .bk{background:#3E6B4A; color:#fff; border-radius:999px; padding:5px 11px; font-size:9px; font-weight:700; font-family:var(--dsp)}
  .chips{display:flex; gap:6px; margin-bottom:11px; flex-wrap:wrap}
  .chips span{background:#E9F3E8; color:#3E6B4A; border-radius:999px; padding:5px 9px; font-size:8.5px; font-weight:700}
  /* employee 3-screen cascade */
  .emp{padding-top:12px}
  .emp-txt{text-align:center; max-width:640px; margin:0 auto 26px}
  .emp-txt h3{font-size:clamp(24px,3vw,32px); margin:12px 0}
  .emp-txt p{color:var(--muted); font-size:16px}
  .emp-txt .store-row{justify-content:center}
  .cascade{display:flex; justify-content:center; align-items:flex-start; padding:14px 0 6px}
  .cascade .dev{flex:0 0 auto; width:236px; animation:none; transition:transform .35s, box-shadow .35s}
  .cascade .dev.p1{transform:rotate(-4deg); z-index:3}
  .cascade .dev.p2{margin-inline-start:-70px; margin-top:44px; z-index:2}
  .cascade .dev.p3{margin-inline-start:-70px; margin-top:88px; transform:rotate(4deg); z-index:1}
  .cascade:hover .dev{transform:none; margin-top:0; margin-inline-start:14px}
  .cascade:hover .dev.p1{margin-inline-start:0}
  .emp .dev .scr{direction:ltr}
  .emp .pcard{margin-top:34px}
  .emp .pcard .av{width:60px;height:60px;margin:-46px auto 8px}
  .dev .scr img.shot{display:block;width:100%;height:auto}
  .hl-wrap{margin-top:64px}
  .hl-head{text-align:center; max-width:620px; margin:0 auto 34px}
  .hl-head h3{font-size:clamp(22px,2.8vw,32px); margin-top:12px}
  .hl-head p{color:var(--muted); font-size:16px; margin-top:12px}
  .hl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .hl{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:24px; display:flex; gap:15px; align-items:flex-start; transition:transform .3s, box-shadow .3s, border-color .3s}
  .hl:hover{transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent}
  .hl .i{width:50px; height:50px; border-radius:14px; display:grid; place-items:center; flex:0 0 auto}
  .hl h4{font-size:16.5px}
  .hl p{color:var(--muted); font-size:14px; margin-top:6px}
  @media(max-width:900px){.hl-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:600px){.hl-grid{grid-template-columns:1fr}}
  /* requests screen */
  .ahd .back{width:28px; height:28px; border-radius:9px; background:#f2f4f2; display:grid; place-items:center; color:#111c16}
  .rgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  .rq{border:1px solid #ecefec; border-radius:14px; padding:11px; box-shadow:0 8px 18px -16px rgba(0,0,0,.4)}
  .rq .rt{display:flex; align-items:flex-start; justify-content:space-between; gap:6px}
  .rq .tt{font-family:var(--dsp); font-weight:800; font-size:10.5px; color:#111c16; line-height:1.35}
  .rq .ic2{width:27px; height:27px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto}
  .rq .n{font-family:var(--dsp); font-weight:800; font-size:16px; margin-top:9px}
  /* booking screen */
  .mrow{display:flex; align-items:center; justify-content:center; gap:12px; color:#6b7770; font-family:var(--dsp); font-weight:700; font-size:11px; margin-bottom:9px}
  .mrow svg{color:#9aa39c}
  .days{display:flex; gap:5px; margin-bottom:11px}
  .day{flex:1; border:1px solid #ecefec; border-radius:9px; padding:6px 0; text-align:center}
  .day.on{background:#E9F3E8; border-color:#bcdcbb}
  .day small{display:block; font-size:7.5px; color:#8a938c; font-weight:700}
  .day b{font-size:12px; color:#111c16}
  .day.on b{color:#3E6B4A}
  .bkcard{border:1px solid #ecefec; border-radius:14px; padding:11px; margin-bottom:9px}
  .bkcard .bh{display:flex; align-items:center; gap:6px; font-family:var(--dsp); font-weight:800; font-size:10px; color:#111c16}
  .bkcard .bh .id{color:#3E6B4A; margin-inline-start:auto}
  .bkcard .dv{height:1px; background:#f0f1f0; margin:8px 0}
  .bkcard .who{display:flex; gap:8px; align-items:center}
  .bkcard .who .a{width:32px; height:32px; border-radius:50%; overflow:hidden; flex:0 0 auto}
  .bkcard .who .nm{font-family:var(--dsp); font-weight:800; font-size:11px}
  .bkcard .who .mt{color:#8a938c; font-size:8px; margin-top:2px; display:flex; gap:6px; flex-wrap:wrap}
  .bkcard .acts{display:flex; gap:7px; margin-top:9px}
  .bkcard .acts .v{flex:1; text-align:center; background:#3E6B4A; color:#fff; border-radius:999px; padding:7px; font-size:9.5px; font-weight:700; font-family:var(--dsp)}
  .bkcard .acts .r{flex:1; text-align:center; border:1px solid #E5A19B; color:#E5534B; border-radius:999px; padding:7px; font-size:9.5px; font-weight:700; font-family:var(--dsp)}
  @media (max-width:820px){
    .cascade{flex-wrap:wrap; gap:18px; justify-content:center}
    .cascade .dev,.cascade .dev.p1,.cascade .dev.p2,.cascade .dev.p3{transform:none; margin:0; width:220px}
  }

  /* edge */
  .edge{background:var(--brand-deep); color:#EAF1E4; border-radius:28px; padding:48px 40px; position:relative; overflow:hidden}
  .edge::after{content:""; position:absolute; width:340px; height:340px; border-radius:50%; background:rgba(184,137,47,.26); filter:blur(60px); top:-120px; left:-80px}
  .edge .head h2{color:#fff}.edge .head p{color:#C4D4CB}.edge .eyebrow{color:var(--gold-2)}
  .edge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; position:relative; z-index:1}
  .echip{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:20px; transition:background .3s, transform .3s}
  .echip:hover{background:rgba(255,255,255,.12); transform:translateY(-4px)}
  .echip .ico{width:44px; height:44px; border-radius:12px; background:rgba(184,137,47,.26); color:var(--gold-2); display:grid; place-items:center; margin-bottom:12px}
  .echip h3{font-size:17px; color:#fff}.echip p{color:#B7C7BC; font-size:14px; margin-top:6px}

  /* 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; transition:transform .3s, box-shadow .3s}
  .tst:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
  .stars{display:flex; gap:3px; color:var(--gold); margin-bottom:12px}
  .tst q{display:block; font-size:15.5px; color:var(--ink); line-height:1.85; quotes:none}
  .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; flex:0 0 auto}
  .tst .nm{font-weight:700; font-size:14.5px}
  .tst .rl{color:var(--faint); font-size:12.5px}

  /* about */
  .about{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center}
  .about-txt h2{font-size:clamp(26px,3.4vw,38px); margin:14px 0}
  .about-txt p{color:var(--muted); font-size:16.5px; margin-bottom:14px}
  .about-stats{display:flex; gap:26px; margin-top:22px; flex-wrap:wrap}
  .about-stats b{font-family:var(--dsp); font-size:30px; color:var(--brand); display:block}
  .about-stats span{color:var(--faint); font-size:13.5px; font-weight:600}
  .video{position:relative; border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow); aspect-ratio:16/11}
  .video svg.scene{position:absolute; inset:0; width:100%; height:100%}
  .video .play{position:absolute; inset:0; display:grid; place-items:center}
  .video .play button{all:unset; cursor:pointer; width:78px; height:78px; border-radius:50%; background:rgba(255,255,255,.94); display:grid; place-items:center; color:var(--brand-deep); box-shadow:0 16px 40px -12px rgba(0,0,0,.5); transition:transform .3s}
  .video .play button:hover{transform:scale(1.08)}
  .video .cap{position:absolute; bottom:16px; inset-inline-end:16px; color:#fff; font-family:var(--dsp); font-weight:700; font-size:14px; background:rgba(0,0,0,.3); padding:7px 14px; border-radius:10px; backdrop-filter:blur(4px)}

  /* contact / join */
  .contact-sec{background:linear-gradient(140deg,var(--brand),var(--brand-deep)); color:#fff}
  .contact-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center}
  .contact-info .eyebrow{color:var(--gold-2)}
  .contact-info h2{font-size:clamp(26px,3.4vw,40px); color:#fff; margin:14px 0}
  .contact-info p{color:#C9D8CF; font-size:16.5px; max-width:42ch}
  .contact-list{list-style:none; padding:0; margin:26px 0 0; display:flex; flex-direction:column; gap:14px}
  .contact-list li{display:flex; align-items:center; gap:13px; font-weight:600}
  .contact-list .ci{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1); color:var(--gold-2); display:grid; place-items:center; flex:0 0 auto}
  .contact-list small{display:block; color:#A9BEB3; font-weight:500; font-size:12.5px}
  .contact-card{background:var(--surface); color:var(--ink); border-radius:24px; padding:30px; box-shadow:var(--shadow)}
  .contact-card h3{font-size:20px; margin-bottom:4px}
  .contact-card .sub{color:var(--muted); font-size:14px; margin-bottom:18px}
  .field{margin-bottom:14px}
  .field label{display:block; font-family:var(--dsp); font-weight:700; font-size:13.5px; margin-bottom:6px}
  .field label .req{color:#D9534F}
  .field input,.field select,.field textarea{width:100%; font-family:var(--body); font-size:14.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 14px; outline:none; transition:border-color .2s, box-shadow .2s}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
  .field textarea{resize:vertical; min-height:96px}
  .contact-card button{width:100%; justify-content:center; margin-top:4px}
  .form-ok{display:none; align-items:center; gap:10px; background:var(--brand-soft); color:var(--brand-deep); border-radius:12px; padding:14px 16px; font-weight:700; font-size:14px; margin-top:14px}
  .form-ok.show{display:flex}

  /* pricing */
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch}
  .plan{background:var(--surface); border:1px solid var(--border); border-radius:22px; padding:30px 26px; display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s}
  .plan:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .plan.pop{border:2px solid var(--brand); box-shadow:var(--shadow)}
  .plan .badge{align-self:flex-start; background:var(--gold-soft); color:var(--gold); font-family:var(--dsp); font-weight:700; font-size:12px; padding:5px 12px; border-radius:999px; margin-bottom:12px}
  .plan h3{font-size:22px}.plan .desc{color:var(--muted); font-size:14px; margin-top:6px; min-height:42px}
  .plan .amt{font-family:var(--dsp); font-weight:800; font-size:40px; margin:16px 0 2px}
  .plan .amt small{font-size:15px; color:var(--faint); font-weight:600}
  .plan ul{list-style:none; padding:0; margin:18px 0 24px; display:grid; gap:11px; flex:1}
  .plan li{display:flex; gap:10px; color:var(--muted); font-size:14.5px; font-weight:600}
  .ck{width:20px; height:20px; border-radius:6px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex:0 0 auto}

  .cta-band{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); border-radius:28px; padding:56px 40px; text-align:center; color:#fff; position:relative; overflow:hidden}
  .cta-band h2{font-size:clamp(26px,3.4vw,40px); color:#fff}
  .cta-band p{color:#CFDCC7; margin:14px auto 26px; max-width:52ch; font-size:17px}
  .cta-band .btn-primary{background:#fff; color:var(--brand-deep)}
  .cta-band .btn-ghost{color:#fff; border-color:rgba(255,255,255,.4)}

  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; transition:color .2s}
  .foot-grid a:hover{color:var(--gold-2)}
  .foot-brand .logo{color:#fff}
  .foot-social{display:flex; gap:10px; margin-top:16px}
  .foot-social a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:grid; place-items:center; color:#fff; padding:0}
  .foot-social a:hover{background:rgba(255,255,255,.16)}
  .foot-bottom{display:flex; justify-content:space-between; align-items:center; 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:960px){
    .fx{grid-template-columns:1fr}
    .fx-tabs{flex-direction:row; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory}
    .tab{flex:0 0 220px; scroll-snap-align:start}
    .tab:hover{transform:none}
    .fx-preview{position:static}
  }
  @media (max-width:900px){
    .hero-grid,.about,.app-row,.contact-grid{grid-template-columns:1fr}
    .modes,.tst-grid,.price-grid,.edge-grid{grid-template-columns:1fr 1fr}
    .stats-grid{grid-template-columns:1fr 1fr}
    .pv-body{grid-template-columns:1fr}
    .nav-links{display:none}
  }
  @media (max-width:600px){
    .modes,.tst-grid,.price-grid,.edge-grid,.about-stats,.stats-grid,.foot-grid{grid-template-columns:1fr}
    .plan.pop{order:-1}
    .hero-cta .btn{flex:1; justify-content:center}
    .phone{width:180px}
    .wrap{padding-inline:18px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}.reveal{opacity:1; transform:none}}

  /* ==== stats band v2 ==== */
  .stats-head{text-align:center; margin-bottom:42px}
  .stats-head h2{color:#fff; font-size:clamp(24px,3vw,36px); margin-top:12px}
  .stats-head .eyebrow{color:var(--gold-2); justify-content:center; display:inline-flex}
  .stats-grid{max-width:1040px; margin:0 auto}
  .stat{position:relative}
  .stat .si{width:48px; height:48px; border-radius:14px; background:rgba(216,176,97,.16); color:var(--gold-2); display:grid; place-items:center; margin:0 auto 16px}
  .stat b .sg{color:var(--gold-2)}
  .stat b .u{color:var(--gold-2); font-size:.6em; margin-inline-start:2px}
  .stat:not(:first-child)::before{content:""; position:absolute; inset-inline-start:-10px; top:22%; bottom:22%; width:1px; background:rgba(255,255,255,.14)}
  @media(max-width:600px){.stat:not(:first-child)::before{display:none}}
  /* ==== testimonials marquee ==== */
  .tst-track-wrap{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
  .tst-track{display:flex; gap:20px; width:max-content; padding-inline:26px; animation:scrollx 66s linear infinite}
  .tst-track:hover{animation-play-state:paused}
  .tst-track .tst{flex:0 0 372px; position:relative; overflow:hidden}
  .tst .qmark{position:absolute; top:8px; inset-inline-end:20px; font-family:Georgia,"Times New Roman",serif; font-size:88px; line-height:1; color:var(--brand-soft); pointer-events:none; z-index:0}
  .tst .stars,.tst q,.tst .who{position:relative; z-index:1}
  @media(max-width:600px){.tst-track .tst{flex:0 0 300px}}
  /* ==== services circular strip ==== */
  .smarq{display:flex; gap:34px; width:max-content; padding:6px 26px 4px; animation:scrollx 44s linear infinite}
  .smarq:hover{animation-play-state:paused}
  .sv{flex:0 0 auto; text-align:center; width:108px}
  .sv .circ{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; margin:0 auto 11px; color:#fff; box-shadow:0 16px 34px -18px rgba(12,50,38,.5); transition:transform .3s}
  .sv:hover .circ{transform:translateY(-5px) scale(1.04)}
  .sv .nm{font-family:var(--dsp); font-weight:700; font-size:13.5px; color:var(--ink)}
  /* ==== stats band v3 — glass cards ==== */
  .stats-band{padding:72px 0}
  .stats-grid{gap:18px; max-width:1080px}
  .stat{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:30px 18px 26px; transition:transform .3s, background .3s, border-color .3s}
  .stat:hover{transform:translateY(-6px); background:rgba(255,255,255,.1); border-color:rgba(216,176,97,.42)}
  .stat:not(:first-child)::before{content:none}
  .stat .si{margin-bottom:14px}
  .stat b{direction:ltr; unicode-bidi:isolate; letter-spacing:-.01em}
  .stat b .sg{margin-inline-end:1px}
  .stat b .u{margin-inline-start:1px}
  .stat span{margin-top:12px}
  /* ==== stats band v4 — contained card ==== */
  .stats-band{background:var(--bg); color:var(--ink); padding:44px 0}
  .stats-card{background:linear-gradient(135deg,var(--brand),var(--brand-deep)); border-radius:28px; padding:52px 42px; position:relative; overflow:hidden; box-shadow:0 40px 84px -42px rgba(12,50,38,.55)}
  .stats-card::after{content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(216,176,97,.18); filter:blur(72px); top:-130px; inset-inline-end:-90px; pointer-events:none}
  .stats-head{margin-bottom:34px; position:relative; z-index:1}
  .stats-grid{position:relative; z-index:1}
  /* ==== stats band v5 — light, big icon + number ==== */
  .stats-band{background:var(--surface-2); color:var(--ink); padding:74px 0}
  .stats-head{margin-bottom:40px}
  .stats-head .eyebrow{color:var(--gold); justify-content:center; display:inline-flex}
  .stats-head h2{color:var(--ink); font-size:clamp(24px,3vw,36px); margin-top:12px}
  .stats-grid{max-width:1120px; margin:0 auto; grid-template-columns:repeat(4,1fr); gap:20px}
  .stat{background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:32px 22px; text-align:center; box-shadow:var(--shadow-sm); transition:transform .3s, box-shadow .3s}
  .stat:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
  .stat::before{content:none}
  .stat .stat-top{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px}
  .stat .si{width:auto; height:auto; background:none; margin:0; border-radius:0; color:var(--brand); display:grid; place-items:center}
  .stat .si svg{width:42px; height:42px}
  .stat b{font-family:var(--dsp); font-weight:800; font-size:clamp(32px,3.4vw,46px); color:var(--brand); direction:ltr; unicode-bidi:isolate; line-height:1; letter-spacing:-.01em; display:inline-flex; align-items:baseline}
  .stat b .sg{color:var(--gold)}
  .stat b .u{color:var(--gold); font-size:.48em; margin-inline-start:3px}
  .stat .lbl{color:var(--muted); font-size:15px; font-weight:600; display:block}
  /* ==== stats deco + bigger ==== */
  .stats-band{position:relative; overflow:hidden}
  .stats-band > .wrap{position:relative; z-index:1}
  .stats-deco{position:absolute; inset:0; z-index:0; pointer-events:none; color:var(--brand); opacity:.07}
  .stats-deco svg{position:absolute}
  .stats-grid{max-width:1220px}
  .stat{padding:38px 24px}
  .stat .stat-top{gap:14px; margin-bottom:16px}
  .stat .si svg{width:48px; height:48px}
  .stat b{font-size:clamp(56px,6vw,82px)}
  .stat b .sg,.stat b [data-count]{font-size:1em}
  @media(max-width:900px){.stats-deco{opacity:.05} .stat b{font-size:clamp(38px,7vw,50px)}}

/* =============================================================================
   Ours, on top of the design — a salon that uploaded a real cover shows it in
   place of the drawing. The drawing stays the default: salons upload a logo,
   and a logo stretched across a card reads as somebody else's business card.
   ============================================================================= */

.salon-card .ph .ph-img,
.type-card .ph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

   The design swaps one system panel in with a script, so it never needed a
   hidden state. Every panel is in the page here — readable with no JavaScript
   and visible to a search engine — so the ones not chosen are hidden.
   ============================================================================= */

.fx-preview .pv.is-hidden { display: none; }

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

   The design built its FAQ in JavaScript, styling each row inline. Here it is
   a <details> so it opens with no script at all and every answer is in the
   page for a search engine — which needs the same look written as real rules.
   ============================================================================= */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.faq-item > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  font-family: var(--dsp);
  font-weight: 700;
  font-size: 16.5px;
  list-style: none;
}

/* The browser's own disclosure triangle, in both engines. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ''; }

.faq-item .fq-i {
  color: var(--brand);
  transition: transform .3s;
  flex: 0 0 auto;
}

.faq-item[open] .fq-i { transform: rotate(180deg); }

.faq-item .fq-a p {
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 15px;
  margin: 0;
}

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

   Two places where the page carries something the design had no slot for: the
   values the admin lists under "about us", and the message shown when the
   contact form comes back with an error.
   ============================================================================= */

.about-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--muted);
}

/* An uploaded picture stands where the design drew its salon scene. */
.video img.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form-note {
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}

.form-note--bad {
  background: #FDECEA;
  color: #A93226;
  border: 1px solid #F3C8C3;
}

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

   Two rules that both come from the same decision: the site is set in Tajawal.

   1. The design's --body token puts "IBM Plex Sans Arabic" first. That face is
      not loaded — only Tajawal is — so every visitor got whichever of the two
      happened to be installed on their machine, and the page was set in a
      different font on different computers. Tajawal first makes it the same
      everywhere.

   2. A service that uploaded a picture shows it in its circle, filling it.
   ============================================================================= */

:root {
  --body: "Tajawal", "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
}


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

   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 three salons or one review 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.
   ============================================================================= */

.track.is-still,
.smarq.is-still,
.tst-track.is-still {
  width: 100%;
  justify-content: center;
  animation: none;
}

/* 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 glyph at. */

.sv .circ img {
  width: 62%;
  height: 62%;
  border-radius: 50%;
  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 language switch, the same shape the client site's header uses so the two
   headers read as one family. */

.lang-btn {
  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);
}

/* Left to right, the two pages read from the other edge: the design centres
   these with a right margin that has to swap sides. */

:root[dir="ltr"] .hero-sub,
:root[dir="ltr"] .head p {
  margin-inline: auto;
}

/* =============================================================================
   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
     .app-row.rev    a two-column block flipped by nesting one direction in the
                     other, which puts the phones on the wrong side in English
     .hero-callout   the floating labels beside the hero

   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"] .app-row.rev { direction: rtl; }
:root[dir="ltr"] .app-row.rev > * { direction: ltr; }

:root[dir="ltr"] .hero-callout { 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; }

/* The callouts hang off the side of the hero picture, and the picture swaps
   sides with the text. Their arrows point at it, so they turn round too. */

:root[dir="ltr"] .hc-1 { left: auto; right: -34px; }
:root[dir="ltr"] .hc-2 { left: auto; right: -56px; }
:root[dir="ltr"] .hc-3 { left: auto; right: -26px; }

:root[dir="ltr"] .hero-callout .arrow {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 5px;
  transform: translateY(-50%) scaleX(-1);
}

/* 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); }

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

   The inner pages — a terms page, the sign-up waiting room, the account forms.
   They used to wear the dashboard's login screen, which is why they needed
   their own rules here: the design was drawn for a marketing page and has
   nothing for a column of prose or a small standalone form.
   ============================================================================= */

.page-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 120px 0 42px;
  text-align: center;
}

.page-head .eyebrow { justify-content: center; }

.page-head h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin-top: 12px;
}

.page-lead {
  color: var(--muted);
  font-size: 16.5px;
  margin: 14px auto 0;
  max-width: 56ch;
}

.page-body {
  padding: 48px 0 72px;
}

.page-body > .wrap {
  max-width: 860px;
}

/* ---------------------------------------------------------------------------
   Prose. A content page is whatever the admin typed into the editor, so the
   tags it may contain are styled rather than the classes it does not have.
   --------------------------------------------------------------------------- */

.page-prose {
  /* A measure in characters, not pixels: prose is read by the line, and a
     line much past this is hard to come back from at the end of it. */
  max-width: 74ch;
  margin-inline: auto;
  color: var(--ink);
  font-size: 16.5px;
  line-height: 2;
}

.page-prose > *:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   What the editor baked in.

   A body pasted from Word arrives wearing Calibri at 12px on a white block,
   with the alignment fixed to one side — this page carries 1,147 font-family
   declarations and 71 font sizes of its own. None of them belong to the site,
   and on the English page the alignment is the wrong side outright, so they
   are all handed back to the page.
   --------------------------------------------------------------------------- */

.page-prose [style*="font-family"] { font-family: inherit !important; }
.page-prose [style*="font-size"] { font-size: inherit !important; }
.page-prose [style*="color"] { color: inherit !important; }
.page-prose [style*="background"] { background: transparent !important; }
.page-prose [style*="text-align"] { text-align: start !important; }

/* Nothing inside may be wider than the column, and a long unbroken string —
   a URL, an email — wraps rather than pushing the page sideways. */
.page-prose * { max-width: 100%; }
.page-prose { overflow-wrap: anywhere; }

.page-prose h1,
.page-prose h2,
.page-prose h3,
.page-prose h4 {
  margin: 32px 0 12px;
  line-height: 1.4;
}

.page-prose h2 { font-size: 24px; }
.page-prose h3 { font-size: 20px; }

.page-prose p { margin: 0 0 16px; color: var(--muted); }

.page-prose ul,
.page-prose ol { margin: 0 0 16px; padding-inline-start: 22px; color: var(--muted); }

.page-prose li { margin-bottom: 8px; }

.page-prose a { color: var(--brand); text-decoration: underline; }

.page-prose img { max-width: 100%; height: auto; border-radius: 14px; }

.page-prose table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.page-prose th,
.page-prose td { border: 1px solid var(--border); padding: 10px 12px; text-align: start; }

/* ---------------------------------------------------------------------------
   A small standalone form, and the note above it
   --------------------------------------------------------------------------- */

.page-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 32px;
  max-width: 460px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}

.page-card h2 { font-size: 20px; margin-bottom: 6px; }

.page-card .sub {
  color: var(--muted);
  font-size: 14.5px;
  margin-bottom: 20px;
}

.page-card .btn { width: 100%; justify-content: center; margin-top: 6px; }

.page-note {
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 700;
  margin: 0 auto 24px;
  max-width: 560px;
  text-align: center;
}

.page-note--good { background: var(--brand-soft); color: var(--brand-deep); }
.page-note--bad { background: #FDECEA; color: #A93226; border: 1px solid #F3C8C3; }

/* ---------------------------------------------------------------------------
   A page that only has something to say — the waiting room, a thank you
   --------------------------------------------------------------------------- */

.page-message {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}

.page-message .ico {
  width: 96px;
  height: 96px;
  border-radius: 30px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
}

.page-message p {
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.9;
}

.page-message .btn { margin-top: 26px; }