:root{
    --bg: #F6F4EF;
    --surface: #FFFFFF;
    --surface-sunken: #EFEBE2;
    --text: #1A1A1A;
    --text-muted: #5B5750;
    --border: #E2DED4;
    --accent: #5E50FF;
    --accent-deep: #4A3ED1;
    --accent-ink: #FFFFFF;
    --gold: #9A7B1E;
    --shadow: 0 20px 60px -30px rgba(26,26,26,0.35);
    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Inter', system-ui, sans-serif;
    /* liquid glass tokens */
    --glass-bg: rgba(255,255,255,0.5);
    --glass-bg-strong: rgba(255,255,255,0.68);
    --glass-border: rgba(255,255,255,0.75);
    --glass-highlight: rgba(255,255,255,0.9);
    --glass-shadow: 0 20px 50px -22px rgba(94,80,255,0.35), 0 2px 8px -2px rgba(26,26,26,0.12);
    --glass-blur: blur(22px) saturate(180%);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #0F0F0F;
      --surface: #17171B;
      --surface-sunken: #1D1D22;
      --text: #EDEDED;
      --text-muted: #A6A2B3;
      --border: #2B2A31;
      --accent: #8177FF;
      --accent-deep: #A199FF;
      --accent-ink: #0F0F0F;
      --gold: #C9A227;
      --shadow: 0 20px 60px -25px rgba(0,0,0,0.6);
      --glass-bg: rgba(255,255,255,0.055);
      --glass-bg-strong: rgba(255,255,255,0.09);
      --glass-border: rgba(255,255,255,0.16);
      --glass-highlight: rgba(255,255,255,0.35);
      --glass-shadow: 0 20px 50px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03) inset;
    }
  }
  :root[data-theme="dark"]{
    --bg: #0F0F0F;
    --surface: #17171B;
    --surface-sunken: #1D1D22;
    --text: #EDEDED;
    --text-muted: #A6A2B3;
    --border: #2B2A31;
    --accent: #8177FF;
    --accent-deep: #A199FF;
    --accent-ink: #0F0F0F;
    --gold: #C9A227;
    --shadow: 0 20px 60px -25px rgba(0,0,0,0.6);
    --glass-bg: rgba(255,255,255,0.055);
    --glass-bg-strong: rgba(255,255,255,0.09);
    --glass-border: rgba(255,255,255,0.16);
    --glass-highlight: rgba(255,255,255,0.35);
    --glass-shadow: 0 20px 50px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.03) inset;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:
      radial-gradient(50% 34% at 82% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
      radial-gradient(46% 30% at 10% 46%, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
      radial-gradient(50% 32% at 88% 82%, color-mix(in srgb, var(--accent) 12%, transparent), transparent),
      var(--bg);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--font-sans);
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
  }

  /* ---------- Arabic language mode ---------- */
  html[lang="ar"] body{
    font-family:'Cairo', var(--font-sans);
  }
  html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
  html[lang="ar"] .pullquote, html[lang="ar"] .versions-note, html[lang="ar"] .plate-title{
    font-family:'Cairo', var(--font-sans);
    letter-spacing:0; /* negative tracking breaks Arabic letter joins */
  }
  html[lang="ar"] .kicker{ letter-spacing:0; }
  html[dir="rtl"] .pullquote{ border-left:none; border-right:2px solid var(--accent); padding-left:0; padding-right:28px; }
  html[dir="rtl"] .badge-list li::before, html[dir="rtl"] .question-list li::before{ content:"—"; }
  html[dir="rtl"] .question-list li{ padding-left:0; padding-right:26px; }
  html[dir="rtl"] .question-list li::before{ left:auto; right:0; }
  html[dir="rtl"] .version-card li{ padding-right:18px; padding-left:0; }
  html[dir="rtl"] .version-card li::before{ left:auto; right:0; }
  html[dir="rtl"] .tier .flag{ left:auto; right:28px; }
  html[dir="rtl"] .hero-meta, html[dir="rtl"] .hero-ctas, html[dir="rtl"] .nav-links,
  html[dir="rtl"] .footer-links, html[dir="rtl"] .qc-row, html[dir="rtl"] .fl-row,
  html[dir="rtl"] .mid-cta, html[dir="rtl"] .badge-list li, html[dir="rtl"] .wordmark{
    direction:rtl;
  }

  /* ---------- Reduced transparency / high contrast ---------- */
  @media (prefers-reduced-transparency: reduce){
    :root{ --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-blur: none; }
  }
  @media (prefers-contrast: more){
    :root{ --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-blur: none; --glass-border: var(--text); }
  }

  img,svg{ max-width:100%; display:block; }
  a{ color:inherit; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
  .prose{ max-width:700px; }
  .center{ margin-left:auto; margin-right:auto; }

  h1,h2,h3,h4{
    font-family:var(--font-sans);
    font-weight:700;
    line-height:1.12;
    letter-spacing:-0.01em;
    margin:0;
    text-wrap:balance;
  }
  h1{ font-weight:800; }
  p{ margin:0; }

  .kicker{
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:600;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--accent);
  }
  .kicker.muted{ color:var(--text-muted); }

  ::selection{ background:var(--accent); color:var(--accent-ink); }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:4px;
  }

  /* ---------- Buttons (liquid glass) ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-sans);
    font-weight:600;
    font-size:15px;
    padding:15px 30px;
    border-radius:999px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    transition:transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    white-space:nowrap;
  }
  html[lang="ar"] .btn{ font-family:'Cairo', var(--font-sans); }
  .btn::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
    opacity:0.5;
    pointer-events:none;
    z-index:1;
  }
  .btn > *{ position:relative; z-index:2; }
  .btn:hover{ transform:translateY(-2px); }
  .btn:active{ transform:scale(0.96); transition-duration:0.08s; }
  .btn-primary{
    background:linear-gradient(160deg, var(--accent), var(--accent-deep));
    color:#fff;
    border-color:rgba(255,255,255,0.35);
    box-shadow:0 14px 30px -12px rgba(94,80,255,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  }
  .btn-primary:hover{ box-shadow:0 18px 36px -12px rgba(94,80,255,0.65), inset 0 1px 0 rgba(255,255,255,0.45); }
  .btn-ghost{
    background:var(--glass-bg);
    color:var(--text);
    border-color:var(--glass-border);
    box-shadow:var(--glass-shadow);
  }
  .btn-ghost:hover{ background:var(--glass-bg-strong); border-color:var(--accent); }
  .btn-block{ width:100%; justify-content:center; }

  /* ---------- Language switch ---------- */
  .lang-switch{
    /* sits inside the already-glass nav — stays a flat inset well, not a second blurred layer */
    display:flex; gap:2px; padding:3px;
    background:color-mix(in srgb, var(--text) 8%, transparent);
    border:1px solid var(--glass-border); border-radius:999px;
  }
  .lang-btn{
    border:none; background:transparent; cursor:pointer;
    font-family:var(--font-sans); font-size:12.5px; font-weight:700; letter-spacing:0.03em;
    padding:7px 13px; border-radius:999px; color:var(--text-muted);
    transition:background 0.15s ease, color 0.15s ease;
  }
  .lang-btn.active{ background:var(--accent); color:#fff; }

  /* ---------- Header ---------- */
  header.site{
    position:sticky; top:0; z-index:40;
    padding:14px 20px 0;
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
    padding:14px 22px;
    max-width:1120px; margin:0 auto;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:999px;
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-shadow);
  }
  .wordmark{ display:flex; align-items:center; }
  .brand-mark{ width:26px; height:auto; flex-shrink:0; color:var(--text); }
  .nav-links{
    display:flex; gap:28px;
    font-size:14px; font-weight:500;
    list-style:none; margin:0; padding:0;
  }
  .nav-links a{ text-decoration:none; color:var(--text-muted); }
  .nav-links a:hover{ color:var(--text); }
  .nav-cta{ display:flex; gap:10px; align-items:center; }
  @media (max-width:780px){ .nav-links{ display:none; } }

  /* ---------- Hero (deliberate single-look: vivid indigo, fixed light text) ---------- */
  .hero{
    margin:14px 20px 0;
    padding:60px 0 84px;
    position:relative;
    overflow:hidden;
    isolation:isolate;    /* children's blend modes composite against this element's own background */
    border-bottom:none;
    background:
      radial-gradient(80% 90% at 88% 30%, rgba(255,255,255,0.13), transparent 60%),
      radial-gradient(60% 70% at 8% 0%, rgba(5,2,25,0.65), transparent 60%),
      linear-gradient(115deg, #191036 0%, #2a1f66 38%, #4a3ed1 72%, #6a5cff 100%);
    color:#fff;
    border-radius:36px;
  }
  .hero::before, .hero::after{
    content:""; position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;
  }
  .hero::before{ width:360px; height:360px; background:rgba(255,255,255,0.28); top:-140px; right:-80px; }
  .hero::after{ width:320px; height:320px; background:rgba(20,10,80,0.45); bottom:-160px; left:-60px; }
  .hero .wrap{ position:relative; }
  /* ---------- Hero artwork: We Teach / You Deliver ---------- */
  .hero-scene{
    position:relative;
    perspective:1000px;
    direction:ltr;
  }
  .hero-art{
    display:block;
    width:100%; height:auto;
    border-radius:24px;
    box-shadow:0 30px 70px -24px rgba(8,4,35,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
    cursor:grab;
    will-change:transform;
    touch-action:pan-y;
    user-select:none; -webkit-user-select:none; -webkit-user-drag:none;
  }

  .hero-copy{ margin-top:48px; text-align:center; }
  .hero .kicker{ color:rgba(255,255,255,0.85); }
  .hero h1{
    font-size:clamp(2.1rem, 4vw, 3.1rem);
    margin-top:16px;
    letter-spacing:-0.02em;
    color:#fff;
    max-width:24ch; margin-inline:auto;
  }
  .hero .sub{
    margin:20px auto 0;
    font-size:18px;
    color:rgba(255,255,255,0.82);
    max-width:56ch;
  }
  .hero-ctas{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; justify-content:center; }
  .hero .btn-ghost{
    background:rgba(255,255,255,0.12);
    color:#fff;
    border-color:rgba(255,255,255,0.4);
  }
  .hero .btn-ghost:hover{ background:rgba(255,255,255,0.2); }
  .hero-meta{
    margin-top:26px;
    display:flex; gap:24px; flex-wrap:wrap; justify-content:center;
    font-size:13px; color:rgba(255,255,255,0.7);
  }
  .hero-meta b{ color:#fff; font-weight:600; }

  /* ---------- Section rhythm ---------- */
  section{ padding:88px 0; border-bottom:1px solid var(--border); }
  section:last-of-type{ border-bottom:none; }
  .section-head{ margin-bottom:44px; }
  .section-head h2{ font-size:clamp(1.7rem, 3vw, 2.3rem); margin-top:14px; }
  .section-head .sub{ margin-top:14px; color:var(--text-muted); max-width:60ch; font-size:16.5px; }

  /* ---------- Problem / pull quote ---------- */
  .pullquote{
    font-family:var(--font-sans);
    font-style:italic;
    font-weight:500;
    font-size:clamp(1.4rem, 2.6vw, 1.9rem);
    line-height:1.4;
    color:var(--text);
    border-left:2px solid var(--accent);
    padding-left:28px;
  }
  .problem-body{ margin-top:28px; color:var(--text-muted); font-size:17px; }
  .problem-body p + p{ margin-top:16px; }
  .problem-body strong{ color:var(--text); font-weight:600; }

  /* ---------- Gut-check / honest questions ---------- */
  .question-list{ list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .question-list li{
    font-size:17px; color:var(--text); line-height:1.5;
    padding-left:26px; position:relative;
  }
  .question-list li::before{ content:"—"; position:absolute; left:0; color:var(--accent); font-weight:600; }

  /* ---------- Two versions ---------- */
  .versions{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:760px){ .versions{ grid-template-columns:1fr; } }
  .version-card{
    border-radius:28px; padding:30px 28px;
    border:1px solid var(--glass-border);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-shadow);
  }
  .version-bad{ background:color-mix(in srgb, #b5443f 10%, var(--glass-bg)); }
  .version-good{ background:color-mix(in srgb, var(--accent) 14%, var(--glass-bg)); border-color:color-mix(in srgb, var(--accent) 40%, var(--glass-border)); }
  .version-label{
    font-size:11.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    margin-bottom:16px;
  }
  .version-bad .version-label{ color:#b5443f; }
  .version-good .version-label{ color:var(--accent); }
  .version-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
  .version-card li{ font-size:15px; color:var(--text-muted); padding-left:18px; position:relative; }
  .version-card li::before{ content:"–"; position:absolute; left:0; }
  .versions-note{
    margin-top:28px; text-align:center;
    font-family:var(--font-sans); font-style:italic; font-weight:500;
    font-size:1.15rem; color:var(--text);
  }

  /* ---------- Instructor ---------- */
  .instructor{
    display:grid; grid-template-columns:0.7fr 1.3fr; gap:48px; align-items:start;
  }
  @media (max-width:820px){ .instructor{ grid-template-columns:1fr; } }
  .badge-card{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:28px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .badge-card .name{ font-family:var(--font-sans); font-size:22px; font-weight:700; margin-top:6px; }
  .badge-card .role{ color:var(--text-muted); font-size:14px; margin-top:4px; }
  .badge-list{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .badge-list li{ font-size:13.5px; color:var(--text-muted); display:flex; gap:9px; }
  .badge-list li::before{ content:"—"; color:var(--accent); flex-shrink:0; }
  .instructor-copy p{ color:var(--text-muted); font-size:17px; }
  .instructor-copy p + p{ margin-top:18px; }
  .instructor-copy strong{ color:var(--text); }

  /* ---------- Freelance value ---------- */
  .freelance-checklist{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:8px 30px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .fl-row{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-bottom:1px dashed var(--border); }
  .fl-row:last-child{ border-bottom:none; }
  .fl-check{
    flex-shrink:0; width:26px; height:26px; border-radius:9px;
    background:var(--accent); color:#fff; font-size:13px; font-weight:700;
    display:flex; align-items:center; justify-content:center; margin-top:1px;
  }
  .fl-row p{ font-size:15px; color:var(--text-muted); }
  .fl-row p strong{ color:var(--text); font-weight:600; }

  /* ---------- Curriculum / process ---------- */
  .tracks{ position:relative; }
  .track{
    display:grid; grid-template-columns:100px 1fr; gap:24px;
    padding:26px 0;
    border-top:1px solid var(--border);
  }
  .track:last-child{ border-bottom:1px solid var(--border); }
  .track-num{
    font-family:var(--font-sans); font-style:italic; font-weight:500;
    font-size:15px; color:var(--accent); padding-top:3px;
  }
  .track h3{ font-size:1.25rem; }
  .track .status{
    display:inline-block; margin-top:8px; font-size:11.5px; font-weight:600;
    letter-spacing:0.06em; text-transform:uppercase;
    padding:5px 12px; border-radius:20px;
    background:var(--glass-bg); color:var(--text-muted); border:1px solid var(--glass-border);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .track .status.live{ color:var(--accent); border-color:var(--accent); }
  .track p.desc{ margin-top:12px; color:var(--text-muted); font-size:15.5px; max-width:64ch; }
  .module-list{
    list-style:none; margin:16px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .module-list li{
    font-size:12.5px; font-weight:500; color:var(--text-muted);
    background:var(--glass-bg); border:1px solid var(--glass-border);
    padding:6px 13px; border-radius:999px;
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  @media (max-width:600px){ .track{ grid-template-columns:1fr; gap:8px; } }

  /* ---------- Tiers ---------- */
  .tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
  @media (max-width:900px){ .tiers{ grid-template-columns:1fr; } }
  .tier{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:32px 28px; display:flex; flex-direction:column;
    position:relative;
    box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .tier.featured{ border-color:var(--accent); background:var(--glass-bg-strong); }
  .tier .flag{
    position:absolute; top:-13px; left:28px;
    background:var(--accent); color:var(--accent-ink);
    font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    padding:5px 12px; border-radius:20px;
  }
  .tier h3{ font-size:1.3rem; margin-top:6px; }
  .tier .price{ margin-top:16px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .tier .price .egp{ font-family:var(--font-sans); font-size:2.1rem; font-weight:700; }
  html[lang="ar"] .tier .price .egp{ font-family:'Cairo', sans-serif; }
  .tier .price .usd{ color:var(--text-muted); font-size:15px; }
  .tier .install{ margin-top:6px; font-size:12.5px; color:var(--text-muted); }
  .tier ul{ list-style:none; margin:24px 0 0; padding:0; flex:1; display:flex; flex-direction:column; gap:12px; }
  .tier li{ font-size:14.5px; display:flex; gap:10px; color:var(--text-muted); }
  .tier li::before{ content:"✓"; color:var(--accent); font-weight:700; flex-shrink:0; }
  .tier .btn{ margin-top:26px; }
  /* .tier is already a glass surface — its ghost button drops its own blur so glass never sits on glass */
  .tier .btn-ghost{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:color-mix(in srgb, var(--text) 6%, transparent);
  }
  .tier .note{ margin-top:14px; font-size:12px; color:var(--text-muted); font-style:italic; }

  /* ---------- Checklist / no-certificate ---------- */
  .breaker{
    display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  }
  @media (max-width:820px){ .breaker{ grid-template-columns:1fr; } }
  .qc-visual{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:30px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .qc-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--border); font-size:14px; gap:16px; }
  .qc-row:last-child{ border-bottom:none; }
  .qc-row .lbl{ color:var(--text-muted); }
  .qc-row .val{ font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
  html[dir="rtl"] .qc-row .val{ text-align:left; }

  /* ---------- FAQ ---------- */
  .faq{ max-width:820px; }
  .faq-item{ border-top:1px solid var(--border); }
  .faq-item:last-child{ border-bottom:1px solid var(--border); }
  .faq-item summary{
    cursor:pointer; list-style:none; padding:22px 0;
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    font-weight:600; font-size:16.5px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary .plus{ color:var(--accent); font-size:20px; flex-shrink:0; transition:transform 0.2s ease; }
  .faq-item[open] summary .plus{ transform:rotate(45deg); }
  .faq-item .a{ padding:0 0 24px; color:var(--text-muted); font-size:15.5px; max-width:68ch; }

  /* ---------- Final CTA ---------- */
  .final-cta{
    text-align:center; padding:100px 0;
  }
  .final-cta h2{ font-size:clamp(2rem, 4vw, 2.8rem); max-width:16ch; margin:0 auto; }
  .final-cta .sub{ margin:20px auto 0; max-width:56ch; color:var(--text-muted); font-size:17.5px; }
  .final-cta .hero-ctas{ justify-content:center; margin-top:32px; }

  /* ---------- Mid-page CTA ---------- */
  .mid-cta{
    margin-top:40px;
    padding-top:32px;
    border-top:1px dashed var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  }
  .mid-cta p{ font-size:14.5px; color:var(--text-muted); max-width:44ch; }
  .mid-cta p strong{ color:var(--text); font-weight:600; }

  /* ---------- ELI5 steps ---------- */
  .eli5-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:760px){ .eli5-grid{ grid-template-columns:1fr; } }
  .eli5-card{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:30px 28px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .eli5-num{
    font-family:var(--font-sans); font-style:italic; font-weight:500;
    font-size:15px; color:var(--accent);
  }
  .eli5-card h3{ font-size:1.3rem; margin-top:10px; }
  .eli5-card p{ margin-top:10px; color:var(--text-muted); font-size:15px; }
  .eli5-close{
    margin-top:30px; text-align:center;
    font-family:var(--font-sans); font-style:italic; font-weight:500;
    font-size:1.15rem; color:var(--text);
  }
  html[lang="ar"] .eli5-close{ font-family:'Cairo', var(--font-sans); }

  /* ---------- Stage bar graph ---------- */
  .stage-bar{ display:flex; border-radius:999px; overflow:hidden; height:14px; }
  .stage-bar span{ display:block; height:100%; }
  .stage-bar .s1{ background:var(--accent); }
  .stage-bar .s2{ background:color-mix(in srgb, var(--accent) 60%, var(--bg)); }
  .stage-bar .s3{ background:color-mix(in srgb, var(--accent) 30%, var(--bg)); }
  .stage-key{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin-top:12px; font-size:12.5px; color:var(--text-muted); }
  .stage-key i{ display:inline-block; width:10px; height:10px; border-radius:3px; margin-inline-end:6px; }

  /* ---------- Module carousel (drag physics) ---------- */
  .carousel{
    margin-top:26px; overflow:hidden; cursor:grab;
    touch-action:pan-y; direction:ltr; user-select:none; -webkit-user-select:none;
  }
  .carousel.dragging{ cursor:grabbing; }
  .carousel:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:12px; }
  .car-track{ display:flex; gap:14px; will-change:transform; }
  .mod-card{
    flex:0 0 auto; width:225px;
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:24px;
    padding:22px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .mod-stage{ font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
  .mod-name{ font-family:var(--font-sans); font-weight:700; font-size:1.05rem; margin-top:8px; line-height:1.25; }
  .mod-idx{ margin-top:14px; font-size:11.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
  .drag-hint{ margin-top:16px; font-size:12.5px; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
  .drag-hint .arrow{ display:inline-block; animation:nudge 1.6s ease-in-out infinite; }
  @keyframes nudge{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }
  @media (prefers-reduced-motion: reduce){ .drag-hint .arrow{ animation:none; } }

  /* ---------- Income chart ---------- */
  .chart-card{
    margin-top:24px;
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:24px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .chart-card svg{ width:100%; height:auto; }
  .chart-key{ display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:12.5px; color:var(--text-muted); }
  .chart-key i{ display:inline-block; width:16px; height:3px; border-radius:2px; margin-inline-end:6px; vertical-align:middle; }
  .chart-note{ margin-top:10px; font-size:11.5px; color:var(--text-muted); font-style:italic; }

  /* ---------- Deseo accent ---------- */
  @font-face{
    font-family:'Deseo';
    src:url(assets/fonts/deseo-bold.woff2) format('woff2');
    font-weight:400;
    font-display:swap;
  }
  .accent-script{
    font-family:'Deseo', cursive;
    font-weight:400;
    color:var(--accent);
    font-size:1.2em;
    line-height:1;
    letter-spacing:0;
    padding-inline:0.05em;
  }
  .hero .accent-script{ color:#b9aeff; }

  /* ---------- Interactive glass cards ---------- */
  .glass-int{ position:relative; transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
  .glass-int::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity 0.35s ease;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,40%), rgba(255,255,255,0.16), transparent 65%);
  }
  .glass-int:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, var(--glass-border)); }
  .glass-int:hover::after{ opacity:1; }
  @media (prefers-reduced-motion: reduce){ .glass-int:hover{ transform:none; } }

  /* ---------- Interactive stage bar ---------- */
  .stage-bar button{
    border:none; padding:0; margin:0; display:block; height:100%; cursor:pointer;
    transition:filter 0.2s ease;
  }
  .stage-bar button:hover{ filter:brightness(1.25); }
  .stage-bar button:active{ filter:brightness(1.5); transform:scaleY(0.8); }
  .stage-bar button.s1{ background:var(--accent); }
  .stage-bar button.s2{ background:color-mix(in srgb, var(--accent) 60%, var(--bg)); }
  .stage-bar button.s3{ background:color-mix(in srgb, var(--accent) 30%, var(--bg)); }

  /* ---------- QC mock (profile / leaderboard preview) ---------- */
  .qc-mock{
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:24px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
    font-variant-numeric:tabular-nums;
  }
  .qc-tabs{
    display:flex; gap:4px; padding:4px; margin-bottom:18px;
    background:color-mix(in srgb, var(--text) 7%, transparent);
    border-radius:999px;
  }
  .qc-tab{
    flex:1; border:none; background:transparent; cursor:pointer;
    font-family:inherit; font-size:13px; font-weight:600;
    padding:8px 12px; border-radius:999px; color:var(--text-muted);
    transition:background 0.2s ease, color 0.2s ease;
  }
  .qc-tab:active{ transform:scale(0.97); }
  .qc-tab.active{ background:var(--accent); color:#fff; }
  .qc-panel{ display:none; }
  .qc-panel.active{ display:block; }
  .row-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .mock-name{ font-weight:700; font-size:14px; }
  .mock-sub{ font-size:11.5px; color:var(--text-muted); }
  .preview-pill{
    margin-inline-start:auto; font-size:10px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:3px 9px;
  }
  .avatar{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    background:var(--accent); color:#fff; font-weight:700; font-size:14px;
    display:flex; align-items:center; justify-content:center;
  }
  .mock-label{ font-size:12px; color:var(--text-muted); margin-bottom:7px; display:flex; justify-content:space-between; }
  .mock-label b{ color:var(--text); }
  .progress-track{
    height:10px; border-radius:999px; overflow:hidden;
    background:color-mix(in srgb, var(--text) 10%, transparent);
  }
  .progress-fill{
    height:100%; border-radius:999px; width:0;
    background:linear-gradient(90deg, var(--accent), var(--accent-deep));
    transition:width 1s cubic-bezier(0.22,1,0.36,1);
  }
  .qc-mock.filled .progress-fill{ width:var(--w); }
  .skills{ margin-top:16px; }
  .skill{ display:flex; align-items:center; gap:10px; margin-top:9px; font-size:12.5px; }
  .skill .lbl{ width:86px; color:var(--text-muted); flex-shrink:0; }
  .skill .track{
    flex:1; height:8px; border-radius:999px; overflow:hidden; display:block;
    background:color-mix(in srgb, var(--text) 10%, transparent);
  }
  .skill .fill{
    display:block; height:100%; border-radius:999px; width:0;
    background:var(--accent);
    transition:width 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  .qc-mock.filled .skill .fill{ width:var(--w); }
  .skill .num{ width:26px; text-align:end; font-weight:600; }
  .spark{ margin-top:18px; }
  .spark svg{ width:100%; height:auto; }
  .spark polyline{ stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset 1.2s ease 0.35s; }
  .qc-mock.filled .spark polyline{ stroke-dashoffset:0; }
  .cert-row{
    margin-top:16px; padding-top:14px; border-top:1px dashed var(--border);
    display:flex; gap:9px; align-items:center;
    font-size:12.5px; color:var(--text-muted);
  }
  .lb-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:13px; }
  .lb-row:last-child{ border-bottom:none; }
  .lb-rank{ width:16px; font-weight:700; color:var(--text-muted); }
  .lb-row.top .lb-rank{ color:var(--gold); }
  .lb-av{ width:26px; height:26px; font-size:11px; background:color-mix(in srgb, var(--accent) 70%, var(--bg)); }
  .lb-row.top .lb-av{ background:var(--accent); }
  .lb-name{ width:84px; flex-shrink:0; }
  .lb-track{
    flex:1; height:7px; border-radius:999px; overflow:hidden;
    background:color-mix(in srgb, var(--text) 8%, transparent);
  }
  .lb-fill{
    display:block; height:100%; border-radius:999px; width:0;
    background:var(--accent);
    transition:width 0.9s cubic-bezier(0.22,1,0.36,1);
  }
  .qc-mock.filled .lb-fill{ width:var(--w); }
  .lb-score{ width:26px; text-align:end; font-weight:600; }
  .lb-row.you{ color:var(--text-muted); }
  .you-av{ background:transparent; border:1.5px dashed var(--accent); color:var(--accent); }

  /* ---------- Eye candy ---------- */
  .reveal{ opacity:0; transform:translateY(24px); transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .hero::before{ animation:drift-a 16s ease-in-out infinite; }
  .hero::after{ animation:drift-b 20s ease-in-out infinite; }
  @keyframes drift-a{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-40px,26px); } }
  @keyframes drift-b{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(34px,-22px); } }
  .btn::after{
    content:""; position:absolute; top:-4px; bottom:-4px; left:-70%; width:45%;
    background:linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-20deg); pointer-events:none; z-index:1;
    transition:left 0.55s ease;
  }
  .btn:hover::after{ left:125%; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    .hero::before, .hero::after{ animation:none; }
    .btn::after{ display:none; }
  }

  /* ---------- Reserve form ---------- */
  .reserve-shell{
    max-width:640px; margin:0 auto;
    background:var(--glass-bg); border:1px solid var(--glass-border); border-radius:28px;
    padding:36px 34px; box-shadow:var(--glass-shadow);
    backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  }
  .reserve-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
  .tier-chip{
    display:inline-flex; align-items:center; gap:8px;
    background:var(--accent); color:#fff; font-weight:700; font-size:13px;
    padding:8px 16px; border-radius:999px;
  }
  .tier-chip button{
    background:none; border:none; color:rgba(255,255,255,0.75); cursor:pointer;
    font-size:15px; line-height:1; padding:0; font-family:inherit;
  }
  .field{ margin-bottom:16px; }
  .field label{
    display:block; font-size:12.5px; font-weight:600; color:var(--text-muted);
    margin-bottom:6px;
  }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="date"], .field select{
    width:100%; font-family:inherit; font-size:14.5px; color:var(--text);
    background:var(--glass-bg-strong); border:1px solid var(--glass-border);
    border-radius:12px; padding:11px 14px;
    transition:border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .field input:focus, .field select:focus{
    outline:none; border-color:var(--accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .choice-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .choice-pill{ position:relative; }
  .choice-pill input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
  .choice-pill span{
    display:inline-block; font-size:13px; padding:8px 15px; border-radius:999px;
    border:1px solid var(--glass-border); background:var(--glass-bg-strong); color:var(--text-muted);
    transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .choice-pill input:checked + span{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .choice-pill input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px; }
  .consent-row{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--text-muted); margin-top:4px; }
  .consent-row input{ margin-top:3px; flex-shrink:0; }
  .form-note{ font-size:11.5px; color:var(--text-muted); margin-top:14px; text-align:center; }
  .reserve-success{ text-align:center; padding:14px 0; }
  .reserve-success .mark{
    width:52px; height:52px; border-radius:50%; background:var(--accent); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 16px;
  }
  .reserve-error{ font-size:12.5px; color:#e08a85; margin-top:10px; text-align:center; }
  .reserve-error a{ color:var(--accent); text-decoration:underline; }

  /* ---------- Footer ---------- */
  footer{
    padding:48px 0 60px;
    font-size:12.5px; color:var(--text-muted);
  }
  .footer-top{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
  .footer-links{ display:flex; gap:20px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
  .footer-links a{ text-decoration:none; }
  .footer-links a:hover{ color:var(--text); }
  .legal{ margin-top:28px; border-top:1px solid var(--border); padding-top:22px; line-height:1.7; }