/* ============================================================
   تبي؟ / Tapai — core design system
   Shared across every page. Page agents must NOT edit this file.
   ============================================================ */

/* ---------- Dubai (brand font) — verified paths ---------- */
@font-face{font-family:'Dubai';font-style:normal;font-weight:400;font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/dubai-font@1.1.1/dubai-font/fonts/Dubai-Regular.woff2') format('woff2')}
@font-face{font-family:'Dubai';font-style:normal;font-weight:500;font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/dubai-font@1.1.1/dubai-font/fonts/Dubai-Medium.woff2') format('woff2')}
@font-face{font-family:'Dubai';font-style:normal;font-weight:700;font-display:swap;
  src:url('https://cdn.jsdelivr.net/npm/dubai-font@1.1.1/dubai-font/fonts/Dubai-Bold.woff2') format('woff2')}

/* ============================================================
   1. Tokens
   ============================================================ */
:root{
  /* palette — exact brand values, 60/20/10/5/5 */
  --ink:#0F3D3E;
  --deep:#1E5E59;
  --teal:#19A7A0;
  --gold:#F5C26B;
  --paper:#F3F6F4;

  /* derived surfaces */
  --ink-900:#0A2C2D;
  --ink-800:#0F3D3E;
  --ink-700:#164A48;
  --paper-pure:#FFFFFF;
  --line-dark:color-mix(in srgb, var(--paper) 14%, transparent);
  --line-light:color-mix(in srgb, var(--ink) 12%, transparent);

  /* text */
  --on-dark:#F3F6F4;
  --on-dark-soft:color-mix(in srgb, #F3F6F4 78%, transparent);
  --on-light:var(--ink);
  --on-light-soft:color-mix(in srgb, var(--ink) 72%, transparent);

  /* type — fluid, Arabic-safe minimums */
  --fs-display:clamp(2.75rem, 6.2vw, 5.5rem);
  --fs-h1:clamp(2.25rem, 4.8vw, 4rem);
  --fs-h2:clamp(1.9rem, 3.4vw, 3rem);
  --fs-h3:clamp(1.375rem, 1.9vw, 1.75rem);
  --fs-lead:clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body:1.0625rem;      /* 17px floor for Arabic */
  --fs-sm:1rem;
  --fs-label:0.9375rem;

  --lh-display:1.22;
  --lh-head:1.32;
  --lh-body:1.8;            /* Arabic needs 1.75–1.85 */

  /* space — 4px base */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem;   --s-7:3rem;   --s-8:4rem;
  --s-9:6rem;   --s-10:8rem;
  --section:clamp(4.5rem, 9vw, 9rem);

  /* radii — squircle language from the pattern */
  --r-sm:10px; --r-md:18px; --r-lg:28px; --r-xl:40px; --r-pill:999px;

  /* elevation — teal-tinted, never neutral black */
  --sh-sm:0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
  --sh-md:0 12px 32px -8px color-mix(in srgb, var(--ink) 18%, transparent);
  --sh-lg:0 32px 64px -16px color-mix(in srgb, var(--ink) 28%, transparent);

  /* motion */
  --e-out:cubic-bezier(.22,.68,.24,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s; --t-mid:.34s; --t-slow:.6s;

  --container:1200px;
}

/* ============================================================
   2. Reset
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Dubai','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:var(--lh-body);
  letter-spacing:0;                 /* NEVER change — Arabic is a connected script */
  color:var(--on-light);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:0}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:where(h1,h2,h3,h4){font-weight:700;line-height:var(--lh-head);letter-spacing:0;text-wrap:balance}
p{text-wrap:pretty}

::selection{background:var(--teal);color:#fff}

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

/* ============================================================
   3. Layout primitives
   ============================================================ */
.container{width:min(100% - 3rem, var(--container));margin-inline:auto}
.container-wide{width:min(100% - 3rem, 1440px);margin-inline:auto}
.section{padding-block:var(--section)}

.surface-ink{background:var(--ink);color:var(--on-dark)}
.surface-deep{background:var(--deep);color:var(--on-dark)}
.surface-paper{background:var(--paper);color:var(--on-light)}
.surface-white{background:var(--paper-pure);color:var(--on-light)}

.surface-ink h1,.surface-ink h2,.surface-ink h3,
.surface-deep h1,.surface-deep h2,.surface-deep h3{color:var(--on-dark)}

/* ============================================================
   4. Type utilities
   ============================================================ */
.display{font-size:var(--fs-display);line-height:var(--lh-display);font-weight:700}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);line-height:1.7;font-weight:400;max-width:56ch}
.muted{color:var(--on-light-soft)}
.surface-ink .muted,.surface-deep .muted{color:var(--on-dark-soft)}
.measure{max-width:62ch}

/* the ؟ glyph — brand's core device */
.q{color:var(--gold);font-weight:700}

/* section eyebrow — NO letter-spacing, NO uppercase */
.eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-label);font-weight:500;
  color:var(--teal);
  margin-block-end:var(--s-4);
}
.eyebrow::before{
  content:"";width:26px;height:2px;border-radius:2px;
  background:currentColor;opacity:.55;
}
.surface-ink .eyebrow,.surface-deep .eyebrow{color:var(--gold)}

/* ============================================================
   5. Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-3);
  min-height:52px;padding-inline:var(--s-6);padding-block:var(--s-3);
  border-radius:var(--r-pill);
  font-weight:500;font-size:var(--fs-body);letter-spacing:0;
  transition:transform var(--t-fast) var(--e-out),
             background-color var(--t-fast) var(--e-soft),
             box-shadow var(--t-mid) var(--e-out),
             color var(--t-fast) var(--e-soft);
  will-change:transform;
}
.btn svg{width:20px;height:20px;flex:none}
/* forward arrow points LEFT in RTL */
.btn .arrow{transition:transform var(--t-mid) var(--e-out)}
.btn:hover .arrow{transform:translateX(-5px)}

.btn-primary{background:var(--gold);color:var(--ink);box-shadow:var(--sh-sm)}
.btn-primary:hover{background:color-mix(in srgb,var(--gold) 88%,#fff);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-primary:active{transform:translateY(0)}

.btn-solid{background:var(--ink);color:var(--on-dark)}
.btn-solid:hover{background:var(--deep);transform:translateY(-2px);box-shadow:var(--sh-md)}

.btn-ghost{border:1.5px solid var(--line-light);color:var(--on-light)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.surface-ink .btn-ghost,.surface-deep .btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.surface-ink .btn-ghost:hover,.surface-deep .btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

.btn-lg{min-height:60px;padding-inline:var(--s-7);font-size:1.125rem}

/* ============================================================
   6. Icons
   ============================================================ */
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-lg{width:34px;height:34px}
.icon-xl{width:44px;height:44px;stroke-width:1.5}

/* generous circular well — never a tiny tinted square */
.icon-well{
  width:72px;height:72px;border-radius:var(--r-pill);
  display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--teal) 12%,transparent);
  color:var(--teal);
  transition:background-color var(--t-mid) var(--e-soft),
             color var(--t-mid) var(--e-soft),
             transform var(--t-mid) var(--e-out);
}
.surface-ink .icon-well,.surface-deep .icon-well{
  background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}

/* ============================================================
   7. Pattern field (النمط البصري)
   Scattered squircles + circles. Replaces the banned particle hero.
   ============================================================ */
.pattern-field{
  position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Crect x='20' y='20' width='64' height='64' rx='22' fill='%230F3D3E'/%3E%3Ccircle cx='150' cy='52' r='26' fill='%2319A7A0'/%3E%3Crect x='220' y='20' width='64' height='64' rx='22' fill='%239CBEB8'/%3E%3Ccircle cx='342' cy='50' r='20' fill='%23F5C26B'/%3E%3Ccircle cx='52' cy='142' r='24' fill='%23EDE7DA'/%3E%3Crect x='120' y='110' width='64' height='64' rx='22' fill='%230F3D3E'/%3E%3Ccircle cx='250' cy='142' r='28' fill='%230F3D3E'/%3E%3Crect x='310' y='110' width='64' height='64' rx='22' fill='%239CBEB8'/%3E%3Crect x='20' y='200' width='64' height='64' rx='22' fill='%239CBEB8'/%3E%3Ccircle cx='150' cy='232' r='26' fill='%23F5C26B'/%3E%3Crect x='220' y='200' width='64' height='64' rx='22' fill='%230F3D3E'/%3E%3Ccircle cx='342' cy='230' r='18' fill='%2319A7A0'/%3E%3Ccircle cx='52' cy='322' r='26' fill='%230F3D3E'/%3E%3Crect x='120' y='290' width='64' height='64' rx='22' fill='%23EDE7DA'/%3E%3Ccircle cx='250' cy='322' r='24' fill='%239CBEB8'/%3E%3Crect x='310' y='290' width='64' height='64' rx='22' fill='%230F3D3E'/%3E%3C/svg%3E");
  background-size:400px 400px;
  opacity:.10;
}
.pattern-field.is-soft{opacity:.06}
.pattern-field.is-strong{opacity:.16}

@media (prefers-reduced-motion:no-preference){
  .pattern-field.is-drifting{animation:drift 64s linear infinite}
}
@keyframes drift{from{background-position:0 0}to{background-position:400px 400px}}

/* ============================================================
   8. Header / nav — logo RIGHT, CTA LEFT (RTL)
   ============================================================ */
/* Light header — matches the approved hero reference. Shared by every page. */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper-pure) 90%,transparent);
  backdrop-filter:blur(14px);
  border-block-end:1px solid var(--line-light);
  color:var(--ink);
}
.site-header .container{
  display:flex;align-items:center;gap:var(--s-5);
  min-height:78px;
}
.site-header .brand-logo{color:var(--ink)}

.brand{display:inline-flex;align-items:center;flex:none}

/* Official logo. The wordmark path uses currentColor so it inverts by context;
   the gold swoosh and teal dots stay fixed brand values. */
.brand-logo{height:40px;width:auto;flex:none;color:var(--on-dark);display:block}
.surface-paper .brand-logo,.surface-white .brand-logo{color:var(--ink)}
.brand-logo--lg{height:56px}
@media (max-width:600px){.brand-logo{height:34px}}

/* legacy lockup — retained only until every page is swapped to .brand-logo */
.brand-mark{width:38px;height:48px;flex:none}
.brand-word{font-size:1.6rem;font-weight:700;line-height:1;color:var(--on-dark);letter-spacing:0}
.brand-word .q{font-size:1.5rem}

.nav-list{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:auto}
.nav-list a{
  position:relative;
  display:block;padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);
  font-weight:500;color:var(--on-light-soft);
  transition:color var(--t-fast) var(--e-soft),background-color var(--t-fast) var(--e-soft);
}
.nav-list a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
/* active gets a teal underline, per the reference — not a colour swap */
.nav-list a[aria-current="page"]{color:var(--ink);font-weight:700}
.nav-list a[aria-current="page"]::after{
  content:"";position:absolute;inset-block-end:2px;
  inset-inline:var(--s-4);height:2px;border-radius:2px;background:var(--teal);
}

/* header CTA is the outlined gold pill from the reference, not the solid gold button */
.nav-cta{flex:none}
/* Sized to the reference: a light chip (~144x44 outer), not a chunky button.
   Measured against hero-ref.png — the previous 162x55 pushed the whole nav run inboard. */
.site-header .nav-cta{
  background:transparent;color:var(--ink);
  border:1.5px solid color-mix(in srgb,var(--gold) 78%,transparent);
  box-shadow:none;
  min-height:44px;padding-inline:var(--s-5);
  font-size:var(--fs-sm);gap:var(--s-2);
}
.site-header .nav-cta svg{width:18px;height:18px}
.site-header .nav-cta:hover{
  background:color-mix(in srgb,var(--gold) 16%,transparent);
  border-color:var(--gold);transform:translateY(-1px);box-shadow:none;
}

.nav-toggle{
  display:none;width:46px;height:46px;border-radius:var(--r-sm);
  color:var(--ink);place-items:center;
  margin-inline-start:auto;
}
.nav-toggle svg{width:26px;height:26px}

@media (max-width:900px){
  .nav-toggle{display:grid}
  .nav-list{
    position:fixed;inset:78px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-pure);
    padding:var(--s-4) var(--s-5) var(--s-6);
    border-block-end:1px solid var(--line-light);
    box-shadow:var(--sh-md);
    margin-inline-start:0;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity var(--t-mid) var(--e-soft),transform var(--t-mid) var(--e-out),visibility var(--t-mid);
  }
  .nav-list.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .nav-list a{padding:var(--s-4);font-size:1.125rem}
  .site-header .nav-cta{display:none}
}

/* Skip link.
   Hidden with clip-path, NOT an offscreen offset. Under dir="rtl",
   inset-inline-start:-9999px resolves to right:-9999px, which pushes the box
   ~10,000px past the page edge, widens the document and corrupts full-page
   screenshots. clip-path keeps it focusable with zero layout footprint. */
.skip{
  position:absolute;top:var(--s-3);inset-inline-start:var(--s-5);z-index:200;
  background:var(--gold);color:var(--ink);padding:var(--s-3) var(--s-5);
  border-radius:var(--r-pill);font-weight:500;
  clip-path:inset(50%);opacity:0;pointer-events:none;
}
.skip:focus,.skip:focus-visible{clip-path:none;opacity:1;pointer-events:auto}

/* ============================================================
   9. Footer
   ============================================================ */
.site-footer{background:var(--ink-900);color:var(--on-dark);padding-block:var(--s-9) var(--s-6);position:relative;overflow:hidden}
.footer-grid{
  display:grid;gap:var(--s-7);
  grid-template-columns:1.6fr 1fr 1fr;
  position:relative;z-index:1;
}
.footer-brand .lead{color:var(--on-dark-soft);font-size:var(--fs-body);max-width:38ch;margin-block-start:var(--s-4)}
.footer-col h3{font-size:var(--fs-label);font-weight:500;color:var(--gold);margin-block-end:var(--s-4)}
.footer-col li + li{margin-block-start:var(--s-3)}
.footer-col a{color:var(--on-dark-soft);transition:color var(--t-fast) var(--e-soft)}
.footer-col a:hover{color:var(--on-dark)}
.footer-contact a{display:inline-flex;align-items:center;gap:var(--s-3)}
.footer-contact .icon{width:20px;height:20px;color:var(--teal)}
.footer-bottom{
  margin-block-start:var(--s-8);padding-block-start:var(--s-5);
  border-block-start:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between;
  color:var(--on-dark-soft);font-size:var(--fs-sm);
  position:relative;z-index:1;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ============================================================
   10. Floating WhatsApp
   ============================================================ */
/* On-palette, deliberately quiet — it must never outshout the page CTA. */
.wa-float{
  position:fixed;inset-block-end:var(--s-5);inset-inline-start:var(--s-5);z-index:70;
  width:54px;height:54px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--ink-900);color:var(--teal);
  border:1px solid color-mix(in srgb,var(--teal) 32%,transparent);
  box-shadow:var(--sh-md);
  transition:transform var(--t-mid) var(--e-out),
             color var(--t-fast) var(--e-soft),
             border-color var(--t-fast) var(--e-soft);
}
.wa-float:hover{transform:scale(1.06);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 46%,transparent)}
.wa-float svg{width:27px;height:27px}

/* ============================================================
   11. Scroll reveal
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(22px);
    transition:opacity var(--t-slow) var(--e-out),transform var(--t-slow) var(--e-out)}
  .reveal.is-in{opacity:1;transform:none}
  .reveal[data-d="1"]{transition-delay:.08s}
  .reveal[data-d="2"]{transition-delay:.16s}
  .reveal[data-d="3"]{transition-delay:.24s}
  .reveal[data-d="4"]{transition-delay:.32s}
}

/* ============================================================
   12. Helpers
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.stack{display:flex;flex-direction:column}
.cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
[dir="ltr"]{unicode-bidi:isolate}