@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   CHAT2CART: LANDING PAGE (production, self-contained)
   - Tokens copied from chat2cart/colors_and_type.css (light) +
     a dark theme that follows prefers-color-scheme (override via
     [data-theme]).
   - Bi-directional: physical left/right replaced with logical
     properties so the same sheet serves LTR (en) and RTL (ar).
     Arabic glyphs render in Cairo (loaded only on ar.html); Latin
     stays Plus Jakarta Sans via per-glyph fallback.
   ============================================================ */

:root {
  /* ---------- BRAND ---------- */
  --c2c-navy:        #0D1C41;
  --c2c-blue:        #2563EB;
  --c2c-blue-bright: #3B82F6;
  --c2c-cyan:        #06B6D4;
  --c2c-cyan-bright: #22D3EE;

  /* ---------- BLUE SCALE ---------- */
  --blue-50:  #EFF4FF;
  --blue-100: #DBE6FE;
  --blue-200: #BFD3FE;
  --blue-300: #93B4FD;
  --blue-400: #6090FA;
  --blue-500: #2563EB;
  --blue-600: #1D4FD8;
  --blue-700: #1B40B8;
  --blue-800: #1C3795;
  --blue-900: #1D3375;
  --blue-950: #15224A;

  /* ---------- INK / NEUTRAL SCALE ---------- */
  --ink-50:  #F6F8FC;
  --ink-100: #EDF1F8;
  --ink-200: #DCE3EF;
  --ink-300: #C0CADD;
  --ink-400: #9AA8C4;
  --ink-500: #6B7A9C;
  --ink-600: #4A5A7E;
  --ink-700: #324164;
  --ink-800: #1C2A4E;
  --ink-900: #0D1C41;

  /* ---------- CYAN ---------- */
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;

  /* ---------- SEMANTIC SURFACES & TEXT (LIGHT) ---------- */
  --bg:           #FFFFFF;
  --bg-subtle:    #F6F8FC;
  --bg-muted:     #EDF1F8;
  --surface:      #FFFFFF;
  --border:       #E3E9F2;
  --border-strong:#CBD5E8;

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-500);
  --fg-on-dark:   #EAF0FB;
  --fg-on-blue:   #FFFFFF;

  --primary:      var(--blue-500);
  --primary-hover:var(--blue-600);
  --primary-press:var(--blue-700);
  --focus-ring:   rgba(37, 99, 235, 0.35);

  /* theme-conditional chrome */
  --hdr-bg:       rgba(255,255,255,.82);
  --cta-bg:       rgba(255,255,255,.92);
  --logo-icon:    url('assets/logo-icon.png');

  /* ---------- STATUS ---------- */
  --success: #16A34A;
  --success-bg: #E8F8EE;
  --warning: #D97706;
  --warning-bg: #FEF3E2;
  --danger:  #DC2626;
  --danger-bg:  #FDECEC;
  --info:    var(--blue-500);

  /* ---------- CHANNEL BRAND COLORS ---------- */
  --ch-whatsapp:  #25D366;
  --ch-instagram: #E1306C;
  --ch-messenger: #0084FF;
  --ch-tiktok:    #010101;
  --ch-snapchat:  #FFFC00;
  --ch-telegram:  #229ED9;
  --ch-discord:   #5865F2;
  --ch-line:      #06C755;
  --ch-wechat:    #07C160;
  --ch-web:       #2563EB;

  /* ---------- GRADIENTS ---------- */
  --grad-brand:  linear-gradient(120deg, #2563EB 0%, #06B6D4 100%);
  --grad-brand-soft: linear-gradient(120deg, #3B82F6 0%, #22D3EE 100%);
  --grad-ink:    linear-gradient(150deg, #102050 0%, #0D1C41 60%, #0A1633 100%);
  --grad-hero:   radial-gradient(120% 120% at 50% 0%, #F0F6FF 0%, #FFFFFF 55%);
  --grad-glow:   radial-gradient(60% 80% at 70% 10%, rgba(37,99,235,0.14), rgba(6,182,212,0.10) 40%, transparent 70%);

  /* ---------- RADII ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --sh-xs: 0 1px 2px rgba(13, 28, 65, 0.06);
  --sh-sm: 0 2px 6px rgba(13, 28, 65, 0.07), 0 1px 2px rgba(13,28,65,0.05);
  --sh-md: 0 8px 24px rgba(13, 28, 65, 0.09), 0 2px 6px rgba(13,28,65,0.05);
  --sh-lg: 0 20px 48px rgba(13, 28, 65, 0.12), 0 4px 12px rgba(13,28,65,0.06);
  --sh-xl: 0 32px 80px rgba(13, 28, 65, 0.16), 0 8px 20px rgba(13,28,65,0.07);
  --sh-blue: 0 12px 30px rgba(37, 99, 235, 0.28);
  --sh-focus: 0 0 0 4px var(--focus-ring);

  /* ---------- SPACING ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px;

  /* ---------- TYPE ---------- */
  --font-sans: 'Plus Jakarta Sans', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-display: clamp(2.75rem, 4.4vw, 4.25rem);
  --fs-h1: clamp(2.25rem, 3.2vw, 3rem);
  --fs-h2: clamp(1.75rem, 2.2vw, 2.25rem);
  --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-lead: 1.1875rem;
  --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em;
}

/* ============================================================
   DARK THEME: default follows the OS; [data-theme] forces it.
   (Two blocks share identical values: an explicit opt-in and a
   system-preference block that yields to an explicit "light".)
   ============================================================ */
:root[data-theme="dark"]{
  --bg:#0A1228; --bg-subtle:#0E1830; --bg-muted:#16213F;
  --surface:#111C38; --border:#26324F; --border-strong:#3A4869;
  --fg:#EAF0FB; --fg-muted:#AEBCD8; --fg-subtle:#8597BD;
  --blue-50:#15244A; --blue-100:#22325A;
  --focus-ring:rgba(59,130,246,0.45);
  --hdr-bg:rgba(10,18,40,.82); --cta-bg:rgba(10,18,40,.92);
  --success-bg:rgba(22,163,74,.16);
  --grad-hero:radial-gradient(120% 120% at 50% 0%, #112042 0%, #0A1228 55%);
  --logo-icon:url('assets/logo-icon-light.png');
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1228; --bg-subtle:#0E1830; --bg-muted:#16213F;
    --surface:#111C38; --border:#26324F; --border-strong:#3A4869;
    --fg:#EAF0FB; --fg-muted:#AEBCD8; --fg-subtle:#8597BD;
    --blue-50:#15244A; --blue-100:#22325A;
    --focus-ring:rgba(59,130,246,0.45);
    --hdr-bg:rgba(10,18,40,.82); --cta-bg:rgba(10,18,40,.92);
    --success-bg:rgba(22,163,74,.16);
    --grad-hero:radial-gradient(120% 120% at 50% 0%, #112042 0%, #0A1228 55%);
    --logo-icon:url('assets/logo-icon-light.png');
  }
}

.c2c-grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============================================================ BASE ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-sans);color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .25s ease,color .25s ease;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
h1,h2,h3,h4,p{margin:0;}
:focus-visible{outline:none;}
.btn:focus-visible,a:focus-visible,.input:focus-visible,.select:focus-visible,
.faq-q:focus-visible,.hdr-burger:focus-visible,.icon-btn:focus-visible,.lang-switch:focus-visible{box-shadow:var(--sh-focus);border-radius:var(--r-sm);}
.skip-link{position:absolute;inset-inline-start:-999px;top:8px;background:var(--surface);color:var(--primary);padding:10px 16px;border-radius:var(--r-sm);font-weight:700;z-index:200;box-shadow:var(--sh-md);}
.skip-link:focus{inset-inline-start:16px;}

.wrap{max-width:1180px;margin:0 auto;padding:0 28px;}
.section{padding:96px 0;}
.section--tint{background:var(--bg-subtle);}
[id]{scroll-margin-top:88px;}

/* ============================================================ BUTTONS ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1;border-radius:var(--r-sm);padding:13px 22px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background .16s ease,box-shadow .16s ease,transform .16s ease,border-color .16s ease,color .16s ease;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--sh-blue);}
.btn-primary:hover{background:var(--primary-hover);transform:translateY(-1px);}
.btn-primary:active{background:var(--primary-press);transform:translateY(0);box-shadow:none;}
.btn-secondary{background:var(--surface);color:var(--fg);border-color:var(--border-strong);}
.btn-secondary:hover{background:var(--bg-muted);border-color:var(--ink-300);}
.btn-ghost{background:transparent;color:var(--primary);padding-inline:8px;}
.btn-ghost:hover{color:var(--primary-hover);}
.btn-lg{font-size:16px;padding:16px 28px;}
.btn-block{width:100%;}

/* ============================================================ HEADER ============================================================ */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);}
.hdr-in{position:relative;display:flex;align-items:center;gap:28px;height:70px;}
.hdr-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:20px;color:var(--fg);letter-spacing:-.02em;}
.brandmark{display:inline-block;width:30px;height:30px;background:var(--logo-icon) center/contain no-repeat;flex:none;}
.hdr-collapse{display:contents;}
.hdr-nav{display:flex;gap:24px;margin-inline-start:8px;}
.hdr-nav a{font-size:14.5px;font-weight:500;color:var(--fg-muted);white-space:nowrap;transition:color .15s;}
.hdr-nav a:hover{color:var(--fg);}
.hdr-nav .nav-extra{display:none;}
.hdr-actions{margin-inline-start:auto;display:flex;align-items:center;gap:12px;}
.hdr-tools{display:flex;align-items:center;gap:8px;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid transparent;background:none;color:var(--fg-muted);cursor:pointer;transition:background .15s,color .15s;}
.icon-btn:hover{background:var(--bg-muted);color:var(--fg);}
.icon-btn svg{width:20px;height:20px;}
.lang-switch{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--surface);color:var(--fg);font-family:var(--font-sans);font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s;}
.lang-switch:hover{background:var(--bg-muted);}
.lang-switch svg{width:16px;height:16px;color:var(--fg-subtle);}
.hdr-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:none;border-radius:var(--r-sm);cursor:pointer;color:var(--fg);}
.hdr-burger:hover{background:var(--bg-muted);}
.hdr-burger svg{width:24px;height:24px;}

/* ============================================================ HERO ============================================================ */
.hero{position:relative;background:var(--grad-hero);overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background:var(--grad-glow);pointer-events:none;}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:84px;padding-bottom:96px;}
.hero h1{font-size:var(--fs-display);font-weight:800;line-height:1.04;letter-spacing:-.025em;margin:18px 0 0;}
.hero-sub{font-size:var(--fs-lead);line-height:1.6;color:var(--fg-muted);margin:20px 0 0;max-width:36ch;}
.hero-trust{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap;}
.trust-item{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--fg-muted);}
.trust-item svg{width:16px;height:16px;color:var(--success);}

/* ---- signup card ---- */
.signup{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:30px;}
.signup h3{font-size:20px;font-weight:700;margin:0 0 4px;}
.signup .sub{font-size:14px;color:var(--fg-muted);margin:0 0 22px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;}
.field .ctrl{position:relative;}
.field .ctrl > svg{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--fg-subtle);pointer-events:none;}
.input,.select{width:100%;font-family:var(--font-sans);font-size:15px;color:var(--fg);padding-block:12px;padding-inline:42px 14px;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none;}
.select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7A9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;}
.input::placeholder{color:var(--ink-400);}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:var(--sh-focus);}
.signup .reassure{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;font-size:13px;font-weight:600;color:var(--fg-muted);}
.signup .reassure svg{width:15px;height:15px;color:var(--success);}
.signup .alt{text-align:center;font-size:13.5px;color:var(--fg-muted);margin-top:16px;}
.signup .alt a{color:var(--primary);font-weight:600;}
.signup--success{text-align:center;}
.signup--success .ok{width:56px;height:56px;border-radius:50%;background:var(--success-bg);display:flex;align-items:center;justify-content:center;margin:4px auto 16px;}
.signup--success .ok svg{width:28px;height:28px;color:var(--success);}

/* ============================================================ EYEBROW + HEAD ============================================================ */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);}
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px;}
.sec-head h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.02em;margin:12px 0 0;}
.sec-head p{font-size:var(--fs-lead);color:var(--fg-muted);margin:14px 0 0;line-height:1.55;}

/* ============================================================ SOCIAL PROOF ============================================================ */
.proof{background:var(--bg-subtle);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.proof-in{display:flex;align-items:center;justify-content:center;gap:14px 36px;flex-wrap:wrap;padding:26px 0;}
.proof-label{font-size:13px;font-weight:600;color:var(--fg-subtle);}
.proof-logos{display:flex;align-items:center;gap:30px;flex-wrap:wrap;justify-content:center;}
/* Brand glyphs as CSS masks: muted at rest, full brand color on hover (works in light + dark; TikTok uses --fg so it stays visible on dark). */
.proof-ic{display:inline-flex;align-items:center;color:var(--fg-subtle);transition:color .18s ease,transform .18s ease;cursor:pointer;}
.proof-ic:hover{color:var(--lc,var(--primary));transform:translateY(-1px);}
.proof-ic svg{width:24px;height:24px;display:block;}
.proof-woo{display:inline-flex;align-items:center;color:var(--fg-subtle);transition:color .18s ease,transform .18s ease;cursor:pointer;}
.proof-woo:hover{color:#96588A;transform:translateY(-1px);}
.proof-woo svg{height:24px;width:auto;display:block;}

/* ============================================================ CHIPS ============================================================ */
.strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;max-width:920px;margin:0 auto;}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--fg);box-shadow:var(--sh-xs);transition:transform .16s,box-shadow .16s,border-color .16s;}
.chip:hover{transform:translateY(-2px);box-shadow:var(--sh-sm);border-color:var(--blue-200);}
.chip img{width:22px;height:22px;display:block;}
.chip .ic{width:22px;height:22px;display:flex;align-items:center;justify-content:center;color:var(--primary);}
.chip-woo{display:inline-flex;align-items:center;color:#96588A;}
.chip-woo svg{height:22px;width:auto;display:block;}
.chip .ic svg{width:20px;height:20px;}

/* ============================================================ FEATURES ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s;}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-200);}
.feat .tile{width:46px;height:46px;border-radius:var(--r-md);background:var(--grad-brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.feat .tile svg{width:23px;height:23px;color:#fff;}
.feat h3{font-size:18px;font-weight:700;margin:0 0 7px;}
.feat p{font-size:14.5px;line-height:1.55;color:var(--fg-muted);margin:0;}
.feat .tag{display:inline-block;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);background:var(--blue-50);border-radius:var(--r-pill);padding:4px 10px;}

/* ============================================================ HOW IT WORKS ============================================================ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;}
/* A faint rail behind the numbered circles ties the three steps into one sequence;
   it runs between the outer circle centers and is masked where each circle sits. */
.steps::before{content:"";position:absolute;top:27px;inset-inline:16.6%;height:2px;background:linear-gradient(90deg,transparent 0%,var(--border-strong) 22%,var(--border-strong) 78%,transparent 100%);z-index:0;}
.step{text-align:center;padding:0 12px;position:relative;z-index:1;}
.step .num{width:54px;height:54px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-family:var(--font-mono);font-weight:600;font-size:18px;color:var(--primary);}
.step .ico{width:30px;height:30px;color:var(--primary);}
.step h3{font-size:18px;font-weight:700;margin:0 0 8px;}
.step p{font-size:14.5px;line-height:1.55;color:var(--fg-muted);margin:0 auto;max-width:30ch;}

/* ============================================================ STATS ============================================================ */
/* "Live snapshot" pill: a status cue that mirrors the section's live-data story
   (inspired by a "growing" badge, re-cast around our own live numbers). */
.stat-live{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--r-pill);background:var(--blue-50);border:1px solid var(--border);font-size:12.5px;font-weight:700;color:var(--primary);}
.stat-live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(22,163,74,.5);animation:statpulse 2.2s ease-out infinite;}
@keyframes statpulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}70%{box-shadow:0 0 0 8px rgba(22,163,74,0);}100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}}
/* Stat tiles: surface cards with a brand-dot label + supporting line, start-aligned like a dashboard readout. */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat-card{text-align:start;padding:26px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:transform .18s,box-shadow .18s,border-color .18s;}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--blue-200);}
.stat-num{font-family:var(--font-sans);font-weight:800;font-size:clamp(2.25rem,3.6vw,3rem);line-height:1;letter-spacing:-.03em;}
.stat-lab{display:flex;align-items:flex-start;gap:9px;margin-top:18px;font-size:15px;font-weight:700;color:var(--fg);line-height:1.3;}
.stat-dot{width:8px;height:8px;border-radius:50%;background:var(--grad-brand);flex:none;margin-top:6px;}
.stat-sub{margin-top:7px;font-size:13px;color:var(--fg-subtle);line-height:1.5;}

/* ============================================================ DASHBOARD PREVIEW ============================================================ */
.dash-band{background:var(--grad-ink);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-xl);}
.dash-band-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;}
.dash-copy{padding:54px 48px;align-self:center;}
.dash-copy .eyebrow{color:var(--cyan-400);}
.dash-copy h2{font-size:var(--fs-h2);font-weight:800;color:#fff;letter-spacing:-.02em;margin:12px 0 0;}
.dash-copy p{font-size:16px;line-height:1.6;color:#AFC0E0;margin:16px 0 0;}
.dash-copy ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px;}
.dash-copy li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;font-weight:500;color:#E5ECF8;line-height:1.4;}
.dash-copy li svg{width:18px;height:18px;color:var(--cyan-400);flex:none;margin-top:1px;}
.dash-shot{padding-block:36px 0;padding-inline:0 36px;display:flex;align-items:flex-end;}

/* ---- mini product mock: always rendered in LIGHT tokens (a screenshot) ---- */
.pv{--surface:#fff;--bg-subtle:#F6F8FC;--border:#E3E9F2;--fg:#0D1C41;--fg-muted:#4A5A7E;--fg-subtle:#6B7A9C;--blue-50:#EFF4FF;--blue-100:#DBE6FE;--blue-700:#1B40B8;
  background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(5,12,30,.45);overflow:hidden;width:100%;font-size:13px;transform:translateY(8px);color:var(--fg);}
.pv-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#fff;border-bottom:1px solid var(--border);}
.pv-bar i{width:11px;height:11px;border-radius:50%;background:var(--ink-200);}
.pv-bar .ttl{margin-inline-start:8px;font-weight:700;font-size:12.5px;color:var(--fg);display:flex;align-items:center;gap:6px;}
.pv-bar .ttl img{width:16px;height:16px;}
.pv-body{display:grid;grid-template-columns:1.05fr 1fr;}
.pv-thread{padding:14px;border-inline-end:1px solid var(--border);background:var(--bg-subtle);}
.pv-ch{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--fg-muted);margin-bottom:12px;}
.pv-ch .d{width:9px;height:9px;border-radius:50%;background:var(--ch-whatsapp);}
.pv-ch .lang{margin-inline-start:auto;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:var(--primary);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r-pill);padding:2px 7px;}
.pv-msg{max-width:82%;padding:8px 11px;border-radius:13px;line-height:1.4;margin-bottom:8px;font-size:12px;}
.pv-msg.in{background:#fff;border:1px solid var(--border);border-start-start-radius:13px;border-end-start-radius:4px;color:var(--fg);}
.pv-msg.out{background:var(--primary);color:#fff;margin-inline-start:auto;border-end-end-radius:4px;}
.pv-typing{display:inline-flex;gap:3px;padding:9px 12px;background:#fff;border:1px solid var(--border);border-radius:13px;}
.pv-typing span{width:5px;height:5px;border-radius:50%;background:var(--ink-400);animation:pvdot 1.2s infinite;}
.pv-typing span:nth-child(2){animation-delay:.18s;}
.pv-typing span:nth-child(3){animation-delay:.36s;}
@keyframes pvdot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-2px);}}
.pv-side{padding:14px;}
.pv-stat{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);}
.pv-stat:last-child{border-bottom:none;}
.pv-stat .k{font-size:11.5px;color:var(--fg-muted);}
.pv-stat .v{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--fg);}
.pv-stat .v.up{color:var(--success);}
.pv-order{margin-top:10px;background:var(--blue-50);border:1px solid var(--blue-100);border-radius:10px;padding:11px;}
.pv-order .hd{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--blue-700);text-transform:uppercase;letter-spacing:.05em;}
.pv-order .hd svg{width:13px;height:13px;}
.pv-order .ln{display:flex;justify-content:space-between;font-size:12px;margin-top:7px;color:var(--fg);}
.pv-order .ln b{font-family:var(--font-mono);}

/* ---- hero CTA row (hero now showcases the product, with the CTA beside it) ---- */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}

/* ---- analytics mock (Admin dashboard section, a second product view) ---- */
.pv-an{padding:15px;display:flex;flex-direction:column;gap:15px;}
.pv-an-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.pv-an-card{background:var(--bg-subtle);border:1px solid var(--border);border-radius:10px;padding:9px 11px;}
.pv-an-card .k{display:block;font-size:10.5px;color:var(--fg-muted);margin-bottom:3px;}
.pv-an-card .v{font-family:var(--font-mono);font-weight:600;font-size:15px;color:var(--fg);}
.pv-an-card .v.up{color:var(--success);}
.pv-an-h{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:700;color:var(--fg);margin-bottom:10px;}
.pv-an-h span{color:var(--fg-subtle);font-weight:500;font-size:10.5px;}
.pv-bars{display:flex;align-items:flex-end;gap:7px;height:82px;}
.pv-bars .col{flex:1;height:100%;display:flex;align-items:flex-end;}
/* Weekly revenue is ONE series over time, so the days stay one hue; the peak day
   is lifted (full gradient + soft glow) so the eye lands on the best day. */
.pv-bars .col span{display:block;width:100%;border-radius:5px 5px 0 0;background:var(--blue-300);}
.pv-bars .col.is-peak span{background:var(--grad-brand);box-shadow:0 6px 14px rgba(37,99,235,.30);}
.pv-chrow{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:11.5px;}
.pv-chrow:last-child{margin-bottom:0;}
.pv-chrow .cn{flex:none;width:74px;color:var(--fg-muted);}
.pv-chrow .track{flex:1;height:7px;border-radius:999px;background:var(--bg-muted);overflow:hidden;}
/* Channels are distinct categories, so each carries its own brand color (set per
   row via --bar). Color becomes the legend: green = WhatsApp, magenta = Instagram… */
.pv-chrow .fill{display:block;height:100%;border-radius:999px;background:var(--bar,var(--grad-brand));}
.pv-chrow .pct{flex:none;width:32px;text-align:end;font-family:var(--font-mono);font-weight:600;color:var(--fg);}

/* ============================================================ FAQ ============================================================ */
.faq-list{max-width:760px;margin:0 auto;border-top:1px solid var(--border);}
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;background:none;border:none;cursor:pointer;text-align:start;padding:22px 4px;font-family:var(--font-sans);font-weight:700;font-size:16.5px;color:var(--fg);transition:color .15s;}
.faq-q:hover{color:var(--primary);}
.faq-q .chev{flex:none;width:20px;height:20px;color:var(--fg-subtle);transition:transform .22s ease;}
.faq-item.open .faq-q .chev{transform:rotate(180deg);color:var(--primary);}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease;}
.faq-item.open .faq-a{grid-template-rows:1fr;}
.faq-a-inner{overflow:hidden;}
.faq-a p{margin:0 4px 22px;font-size:15px;line-height:1.65;color:var(--fg-muted);}

/* ============================================================ SECURITY ============================================================ */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-card{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-xs);}
.trust-card .ti{width:42px;height:42px;border-radius:var(--r-md);background:var(--blue-50);display:flex;align-items:center;justify-content:center;color:var(--primary);}
.trust-card .ti svg{width:21px;height:21px;}
.trust-card h3{font-size:15.5px;font-weight:700;margin:0;}
.trust-card p{font-size:13.5px;color:var(--fg-muted);margin:0;line-height:1.5;}

/* ============================================================ FINAL CTA ============================================================ */
.final{display:grid;grid-template-columns:1fr .9fr;gap:56px;align-items:center;}
.final h2{font-size:var(--fs-h1);font-weight:800;letter-spacing:-.025em;margin:14px 0 0;}
.final p{font-size:var(--fs-lead);color:var(--fg-muted);margin:16px 0 0;line-height:1.55;}

/* ============================================================ FOOTER ============================================================ */
.ftr{background:var(--c2c-navy);color:#AFC0E0;padding:54px 0 36px;}
.ftr-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.ftr-brand img{height:30px;width:auto;}
.ftr-brand p{font-size:13.5px;line-height:1.6;margin:16px 0 0;max-width:30ch;color:#9DB0D4;}
.ftr h4{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8294BC;margin:0 0 16px;}
.ftr a{display:block;font-size:14px;color:#C2D0EA;margin-bottom:11px;transition:color .15s;}
.ftr a:hover{color:#fff;}
.ftr-bot{border-top:1px solid rgba(255,255,255,.1);margin-top:40px;padding-top:22px;font-size:13px;color:#8294BC;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ============================================================ STICKY MOBILE CTA ============================================================ */
.mobile-cta{display:none;}

/* ============================================================ SCROLL REVEAL (gated behind .js) ============================================================ */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .55s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);}
.js .reveal.in{opacity:1;transform:none;}

/* ============================================================ RTL + ARABIC TYPOGRAPHY ============================================================ */
/* The select caret can't use a logical position, so mirror it for RTL. */
[dir="rtl"] .select{background-position:left 14px center;}
/* JetBrains Mono has no Arabic glyphs, so keep Arabic words (e.g. channel names) in the sans font so letters stay connected. */
[dir="rtl"] .pv-order .ln b{font-family:var(--font-sans);font-weight:700;}
/* Arabic letters join cursively: kill tracking and relax line-height. */
[dir="rtl"] .eyebrow,[dir="rtl"] .hero h1,[dir="rtl"] .sec-head h2,[dir="rtl"] .feat h3,
[dir="rtl"] .feat .tag,[dir="rtl"] .stat-num,[dir="rtl"] .ftr h4,[dir="rtl"] .faq-q,
[dir="rtl"] .final h2,[dir="rtl"] .dash-copy h2,[dir="rtl"] .pv-order .hd,[dir="rtl"] .pv-ch .lang{letter-spacing:normal;}
[dir="rtl"] .hero h1{line-height:1.18;}
[dir="rtl"] .sec-head h2,[dir="rtl"] .final h2,[dir="rtl"] .dash-copy h2{line-height:1.3;}
[dir="rtl"] .hero-sub,[dir="rtl"] .sec-head p{line-height:1.7;}

/* ============================================================ RESPONSIVE ============================================================ */
/* Header collapses to a drawer below 1024px so the nav never crowds. */
@media (max-width:1024px){
  .hdr-burger{display:inline-flex;}
  .hdr-tools{margin-inline-start:auto;}
  .hdr-collapse{display:none;position:absolute;top:70px;inset-inline:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh-md);padding:10px 28px 18px;}
  .hdr.nav-open .hdr-collapse{display:flex;}
  .hdr-nav{flex-direction:column;gap:0;margin-inline-start:0;}
  .hdr-nav a{padding:13px 0;font-size:16px;border-bottom:1px solid var(--border);white-space:normal;}
  .hdr-nav .nav-extra{display:block;}
  .hdr-actions{flex-direction:column;align-items:stretch;gap:10px;margin-inline-start:0;margin-top:14px;}
  .hdr-actions .btn{width:100%;}
}

@media (max-width:900px){
  .hero-in,.dash-band-in,.final{grid-template-columns:1fr;gap:36px;}
  .feat-grid,.steps,.ftr-in,.trust-grid{grid-template-columns:1fr;}
  .steps::before{display:none;}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px 20px;}
  .dash-shot{padding:0 24px 0 24px;}
  .dash-copy{padding:40px 28px;}
  .section{padding:64px 0;}
  .hero-sub{max-width:none;}

  /* sticky bottom CTA */
  .mobile-cta{display:flex;position:fixed;inset-inline:0;bottom:0;z-index:60;padding:12px 16px;background:var(--cta-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);}
  .mobile-cta .btn{width:100%;}
  body{padding-bottom:74px;}
}

@media (max-width:560px){
  .wrap{padding:0 20px;}
  .hero h1{font-size:clamp(1.85rem, 8vw, 2.5rem);line-height:1.1;}
  [dir="rtl"] .hero h1{line-height:1.25;}
  .hero-in{padding-top:64px;padding-bottom:76px;}
  .proof-in{flex-direction:column;gap:16px;}
  .stats-grid{grid-template-columns:1fr;gap:28px;}
  .ftr-bot{flex-direction:column;}
  .lang-switch{padding:0 10px;}
  .hero-cta{flex-direction:column;}
  .hero-cta .btn{width:100%;}
}

/* ============================================================ REDUCED MOTION ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;transition:none;}
  .pv-typing span,.stat-live-dot{animation:none;}
  *{transition-duration:.01ms !important;}
}