/* =============================================================
   صُنّاع IoT 360 — Design System v2
   Concept: "Technical Blueprint Editorial — Premium Modern"
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:#012F63;
  --ink-900:#01142E;
  --ink-800:#011E43;
  --ink-700:#012A59;
  --ink-600:#013A7A;
  --ink-500:#0B4E9B;
  --ink-400:#2C74C7;
  --ink-300:#6BA3E0;
  --ink-200:#B4D2F1;
  --ink-100:#E3EEF9;
  --gold:#E0AF1A;
  --gold-bright:#F5C63F;
  --gold-deep:#A87C08;
  --gold-wash:rgba(224,175,26,.10);
  --gold-glow:rgba(224,175,26,.35);
  --paper:#F7F4ED;
  --paper-2:#EFEBE1;
  --paper-3:#E5E0D3;
  --white:#FFFFFF;
  --bg:var(--paper);
  --surface:var(--white);
  --text:#0A1B33;
  --text-2:#3D536F;
  --text-3:#71849C;
  --line:rgba(1,47,99,.14);
  --line-soft:rgba(1,47,99,.07);
  --t-hero:clamp(2rem,3.8vw,3.5rem);
  --t-h1:clamp(2.1rem,5vw,4rem);
  --t-h2:clamp(1.8rem,3.9vw,3.1rem);
  --t-h3:clamp(1.25rem,2.1vw,1.7rem);
  --t-h4:clamp(1.05rem,1.5vw,1.25rem);
  --t-lead:clamp(1.02rem,1.32vw,1.24rem);
  --t-body:clamp(.96rem,1.06vw,1.055rem);
  --t-sm:.875rem;
  --t-xs:.775rem;
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem;
  --s-9:6rem; --s-10:8rem; --s-11:11rem;
  --gutter:clamp(1.15rem,4.4vw,4.5rem);
  --maxw:1320px;
  --maxw-narrow:820px;
  --r-sm:6px; --r:12px; --r-lg:20px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(1,20,46,.05),0 2px 8px rgba(1,20,46,.04);
  --sh-2:0 2px 6px rgba(1,20,46,.06),0 12px 30px rgba(1,20,46,.07);
  --sh-3:0 8px 20px rgba(1,20,46,.09),0 30px 70px rgba(1,20,46,.11);
  --sh-gold:0 10px 34px rgba(224,175,26,.30);
  --sh-gold-lg:0 20px 60px rgba(224,175,26,.40);
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.76,0,.24,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --d-fast:.22s; --d:.42s; --d-slow:.8s;
  --nav-h:78px;
  --f-display:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif;
  --f-body:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Sans Arabic',ui-monospace,monospace;
}

/* Redesigned Sections Enhancements */
.legal-hub { background: var(--ink-900); padding: var(--s-10) 0; position: relative; overflow: hidden; }
.umbrella-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--r-lg); padding: var(--s-6); backdrop-filter: blur(10px); }
.umbrella-card h3 { color: var(--gold); margin-bottom: var(--s-3); }

.accredited-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-5); margin-top: var(--s-8); }
.partner-mini-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4); transition: transform var(--d-fast) var(--e-out); display: flex; flex-direction: column; gap: var(--s-3); }
.partner-mini-card:hover { transform: translateY(-5px); border-color: var(--gold); box-shadow: var(--sh-3); }
.partner-mini-card img { height: 40px; width: auto; object-fit: contain; filter: grayscale(1) opacity(0.7); transition: filter var(--d-fast); }
.partner-mini-card:hover img { filter: none opacity(1); }

.network-showcase { background: var(--paper); padding: var(--s-10) 0; }
.network-stats { display: flex; justify-content: center; gap: var(--s-10); margin-bottom: var(--s-8); }
.stat-item { text-align: center; }
.stat-item .val { font-size: var(--t-h1); font-weight: 800; color: var(--ink); display: block; }
.stat-item .lbl { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-3); }

.journey-story-track { position: relative; padding: var(--s-8) 0; }
.journey-story-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--line); transform: translateX(-50%); z-index: 1; }
.story-step { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: var(--s-10); position: relative; z-index: 2; }
.story-step:nth-child(even) { flex-direction: row-reverse; }
.story-content { width: 45%; background: var(--surface); padding: var(--s-6); border-radius: var(--r-lg); box-shadow: var(--sh-2); border-top: 4px solid var(--gold); }
.story-dot { width: 40px; height: 40px; background: var(--gold); border: 4px solid var(--ink-900); border-radius: 50%; position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; font-weight: bold; color: var(--ink-900); }
.story-visual { width: 45%; }
.story-visual img { border-radius: var(--r); box-shadow: var(--sh-3); }

@media (max-width: 768px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; padding: 0.8rem; }
  .hero-stats .st { padding: 0.8rem; border-radius: 12px; }
  .hero-stats .st b { font-size: 1.2rem; }
  .hero-badge { display: inline-flex; flex-direction: row; align-items: center; gap: 0.5rem; padding: 6px 12px; border-radius: 99px; width: auto; max-width: 100%; flex-wrap: wrap; justify-content: center; }
  .hero-badge b { font-size: 0.55rem; padding: 2px 6px; }
  .hero-badge span { font-size: 0.65rem; white-space: normal; line-height: 1.2; text-align: center; }
  .hero-vis { display: none; }
  .hero h1 { font-size: 1.6rem; line-height: 1.25; margin-block: 0.8rem 1rem; }
  .hero .lead { font-size: 0.88rem; line-height: 1.6; }
  .trust-ribbon { padding: 0.8rem; gap: 0.6rem; }
  .trust-item { font-size: 0.72rem; }
}

/* Journey Storytelling Widgets */
.story-timeline-container { position: relative; padding: var(--s-10) 0; }
.story-spine-track { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: rgba(180,210,241,0.1); transform: translateX(-50%); border-radius: var(--r-pill); overflow: hidden; }
.story-spine-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0; background: linear-gradient(to bottom, var(--gold-bright), var(--gold)); transition: height 0.5s ease; }

.story-chapter-card { display: flex; gap: var(--s-8); margin-bottom: var(--s-11); position: relative; }
.story-chapter-card.reverse { flex-direction: row-reverse; }
.story-node-indicator { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 10; }
.sni-num { width: 54px; height: 54px; background: var(--ink-900); border: 3px solid var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-weight: 800; color: var(--gold-bright); font-size: 1.25rem; box-shadow: 0 0 20px var(--gold-glow); }

.story-card-inner { flex: 1; display: flex; align-items: center; gap: var(--s-8); }
.story-text-side { flex: 1; }
.story-visual-side { flex: 1; display: flex; justify-content: center; }

.story-step-tag { font-family: var(--f-mono); color: var(--gold); font-size: var(--t-xs); letter-spacing: 0.15em; margin-bottom: var(--s-3); display: block; }
.story-highlights { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.sh-pill { padding: 6px 14px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: var(--t-xs); color: var(--text-2); }

.story-widget-card { background: var(--ink-800); border: 1px solid var(--line); border-radius: var(--r); width: 100%; max-width: 440px; overflow: hidden; box-shadow: var(--sh-3); transition: transform var(--d-slow) var(--e-out); }
.story-chapter-card:hover .story-widget-card { transform: scale(1.02) rotate(1deg); border-color: var(--gold); }

.sw-header { padding: 12px 16px; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.sw-dot { width: 10px; height: 10px; border-radius: 50%; }
.sw-dot.red { background: #ff5f56; } .sw-dot.yellow { background: #ffbd2e; } .sw-dot.green { background: #27c93f; }
.sw-title { font-size: 0.7rem; font-family: var(--f-mono); color: var(--text-3); margin-inline-start: auto; }

.sw-chat-body { padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.chat-bubble { max-width: 85%; padding: 12px 16px; border-radius: var(--r); font-size: 0.88rem; line-height: 1.5; }
.user-bubble { align-self: flex-end; background: var(--ink-700); color: var(--white); border-bottom-right-radius: 2px; }
.ai-bubble { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid var(--line); display: flex; gap: 12px; border-bottom-left-radius: 2px; }
.ai-msg strong { display: block; color: var(--gold); margin-bottom: 4px; }
.chat-typing-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--text-3); font-style: italic; }

.bg-grid-display { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.bg-item { background: rgba(255,255,255,0.03); border: 1px solid var(--line); padding: 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 4px; }
.bg-item.highlighted { border-color: var(--gold); background: var(--gold-wash); box-shadow: inset 0 0 15px var(--gold-glow); }
.bgi-num { font-family: var(--f-mono); font-size: 0.7rem; color: var(--gold-bright); }
.bgi-txt { font-size: 0.75rem; font-weight: 500; }

.hw-spec-list { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.hws-item { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; font-size: 0.82rem; }
.hws-label { color: var(--text-3); }
.hws-status { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.8rem; color: var(--gold-bright); font-weight: 600; }
.hws-dot.pulse { width: 8px; height: 8px; background: #27c93f; border-radius: 50%; box-shadow: 0 0 0 0 rgba(39,201,63,0.4); animation: hws-pulse 2s infinite; }
@keyframes hws-pulse { 0% { box-shadow: 0 0 0 0 rgba(39,201,63,0.7); } 70% { box-shadow: 0 0 0 10px rgba(39,201,63,0); } 100% { box-shadow: 0 0 0 0 rgba(39,201,63,0); } }

.cert-body { padding: 25px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cert-score-circle { width: 100px; height: 100px; border: 4px solid var(--gold); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, var(--gold-wash) 0%, transparent 70%); }
.csc-score { font-size: 1.8rem; font-weight: 800; color: var(--gold-bright); line-height: 1; }
.csc-lbl { font-size: 0.6rem; text-transform: uppercase; color: var(--text-3); }
.it-tag { display: inline-block; padding: 4px 10px; background: #27c93f; color: #fff; border-radius: 4px; font-size: 0.65rem; font-weight: 700; margin: 0 4px; }

@media (max-width: 992px) {
  .story-chapter-card, .story-chapter-card.reverse { flex-direction: column; text-align: center; }
  .story-spine-track { left: 20px; transform: none; }
  .story-node-indicator { left: 20px; transform: none; }
  .story-card-inner { flex-direction: column; padding-inline-start: 60px; }
}

.network-showcase, .journey, .partners, .faq { content-visibility: auto; contain-intrinsic-size: 1px 1000px; }

.on-ink,.hero,.cta-band,.phead{
  --bg:var(--ink-900);
  --surface:var(--ink-800);
  --text:#EEF4FC;
  --text-2:#A9C0DC;
  --text-3:#6E88A8;
  --line:rgba(180,210,241,.16);
  --line-soft:rgba(180,210,241,.08);
  color:var(--text);
}
.hero .btn-ghost,.cta-band .btn-ghost,.phead .btn-ghost{border-color:rgba(180,210,241,.32);color:#EEF4FC}
.hero .btn-ghost:hover,.cta-band .btn-ghost:hover,.phead .btn-ghost:hover{border-color:var(--gold);background:rgba(224,175,26,.10);color:var(--gold-bright)}
.hero .kicker,.cta-band .kicker,.phead .kicker{color:var(--gold)}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px);overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f-body);font-size:var(--t-body);line-height:1.75;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden;font-feature-settings:"kern" 1,"liga" 1}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:3px}
::selection{background:var(--gold);color:var(--ink-900)}

/* ---------- 3. TYPOGRAPHY ---------- */
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:600;line-height:1.16;letter-spacing:-.015em}
h1{font-size:var(--t-h1)} h2{font-size:var(--t-h2)} h3{font-size:var(--t-h3)} h4{font-size:var(--t-h4)}
:lang(en) h1,:lang(en) h2,:lang(en) h3{letter-spacing:-.028em}
.lead{font-size:var(--t-lead);line-height:1.72;color:var(--text-2);font-weight:400}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500}
.on-ink .kicker{color:var(--gold)}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65;flex:none}
.kicker.center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.65;flex:none}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.mark{position:relative;display:inline-block;color:inherit;white-space:nowrap;font-style:normal}
.stats-cards-grid { margin-top: 2rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; }
.stats-card-item { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); padding: 1rem; border-radius: var(--r-lg); text-align: center; display: flex; flex-direction: column; justify-content: center; min-height: 100px; }
@media (max-width: 480px) {
  .stats-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stats-card-item { padding: 0.8rem; min-height: 90px; }
  .stats-card-item b { font-size: 1.2rem !important; }
  .stats-card-item span { font-size: 0.75rem !important; }
}

.mark::after{content:"";position:absolute;inset-inline:-.06em;bottom:.02em;height:.30em;background:var(--gold);opacity:.28;z-index:-1;border-radius:2px;transform:scaleX(0);transform-origin:var(--mark-origin,right);transition:transform .7s var(--e-out) .25s}
@media (max-width: 768px) {
  .mark::after { height: 0.2em; bottom: 0.1em; }
}
.on-ink .mark::after,.hero .mark::after,.cta-band .mark::after,.phead .mark::after{height:.11em;bottom:-.02em;opacity:1;background:var(--gold);border-radius:99px}
html[lang="en"] .mark::after{--mark-origin:left}
.is-in .mark::after,.mark.on::after{transform:scaleX(1)}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-width:var(--maxw-narrow)}
.section{padding-block:clamp(4.5rem,9vw,9rem);position:relative}
.section-sm{padding-block:clamp(3rem,6vw,5.5rem)}
.sec-head{max-width:66ch;margin-bottom:clamp(2.4rem,4.5vw,4rem)}
.sec-head h2{margin-block:.85rem .95rem}
.sec-head.center{margin-inline:auto;text-align:center}
.grid{display:grid;gap:clamp(1.1rem,2.2vw,2rem)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
.rule{height:1px;background:var(--line);border:0;position:relative}
.rule::before{content:"";position:absolute;inset-inline-start:0;top:-3px;width:44px;height:7px;background:var(--gold)}

/* ---------- 5. BLUEPRINT BACKDROP ---------- */
.blueprint{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.blueprint::before{content:"";position:absolute;inset:-2px;background-image:linear-gradient(to right,rgba(180,210,241,.055) 1px,transparent 1px),linear-gradient(to bottom,rgba(180,210,241,.055) 1px,transparent 1px);background-size:76px 76px;mask-image:radial-gradient(120% 90% at 50% 22%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(120% 90% at 50% 22%,#000 25%,transparent 78%)}
.blueprint.on-paper::before{background-image:linear-gradient(to right,rgba(1,47,99,.05) 1px,transparent 1px),linear-gradient(to bottom,rgba(1,47,99,.05) 1px,transparent 1px)}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform}
.orb-a{width:50vw;height:50vw;background:radial-gradient(circle,rgba(11,78,155,.6),transparent 68%);inset-block-start:-16vw;inset-inline-end:-12vw}
.orb-b{width:42vw;height:42vw;background:radial-gradient(circle,rgba(224,175,26,.25),transparent 68%);inset-block-end:-16vw;inset-inline-start:-10vw}
.grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.28;mix-blend-mode:overlay}
.grain svg{width:100%;height:100%}
.arc-motif{position:absolute;pointer-events:none;opacity:.16;color:var(--gold)}
.arc-motif circle{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* ---------- 6. BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.62rem;padding:.92rem 1.7rem;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;line-height:1;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform var(--d-fast) var(--e-out),box-shadow var(--d) var(--e-out),background-color var(--d) var(--e-out),color var(--d) var(--e-out),border-color var(--d) var(--e-out)}
.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent 60%);opacity:0;transition:opacity var(--d) var(--e-out);pointer-events:none}
.btn:hover::before{opacity:1}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform var(--d) var(--e-out)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(0) scale(.983)}
[dir="rtl"] .btn .ar{transform:scaleX(1)}
[dir="ltr"] .btn .ar{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .ar{transform:scaleX(1) translateX(-4px)}
[dir="ltr"] .btn:hover .ar{transform:scaleX(-1) translateX(-4px)}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(1,47,99,.24)}
.btn-primary:hover{background:var(--ink-600);box-shadow:0 14px 36px rgba(1,47,99,.38)}
.on-ink .btn-primary{background:var(--gold);color:var(--ink-900);box-shadow:var(--sh-gold)}
.on-ink .btn-primary:hover{background:var(--gold-bright);box-shadow:var(--sh-gold-lg)}
.btn-gold{background:var(--gold);color:var(--ink-900);box-shadow:var(--sh-gold)}
.btn-gold:hover{background:var(--gold-bright);box-shadow:var(--sh-gold-lg)}
.btn-ghost{border:1.5px solid var(--line);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:rgba(1,47,99,.045)}
.on-ink .btn-ghost{border-color:rgba(180,210,241,.32)}
.on-ink .btn-ghost:hover{border-color:var(--gold);background:rgba(224,175,26,.09);color:var(--gold-bright)}
.btn-sm{padding:.66rem 1.2rem;font-size:.865rem}
.btn-lg{padding:1.08rem 2.15rem;font-size:1.03rem}
.link-u{position:relative;display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--ink-600);font-family:var(--f-display);font-size:.95rem}
.on-ink .link-u{color:var(--gold)}
.link-u::after{content:"";position:absolute;inset-inline:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:var(--mark-origin,right);transition:transform .45s var(--e-out)}
:lang(en) .link-u::after{--mark-origin:left}
.link-u:hover::after{transform:scaleX(1)}
.link-u svg{width:.95em;height:.95em;transition:transform var(--d) var(--e-out)}
[dir="ltr"] .link-u svg{transform:scaleX(-1)}
[dir="rtl"] .link-u:hover svg{transform:translateX(-4px)}
[dir="ltr"] .link-u:hover svg{transform:scaleX(-1) translateX(-4px)}

/* ---------- 7. INTRO / PRELOADER ---------- */
#intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:var(--ink-900);overflow:hidden}
#intro .ip-grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(to right,rgba(180,210,241,.07) 1px,transparent 1px),linear-gradient(to bottom,rgba(180,210,241,.07) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%);-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000,transparent 75%)}
#intro .ip-inner{position:relative;display:grid;justify-items:center;gap:1.9rem;text-align:center;padding:1.5rem}
#intro .ip-mark{width:min(210px,46vw);opacity:0;transform:translateY(14px) scale(.94)}
#intro .ip-arc{position:absolute;width:min(310px,66vw);aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-58%)}
#intro .ip-arc circle{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.85;stroke-dasharray:var(--C);stroke-dashoffset:var(--C)}
#intro .ip-line{width:min(280px,60vw);height:2px;background:rgba(180,210,241,.15);border-radius:2px;overflow:hidden;position:relative}
#intro .ip-line i{position:absolute;inset:0;background:var(--gold);transform-origin:right;transform:scaleX(0)}
:lang(en) #intro .ip-line i{transform-origin:left}
#intro .ip-txt{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-300);opacity:0}
html.intro-lock,html.intro-lock body{overflow:hidden;height:100%}

/* ---------- 8. NAVBAR ---------- */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;transition:background-color .45s var(--e-out),box-shadow .45s var(--e-out),height .45s var(--e-out),backdrop-filter .45s var(--e-out),border-color .45s var(--e-out);border-bottom:1px solid transparent}
.nav.stuck{height:66px;background:rgba(247,244,237,.88);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom-color:var(--line-soft);box-shadow:0 1px 30px rgba(1,20,46,.08)}
.nav.hide{transform:translateY(-105%)}
.nav.on-dark:not(.stuck){--nv-text:#EEF4FC;--nv-dim:rgba(238,244,252,.72)}
.nav{--nv-text:var(--text);--nv-dim:var(--text-2)}
.nav-in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:0.8rem}
@media(max-width:480px){.nav-in{gap:0.4rem}}
.brand{display:flex;align-items:center;gap:.72rem;flex:1 1 auto;min-width:0}
.brand img{height:40px;width:auto;flex:none;transition:height .45s var(--e-out)}
.nav.stuck .brand img{height:34px}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;min-width:0;overflow:hidden}
.brand-txt b{font-family:var(--f-display);font-weight:700;font-size:.98rem;color:var(--nv-text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-txt span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.15em;color:var(--nv-dim);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:560px){.brand-txt span{display:none}}
@media(max-width:360px){.brand-txt{display:none}}
.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a{position:relative;padding:.55rem .82rem;border-radius:var(--r-pill);font-size:.905rem;font-weight:500;color:var(--nv-dim);transition:color var(--d-fast) var(--e-out),background-color var(--d-fast) var(--e-out)}
.nav-links a:hover{color:var(--nv-text);background:rgba(128,150,180,.13)}
.nav-links a.active{color:var(--nv-text);font-weight:600}
.nav-links a.active::after{content:"";position:absolute;inset-inline:.82rem;bottom:.24rem;height:2px;background:var(--gold);border-radius:2px}
.nav-actions{display:flex;align-items:center;gap:.55rem;flex:none}
.lang-switcher{display:flex;align-items:center;padding:2px;border-radius:12px;border:1.5px solid var(--line);position:relative;background:rgba(128,150,180,.12);min-width:110px;height:38px;isolation:isolate}
.nav.on-dark:not(.stuck) .lang-switcher{border-color:rgba(238,244,252,.25)}
.lang-switcher button{flex:1;position:relative;z-index:2;padding:0 12px;height:100%;font-family:var(--f-mono);font-size:.78rem;font-weight:700;color:var(--nv-dim);transition:color .3s ease;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.lang-switcher button[aria-pressed="true"]{color:#fff}
.lang-switcher .active-bg{position:absolute;z-index:1;top:2px;bottom:2px;inset-inline-start:2px;width:calc(50% - 2px);border-radius:9px;background:var(--ink);transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1)}
html[lang="en"] .lang-switcher .active-bg{transform:translateX(0)}
html[lang="ar"] .lang-switcher .active-bg{transform:translateX(0)}
/* Precise alignment for the toggle slider based on direction */
[dir="rtl"] .lang-switcher .active-bg { inset-inline-start: 2px; }
[dir="ltr"] .lang-switcher .active-bg { inset-inline-start: 2px; }
[dir="rtl"] button[data-lang-btn="en"][aria-pressed="true"] ~ .active-bg { transform: translateX(-100%); }
[dir="ltr"] button[data-lang-btn="en"][aria-pressed="true"] ~ .active-bg { transform: translateX(100%); }
[dir="rtl"] button[data-lang-btn="ar"][aria-pressed="true"] ~ .active-bg { transform: translateX(0); }
[dir="ltr"] button[data-lang-btn="ar"][aria-pressed="true"] ~ .active-bg { transform: translateX(0); }
/* Specific fix for button siblings and transform */
.lang-switcher { display: flex; flex-direction: row; }
.lang-switcher button[data-lang-btn="ar"][aria-pressed="true"] ~ .active-bg { inset-inline-start: 2px; }
.lang-switcher button[data-lang-btn="en"][aria-pressed="true"] ~ .active-bg { inset-inline-start: calc(50% + 1px); }
.lang-switcher .active-bg { width: calc(50% - 3px); transition: inset-inline-start 0.3s var(--e-out); transform: none !important; }

.burger{display:none;width:44px;height:44px;border-radius:var(--r);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:20px;height:1.9px;background:var(--nv-text);border-radius:2px;transition:transform .4s var(--e-out),opacity .25s}
.burger.open i:nth-child(1){transform:translateY(6.9px) rotate(45deg)}
.burger.open i:nth-child(2){opacity:0;transform:scaleX(.3)}
.burger.open i:nth-child(3){transform:translateY(-6.9px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:899;background:var(--ink-900);display:grid;grid-template-rows:calc(var(--nav-h) + 20px) 1fr auto;padding-top:env(safe-area-inset-top);clip-path:circle(0% at var(--dx,92%) 4%);transition:clip-path .72s var(--e-inout);pointer-events:none}
[dir="ltr"] .drawer{--dx:8%}
.drawer.open{clip-path:circle(150% at var(--dx,92%) 4%);pointer-events:auto}
.drawer-nav{display:flex;flex-direction:column;justify-content:center;gap:.35rem;padding:1.5rem var(--gutter);overflow-y:auto}
.drawer-nav a{display:flex;align-items:baseline;gap:1rem;padding:.72rem 0;font-family:var(--f-display);font-size:clamp(1.5rem,6.6vw,2.1rem);font-weight:600;color:#EEF4FC;border-bottom:1px solid rgba(180,210,241,.1);opacity:0;transform:translateY(22px)}
.drawer.open .drawer-nav a{opacity:1;transform:none;transition:opacity .5s var(--e-out) calc(.2s + var(--i,0)*.055s),transform .6s var(--e-out) calc(.2s + var(--i,0)*.055s)}
.drawer-nav a em{font-family:var(--f-mono);font-size:.72rem;font-style:normal;color:var(--gold);opacity:.85}
.drawer-foot{padding:1.5rem var(--gutter) 2.2rem;border-top:1px solid rgba(180,210,241,.12);display:grid;gap:.9rem}
.drawer-foot .dcta{display:flex;gap:.6rem;flex-wrap:wrap}
.drawer-foot p{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-300);letter-spacing:.05em}
.progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:2.5px;width:100%;z-index:950;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-bright));pointer-events:none}
[dir="ltr"] .progress{transform-origin:left}

/* ---------- 9. HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding-block:calc(var(--nav-h) + 3.5rem) clamp(3rem,7vw,6rem);background:linear-gradient(165deg,#01142E 0%,#012A59 52%,#01356F 100%);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 20% 50%,rgba(11,78,155,.22),transparent),radial-gradient(ellipse 60% 80% at 80% 20%,rgba(224,175,26,.08),transparent);animation:meshMove 18s ease-in-out infinite alternate}
@keyframes meshMove{0%{opacity:.8;transform:scale(1)}100%{opacity:1;transform:scale(1.05)}}
.hero-in{position:relative;z-index:3;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:2.6rem}}
.hero h1{font-size:var(--t-hero);font-weight:600;line-height:1.08;letter-spacing:-.03em;color:#F4F8FD;margin-block:1.15rem 1.4rem}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(102%);will-change:transform}
.hero .lead{color:rgba(214,231,248,.86);max-width:56ch;font-weight:400}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:2.2rem}
.hero-badge{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .95rem .42rem .55rem;border:1px solid rgba(224,175,26,.34);border-radius:var(--r-pill);background:rgba(224,175,26,.09);backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);box-shadow:0 4px 16px rgba(224,175,26,.12)}
.hero-badge b{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;background:var(--gold);color:var(--ink-900);padding:.24rem .55rem;border-radius:var(--r-pill);font-weight:700}
.hero-badge span{font-size:.82rem;color:#F0DCA6;letter-spacing:.01em}
.hero-vis{position:relative;aspect-ratio:1;width:100%;max-width:480px;margin-inline:auto;display:grid;place-items:center}
.hero-vis .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(180,210,241,.16)}
.hero-vis .ring.r2{inset:12%;border-color:rgba(180,210,241,.11);border-style:dashed}
.hero-vis .ring.r3{inset:24%;border-color:rgba(224,175,26,.20)}
.hero-vis .spin{position:absolute;inset:0;animation:spin 34s linear infinite;will-change:transform}
.hero-vis .spin.rev{animation-duration:52s;animation-direction:reverse;inset:12%}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-vis .node{position:absolute;top:-7px;left:50%;width:13px;height:13px;margin-inline-start:-6.5px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(224,175,26,.16),0 0 22px rgba(224,175,26,.75)}
.hero-vis .node.n2{top:auto;bottom:-7px;background:var(--ink-300);box-shadow:0 0 0 5px rgba(107,163,224,.14),0 0 20px rgba(107,163,224,.6)}
.hero-vis .node.n3{top:50%;left:-7px;margin-block-start:-6.5px;margin-inline-start:0;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12),0 0 18px rgba(255,255,255,.5)}
.hero-vis .core{position:relative;width:58%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,rgba(11,78,155,.6),rgba(1,20,46,.4));border:1px solid rgba(180,210,241,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 60px rgba(224,175,26,.09),0 30px 80px rgba(0,0,0,.45),0 0 40px rgba(11,78,155,.3)}
.hero-vis .core img{width:70%;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
.hero-vis .pulse{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(224,175,26,.4);animation:pulse 3.6s var(--e-out) infinite}
@keyframes pulse{0%{transform:scale(.86);opacity:.7}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
@media(max-width:960px){.hero-vis{max-width:340px}}
@media(max-width:520px){.hero-vis{display:none}}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-block-start:clamp(2.8rem,6vw,4.6rem);background:rgba(180,210,241,.14);border:1px solid rgba(180,210,241,.14);border-radius:var(--r-lg);overflow:hidden}
.hero-stats .st{padding:clamp(1.1rem,2.4vw,1.7rem);background:rgba(1,20,46,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background-color var(--d) var(--e-out),transform var(--d-fast) var(--e-spring)}
.hero-stats .st:hover{background:rgba(1,58,122,.5);transform:translateY(-2px)}
.hero-stats .st b{display:block;font-family:var(--f-mono);font-weight:600;letter-spacing:-.045em;font-size:clamp(1.5rem,2.7vw,2.2rem);color:var(--gold);line-height:1;margin-bottom:.55rem;white-space:nowrap}
.hero-stats .st > span{font-size:.8rem;line-height:1.5;color:rgba(190,214,238,.8);display:block}
.hero-stats .st b .counter{display:inline;font-size:inherit;color:inherit}
@media(max-width:800px){.hero-stats{grid-template-columns:repeat(2,1fr)}}
.scroll-hint{position:absolute;inset-block-end:1.6rem;inset-inline-start:50%;transform:translateX(-50%);z-index:4;display:grid;justify-items:center;gap:.55rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(180,210,241,.55)}
.scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,var(--gold),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset-inline:0;height:10px;background:var(--gold-bright);animation:sdown 2.1s var(--e-inout) infinite}
@keyframes sdown{0%{top:-10px}60%,100%{top:38px}}
@media(max-height:720px){.scroll-hint{display:none}}

/* ---------- 10. TRACK CARDS ---------- */
.track{position:relative;display:flex;flex-direction:column;padding:clamp(1.7rem,3vw,2.5rem);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);overflow:hidden;isolation:isolate;transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .55s var(--e-out)}
.track::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,transparent 50%);opacity:0;transition:opacity .55s var(--e-out);pointer-events:none}
.track:hover::after{opacity:1}
.track::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:3px;background:var(--tc,var(--gold));transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out)}
:lang(en) .track::before{transform-origin:left}
.track:hover{transform:translateY(-8px);box-shadow:var(--sh-3),0 0 0 1px rgba(224,175,26,.08);border-color:transparent}
.track:hover::before{transform:scaleX(1)}
.track .tnum{font-family:var(--f-mono);font-size:clamp(3.4rem,7vw,5.2rem);font-weight:600;line-height:.85;color:var(--tc,var(--gold));opacity:.14;letter-spacing:-.06em;margin-bottom:.4rem;transition:opacity .55s var(--e-out),transform .55s var(--e-out)}
.track:hover .tnum{opacity:.26;transform:translateY(-3px)}
.track h3{margin-bottom:.35rem}
.track .tsub{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tc,var(--gold-deep));margin-bottom:1rem;display:block;font-weight:500}
.track p{color:var(--text-2);font-size:.97rem;line-height:1.78;flex:1}
.track .ticon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.3rem;background:color-mix(in srgb,var(--tc,var(--gold)) 12%,transparent);color:var(--tc,var(--gold-deep));border:1px solid color-mix(in srgb,var(--tc,var(--gold)) 26%,transparent);transition:transform .55s var(--e-spring),background-color .55s var(--e-out),box-shadow .55s var(--e-out)}
.track:hover .ticon{transform:rotate(-8deg) scale(1.1);box-shadow:0 8px 20px color-mix(in srgb,var(--tc,var(--gold)) 30%,transparent)}
.track .ticon svg{width:22px;height:22px}
.tracks-grid{position:relative}
.tracks-grid::before{content:"";position:absolute;inset-block-start:50%;inset-inline:6%;height:1px;background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px);z-index:-1}
@media(max-width:1000px){.tracks-grid::before{display:none}}

/* ---------- 11. FOUNDER ---------- */
.founder{position:relative;overflow:hidden}
.founder-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,5rem);align-items:center}
@media(max-width:900px){.founder-grid{grid-template-columns:1fr;gap:2.5rem}}
.portrait{position:relative;max-width:min(420px, 90vw);margin-inline:auto;width:100%}
.portrait .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;transition:transform 1.1s var(--e-out),filter 1.1s var(--e-out);filter:saturate(1.03) contrast(1.03);display:block}
@media(max-width:480px){ .portrait .offset { inset-block: 15px -15px; inset-inline: 15px -15px; } }
.portrait .frame{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);isolation:isolate;background:var(--ink-800)}
.portrait .frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;transition:transform 1.1s var(--e-out),filter 1.1s var(--e-out);filter:saturate(1.03) contrast(1.03)}
.portrait:hover .frame img{transform:scale(1.045);filter:saturate(1.1) contrast(1.05)}
.portrait .frame::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(1,20,46,.65),transparent 48%)}
.portrait .offset{position:absolute;inset-block:26px -26px;inset-inline:26px -26px;border:1.5px solid var(--gold);border-radius:var(--r-xl);z-index:-1;transition:transform .55s var(--e-out)}
.portrait:hover .offset{transform:translate(4px,-4px)}
.portrait .cap{position:absolute;z-index:3;inset-block-end:1.15rem;inset-inline:1.15rem;color:#fff}
.portrait .cap b{display:block;font-family:var(--f-display);font-size:1.22rem;font-weight:600;letter-spacing:-.01em}
.portrait .cap span{font-family:var(--f-mono);font-size:.67rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-bright)}
.f-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-block:1.3rem}
.f-tags .tag { max-width: 100%; }
@media (max-width: 480px) {
  .f-tags { gap: 0.4rem; }
  .tag { font-size: 0.72rem; padding: 0.35rem 0.7rem; }
}
.tag{display:inline-flex;align-items:center;gap:.42rem;padding:.4rem .82rem;border-radius:var(--r-pill);font-size:.795rem;font-weight:500;background:var(--gold-wash);color:var(--gold-deep);border:1px solid rgba(224,175,26,.3);transition:background-color var(--d-fast) var(--e-out),transform var(--d-fast) var(--e-spring);line-height:1.3;text-align:start;white-space:normal;word-break:break-word}
.tag:hover{transform:scale(1.04);background:rgba(224,175,26,.15)}
.on-ink .tag{color:var(--gold-bright);background:rgba(224,175,26,.11)}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.quote{position:relative;margin-block:1.8rem;padding:1.5rem 1.75rem;border-radius:var(--r-lg);background:linear-gradient(135deg,rgba(224,175,26,.09),rgba(224,175,26,.02));border-inline-start:3px solid var(--gold);font-family:var(--f-display);font-size:clamp(1.02rem,1.6vw,1.24rem);font-weight:500;line-height:1.7;color:var(--text);letter-spacing:-.012em;transition:box-shadow var(--d) var(--e-out)}
.quote:hover{box-shadow:0 8px 30px rgba(224,175,26,.12)}
.quote::before{content:"\201C";position:absolute;inset-block-start:-.15em;inset-inline-end:.6rem;font-family:var(--f-display);font-size:clamp(3rem, 8vw, 5rem);color:var(--gold);opacity:.2;line-height:1;pointer-events:none}
.creds{display:grid;gap:.75rem;margin-block-start:1.6rem}
.creds li{display:flex;gap:.82rem;align-items:flex-start;font-size:.945rem;color:var(--text-2);line-height:1.65}
.creds li svg{width:19px;height:19px;flex:none;color:var(--gold-deep);margin-block-start:.24rem}
.on-ink .creds li svg{color:var(--gold)}

/* ---------- 12. PROGRAMS ---------- */
.prog{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .55s var(--e-out)}
.prog:hover{transform:translateY(-8px);box-shadow:var(--sh-3),0 0 0 1px rgba(224,175,26,.06);border-color:rgba(224,175,26,.2)}
.prog-media{position:relative;aspect-ratio:16/10;background:var(--pm,linear-gradient(140deg,#EFF5FC,#DCE9F7));overflow:hidden}
.prog-media::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,transparent 60%);pointer-events:none;z-index:1}
.prog-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .7s var(--e-out),filter .7s var(--e-out)}
.prog:hover .prog-media img{transform:scale(1.06)}
.prog-media .age{position:absolute;inset-block-start:.85rem;inset-inline-end:.85rem;z-index:2;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:.32rem .7rem;border-radius:var(--r-pill);background:var(--ink);color:#fff}
.prog-body{padding:clamp(1.3rem,2.4vw,1.8rem);display:flex;flex-direction:column;flex:1}
.prog-body h3{margin-bottom:.55rem}
.prog-body > p{color:var(--text-2);font-size:.94rem;line-height:1.72;margin-bottom:1.1rem}
.prog-outcome{margin-block-start:1.2rem;padding-block-start:1.1rem;border-top:1px solid var(--line-soft)}
.prog-outcome .kicker{margin-bottom:.45rem}
.prog-outcome p{font-size:.9rem;color:var(--text-2);margin:0}
.prog-actions{margin-block-start:1rem;display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.btn-block{width:100%;margin-top:.4rem;justify-content:center}
.feat{display:grid;gap:.58rem;margin-block-start:auto;padding-block-start:1.1rem;border-top:1px solid var(--line-soft)}
.feat li{display:flex;gap:.62rem;align-items:flex-start;font-size:.885rem;color:var(--text-2);line-height:1.6}
.feat li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none;margin-block-start:.53rem;transition:transform var(--d-fast) var(--e-spring)}
.feat li:hover::before{transform:scale(1.5)}

/* ---------- 13. JAMATI UNIVERSITY BADGE (NEW) ---------- */
.jamati-univ-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.52rem 1.1rem .52rem .65rem;border-radius:var(--r-pill);background:linear-gradient(135deg,rgba(15,123,108,.15),rgba(11,78,155,.1));border:1px solid rgba(15,123,108,.35);margin-block:.85rem 0;font-size:.83rem;font-weight:600;color:#0F7B6C;transition:transform var(--d-fast) var(--e-spring),box-shadow var(--d-fast) var(--e-out)}
.jamati-univ-badge:hover{transform:scale(1.03);box-shadow:0 4px 16px rgba(15,123,108,.18)}
.jamati-univ-badge svg{width:16px;height:16px;flex:none;color:#0F7B6C}
.jamati-univ-badge .badge-label{color:var(--text-2);font-weight:400;font-size:.78rem}
.jamati-univ-badge strong{color:#0F7B6C}

/* ---------- 14. PARTNERS SECTION ---------- */
.partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.1rem;
  margin-bottom: 3rem;
}

.partner-logo-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.15rem;
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out), border-color .4s var(--e-out);
}

.partner-logo-tile:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--sh-3);
}

.partner-logo-tile img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 1100px) {
  .partners-logo-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; }
}

@media (max-width: 640px) {
  .partners-logo-grid { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .partner-logo-tile { padding: .8rem; border-radius: var(--r); }
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.p-card-new {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  transition: transform 0.4s var(--e-out), box-shadow 0.4s var(--e-out), border-color 0.4s var(--e-out);
}

.p-card-new:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: var(--sh-3);
}

.p-logo-wrap {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  border-radius: 12px;
  padding: 0.6rem;
}

.p-logo-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.p-info h3 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
  color: var(--ink);
}

.p-info p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.5;
}

.more-partners-wrap {
  text-align: center;
  margin-top: 2rem;
}

.more-partners-content {
  margin-top: 3rem;
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.more-partners-content.hidden {
  display: none;
  opacity: 0;
  transform: translateY(20px);
}

.p-card-mini {
  background: rgba(255, 255, 255, 0.5);
  border: 1px dashed var(--line);
  padding: 1.4rem;
  border-radius: var(--r);
  text-align: center;
  transition: all 0.3s ease;
}

.p-card-mini:hover {
  background: #fff;
  border-style: solid;
  border-color: var(--gold);
}

.p-card-mini h4 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--ink);
}

.p-card-mini p {
  font-size: 0.82rem;
  color: var(--text-3);
}

@media (max-width: 768px) {
  .p-card-new {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }
}


/* ---------- 15. STORYTELLING-DRIVEN STUDENT JOURNEY ---------- */
.story-journey-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(185deg, #010F24 0%, #011D42 50%, #012A59 100%) !important;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.story-kicker {
  background: rgba(224, 175, 26, 0.15);
  border: 1px solid rgba(224, 175, 26, 0.4);
  color: var(--gold);
}

/* Quick Navigation Pills */
.story-nav-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 2rem;
}
.snp-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(238, 244, 252, 0.85);
  padding: 0.55rem 1.2rem;
  border-radius: 99px;
  font-family: var(--f-display);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}
.snp-item .snp-num {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(224, 175, 26, 0.15);
  padding: 2px 7px;
  border-radius: 6px;
}
.snp-item:hover, .snp-item.active {
  background: rgba(224, 175, 26, 0.2);
  border-color: var(--gold);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 175, 26, 0.2);
}

/* Story Timeline Container */
.story-timeline-container {
  position: relative;
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* Animated Central/Side Spine Track */
.story-spine-track {
  position: absolute;
  top: 40px;
  bottom: 40px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  z-index: 1;
}
.story-spine-progress {
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, var(--gold) 0%, #0891B2 100%);
  border-radius: 99px;
  box-shadow: 0 0 15px var(--gold);
  transition: height 0.3s ease;
}

/* Story Chapter Card */
.story-chapter-card {
  position: relative;
  z-index: 2;
}
.story-node-indicator {
  position: absolute;
  top: 24px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #012A59 0%, #0B4E9B 100%);
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: 0 0 25px rgba(224, 175, 26, 0.4);
}
.sni-num {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--gold);
}
.sni-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  opacity: 0.4;
  animation: pulseNode 2.5s infinite ease-out;
}
@keyframes pulseNode {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

.story-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 2.2rem 2.6rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.story-chapter-card:hover .story-card-inner {
  transform: translateY(-6px);
  border-color: rgba(224, 175, 26, 0.45);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 30px rgba(224, 175, 26, 0.15);
}

.story-chapter-card.reverse .story-card-inner {
  direction: ltr;
}
.story-chapter-card.reverse .story-text-side,
.story-chapter-card.reverse .story-visual-side {
  direction: rtl;
}

/* Story Text Side */
.story-step-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.05em;
  background: rgba(224, 175, 26, 0.12);
  border: 1px solid rgba(224, 175, 26, 0.3);
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 0.8rem;
}
.story-text-side h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.8rem;
}
.story-text-side p {
  font-size: 0.95rem;
  color: rgba(238, 244, 252, 0.85);
  line-height: 1.7;
  margin-bottom: 1.4rem;
}
.story-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sh-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #EEF4FC;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 4px 12px;
  border-radius: 99px;
}

/* Story Visual Widgets */
.story-widget-card {
  background: rgba(1, 20, 46, 0.85);
  border: 1px solid rgba(224, 175, 26, 0.3);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.sw-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sw-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.sw-dot.red { background: #EF4444; }
.sw-dot.yellow { background: #F59E0B; }
.sw-dot.green { background: #10B981; }

.sw-title {
  font-size: 0.82rem;
  font-family: var(--f-mono);
  font-weight: 700;
  color: var(--gold);
}
.sw-badge {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  background: rgba(11, 78, 155, 0.2);
  color: #60A5FA;
  border: 1px solid rgba(11, 78, 155, 0.4);
}
.sw-badge.gold {
  background: rgba(224, 175, 26, 0.2);
  color: var(--gold);
  border-color: rgba(224, 175, 26, 0.4);
}

/* AI Chat Preview Widget */
.sw-chat-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.chat-bubble {
  max-width: 88%;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.user-bubble {
  align-self: flex-start;
  background: rgba(11, 78, 155, 0.35);
  border: 1px solid rgba(11, 78, 155, 0.5);
  color: #FFFFFF;
}
.ai-bubble {
  align-self: flex-end;
  background: rgba(224, 175, 26, 0.12);
  border: 1px solid rgba(224, 175, 26, 0.3);
  color: #EEF4FC;
  display: flex;
  gap: 0.6rem;
}
.ai-avatar {
  font-size: 1.1rem;
}
.ai-msg strong {
  color: var(--gold);
  display: block;
  font-size: 0.8rem;
}
.chat-typing-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--f-mono);
  margin-top: 0.3rem;
}
.chat-typing-indicator span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: typingDot 1.4s infinite ease-in-out;
}
@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Blueprint Grid Preview Widget */
.bg-grid-display {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
.bg-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(238, 244, 252, 0.85);
}
.bg-item.highlighted {
  border-color: var(--gold);
  background: rgba(224, 175, 26, 0.15);
  color: #FFFFFF;
}
.bgi-num {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--gold);
}

/* Hardware Spec Preview Widget */
.hw-spec-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.hws-item {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
.hws-label {
  color: rgba(255, 255, 255, 0.6);
}
.hws-val {
  color: var(--gold);
  font-family: var(--f-mono);
  font-weight: 700;
}
.hws-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #10B981;
  font-weight: 700;
}
.hws-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 10px #10B981;
}

/* Certificate Score Widget */
.cert-body {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-block: 0.5rem;
}
.cert-score-circle {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 175, 26, 0.25) 0%, rgba(1, 42, 89, 0.8) 100%);
  border: 2px solid var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(224, 175, 26, 0.3);
}
.csc-score {
  font-family: var(--f-mono);
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
}
.csc-lbl {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.7);
}
.cert-details h5 {
  font-size: 0.95rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.2rem;
}
.cert-details p {
  font-size: 0.82rem;
  color: rgba(238, 244, 252, 0.75);
  line-height: 1.4;
  margin-bottom: 0;
}

/* Responsive Story Journey */
@media (max-width: 900px) {
  .story-spine-track, .story-node-indicator {
    display: none;
  }
  .story-card-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
    padding: 1.6rem;
  }
  .story-chapter-card.reverse .story-card-inner {
    direction: rtl;
  }
}


/* ---------- 16. CTA BAND ---------- */
.cta-band{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(150deg,#01142E,#012A59 60%,#013A7A)}
.cta-in{position:relative;z-index:3;text-align:center;display:grid;justify-items:center;gap:1.15rem}
.cta-in h2{color:#F4F8FD;max-width:19ch;font-size:var(--t-h1)}
.cta-in p{color:rgba(207,226,245,.84);max-width:56ch;font-size:var(--t-lead);font-weight:400}
.cta-btns{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-block-start:1rem}
.cta-mini{display:flex;flex-wrap:wrap;gap:.55rem 1.6rem;justify-content:center;margin-block-start:1.4rem;font-family:var(--f-mono);font-size:.78rem;color:rgba(180,210,241,.72);letter-spacing:.03em}
.cta-mini a{display:inline-flex;align-items:center;gap:.45rem;transition:color var(--d-fast) var(--e-out)}
.cta-mini a:hover{color:var(--gold-bright)}
.cta-mini svg{width:15px;height:15px;opacity:.8}

/* ---------- 17. CONTACT ---------- */
.chan{position:relative;display:flex;gap:1.05rem;align-items:flex-start;padding:1.4rem 1.5rem;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),border-color .45s var(--e-out)}
.chan::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(255,255,255,0.06),transparent);opacity:0;transition:opacity .45s var(--e-out);pointer-events:none}
.chan:hover::before{opacity:1}
.chan:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--cc,var(--gold))}
.chan .ci{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;background:var(--cc,var(--ink));transition:transform .45s var(--e-spring),box-shadow .45s var(--e-out)}
.chan:hover .ci{transform:rotate(-7deg) scale(1.08)}
.chan .ci svg{width:23px;height:23px}
.chan b{display:block;font-family:var(--f-display);font-weight:600;font-size:1.02rem;margin-bottom:.2rem}
.chan span{display:block;font-size:.875rem;color:var(--text-2);line-height:1.55}
.chan .cval{font-family:var(--f-mono);font-size:.83rem;color:var(--ink-600);margin-block-start:.42rem;direction:ltr;display:inline-block;font-weight:500}
.on-ink .chan{background:rgba(255,255,255,.05)}
.on-ink .chan .cval{color:var(--gold)}
.map-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--sh-2);background:var(--paper-2);min-height:340px;width:100%}
@media(max-width:768px){.map-wrap{min-height:280px;margin-top:1.5rem}}
.map-wrap iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.28) contrast(1.04)}
.fab {
  position: fixed;
  z-index: 880;
  bottom: clamp(1rem, 3vw, 1.7rem);
  inset-inline-start: clamp(1rem, 3vw, 1.7rem);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 26px rgba(37, 211, 102, .42);
  transition: transform .45s var(--e-spring), box-shadow .45s var(--e-out), opacity .4s ease;
  opacity: 0;
  transform: scale(.4) translateY(20px);
  pointer-events: none;
}

/* Hide FABs when drawer is open or on scroll */
.drawer-open .fab, .drawer-open .ai-fab, .fab-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(20px) scale(0.8) !important;
}
.fab.show{opacity:1;transform:none;pointer-events:auto}
.fab:hover{transform:scale(1.1);box-shadow:0 14px 42px rgba(37,211,102,.58)}
.fab svg{width:29px;height:29px}
.fab::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:pulse 2.8s var(--e-out) infinite}
.fab .tip{position:absolute;inset-inline-end:calc(100% + 12px);white-space:nowrap;background:var(--ink-900);color:#fff;font-size:.8rem;padding:.45rem .8rem;border-radius:var(--r-sm);opacity:0;transform:translateX(8px);transition:all var(--d) var(--e-out);pointer-events:none;box-shadow:var(--sh-2)}
.fab:hover .tip{opacity:1;transform:none}
@media(max-width:560px){.fab .tip{display:none}}

/* ---------- 18. FOOTER ---------- */
.foot{position:relative;background:var(--ink-900);color:#D8E5F4;overflow:hidden;isolation:isolate}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(1.8rem,4vw,3.5rem);padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem)}
@media(max-width:900px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:2rem}}
.foot-brand img{height:56px;width:auto;margin-bottom:1.1rem}
.foot-brand p{font-size:.92rem;color:#9FB8D4;line-height:1.75;max-width:38ch}
.foot h5{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem;font-weight:600}
.foot ul{display:grid;gap:.62rem}
.foot ul a,.foot ul li{font-size:.91rem;color:#9FB8D4;transition:color var(--d-fast) var(--e-out);line-height:1.55}
.foot ul a{display:inline-flex;align-items:center;gap:.4rem}
.foot ul a:hover{color:var(--gold-bright)}
.foot ul a::before{content:"";width:0;height:1px;background:var(--gold);transition:width var(--d-fast) var(--e-out)}
.foot ul a:hover::before{width:10px}
.foot-bot{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;padding-block:1.5rem;border-top:1px solid rgba(180,210,241,.12);font-family:var(--f-mono);font-size:.735rem;color:#7794B5;letter-spacing:.02em}
.foot-bot b{color:var(--gold);font-weight:500}
.socials{display:flex;gap:.5rem}
.socials a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid rgba(180,210,241,.18);color:#9FB8D4;transition:all var(--d-fast) var(--e-out)}
.socials a:hover{background:var(--gold);color:var(--ink-900);border-color:var(--gold);transform:translateY(-3px)}
.socials svg{width:16px;height:16px}

/* ---------- 19. PAGE HEADER ---------- */
.phead{position:relative;padding-block:calc(var(--nav-h) + clamp(3rem,6vw,5.5rem)) clamp(2.5rem,5vw,4.5rem);background:linear-gradient(160deg,#01142E,#012A59 70%,#01356F);overflow:hidden;isolation:isolate}
.phead-in{position:relative;z-index:3;max-width:70ch}
.phead h1{color:#F4F8FD;margin-block:.9rem .9rem}
.phead p{color:rgba(207,226,245,.82);font-size:var(--t-lead);font-weight:400}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--f-mono);font-size:.72rem;color:rgba(180,210,241,.62);letter-spacing:.05em}
.crumbs a:hover{color:var(--gold-bright)}
.crumbs span{opacity:.5}

/* ---------- 20. REVEAL ANIMATIONS ---------- */
[data-rv]{opacity:0;will-change:transform,opacity}
[data-rv="up"]{transform:translateY(32px)}
[data-rv="down"]{transform:translateY(-24px)}
[data-rv="start"]{transform:translateX(34px)}
[data-rv="end"]{transform:translateX(-34px)}
[data-rv="scale"]{transform:scale(.94)}
[data-rv="blur"]{filter:blur(9px);transform:translateY(16px)}
[dir="ltr"] [data-rv="start"]{transform:translateX(-34px)}
[dir="ltr"] [data-rv="end"]{transform:translateX(34px)}
[data-rv].is-in{opacity:1;transform:none!important;filter:none;transition:opacity .9s var(--e-out) var(--dl,0s),transform 1s var(--e-out) var(--dl,0s),filter .9s var(--e-out) var(--dl,0s)}
.counter{display:inline-block;min-width:1ch;will-change:contents}

/* ---------- 21. UTILITIES ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-block-start:-100px;inset-inline-start:1rem;z-index:10001;background:var(--gold);color:var(--ink-900);padding:.7rem 1.2rem;border-radius:var(--r);font-weight:600;transition:top var(--d) var(--e-out)}
.skip:focus{inset-block-start:1rem}
.center{text-align:center}
.mt-a{margin-block-start:auto}
.hide-sm{display:initial}
@media(max-width:640px){.hide-sm{display:none}}
html[lang="ar"] [data-only="en"]{display:none!important}
html[lang="en"] [data-only="ar"]{display:none!important}
html.i18n-pending body{visibility:hidden}

/* ARABIC TYPOGRAPHY CORRECTIONS */
html[lang="ar"] .kicker,
html[lang="ar"] .eyebrow,
html[lang="ar"] .tsub,
html[lang="ar"] .ptype,
html[lang="ar"] .foot h5,
html[lang="ar"] .brand-txt span,
html[lang="ar"] .step .sn,
html[lang="ar"] .portrait .cap span,
html[lang="ar"] .crumbs,
html[lang="ar"] .foot-bot,
html[lang="ar"] .cta-mini,
html[lang="ar"] .scroll-hint,
html[lang="ar"] .drawer-foot p,
html[lang="ar"] .chan .cval,
html[lang="ar"] .list-cols li,
html[lang="ar"] .hero-badge span{letter-spacing:normal;font-family:var(--f-body);font-weight:600}
html[lang="ar"] .foot-bot,html[lang="ar"] .cta-mini,html[lang="ar"] .list-cols li,html[lang="ar"] .drawer-foot p{font-weight:400}
html[lang="ar"] .chan .cval[dir="ltr"],html[lang="ar"] [dir="ltr"]{font-family:var(--f-mono);letter-spacing:.02em}
html[lang="ar"] .kicker,html[lang="ar"] .foot h5{text-transform:none}
.lat{font-family:var(--f-mono)!important;letter-spacing:.16em!important;text-transform:uppercase}
html[lang="ar"] .num,html[lang="ar"] .mono,html[lang="ar"] .step .sn b,html[lang="ar"] .tnum,html[lang="ar"] .hero-stats .st b,html[lang="ar"] .age,html[lang="ar"] .drawer-nav a em,html[lang="ar"] .pmark{font-family:var(--f-mono);letter-spacing:-.02em}
html[lang="ar"] body{line-height:1.85}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:normal;line-height:1.4}
html[lang="ar"] .hero h1{line-height:1.42}
html[lang="ar"] .quote{line-height:1.85}
html[lang="en"] body{line-height:1.68}
html[lang="en"] .lead{line-height:1.66}
html[lang="en"] .hero h1{line-height:1.09}

/* ---------- 22. RESPONSIVE NAV ---------- */
@media(max-width:1080px){.nav-links{display:none}.burger{display:flex}.nav-actions .btn{display:none}}
@media(min-width:1081px){.drawer{display:none}}

/* ---------- 23. TABS ---------- */
.tabs-nav{display:flex;gap:.6rem;border-bottom:1px solid var(--line-soft);margin-bottom:2.4rem;overflow-x:auto;padding-bottom:.5rem}
.tabs-nav::-webkit-scrollbar{height:3px}
.tabs-nav::-webkit-scrollbar-track{background:transparent}
.tabs-nav::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}
.active-tab-btn{background:var(--ink)!important;color:#fff!important}

/* ---------- 24. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1!important;transform:none!important;filter:none!important}
  .hero h1 .ln > span{transform:none!important}
  #intro{display:none!important}
  .marquee-track{animation:none}
  .grain{display:none}
  .hero::before{animation:none}
}

/* ---------- 25. PRINT ---------- */
@media print{
  .nav,.drawer,.fab,.grain,.progress,#intro,.scroll-hint{display:none!important}
  body{background:#fff;color:#000}
  .hero,.cta-band,.phead,.foot{background:#fff!important;color:#000!important}
  .hero h1,.cta-in h2,.phead h1{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}

/* ========== AI ASSISTANT ========== */
.ai-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--sh-1);
  font-family: var(--font-display); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; flex: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out),
              background-color var(--t-fast) var(--e-out);
}
.ai-btn:hover  { transform: translate(-2px,-2px); box-shadow: var(--sh-2); }
.ai-btn:active { transform: translate(1px,1px);  box-shadow: none; }
.ai-btn[aria-expanded="true"] { background: var(--gold); }

.ai-btn-spark { display: grid; place-items: center; flex: none; }
.ai-btn-spark svg { width: 19px; height: 19px; animation: spark 4.5s ease-in-out infinite; }
@keyframes spark {
  0%, 82%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  88%           { opacity: .65; transform: scale(1.16) rotate(-9deg); }
}

/* ---- scrim (mobile only) ---- */
.ai-scrim {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(4, 16, 32, .5);
  opacity: 0; transition: opacity var(--t-mid) var(--e-out);
}
.ai-scrim.is-open { opacity: 1; }

/* ---- panel ---- */
.ai-panel {
  position: fixed;
  z-index: 200;
  bottom: 22px;
  inset-inline-end: 22px;
  width: min(404px, calc(100vw - 32px));
  height: min(624px, calc(100dvh - 130px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transform-origin: bottom var(--panel-origin, right);
  transition: opacity var(--t-mid) var(--e-out),
              transform var(--t-mid) var(--e-spring);
}
.ai-panel.is-open { opacity: 1; transform: none; }

.ai-head {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 15px;
  background: rgba(1, 47, 99, 0.08);
  border-bottom: var(--bw) solid var(--border);
  flex: none;
}
.ai-head-mark {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 11px; overflow: hidden;
}
.ai-head-mark img { width: 28px; height: auto; }
.ai-head-text { min-width: 0; line-height: 1.3; }
.ai-head-text b { display: block; font-family: var(--font-display); font-size: 0.98rem; }
.ai-head-text small { display: block; font-size: 0.75rem; color: var(--muted); }
.ai-close {
  margin-inline-start: auto; flex: none;
  width: 46px; height: 46px; min-width: 46px; min-height: 46px;
  display: grid; place-items: center; flex: none;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: 50%; cursor: pointer;
  transition: transform var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.ai-close:hover { transform: rotate(90deg); background: var(--bg); }
.ai-close svg { width: 16px; height: 16px; }

/* ---- message log ---- */
.ai-log {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.ai-msg { max-width: 92%; display: flex; flex-direction: column; gap: 7px; }
.ai-msg--user { align-self: flex-end; align-items: flex-end; }
.ai-msg--bot  { align-self: flex-start; }

.ai-bubble {
  border: 2px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: 11px 15px;
  font-size: 0.95rem;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg--user .ai-bubble { background: var(--ink); color: #fff; border-end-end-radius: 5px; }
.ai-msg--bot  .ai-bubble { background: var(--paper-2); border-end-start-radius: 5px; }

.ai-msg--bot .ai-bubble strong { font-weight: 700; }

.ai-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-source {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-pill); padding: 4px 12px;
  font-size: 0.75rem; font-weight: 600;
  transition: background-color var(--t-fast) var(--e-out);
}
.ai-source:hover { background: rgba(1, 47, 99, 0.08); }
.ai-source::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* typing indicator */
.ai-typing { display: inline-flex; gap: 5px; padding: 4px 2px; }
.ai-typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted);
  animation: typing 1.25s ease-in-out infinite;
}
.ai-typing i:nth-child(2) { animation-delay: .16s; }
.ai-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

/* ---- suggested questions ---- */
.ai-suggest {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding: 0 var(--sp-4) var(--sp-3);
  flex: none;
}
.ai-suggest:empty { display: none; }
.ai-chip {
  background: var(--paper-2);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-family: inherit; font-size: 0.8rem; font-weight: 500;
  cursor: pointer; text-align: start;
  transition: transform var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.ai-chip:hover  { background: rgba(1, 47, 99, 0.08); transform: translateY(-2px); }
.ai-chip:active { transform: translateY(0); }

/* ---- composer ---- */
.ai-form {
  display: flex; align-items: center; gap: 9px;
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--bw) solid var(--border);
  background: var(--bg);
  flex: none;
}
.ai-form input {
  flex: 1; min-width: 0;
  min-height: 46px; padding: 0 16px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  font-family: inherit; font-size: 0.95rem; color: inherit;
  outline: 0;
}
.ai-form input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.ai-send {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  border: 2px solid var(--border); border-radius: 50%;
  box-shadow: var(--sh-1); cursor: pointer;
  transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.ai-send:hover  { transform: translate(-2px,-2px); box-shadow: var(--sh-2); }
.ai-send:active { transform: translate(1px,1px);  box-shadow: none; }
.ai-send:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: var(--sh-1); }
.ai-send svg { width: 18px; height: 18px; }
html[dir="rtl"] .ai-send svg { transform: scaleX(-1); }

.ai-foot {
  padding: 9px var(--sp-4) 12px;
  font-size: 0.72rem; line-height: 1.5;
  color: var(--muted);
  background: var(--bg);
  border-top: 1.5px solid var(--border);
  flex: none;
}

/* ---- responsive ---- */
@media (max-width: 620px) {
  .ai-btn-label { display: none; }
  .ai-btn { padding: 0; width: 44px; justify-content: center; }
  .ai-panel {
    inset: auto 0 0 0;
    width: 100%;
    height: min(88dvh, 720px);
    border-width: 3px 0 0 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: none;
    transform: translateY(100%);
    transform-origin: bottom center;
  }
  .ai-panel.is-open { transform: none; }
}
@media (max-width: 780px) and (min-width: 621px) {
  .ai-btn-label { display: none; }
  .ai-btn { padding: 0; width: 44px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-panel { transform: none; }
  .ai-btn-spark svg { animation: none; }
  .ai-typing i { animation: none; opacity: .6; }
  .ai-log { scroll-behavior: auto; }
}

/* panel grows from the corner it is docked to, in either direction */
html[dir="rtl"] .ai-panel { --panel-origin: left; }
html[dir="ltr"] .ai-panel { --panel-origin: right; }

/* ===========================================================
   27. HERO DIAGRAM — track highlight on hover
   The stack is fixed in place; pointing at a slab lights that
   track and quiets the others so the diagram reads as content.
   =========================================================== */
.stack-layer--1 { --glow: var(--iso-a); }
.stack-layer--2 { --glow: var(--iso-b); }
.stack-layer--3 { --glow: var(--iso-c); }

.stack-layer {
  cursor: pointer;
  translate: 0 0;
  transition: translate 340ms var(--e-spring),
              filter 300ms var(--e-out),
              opacity 300ms var(--e-out);
}
/* the whole slab is the target, not just its stroked outline */
.stack-layer .face--top,
.stack-layer .face--left,
.stack-layer .face--right { pointer-events: auto; }
.stack-svg { pointer-events: none; }
.stack-svg .stack-layer { pointer-events: auto; }

.stack-layer.is-active {
  translate: 0 -14px;
  /* two stacked shadows: a tight rim and a wide bloom, both in the slab's
     own colour, so the light reads as coming from the object itself */
  filter: drop-shadow(0 0 10px var(--glow))
          drop-shadow(0 10px 30px color-mix(in srgb, var(--glow) 60%, transparent))
          brightness(1.07) saturate(1.12);
}
.stack-layer.is-quiet { opacity: .42; filter: saturate(.55); }

.stack-layer.is-active .stack-node {
  fill: var(--glow);
  transition: fill 300ms var(--e-out);
}

/* labels track the same state, in both directions */
/* `scale` is a separate property, so it composes with the float animation's
   transform instead of being overridden by it. */
.stack-tag {
  scale: 1;
  transition: scale 340ms var(--e-spring),
              box-shadow 340ms var(--e-out),
              opacity 300ms var(--e-out),
              background-color 300ms var(--e-out);
  cursor: pointer;
}
.stack-tag.is-active {
  scale: 1.08;
  box-shadow: var(--sh-hover);
  background: var(--paper-2);
}
.stack-tag.is-quiet { opacity: .45; }

/* Browsers without color-mix still get the rim light, just no bloom. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .stack-layer.is-active {
    filter: drop-shadow(0 0 10px var(--glow)) drop-shadow(0 8px 22px var(--glow)) brightness(1.07);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-layer.is-active { translate: 0 0; }
  .stack-tag.is-active { scale: 1; }
}

/* Hover highlighting is pointer-only; touch users get the plain diagram. */
@media (hover: none) {
  .stack-layer, .stack-tag { cursor: default; }
}

/* ========== MODERN MINIMALIST INTRO & AI ASSISTANT ========== */
#intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #020b18;
  color: #fff;
  overflow: hidden;
}
#intro .intro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  z-index: 2;
}
#intro .ip-mark {
  width: min(160px, 40vw);
  height: auto;
  filter: drop-shadow(0 0 25px rgba(224, 175, 26, 0.35));
}
#intro .ip-txt {
  font-family: var(--f-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: var(--gold, #e0af1a);
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.5rem;
}
#intro .ip-line {
  width: 140px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 0.5rem;
}
#intro .ip-line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0b4e9b, var(--gold, #e0af1a));
  transform-origin: right;
  transform: scaleX(0);
}
:lang(en) #intro .ip-line i {
  transform-origin: left;
}

/* ========== AI ASSISTANT BUTTON & PANEL ========== */
.ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(135deg, #e0af1a 0%, #f3c846 100%);
  color: #012a59;
  border: none;
  border-radius: 99px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(224, 175, 26, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ai-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(224, 175, 26, 0.5);
}
.ai-btn-spark {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}
.ai-btn-spark svg {
  width: 100%;
  height: 100%;
  animation: sparkPulse 2.5s infinite ease-in-out;
}
@keyframes sparkPulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(15deg); }
}

.ai-fab {
  position: fixed;
  bottom: 24px;
  inset-inline-start: 24px;
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  background: linear-gradient(135deg, #012a59 0%, #0b4e9b 100%);
  color: #e0af1a;
  border: 1px solid rgba(224, 175, 26, 0.4);
  border-radius: 99px;
  box-shadow: 0 8px 25px rgba(1, 42, 89, 0.4);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .ai-fab {
  inset-inline-start: auto;
  inset-inline-end: 24px;
}
.ai-fab:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 12px 30px rgba(1, 42, 89, 0.6);
  border-color: #e0af1a;
}
.ai-fab span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
}

.ai-scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 15, 30, 0.6);
  backdrop-filter: blur(6px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.ai-scrim.is-open, .ai-scrim:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
.ai-panel {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 90px));
  background: #021226;
  border: 1px solid rgba(224, 175, 26, 0.3);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(11, 78, 155, 0.2);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(30px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
[dir="rtl"] .ai-panel {
  inset-inline-start: auto;
  inset-inline-end: 20px;
}
.ai-panel.is-open, .ai-panel:not([hidden]) {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-head-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(224, 175, 26, 0.15);
  display: grid;
  place-items: center;
  padding: 4px;
}
.ai-head-mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.ai-head-text b {
  display: block;
  color: #fff;
  font-size: 0.95rem;
}
.ai-head-text small {
  color: #e0af1a;
  font-size: 0.73rem;
  opacity: 0.9;
}
.ai-close {
  margin-inline-start: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: color 0.2s, background 0.2s;
}
.ai-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.ai-log {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: rgba(0, 0, 0, 0.15);
}
.ai-msg {
  max-width: 86%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ai-msg--user {
  align-self: flex-end;
}
.ai-msg--user .ai-bubble {
  background: linear-gradient(135deg, #0b4e9b 0%, #012a59 100%);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-msg--bot {
  align-self: flex-start;
}
.ai-msg--bot .ai-bubble {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-bubble {
  padding: 0.7rem 0.95rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.ai-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0.5rem 0.9rem;
  background: rgba(0, 0, 0, 0.2);
}
.ai-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 0.76rem;
  cursor: pointer;
  transition: all 0.2s;
}
.ai-chip:hover {
  background: #e0af1a;
  color: #012a59;
  border-color: #e0af1a;
}
.ai-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ai-form input {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  padding: 0.55rem 0.95rem;
  color: #fff;
  font-size: 0.86rem;
  outline: none;
}
.ai-form input:focus {
  border-color: #e0af1a;
}
.ai-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e0af1a;
  color: #012a59;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.ai-send:hover {
  transform: scale(1.08);
}
.ai-foot {
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  padding: 0.25rem 0.8rem 0.5rem;
  margin: 0;
}
/* ========== ECOSYSTEM PARTNERSHIP TREE NETWORKING ========== */
.net-tree-container {
  position: relative;
  padding: 3rem 1.5rem;
  background: radial-gradient(circle at 50% 30%, rgba(11, 78, 155, 0.15), transparent 70%),
              linear-gradient(180deg, rgba(1, 42, 89, 0.04) 0%, rgba(1, 15, 30, 0.08) 100%);
  border-radius: 24px;
  border: 1px solid rgba(224, 175, 26, 0.2);
  overflow: hidden;
  margin-top: 2rem;
}
.net-tree-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.net-tree-lines path {
  stroke: rgba(224, 175, 26, 0.3);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 6 6;
  animation: treeDash 30s linear infinite;
}
@keyframes treeDash {
  to { stroke-dashoffset: -1000; }
}

.net-hub {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.2rem;
  text-align: center;
}
.net-hub-node {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.4rem 2.5rem;
  background: linear-gradient(135deg, #012a59 0%, #0b4e9b 100%);
  border: 2px solid #e0af1a;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1, 42, 89, 0.4), 0 0 25px rgba(224, 175, 26, 0.25);
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.net-hub-node:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 40px rgba(1, 42, 89, 0.6), 0 0 35px rgba(224, 175, 26, 0.4);
}
.net-hub-node img {
  max-height: 54px;
  width: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}
.net-hub-badge {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e0af1a;
  background: rgba(224, 175, 26, 0.15);
  padding: 4px 12px;
  border-radius: 99px;
  letter-spacing: 0.05em;
}
.net-hub-title {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

.net-branches {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}
.net-branch {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 175, 26, 0.2);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 8px 24px rgba(1, 42, 89, 0.06);
}
.net-branch:hover {
  transform: translateY(-6px);
  border-color: #e0af1a;
  box-shadow: 0 16px 40px rgba(11, 78, 155, 0.15), 0 0 25px rgba(224, 175, 26, 0.2);
}
.net-branch-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed rgba(224, 175, 26, 0.3);
}
.net-branch-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(224, 175, 26, 0.2), rgba(11, 78, 155, 0.2));
  display: grid;
  place-items: center;
  color: #e0af1a;
  font-weight: bold;
  flex-shrink: 0;
}
.net-branch-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  color: #012a59;
}

.net-nodes-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.net-node-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(1, 42, 89, 0.08);
  transition: all 0.25s ease;
}
.net-node-card:hover {
  transform: translateX(-4px);
  box-shadow: 0 6px 20px rgba(11, 78, 155, 0.12);
  border-color: #e0af1a;
}
html[dir="ltr"] .net-node-card:hover {
  transform: translateX(4px);
}
.net-node-img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
  background: #fff;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.net-node-info h5 {
  margin: 0 0 0.2rem 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #012a59;
}
.net-node-info p {
  margin: 0;
  font-size: 0.8rem;
  color: #526071;
  line-height: 1.4;
}
.net-node-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0b4e9b;
  background: rgba(11, 78, 155, 0.1);
  padding: 2px 8px;
  border-radius: 99px;
  margin-bottom: 0.3rem;
}
/* ========== SCROLL-DRIVEN STORYTELLING TIMELINE ========== */
.story-timeline-container {
  position: relative;
  max-width: 1000px;
  margin: 3.5rem auto 0;
  padding: 1rem 0.5rem;
}
.story-spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: linear-gradient(180deg, #e0af1a 0%, #0b4e9b 50%, #012a59 100%);
  transform: translateX(-50%);
  border-radius: 4px;
  box-shadow: 0 0 15px rgba(224, 175, 26, 0.4);
}
@media (max-width: 768px) {
  .story-spine {
    left: 20px;
    transform: none;
  }
}

.story-item {
  position: relative;
  display: flex;
  margin-bottom: 3.5rem;
  width: 100%;
}
.story-item:nth-child(odd) {
  justify-content: flex-start;
  padding-inline-end: calc(50% + 2.5rem);
}
.story-item:nth-child(even) {
  justify-content: flex-end;
  padding-inline-start: calc(50% + 2.5rem);
}
@media (max-width: 768px) {
  .story-item:nth-child(odd), .story-item:nth-child(even) {
    justify-content: flex-start;
    padding-inline-start: 3.5rem;
    padding-inline-end: 0;
  }
}

.story-node-dot {
  position: absolute;
  top: 1.8rem;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #021226;
  border: 3.5px solid #e0af1a;
  box-shadow: 0 0 18px rgba(224, 175, 26, 0.8);
  z-index: 5;
  transition: transform 0.3s ease, background 0.3s ease;
}
.story-item:hover .story-node-dot {
  transform: translate(-50%, -50%) scale(1.35);
  background: #e0af1a;
}
@media (max-width: 768px) {
  .story-node-dot {
    left: 20px;
  }
}

.story-card {
  width: 100%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 175, 26, 0.25);
  border-radius: 20px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 12px 35px rgba(1, 42, 89, 0.08);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  position: relative;
}
.story-card:hover {
  transform: translateY(-6px) scale(1.015);
  border-color: #e0af1a;
  box-shadow: 0 20px 45px rgba(11, 78, 155, 0.18), 0 0 25px rgba(224, 175, 26, 0.25);
}
.story-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0b4e9b;
  background: rgba(11, 78, 155, 0.1);
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 0.8rem;
  letter-spacing: 0.03em;
}
.story-card-title {
  font-size: 1.18rem;
  font-weight: 800;
  margin: 0 0 0.5rem 0;
  color: #012a59;
}
.story-card-desc {
  font-size: 0.88rem;
  color: #526071;
  margin: 0 0 1rem 0;
  line-height: 1.6;
}
.story-subnodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(224, 175, 26, 0.25);
}
.story-subnode {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  border: 1px solid rgba(1, 42, 89, 0.08);
}
.story-subnode img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}
.story-subnode-txt h6 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #012a59;
}
.story-subnode-txt p {
  margin: 0;
  font-size: 0.75rem;
  color: #78879b;
}
/* ========== HORIZONTAL RIGHT-TO-LEFT SCROLL STORYTELLING ========== */
.partners-hscroll-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1.5rem 0.5rem 2.5rem;
  scrollbar-width: thin;
  scrollbar-color: #e0af1a rgba(1, 42, 89, 0.1);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.partners-hscroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.partners-hscroll-wrap::-webkit-scrollbar-track {
  background: rgba(1, 42, 89, 0.08);
  border-radius: 99px;
}
.partners-hscroll-wrap::-webkit-scrollbar-thumb {
  background: #e0af1a;
  border-radius: 99px;
}

.partners-hscroll-track {
  display: flex;
  gap: 1.8rem;
  width: max-content;
  padding-inline: 1rem;
}

.hstory-card {
  scroll-snap-align: start;
  flex: 0 0 350px;
  width: 350px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 175, 26, 0.25);
  border-radius: 24px;
  padding: 1.6rem 1.8rem;
  box-shadow: 0 12px 35px rgba(1, 42, 89, 0.08);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hstory-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: #e0af1a;
  box-shadow: 0 20px 45px rgba(11, 78, 155, 0.18), 0 0 25px rgba(224, 175, 26, 0.25);
}

.hscroll-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-inline: 1rem;
}
.hscroll-arrows {
  display: flex;
  gap: 0.6rem;
}
.hscroll-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #012a59;
  color: #e0af1a;
  border: 1px solid rgba(224, 175, 26, 0.4);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.25s ease;
}
.hscroll-btn:hover {
  background: #e0af1a;
  color: #012a59;
  transform: scale(1.08);
}
/* ========== CORE TREE HIERARCHY & SCROLL-DRIVEN TRACK ========== */
.core-tree-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.5rem;
}
.tree-root-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 2;
}
.tree-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #e0af1a;
  background: rgba(224, 175, 26, 0.15);
  padding: 4px 14px;
  border-radius: 99px;
  border: 1px solid rgba(224, 175, 26, 0.3);
  letter-spacing: 0.05em;
}
.tree-node-card.root-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.2rem 2rem;
  background: linear-gradient(135deg, #012a59 0%, #0b4e9b 100%);
  border: 2px solid #e0af1a;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(1, 42, 89, 0.4), 0 0 25px rgba(224, 175, 26, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tree-node-card.root-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(1, 42, 89, 0.6), 0 0 35px rgba(224, 175, 26, 0.4);
}
.tree-node-card.root-card img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 4px;
}
.tree-node-card.root-card h4 {
  margin: 0 0 0.2rem 0;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
}
.tree-node-card.root-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
}

.tree-connector-svg {
  width: 100%;
  max-width: 900px;
  height: 50px;
  margin: 0.5rem 0;
}

.tree-branches-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 1000px;
  z-index: 2;
}
.tree-branch-node {
  flex: 1 1 170px;
  max-width: 200px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(224, 175, 26, 0.3);
  border-radius: 16px;
  padding: 1rem 0.9rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(1, 42, 89, 0.06);
  transition: all 0.3s ease;
}
.tree-branch-node:hover {
  transform: translateY(-5px);
  border-color: #e0af1a;
  box-shadow: 0 12px 30px rgba(11, 78, 155, 0.15), 0 0 20px rgba(224, 175, 26, 0.2);
}
.tree-branch-node .tb-icon {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.4rem;
}
.tree-branch-node h5 {
  margin: 0 0 0.2rem 0;
  font-size: 0.9rem;
  font-weight: 800;
  color: #012a59;
}
.tree-branch-node p {
  margin: 0;
  font-size: 0.76rem;
  color: #526071;
}
/* ========== DUAL OPPOSITE HORIZONTAL SCROLL TRACKS ========== */
.dual-hscroll-container {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
}

.hscroll-row {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.8rem 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: x mandatory;
}
.hscroll-row::-webkit-scrollbar {
  display: none;
}

.hscroll-row-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding-inline: 1rem;
  will-change: transform;
}

.hscroll-card-lg {
  scroll-snap-align: start;
  flex: 0 0 340px;
  width: 340px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(224, 175, 26, 0.3);
  border-radius: 20px;
  padding: 1.4rem 1.6rem;
  box-shadow: 0 10px 30px rgba(1, 42, 89, 0.08);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}
.hscroll-card-lg:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: #e0af1a;
  box-shadow: 0 16px 40px rgba(11, 78, 155, 0.18), 0 0 25px rgba(224, 175, 26, 0.25);
}

.hscroll-pill-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(1, 42, 89, 0.12);
  border-radius: 99px;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 4px 14px rgba(1, 42, 89, 0.05);
  white-space: nowrap;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.hscroll-pill-card:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: #e0af1a;
  box-shadow: 0 8px 24px rgba(11, 78, 155, 0.12);
}
.hscroll-pill-card .pill-num {
  font-size: 0.75rem;
  font-weight: 800;
  color: #0b4e9b;
  background: rgba(11, 78, 155, 0.1);
  padding: 2px 8px;
  border-radius: 99px;
}
.hscroll-pill-card .pill-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #012a59;
}

/* =============================================================
   UPGRADE: WORLD-CLASS GLOBAL COMPONENTS
   ============================================================= */

/* ---------- TRUST BADGES RIBBON ---------- */
.trust-ribbon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.1rem 1.6rem;
  margin-top: 2rem;
  background: rgba(1, 42, 89, 0.65);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(224, 175, 26, 0.28);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 30px rgba(1, 20, 46, 0.35);
}
@media(max-width:400px){.trust-item{font-size:0.75rem}}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.85rem;
  color: #EEF4FC;
  font-weight: 500;
  line-height: 1.4;
}
.trust-item svg {
  color: var(--gold);
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
}
.trust-divider {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
}
@media(max-width:768px) {
  .trust-ribbon {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
  .trust-divider { display: none; }
}

/* ---------- PROGRAM FILTER TABS ---------- */
.prog-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 2.5rem;
}
.prog-filter-btn {
  padding: 0.65rem 1.4rem;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.28s var(--e-out);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.prog-filter-btn:hover {
  background: rgba(1, 47, 99, 0.05);
  border-color: var(--ink-500);
  color: var(--ink);
  transform: translateY(-2px);
}
.prog-filter-btn.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 6px 20px rgba(1, 47, 99, 0.25);
}
.prog-filter-btn .filter-count {
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(224, 175, 26, 0.2);
  color: var(--gold-deep);
  font-weight: 700;
}
.prog-filter-btn.active .filter-count {
  background: var(--gold);
  color: var(--ink-900);
}

.prog[data-hidden="true"] {
  display: none !important;
}

/* ---------- AI BLUEPRINT SIMULATION TERMINAL ---------- */
.ai-blueprint-card {
  background: linear-gradient(145deg, #011838 0%, #012A59 100%);
  border: 1px solid rgba(224, 175, 26, 0.35);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-top: 3rem;
  box-shadow: 0 15px 45px rgba(1, 20, 46, 0.45), 0 0 35px rgba(224, 175, 26, 0.15);
  position: relative;
  overflow: hidden;
}
.ai-blueprint-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ai-blueprint-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(180, 210, 241, 0.15);
  margin-bottom: 1.5rem;
}
.ai-blueprint-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 12px #22C55E;
  animation: pulse-dot 2s infinite ease-in-out;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}
.ai-blueprint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media(max-width:820px) {
  .ai-blueprint-grid { grid-template-columns: 1fr; }
}
.ai-input-box, .ai-output-box {
  background: rgba(1, 20, 46, 0.7);
  border: 1px solid rgba(180, 210, 241, 0.15);
  border-radius: var(--r);
  padding: 1.3rem;
}
.ai-box-label {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ai-field-row {
  margin-bottom: 0.75rem;
}
.ai-field-title {
  font-size: 0.8rem;
  color: #A9C0DC;
  margin-bottom: 0.2rem;
}
.ai-field-val {
  font-size: 0.92rem;
  color: #EEF4FC;
  font-weight: 500;
}
.ai-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.ai-mini-tag {
  font-size: 0.74rem;
  background: rgba(11, 78, 155, 0.4);
  border: 1px solid rgba(180, 210, 241, 0.2);
  color: #EEF4FC;
  padding: 2px 9px;
  border-radius: 6px;
}

/* ---------- COMPARISON MATRIX & CARDS (WHY US) ---------- */
.why-section {
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.8rem;
  align-items: stretch;
}
@media(min-width:961px) {
  .why-cards-grid { grid-template-columns: 1fr 1.12fr; }
}
[dir="ltr"] .why-feature-item { padding-inline-start: 1rem; }
.why-card {
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.35s var(--e-out), box-shadow 0.35s ease, border-color 0.35s ease;
}
.why-card.traditional {
  background: rgba(1, 47, 99, 0.03);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.why-card.traditional:hover {
  transform: translateY(-4px);
  border-color: rgba(1, 47, 99, 0.25);
}
.why-card.sonaa {
  background: linear-gradient(150deg, #01142E 0%, #012A59 60%, #0B4E9B 100%);
  border: 2px solid var(--gold);
  color: #EEF4FC;
  box-shadow: 0 15px 45px rgba(1, 20, 46, 0.4), 0 0 35px rgba(224, 175, 26, 0.25);
}
.why-card.sonaa:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 60px rgba(1, 20, 46, 0.5), 0 0 50px rgba(224, 175, 26, 0.4);
}
.why-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  max-width: 100%;
  margin-bottom: 1.2rem;
  line-height: 1.3;
}
.why-card.traditional .why-card-badge {
  background: rgba(1, 47, 99, 0.08);
  color: var(--text-3);
}
.why-card.sonaa .why-card-badge {
  background: var(--gold);
  color: var(--ink-900);
}
.why-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.why-card.traditional h3 { color: var(--ink); }
.why-card.sonaa h3 { color: #FFFFFF; }
.why-card-desc {
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 1.8rem;
}
.why-card.traditional .why-card-desc { color: var(--text-2); }
.why-card.sonaa .why-card-desc { color: #A9C0DC; }

.why-features-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.why-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: var(--r);
  font-size: 0.94rem;
  line-height: 1.5;
}
.why-card.traditional .why-feature-item {
  background: #FFFFFF;
  border: 1px solid var(--line-soft);
  color: var(--text-2);
}
.why-card.sonaa .why-feature-item {
  background: rgba(1, 20, 46, 0.55);
  border: 1px solid rgba(180, 210, 241, 0.16);
  color: #EEF4FC;
}
.why-item-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-card.traditional .why-item-icon {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}
.why-card.sonaa .why-item-icon {
  background: var(--gold);
  color: var(--ink-900);
}

/* ---------- PARTNERS ECOSYSTEM OVERHAUL (WORLD-CLASS REDESIGN) ---------- */
.partners-section {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5.5rem);
}

.partners-badge {
  background: linear-gradient(135deg, rgba(224, 175, 26, 0.18), rgba(11, 78, 155, 0.12));
  border: 1px solid rgba(224, 175, 26, 0.35);
  box-shadow: 0 4px 15px rgba(224, 175, 26, 0.1);
}

/* --- Filter Tabs --- */
.partner-filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}
.pf-tab {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 0.6rem 1.3rem;
  border-radius: 99px;
  font-family: var(--f-display);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(1, 42, 89, 0.03);
}
.pf-tab:hover {
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 78, 155, 0.08);
}
.pf-tab.active {
  background: linear-gradient(135deg, #012A59 0%, #0B4E9B 100%);
  border-color: var(--gold);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(1, 42, 89, 0.25), 0 0 12px rgba(224, 175, 26, 0.3);
}

/* --- Interactive Core Tech Hierarchy Tree --- */
.partner-tree-wrapper {
  margin-top: 2.8rem;
  background: linear-gradient(180deg, rgba(1, 42, 89, 0.02) 0%, rgba(224, 175, 26, 0.03) 100%);
  border: 1px solid rgba(11, 78, 155, 0.12);
  border-radius: var(--r-xl, 24px);
  padding: 2.2rem;
  position: relative;
  transition: all 0.4s ease;
}
.partner-tree-wrapper:hover {
  border-color: rgba(224, 175, 26, 0.35);
  box-shadow: 0 20px 50px rgba(1, 42, 89, 0.06);
}

.tree-root-box {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
}
.root-badge-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--gold-deep);
  background: rgba(224, 175, 26, 0.15);
  border: 1px solid rgba(224, 175, 26, 0.4);
  padding: 3px 12px;
  border-radius: 99px;
  margin-bottom: 0.6rem;
}

.root-card-inner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--surface);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 14px 40px rgba(1, 42, 89, 0.12), 0 0 30px rgba(224, 175, 26, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.root-card-inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(1, 42, 89, 0.18), 0 0 40px rgba(224, 175, 26, 0.25);
}
.root-brand-logo img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid rgba(224, 175, 26, 0.5);
  box-shadow: 0 8px 20px rgba(1, 42, 89, 0.15);
  flex-shrink: 0;
}
.root-card-info h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.root-card-info p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 0.8rem;
}
.root-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rt-tag {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(11, 78, 155, 0.08);
  color: var(--ink);
}
.rt-tag.gold {
  background: var(--gold);
  color: var(--ink-900);
}

/* SVG Line Connector */
.tree-svg-connector {
  width: 100%;
  height: 55px;
  margin-block: 0.4rem 0.8rem;
}
.tree-svg-connector svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.svg-line-bg {
  stroke: rgba(11, 78, 155, 0.2);
  stroke-width: 2;
  fill: none;
}
.svg-line-pulse {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 12 12;
  animation: lineDashPulse 3s linear infinite;
}
@keyframes lineDashPulse {
  to { stroke-dashoffset: -48; }
}

/* 4 Pillars Grid */
.tree-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.pillar-node-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.4rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 20px rgba(1, 42, 89, 0.04);
}
.pillar-node-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 14px 35px rgba(11, 78, 155, 0.12);
}
.pillar-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  background: rgba(11, 78, 155, 0.08);
}
.pillar-type {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gold-deep);
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
}
.pillar-node-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.pillar-node-card p {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}
.pillar-pill-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pillar-pill-badges span {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(1, 42, 89, 0.05);
  color: var(--ink-700);
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid rgba(1, 42, 89, 0.08);
}

/* --- Flagship Partners Grid --- */
.partner-cards-head {
  margin-top: 3.5rem;
  margin-bottom: 1.8rem;
}
.flagship-partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.flagship-card {
  position: relative;
  background: var(--surface);
  border: 1px solid rgba(11, 78, 155, 0.15);
  border-radius: 20px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(1, 42, 89, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.flagship-card-glow {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.flagship-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: var(--gold);
  box-shadow: 0 18px 45px rgba(11, 78, 155, 0.14), 0 0 25px rgba(224, 175, 26, 0.15);
}
.flagship-card:hover .flagship-card-glow {
  opacity: 1;
}

.flagship-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.partner-logo-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(1, 42, 89, 0.06);
}
.partner-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-logo-box.emblem-box {
  background: linear-gradient(135deg, #012A59 0%, #0B4E9B 100%);
  color: var(--gold);
  font-weight: 900;
  font-size: 1.1rem;
}
.partner-logo-box.text-logo {
  background: #0B4E9B;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.95rem;
}
.partner-logo-box.text-logo.gov-logo {
  background: #012F63;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
}

.flagship-badge {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}
.flagship-badge.gold {
  background: rgba(224, 175, 26, 0.15);
  color: var(--gold-deep);
  border: 1px solid rgba(224, 175, 26, 0.3);
}
.flagship-badge.blue {
  background: rgba(11, 78, 155, 0.12);
  color: #0B4E9B;
  border: 1px solid rgba(11, 78, 155, 0.25);
}
.flagship-badge.purple {
  background: rgba(147, 51, 234, 0.12);
  color: #7E22CE;
  border: 1px solid rgba(147, 51, 234, 0.25);
}
.flagship-badge.cyan {
  background: rgba(6, 182, 212, 0.12);
  color: #0891B2;
  border: 1px solid rgba(6, 182, 212, 0.25);
}
.flagship-badge.green {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.flagship-badge.orange {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.flagship-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.flagship-desc {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}
.flagship-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 1px stroke var(--line-soft, rgba(0,0,0,0.06));
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
}

/* --- Ultra-Premium Flagship Network Card (50 Schools & 10 Banks) --- */
.flagship-network-card {
  position: relative;
  margin-top: 4rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
  border: 2px solid rgba(224, 175, 26, 0.35);
  border-radius: var(--r-xl, 28px);
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(1, 42, 89, 0.08), 0 0 35px rgba(224, 175, 26, 0.12);
  overflow: hidden;
  transition: all 0.4s ease;
}
.flagship-network-card:hover {
  border-color: var(--gold);
  box-shadow: 0 25px 60px rgba(1, 42, 89, 0.14), 0 0 45px rgba(224, 175, 26, 0.2);
}

.fnc-glow-ambient {
  position: absolute;
  top: -100px;
  inset-inline-end: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 175, 26, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.marquee-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.fnc-badges-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.fnc-badge {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 99px;
}
.fnc-badge.school-badge {
  background: rgba(11, 78, 155, 0.1);
  color: #0B4E9B;
  border: 1px solid rgba(11, 78, 155, 0.25);
}
.fnc-badge.bank-badge {
  background: rgba(224, 175, 26, 0.18);
  color: var(--gold-deep);
  border: 1px solid rgba(224, 175, 26, 0.4);
}

.fnc-head-info h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.fnc-sub {
  font-size: 0.9rem;
  color: var(--text-2);
}

.fnc-search {
  max-width: 380px;
}
.fnc-search input {
  box-shadow: 0 4px 15px rgba(1, 42, 89, 0.05);
}

/* Network Filter Buttons */
.fnc-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.6rem;
  flex-wrap: wrap;
}
.fnc-filter-btn {
  background: rgba(1, 42, 89, 0.04);
  border: 1px solid rgba(1, 42, 89, 0.1);
  color: var(--text-2);
  padding: 0.45rem 1rem;
  border-radius: 99px;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.fnc-filter-btn:hover {
  background: rgba(11, 78, 155, 0.08);
  color: var(--ink);
}
.fnc-filter-btn.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
  box-shadow: 0 4px 15px rgba(224, 175, 26, 0.3);
}

/* Footer Info inside Network Card */
.fnc-footer-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(1, 42, 89, 0.08);
  font-size: 0.85rem;
  color: var(--text-2);
  flex-wrap: wrap;
  gap: 1rem;
}
.fnc-action-link {
  background: rgba(11, 78, 155, 0.08);
  border: 1px solid rgba(11, 78, 155, 0.18);
  color: var(--ink);
  padding: 0.4rem 1rem;
  border-radius: 99px;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}
.fnc-action-link:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-900);
}

.network-search-box {
  position: relative;
  width: 100%;
}
.network-search-box input {
  width: 100%;
  padding: 0.75rem 2.8rem 0.75rem 2.5rem;
  border-radius: 99px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 0.9rem;
  font-family: var(--f-body);
  transition: all 0.25s ease;
}
.network-search-box input:focus {
  border-color: var(--gold);
  background: #FFFFFF;
  box-shadow: 0 0 15px rgba(224, 175, 26, 0.2);
  outline: none;
}
.ns-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: 1rem;
  transform: translateY(-50%);
  font-size: 0.95rem;
  pointer-events: none;
  opacity: 0.6;
}
.ns-clear {
  position: absolute;
  top: 50%;
  inset-inline-end: 0.9rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-3);
  padding: 4px;
}

/* --- Institutional Directory (Schools & Banks live list) --- */
.nd-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
  margin-top: 1.6rem;
  position: relative;
  z-index: 2;
}
@media (max-width: 820px) {
  .nd-columns { grid-template-columns: 1fr; }
}
.nd-col {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(1, 42, 89, 0.08);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 0.7rem;
  display: flex;
  flex-direction: column;
  transition: opacity 0.25s ease;
}
.nd-col-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px dashed rgba(1, 42, 89, 0.14);
}
.nd-col-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: rgba(11, 78, 155, 0.08);
}
.nd-col-icon.bank {
  background: rgba(224, 175, 26, 0.2);
}
.nd-col-title h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 2px;
}
.nd-col-count {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-3);
}
.nd-list {
  list-style: none;
  margin: 0;
  padding: 0 0.2rem 0 0;
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.nd-list::-webkit-scrollbar { width: 6px; }
.nd-list::-webkit-scrollbar-track { background: transparent; }
.nd-list::-webkit-scrollbar-thumb { background: rgba(224, 175, 26, 0.55); border-radius: 99px; }
.nd-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.nd-row:hover {
  background: rgba(11, 78, 155, 0.07);
  transform: translateX(-3px);
}
[dir="ltr"] .nd-row:hover { transform: translateX(3px); }
.nd-row-idx {
  font-family: var(--f-mono);
  font-size: 0.66rem;
  font-weight: 800;
  color: var(--gold-deep);
  background: rgba(224, 175, 26, 0.16);
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
  min-width: 26px;
  text-align: center;
}
.nd-col[data-col="bank"] .nd-row-idx {
  color: #0B4E9B;
  background: rgba(11, 78, 155, 0.1);
}
.nd-row-name {
  font-size: 0.85rem;
  color: var(--ink-700);
  font-weight: 600;
  line-height: 1.4;
}
.nd-row.is-hidden { display: none; }
.nd-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 0.85rem;
  padding: 1.1rem 0 0.4rem;
  margin: 0;
}

/* Search results overlay */
.search-results-overlay {
  margin-top: 1rem;
  padding: 1.2rem;
  background: var(--paper);
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.03);
}
.sr-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Marquees styling */
.marquee-label {
  margin-bottom: 0.6rem;
}
.ml-badge {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink);
  background: rgba(11, 78, 155, 0.08);
  padding: 3px 12px;
  border-radius: 99px;
}
.ml-badge.bank-label {
  background: rgba(224, 175, 26, 0.15);
  color: var(--gold-deep);
}

.marquee-track-wrap {
  width: 100%;
  overflow: hidden;
  padding-block: 0.5rem;
  position: relative;
}
.marquee-track-wrap::before, .marquee-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  pointer-events: none;
}
.marquee-track-wrap::before {
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--surface), transparent);
}
.marquee-track-wrap::after {
  inset-inline-end: 0;
  background: linear-gradient(-90deg, var(--surface), transparent);
}

.marquee-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  user-select: none;
}
.marquee-track.rtl-marquee {
  animation: marqueeMoveRTL 40s linear infinite;
}
.marquee-track.ltr-marquee {
  animation: marqueeMoveLTR 45s linear infinite;
}
.marquee-track-wrap:hover .marquee-track {
  animation-play-state: paused;
}

.partner-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 0.65rem 1.3rem;
  box-shadow: 0 4px 14px rgba(1, 42, 89, 0.04);
  white-space: nowrap;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.partner-pill:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(11, 78, 155, 0.12);
}
.partner-pill .pill-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-500);
  background: rgba(11, 78, 155, 0.08);
  padding: 2px 8px;
  border-radius: 99px;
}
.partner-pill.bank-pill {
  border-color: rgba(224, 175, 26, 0.4);
  background: linear-gradient(135deg, #012A59 0%, #0B4E9B 100%);
  color: #FFFFFF;
}
.partner-pill.bank-pill .pill-badge {
  background: var(--gold);
  color: var(--ink-900);
}
.partner-pill.bank-pill .pill-txt {
  color: #FFFFFF;
  font-weight: 700;
}
.partner-pill.school-pill {
  border-color: rgba(11, 78, 155, 0.3);
  background: linear-gradient(135deg, #EEF4FC 0%, #DBEAFE 100%);
  box-shadow: 0 4px 14px rgba(11, 78, 155, 0.08);
}
.partner-pill.school-pill .pill-badge {
  background: rgba(11, 78, 155, 0.15);
  color: #0B4E9B;
  font-weight: 800;
}
.partner-pill.school-pill .pill-txt {
  color: #012F63;
  font-weight: 600;
}
.partner-pill.school-pill:hover {
  border-color: #0B4E9B;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
  box-shadow: 0 8px 24px rgba(11, 78, 155, 0.16);
}

/* --- Ecosystem Metrics & CTA --- */
.partner-stats-cta {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.stat-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.4rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(1, 42, 89, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.stat-box:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
}
.sb-num {
  display: block;
  font-family: var(--f-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold-deep);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.sb-lbl {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-2);
}

.partner-cta-card {
  background: linear-gradient(135deg, #01142E 0%, #012A59 50%, #0B4E9B 100%);
  border: 1px solid rgba(224, 175, 26, 0.35);
  border-radius: 24px;
  padding: 2.2rem 2.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: 0 20px 50px rgba(1, 20, 46, 0.3);
  color: #FFFFFF;
}
.pcc-text h4 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.4rem;
}
.pcc-text p {
  font-size: 0.95rem;
  color: rgba(238, 244, 252, 0.85);
  line-height: 1.55;
}
.partner-cta-card .btn-gold {
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(224, 175, 26, 0.3);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
  .tree-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .flagship-partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tree-svg-connector {
    display: none;
  }
}

@media (max-width: 768px) {
  .root-card-inner {
    flex-direction: column;
    text-align: center;
  }
  .tree-pillars-grid {
    grid-template-columns: 1fr;
  }
  .flagship-partners-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .partner-cta-card {
    flex-direction: column;
    text-align: center;
    padding: 1.8rem;
  }
}


/* ---------- INTERACTIVE FAQ ACCORDION ---------- */
.faq-wrap {
  max-width: 900px;
  margin: 2.5rem auto 0 auto;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 0.9rem;
  transition: all 0.3s ease;
  overflow: hidden;
}
.faq-item:hover {
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(1, 47, 99, 0.06);
}
.faq-trigger {
  width: 100%;
  padding: 1.3rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: start;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: none;
}
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(1, 47, 99, 0.06);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(180deg);
  background: var(--gold);
  color: var(--ink-900);
}
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s ease;
  padding: 0 1.6rem;
  color: var(--text-2);
  line-height: 1.7;
}
.faq-item.open .faq-content {
  padding: 0 1.6rem 1.4rem 1.6rem;
}

/* ---------- QUICK INQUIRY MODAL ---------- */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(1, 20, 46, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  place-items: center;
  padding: 1rem;
}
.modal-scrim.active {
  display: grid;
}
.inquiry-modal {
  background: #fff;
  border-radius: 24px;
  max-width: 520px;
  width: 100%;
  padding: 2.2rem;
  box-shadow: 0 25px 60px rgba(1, 20, 46, 0.35);
  position: relative;
  border: 1px solid var(--line);
  animation: modal-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-pop {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-close {
  position: absolute;
  top: 1.2rem;
  inset-inline-end: 1.2rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(1, 47, 99, 0.06);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal-close:hover {
  background: #EF4444;
  color: #fff;
}
.inquiry-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.4rem;
  margin-top: 1rem;
}
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
}
.inquiry-form input:focus, .inquiry-form select:focus, .inquiry-form textarea:focus {
  border-color: var(--ink);
  outline: none;
  background: #fff;
}

/* ========================================================
   STUDENT JOURNEY — PREMIUM REDESIGN
   ======================================================== */

.journey-section {
  position: relative;
  background: linear-gradient(160deg, #00091A 0%, #011735 40%, #012A59 75%, #01356F 100%);
  color: #EEF4FC;
  overflow: hidden;
}

/* Decorative grid overlay */
.journey-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,78,155,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,78,155,.07) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* Glow blobs */
.journey-section .blueprint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.journey-section .wrap {
  position: relative;
  z-index: 1;
}

/* ---- Timeline Container ---- */
.journey-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 3.5rem;
  position: relative;
}

/* Central vertical line */
.journey-steps::before {
  content: '';
  position: absolute;
  inset-inline-start: 31px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(224,175,26,.8) 0%,
    rgba(44,116,199,.5) 50%,
    rgba(44,116,199,.15) 100%
  );
  z-index: 0;
}
[dir="ltr"] .journey-steps::before { inset-inline-start: 31px; }

/* ---- Individual Step ---- */
.journey-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 2rem;
  position: relative;
  padding-bottom: 2.5rem;
}

.journey-step:last-child {
  padding-bottom: 0;
}

/* ---- Step Number Badge ---- */
.journey-step-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.journey-step-num span {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, #011E43 0%, #012A59 100%);
  border: 2px solid var(--gold, #E0AF1A);
  color: var(--gold-bright, #F5C63F);
  font-family: var(--f-mono, monospace);
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 4px rgba(224,175,26,.12),
    0 0 25px rgba(224,175,26,.3),
    inset 0 1px 0 rgba(255,255,255,.1);
  z-index: 2;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: box-shadow .4s ease, transform .4s ease;
}

.journey-step:hover .journey-step-num span {
  box-shadow:
    0 0 0 6px rgba(224,175,26,.2),
    0 0 40px rgba(224,175,26,.5),
    inset 0 1px 0 rgba(255,255,255,.15);
  transform: scale(1.06);
}

.journey-step-line {
  width: 2px;
  flex-grow: 1;
  background: linear-gradient(to bottom, rgba(224,175,26,.4) 0%, rgba(44,116,199,.15) 100%);
  margin-top: 0.4rem;
  z-index: 1;
  min-height: 2rem;
}

/* ---- Step Card Body ---- */
.journey-step-body {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(180,210,241,.14);
  border-radius: 20px;
  padding: 1.8rem 2rem;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
  transition: transform .4s var(--e-out), border-color .4s ease, box-shadow .4s ease, background .4s ease;
  box-shadow: 0 8px 32px rgba(1,20,46,.25), inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}

/* Accent side bar */
.journey-step-body::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--jc, var(--gold, #E0AF1A));
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity .4s ease, top .4s ease, bottom .4s ease;
}
[dir="ltr"] .journey-step-body::before { inset-inline-start: 0; }

.journey-step:hover .journey-step-body {
  transform: translateX(-4px);
  border-color: rgba(224,175,26,.35);
  background: rgba(255,255,255,.05);
  box-shadow: 0 15px 50px rgba(1,20,46,.4), 0 0 30px rgba(224,175,26,.12), inset 0 1px 0 rgba(255,255,255,.07);
}
[dir="ltr"] .journey-step:hover .journey-step-body { transform: translateX(4px); }

.journey-step:hover .journey-step-body::before {
  opacity: 1;
  top: 10%;
  bottom: 10%;
}

/* ---- Step Icon ---- */
.journey-step-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  color: var(--jc, var(--gold, #E0AF1A));
  flex-shrink: 0;
  transition: background .4s ease, box-shadow .4s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.journey-step:hover .journey-step-icon {
  background: rgba(255,255,255,.1);
  box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 16px rgba(var(--jc-rgb, 224,175,26),.2);
}

.journey-step-icon svg {
  width: 26px;
  height: 26px;
}

/* ---- Step Content ---- */
.journey-step-content {
  flex-grow: 1;
  min-width: 0;
}

.journey-step-content h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 0.55rem;
  letter-spacing: -0.01em;
  font-family: var(--f-display);
}

.journey-step-content p {
  font-size: 0.95rem;
  color: rgba(238,244,252,.78);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

/* ---- Tags ---- */
.journey-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.journey-tags span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(238,244,252,.75);
  background: rgba(44,116,199,.15);
  border: 1px solid rgba(107,163,224,.22);
  padding: 4px 14px;
  border-radius: 99px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease;
}

.journey-step:hover .journey-tags span {
  background: rgba(44,116,199,.22);
  border-color: rgba(107,163,224,.38);
}

/* ---- Plan Checklist ---- */
.journey-plan-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  margin-top: 1.1rem;
}

.journey-plan-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(1,20,46,.55);
  border: 1px solid rgba(180,210,241,.1);
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.875rem;
  color: rgba(238,244,252,.85);
  font-weight: 500;
  transition: border-color .3s ease, background .3s ease;
}

.journey-plan-item:hover {
  border-color: rgba(224,175,26,.25);
  background: rgba(1,20,46,.7);
}

.journey-plan-item svg {
  width: 15px;
  height: 15px;
  color: var(--gold, #E0AF1A);
  flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .journey-steps::before {
    inset-inline-start: 23px;
  }
  .journey-step {
    grid-template-columns: 48px 1fr;
    gap: 1.2rem;
    padding-bottom: 1.8rem;
  }
  .journey-step-num span {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
  .journey-step-line {
    min-height: 1.5rem;
  }
  .journey-step-body {
    flex-direction: column;
    padding: 1.3rem 1.2rem;
    gap: 1rem;
  }
  .journey-plan-items {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .journey-step:hover .journey-step-body {
    transform: none;
  }
  .journey-step-content h3 {
    font-size: 1.15rem;
  }
}

@media (max-width: 480px) {
  .journey-steps::before {
    display: none;
  }
  .journey-step {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .journey-step-num {
    flex-direction: row;
    align-items: center;
    gap: 0.9rem;
  }
  .journey-step-line {
    display: none;
  }
}

/* ========================================================
   PROGRAM CERTIFICATES
   ======================================================== */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.7rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.cert-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out), border-color var(--d) var(--e-out);
}
.cert-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--cc, var(--gold));
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--e-out);
}
[dir="ltr"] .cert-card::before { transform-origin: left; }
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: color-mix(in srgb, var(--cc, var(--gold)) 32%, transparent); }
.cert-card:hover::before { transform: scaleX(1); }

.cert-ico {
  width: 52px; height: 52px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  margin-bottom: 1.15rem;
  background: color-mix(in srgb, var(--cc, var(--gold)) 12%, transparent);
  color: var(--cc, var(--gold));
  border: 1px solid color-mix(in srgb, var(--cc, var(--gold)) 26%, transparent);
  transition: transform .55s var(--e-spring), box-shadow .55s var(--e-out);
}
.cert-ico svg { width: 25px; height: 25px; }
.cert-card:hover .cert-ico {
  transform: rotate(-7deg) scale(1.08);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--cc, var(--gold)) 28%, transparent);
}

.cert-card h3 {
  font-size: clamp(1.05rem, 1.7vw, 1.24rem);
  color: var(--ink);
  margin-bottom: .8rem;
  line-height: 1.4;
}
.cert-card > p { color: var(--text-2); font-size: .93rem; line-height: 1.78; }

.cert-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 1.2rem; }
.cert-tags span {
  font-size: .74rem;
  font-weight: 600;
  color: var(--cc, var(--gold-deep));
  background: color-mix(in srgb, var(--cc, var(--gold)) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--cc, var(--gold)) 24%, transparent);
  padding: .3rem .78rem;
  border-radius: 99px;
  line-height: 1.45;
}

/* ========================================================
   TRACK PAGE NAV STRIP
   ======================================================== */
.tracknav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .8rem;
}
.tracknav .tn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  transition: transform var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.tracknav .tn::before {
  content: '';
  position: absolute;
  inset-block: 14px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tc, var(--gold));
  opacity: 0;
  transition: opacity var(--d-fast) var(--e-out);
}
.tracknav .tn:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tc, var(--gold)) 40%, transparent); box-shadow: var(--sh-2); }
.tracknav .tn:hover::before { opacity: 1; }
.tracknav .tn.is-current {
  background: color-mix(in srgb, var(--tc, var(--gold)) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--tc, var(--gold)) 45%, transparent);
}
.tracknav .tn.is-current::before { opacity: 1; }

.tracknav .tn em {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .13em;
  color: var(--tc, var(--gold-deep));
  font-weight: 700;
}
.tracknav .tn span { font-family: var(--f-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.tracknav .tn i { font-style: normal; font-size: .78rem; color: var(--text-3); font-family: var(--f-mono); }

/* ========================================================
   TRACK DETAIL — full curriculum pages (Sunna IoT 360)
   ======================================================== */

/* ---- "Discover" button inside track cards ---- */
.track .tcta {
  margin-block-start: 1.35rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--tc, var(--gold-deep));
  padding: .6rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--tc, var(--gold)) 34%, transparent);
  background: color-mix(in srgb, var(--tc, var(--gold)) 8%, transparent);
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-spring);
}
.track .tcta svg { width: 15px; height: 15px; flex: none; }
.track:hover .tcta {
  background: var(--tc, var(--gold));
  border-color: var(--tc, var(--gold));
  color: #fff;
  transform: translateX(-3px);
}
[dir="ltr"] .track:hover .tcta { transform: translateX(3px); }

/* ---- Track section header ---- */
.tk-sec { scroll-margin-top: 100px; }

.tk-head {
  position: relative;
  border-radius: var(--r-xl);
  padding: clamp(1.8rem, 4vw, 3rem);
  background: linear-gradient(150deg, var(--ink-900), var(--ink-700) 70%, var(--ink-600));
  overflow: hidden;
  isolation: isolate;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.tk-head::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 4px;
  background: var(--tc, var(--gold));
  z-index: 2;
}
.tk-head::after {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-end: -12%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tc, var(--gold)) 30%, transparent), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
.tk-head .tk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc, var(--gold));
  font-weight: 600;
  margin-bottom: .85rem;
}
.tk-head h2 { color: #F4F8FD; margin-bottom: .9rem; }
.tk-head .tk-goal {
  color: rgba(207,226,245,.85);
  font-size: var(--t-lead);
  line-height: 1.75;
  max-width: 78ch;
}
.tk-head .tk-goal b { color: var(--tc, var(--gold)); font-weight: 600; }

/* ---- Track meta stats ---- */
.tk-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
  margin-block-start: 1.9rem;
}
.tk-meta div {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(180,210,241,.16);
  border-radius: var(--r);
  padding: .95rem 1.1rem;
  backdrop-filter: blur(12px);
}
.tk-meta span {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(207,226,245,.6);
  font-weight: 600;
  display: block;
  margin-bottom: .42rem;
  line-height: 1.4;
}
.tk-meta b {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--tc, var(--gold));
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* ---- Level cards ---- */
.lvl-grid { display: flex; flex-direction: column; gap: clamp(1.2rem, 2.5vw, 1.8rem); }

.lvl {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--d) var(--e-out), border-color var(--d) var(--e-out);
}
.lvl:hover { box-shadow: var(--sh-2); border-color: color-mix(in srgb, var(--tc, var(--gold)) 30%, var(--line)); }

.lvl-top {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.5rem clamp(1.2rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--tc, var(--gold)) 5%, transparent);
}
.lvl-badge {
  width: 50px; height: 50px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  background: var(--tc, var(--gold));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--tc, var(--gold)) 34%, transparent);
}
.lvl-titles { flex: 1; min-width: 0; }
.lvl-titles .lvl-rank {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tc, var(--gold-deep));
  font-weight: 600;
  display: block;
  margin-bottom: .3rem;
}
.lvl-titles h3 { font-size: clamp(1.12rem, 1.8vw, 1.42rem); color: var(--ink); margin-bottom: .45rem; }
.lvl-dur {
  font-size: .85rem;
  color: var(--text-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.lvl-dur svg { width: 14px; height: 14px; flex: none; color: var(--tc, var(--gold-deep)); }

.lvl-body { padding: clamp(1.2rem, 2.6vw, 2rem); display: grid; gap: 1.7rem; }

.lvl-block > h4 {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--tc, var(--gold-deep));
  font-weight: 600;
  margin-bottom: .8rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.lvl-block > h4::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}
.lvl-block > p { color: var(--text-2); font-size: .95rem; line-height: 1.75; }

/* Outcomes list */
.lvl-out { display: grid; gap: .6rem; }
.lvl-out li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .92rem;
  color: var(--text-2);
  line-height: 1.65;
}
.lvl-out svg {
  width: 17px; height: 17px;
  flex: none;
  color: var(--tc, var(--gold-deep));
  margin-block-start: .28rem;
}

/* Curriculum table */
.lvl-tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.lvl-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 420px; }
.lvl-tbl th {
  background: color-mix(in srgb, var(--tc, var(--gold)) 10%, var(--paper-2));
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .8rem 1rem;
  text-align: start;
  white-space: nowrap;
}
.lvl-tbl td { padding: .82rem 1rem; border-block-start: 1px solid var(--line-soft); color: var(--text-2); line-height: 1.6; }
.lvl-tbl td:first-child {
  font-family: var(--f-mono);
  color: var(--tc, var(--gold-deep));
  font-weight: 700;
  width: 46px;
  text-align: center;
}
.lvl-tbl td:last-child { white-space: nowrap; color: var(--text-3); font-family: var(--f-mono); font-size: .84rem; }
.lvl-tbl tr:last-child td {
  background: color-mix(in srgb, var(--tc, var(--gold)) 7%, transparent);
  font-weight: 700;
  color: var(--ink);
}
.lvl-tbl tr:last-child td:last-child { color: var(--tc, var(--gold-deep)); }

/* End-of-level project */
.lvl-proj {
  background: color-mix(in srgb, var(--tc, var(--gold)) 7%, var(--paper-2));
  border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 22%, transparent);
  border-inline-start: 3px solid var(--tc, var(--gold));
  border-radius: var(--r);
  padding: 1.15rem 1.3rem;
}
.lvl-proj b { display: block; color: var(--ink); font-size: 1rem; margin-bottom: .45rem; font-family: var(--f-display); }
.lvl-proj p { color: var(--text-2); font-size: .91rem; line-height: 1.7; }

/* Certificate / badge chip */
.lvl-cert {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  background: var(--paper-2);
  border: 1px dashed var(--line);
  border-radius: var(--r);
  padding: .95rem 1.2rem;
  font-size: .89rem;
  color: var(--text-2);
  line-height: 1.6;
}
.lvl-cert svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); margin-block-start: .18rem; }
.lvl-cert b { color: var(--ink); font-weight: 600; }

/* Track graduation note */
.tk-grad {
  margin-block-start: clamp(1.4rem, 3vw, 2.2rem);
  background: linear-gradient(140deg, color-mix(in srgb, var(--tc, var(--gold)) 12%, var(--surface)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--tc, var(--gold)) 28%, transparent);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.tk-grad .tg-ico {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--tc, var(--gold));
  color: #fff;
}
.tk-grad .tg-ico svg { width: 22px; height: 22px; }
.tk-grad b { display: block; color: var(--ink); margin-bottom: .4rem; font-family: var(--f-display); font-size: 1.02rem; }
.tk-grad p { color: var(--text-2); font-size: .93rem; line-height: 1.72; }

/* ---- Unified AI-assistant + passport mechanism ---- */
.mech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; margin-block-start: 2.4rem; }
.mech {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(180,210,241,.16);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.7rem;
  backdrop-filter: blur(14px);
}
.mech .m-num {
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: .55rem;
}
.mech h3 { color: #fff; font-size: 1.1rem; margin-bottom: .6rem; }
.mech p { color: rgba(238,244,252,.78); font-size: .92rem; line-height: 1.75; }

.mech-flow { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: 1rem; }
.mech-flow span {
  font-size: .76rem;
  font-weight: 600;
  color: rgba(238,244,252,.8);
  background: rgba(44,116,199,.18);
  border: 1px solid rgba(107,163,224,.24);
  padding: .32rem .8rem;
  border-radius: 99px;
}

/* ---- Summary table ---- */
.sum-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); background: var(--surface); }
.sum-tbl { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 660px; }
.sum-tbl th {
  background: var(--ink);
  color: #EEF4FC;
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .95rem 1.1rem;
  text-align: start;
  white-space: nowrap;
}
.sum-tbl td { padding: .85rem 1.1rem; border-block-start: 1px solid var(--line-soft); color: var(--text-2); line-height: 1.6; }
.sum-tbl tr.grp td {
  background: color-mix(in srgb, var(--tc, var(--gold)) 12%, var(--paper-2));
  font-weight: 700;
  color: var(--ink);
  font-family: var(--f-display);
  border-block-start: 2px solid color-mix(in srgb, var(--tc, var(--gold)) 40%, transparent);
}
.sum-tbl tr.total td {
  background: var(--ink-900);
  color: #EEF4FC;
  font-weight: 700;
}
.sum-tbl tr.total td:first-child { color: var(--gold); }
.sum-tbl td:nth-child(2), .sum-tbl td:nth-child(3) { font-family: var(--f-mono); white-space: nowrap; font-size: .85rem; }

.sum-note {
  margin-block-start: 1.3rem;
  font-size: .875rem;
  color: var(--text-3);
  line-height: 1.7;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--line);
}

@media (max-width: 640px) {
  .lvl-top { flex-direction: column; gap: .9rem; padding: 1.2rem 1.1rem; }
  .lvl-badge { width: 44px; height: 44px; font-size: .95rem; }
  .lvl-body { padding: 1.2rem 1.1rem; gap: 1.4rem; }
  .tk-grad { flex-direction: column; }
}

/* ========================================================
   HOW IT WORKS — general enrollment flow (light theme)
   ======================================================== */
.howit-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-5);
  margin-top: 3.5rem;
  position: relative;
}

.howit-steps::before {
  content: '';
  position: absolute;
  inset-inline: 8%;
  top: 31px;
  height: 2px;
  background: linear-gradient(90deg, rgba(224,175,26,.55), rgba(1,47,99,.12) 85%);
  z-index: 0;
}
[dir="ltr"] .howit-steps::before { background: linear-gradient(90deg, rgba(224,175,26,.55), rgba(1,47,99,.12) 85%); }

.howit-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.howit-num {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--gold);
  color: var(--gold-deep);
  font-family: var(--f-mono);
  font-size: 1.1rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-2), 0 0 0 6px var(--bg);
  margin-bottom: 1.3rem;
  transition: transform var(--d-fast) var(--e-spring), box-shadow var(--d) var(--e-out);
}

.howit-step:hover .howit-num {
  transform: scale(1.07);
  box-shadow: var(--sh-3), 0 0 0 6px var(--bg);
  color: var(--gold-deep);
  background: var(--gold-wash);
}

.howit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--sh-1);
  transition: transform var(--d-fast) var(--e-out), box-shadow var(--d) var(--e-out), border-color var(--d) var(--e-out);
  width: 100%;
}

.howit-step:hover .howit-card {
  transform: translateY(-5px);
  box-shadow: var(--sh-3);
  border-color: rgba(224,175,26,.35);
}

.howit-card h3 {
  font-size: 1.12rem;
  margin-bottom: .55rem;
  color: var(--ink);
}

.howit-card p {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .howit-steps { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); }
  .howit-steps::before { display: none; }
}

@media (max-width: 560px) {
  .howit-steps { grid-template-columns: 1fr; }
}

/* ========================================================
   MOBILE POLISH — Comprehensive small-screen refinements
   Targets: max-width 640px (tablets) and 480px (phones)
   ======================================================== */

/* ---- Global spacing tightening on small screens ---- */
@media (max-width: 640px) {
  :root {
    --gutter: 1.1rem;
  }

  .section {
    padding-block: clamp(3rem, 7vw, 5rem);
  }

  .section-sm {
    padding-block: clamp(2rem, 5vw, 3.5rem);
  }

  .sec-head {
    margin-bottom: clamp(1.6rem, 4vw, 2.4rem);
  }

  /* Hero */
  .hero {
    padding-block: calc(var(--nav-h) + 2rem) 2.5rem;
    min-height: 100svh;
  }

  .hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);
    margin-block: 0.9rem 1rem;
  }

  .hero .lead {
    font-size: clamp(0.93rem, 3.4vw, 1.05rem);
  }

  .hero-cta {
    flex-direction: column;
    gap: 0.65rem;
    margin-block-start: 1.6rem;
  }

  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero stats — 2 columns */
  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
    margin-block-start: 2rem;
  }

  .hero-stats .st b {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem);
  }

  .hero-stats .st > span {
    font-size: 0.76rem;
  }

  /* Program cards — single col buttons */
  .prog-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .prog-body .btn {
    width: 100%;
    justify-content: center;
  }

  /* CTA band */
  .cta-btns {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-btns .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-in h2 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* Contact channels */
  .chan {
    padding: 1.1rem;
  }

  /* Footer */
  .foot-brand img {
    height: 44px;
  }

  /* Section headings */
  h2 {
    font-size: clamp(1.5rem, 6.5vw, 2.2rem);
  }

  h3 {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
  }

  /* Track cards */
  .track {
    padding: 1.4rem;
  }

  /* Testimonial */
  .quote {
    padding: 1.2rem 1.3rem;
  }
}

/* ---- Extra small phones ≤ 480px ---- */
@media (max-width: 480px) {
  :root { --gutter: 0.75rem; }
  .hero h1 { font-size: 1.45rem; }
  .hero .lead { font-size: 0.82rem; }
  .sec-head h2 { font-size: 1.3rem; }
  .founder-grid { gap: 1rem; }
  .portrait { max-width: 100%; }
  .portrait .offset { inset-block: 6px -6px; inset-inline: 6px -6px; }
  .quote { font-size: 0.9rem; padding: 0.8rem; line-height: 1.5; }
  .creds li { font-size: 0.78rem; gap: 0.4rem; }
  .hero-stats .st b { font-size: 1.1rem; }
  .tag { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
}

/* ---- Very small phones ≤ 400px — single-column stats (kept last so it wins the cascade) ---- */
@media (max-width: 400px) {
  .hero-stats { grid-template-columns: 1fr; }
}

/* ========================================================
   RESTORED DESIGN SYSTEM UPDATES
   ======================================================== */

/* Level Structure Heading */
.struct-head {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* Level Cards Grid */
.lvl-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
@media (max-width: 1000px) {
  .lvl-cards-grid { grid-template-columns: 1fr; }
}

.lvl-card {
  border-radius: 24px;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
}
.lvl-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Beginner: White bg, dark button/black border */
.lvl-card.beginner {
  background: var(--white);
  border: 2px solid var(--ink);
  color: var(--ink);
}
.lvl-card.beginner .btn-lvl {
  background: var(--ink);
  color: var(--white);
}

/* Advanced: Light gold bg, solid gold button */
.lvl-card.advanced {
  background: #FFF9E6;
  border: 2px solid var(--gold);
  color: var(--ink);
}
.lvl-card.advanced .btn-lvl {
  background: var(--gold);
  color: var(--ink-900);
}

/* Expert: Dark navy bg, dark button/white border */
.lvl-card.expert {
  background: var(--ink-900);
  border: 2px solid var(--white);
  color: var(--white);
}
.lvl-card.expert h3, .lvl-card.expert p { color: var(--white); }
.lvl-card.expert .btn-lvl {
  background: var(--white);
  color: var(--ink-900);
}

.btn-lvl {
  margin-top: auto;
  padding: 0.8rem 1.5rem;
  border-radius: 99px;
  font-weight: 700;
  text-align: center;
  font-family: var(--f-display);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}
.btn-lvl:hover {
  filter: brightness(1.1);
  transform: scale(1.03);
}

/* 2x2 Details Grid */
.details-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 768px) {
  .details-2x2 { grid-template-columns: 1fr; }
}
.detail-card-white {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--sh-1);
  transition: all 0.3s ease;
}
.detail-card-white:hover {
  border-color: var(--gold);
  box-shadow: var(--sh-2);
}
.detail-card-white h4 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.detail-card-white h4 svg {
  color: var(--gold);
  width: 20px;
  height: 20px;
}
.detail-card-white p {
  font-size: 0.92rem;
  color: var(--text-2);
  line-height: 1.6;
}

/* Certificate Toggle Styles */
.cert-content {
  display: none;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
}
.cert-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}