/* ============================================================
   MTM — Market Trust Mastery · Design System
   Brushed steel + deep navy · gold accent · Rajdhani / Cairo
   ============================================================ */

:root{
  color-scheme:dark;
  /* surfaces */
  --bg:        #070B12;
  --bg2:       #0B1019;
  --bg3:       #0F1623;
  --panel:     #111A28;
  --panel2:    #16202F;
  --glass:     rgba(18,26,40,0.62);

  /* steel + accents */
  --steel:     #C6CFDC;
  --steel-mid: #8B96A9;
  --steel-dk:  #586478;
  --navy-glow: #1B2D49;
  --blue:      #6E97C9;
  --teal:      #4FD1C5;
  --gold:      #E6B24A;
  --gold-dk:   #B9852C;

  /* text */
  --text:      #DCE2EC;
  --muted:     #8089A2;
  --faint:     #5A6478;

  /* market */
  --green:     #2FE0A6;
  --red:       #FF6F6F;

  /* lines */
  --line:      rgba(160,176,202,0.12);
  --line-hi:   rgba(160,176,202,0.28);

  /* gradients */
  --steel-grad: linear-gradient(135deg,#F2F5FA 0%,#AEB9CC 34%,#D4DBE6 54%,#6E7A90 100%);
  --gold-grad:  linear-gradient(135deg,#F6D98A 0%,#E6B24A 45%,#B9852C 100%);
  --panel-grad: linear-gradient(180deg,#16202F 0%,#0F1724 100%);

  --shadow:    0 24px 60px rgba(0,0,0,0.5);
  --shadow-sm: 0 10px 28px rgba(0,0,0,0.4);
  --radius:    16px;
  --radius-lg: 22px;

  --f-ar:  'Cairo','Tajawal',system-ui,sans-serif;
  --f-lat: 'Rajdhani','Cairo',sans-serif;

  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

/* No global smooth scrolling: it turned every programmatic scroll — a section
   link, the back-to-top button, a reload onto a #hash — into an animation the
   reader could not interrupt. In-page jumps are animated in main.js instead,
   where a wheel or a touch cancels them. */
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--f-ar);
  color:var(--text);
  background:
    radial-gradient(1200px 620px at 50% -8%, #14223A 0%, transparent 62%),
    radial-gradient(900px 500px at 85% 18%, rgba(110,151,201,0.07) 0%, transparent 60%),
    var(--bg);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

::selection{ background:rgba(110,151,201,0.35); color:#fff; }

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }

.section{ position:relative; padding-block:96px; }
.section--tight{ padding-block:64px; }

/* Arabic is a cursive script: letter-spacing pulls the joined glyphs apart and
   reads as broken type. `.ar` hands any Arabic run back to the Arabic face with
   its tracking neutralised, for elements otherwise set in the Latin display
   font. Rules whose content is always Arabic simply carry no tracking at all. */
.ar{ font-family:var(--f-ar); letter-spacing:0; text-transform:none; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-ar); font-weight:800; font-size:.82rem;
  letter-spacing:0;
  color:var(--steel-mid); margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:26px; height:2px;
  background:var(--gold-grad); border-radius:2px;
}

.h-lg{
  font-family:var(--f-ar); font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.2;
}
.lead{
  color:var(--muted); font-size:clamp(1rem,1.6vw,1.12rem);
  max-width:60ch; line-height:1.85;
}
.steel-text{
  background:var(--steel-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-lat); font-weight:700; font-size:1rem; letter-spacing:.5px;
  padding:13px 26px; border-radius:12px; position:relative;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{
  color:#0A0E16;
  background:linear-gradient(135deg,#F2F5FA 0%,#C2CCDB 45%,#90A0B6 100%);
  box-shadow:0 10px 30px rgba(150,170,200,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
}
.btn--primary::after{
  content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,0.55) 47%,transparent 64%);
  opacity:0; transition:opacity .3s ease;
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(150,170,200,0.34); }
.btn--primary:hover::after{ opacity:.9; }

.btn--gold{
  color:#1A1206;
  background:var(--gold-grad);
  box-shadow:0 10px 30px rgba(230,178,74,0.28), inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(230,178,74,0.42); }

.btn--ghost{
  color:var(--text);
  border:1px solid var(--line-hi);
  background:rgba(255,255,255,0.02);
  backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:var(--steel-mid); background:rgba(255,255,255,0.05); transform:translateY(-2px); }

.btn--sm{ padding:9px 16px; font-size:.85rem; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,12,20,0.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line); box-shadow:0 8px 30px rgba(0,0,0,0.4);
}
.nav__in{
  max-width:var(--maxw); margin-inline:auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 1px var(--line-hi), 0 0 22px rgba(70,110,170,0.3);
}
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--f-lat); font-weight:700; font-size:1.25rem; letter-spacing:3px; }
.brand__tag{ font-family:var(--f-lat); font-weight:600; font-size:.56rem; letter-spacing:2.4px; color:var(--steel-dk); text-transform:uppercase; margin-top:3px; }

.nav__menu{ display:flex; align-items:center; gap:6px; }
.nav__menu a{
  font-family:var(--f-ar); font-weight:600; font-size:.92rem;
  color:var(--muted); padding:8px 13px; border-radius:9px;
  transition:color .2s ease, background .2s ease;
}
.nav__menu a:hover{ color:var(--text); background:rgba(255,255,255,0.04); }
.nav__cta{ margin-inline-start:6px; }
/* The generic nav-link rule is more specific than `.btn--primary`; keep the
   CTA's dark ink and steel fill instead of rendering muted text on silver. */
.nav__menu .nav__cta,
.nav__menu .nav__cta:hover{
  color:#0A0E16;
  background:linear-gradient(135deg,#F2F5FA 0%,#C2CCDB 45%,#90A0B6 100%);
}

.burger{
  display:none; width:42px; height:42px; border-radius:11px;
  border:1px solid var(--line-hi); position:relative;
}
.burger span{
  position:absolute; inset-inline:11px; height:2px; background:var(--steel);
  border-radius:2px; transition:.28s ease;
}
.burger span:nth-child(1){ top:14px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:26px; }
.burger.open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden; padding-block:96px 0;
}
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 540px at 50% 12%, #16263F 0%, transparent 58%),
    linear-gradient(180deg,#080C14 0%,#0A0F18 100%);
}
#heroFallback,#hero3d{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none;
}
#heroFallback{ z-index:1; opacity:1; transition:opacity .45s ease; }
#hero3d{ z-index:2; opacity:0; transition:opacity .45s ease; }
.hero.has-3d #heroFallback{ opacity:0; }
.hero.has-3d #hero3d{ opacity:1; }

/* ============================================================
   HERO — official logo dissolved into the starry background
   (sits BEHIND the transparent WebGL canvas: candles + stars
    render in front; screen-blend melts the dark square away;
    radial mask fades the edges → no box, no ring)
   ============================================================ */
.hero__emblem{
  position:absolute; z-index:0; top:46%; left:50%;
  width:clamp(360px,52vw,760px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:url(../assets/mtm-logo.webp) center/contain no-repeat;
  mix-blend-mode:screen;                 /* dark navy of the logo melts into the dark sky */
  -webkit-mask:radial-gradient(circle at 50% 46%, #000 30%, rgba(0,0,0,.5) 52%, transparent 70%);
          mask:radial-gradient(circle at 50% 46%, #000 30%, rgba(0,0,0,.5) 52%, transparent 70%);
  opacity:.55; pointer-events:none;
  animation:emblemBreath 9s ease-in-out infinite;
}
@keyframes emblemBreath{ 0%,100%{ opacity:.4; transform:translate(-50%,-50%) scale(.99); } 50%{ opacity:.62; transform:translate(-50%,-50%) scale(1.02); } }
@media (max-width:980px){
  .hero__emblem{ top:30%; width:clamp(300px,82vw,520px); opacity:.24; }
}
@media (prefers-reduced-motion: reduce){
  /* Keep a very slow luminance breath rather than making the product mark
     unexpectedly static. Spatial hero motion is reduced by hero3d.js. */
  .hero__emblem{ animation-duration:18s; }
}
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,11,18,0.30) 0%, transparent 22%, transparent 58%, rgba(7,11,18,0.82) 100%);
}
/* RTL page: text sits on the right — darken the right side for readability */
/* The emblem sits directly behind the headline and the paragraph. Without a
   firm scrim the body copy reads over the wolf's face and loses contrast. */
.hero__scrim{
  position:absolute; inset-block:0; right:0; width:min(72%,860px); z-index:1;
  pointer-events:none;
  background:linear-gradient(to left, rgba(7,11,18,0.94) 0%, rgba(7,11,18,0.78) 34%, rgba(7,11,18,0.4) 68%, transparent 100%);
}
.hero .wrap{ position:relative; z-index:2; }

.hero__content{ max-width:680px; padding-top:30px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-lat); font-weight:600; font-size:.74rem; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--steel-mid);
  padding:7px 14px; border:1px solid var(--line-hi); border-radius:100px;
  background:rgba(18,26,40,0.5); backdrop-filter:blur(6px); margin-bottom:22px;
}
.hero__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.hero h1{
  font-family:var(--f-ar); font-weight:900;
  font-size:clamp(2.3rem,6.2vw,4.2rem); line-height:1.1; letter-spacing:-1px;
  margin-bottom:18px;
}
.hero h1 .wm{
  /* Arabic line: the Arabic face, and no tracking to break the joins. */
  font-family:var(--f-ar); letter-spacing:0;
  background:var(--steel-grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero__sub{ color:var(--muted); font-size:clamp(1.02rem,1.8vw,1.22rem); line-height:1.9; max-width:56ch; margin-bottom:30px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.hero__practice{
  display:flex; align-items:flex-start; gap:10px; width:min(100%,650px);
  margin:0 0 28px; padding:12px 14px; border:1px solid rgba(79,209,197,.2);
  border-radius:12px; background:linear-gradient(135deg,rgba(79,209,197,.07),rgba(105,167,255,.035));
  color:#b7c6d7; font-size:.86rem; line-height:1.8;
}
.hero__practice span{
  display:grid; place-items:center; flex:0 0 auto; width:25px; height:25px;
  border-radius:8px; background:rgba(79,209,197,.12); color:var(--teal); font-weight:900;
}

/* ============================================================
   HERO MOTION SENTENCE — direct-on-canvas bilingual type
   ============================================================ */
.hero__layout{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center; }
.hero__manifesto{
  --sentence-gradient:linear-gradient(105deg,#f4f7fc 4%,#b9c8da 31%,#e6b24a 58%,#74dfcb 84%);
  --cursor-color:#e6b24a;
  /* min-height reserves room for the longest line so the hero never resizes
     mid-sentence. Sized to the current, much shorter set of statements. */
  position:relative; width:min(640px,100%); min-height:160px;
  justify-self:start; align-self:start; padding:0; margin:0;
  background:none; border:0; box-shadow:none; isolation:auto;
}
.hero__manifesto[data-tone="1"]{
  --sentence-gradient:linear-gradient(105deg,#f2f6fc 3%,#86add8 34%,#d5e0ed 59%,#e4bd63 88%);
  --cursor-color:#86add8;
}
.hero__manifesto[data-tone="2"]{
  --sentence-gradient:linear-gradient(105deg,#eff5f7 2%,#65d3bf 36%,#c8d4e2 63%,#d6a957 91%);
  --cursor-color:#65d3bf;
}
.hero__manifesto[data-tone="3"]{
  --sentence-gradient:linear-gradient(105deg,#edf3fa 2%,#c8a76d 34%,#8ab5d8 63%,#dce4ee 92%);
  --cursor-color:#c8a76d;
}
.motion-sentence{
  display:block; width:100%; margin:0;
  background:var(--sentence-gradient);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.48));
  text-wrap:balance;
  transition:opacity .42s cubic-bezier(.2,.7,.2,1),filter .42s ease,transform .42s cubic-bezier(.2,.7,.2,1);
}
.hero__manifesto.is-ar .motion-sentence{
  direction:rtl; text-align:left;
  font:800 clamp(1.75rem,2.8vw,2.5rem)/1.55 var(--f-ar);
  letter-spacing:-.035em;
}
.hero__manifesto.is-en .motion-sentence{
  direction:ltr; text-align:left;
  font:700 clamp(1.72rem,2.55vw,2.32rem)/1.35 var(--f-lat);
  letter-spacing:.025em;
}
.motion-sentence.is-typing::after{
  content:""; display:inline-block; width:2px; height:.82em;
  margin-inline-start:.14em; vertical-align:-.08em;
  background:var(--cursor-color); box-shadow:0 0 12px var(--cursor-color);
  animation:motionCursor .72s step-end infinite;
}
.motion-sentence.is-leaving{
  opacity:0; filter:blur(7px) drop-shadow(0 12px 28px rgba(0,0,0,.25));
  transform:translateY(-10px);
}
@keyframes motionSentenceArrive{
  from{ opacity:0; filter:blur(7px); transform:translate3d(-8px,8px,0); }
  to{ opacity:1; filter:drop-shadow(0 12px 28px rgba(0,0,0,.48)); transform:none; }
}
@keyframes motionCursor{ 0%,48%{ opacity:1; } 49%,100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .motion-sentence{ animation:none; }
  .motion-sentence.is-typing::after{ display:none; }
}
@media (min-width:1100px){
  .hero__layout{ grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:44px; }
  .hero__content{ max-width:none; }
  .hero__manifesto{ align-self:start; margin-top:0; }
}
@media (min-width:1280px){
  .hero__manifesto{ transform:translateX(calc((var(--maxw) - 100vw)/2 + 36px)); }
}
@media (max-width:1099px){
  .hero{ padding-block:96px 96px; }
  .hero__manifesto{ margin-top:42px; width:100%; max-width:720px; min-height:135px; }
}
@media (max-width:640px){
  .hero__manifesto{ min-height:135px; margin-top:32px; }
  .hero__manifesto.is-ar .motion-sentence{ font-size:clamp(1.35rem,6vw,1.68rem); line-height:1.6; }
  .hero__manifesto.is-en .motion-sentence{ font-size:clamp(1.3rem,5.6vw,1.62rem); line-height:1.45; }
}

/* ticker ribbon */
.ticker-wrap{
  position:absolute; inset-block-end:0; inset-inline:0; z-index:2;
  border-block-start:1px solid var(--line);
  background:rgba(8,12,20,0.7); backdrop-filter:blur(10px);
  overflow:hidden; height:46px; padding-inline-start:190px;
}
.ticker-label{position:absolute;z-index:2;inset-inline-start:0;top:0;display:grid;place-items:center;width:180px;height:100%;padding-inline:10px;border-inline-end:1px solid var(--line);background:rgba(8,12,20,.96);color:var(--gold);font-size:.65rem;font-weight:800;white-space:nowrap}
.ticker{
  display:flex; align-items:center; gap:34px; height:100%;
  white-space:nowrap; width:max-content;
  animation:tickerMove 38s linear infinite;
}
.ticker-wrap:hover .ticker{ animation-play-state:paused; }
.tk{ font-family:var(--f-lat); font-size:.92rem; color:var(--muted); display:inline-flex; gap:8px; align-items:center; }
.tk b{ color:var(--steel); font-weight:700; letter-spacing:1px; }
.tk i{ font-style:normal; font-weight:600; }
.tk i.up{ color:var(--green); } .tk i.dn{ color:var(--red); }
.tk em{ font-style:normal; font-size:.7rem; }
@keyframes tickerMove{ from{ transform:translateX(0);} to{ transform:translateX(50%);} }

/* 3D fallback */
.hero.no-3d .hero__bg{
  background:
    radial-gradient(800px 520px at 70% 18%, #1A2C49 0%, transparent 58%),
    radial-gradient(600px 400px at 20% 80%, rgba(110,151,201,0.10) 0%, transparent 60%),
    linear-gradient(180deg,#080C14,#0A0F18);
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%); border-block:1px solid var(--line); }
.pillars__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:10px; }
.pillar{
  background:var(--panel-grad); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 22px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.pillar:hover{ transform:translateY(-5px); border-color:var(--line-hi); box-shadow:var(--shadow-sm); }
.pillar__ico{
  width:52px; height:52px; border-radius:13px; display:grid; place-items:center;
  margin-bottom:16px; background:rgba(110,151,201,0.08);
  border:1px solid var(--line-hi); color:var(--steel);
}
.pillar__ico svg{ width:26px; height:26px; }
.pillar h3{ font-family:var(--f-lat); font-weight:700; font-size:1.15rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:8px; }
.pillar p{ color:var(--muted); font-size:.92rem; line-height:1.8; }

/* ============================================================
   LIVE CHART TERMINAL
   ============================================================ */
.terminal{
  border:1px solid var(--line-hi); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#0D1320 0%,#0A0F19 100%);
  box-shadow:var(--shadow); overflow:hidden; margin-top:30px;
}
.terminal__bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-block-end:1px solid var(--line);
  background:rgba(16,24,38,0.7);
}
.term__sym{ display:flex; align-items:center; gap:10px; }
.term__sym .s{ font-family:var(--f-lat); font-weight:700; font-size:1.15rem; letter-spacing:1.5px; }
.term__sym .badge{ font-family:var(--f-lat); font-size:.66rem; letter-spacing:1.5px; padding:3px 8px; border-radius:6px; background:rgba(47,224,166,0.12); color:var(--green); border:1px solid rgba(47,224,166,0.3); }
.term__tools{ display:flex; flex-wrap:wrap; gap:7px; margin-inline-start:auto; }
.tool{
  font-family:var(--f-lat); font-weight:600; font-size:.78rem; letter-spacing:.5px;
  padding:6px 12px; border-radius:8px; color:var(--muted);
  border:1px solid var(--line); background:rgba(255,255,255,0.015);
  transition:.2s ease;
}
.tool:hover{ color:var(--text); border-color:var(--line-hi); }
.tool.on{ color:#0A0E16; background:linear-gradient(135deg,#D4DBE6,#9CA8BC); border-color:transparent; font-weight:700; }
.term__canvas{ position:relative; height:440px; }
#demoChart{ width:100%; height:100%; display:block; }
.term__note{
  padding:12px 18px; border-block-start:1px solid var(--line);
  font-size:.78rem; color:var(--faint); display:flex; align-items:center; gap:8px;
  background:rgba(10,15,24,0.6);
}
.term__note .ld{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

/* ============================================================
   PRODUCTS
   ============================================================ */
.products{ background:var(--bg2); }
.prod__grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:14px; }
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel-grad); padding:30px 26px; overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px;
  background:var(--steel-grad); opacity:.7;
}
.card:hover{ transform:translateY(-7px); border-color:var(--line-hi); box-shadow:var(--shadow); }
.card.is-featured{ border-color:rgba(230,178,74,0.4); }
.card.is-featured::before{ background:var(--gold-grad); opacity:1; }
.card__tag{
  position:absolute; inset-block-start:16px; inset-inline-end:16px;
  font-family:var(--f-ar); font-weight:800; font-size:.66rem; letter-spacing:0;
  padding:4px 10px; border-radius:100px; color:#1A1206; background:var(--gold-grad);
}
.card__ico{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:rgba(110,151,201,0.1); border:1px solid var(--line-hi); color:var(--steel);
  margin-bottom:18px;
}
.card__ico svg{ width:28px; height:28px; }
.card__kicker{ font-family:var(--f-lat); font-weight:600; font-size:.72rem; letter-spacing:2px; color:var(--steel-mid); text-transform:uppercase; }
.card h3{ font-family:var(--f-ar); font-weight:800; font-size:1.3rem; margin:6px 0 12px; }
.card p{ color:var(--muted); font-size:.92rem; line-height:1.8; margin-bottom:18px; }
.card__feat{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; }
.card__feat li{ display:flex; gap:10px; align-items:flex-start; font-size:.88rem; color:var(--text); }
.card__feat li::before{ content:"✦"; color:var(--gold); font-size:.8rem; margin-top:2px; }
.card .btn{ width:100%; }

/* ============================================================
   METHODOLOGY (SMC)
   ============================================================ */
.method{ background:linear-gradient(180deg,var(--bg2),var(--bg)); border-block:1px solid var(--line); }
.method__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.method__steps{ display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.mstep{
  display:flex; gap:16px; padding:18px; border-radius:14px;
  border:1px solid var(--line); background:var(--glass);
  transition:border-color .3s ease, transform .3s ease;
}
.mstep:hover{ border-color:var(--line-hi); transform:translateX(-4px); }
.mstep__n{
  flex-shrink:0; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  font-family:var(--f-lat); font-weight:700; font-size:1.1rem;
  background:rgba(230,178,74,0.1); border:1px solid rgba(230,178,74,0.3); color:var(--gold);
}
.mstep h4{ font-family:var(--f-ar); font-weight:700; font-size:1.05rem; margin-bottom:4px; }
.mstep p{ color:var(--muted); font-size:.86rem; line-height:1.7; }

.method__visual{
  position:relative; border:1px solid var(--line-hi); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#0D1320,#0A0F19); padding:30px; box-shadow:var(--shadow);
  overflow:hidden;
}
/* خريطة المنهجية أعلى سحابة المصطلحات */
.mv__shot{
  display:block; position:relative; z-index:1;
  width:calc(100% + 60px); height:auto; margin:-30px -30px 22px;
  border-block-end:1px solid var(--line);
}
.mv__ring{
  position:absolute; inset-block-start:-40px; inset-inline-end:-40px;
  width:200px; height:200px; border-radius:50%;
  border:1px solid var(--line); opacity:.5;
}
.mv__tags{ display:flex; flex-wrap:wrap; gap:9px; }
.mv__tag{
  font-family:var(--f-lat); font-weight:600; font-size:.74rem; letter-spacing:1px;
  padding:7px 13px; border-radius:9px; color:var(--steel);
  background:rgba(255,255,255,0.025); border:1px solid var(--line-hi);
}
.mv__h{ font-family:var(--f-lat); font-weight:700; font-size:1.1rem; letter-spacing:2px; color:var(--steel-mid); margin-bottom:18px; text-transform:uppercase; }

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{ background:var(--bg); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.stat{
  text-align:center; padding:30px 18px; border-radius:var(--radius);
  border:1px solid var(--line); background:var(--panel-grad);
}
.stat b{ font-family:var(--f-lat); font-weight:700; font-size:clamp(2rem,4.5vw,2.9rem); display:block; line-height:1; }
.stat span{ color:var(--muted); font-size:.85rem; margin-top:8px; display:block; }
.stats__note{ text-align:center; color:var(--faint); font-size:.74rem; margin-top:20px; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing{ background:linear-gradient(180deg,var(--bg),var(--bg2)); border-block:1px solid var(--line); }
.price__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px; align-items:stretch; }
.plan{
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel-grad); padding:32px 26px; position:relative;
  transition:transform .3s ease, border-color .3s ease;
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-hi); }
.plan.is-pop{ border-color:rgba(230,178,74,0.45); box-shadow:0 20px 50px rgba(230,178,74,0.08); }
.plan.is-free{ border-color:rgba(84,217,151,.32); box-shadow:0 20px 50px rgba(84,217,151,.055); }
.plan.is-education{ border-color:rgba(110,151,201,.32); box-shadow:0 20px 50px rgba(110,151,201,.055); }
.plan__pop{
  position:absolute; inset-block-start:-13px; inset-inline-start:50%; transform:translateX(50%);
  font-family:var(--f-ar); font-weight:800; font-size:.7rem; letter-spacing:0;
  padding:5px 14px; border-radius:100px; color:#1A1206; background:var(--gold-grad);
}
.plan__pop--free{ background:linear-gradient(135deg,#5ee7a5,#2ebc83); }
.plan__name{ font-family:var(--f-lat); font-weight:700; font-size:1.05rem; letter-spacing:2px; text-transform:uppercase; color:var(--steel-mid); }
.plan__price{ font-family:var(--f-lat); font-weight:700; margin:14px 0 4px; }
.plan__price b{ font-size:2.6rem; color:var(--steel); }
.plan__price span{ font-family:var(--f-lat); font-size:.95rem; color:var(--faint); font-weight:600; }
.plan__price s{ color:var(--faint); text-decoration:none; font-size:1rem; }
.plan__desc{ color:var(--muted); font-size:.86rem; margin-bottom:20px; }
.plan__feat{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:24px; flex:1; }
.plan__feat li{ display:flex; gap:10px; font-size:.88rem; align-items:flex-start; }
.plan__feat li::before{ content:"✓"; color:var(--green); font-weight:700; }
.plan__feat li.off{ color:var(--faint); }
.trial-status{ min-height:20px; margin:9px 0 0; color:var(--muted); font-size:.72rem; line-height:1.5; text-align:center; }
.trial-status.error{ color:var(--red); }
.trial-status.ok{ color:var(--green); }

@media (max-width:1200px){
  .price__grid{ grid-template-columns:repeat(2,1fr); }
}
.plan__feat li.off::before{ content:"✕"; color:var(--faint); }

/* ============================================================
   CTA / CONTACT
   ============================================================ */
.cta{ background:var(--bg2); }
.cta__box{
  position:relative; border:1px solid var(--line-hi); border-radius:var(--radius-lg);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(110,151,201,0.12), transparent 70%),
    var(--panel-grad);
  padding:clamp(36px,6vw,64px); text-align:center; overflow:hidden;
  box-shadow:var(--shadow);
}
.cta__box::before, .cta__box::after{
  content:""; position:absolute; border-radius:50%; border:1px solid var(--line); opacity:.4;
}
.cta__box::before{ width:260px; height:260px; inset-block-start:-130px; inset-inline-start:-80px; }
.cta__box::after{ width:200px; height:200px; inset-block-end:-100px; inset-inline-end:-60px; }
.cta__box .h-lg{ position:relative; }
.cta__lead{ position:relative; max-width:54ch; margin:14px auto 28px; color:var(--muted); }
.cta__btns{ position:relative; display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-block-start:1px solid var(--line); background:var(--bg); padding-block:54px 30px; }
.footer__grid{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; margin-bottom:40px; }
.footer__brand .brand{ margin-bottom:14px; }
.footer__brand p{ color:var(--muted); font-size:.88rem; line-height:1.8; max-width:36ch; }
.footer__col h5{ font-family:var(--f-ar); font-weight:800; font-size:.9rem; letter-spacing:0; color:var(--steel-mid); margin-bottom:14px; }
.footer__col a{ display:block; color:var(--muted); font-size:.88rem; padding:5px 0; transition:color .2s ease; }
.footer__col a:hover{ color:var(--text); }
.footer__settings{min-height:44px;margin-top:7px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:700 .78rem var(--f-ar);cursor:pointer}.footer__settings:hover,.footer__settings:focus-visible{border-color:var(--teal);color:var(--text)}
.footer__bottom{
  border-block-start:1px solid var(--line); padding-top:24px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  color:var(--faint); font-size:.8rem;
}
.footer__disc{ max-width:60ch; line-height:1.7; }


/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
/* Reveals ride on `translate`, not `transform`, so the hover tilt below can own
   `transform` outright. Sharing one property meant the tilt's short transition
   replaced the reveal's and every card snapped in instead of drifting. */
[data-reveal]{ opacity:0; translate:0 26px; transition:opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in{ opacity:1; translate:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .pillars__grid{ grid-template-columns:repeat(2,1fr); }
  .prod__grid{ grid-template-columns:1fr; }
  .method__grid{ grid-template-columns:1fr; gap:36px; }
  .stats__grid{ grid-template-columns:repeat(2,1fr); }
  .price__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:760px){
  .section{ padding-block:70px; }
  .nav__menu{
    position:fixed; inset-block-start:70px; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:2px; padding:14px 18px;
    background:rgba(8,12,20,0.97); backdrop-filter:blur(16px);
    border-block-end:1px solid var(--line);
    /* visibility keeps the closed panel out of the tab order; without it the
       links stay focusable while parked off-screen. */
    transform:translateY(-130%); visibility:hidden;
    transition:transform .35s ease, visibility 0s linear .35s; z-index:99;
  }
  .nav__menu.open{ transform:translateY(0); visibility:visible; transition:transform .35s ease, visibility 0s; }
  .nav__menu a{ padding:13px; font-size:1rem; }
  .nav__cta{ margin:8px 0 0; }
  .burger{ display:block; }
  .hero__scrim{ width:100%; background:linear-gradient(180deg, rgba(7,11,18,0.52), rgba(7,11,18,0.8) 55%, rgba(7,11,18,0.9)); }
  .term__canvas{ height:340px; }
  .term__tools{ width:100%; margin-inline-start:0; }
  .footer__grid{ grid-template-columns:1fr; }
}
@media (max-width:430px){
  .stats__grid{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .hero__practice{font-size:.78rem;text-align:start}
}

/* ============================================================
   INTERACTIVE CHROME — progress bar · back-to-top · toasts · nav state
   ============================================================ */

/* page fade-in — pure CSS, reveals even if JS fails to load */
body{ animation:pageIn .55s ease both; }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }

/* scroll progress bar (top edge) */
.scroll-prog{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:200;
  height:3px; width:0; pointer-events:none;
  background:var(--gold-grad);
  box-shadow:0 0 12px rgba(230,178,74,0.55);
  transition:width .12s linear;
}

/* active nav link */
.nav__menu a.active{
  color:var(--text);
  background:rgba(110,151,201,0.10);
}
.nav__menu a.active::after{
  content:""; display:block; height:2px; margin-top:3px; border-radius:2px;
  background:var(--gold-grad);
}

/* back-to-top floating button */
.to-top{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:120;
  width:46px; height:46px; border-radius:13px;
  display:grid; place-items:center; color:var(--steel);
  border:1px solid var(--line-hi);
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-sm);
  opacity:0; transform:translateY(16px) scale(.9); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, border-color .25s ease, color .25s ease;
}
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ color:var(--gold); border-color:var(--gold); transform:translateY(-3px); }
.to-top svg{ width:20px; height:20px; }

/* ============================================================
   3D TILT — interactive depth (matches the brushed-steel logo)
   ============================================================ */
.tilt3d{
  position:relative;
  transform-style:preserve-3d; will-change:transform;
  /* `transition` is one shorthand, so this declaration replaces the reveal's.
     Carry the reveal timings along rather than silently dropping them. */
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease,
             opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1);
}
.tilt3d:hover{ box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px var(--line-hi); z-index:2; }
.tilt3d__glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .25s ease; mix-blend-mode:screen; z-index:3;
}

/* ---------- a11y ---------- */
.skip-link{
  position:fixed; inset-block-start:12px; inset-inline-start:12px; z-index:1000;
  padding:10px 16px; color:#08111d; background:var(--gold); border-radius:8px;
  font-weight:800; transform:translateY(-160%); transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .ticker{ animation:none; }
  body{ opacity:1; }
  .tilt3d{ transform:none !important; }
  .motion-sentence,.hero-insight{ animation:none !important; }
  .hero__emblem{ animation-duration:18s !important; animation-iteration-count:infinite !important; }
}