/* Agenca landing · Techne 2026
   Brand tokens: brand-kit/tokens/tokens.css (D-050, D-059). The page runs on the dark "night" palette. */

@font-face{font-family:"Plus Jakarta Sans";src:url(../assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");font-weight:500 600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";src:url(../assets/fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700 800;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"JetBrains Mono";src:url(../assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#0A0F24;--bg-2:#0D1330;--surface:#131A38;--surface-2:#182148;--raise:#1C2550;
  --text:#E8ECF7;--muted:#A3ABC6;--faint:#6F7899;
  --brand:#2B3AA8;--brand-button:#4353D6;--link:#8E9BFF;
  --gold:#E3B04B;--gold-2:#F4CD74;--on-gold:#0E1540;
  --up:#3CCB94;--down:#FF7B72;--warning:#FF9B5C;--abstain:#9AA3C0;
  --line:rgba(var(--ink),.08);--line-2:rgba(var(--ink),.14);
  --ease:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --r-xl:32px;--r-lg:24px;--r-md:16px;--r-sm:12px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar:"IBM Plex Sans Arabic","Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",monospace;
  --gutter:clamp(16px,4vw,40px);
  --ink:232,236,247;--bg-rgb:10,15,36;--surface-rgb:19,26,56;--link-rgb:142,155,255;--shadow-rgb:0,0,0;
  --app-bg:#0E1430;--gold-ink:#E3B04B;--focus:#E3B04B;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="ar"] body{font-family:var(--font-ar);font-size:17.5px;line-height:1.75}
html[lang="ar"] *{letter-spacing:0!important}
html.i18n-pending main,html.i18n-pending .nav{opacity:0}
img,svg,video,canvas{display:block;max-width:100%}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--link)}
button{font:inherit;color:inherit}
svg use{pointer-events:none}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:0}
html[lang="ar"] .mono:not(.keep-mono){font-family:var(--mono),var(--font-ar)}
.wrap{max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:100;background:var(--gold);color:var(--on-gold);padding:10px 16px;border-radius:999px;font-weight:700;text-decoration:none}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.logo-ar{display:none}
html[lang="ar"] .logo-en{display:none}
html[lang="ar"] .logo-ar{display:block}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:6px 14px 6px 12px;background:rgba(var(--ink),.03)}
html[lang="ar"] .eyebrow{text-transform:none;font-size:14px;padding:5px 14px}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--link);box-shadow:0 0 0 4px rgba(var(--link-rgb),.14)}
.eyebrow .dot.gold{background:var(--gold);box-shadow:0 0 0 4px rgba(227,176,75,.16)}
.eyebrow .dot.red{background:var(--down);box-shadow:0 0 0 4px rgba(255,123,114,.14)}
.h2{font-size:clamp(32px,4.4vw,56px);line-height:1.06;font-weight:800;letter-spacing:-.035em;margin-top:22px;text-wrap:balance}
html[lang="ar"] .h2{font-weight:700;line-height:1.3}
.lead{font-size:clamp(16.5px,1.4vw,19px);color:var(--muted);margin-top:18px;max-width:56ch;text-wrap:pretty}
.sec{padding-block:clamp(96px,12vw,168px);position:relative}
.sec-head{max-width:820px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}

/* ---------- buttons ---------- */
.btn{--h:54px;display:inline-flex;align-items:center;gap:12px;min-height:var(--h);padding:6px 8px 6px 24px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .5s var(--ease),background-color .4s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}
html[dir="rtl"] .btn{padding:6px 24px 6px 8px}
.btn:active{transform:scale(.98)}
.btn-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease)}
.btn-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-ic.play svg{fill:currentColor;stroke:none;width:15px;height:15px}
html[dir="rtl"] .btn-ic:not(.play) svg{transform:scaleX(-1)}
.btn:hover .btn-ic{transform:translateX(3px) scale(1.05)}
html[dir="rtl"] .btn:hover .btn-ic{transform:translateX(-3px) scale(1.05)}
.btn-gold{background:var(--gold);color:var(--on-gold);box-shadow:0 10px 30px -8px rgba(227,176,75,.55),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-gold:hover{background:var(--gold-2);box-shadow:0 18px 44px -10px rgba(227,176,75,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-gold .btn-ic{background:rgba(14,21,64,.1)}
.btn-ghost{background:rgba(var(--ink),.04);border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{background:rgba(var(--ink),.08);border-color:rgba(var(--ink),.24)}
.btn-ghost .btn-ic{background:rgba(var(--ink),.08)}
.btn-ghost .btn-ic.play{order:-1;margin-inline-start:-16px}
.btn-sm{--h:42px;padding:6px 18px;font-size:14px}
html[dir="rtl"] .btn-sm{padding:6px 18px}
.btn[disabled]{opacity:.6;cursor:progress}

/* ---------- floating island nav ---------- */
.nav{position:fixed;top:14px;inset-inline:0;z-index:40;padding-inline:var(--gutter);pointer-events:none}
.nav-pill{pointer-events:auto;max-width:1160px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 22px;border-radius:999px;background:rgba(var(--surface-rgb),.62);border:1px solid var(--line-2);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 20px 50px -20px rgba(var(--shadow-rgb),.6),inset 0 1px 0 rgba(255,255,255,.05);transition:background-color .5s var(--ease)}
html[dir="rtl"] .nav-pill{padding:8px 22px 8px 8px}
.nav.scrolled .nav-pill{background:rgba(var(--bg-rgb),.86)}
.brand img{height:24px;width:auto}
.brand .logo-ar{height:29px}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px;padding:8px 14px;border-radius:999px;transition:color .3s var(--ease),background-color .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:rgba(var(--ink),.06)}
.nav-actions{display:flex;align-items:center;gap:8px}
.lang-btn{height:42px;min-width:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;font-weight:600;font-size:14.5px;transition:background-color .3s var(--ease)}
.lang-btn[lang="ar"]{font-family:var(--font-ar)}
.lang-btn[lang="en"]{font-family:var(--font)}
.lang-btn:hover{background:rgba(var(--ink),.08)}
.burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:transparent;position:relative;cursor:pointer}
.burger span{position:absolute;inset-inline-start:13px;width:16px;height:1.6px;background:var(--text);border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease)}
.burger span:first-child{top:16px}.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.menu{pointer-events:auto;position:fixed;inset:0;z-index:-1;background:rgba(var(--bg-rgb),.9);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;place-items:center;padding:96px var(--gutter) 40px}
.menu nav{display:grid;gap:6px;text-align:center}
.menu a{color:var(--text);text-decoration:none;font-size:30px;font-weight:700;padding:8px 18px;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*60ms + 80ms)}
.menu.open a{opacity:1;transform:none}
.menu .menu-cta{margin-top:18px;font-size:17px;background:var(--gold);color:var(--on-gold);border-radius:999px;padding:14px 26px}

/* ---------- bezel (outer shell + inner core) ---------- */
.bezel{padding:7px;border-radius:var(--r-xl);background:linear-gradient(180deg,rgba(var(--ink),.07),rgba(var(--ink),.02));border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(var(--shadow-rgb),.7)}
.bezel-core{border-radius:calc(var(--r-xl) - 7px);background:var(--surface);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:110px;padding-bottom:40px;overflow:hidden;isolation:isolate}
#hero3d{position:absolute;inset:0;width:100%;height:100%;z-index:-2;opacity:0;transition:opacity 1.6s var(--ease-out)}
#hero3d.ready{opacity:1}
.hero-fallback{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(60% 55% at 72% 38%,rgba(67,83,214,.38),transparent 70%),
  radial-gradient(40% 40% at 18% 90%,rgba(227,176,75,.12),transparent 70%),
  linear-gradient(180deg,var(--bg),var(--bg-2))}
.hero-fallback::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--ink),.045) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--ink),.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 60% at 60% 45%,#000,transparent);mask-image:radial-gradient(70% 60% at 60% 45%,#000,transparent)}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.55) 42%,rgba(var(--bg-rgb),0) 70%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),0) 22%)}
html[dir="rtl"] .hero-veil{background:linear-gradient(270deg,rgba(var(--bg-rgb),.92) 0%,rgba(var(--bg-rgb),.55) 42%,rgba(var(--bg-rgb),0) 70%),linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),0) 22%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:40px;align-items:center;width:100%}
.hero-h1{font-size:clamp(42px,5.6vw,82px);line-height:.98;font-weight:800;letter-spacing:-.05em;margin-top:26px;text-wrap:balance}
.hero-h1 .l1,.hero-h1 .l2{display:block}
.hero-h1 .l2{background:linear-gradient(92deg,var(--gold) 0%,var(--gold-2) 40%,#fff 120%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
html[lang="ar"] .hero-h1{font-weight:700;line-height:1.22;font-size:clamp(42px,5.8vw,84px)}
.hero-sub{font-size:clamp(17px,1.5vw,20px);color:var(--muted);max-width:50ch;margin-top:26px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-note{margin-top:26px;font-size:12.5px;color:var(--faint)}
.hero-cards{position:relative;height:420px}
.hcard{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:20px;background:rgba(var(--surface-rgb),.72);border:1px solid var(--line-2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 60px -30px rgba(var(--shadow-rgb),.8);font-size:14.5px;max-width:340px}
html[dir="rtl"] .hcard{padding:12px 12px 12px 18px}
.hcard b{font-weight:600}
.hc-k{display:block;font-size:11.5px;color:var(--gold-ink)}
.hc1{top:30px;inset-inline-end:8%}
.hc2{top:170px;inset-inline-start:0}
.hc3{top:290px;inset-inline-end:2%}
.hc-chip{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.hc-chip svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hc-chip.gold{background:rgba(227,176,75,.16);color:var(--gold-ink)}
.hc-chip.up{background:rgba(60,203,148,.14);color:var(--up)}
.hero-tag{display:flex;justify-content:space-between;align-items:center;margin-top:56px;width:100%}
.tagline{font-size:15px;font-weight:600;color:var(--muted)}
.scroll-cue{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.16em}
html[lang="ar"] .scroll-cue{text-transform:none}
.scroll-cue i{width:1px;height:36px;background:linear-gradient(var(--gold),transparent);display:block}

/* ---------- problem ---------- */
.pains{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px;margin-top:64px;align-items:start}
.pain-list{display:grid;gap:6px;counter-reset:p}
.pain-tab{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;text-align:start;padding:14px 16px;border-radius:18px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--muted);font-weight:600;font-size:16px;transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.pain-tab .n{font-family:var(--mono);font-size:12.5px;color:var(--faint);width:44px;height:44px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line);transition:all .4s var(--ease)}
.pain-tab .arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;opacity:0;transform:translateX(-6px);transition:all .4s var(--ease)}
html[dir="rtl"] .pain-tab .arr{transform:scaleX(-1) translateX(-6px)}
.pain-tab:hover{color:var(--text);background:rgba(var(--ink),.03)}
.pain-tab[aria-selected="true"]{color:var(--text);background:var(--surface);border-color:var(--line-2)}
.pain-tab[aria-selected="true"] .n{background:rgba(255,123,114,.12);color:var(--down);border-color:rgba(255,123,114,.3)}
.pain-tab[aria-selected="true"] .arr{opacity:1;transform:none}
html[dir="rtl"] .pain-tab[aria-selected="true"] .arr{transform:scaleX(-1)}
.pain-panel-shell{position:sticky;top:110px}
.pain-panel{padding:clamp(24px,3.4vw,44px);min-height:470px;display:flex;flex-direction:column}
.pp-count{font-family:var(--mono);font-size:12.5px;color:var(--faint)}
.pp-title{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.15;margin-top:12px}
html[lang="ar"] .pp-title{font-weight:700;line-height:1.4}
.pp-today{margin-top:14px;color:var(--muted)}
.pp-vis{margin-block:26px;height:150px;border-radius:20px;background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden}
.pp-with{margin-top:auto;padding:20px;border-radius:20px;background:linear-gradient(135deg,rgba(67,83,214,.18),rgba(227,176,75,.07));border:1px solid rgba(var(--link-rgb),.2);display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.pp-with img{width:48px;height:auto}
.pp-with .k{font-size:12px;font-weight:700;color:var(--gold-ink);text-transform:uppercase;letter-spacing:.12em}
html[lang="ar"] .pp-with .k{text-transform:none;font-size:13.5px}
.pp-with p{margin-top:4px}
.pp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pp-links button{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--ink),.04);cursor:pointer;color:var(--link);transition:background-color .3s var(--ease)}
.pp-links button:hover{background:rgba(var(--link-rgb),.12)}
/* pain vignettes */
.v-tabs{position:absolute;inset:18px;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}
.v-tab{font-size:11.5px;font-family:var(--mono);padding:5px 9px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.v-rows{position:absolute;inset:18px;display:grid;gap:7px;align-content:start}
.v-row{height:12px;border-radius:6px;background:var(--surface-2)}
.v-row.hl{background:rgba(255,123,114,.22)}
.v-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px}
.v-big{font-family:var(--mono);font-size:13px;color:var(--muted)}
.v-big b{display:block;font-family:var(--font);font-size:22px;color:var(--text);margin-bottom:6px}

/* ---------- solution ---------- */
.sol-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,96px);align-items:center}
.pillars{display:grid;gap:14px}
.pillar{padding:28px 30px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--surface) 0%,rgba(var(--surface-rgb),.4) 100%);border:1px solid var(--line);position:relative;overflow:hidden;transition:border-color .5s var(--ease),transform .6s var(--ease)}
.pillar:hover{border-color:rgba(227,176,75,.35);transform:translateY(-2px)}
.pillar::after{content:"";position:absolute;inset-inline-end:-80px;top:-80px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(227,176,75,.12),transparent 70%)}
.pillar-n{font-size:12.5px;color:var(--gold-ink)}
.pillar h3{font-size:22px;font-weight:700;margin-top:8px;letter-spacing:-.015em}
.pillar p{color:var(--muted);margin-top:6px;max-width:52ch}

/* ---------- film ---------- */
.film-shell{margin-top:56px}
.film-core{position:relative;aspect-ratio:16/9;background:#060A1A}
.film-core video{width:100%;height:100%;object-fit:cover;background:#060A1A}
.film-coming{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:6px;background:radial-gradient(60% 60% at 50% 40%,rgba(43,58,168,.45),rgba(6,10,26,.92));padding:24px}
.film-coming img{width:96px;height:auto}
.fc-t{font-size:clamp(20px,2.2vw,28px);font-weight:700;margin-top:8px}
.fc-b{color:var(--muted);max-width:44ch}
.film-play{position:absolute;inset:0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer}
.film-play span{width:96px;height:96px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;box-shadow:0 0 0 14px rgba(227,176,75,.16),0 30px 60px -20px rgba(var(--shadow-rgb),.8);transition:transform .6s var(--ease)}
.film-play:hover span{transform:scale(1.06)}
.film-play svg{width:34px;height:34px;fill:currentColor;margin-inline-start:4px}

/* ---------- capabilities ---------- */
.caps-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;margin-top:64px;align-items:start}
.caps-nav{display:grid;gap:22px;max-height:760px;overflow:auto;padding-inline-end:6px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.caps-group h3{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px;padding-inline-start:12px}
html[lang="ar"] .caps-group h3{text-transform:none;font-family:var(--font-ar);font-size:13px;font-weight:600}
.cap-btn{width:100%;display:flex;align-items:center;gap:12px;text-align:start;padding:10px 12px;border-radius:14px;border:1px solid transparent;background:transparent;cursor:pointer;color:var(--muted);font-weight:600;font-size:15px;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.cap-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cap-btn:hover{color:var(--text);background:rgba(var(--ink),.03)}
.cap-btn[aria-selected="true"]{color:var(--text);background:var(--surface);border-color:var(--line-2)}
.cap-btn[aria-selected="true"] svg{color:var(--gold-ink)}
.cap-btn .seen{margin-inline-start:auto;width:6px;height:6px;border-radius:50%;background:transparent}
.cap-btn.viewed .seen{background:rgba(var(--link-rgb),.5)}
.caps-stage{position:sticky;top:100px;min-width:0}
.app{background:var(--app-bg)}
.app-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.app-dots{display:flex;gap:6px}.app-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.app-url{font-size:12px;color:var(--faint);background:rgba(var(--ink),.04);padding:4px 12px;border-radius:999px}
.app-ill{margin-inline-start:auto;font-size:11px;color:var(--gold-ink);border:1px solid rgba(227,176,75,.3);padding:3px 10px;border-radius:999px}
.app-body{display:grid;grid-template-columns:56px 1fr;min-height:480px}
.app-side{border-inline-end:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 0}
.app-side span{width:22px;height:22px;border-radius:7px;background:rgba(var(--ink),.06)}
.app-side img{margin-bottom:8px}
.app-main{padding:22px;min-width:0;font-size:14px}
.cap-copy{margin-top:22px;padding-inline:8px}
.cap-copy h3{font-size:24px;font-weight:700;letter-spacing:-.02em}
.cap-copy p{color:var(--muted);margin-top:8px;max-width:64ch}
.cap-copy .cc-n{font-family:var(--mono);font-size:12px;color:var(--faint)}
/* mock primitives */
.m-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.m-h b{font-size:17px;font-weight:700}
.m-sub{color:var(--faint);font-size:12.5px}
.m-grid{display:grid;gap:10px}
.m-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.m-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;min-width:0}
.m-k{font-size:11.5px;color:var(--faint);font-weight:600}
.m-v{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:2px;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
html[dir="rtl"] .m-v{text-align:right}
.m-d{font-size:12px;font-weight:700;font-family:var(--mono);direction:ltr;display:inline-block}
.up{color:var(--up)}.down{color:var(--down)}.warn{color:var(--warning)}.gold-t{color:var(--gold-ink)}
.m-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(var(--ink),.03);border:1px solid var(--line)}
.m-row + .m-row{margin-top:6px}
.m-name{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.m-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill.ok{background:rgba(60,203,148,.12);color:var(--up)}
.pill.bad{background:rgba(255,123,114,.12);color:var(--down)}
.pill.warn{background:rgba(255,155,92,.12);color:var(--warning)}
.pill.info{background:rgba(var(--link-rgb),.12);color:var(--link)}
.pill.gold{background:rgba(227,176,75,.14);color:var(--gold-ink)}
.pill.mute{background:rgba(154,163,192,.12);color:var(--abstain)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;padding:4px 10px;border-radius:999px;background:rgba(var(--ink),.05);border:1px solid var(--line);color:var(--muted);white-space:nowrap;direction:ltr}
.chip.down{color:var(--down);border-color:rgba(255,123,114,.3)}
.chip.up{color:var(--up);border-color:rgba(60,203,148,.3)}
.chip.gold{color:var(--gold-ink);border-color:rgba(227,176,75,.35)}
.m-bars{display:flex;align-items:flex-end;gap:5px;height:110px;direction:ltr}
.m-bars i{flex:1;border-radius:5px 5px 2px 2px;background:rgba(var(--link-rgb),.28);transform-origin:bottom}
.m-bars i.hl{background:var(--gold)}
.m-line{width:100%;height:120px;direction:ltr}
.m-field{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:rgba(var(--ink),.03);border:1px solid var(--line)}
.m-field .m-k{display:flex;justify-content:space-between;gap:8px}
.m-btn{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--ink),.04);color:var(--text)}
.m-btn.gold{background:var(--gold);color:var(--on-gold);border-color:transparent}
.m-btn.brand{background:var(--brand-button);border-color:transparent}
.m-tl{display:grid;gap:10px;position:relative;padding-inline-start:20px}
.m-tl::before{content:"";position:absolute;inset-inline-start:5px;top:6px;bottom:6px;width:1px;background:var(--line-2)}
.m-tl > div{position:relative}
.m-tl > div::before{content:"";position:absolute;inset-inline-start:-19px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--link)}
.m-tl > div.g::before{background:var(--gold)}
.m-meter{height:8px;border-radius:999px;background:rgba(var(--ink),.07);overflow:hidden;margin-top:8px}
.m-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand-button),var(--link));transform-origin:left}
html[dir="rtl"] .m-meter i{transform-origin:right}
.m-gen{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.m-gen img{width:40px;height:auto}
.m-doc{background:#F5F7FB;color:#0E1540;border-radius:14px;padding:18px}
.m-doc .m-k{color:#5A6178}
.m-doc .agency{display:flex;align-items:center;gap:10px;font-weight:800}
.m-doc .agency i{width:28px;height:28px;border-radius:8px;background:#D9480F;display:block}
.m-toggle{width:34px;height:20px;border-radius:999px;background:var(--up);position:relative;flex:none}
.m-toggle::after{content:"";position:absolute;top:3px;inset-inline-end:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.m-toggle.off{background:rgba(var(--ink),.15)}
.m-toggle.off::after{inset-inline-end:auto;inset-inline-start:3px}
.m-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px}
.m-mini-ar{font-family:var(--font-ar)}

/* ---------- how it works ---------- */
.how{position:relative;padding-block:clamp(96px,10vw,140px) 40px;overflow:hidden}
.how-pin{overflow:hidden;width:100%;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:56px}
.how-track-wrap{position:relative;--edge:max(var(--gutter),calc((100vw - 1240px)/2 + var(--gutter)))}
.how-rail{position:absolute;top:31px;inset-inline:var(--edge);height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.how-rail i{position:absolute;inset:0;background:linear-gradient(90deg,var(--link),var(--gold));transform-origin:left;transform:scaleX(0)}
html[dir="rtl"] .how-rail i{transform-origin:right;background:linear-gradient(270deg,var(--link),var(--gold))}
.how-track{display:flex;gap:18px;width:max-content;will-change:transform;padding-inline:var(--edge)}
.how-step{width:300px;flex:none;position:relative;padding-top:72px}
.how-node{position:absolute;top:10px;inset-inline-start:0;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);color:var(--muted);transition:all .5s var(--ease)}
.how-node svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.how-step.on .how-node{background:var(--gold);color:var(--on-gold);border-color:var(--gold);box-shadow:0 0 0 8px rgba(227,176,75,.14)}
.how-card{padding:22px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);min-height:150px;transition:border-color .5s var(--ease)}
.how-step.on .how-card{border-color:rgba(227,176,75,.3)}
.how-card .n{font-family:var(--mono);font-size:12px;color:var(--faint)}
.how-card h3{font-size:19px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.how-card p{color:var(--muted);margin-top:6px;font-size:15px}
/* fallback (no pin): wrap into grid */
.how.static .how-pin{min-height:0}
.how.static .how-track{width:auto;padding-inline:var(--edge);display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;transform:none!important}
.how.static .how-step{width:auto}
.how.static .how-rail{display:none}
.how.static .how-step .how-node{background:var(--surface-2);color:var(--gold)}

/* ---------- gen ---------- */
.gen{background:radial-gradient(60% 50% at 80% 30%,rgba(43,58,168,.25),transparent 70%)}
.gen-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,6vw,88px);align-items:start}
.gen-rules{display:grid;gap:10px;margin-top:28px}
.gen-rules li,.ar-points li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.gen-rules svg,.ar-points svg{width:20px;height:20px;flex:none;margin-top:3px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gen-states-label{margin-top:36px;font-size:12px;color:var(--faint)}
.gen-states{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.gen-state{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--ink),.03);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);transition:all .35s var(--ease)}
html[dir="rtl"] .gen-state{padding:6px 6px 6px 14px}
.gen-state img{width:30px;height:auto}
.gen-state[aria-pressed="true"]{color:var(--text);border-color:rgba(227,176,75,.45);background:rgba(227,176,75,.08)}
.gen-console{padding:clamp(20px,3vw,32px);min-height:560px;display:flex;flex-direction:column}
.gen-head{display:flex;gap:18px;align-items:center}
.gen-head img{width:88px;height:auto;flex:none;transition:transform .6s var(--ease)}
.gen-ask-label{font-size:13px;color:var(--faint);font-weight:600}
.gen-scen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.gen-scen button{font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;color:var(--muted);transition:all .35s var(--ease)}
.gen-scen button[aria-selected="true"]{background:var(--brand-button);border-color:transparent;color:#fff}
.gen-out{margin-top:24px;display:grid;gap:10px;flex:1;align-content:start}
.g-typing{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}
.g-typing span{display:inline-flex;gap:4px}
.g-typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:dot 1s infinite var(--ease)}
.g-typing i:nth-child(2){animation-delay:.15s}.g-typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.g-block{padding:14px 16px;border-radius:16px;background:rgba(var(--ink),.03);border:1px solid var(--line)}
.g-block .k{font-size:11.5px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.12em}
html[lang="ar"] .g-block .k{text-transform:none;font-size:13px}
.g-block p{margin-top:4px}
.g-block.main{background:linear-gradient(135deg,rgba(67,83,214,.2),rgba(var(--surface-rgb),.4));border-color:rgba(var(--link-rgb),.25)}
.g-block.main p:not(.k){font-size:17px;font-weight:600}
.g-block.abstain{background:rgba(154,163,192,.08);border-color:rgba(154,163,192,.25)}
.g-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.g-acts{display:flex;gap:8px}
.g-acts button{font-size:14px;font-weight:700;padding:10px 18px;border-radius:999px;border:1px solid var(--line-2);background:transparent;cursor:pointer;transition:all .35s var(--ease)}
.g-acts .ok{background:var(--gold);color:var(--on-gold);border-color:transparent}
.g-acts .ok:hover{background:var(--gold-2)}
.g-acts button:hover{border-color:rgba(var(--ink),.3)}
.g-result{font-size:14px;font-weight:600;color:var(--up);display:flex;align-items:center;gap:8px}
.g-result svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.g-conf{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint)}
.g-conf b{display:inline-flex;gap:3px}.g-conf b i{width:14px;height:5px;border-radius:3px;background:rgba(var(--ink),.12)}
.g-conf b i.on{background:var(--gold)}
.g-in{animation:gIn .7s var(--ease-out) both}
@keyframes gIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- trust ---------- */
.trust-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.trust-head{position:sticky;top:120px}
.trust-gen{width:96px;height:auto;margin-bottom:20px}
.trust-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.trust-list li{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:28px;background:var(--bg)}
.trust-list svg{width:26px;height:26px;fill:none;stroke:var(--link);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
html[dir="rtl"] .trust-list li:nth-child(5) svg{transform:scaleX(-1)}
.trust-list h3{font-size:18px;font-weight:700}
.trust-list p{color:var(--muted);margin-top:6px;font-size:15.5px}

/* ---------- arabic first ---------- */
.arfirst{background:linear-gradient(180deg,transparent,rgba(43,58,168,.12) 50%,transparent)}
.ar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.ar-points{display:grid;gap:12px;margin-block:28px 34px}
.ar-cards{display:grid;gap:16px;position:relative}
.mini-card{padding:20px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);box-shadow:0 30px 60px -30px rgba(var(--shadow-rgb),.8);font-family:var(--font)}
.mini-card.ar{font-family:var(--font-ar);margin-inline-start:48px}
.mini-card:first-child{margin-inline-end:48px}
.mc-head{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--faint)}
.mc-head img{width:34px;height:auto}
.mc-t{font-size:17px;font-weight:600;margin-block:12px}
.mc-act{display:flex;gap:8px;margin-top:14px}
.mbtn{font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line-2)}
.mbtn.gold{background:var(--gold);color:var(--on-gold);border-color:transparent}

/* ---------- invitation form ---------- */
.invite-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,6vw,88px);align-items:start}
.invite-copy{position:sticky;top:120px}
.invite-gen{width:120px;height:auto;margin-top:8px}
.form-core{padding:clamp(22px,3.4vw,40px)}
.f-progress{display:flex;align-items:center;gap:14px}
.f-steps{display:flex;gap:6px;flex:1}
.f-steps i{height:4px;flex:1;border-radius:4px;background:rgba(var(--ink),.1);position:relative;overflow:hidden}
.f-steps i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
html[dir="rtl"] .f-steps i::after{transform-origin:right}
.f-steps i.done::after{transform:scaleX(1)}
.f-count{font-family:var(--mono);font-size:12.5px;color:var(--faint);white-space:nowrap}
html[lang="ar"] .f-count{font-family:var(--font-ar)}
.f-title{font-size:24px;font-weight:700;margin-top:22px;letter-spacing:-.015em}
.f-step{display:grid;gap:18px;margin-top:22px}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.f-field{display:grid;gap:7px;min-width:0}
.f-field > label,.f-field > .f-label,.f-legend{font-size:14px;font-weight:600}
.f-legend{padding:0;margin-bottom:8px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.req{color:var(--gold);margin-inline-start:2px}
.opt{color:var(--faint);font-weight:500;font-size:13px}
.f-in,.f-sel,.f-ta{width:100%;font:inherit;font-size:16px;color:var(--text);background:var(--bg);border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;min-height:50px;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.f-ta{min-height:92px;resize:vertical}
.f-sel{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3ABC6' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:right 14px center;padding-inline-end:40px}
html[dir="rtl"] .f-sel{background-position:left 14px center}
.f-in::placeholder,.f-ta::placeholder{color:var(--faint)}
.f-in:focus,.f-sel:focus,.f-ta:focus{outline:none;border-color:var(--link);box-shadow:0 0 0 4px rgba(var(--link-rgb),.18)}
.f-field.invalid .f-in,.f-field.invalid .f-sel{border-color:var(--down)}
.f-err{color:var(--down);font-size:13.5px;font-weight:600;min-height:0}
.f-phone{display:grid;grid-template-columns:118px minmax(0,1fr);gap:8px;direction:ltr}
.f-phone .f-in{direction:ltr;text-align:left}
.f-in[type="email"]{direction:ltr}
html[dir="rtl"] .f-in[type="email"]{text-align:right}
.f-chips{display:flex;flex-wrap:wrap;gap:8px}
.f-chip{position:relative}
.f-chip input{position:absolute;opacity:0;width:1px;height:1px}
.f-chip span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(var(--ink),.03);font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .3s var(--ease);user-select:none}
.f-chip span::before{content:"";width:14px;height:14px;border-radius:5px;border:1.5px solid var(--faint);flex:none;transition:all .3s var(--ease)}
.f-chip input[type="radio"] + span::before{border-radius:50%}
.f-chip input:checked + span{color:var(--text);border-color:rgba(227,176,75,.55);background:rgba(227,176,75,.1)}
.f-chip input:checked + span::before{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 2.5px var(--surface)}
.f-chip input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.f-chip span:hover{border-color:rgba(var(--ink),.28)}
.f-hint{font-size:13px;color:var(--faint);margin-top:-2px;margin-bottom:8px}
.f-consent{display:flex;gap:12px;align-items:flex-start;font-weight:600;cursor:pointer}
.f-consent input{width:20px;height:20px;accent-color:var(--gold);margin-top:3px;flex:none}
.f-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.f-actions .btn-ghost{padding-inline:22px}
.f-summary{color:var(--down);font-weight:600;font-size:14px;margin-top:14px}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.f-done{text-align:center;padding-block:24px;display:grid;justify-items:center;gap:10px}
.f-done img{width:150px;height:auto}
.f-done h3{font-size:28px;font-weight:800;letter-spacing:-.02em}
.f-done p{color:var(--muted);max-width:46ch}
.f-fallback{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.f-fallback a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.f-fallback svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.f-fallback a:hover{border-color:var(--gold);color:var(--gold-ink)}

/* ---------- closing + footer ---------- */
.closing{padding-block:clamp(80px,10vw,140px);text-align:center;background:radial-gradient(50% 70% at 50% 100%,rgba(67,83,214,.3),transparent 70%)}
.closing-in{display:grid;justify-items:center}
.closing .lead{margin-inline:auto}
.closing .btn{margin-top:34px}
.footer{border-top:1px solid var(--line);padding-block:48px 56px;color:var(--muted);font-size:14.5px}
.foot{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:32px;align-items:start}
.foot-brand img{height:24px;width:auto;margin-bottom:12px}
.foot-brand .logo-ar{height:29px}
.foot-contact{display:grid;gap:8px}
.foot-contact p{font-size:12px;color:var(--faint)}
.foot-contact a{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;color:var(--text);text-decoration:none;font-weight:600;transition:color .3s var(--ease)}
.foot-contact a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.foot-contact a:hover{color:var(--gold-ink)}
.foot-meta{display:grid;gap:4px;text-align:end}
.foot-note{color:var(--faint);font-size:13px;margin-top:6px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:var(--gutter)}
.modal-back{position:absolute;inset:0;background:rgba(5,8,20,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.modal-box{position:relative;width:min(1100px,100%);aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#060A1A;border:1px solid var(--line-2);box-shadow:0 60px 120px -40px rgba(var(--shadow-rgb),.9)}
.modal-media,.modal-media video{width:100%;height:100%}
.modal-media{position:relative}
.modal-media video{object-fit:contain;background:#060A1A}
.modal-x{position:absolute;top:12px;inset-inline-end:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:rgba(var(--bg-rgb),.7);cursor:pointer;display:grid;place-items:center}
.modal-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
body.modal-open{overflow:hidden}

/* ---------- grain ---------- */
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- reveal (JS adds .in; only hidden when motion is allowed and JS runs) ---------- */
html.js:not(.reduced) .reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out),filter 1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
html.js:not(.reduced) .reveal.in{opacity:1;transform:none;filter:none}
html.js:not(.reduced) .hero-copy > *{animation:heroIn 1.1s var(--ease-out) both}
html.js:not(.reduced) .hero-copy > :nth-child(2){animation-delay:.08s}
html.js:not(.reduced) .hero-copy > :nth-child(3){animation-delay:.18s}
html.js:not(.reduced) .hero-copy > :nth-child(4){animation-delay:.28s}
html.js:not(.reduced) .hero-copy > :nth-child(5){animation-delay:.36s}
html.js:not(.reduced) .hcard{animation:cardIn 1.2s var(--ease-out) both,float 7s ease-in-out infinite alternate}
html.js:not(.reduced) .hc1{animation-delay:.5s,1.7s}
html.js:not(.reduced) .hc2{animation-delay:.8s,2s}
html.js:not(.reduced) .hc3{animation-delay:1.1s,2.3s}
@keyframes heroIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes float{from{translate:0 0}to{translate:0 -10px}}
html.js:not(.reduced) .scroll-cue i{animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.view-in{animation:gIn .6s var(--ease-out) both}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-cards{display:none}
  .caps-grid{grid-template-columns:1fr}
  .caps-nav{display:flex;gap:8px;overflow-x:auto;max-height:none;padding-bottom:8px;scroll-snap-type:x proximity;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter)}
  .caps-group{display:contents}
  .caps-group h3{display:none}
  .cap-btn{width:auto;flex:none;white-space:nowrap;border-color:var(--line);scroll-snap-align:start}
  .caps-stage{position:static}
}
@media (max-width:900px){
  .pains,.sol-grid,.gen-grid,.trust-grid,.ar-grid,.invite-grid{grid-template-columns:1fr}
  .pain-panel-shell,.trust-head,.invite-copy{position:static}
  .pain-list{display:flex;overflow-x:auto;gap:8px;margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) 6px;scroll-snap-type:x proximity}
  .pain-tab{flex:none;grid-template-columns:auto auto;border-color:var(--line);padding:8px 14px 8px 8px;font-size:14.5px;scroll-snap-align:start}
  html[dir="rtl"] .pain-tab{padding:8px 8px 8px 14px}
  .pain-tab .n{width:32px;height:32px;border-radius:10px}
  .pain-tab .arr{display:none}
  .pain-panel{min-height:0}
  .foot{grid-template-columns:1fr}
  .foot-meta{text-align:start}
  .invite-gen{display:none}
}
@media (max-width:760px){
  .nav-cta{display:none}
  .hero{padding-top:100px}
  .hero-veil{background:linear-gradient(0deg,var(--bg) 0%,rgba(var(--bg-rgb),.6) 60%,rgba(var(--bg-rgb),.35) 100%)!important}
  .cta-row .btn{width:100%;justify-content:space-between}
  .btn-ghost .btn-ic.play{margin-inline-start:-16px}
  .hero-tag{margin-top:40px}
  .scroll-cue{display:none}
  .app-body{grid-template-columns:1fr}
  .app-side{display:none}
  .app-main{padding:16px}
  .app-url{display:none}
  .m-g3,.m-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .m-split{grid-template-columns:1fr}
  .trust-list{grid-template-columns:1fr}
  .trust-list li{padding:22px}
  .mini-card.ar,.mini-card:first-child{margin-inline:0}
  .f-row{grid-template-columns:1fr}
  .f-actions .btn{flex:1;justify-content:center}
  .f-actions .btn-gold{justify-content:space-between}
  .how-step{width:260px}
  .gen-head img{width:68px}
  .film-play span{width:72px;height:72px}
}
@media (max-width:420px){
  .m-row{grid-template-columns:minmax(0,1fr) auto}
  .m-row > :nth-child(2){display:none}
  .hero-h1{font-size:40px}
  html[lang="ar"] .hero-h1{font-size:40px}
  .lang-btn{padding:0 12px}
}

html[lang="ar"] .pp-count,html[lang="ar"] .cap-copy .cc-n{font-family:var(--font-ar)}
html[lang="ar"] .app-ill,html[lang="ar"] .gen-states-label,html[lang="ar"] .hero-note,html[lang="ar"] .foot-contact p{font-family:var(--font-ar)}

/* ---------- theme toggle + light theme (brand light tokens, brand-kit/tokens/tokens.css) ---------- */
.theme-btn{width:42px;height:42px;flex:none;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--text);transition:background-color .3s var(--ease)}
.theme-btn:hover{background:rgba(var(--ink),.08)}
.theme-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .i-sun{display:none}
:root[data-theme="light"] .theme-btn .i-sun{display:block}
:root[data-theme="light"] .theme-btn .i-moon{display:none}
:root:not([data-theme="light"]) .th-l{display:none!important}
:root[data-theme="light"] .th-d{display:none!important}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FB;--bg-2:#ECEFF8;--surface:#FFFFFF;--surface-2:#EEF1FA;--raise:#E4E8F8;
  --text:#0E1540;--muted:#5A6178;--faint:#5F6684;
  --brand:#2B3AA8;--brand-button:#2B3AA8;--link:#2B3AA8;
  --up:#16784C;--down:#C8423A;--warning:#C2410C;--abstain:#5F6684;
  --line:rgba(14,21,64,.09);--line-2:rgba(14,21,64,.16);
  --ink:14,21,64;--bg-rgb:245,247,251;--surface-rgb:255,255,255;--link-rgb:43,58,168;--shadow-rgb:14,21,64;
  --app-bg:#F8F9FD;--gold-ink:#8A5D00;--focus:#2B3AA8;
}
:root[data-theme="light"] .hero-h1 .l2{background:linear-gradient(92deg,#2B3AA8 0%,#4353D6 60%,#8A5D00 135%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="light"] .hero-fallback{background:radial-gradient(60% 55% at 72% 38%,rgba(67,83,214,.16),transparent 70%),radial-gradient(40% 40% at 18% 90%,rgba(227,176,75,.16),transparent 70%),linear-gradient(180deg,var(--bg),var(--bg-2))}
:root[data-theme="light"] .hero-fallback::after{background-image:linear-gradient(rgba(14,21,64,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(14,21,64,.05) 1px,transparent 1px)}
:root[data-theme="light"] .bezel{background:linear-gradient(180deg,rgba(14,21,64,.05),rgba(14,21,64,.02));box-shadow:0 40px 80px -48px rgba(14,21,64,.35)}
:root[data-theme="light"] .bezel-core{box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 1px 2px rgba(14,21,64,.04)}
:root[data-theme="light"] .nav-pill{box-shadow:0 18px 40px -24px rgba(14,21,64,.3),inset 0 1px 0 rgba(255,255,255,.7)}
:root[data-theme="light"] .hcard,:root[data-theme="light"] .mini-card{box-shadow:0 24px 50px -30px rgba(14,21,64,.35)}
:root[data-theme="light"] .pillar{background:linear-gradient(160deg,#fff 0%,#F8F9FD 100%)}
:root[data-theme="light"] .pillar:hover{border-color:rgba(43,58,168,.3)}
:root[data-theme="light"] .pp-with{background:linear-gradient(135deg,rgba(67,83,214,.09),rgba(227,176,75,.1));border-color:rgba(43,58,168,.16)}
:root[data-theme="light"] .g-block.main{background:linear-gradient(135deg,rgba(67,83,214,.1),rgba(255,255,255,.4));border-color:rgba(43,58,168,.2)}
:root[data-theme="light"] .gen{background:radial-gradient(60% 50% at 80% 30%,rgba(43,58,168,.08),transparent 70%)}
:root[data-theme="light"] .arfirst{background:linear-gradient(180deg,transparent,rgba(43,58,168,.06) 50%,transparent)}
:root[data-theme="light"] .closing{background:radial-gradient(50% 70% at 50% 100%,rgba(67,83,214,.14),transparent 70%)}
:root[data-theme="light"] .m-doc{border:1px solid var(--line-2)}
:root[data-theme="light"] .btn-gold{box-shadow:0 10px 26px -10px rgba(176,128,30,.55),inset 0 1px 0 rgba(255,255,255,.4)}
:root[data-theme="light"] .f-chip input:checked + span{border-color:#C9962F;background:rgba(227,176,75,.16)}
:root[data-theme="light"] .f-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6178' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
:root[data-theme="light"] .grain{opacity:.02}
:root[data-theme="light"] .scroll-cue i{background:linear-gradient(#2B3AA8,transparent)}
:root[data-theme="light"] .pain-tab[aria-selected="true"]{box-shadow:0 10px 30px -20px rgba(14,21,64,.35)}
/* the video frame and the modal stay a dark "screen" in both themes */
.force-dark{--text:#E8ECF7;--muted:#A3ABC6;--faint:#8A93B2;--line:rgba(232,236,247,.08);--line-2:rgba(232,236,247,.14);--ink:232,236,247;--bg-rgb:10,15,36;color:var(--text)}
@media (max-width:420px){.theme-btn{width:38px;height:38px}.nav-actions{gap:6px}}
:root[data-theme="light"] .gen-rules svg,:root[data-theme="light"] .ar-points svg{stroke:#B07D12}
:root[data-theme="light"] .eyebrow .dot.gold{background:#C9962F}

/* ---------- motion layer (js/motion.js, js/core3d.js) ---------- */
.core-stage{position:relative;height:clamp(300px,34vw,420px);margin-top:28px;border-radius:var(--r-xl);cursor:pointer;
  background:radial-gradient(45% 45% at 50% 50%,rgba(var(--link-rgb),.16),transparent 70%)}
.core-stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease-out)}
.core-stage canvas.ready{opacity:1}
.core-stage canvas.no-gl{display:none}

/* animated gradient border */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.glow-border{position:relative}
.glow-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 220deg,rgba(var(--link-rgb),.75) 290deg,var(--gold) 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
html.js:not(.reduced) .glow-border::before{animation:ang 7s linear infinite}
@keyframes ang{to{--ang:360deg}}

/* tilt targets */
[data-tilt]{transition:transform .6s var(--ease);transform-style:preserve-3d;will-change:transform}

/* magnetic */
.btn,.lang-btn,.theme-btn{transition:transform .5s var(--ease),translate .45s var(--ease),background-color .4s var(--ease),box-shadow .5s var(--ease),border-color .4s var(--ease)}

/* cursor glow */
.cursor-glow{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .6s var(--ease);
  background:radial-gradient(circle,rgba(var(--link-rgb),.10) 0%,rgba(227,176,75,.05) 35%,transparent 65%)}
.cursor-glow.on{opacity:1}
main,footer{position:relative;z-index:1}
.nav{z-index:40}

/* card spotlight */
.pillar,.trust-list li,.how-card,.pain-panel,.gen-console{position:relative}
.trust-list li::after,.how-card::after,.pain-panel::after,.gen-console::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(var(--link-rgb),.10),transparent 60%)}
.trust-list li:hover::after,.how-card:hover::after,.pain-panel:hover::after,.gen-console:hover::after{opacity:1}
.pillar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(227,176,75,.12),transparent 60%)}
.pillar:hover::before{opacity:1}

/* headline ink fill on scroll (only when GSAP drives it) */
html.js:not(.reduced) .sec-head .h2,html.js:not(.reduced) .sol-copy .h2,html.js:not(.reduced) .gen-copy .h2,html.js:not(.reduced) .invite-copy .h2,html.js:not(.reduced) #arabic .h2{
  background-image:linear-gradient(90deg,var(--text) 0 50%,rgba(var(--ink),.28) 50% 100%);background-size:200% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent}
html.js:not(.reduced)[dir="rtl"] .sec-head .h2,html.js:not(.reduced)[dir="rtl"] .sol-copy .h2,html.js:not(.reduced)[dir="rtl"] .gen-copy .h2,html.js:not(.reduced)[dir="rtl"] .invite-copy .h2,html.js:not(.reduced)[dir="rtl"] #arabic .h2{
  background-image:linear-gradient(270deg,var(--text) 0 50%,rgba(var(--ink),.28) 50% 100%)}
html.js:not(.reduced)[dir="rtl"] .sec-head .h2,html.js:not(.reduced)[dir="rtl"] .sol-copy .h2,html.js:not(.reduced)[dir="rtl"] .gen-copy .h2,html.js:not(.reduced)[dir="rtl"] .invite-copy .h2,html.js:not(.reduced)[dir="rtl"] #arabic .h2{background-size:200% 100%}

/* typing caret */
.typing-caret::after{content:"";display:inline-block;width:2px;height:1em;margin-inline-start:2px;background:var(--gold);vertical-align:-.15em;animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

@media (max-width:900px){.core-stage{height:300px}}

@media (max-width:760px){#gen3d-root,.gen3d{transition:opacity .4s var(--ease),visibility .4s}html.form-in-view #gen3d-root,html.form-in-view .gen3d{opacity:0;visibility:hidden;pointer-events:none}}
html[lang="ar"] .gen-states-label.mono,html[lang="ar"] .foot-contact p.mono,html[lang="ar"] .app-ill.mono{font-family:var(--font-ar)}

/* ---------- Gen 3D anchor spots (js/gen3d.js flies Gen between them; empty by design) ---------- */
.gen-spot{pointer-events:none;width:220px;height:220px}
.gs-wrap{position:relative}
.gs-hero{position:absolute;inset-inline-end:6%;bottom:8%}
.gs-problem{position:absolute;top:0;inset-inline-end:var(--gutter)}
.gs-solution{position:absolute;bottom:-150px;inset-inline-end:calc(var(--gutter) + 40px)}
.gs-how{position:absolute;top:clamp(120px,16vh,180px);inset-inline-end:8%}
.how-pin{position:relative}
.gs-flow{position:relative;margin-block:8px 18px}
.gs-gen{width:260px;height:260px;margin-block:0 12px}
.gs-trust{margin-top:12px}
@media (min-width:768px){.trust-gen,.invite-gen{display:none}}
@media (max-width:1180px){.gs-problem{display:none}}
@media (max-width:767px){.gen-spot{display:none}}
.gen-spot{width:260px;height:260px}
.gs-gen{width:340px;height:340px}
.gs-hero{bottom:13%}
.gs-solution{position:absolute;bottom:auto;top:50%;transform:translateY(-50%);inset-inline-end:-40px;width:230px;height:230px}
.gs-invite{width:240px;height:240px;margin-top:-20px}