/* ============================================================
     WESHAJ · وشاج — FLAMBOYANT professional profile mockup
     Brand v2.1 · navy #0D1B2A · blue #1A6FBF · green #2A9D6E · orange #F97316
     ============================================================ */
  :root{
    --bg:#05090F; --bg-2:#0A1420; --navy:#0D1B2A;
    --blue:#1A6FBF; --green:#2A9D6E; --orange:#F97316;
    --fg:#EEF5FE; --muted:rgba(238,245,254,.84); --dim:rgba(238,245,254,.58);
    --faint:rgba(238,245,254,.1); --hair:rgba(238,245,254,.07);
    --card:rgba(255,255,255,.028); --card2:#0b1522;
    --grad:linear-gradient(115deg,var(--blue),var(--green) 52%,var(--orange) 116%);
    --grad-border:linear-gradient(135deg,rgba(26,111,191,.85),rgba(42,157,110,.5) 52%,rgba(249,115,22,.8));
    --glow-blue:0 0 60px -12px rgba(26,111,191,.6);
    --maxw:1200px;
  }
  *{box-sizing:border-box;min-width:0}
  html{scroll-behavior:smooth}
  html,body{overflow-x:clip}
  body{margin:0;background:var(--bg);color:var(--fg);
    font-family:"Tajawal","Hanken Grotesk",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6}
  body[data-lang="en"]{font-family:"Hanken Grotesk","Tajawal",system-ui,sans-serif}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{margin:0;line-height:1.22;letter-spacing:0}
  body[data-lang="en"] h1,body[data-lang="en"] h2,body[data-lang="en"] h3{letter-spacing:-.02em;line-height:1.08}
  p{margin:0}
  .num{direction:ltr;unicode-bidi:isolate;font-family:"Hanken Grotesk",sans-serif}
  .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .gradanim{background:linear-gradient(100deg,#3d94e6,#2A9D6E,#F97316,#3d94e6);background-size:300% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:gshift 9s linear infinite}
  @keyframes gshift{to{background-position:300% 0}}
  .ico{width:26px;height:26px;fill:none;stroke:url(#ig);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}

  /* gradient-bordered glass */
  .glass{position:relative;border-radius:22px;
    background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;
    border:1.5px solid transparent;backdrop-filter:blur(8px);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,filter .3s}
  .glass:hover{transform:translateY(-6px);box-shadow:0 30px 70px -30px rgba(0,0,0,.8), var(--glow-blue);filter:saturate(1.15)}

  /* ---------- animated mesh background ---------- */
  .bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
    radial-gradient(60% 50% at 78% 8%, rgba(26,111,191,.42), transparent 60%),
    radial-gradient(55% 55% at 12% 42%, rgba(42,157,110,.3), transparent 62%),
    radial-gradient(50% 45% at 62% 92%, rgba(249,115,22,.24), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #0b1726, var(--bg) 62%)}
  .orb{position:fixed;z-index:-1;border-radius:50%;filter:blur(90px);opacity:.5;will-change:transform;pointer-events:none}
  .orb--1{width:46vmax;height:46vmax;top:-16vmax;inset-inline-end:-8vmax;
    background:radial-gradient(circle,var(--blue),transparent 66%);animation:float1 26s ease-in-out infinite}
  .orb--2{width:40vmax;height:40vmax;top:40%;inset-inline-start:-14vmax;opacity:.4;
    background:radial-gradient(circle,var(--green),transparent 66%);animation:float2 30s ease-in-out infinite}
  .orb--3{width:32vmax;height:32vmax;bottom:-14vmax;inset-inline-end:18%;opacity:.32;
    background:radial-gradient(circle,var(--orange),transparent 64%);animation:float3 34s ease-in-out infinite}
  @keyframes float1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vmax,5vmax,0) scale(1.12)}}
  @keyframes float2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6vmax,-5vmax,0) scale(1.14)}}
  @keyframes float3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5vmax,-6vmax,0) scale(.9)}}
  .grain{position:fixed;inset:0;z-index:-1;opacity:.04;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* ---------- preview ribbon ---------- */
  .preview{position:fixed;bottom:16px;inset-inline-start:16px;z-index:40;display:inline-flex;align-items:center;gap:8px;
    padding:8px 15px;border-radius:999px;font-size:12px;font-weight:700;color:var(--fg);
    background:rgba(10,20,32,.82);border:1px solid var(--faint);backdrop-filter:blur(12px)}
  .preview__dot{width:8px;height:8px;border-radius:50%;background:var(--orange);
    box-shadow:0 0 0 4px rgba(249,115,22,.2);animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 28px;
    border-radius:14px;font:inherit;font-weight:800;font-size:15.5px;cursor:pointer;border:1px solid transparent;
    transition:transform .2s,filter .2s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
  .btn--primary{color:#fff;background-image:var(--grad);box-shadow:0 14px 40px -10px rgba(26,111,191,.6), inset 0 1px 0 rgba(255,255,255,.25)}
  .btn--primary:hover{filter:brightness(1.1) saturate(1.1);transform:translateY(-3px);box-shadow:0 20px 50px -10px rgba(26,111,191,.7)}
  .btn--ghost{color:var(--fg);border-color:var(--faint);background:rgba(255,255,255,.04)}
  .btn--ghost:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.08);transform:translateY(-3px)}
  a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:12px}

  /* ---------- nav ---------- */
  .nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:20px;
    padding:16px max(24px,calc((100% - var(--maxw))/2));transition:padding .25s,background .25s}
  .nav.scrolled{background:rgba(6,11,18,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--hair);
    padding-top:11px;padding-bottom:11px}
  .brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;font-size:20px}
  .brand__logo{width:40px;height:40px;filter:drop-shadow(0 6px 20px rgba(26,111,191,.55))}
  .nav__links{display:flex;gap:2px;margin-inline:auto}
  .nav__links a{padding:8px 13px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--muted);transition:.2s}
  .nav__links a:hover{color:var(--fg);background:rgba(255,255,255,.06)}
  .nav__actions{display:flex;align-items:center;gap:10px}
  .lang-toggle{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border-radius:999px;
    border:1px solid var(--faint);background:rgba(255,255,255,.05);color:var(--fg);font:inherit;font-weight:800;
    font-size:13px;cursor:pointer;transition:.2s}
  .lang-toggle:hover{border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.1)}
  .lang-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;opacity:.85}

  /* ---------- section frame ---------- */
  .section{max-width:var(--maxw);margin:0 auto;padding:96px 24px;position:relative}
  .head{max-width:760px;margin:0 auto 56px;text-align:center;position:relative}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;padding:8px 18px;border-radius:999px;
    font-size:12.5px;font-weight:800;letter-spacing:.03em;color:var(--fg);
    background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;border:1.4px solid transparent}
  .eyebrow .en{font-family:"Hanken Grotesk",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-size:10.5px}
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
  .head h2{font-size:clamp(30px,5vw,52px);font-weight:900;letter-spacing:-.01em}
  body[data-lang="ar"] .head h2{letter-spacing:0}
  .head .lead{margin-top:20px;font-size:clamp(16px,2vw,19px);color:var(--muted)}
  .ghost{position:absolute;inset-inline:0;top:-46px;text-align:center;z-index:-1;pointer-events:none;
    font-family:"Hanken Grotesk",sans-serif;font-weight:900;font-size:clamp(90px,17vw,190px);line-height:1;
    color:transparent;-webkit-text-stroke:1.5px rgba(238,245,254,.045);letter-spacing:.02em}
  .rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto;max-width:340px;color:var(--green)}
  .rule::before,.rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(42,157,110,.6),transparent)}

  /* ---------- hero ---------- */
  .hero{max-width:var(--maxw);margin:0 auto;padding:56px 24px 30px;
    display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}
  .hero__tag{display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:800;
    color:var(--fg);background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;border:1.4px solid transparent}
  .hero__tag .dot{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px 2px rgba(42,157,110,.7)}
  .hero__title{margin:24px 0 0;font-size:clamp(40px,6.6vw,76px);font-weight:900;line-height:1.08;letter-spacing:-.02em}
  body[data-lang="ar"] .hero__title{line-height:1.16;letter-spacing:0}
  .hero__title .l1{display:block;color:var(--fg)}
  .hero__title .l2{display:block}
  .hero__sub{margin:26px 0 0;max-width:50ch;font-size:clamp(16px,1.9vw,20px);color:var(--muted)}
  .hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
  .hero__media{position:relative;aspect-ratio:4/5;border-radius:30px;padding:12px;
    background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;border:1.6px solid transparent;
    box-shadow:0 50px 110px -34px rgba(0,0,0,.85), var(--glow-blue)}
  .hero__media img{width:100%;height:100%;object-fit:cover;border-radius:20px}
  .hero__media::after{content:"";position:absolute;inset:12px;border-radius:20px;
    background:linear-gradient(180deg,transparent 44%,rgba(5,9,15,.5)),radial-gradient(70% 55% at 82% 8%,rgba(26,111,191,.36),transparent 60%)}
  .hero__float{position:absolute;inset-block-end:24px;inset-inline-start:-18px;z-index:3;display:flex;gap:10px;
    padding:14px 16px;border-radius:18px;background:rgba(8,15,24,.86);border:1px solid var(--faint);backdrop-filter:blur(12px);
    box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
  .hero__float .cell{text-align:center;padding:0 10px}
  .hero__float .cell + .cell{border-inline-start:1px solid var(--hair)}
  .hero__float .n{font-size:26px;font-weight:900;line-height:1}
  .hero__float small{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}

  /* marquee */
  .marquee{margin:34px 0 0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .marquee__track{display:inline-flex;align-items:center;gap:14px;white-space:nowrap;animation:scroll 26s linear infinite}
  .marquee span{display:inline-flex;align-items:center;gap:14px;font-weight:800;font-size:15px;color:var(--fg)}
  .marquee b{color:var(--green)}
  .marquee i{color:var(--dim);font-style:normal}
  @keyframes scroll{to{transform:translateX(-50%)}}

  /* ---------- stats bento ---------- */
  .stats{max-width:var(--maxw);margin:0 auto;padding:24px 24px}
  .stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .stat{padding:30px 24px;text-align:center}
  .stat .n{font-size:clamp(42px,5.4vw,60px);font-weight:900;line-height:1}
  .stat h3{margin-top:12px;font-size:16px;font-weight:800}
  .stat small{display:block;margin-top:4px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-family:"Hanken Grotesk",sans-serif}

  /* ---------- about ---------- */
  .about{max-width:900px;margin:0 auto;text-align:center;position:relative}
  .about h2{font-size:clamp(28px,4.2vw,44px);font-weight:900;line-height:1.28}
  .about p{margin-top:24px;font-size:clamp(16px,2vw,19px);color:var(--muted)}
  .about .pill{margin-top:30px;display:inline-block;padding:14px 26px;border-radius:16px;font-size:15.5px;font-weight:700;color:var(--fg);
    background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;border:1.4px solid transparent}

  /* ---------- house ---------- */
  .house{display:grid;grid-template-columns:1fr 1fr;gap:22px}
  .house__card{padding:38px 34px;overflow:hidden}
  .house__card .ghosttxt{font-family:"Hanken Grotesk",sans-serif;font-weight:900;font-size:64px;line-height:1;
    color:transparent;-webkit-text-stroke:1.4px rgba(238,245,254,.08);letter-spacing:.02em}
  .house__card h3{margin:6px 0 16px;font-size:26px;font-weight:900}
  .house__card p{font-size:16.5px;color:var(--muted);line-height:1.8}

  /* ---------- bento cards (pillars/tools) ---------- */
  .bento{display:grid;gap:18px}
  .bento--3{grid-template-columns:repeat(3,1fr)}
  .bento--6{grid-template-columns:repeat(3,1fr)}
  .bcard{padding:30px 28px}
  .bcard__ico{display:inline-grid;place-items:center;width:60px;height:60px;border-radius:17px;margin-bottom:20px;
    background:radial-gradient(120% 120% at 30% 20%, rgba(26,111,191,.22), rgba(42,157,110,.1) 60%, transparent),rgba(255,255,255,.03);
    border:1px solid var(--faint)}
  .bcard__ico .ico{width:30px;height:30px}
  .bcard h3{font-size:21px;font-weight:900;margin-bottom:8px}
  .bcard>p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
  .bcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .bcard li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--fg)}
  .bcard li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--grad)}
  .tcard{padding:26px}
  .tcard__ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:16px;
    background:rgba(255,255,255,.03);border:1px solid var(--faint)}
  .tcard__ico .ico{width:27px;height:27px}
  .tcard h3{font-size:18px;font-weight:800;margin-bottom:7px}
  .tcard p{font-size:14px;color:var(--muted)}

  /* ---------- values ---------- */
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .vcard{padding:30px 28px;position:relative;overflow:hidden}
  .vcard__gh{position:absolute;inset-block-start:-14px;inset-inline-end:2px;font-family:"Hanken Grotesk",sans-serif;
    font-weight:900;font-size:96px;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(238,245,254,.06)}
  .vcard__ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:16px;
    background:rgba(255,255,255,.03);border:1px solid var(--faint)}
  .vcard__ico .ico{width:27px;height:27px}
  .vcard h3{font-size:18.5px;font-weight:900;margin-bottom:8px}
  .vcard p{font-size:14px;color:var(--muted);line-height:1.7}

  /* ---------- journey (horizontal glowing rail) ---------- */
  .journey{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
  .journey::before{content:"";position:absolute;top:34px;inset-inline:6%;height:2px;
    background:linear-gradient(90deg,var(--blue),var(--green),var(--orange));opacity:.5;z-index:0}
  .jcard{position:relative;z-index:1;text-align:center;padding:0 6px}
  .jnode{width:52px;height:52px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
    font-family:"Hanken Grotesk",sans-serif;font-weight:900;font-size:18px;color:#fff;background-image:var(--grad);
    box-shadow:0 0 0 6px rgba(5,9,15,.9), 0 10px 30px -6px rgba(26,111,191,.6)}
  .jcard h3{font-size:18px;font-weight:900;margin:0 0 3px}
  .jcard .en{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .jcard p{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.6}
  .jcard .out{margin-top:12px;font-size:12.5px;font-weight:700;color:var(--green);display:inline-flex;gap:6px;align-items:flex-start;text-align:start}
  .jcard .out svg{flex:none;width:14px;height:14px;margin-top:2px;fill:none;stroke:currentColor;stroke-width:2}
  .journey__loop{margin:26px auto 0;text-align:center;color:var(--muted);font-size:14px}
  .journey__loop b{color:var(--fg);font-weight:800}

  /* ---------- student experience ---------- */
  .exp{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
  .exp h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;line-height:1.28}
  .exp>div>p{margin-top:18px;font-size:16px;color:var(--muted)}
  .exp__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .exp__chip{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;border-radius:999px;font-size:13.5px;font-weight:700;
    color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--faint)}
  .exp__chip .ico{width:16px;height:16px}
  .exp__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
  .estep{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:16px;
    background:linear-gradient(var(--card2),var(--card2)) padding-box, var(--grad-border) border-box;border:1.4px solid transparent;
    transition:transform .25s}
  .estep:hover{transform:translateX(-5px)}
  body[data-lang="en"] .estep:hover{transform:translateX(5px)}
  .estep__n{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;font-weight:900;font-size:16px;
    color:#fff;background-image:var(--grad);box-shadow:0 10px 24px -8px rgba(26,111,191,.6)}
  .estep__b{flex:1}.estep__b h4{font-size:16px;font-weight:800;margin:0 0 2px}.estep__b p{font-size:13px;color:var(--muted);margin:0}
  .estep__xp{flex:none;font-weight:900;font-size:16px}.estep__xp small{font-weight:600;font-size:11px;color:var(--muted)}

  /* ---------- results ---------- */
  .results{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
  .rcard{padding:38px 22px;text-align:center}
  .rcard .n{font-size:clamp(46px,6vw,68px);font-weight:900;line-height:1}
  .rcard h3{margin-top:12px;font-size:16px;font-weight:700;color:var(--muted)}
  .quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .quote{padding:30px 30px;font-size:18px;font-weight:700;line-height:1.6}
  .quote::before{content:"”";display:block;font-size:52px;line-height:.3;color:var(--green);margin-bottom:18px;font-family:"Hanken Grotesk",serif}

  /* ---------- audience ---------- */
  .audience{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .acard{padding:34px 28px;text-align:center}
  .acard__ico{display:inline-grid;place-items:center;width:66px;height:66px;border-radius:20px;margin-bottom:20px;
    background:radial-gradient(120% 120% at 30% 20%, rgba(26,111,191,.24), rgba(249,115,22,.1) 70%, transparent),rgba(255,255,255,.03);
    border:1px solid var(--faint)}
  .acard__ico .ico{width:32px;height:32px}
  .acard h3{font-size:21px;font-weight:900;margin-bottom:10px}
  .acard p{font-size:14.5px;color:var(--muted)}

  /* ---------- CTA ---------- */
  .cta{max-width:var(--maxw);margin:0 auto;padding:36px 24px 100px}
  .cta__card{position:relative;overflow:hidden;text-align:center;padding:78px 28px;border-radius:34px;border:1.6px solid transparent;
    background:linear-gradient(150deg,rgba(26,111,191,.28),rgba(42,157,110,.16) 55%,rgba(249,115,22,.22)) padding-box, var(--grad-border) border-box;
    box-shadow:0 40px 100px -40px rgba(26,111,191,.6)}
  .cta__card::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
    background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.08), transparent 60%)}
  .cta__card>*{position:relative;z-index:1}
  .cta__card h2{font-size:clamp(30px,4.4vw,50px);font-weight:900}
  .cta__card p{margin:18px auto 0;max-width:50ch;font-size:18px;color:rgba(238,245,254,.82)}
  .cta__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}

  /* ---------- footer ---------- */
  .foot{max-width:var(--maxw);margin:0 auto;padding:36px 24px;display:flex;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:20px;border-top:1px solid var(--hair)}
  .foot__brand{display:flex;align-items:center;gap:12px}
  .foot__brand strong{display:block;font-size:15px}.foot__brand span{font-size:13px;color:var(--muted)}
  .foot__meta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:13px;color:var(--muted)}
  .foot__mail{color:var(--fg);border-bottom:1px solid var(--faint)}.foot__mail:hover{border-color:var(--green)}

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}

  /* ---------- interactivity & motion ---------- */
  /* scroll progress bar */
  .progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:50;transform:scaleX(0);transform-origin:100% 50%;
    background:linear-gradient(90deg,var(--blue),var(--green),var(--orange));box-shadow:0 0 14px rgba(26,111,191,.55);
    pointer-events:none;will-change:transform}
  :root[dir="ltr"] .progress{transform-origin:0 50%}

  /* pointer spotlight on glass cards */
  .glass{isolation:isolate}
  .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
    transition:opacity .4s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(42,157,110,.17),rgba(26,111,191,.14) 40%,transparent 72%)}
  .glass.lit::before{opacity:1}

  /* icon pop on card hover */
  .bcard__ico,.tcard__ico,.vcard__ico,.acard__ico{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s}
  .glass:hover .bcard__ico,.glass:hover .tcard__ico,.glass:hover .vcard__ico,.glass:hover .acard__ico{
    transform:translateY(-3px) scale(1.07);border-color:rgba(42,157,110,.5)}

  /* journey node interaction */
  .jcard{transition:transform .3s}
  .jcard:hover{transform:translateY(-5px)}
  .jnode{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
  .jcard:hover .jnode{transform:scale(1.14);box-shadow:0 0 0 6px rgba(5,9,15,.9),0 16px 40px -6px rgba(26,111,191,.85)}

  /* active nav link */
  .nav__links a{position:relative}
  .nav__links a.active{color:var(--fg)}
  .nav__links a.active::after{content:"";position:absolute;inset-inline:12px;bottom:2px;height:2px;border-radius:2px;background:var(--grad)}

  /* primary button sheen sweep */
  .btn--primary{position:relative;overflow:hidden;isolation:isolate}
  .btn--primary::after{content:"";position:absolute;top:0;inset-inline-start:-70%;width:45%;height:100%;transform:skewX(-20deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transition:inset-inline-start .6s ease;z-index:2;pointer-events:none}
  .btn--primary:hover::after{inset-inline-start:130%}

  /* staggered reveal groups */
  .rg>*{opacity:0;transform:translateY(26px) scale(.985);
    transition:opacity .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
  .rg.in>*{opacity:1;transform:none}

  /* hero float bob + tag dot pulse */
  .hero__float{animation:bob 5.5s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .hero__tag .dot{animation:dotpulse 2.6s ease-in-out infinite}
  @keyframes dotpulse{0%,100%{box-shadow:0 0 12px 2px rgba(42,157,110,.7)}50%{box-shadow:0 0 22px 6px rgba(42,157,110,.45)}}

  /* top menu items cascade/slide in on load, in order */
  .brand,.nav__links a,.nav__actions>*{animation:navslide .55s both cubic-bezier(.2,.7,.2,1)}
  .brand{animation-delay:.05s}
  .nav__links a:nth-child(1){animation-delay:.14s}
  .nav__links a:nth-child(2){animation-delay:.21s}
  .nav__links a:nth-child(3){animation-delay:.28s}
  .nav__links a:nth-child(4){animation-delay:.35s}
  .nav__links a:nth-child(5){animation-delay:.42s}
  .nav__actions>*:nth-child(1){animation-delay:.49s}
  .nav__actions>*:nth-child(2){animation-delay:.56s}
  @keyframes navslide{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  .nav__actions>*:nth-child(3){animation-delay:.63s}

  /* theme toggle icon swap */
  .theme-toggle .t-moon{display:none}
  :root[data-theme="light"] .theme-toggle .t-sun{display:none}
  :root[data-theme="light"] .theme-toggle .t-moon{display:inline}

  /* ---------- experts ---------- */
  .nav__links a:nth-child(6){animation-delay:.49s}
  .avatar{position:relative;display:inline-block;vertical-align:middle;flex:none;border-radius:50%;padding:3px;background:var(--grad-border)}
  .avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center 22%;background:#0b1522}
  .avatar--lg{width:112px;height:112px}

  /* homepage teaser: expert network */
  .exnet__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .exstat{padding:20px 16px;text-align:center}
  .exstat .n{font-size:clamp(24px,3.2vw,38px);font-weight:900;line-height:1}
  .exstat .n.txt{font-size:17px;font-weight:800}
  .exstat h4{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
  .exfeat{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
  .exmini{padding:22px 16px;text-align:center}
  .exmini .avatar{width:92px;height:92px;margin:0 auto 13px}
  .exmini h4{font-size:15px;font-weight:800}
  .exmini p{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
  .exnet__cta{display:flex;justify-content:center;margin-top:26px}

  /* experts directory */
  .experts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .expert-card{padding:26px 26px 22px}
  .expert-card__head{display:flex;gap:18px;align-items:center}
  .expert-card__id{flex:1;min-width:0}
  .expert-card__id h3{font-size:20px;font-weight:900}
  .expert-card__role{font-size:13px;color:var(--green);font-weight:700;margin-top:4px;line-height:1.4}
  .yrs{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;font-weight:800;color:var(--fg);
    padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--faint)}
  .yrs::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}
  .creds{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
  .cred{font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;
    background:rgba(26,111,191,.14);color:#bcd8f2;border:1px solid rgba(26,111,191,.28)}
  .expert-card details{margin-top:15px;border-top:1px solid var(--hair);padding-top:12px}
  .expert-card summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--muted);list-style:none;
    display:inline-flex;align-items:center;gap:8px;user-select:none}
  .expert-card summary::-webkit-details-marker{display:none}
  .expert-card summary::after{content:"↓";color:var(--blue);font-weight:900}
  .expert-card details[open] summary::after{content:"↑"}
  .expert-card details ul{margin:12px 0 0;padding-inline-start:18px;font-size:13px;color:#c9d6e3;line-height:1.75}
  .expert-card details li{margin:6px 0}
  .contrib{margin-top:16px}
  .contrib__t{font-size:12px;font-weight:800;color:var(--fg);margin-bottom:10px;display:flex;align-items:center;gap:9px}
  .contrib__t::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--grad)}
  .tags{display:flex;flex-wrap:wrap;gap:7px}
  .tag2{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;color:var(--fg);
    background:rgba(42,157,110,.1);border:1px solid rgba(42,157,110,.26)}

  /* collaboration areas */
  .collab{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .item2{padding:22px 20px;display:flex;gap:13px;align-items:flex-start}
  .item2 .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
    background:rgba(255,255,255,.04);border:1px solid var(--faint)}
  .item2 .ic .ico{width:22px;height:22px}
  .item2 h4{font-size:15px;font-weight:800;margin-bottom:4px}
  .item2 p{font-size:12.5px;color:var(--muted);line-height:1.6}

  /* light-theme overrides for experts */
  :root[data-theme="light"] .avatar img{background:#e8eef5}
  :root[data-theme="light"] .yrs{background:rgba(13,27,42,.04)}
  :root[data-theme="light"] .cred{background:rgba(26,111,191,.09);color:#1a4e86;border-color:rgba(26,111,191,.22)}
  :root[data-theme="light"] .expert-card details ul{color:#33465a}
  :root[data-theme="light"] .tag2{color:#1c6b4a}
  :root[data-theme="light"] .item2 .ic{background:rgba(13,27,42,.03)}

  /* responsive (experts) */
  @media(max-width:960px){.experts-grid,.exnet__stats,.exfeat,.collab{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.experts-grid,.exnet__stats,.exfeat,.collab{grid-template-columns:1fr}.expert-card__head{gap:14px}}

  /* ---------- about + founders ---------- */
  .nav__links a:nth-child(7){animation-delay:.49s}
  .avatar--xl{width:132px;height:132px}
  .statement{max-width:820px;margin:0 auto;text-align:center;font-size:clamp(17px,2.2vw,21px);font-weight:700;line-height:1.6}
  .founders{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .founder{padding:32px 26px;text-align:center}
  .founder .avatar{margin:0 auto 18px}
  .founder .avatar img{object-position:center 24%}
  .founder h3{font-size:20px;font-weight:900}
  .founder .role{font-size:13px;color:var(--green);font-weight:700;margin-top:5px}
  .founder p{font-size:13.5px;color:#c9d6e3;margin-top:15px;line-height:1.75;text-align:start}
  .founder .tags{justify-content:center;margin-top:16px}
  .phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .phase{padding:26px 24px}
  .phase__n{font-family:"Hanken Grotesk",sans-serif;font-size:38px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:1.4px rgba(238,245,254,.14)}
  .phase h3{font-size:18px;font-weight:900;margin:8px 0 3px}
  .phase .en{font-family:"Hanken Grotesk",sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
  .phase p{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.7}
  .pstatus{display:inline-block;margin-top:14px;font-size:11px;font-weight:800;padding:4px 12px;border-radius:999px;color:#fff}
  .pstatus--done{background:var(--green)} .pstatus--now{background:var(--orange)} .pstatus--next{background:var(--blue)}
  .contact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .cinfo{padding:24px 20px;text-align:center}
  .cinfo .lbl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-family:"Hanken Grotesk",sans-serif}
  .cinfo .val{display:block;font-size:15px;font-weight:800;margin-top:8px;color:var(--fg);direction:ltr;unicode-bidi:isolate}
  .cinfo a.val:hover{color:var(--green)}
  .cinfo .val.ar{direction:rtl}
  :root[data-theme="light"] .founder p{color:#33465a}
  :root[data-theme="light"] .phase__n{-webkit-text-stroke-color:rgba(13,27,42,.12)}
  @media(max-width:960px){.founders,.phases,.contact{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:640px){.founders,.phases,.contact{grid-template-columns:1fr}}

  /* ---------- contact form ---------- */
  .contact-wrap{display:grid;grid-template-columns:1.35fr .65fr;gap:20px;align-items:start}
  .contact-form{padding:28px 26px}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .cf-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
  .cf-field label{font-size:13px;font-weight:700;color:var(--fg)}
  .cf-field input,.cf-field select,.cf-field textarea{font:inherit;font-size:14.5px;color:var(--fg);
    background:rgba(255,255,255,.04);border:1px solid var(--faint);border-radius:12px;padding:11px 14px;
    transition:border-color .2s,background .2s;width:100%}
  .cf-field textarea{resize:vertical;min-height:120px;line-height:1.6}
  .cf-field input:focus,.cf-field select:focus,.cf-field textarea:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.06)}
  .cf-field input:user-invalid,.cf-field textarea:user-invalid,.cf-field select:user-invalid{border-color:#e2603b}
  .cf-field select{cursor:pointer}
  .cf-consent{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--muted);font-size:12.5px;line-height:1.6;margin:2px 0 6px;cursor:pointer}
  .cf-consent input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--green)}
  .cf-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
  .cf-actions .btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
  .cf-status{font-size:13px;font-weight:600;margin:0}
  .cf-status.ok{color:var(--green)} .cf-status.err{color:#e2603b}
  .contact-aside{display:flex;flex-direction:column;gap:14px}
  .contact-aside .cinfo{text-align:start}
  :root[data-theme="light"] .cf-field input,:root[data-theme="light"] .cf-field select,:root[data-theme="light"] .cf-field textarea{background:#fff;border-color:rgba(13,27,42,.14)}
  :root[data-theme="light"] .cf-field input:focus,:root[data-theme="light"] .cf-field select:focus,:root[data-theme="light"] .cf-field textarea:focus{background:#fff;border-color:var(--blue)}
  /* custom entity dropdown — replaces the native <select> popup so it matches the theme */
  .cf-select{position:relative}
  .cf-select__btn{width:100%;font:inherit;font-size:14.5px;color:var(--fg);text-align:start;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:rgba(255,255,255,.04);border:1px solid var(--faint);border-radius:12px;padding:11px 14px;transition:border-color .2s,background .2s}
  .cf-select.open .cf-select__btn,.cf-select__btn:focus-visible{border-color:var(--blue);background:rgba(255,255,255,.06)}
  .cf-select__val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cf-select:not(.has-value) .cf-select__val{color:var(--dim)}
  .cf-select__chev{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--muted);transition:transform .2s}
  .cf-select.open .cf-select__chev{transform:rotate(180deg)}
  .cf-select__list{position:absolute;z-index:30;top:calc(100% + 6px);inset-inline:0;margin:0;padding:6px;list-style:none;
    background:#0b1626;border:1px solid var(--faint);border-radius:12px;box-shadow:0 24px 54px -22px rgba(0,0,0,.75);
    max-height:262px;overflow:auto;display:none}
  .cf-select.open .cf-select__list{display:block;animation:cfpop .16s ease}
  @keyframes cfpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .cf-select__list li{padding:10px 12px;border-radius:9px;font-size:14px;color:var(--fg);cursor:pointer;transition:background .15s}
  .cf-select__list li:hover,.cf-select__list li[aria-selected="true"]{background:rgba(26,111,191,.2)}
  :root[data-theme="light"] .cf-select__btn{background:#fff;border-color:rgba(13,27,42,.14)}
  :root[data-theme="light"] .cf-select.open .cf-select__btn,:root[data-theme="light"] .cf-select__btn:focus-visible{background:#fff;border-color:var(--blue)}
  :root[data-theme="light"] .cf-select__list{background:#fff;border-color:rgba(13,27,42,.12);box-shadow:0 24px 54px -24px rgba(13,27,42,.32)}
  :root[data-theme="light"] .cf-select__list li:hover,:root[data-theme="light"] .cf-select__list li[aria-selected="true"]{background:rgba(26,111,191,.12)}
  /* conditional "other" free-text field (.cf-field sets display:flex, which would beat [hidden]) */
  .cf-field[hidden]{display:none}
  .cf-other:not([hidden]){animation:cfpop .18s ease}
  @media(max-width:820px){.contact-wrap,.cf-row{grid-template-columns:1fr}}

  /* ---------- mobile nav (hamburger) ---------- */
  .nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:42px;
    padding:0 11px;border-radius:12px;border:1px solid var(--faint);background:rgba(255,255,255,.05);cursor:pointer}
  .nav__toggle span{display:block;height:2px;border-radius:2px;background:var(--fg);transition:transform .25s,opacity .2s}
  .nav.open .nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .nav__toggle span:nth-child(2){opacity:0}
  .nav.open .nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav__cta-m{display:none}
  :root[data-theme="light"] .nav__toggle{background:rgba(13,27,42,.04)}
  @media (max-width:820px){
    .nav{flex-wrap:wrap}
    .nav.open{background:#0b1626}
    .nav__toggle{display:flex}
    .nav__cta{display:none}
    .brand,.nav__links a,.nav__actions>*,.nav__cta-m{animation:none!important;opacity:1!important;transform:none!important}
    .nav__links{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:6px;
      margin:12px 0 0;padding:12px 0 4px;border-top:1px solid var(--hair)}
    .nav.open .nav__links{display:flex}
    .nav__links a{padding:12px 14px;font-size:16px;border-radius:12px;color:var(--fg);text-align:start}
    .nav__links a:hover,.nav__links a.active{background:rgba(255,255,255,.06)}
    .nav__links a.active::after{display:none}
    .nav__cta-m{display:inline-flex;justify-content:center;margin-top:8px;height:48px}
    :root[data-theme="light"] .nav.open{background:#fff}
    :root[data-theme="light"] .nav__links a{color:var(--fg)}
    :root[data-theme="light"] .nav__links a:hover,:root[data-theme="light"] .nav__links a.active{background:rgba(13,27,42,.05)}
  }

  /* ---------- LIGHT THEME ---------- */
  :root[data-theme="light"]{
    color-scheme:light;
    --bg:#EEF3F9; --bg-2:#E2EBF4;
    --fg:#0D1B2A; --muted:rgba(13,27,42,.7); --dim:rgba(13,27,42,.5);
    --faint:rgba(13,27,42,.12); --hair:rgba(13,27,42,.09);
    --card:rgba(13,27,42,.03); --card2:#FFFFFF;
  }
  :root[data-theme="light"] .bg{background:
    radial-gradient(60% 50% at 78% 8%, rgba(26,111,191,.16), transparent 60%),
    radial-gradient(55% 55% at 12% 42%, rgba(42,157,110,.13), transparent 62%),
    radial-gradient(50% 45% at 62% 92%, rgba(249,115,22,.11), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, #ffffff, var(--bg) 62%)}
  :root[data-theme="light"] .orb{opacity:.16}
  :root[data-theme="light"] .grain{opacity:.03}
  :root[data-theme="light"] .nav.scrolled{background:rgba(255,255,255,.82)}
  :root[data-theme="light"] .nav__links a:hover{background:rgba(13,27,42,.05)}
  :root[data-theme="light"] .lang-toggle{background:rgba(13,27,42,.04)}
  :root[data-theme="light"] .lang-toggle:hover{background:rgba(13,27,42,.08)}
  :root[data-theme="light"] .preview{background:rgba(13,27,42,.86);color:#EEF5FE}
  :root[data-theme="light"] .ghost{-webkit-text-stroke-color:rgba(13,27,42,.05)}
  :root[data-theme="light"] .house__card .ghosttxt{-webkit-text-stroke-color:rgba(13,27,42,.09)}
  :root[data-theme="light"] .vcard__gh{-webkit-text-stroke-color:rgba(13,27,42,.07)}
  :root[data-theme="light"] .tcard__ico,:root[data-theme="light"] .vcard__ico{background:rgba(26,111,191,.06)}
  :root[data-theme="light"] .exp__chip{background:rgba(13,27,42,.035)}
  :root[data-theme="light"] .btn--ghost{background:rgba(13,27,42,.03)}
  :root[data-theme="light"] .btn--ghost:hover{background:rgba(13,27,42,.06)}
  :root[data-theme="light"] .cta__card p{color:rgba(13,27,42,.72)}
  :root[data-theme="light"] .cta__card::before{opacity:.22}
  :root[data-theme="light"] .glass:hover{box-shadow:0 30px 62px -30px rgba(13,27,42,.22),0 0 60px -16px rgba(26,111,191,.32)}
  :root[data-theme="light"] .glass::before{background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(42,157,110,.12),rgba(26,111,191,.1) 40%,transparent 72%)}
  :root[data-theme="light"] .jnode{box-shadow:0 0 0 6px var(--bg),0 10px 30px -6px rgba(26,111,191,.4)}
  :root[data-theme="light"] .jcard:hover .jnode{box-shadow:0 0 0 6px var(--bg),0 16px 40px -6px rgba(26,111,191,.55)}

  @media (max-width:960px){
    .hero{grid-template-columns:1fr;gap:36px}
    .hero__media{max-width:440px;margin-inline:auto;aspect-ratio:5/5}
    .house,.exp,.quotes{grid-template-columns:1fr}
    .bento--3,.bento--6,.values,.audience,.results,.stats__grid{grid-template-columns:repeat(2,1fr)}
    .journey{grid-template-columns:repeat(2,1fr)}.journey::before{display:none}
  }
  @media (max-width:640px){
    .section{padding:70px 20px}.hero{padding:36px 20px 18px}
    .bento--3,.bento--6,.values,.audience,.results,.stats__grid,.journey{grid-template-columns:1fr}
    .foot{flex-direction:column;align-items:flex-start}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .orb,.preview__dot,.gradanim,.marquee__track,.hero__float,.hero__tag .dot{animation:none}
    .reveal{opacity:1;transform:none;transition:none}
    .rg>*{opacity:1;transform:none;transition:none}
    .btn--primary::after{display:none}
    .brand,.nav__links a,.nav__actions>*{animation:none;opacity:1;transform:none}
  }

  /* deploy: externalized inline-style helpers (CSP style-src 'self') */
  .sprite{position:absolute;width:0;height:0;pointer-events:none}
  .nav__cta{height:42px;padding:0 20px;font-size:14px}