/* ============================================================
   NEXORA · Workforce OS — "Control Room" refined dark premium
   Rebuilt 2026-06-28. Static HTML/CSS/JS, no build step.
   ============================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --bg:#070912;
  --bg-2:#0a0d1a;
  --elev:#0e1322;
  --card:rgba(255,255,255,.022);
  --card-2:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.18);

  /* ink */
  --ink:#eef1f8;
  --ink-2:#a7afc8;
  --ink-3:#6a7290;

  /* signal */
  --accent:#6e8bff;        /* signal blue */
  --accent-bright:#8fa6ff;
  --violet:#a98bff;
  --mint:#6fe9d8;
  --warn:#ffb27a;

  /* gradients */
  --grad-text:linear-gradient(100deg,#bcd0ff 0%,#cbb6ff 48%,#9ff0e6 100%);
  --grad-platinum:linear-gradient(180deg,#ffffff 0%,#d6dcec 55%,#9aa3bd 100%);
  --grad-accent:linear-gradient(120deg,#6e8bff 0%,#a98bff 100%);
  --grad-stroke:linear-gradient(135deg,rgba(142,166,255,.5),rgba(169,139,255,.15) 40%,transparent 70%);

  /* shadow */
  --sh-card:0 24px 60px -28px rgba(0,0,0,.7);
  --sh-float:0 50px 120px -40px rgba(0,0,0,.85);
  --sh-glow:0 40px 120px -40px rgba(110,139,255,.45);

  /* type */
  --serif:'Fraunces',ui-serif,Georgia,serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --maxw:1200px;
  --radius:18px;
}

html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-arabic{font-family:'Cairo',var(--sans)}
body.nav-open,body.wiz-locked{overflow:hidden}

/* ---------- Ambient backdrop ---------- */
.field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 90% at 50% -10%,#0d1430 0%,transparent 55%),
  radial-gradient(80% 60% at 90% 10%,rgba(110,139,255,.10),transparent 60%),
  radial-gradient(70% 60% at 5% 30%,rgba(169,139,255,.08),transparent 60%),
  var(--bg)}
.field::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 70%)}
.field::after{content:"";position:absolute;width:60vmax;height:60vmax;left:60%;top:40%;border-radius:50%;
  background:radial-gradient(circle,rgba(111,233,216,.07),transparent 60%);filter:blur(20px)}

/* ---------- Layout primitives ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.section{padding:clamp(72px,11vh,140px) 0;position:relative}
.section-sm{padding:clamp(48px,7vh,90px) 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font:600 .7rem/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"";width:18px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.eyebrow .num{color:var(--accent-bright)}
.kicker{display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:600 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint)}

.head{max-width:760px}
.head.center{margin-inline:auto;text-align:center}
.head .eyebrow{margin-bottom:1.2rem}
.head p{margin-top:1.1rem;color:var(--ink-2);font-size:1.06rem;max-width:60ch}
.head.center p{margin-inline:auto}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.06}
.h-display{font-size:clamp(2.6rem,6.2vw,5rem);line-height:1.02}
.h-1{font-size:clamp(2.1rem,4.4vw,3.5rem);line-height:1.05}
.h-2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1}
.h-3{font-size:clamp(1.15rem,1.6vw,1.4rem)}
em{font-style:italic;color:#dfe5f5}
.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.platinum{background:var(--grad-platinum);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--ink-2)}
.serif{font-family:var(--serif)}
.lead{font-size:clamp(1.02rem,1.2vw,1.15rem);color:var(--ink-2);line-height:1.65}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:999px;
  font:600 .9rem/1 var(--sans);letter-spacing:.01em;white-space:nowrap;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .3s,background .3s,border-color .3s,color .3s}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.btn-primary{position:relative;color:#0a0e1c;background:var(--grad-platinum);
  box-shadow:0 14px 34px -12px rgba(150,170,255,.6),inset 0 0 0 1px rgba(255,255,255,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 22px 48px -14px rgba(150,170,255,.8),inset 0 0 0 1px rgba(255,255,255,.7)}
.btn-accent{color:#06080f;background:var(--grad-accent);box-shadow:0 16px 40px -14px rgba(110,139,255,.8)}
.btn-accent:hover{transform:translateY(-2px);box-shadow:0 24px 56px -16px rgba(110,139,255,1)}
.btn-ghost{color:var(--ink);border:1px solid var(--line-2);background:var(--card)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--line-3);background:var(--card-2)}
.btn-lg{padding:1.02rem 1.7rem;font-size:.98rem}
.btn-block{width:100%;justify-content:center}
.btn[hidden]{display:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;inset:0 0 auto;z-index:80;transition:background .35s,border-color .35s,backdrop-filter .35s}
.nav.scrolled{background:rgba(8,11,20,.72);backdrop-filter:saturate(1.5) blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1320px;margin:0 auto;padding:16px clamp(18px,3vw,30px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:30px;height:30px;filter:drop-shadow(0 0 12px rgba(150,170,255,.45))}
.brand b{font:700 1.02rem/1 var(--sans);letter-spacing:.18em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{font-size:.92rem;color:var(--ink-2);transition:color .2s;position:relative}
.nav-link::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:var(--accent);transition:width .25s}
.nav-link:hover{color:var(--ink)}
.nav-link:hover::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch{min-width:40px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);
  font:600 .76rem/1 var(--mono);letter-spacing:.06em;color:var(--ink);transition:border-color .2s,background .2s}
.lang-switch:hover{border-color:var(--line-3);background:var(--card-2)}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--line-2);border-radius:12px;position:relative;background:var(--card)}
.nav-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-burger span:nth-child(1){top:14px}.nav-burger span:nth-child(2){top:20px}.nav-burger span:nth-child(3){top:26px}
body.nav-open .nav-burger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.nav-open .nav-burger span:nth-child(2){opacity:0}
body.nav-open .nav-burger span:nth-child(3){top:20px;transform:rotate(-45deg)}
.nav-mobile{position:fixed;inset:64px 0 auto;z-index:79;background:rgba(8,11,20,.96);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);padding:18px clamp(20px,6vw,32px) 28px;
  display:grid;gap:4px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:.32s cubic-bezier(.16,1,.3,1)}
body.nav-open .nav-mobile{transform:none;opacity:1;pointer-events:auto}
.nav-mobile a{padding:15px 4px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:1rem}
.nav-mobile a:last-of-type{border-bottom:0}
.nav-mobile .btn{margin-top:14px}
.nav-mobile .lang-switch{width:100%;height:46px;margin-top:10px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;isolation:isolate;padding:clamp(120px,18vh,180px) 0 clamp(60px,8vh,90px);text-align:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;
  filter:brightness(1.04) saturate(.92) contrast(1);transform:translateZ(0);backface-visibility:hidden}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(62% 52% at 50% 42%,rgba(7,9,18,.74),transparent 80%),
  linear-gradient(180deg,rgba(7,9,18,.52) 0%,rgba(7,9,18,.6) 40%,rgba(7,9,18,.86) 80%,var(--bg) 100%)}
.hero-glow{position:absolute;left:50%;top:-10%;width:120vw;max-width:1500px;height:700px;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 30%,rgba(110,139,255,.22),transparent 70%),radial-gradient(40% 40% at 70% 40%,rgba(169,139,255,.16),transparent 70%)}
.hero>.container{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero .kicker{margin-bottom:1.6rem}
.hero h1{margin:0 auto;max-width:16ch}
.hero .lead{margin:1.5rem auto 0;max-width:60ch;font-size:clamp(1.05rem,1.3vw,1.22rem);color:var(--ink-2)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2.2rem}
.trust-row{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:2.4rem}
.trust-row span{display:inline-flex;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-2)}
.trust-row span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}

/* hero product frame */
.hero-stage{margin-top:clamp(48px,7vw,80px);position:relative}
.hero-stage .frame{margin:0 auto;max-width:1040px}
.hero-stage::after{content:"";position:absolute;left:50%;bottom:-40px;width:70%;height:120px;transform:translateX(-50%);
  background:radial-gradient(50% 100% at 50% 0%,rgba(110,139,255,.3),transparent 70%);filter:blur(30px);z-index:-1}

/* ---------- App / browser frame ---------- */
.frame{position:relative;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg,#0d1322,#090c16);box-shadow:var(--sh-float),var(--sh-glow);isolation:isolate}
.frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:var(--grad-stroke);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.frame-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;background:rgba(255,255,255,.025);border-bottom:1px solid var(--line)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#39405a}
.frame-bar i.r{background:#ff5f57}.frame-bar i.y{background:#febc2e}.frame-bar i.g{background:#28c840}
.frame-url{margin-left:12px;flex:1;max-width:340px;padding:5px 12px;border-radius:8px;background:rgba(255,255,255,.04);
  font:500 .72rem/1 var(--mono);color:var(--ink-3);letter-spacing:.02em;display:flex;align-items:center;gap:7px}
.frame-url::before{content:"";width:9px;height:9px;border:1.4px solid var(--ink-3);border-radius:2px}
.frame video,.frame>img{width:100%;display:block;background:#0a0e1c}
.frame-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:600 .64rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.frame-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint);animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Logos strip ---------- */
.logos{padding:36px 0 8px}
.logos p{text-align:center;font:600 .7rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:24px}
.logos-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px clamp(28px,6vw,64px);opacity:.85}
.logo-item{display:inline-flex;align-items:center;gap:10px;color:var(--ink-2);transition:color .3s,opacity .3s;opacity:.7}
.logo-item:hover{color:var(--ink);opacity:1}
.logo-item svg{width:24px;height:24px;fill:currentColor}

/* ---------- Stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--bg-2);padding:clamp(22px,3vw,34px);text-align:center}
.stat strong{display:block;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.02em}
.stat strong .g{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{display:block;margin-top:.7rem;font-size:.82rem;color:var(--ink-2);letter-spacing:.02em}

/* ============================================================
   Generic card grids
   ============================================================ */
.grid{display:grid;gap:18px}
.card{position:relative;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:clamp(22px,2.4vw,30px);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,background .35s,box-shadow .35s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:opacity .35s;pointer-events:none;
  background:radial-gradient(120% 80% at 0% 0%,rgba(110,139,255,.10),transparent 60%)}
.card:hover{transform:translateY(-4px);border-color:var(--line-2);background:var(--card-2);box-shadow:var(--sh-card)}
.card:hover::before{opacity:1}
.card .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;
  border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(110,139,255,.16),rgba(110,139,255,.04));color:var(--accent-bright)}
.card .ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7}
.card h3{font-family:var(--sans);font-weight:600;font-size:1.06rem;letter-spacing:-.01em;margin-bottom:.5rem;color:var(--ink)}
.card p{font-size:.94rem;color:var(--ink-2);line-height:1.6}
.card .idx{position:absolute;top:18px;right:20px;font:600 .72rem/1 var(--mono);color:var(--ink-3)}

/* ---------- Split (text + visual) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split.rev .split-media{order:-1}
.split-copy .feat-list{margin-top:1.8rem;display:grid;gap:2px}
.feat-list .row{display:flex;gap:14px;align-items:flex-start;padding:14px 6px;border-top:1px solid var(--line)}
.feat-list .row:last-child{border-bottom:1px solid var(--line)}
.feat-list .row b{font:600 .74rem/1 var(--mono);color:var(--accent-bright);padding-top:3px;min-width:24px}
.feat-list .row span{font-size:.96rem;color:var(--ink-2)}
.feat-list .row strong{display:block;color:var(--ink);font-weight:600;font-size:.98rem;margin-bottom:2px}

/* ============================================================
   Problem → ribbon
   ============================================================ */
.prob-grid{grid-template-columns:repeat(3,1fr);margin-top:2.6rem}
.prob{padding:22px 22px 24px}
.prob .x{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;margin-bottom:1rem;
  border:1px solid rgba(255,178,122,.28);background:rgba(255,150,90,.08);color:var(--warn);font-size:1.1rem}
.prob h3{font-family:var(--sans);font-weight:600;font-size:1rem;margin-bottom:.4rem}
.prob p{font-size:.9rem;color:var(--ink-2)}

/* ============================================================
   Workspaces tabs
   ============================================================ */
.tabs-nav{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:var(--card);margin:0 auto 2.6rem;
  display:flex;width:max-content;max-width:100%}
.tab-btn{padding:.7rem 1.5rem;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--ink-2);transition:.25s;white-space:nowrap}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:#06080f;background:var(--grad-platinum);box-shadow:0 8px 22px -10px rgba(150,170,255,.6)}
.tabs-wrap{display:flex;justify-content:center}
.tab-panel{display:none}
.tab-panel.active{display:block;animation:fade .5s cubic-bezier(.16,1,.3,1)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.tab-copy h3{font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.1rem);margin-bottom:.7rem}
.tab-copy>p{color:var(--ink-2);margin-bottom:1.4rem}
.tab-copy .feat-list{margin-top:1.4rem}

/* ============================================================
   Access matrix
   ============================================================ */
.access-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,60px);align-items:center}
.roles{display:grid;gap:8px;margin-top:1.8rem}
.role{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;transition:.25s}
.role:hover{border-color:var(--line-2);background:var(--card-2)}
.role.active{border-color:rgba(110,139,255,.45);background:linear-gradient(100deg,rgba(110,139,255,.12),rgba(169,139,255,.05));box-shadow:0 14px 40px -26px rgba(110,139,255,.9)}
.role .rk{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:600 .82rem/1 var(--mono);color:var(--accent-bright);border:1px solid var(--line-2);background:var(--card)}
.role strong{display:block;font-family:var(--sans);font-weight:600;font-size:.96rem}
.role span{font-size:.82rem;color:var(--ink-2)}
.matrix{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2);font-family:var(--mono)}
.m-row{display:grid;grid-template-columns:1.4fr repeat(5,1fr);align-items:center;border-bottom:1px solid var(--line);transition:background .25s}
.m-row:last-child{border-bottom:0}
.m-row span{padding:13px 12px;font-size:.74rem;letter-spacing:.04em}
.m-row span:first-child{text-align:left;color:var(--ink)}
.m-row span:not(:first-child){text-align:center}
.m-head{background:rgba(255,255,255,.03)}
.m-head span{color:var(--ink-3);font-size:.66rem;text-transform:uppercase;letter-spacing:.12em}
.m-row.active{background:linear-gradient(90deg,rgba(110,139,255,.12),transparent)}
.cell{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;margin:0 auto;font-size:.7rem}
.cell.y{background:rgba(111,233,216,.16);color:var(--mint)}
.cell.h{background:rgba(255,178,122,.16);color:var(--warn)}
.cell.n{background:rgba(255,255,255,.04);color:var(--ink-3)}
.m-legend{display:flex;gap:18px;justify-content:center;padding:13px;background:rgba(255,255,255,.02);font-size:.66rem;color:var(--ink-2);letter-spacing:.05em}
.m-legend span{display:inline-flex;align-items:center;gap:7px}
.m-legend i{width:12px;height:12px;border-radius:4px}
.m-legend i.y{background:rgba(111,233,216,.5)}.m-legend i.h{background:rgba(255,178,122,.5)}.m-legend i.n{background:rgba(255,255,255,.12)}

/* ============================================================
   Self-service phone
   ============================================================ */
.phone{position:relative;width:min(290px,80vw);margin:0 auto;border-radius:42px;padding:12px;
  border:1px solid var(--line-2);background:linear-gradient(180deg,#11162a,#0a0d18);box-shadow:var(--sh-float),0 0 80px -30px rgba(110,139,255,.6)}
.phone::before{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:120px;height:26px;border-radius:999px;background:#05070f;z-index:2}
.phone video,.phone img{width:100%;border-radius:30px;display:block}
.phone-glow{position:absolute;inset:auto -30% -20% -30%;height:60%;background:radial-gradient(50% 100% at 50% 100%,rgba(169,139,255,.35),transparent 70%);filter:blur(30px);z-index:-1}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:1.6rem 0}
.chips span{padding:.5rem .95rem;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font-size:.84rem;color:var(--ink-2)}

/* ============================================================
   Showcase video grid
   ============================================================ */
.show-grid{grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr}
.vc{grid-column:span 2;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);transition:transform .35s,border-color .35s,box-shadow .35s}
.vc.big{grid-column:span 3}
.vc:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--sh-card)}
.vc .frame-bar{border-radius:0}
.vc video{width:100%;aspect-ratio:16/10;object-fit:cover;background:#0a0e1c}
.vc-meta{padding:16px 18px}
.vc-meta h4{font-family:var(--sans);font-weight:600;font-size:.98rem;margin-bottom:.2rem}
.vc-meta span{font-size:.82rem;color:var(--ink-3)}

/* ---------- Expanding panel reel ---------- */
.reel{display:grid;grid-auto-flow:column;grid-template-columns:7fr 1fr 1fr 1fr 1fr;gap:12px;
  height:clamp(320px,42vw,460px);margin-top:2.8rem;transition:grid-template-columns .7s cubic-bezier(.16,1,.3,1)}
.reel-panel{position:relative;min-width:0;padding:0;border:0;cursor:pointer;overflow:hidden;
  border-radius:130px;background:var(--bg-2) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line);
  transition:border-radius .7s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.reel-panel:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reel-panel.active{border-radius:26px;box-shadow:inset 0 0 0 1px var(--line-2),var(--sh-card)}
.reel-panel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.reel-panel.active video{opacity:1}
.reel-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,9,18,.05) 0%,transparent 32%,rgba(7,9,18,.55) 72%,rgba(7,9,18,.9) 100%);
  opacity:.35;transition:opacity .6s}
.reel-panel.active .reel-grad{opacity:1}
.reel-cap{position:absolute;left:26px;right:20px;bottom:26px;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;opacity:0;transform:translateY(10px);transition:opacity .5s .12s,transform .5s .12s;pointer-events:none;white-space:nowrap}
.reel-panel.active .reel-cap{opacity:1;transform:none}
.reel-arrow{width:46px;height:46px;margin-bottom:14px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(8px);
  color:#fff;font-size:1.15rem;line-height:1}
.reel-cap b{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,1.7vw,1.6rem);letter-spacing:-.01em;color:#fff}
.reel-cap i{font-style:normal;font-size:.9rem;color:rgba(233,236,246,.82);margin-top:5px;white-space:normal}
body.is-arabic .reel-cap{left:20px;right:26px;align-items:flex-end;text-align:right}
@media (max-width:600px){
  .reel{height:clamp(340px,82vw,440px);gap:8px}
  .reel-panel{border-radius:90px}
  .reel-cap{left:18px;right:14px;bottom:18px}
  .reel-arrow{width:40px;height:40px;margin-bottom:10px}
}

/* ============================================================
   Integrations
   ============================================================ */
.integ{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:2.4rem;max-width:760px;margin-inline:auto}
.integ-node{display:inline-flex;align-items:center;gap:10px;padding:.85rem 1.3rem;border:1px solid var(--line);border-radius:14px;background:var(--card);
  font-size:.9rem;color:var(--ink-2);transition:.3s}
.integ-node:hover{border-color:var(--line-2);background:var(--card-2);color:var(--ink);transform:translateY(-3px)}
.integ-node img{width:22px;height:22px}
.integ-node svg{width:22px;height:22px}

/* ============================================================
   Testimonials
   ============================================================ */
.testi-grid{grid-template-columns:repeat(3,1fr);margin-top:2.6rem}
.testi{display:flex;flex-direction:column;gap:1.2rem;padding:28px}
.testi .stars{color:#ffcf6b;letter-spacing:3px;font-size:.95rem}
.testi p{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:#e6eaf6;font-weight:300}
.testi .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font:700 .82rem/1 var(--mono);color:#06080f;background:var(--grad-text)}
.testi .who strong{display:block;font-family:var(--sans);font-size:.92rem;font-weight:600}
.testi .who span{font-size:.8rem;color:var(--ink-3)}

/* ============================================================
   Pricing
   ============================================================ */
.calc{max-width:560px;margin:0 auto 2.6rem;text-align:center;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);padding:26px clamp(20px,4vw,36px)}
.calc label{font:600 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.calc .calc-val{font-family:var(--serif);font-size:2.2rem;margin:.7rem 0 1.1rem}
.calc .calc-val span:first-child{color:var(--accent-bright)}
.calc .calc-val span:last-child{font-size:1rem;color:var(--ink-2);font-family:var(--sans)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--violet));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 4px rgba(110,139,255,.3)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 4px rgba(110,139,255,.3)}
.price-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}
.price-card{display:flex;flex-direction:column;padding:30px 26px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);transition:.35s}
.price-card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--sh-card)}
.price-card.pop{border-color:rgba(110,139,255,.4);background:linear-gradient(180deg,rgba(110,139,255,.08),var(--card));box-shadow:var(--sh-glow)}
.pop-tag{align-self:flex-start;padding:.32rem .8rem;border-radius:999px;font:600 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#06080f;background:var(--grad-accent);margin-bottom:1rem}
.price-card h3{font-family:var(--sans);font-weight:600;font-size:1.1rem;margin-bottom:.6rem}
.price-card .price{font-family:var(--serif);font-size:2rem;line-height:1;margin-bottom:.3rem}
.price-card .price small{font-size:.9rem;color:var(--ink-3);font-family:var(--sans)}
.price-card>p{font-size:.9rem;color:var(--ink-2);margin:.4rem 0 1.4rem}
.price-feats{list-style:none;display:grid;gap:.7rem;margin-bottom:1.6rem}
.price-feats li{display:flex;gap:10px;font-size:.9rem;color:var(--ink-2)}
.price-feats li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px;
  background:rgba(111,233,216,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236fe9d8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.price-card .btn{margin-top:auto}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:780px;margin:2.4rem auto 0;display:grid;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:14px;background:var(--card);overflow:hidden;transition:border-color .25s,background .25s}
.faq-item[open]{border-color:var(--line-2);background:var(--card-2)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--mono);font-size:1.4rem;color:var(--accent-bright);transition:transform .3s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-c{padding:0 22px 20px;color:var(--ink-2);font-size:.94rem;line-height:1.65}

/* ============================================================
   Final CTA
   ============================================================ */
.final{position:relative;text-align:center;overflow:hidden;border-top:1px solid var(--line)}
.final-glow{position:absolute;left:50%;top:0;width:120vw;max-width:1400px;height:100%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 80% at 50% 0%,rgba(110,139,255,.18),transparent 70%),radial-gradient(40% 60% at 70% 30%,rgba(169,139,255,.14),transparent 70%)}
.final h2{margin:0 auto;max-width:18ch}
.final .lead{margin:1.4rem auto 0;max-width:54ch;color:var(--ink-2);font-size:1.1rem}
.final .hero-cta{margin-top:2.2rem}
.final .note{margin-top:1.8rem;font:500 .8rem/1 var(--mono);letter-spacing:.04em;color:var(--ink-3)}

/* ============================================================
   Footer
   ============================================================ */
.foot{border-top:1px solid var(--line);padding:60px 0 40px;background:linear-gradient(180deg,transparent,rgba(110,139,255,.03))}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.foot-brand .brand{margin-bottom:1rem}
.foot-brand p{font-size:.9rem;color:var(--ink-3);max-width:30ch}
.foot-col b{display:block;font:600 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1rem}
.foot-col a{display:block;padding:.4rem 0;font-size:.92rem;color:var(--ink-2);transition:color .2s}
.foot-col a:hover{color:var(--ink)}
.foot-bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.84rem;color:var(--ink-3)}

/* ============================================================
   Demo wizard modal
   ============================================================ */
.wiz{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}
.wiz.open{display:flex;animation:fade .3s}
.wiz-backdrop{position:absolute;inset:0;background:rgba(4,6,12,.72);backdrop-filter:blur(8px)}
.wiz-shell{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;border:1px solid var(--line-2);border-radius:24px;
  background:linear-gradient(180deg,#0e1322,#090c16);box-shadow:var(--sh-float);padding:clamp(24px,4vw,40px)}
.wiz-close{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1px solid var(--line-2);border-radius:10px;font-size:1.3rem;color:var(--ink-2);transition:.2s}
.wiz-close:hover{color:var(--ink);border-color:var(--line-3)}
.wiz-head .kicker{margin-bottom:1rem}
.wiz-title{font-family:var(--serif);font-size:1.5rem;margin-bottom:.4rem}
.wiz-sub{font-size:.92rem;color:var(--ink-2)}
.wiz-steps{display:flex;align-items:center;gap:10px;margin:1.4rem 0}
.ws-dot{width:11px;height:11px;border-radius:50%;background:var(--line-3);transition:.3s}
.ws-dot.active{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.ws-dot.done{background:var(--mint)}
.ws-line{flex:1;height:1px;background:var(--line-2)}
.wiz-step{display:none;border:0;padding:0;margin:0;min-width:0;grid-gap:14px;gap:14px}
.wiz-step.active{display:grid;animation:fade .35s}
.wiz-field{display:grid;gap:6px}
.wiz-field span{font-size:.8rem;color:var(--ink-2)}
.wiz-field input,.wiz-field select,.wiz-field textarea{padding:.8rem 1rem;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.03);color:var(--ink);transition:border-color .2s}
.wiz-field input::placeholder,.wiz-field textarea::placeholder{color:var(--ink-3)}
.wiz-field input:focus,.wiz-field select:focus,.wiz-field textarea:focus{outline:none;border-color:var(--accent)}
.wiz-field.error input,.wiz-field.error select{border-color:#ff6b6b}
.wiz-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a7290' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.wiz-checks{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wiz-checks legend{font-size:.8rem;color:var(--ink-2);margin-bottom:8px}
.wiz-checks label{display:flex;align-items:center;gap:8px;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:.86rem;cursor:pointer;transition:.2s}
.wiz-checks label:has(input:checked){border-color:var(--accent);background:rgba(110,139,255,.1)}
.wiz-checks input{accent-color:var(--accent)}
.wiz-nav{display:flex;gap:12px;margin-top:1.6rem}
.wiz-nav .wiz-next,.wiz-nav .wiz-send{margin-left:auto}
.wiz-foot{margin-top:1rem;font-size:.78rem;color:var(--ink-3);text-align:center}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;box-shadow:0 16px 40px -12px rgba(37,211,102,.7);transition:transform .25s}
.wa-float:hover{transform:translateY(-3px) scale(1.05)}
.wa-float svg{width:30px;height:30px}

/* ---------- Language modal ---------- */
.lang-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,7,15,.82);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .4s}
.lang-modal.active{opacity:1;pointer-events:auto}
.lang-box{border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(180deg,#0e1322,#090c16);padding:clamp(28px,5vw,44px);text-align:center;box-shadow:var(--sh-float);transform:translateY(16px) scale(.96);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.lang-modal.active .lang-box{transform:none}
.lang-box h3{font-family:var(--serif);font-size:1.4rem;margin-bottom:1.6rem}
.lang-opts{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.lang-pick{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:140px;padding:1.4rem 1.8rem;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:.3s}
.lang-pick:hover{border-color:var(--accent);background:var(--card-2);transform:translateY(-4px)}
.lang-pick .flag{font-size:2.2rem}
.lang-pick .t{font-weight:600}

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal,[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in,[data-reveal].in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:.05s}
[data-stagger].in>*:nth-child(2){transition-delay:.13s}
[data-stagger].in>*:nth-child(3){transition-delay:.21s}
[data-stagger].in>*:nth-child(4){transition-delay:.29s}
[data-stagger].in>*:nth-child(5){transition-delay:.37s}
[data-stagger].in>*:nth-child(6){transition-delay:.45s}
[data-stagger].in>*:nth-child(7){transition-delay:.53s}
[data-stagger].in>*:nth-child(8){transition-delay:.61s}
@media (prefers-reduced-motion:reduce){
  .reveal,[data-reveal],[data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   RTL tweaks
   ============================================================ */
body.is-arabic .eyebrow::before{background:linear-gradient(270deg,var(--accent),transparent)}
body.is-arabic .nav-link::after{left:auto;right:0}
body.is-arabic .btn:hover .arr{transform:translateX(-4px)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:960px){
  .nav-links{display:none}
  .nav-actions .lang-switch,.nav-actions .btn{display:none}
  .nav-burger{display:block}
  .split,.tab-split,.access-grid{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .prob-grid,.testi-grid,.price-grid{grid-template-columns:1fr 1fr}
  .show-grid{grid-template-columns:repeat(2,1fr)}
  .vc,.vc.big{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .prob-grid,.testi-grid,.price-grid,.show-grid,.foot-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .wiz-checks{grid-template-columns:1fr}
  .hero-cta .btn,.final .hero-cta .btn{flex:1 1 auto;justify-content:center}
}