/* ============================================================
   Dallaty — Coming Soon one-pager
   Dark-first. Tokens lifted from the Dallaty design system
   (tokens/generated/tokens.css, dark theme) and inlined so the
   page is self-contained.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  /* brand */
  --blue-50:#EAF2FA; --blue-100:#B5D4F0; --blue-500:#4A94D4; --blue-700:#2271B8; --blue-900:#0E3D68;
  --sand-50:#FBF5EF; --sand-100:#F3E2D2; --sand-300:#E9C6A8; --sand-500:#C49B72; --sand-700:#8B6840;
  --umber-100:#241C17; --umber-500:#C99363; --umber-700:#E0BD9B;
  --emerald:#22A475; --amber:#D4920A; --red:#CC303F; --violet:#9B70C4; --teal:#14ADAD; --orange:#E8813A;

  /* surfaces (dark) */
  --page:#0B0B12;
  --surface:#14141D;
  --surface-2:#1A1A26;
  --elevated:#20202E;
  --sidebar:#0F1620;
  --ink:#ECECF3;
  --ink-soft:#9B9BAC;
  --ink-faint:#6E6E7E;
  --border-subtle:rgba(255,255,255,0.06);
  --border-medium:rgba(255,255,255,0.10);
  --border-strong:rgba(255,255,255,0.18);

  /* accent (tweakable) */
  --accent:var(--blue-500);
  --accent-strong:var(--blue-700);
  --accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);
  --warm:var(--sand-300);

  --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-full:999px;
  --font-latin:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-arabic:'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --shadow-card:0 1px 3px rgba(0,0,0,0.5);
  --shadow-float:0 24px 60px -20px rgba(0,0,0,0.7), 0 8px 24px rgba(0,0,0,0.4);
  --ease:cubic-bezier(0.4,0,0.2,1);

  --maxw:1200px;
  --gutter:clamp(20px,5vw,64px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-latin);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
[lang="ar"], [dir="rtl"]{ font-family:var(--font-arabic); letter-spacing:0 !important; }

#root{ position:relative; z-index:1; }

/* ambient background glow */
.bg-field{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-field .glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.bg-field .g1{ width:60vw; height:60vw; top:-22vw; inset-inline-end:-14vw; background:radial-gradient(circle, color-mix(in srgb,var(--accent) 55%, transparent), transparent 70%); }
.bg-field .g2{ width:46vw; height:46vw; bottom:-18vw; inset-inline-start:-12vw; background:radial-gradient(circle, color-mix(in srgb,var(--warm) 30%, transparent), transparent 70%); opacity:.35; }
.bg-grid{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--border-subtle) 1px,transparent 1px),linear-gradient(90deg,var(--border-subtle) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 70%); opacity:.5; }

/* ---- shared layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }

/* ---- nav ---- */
.nav{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--page) 72%, transparent);
  border-bottom:1px solid var(--border-subtle); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:34px; width:auto; display:block; }
.nav-actions{ display:flex; align-items:center; gap:10px; }

.lang-toggle{ display:inline-flex; align-items:center; background:var(--surface-2); border:1px solid var(--border-medium);
  border-radius:var(--radius-full); padding:3px; gap:2px; }
.lang-toggle button{ appearance:none; border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  font:600 13px/1 var(--font-latin); padding:7px 13px; border-radius:var(--radius-full); transition:all .15s var(--ease); }
.lang-toggle button.on{ background:var(--accent); color:#0B0B12; }

.btn{ appearance:none; cursor:pointer; border:0; font:600 14px/1 var(--font-latin);
  padding:12px 20px; border-radius:var(--radius-md); transition:all .18s var(--ease); white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px; }
[lang="ar"] .btn{ font-family:var(--font-arabic); }
.btn-primary{ background:var(--accent); color:#0B0B12; }
.btn-primary:hover{ background:var(--accent-strong); color:#fff; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--border-medium); }
.btn-ghost:hover{ border-color:var(--border-strong); background:var(--surface-2); }

/* ---- pill / eyebrow ---- */
.pill{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; padding:7px 14px 7px 12px;
  border-radius:var(--radius-full); border:1px solid var(--border-medium); background:var(--surface-2);
  font:600 12.5px/1 var(--font-latin); letter-spacing:.3px; color:var(--ink-soft); }
[lang="ar"] .pill{ font-family:var(--font-arabic); }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--emerald); box-shadow:0 0 0 0 color-mix(in srgb,var(--emerald) 70%,transparent); animation:ping 2.4s infinite var(--ease); }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--emerald) 60%,transparent);} 70%{ box-shadow:0 0 0 8px transparent;} 100%{ box-shadow:0 0 0 0 transparent;} }

/* ---- hero ---- */
.hero{ padding-block:clamp(56px,9vw,120px) clamp(40px,7vw,96px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero-copy h1{ font-family:var(--font-latin); font-weight:700; letter-spacing:-1.5px; line-height:1.02;
  font-size:clamp(40px,6.4vw,76px); margin:22px 0 0; text-wrap:balance; }
[lang="ar"] .hero-copy h1{ font-family:var(--font-arabic); font-weight:600; letter-spacing:0; line-height:1.18; }
.hero-copy h1 .accent{ color:var(--accent); }
.hero-copy h1 .warm{ color:var(--warm); }
.lede{ color:var(--ink-soft); font-size:clamp(16px,1.55vw,20px); line-height:1.65; margin:22px 0 0; max-width:38ch; }
[lang="ar"] .lede{ line-height:1.85; max-width:42ch; }

.hero-actions{ margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.capture-note{ margin-top:14px; color:var(--ink-faint); font-size:13px; display:flex; align-items:center; gap:7px; }

.hero-meta{ margin-top:40px; display:flex; gap:30px; flex-wrap:wrap; }
.hero-meta .m{ display:flex; flex-direction:column; gap:3px; }
.hero-meta .m b{ font:700 26px/1 var(--font-mono); color:var(--ink); letter-spacing:-.5px; }
.hero-meta .m span{ font-size:12.5px; color:var(--ink-faint); }
.hero-meta .sep{ width:1px; background:var(--border-subtle); align-self:stretch; }

/* ---- floating UI cluster (abstract) ---- */
.stage{ position:relative; min-height:480px; }
.uicard{ position:absolute; background:var(--surface); border:1px solid var(--border-medium);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-float); padding:16px; }
.uicard .row{ display:flex; align-items:center; gap:10px; }
.uicard .lbl{ font:600 11px/1 var(--font-latin); letter-spacing:.4px; text-transform:uppercase; color:var(--ink-faint); }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--radius-full); font:600 11.5px/1 var(--font-latin); }
.chip.ok{ background:color-mix(in srgb,var(--emerald) 14%,transparent); color:var(--emerald); }
.chip.pend{ background:color-mix(in srgb,var(--amber) 14%,transparent); color:var(--amber); }
.chip.sync{ background:var(--accent-soft); color:var(--accent); }

/* primary card: KPI */
.card-kpi{ width:280px; top:8px; inset-inline-start:0; z-index:3; animation:float1 9s ease-in-out infinite; }
.card-kpi .big{ font:700 44px/1 var(--font-mono); letter-spacing:-1px; margin:12px 0 4px; }
.card-kpi .sub{ color:var(--ink-soft); font-size:13px; }
.spark{ display:flex; align-items:flex-end; gap:5px; height:46px; margin-top:14px; }
.spark i{ flex:1; background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 20%,transparent)); border-radius:3px 3px 0 0; opacity:.85; }

/* approvals card */
.card-appr{ width:286px; bottom:18px; inset-inline-end:0; z-index:4; animation:float2 11s ease-in-out infinite; }
.appr-item{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--border-subtle); }
.appr-item:first-of-type{ border-top:0; }
.appr-item .who{ display:flex; align-items:center; gap:10px; }
.avatar{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 12px/1 var(--font-latin); color:#0B0B12; }
.appr-item .name{ font:600 13px/1.2 var(--font-latin); }
.appr-item .meta{ font:500 11px/1.2 var(--font-mono); color:var(--ink-faint); margin-top:3px; }

/* sync / offline pill card */
.card-sync{ width:212px; top:0; inset-inline-end:34px; z-index:5; padding:13px 15px; animation:float3 8s ease-in-out infinite; }
.card-sync .row{ justify-content:space-between; }
.sync-bar{ height:6px; border-radius:99px; background:var(--surface-2); margin-top:11px; overflow:hidden; }
.sync-bar i{ display:block; height:100%; width:72%; background:var(--accent); border-radius:99px; animation:fill 3.2s ease-in-out infinite alternate; }

@keyframes float1{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-14px);} }
@keyframes float2{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(12px);} }
@keyframes float3{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }
@keyframes fill{ from{ width:38%;} to{ width:84%;} }

/* centered hero variant */
.hero[data-variant="centered"] .hero-grid{ grid-template-columns:1fr; text-align:center; }
.hero[data-variant="centered"] .lede{ margin-inline:auto; }
.hero[data-variant="centered"] .hero-actions{ justify-content:center; }
.hero[data-variant="centered"] .hero-meta{ justify-content:center; }
.hero[data-variant="centered"] .pill-wrap{ display:flex; justify-content:center; }
.hero[data-variant="centered"] .stage{ margin-top:56px; min-height:360px; display:flex; justify-content:center; }
.hero[data-variant="centered"] .stage-inner{ position:relative; width:min(720px,100%); height:360px; }
.hero[data-variant="split"] .stage-inner{ position:relative; width:100%; height:100%; min-height:480px; }

/* ---- section heading ---- */
.sec-head{ max-width:640px; }
.sec-head .eyebrow{ font:700 12.5px/1 var(--font-latin); letter-spacing:1.4px; text-transform:uppercase; color:var(--accent); }
[lang="ar"] .sec-head .eyebrow{ font-family:var(--font-arabic); letter-spacing:0; }
.sec-head h2{ font-family:var(--font-latin); font-weight:700; letter-spacing:-1px; line-height:1.1;
  font-size:clamp(28px,3.6vw,44px); margin:14px 0 0; text-wrap:balance; }
[lang="ar"] .sec-head h2{ font-family:var(--font-arabic); font-weight:600; letter-spacing:0; line-height:1.35; }
.sec-head p{ color:var(--ink-soft); font-size:clamp(15px,1.4vw,18px); line-height:1.65; margin:16px 0 0; }
[lang="ar"] .sec-head p{ line-height:1.85; }

/* ---- pillars ---- */
.pillars{ padding-block:clamp(48px,7vw,96px); }
.pillar-grid{ margin-top:clamp(36px,4vw,56px); display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.pillar{ background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:28px; position:relative; overflow:hidden; transition:border-color .2s var(--ease), transform .2s var(--ease); }
.pillar:hover{ border-color:var(--border-strong); transform:translateY(-3px); }
.pillar .ic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:18px; }
.pillar .ic svg{ width:23px; height:23px; }
.pillar h3{ font:600 19px/1.3 var(--font-latin); margin:0 0 8px; }
[lang="ar"] .pillar h3{ font-family:var(--font-arabic); font-size:21px; }
.pillar p{ color:var(--ink-soft); font-size:14.5px; line-height:1.62; margin:0; }
[lang="ar"] .pillar p{ font-size:16px; line-height:1.8; }
.pillar .num{ position:absolute; top:20px; inset-inline-end:22px; font:700 13px/1 var(--font-mono); color:var(--ink-faint); }

/* ---- tracks band ---- */
.tracks{ padding-block:clamp(40px,6vw,80px); }
.track-row{ margin-top:40px; display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:1px solid var(--border-subtle); border-radius:var(--radius-xl); overflow:hidden; background:var(--surface); }
.track{ padding:30px 28px; border-inline-start:1px solid var(--border-subtle); }
.track:first-child{ border-inline-start:0; }
.track .tnum{ font:700 12px/1 var(--font-mono); color:var(--accent); letter-spacing:1px; }
.track h4{ font:600 18px/1.3 var(--font-latin); margin:12px 0 8px; }
[lang="ar"] .track h4{ font-family:var(--font-arabic); font-size:20px; }
.track p{ color:var(--ink-soft); font-size:14px; line-height:1.6; margin:0; }
[lang="ar"] .track p{ font-size:15.5px; line-height:1.8; }
.track .net{ display:inline-flex; gap:4px; margin-top:16px; }
.track .net i{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
.track .net i.live{ background:var(--accent); }

/* ---- cta band ---- */
.cta{ padding-block:clamp(56px,8vw,110px); }
.cta-card{ position:relative; overflow:hidden; border-radius:var(--radius-xl);
  border:1px solid var(--border-medium); background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb,var(--accent) 26%, transparent), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb,var(--warm) 18%, transparent), transparent 55%),
    var(--surface);
  padding:clamp(40px,6vw,80px); text-align:center; }
.cta-card h2{ font-family:var(--font-latin); font-weight:700; letter-spacing:-1px; line-height:1.08;
  font-size:clamp(30px,4.6vw,56px); margin:18px 0 0; text-wrap:balance; }
[lang="ar"] .cta-card h2{ font-family:var(--font-arabic); font-weight:600; letter-spacing:0; line-height:1.3; }
.cta-card p{ color:var(--ink-soft); font-size:clamp(15px,1.5vw,19px); line-height:1.6; margin:18px auto 0; max-width:46ch; }
[lang="ar"] .cta-card p{ line-height:1.85; }
.cta-card .hero-actions{ margin-inline:auto; margin-top:34px; justify-content:center; }

/* ---- footer ---- */
.foot{ border-top:1px solid var(--border-subtle); padding-block:40px; margin-top:20px; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.foot img{ height:30px; opacity:.9; }
.foot .copy{ color:var(--ink-faint); font-size:13px; }
[lang="ar"] .foot .copy{ font-family:var(--font-arabic); }
.foot .links{ display:flex; gap:22px; }
.foot .links a{ color:var(--ink-soft); text-decoration:none; font-size:13.5px; transition:color .15s var(--ease); }
.foot .links a:hover{ color:var(--ink); }

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .card-kpi,.card-appr,.card-sync,.sync-bar i,.pill .dot{ animation:none !important; }
}

/* ---- responsive ---- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero .stage{ min-height:420px; margin-top:24px; }
  .hero[data-variant="split"] .stage-inner{ min-height:420px; }
  .pillar-grid{ grid-template-columns:1fr; }
  .track-row{ grid-template-columns:1fr; }
  .track{ border-inline-start:0; border-top:1px solid var(--border-subtle); }
  .track:first-child{ border-top:0; }
}
@media (max-width:560px){
  .nav .btn-ghost{ display:none; }
  .stage{ transform:scale(.92); transform-origin:top center; }
}


/* Static production refinements */
.btn svg,
.chip svg,
.ic svg {
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 auto;
}

.brand-fallback {
  font: 700 24px/1 var(--font-latin);
  color: var(--ink);
  letter-spacing: 0;
}

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

.foot-brand img {
  height: 30px;
  opacity: .9;
}

.noscript {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 18px;
}

.noscript img {
  height: 42px;
}

.noscript .brand-fallback {
  font-size: 34px;
}

@media (max-width: 640px) {
  .nav-inner {
    height: auto;
    padding-block: 14px;
  }

  .nav-actions > .btn-primary {
    display: none;
  }
}

@media (max-width: 560px) {
  .stage {
    min-height: auto;
    transform: none;
  }

  .hero[data-variant="split"] .stage-inner,
  .hero[data-variant="centered"] .stage-inner {
    width: 100%;
    height: auto;
    min-height: auto;
    display: grid;
    gap: 12px;
  }

  .uicard,
  .card-kpi,
  .card-appr,
  .card-sync {
    position: relative;
    inset: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    animation: none;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 13vw, 54px);
  }

  .hero-meta {
    gap: 18px;
  }
}