/* ============================================================
   REWIRED GLOBAL DEVELOPMENT — DEVELOPMENT 50 INITIATIVE
   Shared design system
   ============================================================ */
:root{
  /* Surface */
  --void:#04070f;
  --navy-900:#080f20;
  --navy-850:#0a1428;
  --navy-800:#0d1b33;
  --line:rgba(88,140,200,.16);
  --line-strong:rgba(120,190,255,.30);

  /* Accents */
  --cyan:#3ad6f5;
  --gold:#e6b756;
  --gold-lite:#f6dda0;

  /* Sub-programme colour coding */
  --c-digital:#2f6bff;
  --c-economy:#0f9d6b;
  --c-social:#d18a10;
  --c-democracy:#d84f6c;
  --c-governance:#0d9aa6;
  --c-institutions:#7c4ddb;

  /* Ink */
  --ink:#eef4ff;
  --ink-2:#b9c9e2;
  --ink-3:#7f93b3;
  --ink-4:#5b6d8a;

  --ease:cubic-bezier(.16,1,.3,1);
  --shell:min(1240px, 91vw);
  --nav-h:74px;

  --font-display:"Sora", ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body:"Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* clip at the root as well as the body: an off-screen fixed panel would
   otherwise widen the layout viewport, and position:fixed bars (the navbar)
   size themselves to that widened viewport — pushing the burger off screen */
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; overflow-x:clip}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120vw 70vh at 50% -10%, rgba(24,90,150,.32), transparent 60%),
    radial-gradient(70vw 55vh at 12% 38%, rgba(20,70,130,.20), transparent 62%),
    radial-gradient(65vw 55vh at 88% 72%, rgba(60,40,120,.16), transparent 62%),
    linear-gradient(180deg,#050a15 0%, #060d1c 42%, #04070f 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(90,150,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,150,220,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(120vw 100vh at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(120vw 100vh at 50% 30%, #000 0%, transparent 78%);
}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit}
::selection{background:rgba(58,214,245,.28); color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; line-height:1.07; letter-spacing:-.022em; margin:0}
h1{font-size:clamp(2.05rem, 4.7vw, 3.9rem)}
h2{font-size:clamp(1.8rem, 3.7vw, 2.95rem)}
h3{font-size:clamp(1.18rem, 1.62vw, 1.42rem); letter-spacing:-.01em}
p{margin:0}
.lede{font-size:clamp(1.09rem,1.45vw,1.3rem); color:var(--ink-2); line-height:1.72; font-weight:300}
.mono{font-family:var(--font-mono)}

.eyebrow{
  font-family:var(--font-mono); font-size:.76rem; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:26px; height:1px; background:linear-gradient(90deg,transparent,currentColor)}
.eyebrow.gold{color:var(--gold)}
.eyebrow.center{justify-content:center}
.eyebrow.center::after{content:""; width:26px; height:1px; background:linear-gradient(90deg,currentColor,transparent)}

.badge{
  display:inline-block; padding:.42rem 1.15rem; border-radius:999px;
  border:1px solid rgba(230,183,86,.42); color:var(--gold-lite);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(230,183,86,.10), rgba(230,183,86,.02));
}
.grad-cyan{background:linear-gradient(96deg,#fff 12%, var(--cyan) 62%, #9fe9ff 96%); -webkit-background-clip:text; background-clip:text; color:transparent}
.grad-gold{background:linear-gradient(96deg,var(--gold-lite),var(--gold) 55%,#c99a35); -webkit-background-clip:text; background-clip:text; color:transparent}

.shell{width:var(--shell); margin-inline:auto; position:relative; z-index:2}
.section{position:relative; padding:clamp(4.6rem,9vw,8rem) 0; z-index:2}
.section--tight{padding:clamp(3.2rem,6vw,5rem) 0}
.rule{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent, rgba(120,190,255,.22) 22%, rgba(230,183,86,.24) 50%, rgba(120,190,255,.22) 78%, transparent)}
.head{max-width:780px}
.head.center{margin-inline:auto; text-align:center}
.head h2{margin:1.1rem 0 1.05rem}

/* ---------- Buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; gap:.85rem;
  padding:1rem 1.85rem; border-radius:8px; font-weight:600; font-size:.85rem;
  letter-spacing:.15em; text-transform:uppercase; font-family:var(--font-body);
  border:1px solid transparent; cursor:pointer; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s var(--ease);
}
.btn .arw{transition:transform .5s var(--ease)}
.btn:hover .arw{transform:translateX(5px)}
.btn--gold{
  color:#241703;
  background:linear-gradient(174deg,#f7e2ac 0%, var(--gold) 42%, #c9992f 100%);
  box-shadow:0 14px 40px -14px rgba(230,183,86,.62), inset 0 1px 0 rgba(255,255,255,.55);
}
.btn--gold::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.55), transparent);
}
.btn--gold:hover::after{animation:sheen 1.05s var(--ease)}
@keyframes sheen{to{transform:translateX(120%)}}
.btn--gold:hover{box-shadow:0 20px 54px -14px rgba(230,183,86,.78)}
.btn--ghost{
  color:var(--ink); border-color:var(--line-strong);
  background:linear-gradient(180deg, rgba(120,190,255,.09), rgba(120,190,255,.02));
}
.btn--ghost:hover{border-color:rgba(58,214,245,.6); box-shadow:0 0 34px -8px rgba(58,214,245,.45)}
.btn:focus-visible, a:focus-visible, button:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.cta-row{display:flex; flex-wrap:wrap; gap:1rem}
.cta-row.center{justify-content:center}

/* ============================================================
   NAV
   ============================================================ */
.progress{position:fixed; top:0; left:0; height:2px; width:100%; z-index:120; transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg,var(--cyan),var(--gold)); box-shadow:0 0 14px rgba(58,214,245,.7)}
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .5s ease, height .45s var(--ease);
}
.nav.is-stuck{
  background:rgba(5,10,21,.82); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line); height:64px;
}
.nav__in{width:var(--shell); margin-inline:auto; display:flex; align-items:center; gap:1.4rem}
.brand{display:flex; align-items:center; gap:.8rem; flex-shrink:0}
.brand__txt{display:flex; flex-direction:column; line-height:1}
.brand__n1{font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.1em; color:#fff}
.brand__n2{font-family:var(--font-mono); font-size:.52rem; letter-spacing:.24em; color:var(--gold); margin-top:.35rem}
.nav__links{display:flex; align-items:center; gap:.1rem; margin-left:auto}
.nav__item{position:relative}
.nav__link{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .7rem; font-size:.79rem; color:var(--ink-2); white-space:nowrap;
  transition:color .35s var(--ease); cursor:pointer; background:none; border:0;
}
.nav__link::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.1rem; height:1.5px; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--cyan),var(--gold)); transition:transform .5s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:#fff}
.nav__caret{width:9px; height:9px; opacity:.7; transition:transform .4s var(--ease)}
.nav__item:hover .nav__caret{transform:rotate(180deg)}
.nav__cta{margin-left:.7rem; padding:.66rem 1.1rem; font-size:.67rem; letter-spacing:.11em}

/* Dropdown */
.drop{
  position:absolute; top:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(-8px);
  width:max-content; min-width:290px; padding:.6rem; border-radius:14px;
  background:rgba(8,14,28,.97); backdrop-filter:blur(22px);
  border:1px solid var(--line-strong); box-shadow:0 30px 70px -30px rgba(0,0,0,.85);
  opacity:0; visibility:hidden; transition:.38s var(--ease); z-index:110;
}
.nav__item:hover .drop, .nav__item:focus-within .drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.drop::before{content:""; position:absolute; left:0; right:0; top:-14px; height:14px}
.drop a{
  display:flex; align-items:center; gap:.75rem; padding:.62rem .8rem; border-radius:9px;
  font-size:.83rem; color:var(--ink-2); transition:.3s var(--ease);
}
.drop a:hover{background:rgba(120,190,255,.09); color:#fff}
.drop a.is-active{color:#fff; background:rgba(120,190,255,.07)}
.drop i{width:7px; height:7px; border-radius:2px; background:var(--k,var(--cyan)); flex-shrink:0; box-shadow:0 0 9px var(--k,var(--cyan))}
.drop__sep{height:1px; margin:.4rem .6rem; background:var(--line)}

.burger{display:none; margin-left:auto; width:44px; height:44px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line); border-radius:9px; cursor:pointer}
.burger span{display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:.4s var(--ease)}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--ink); transition:.4s var(--ease)}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger.is-open span{background:transparent}
.burger.is-open span::before{top:0; transform:rotate(45deg)}
.burger.is-open span::after{top:0; transform:rotate(-45deg)}

/* Parked inside the viewport, not translated off the right edge — sliding it
   out with translateX(100%) is what widened the page in the first place. */
.drawer{
  position:fixed; inset:0 0 0 auto; width:min(360px,86vw); z-index:99;
  opacity:0; visibility:hidden; transform:scale(.985); transform-origin:100% 50%;
  background:rgba(6,11,24,.98); backdrop-filter:blur(22px); border-left:1px solid var(--line);
  padding:calc(var(--nav-h) + 1.6rem) 1.6rem 2rem;
  /* visibility flips instantly on open and is only deferred on close, so the
     panel can never depend on a transition finishing to become visible */
  transition:opacity .4s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
  display:flex; flex-direction:column; gap:.15rem; overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .4s var(--ease), transform .45s var(--ease), visibility 0s;
}
.drawer a{padding:.82rem .2rem; border-bottom:1px solid rgba(120,190,255,.09); font-size:.95rem; color:var(--ink-2)}
.drawer a.is-active{color:var(--cyan)}
.drawer h5{margin:1.2rem 0 .3rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-4); font-weight:500}
.drawer .sub{padding-left:1rem; font-size:.87rem}
.drawer .btn{margin-top:1.5rem; justify-content:center}
.scrim{position:fixed; inset:0; z-index:98; background:rgba(2,5,12,.6); opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility 0s linear .5s}
.scrim.is-open{opacity:1; visibility:visible; transition:opacity .5s var(--ease), visibility 0s}
.skip{position:absolute; left:-9999px; top:0; z-index:200; padding:.8rem 1.2rem; background:var(--cyan); color:#04070f; border-radius:6px}
.skip:focus{left:1rem; top:1rem}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; min-height:clamp(560px,86svh,900px); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:calc(var(--nav-h) + 3rem) 0 4rem; overflow:hidden; text-align:center}
.hero--tall{min-height:100svh}
.hero__canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:0; transition:opacity 2.2s var(--ease)}
.hero__canvas.is-ready{opacity:1}
.hero::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(56% 44% at 50% 42%, rgba(4,8,18,.76), rgba(4,8,18,.3) 62%, transparent 78%)}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:34%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,transparent, #04070f 92%)}
.hero__in{position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; width:var(--shell)}
.hero__kicker{font-family:var(--font-mono); font-size:.73rem; letter-spacing:.42em; text-transform:uppercase; color:var(--ink-2)}
/* Main page headline — heavier, tighter and brighter so it lands hard.
   Solid white first: if background-clip:text is ever unsupported the
   headline must still be readable, never transparent. */
.hero h1{
  margin:1.25rem 0 1.1rem; max-width:19ch;
  font-weight:800;
  font-size:clamp(2.35rem, 5.6vw, 4.6rem);
  letter-spacing:-.035em;
  line-height:1.015;
  color:#ffffff;
  text-wrap:balance;
  text-shadow:0 0 48px rgba(58,214,245,.2);
}
/* The gradient is painted on each word, not on the h1.
   A filter or background-clip on the parent has to rasterise the whole
   headline while the child words are still mid-transform, which smears
   them into one another on a cold load. Per-word keeps every paint
   inside its own animating box. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 .word{
    background:linear-gradient(176deg, #ffffff 0%, #f0f8ff 42%, #a9dcf5 100%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
}
/* Hold the headline until the webfont has settled, so the swap from the
   fallback metrics never lands mid-animation. .fonts-ready is set by
   site.js, with a timeout so it can never stay hidden. */
.hero h1{visibility:hidden}
html.fonts-ready .hero h1{visibility:visible}
.hero__sub{color:var(--cyan); font-weight:300; font-size:clamp(.94rem,1.5vw,1.14rem); max-width:62ch}
.hero__cta{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.focal{position:relative; margin:clamp(1.1rem,2.6vw,2rem) 0 clamp(1rem,2vw,1.6rem); display:grid; place-items:center}
.focal__num{font-family:var(--font-display); font-weight:300; font-size:clamp(3.4rem,9vw,6.8rem); line-height:.9;
  letter-spacing:.04em; color:#fff; text-shadow:0 0 60px rgba(58,214,245,.85), 0 0 140px rgba(40,150,220,.55)}
.focal__ring{position:absolute; width:clamp(200px,30vw,340px); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(58,214,245,.22), transparent 66%)}

/* Breadcrumb */
.crumbs{display:flex; align-items:center; justify-content:center; gap:.55rem; margin-bottom:1.4rem;
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-4)}
.crumbs a{color:var(--ink-3); transition:color .3s}
.crumbs a:hover{color:var(--cyan)}
.crumbs span{opacity:.5}

/* ============================================================
   LIGHT BANDS
   ============================================================ */
.band-light{
  --ink:#0a1729; --ink-2:#41567a; --ink-3:#63779a; --ink-4:#8a9ab3;
  --line:rgba(14,44,88,.14); --line-strong:rgba(14,44,88,.26);
  --cyan:#0e8fb8; --gold:#a4761a;
  color:var(--ink); isolation:isolate;
  background:
    radial-gradient(70vw 50vh at 12% 0%, rgba(47,107,255,.07), transparent 62%),
    radial-gradient(60vw 46vh at 92% 100%, rgba(124,77,219,.06), transparent 62%),
    linear-gradient(180deg,#ffffff 0%, #f6f9fd 46%, #eef3fa 100%);
  border-top:1px solid rgba(14,44,88,.10);
  border-bottom:1px solid rgba(14,44,88,.10);
}
.band-light::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(rgba(20,60,120,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,60,120,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(92vw 82vh at 50% 40%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(92vw 82vh at 50% 40%, #000 0%, transparent 76%);
}
.band-light h2,.band-light h3,.band-light h4{color:#08152a}
.band-light .eyebrow{color:#0d7fa6}
.band-light .eyebrow.gold{color:#a4761a}
.band-light .lede{color:#41567a}
.band-light .grad-cyan{background:linear-gradient(96deg,#0b2b4a 8%, #0e8fb8 58%, #2f6bff 96%); -webkit-background-clip:text; background-clip:text; color:transparent}
.band-light .badge{border-color:rgba(164,118,26,.45); color:#7d5811; background:linear-gradient(180deg, rgba(230,183,86,.18), rgba(230,183,86,.05))}
.band-light .btn--ghost{color:#0b1a2e; border-color:rgba(14,44,88,.26); background:linear-gradient(180deg, rgba(14,44,88,.05), rgba(14,44,88,.01))}
.band-light .btn--ghost:hover{border-color:rgba(14,110,180,.55); box-shadow:0 16px 36px -18px rgba(14,60,120,.55)}
.band-light .rule{background:linear-gradient(90deg,transparent, rgba(14,44,88,.16) 30%, rgba(164,118,26,.22) 50%, rgba(14,44,88,.16) 70%, transparent)}

/* ============================================================
   CARD SYSTEMS
   ============================================================ */
/* Six sub-programme hex cards */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.9vw,1.6rem); margin-top:clamp(2.6rem,4.6vw,3.8rem)}
.pillar{
  position:relative; padding:1.5px; border-radius:4px; isolation:isolate; text-align:left; display:block;
  clip-path:polygon(5.5% 0, 94.5% 0, 100% 50%, 94.5% 100%, 5.5% 100%, 0 50%);
  background:linear-gradient(160deg, color-mix(in srgb, var(--k) 55%, transparent), rgba(90,140,200,.14) 55%, color-mix(in srgb, var(--k) 26%, transparent));
  transition:transform .6s var(--ease);
}
.pillar::before{
  content:""; position:absolute; inset:-70%; z-index:0; opacity:0; transition:opacity .5s var(--ease);
  background:conic-gradient(from 0deg, transparent 0 62%, var(--k) 78%, #fff 84%, transparent 92%);
  animation:orbit 3.4s linear infinite;
}
@keyframes orbit{to{transform:rotate(360deg)}}
.pillar:hover{transform:translateY(-9px)}
.pillar:hover::before{opacity:.95}
.pillar__in{
  position:relative; z-index:1; height:100%;
  clip-path:polygon(5.5% 0, 94.5% 0, 100% 50%, 94.5% 100%, 5.5% 100%, 0 50%);
  background:linear-gradient(165deg, #0c182e 0%, #081127 58%, #060d1c 100%);
  padding:clamp(1.6rem,2.5vw,2.1rem) clamp(2.1rem,3.3vw,2.8rem);
  display:flex; flex-direction:column; gap:.8rem; transition:background .6s var(--ease);
}
.pillar:hover .pillar__in{background:linear-gradient(165deg, color-mix(in srgb, var(--k) 13%, #0c182e), #081127 62%, #060d1c 100%)}
.band-light .pillar{box-shadow:0 20px 46px -32px rgba(10,40,90,.55)}
.band-light .pillar__in{background:linear-gradient(165deg,#fff 0%, #f8fafe 58%, #f0f4fb 100%)}
.band-light .pillar:hover .pillar__in{background:linear-gradient(165deg, color-mix(in srgb, var(--k) 9%, #fff), #f8fafe 62%, #f0f4fb 100%)}
.band-light .pillar::before{background:conic-gradient(from 0deg, transparent 0 62%, var(--k) 78%, #fff 86%, transparent 92%)}
.pillar__top{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.pillar__ico{width:44px; height:44px; color:var(--k); flex-shrink:0}
.pillar__no{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; color:var(--ink-3)}
.pillar h3{color:var(--ink)}
.band-light .pillar h3{color:#08152a}
.pillar__tag{font-family:var(--font-mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--k)}
.pillar p{font-size:.94rem; color:var(--ink-3); line-height:1.62}
.pillar__bar{height:2px; width:32px; background:var(--k); border-radius:2px; transition:width .65s var(--ease); box-shadow:0 0 10px var(--k)}
.pillar:hover .pillar__bar{width:68px}
.pillar__go{margin-top:.2rem; font-family:var(--font-mono); font-size:.67rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--k); display:flex; align-items:center; gap:.45rem}
.pillar__go .arw{transition:transform .5s var(--ease)}
.pillar:hover .pillar__go .arw{transform:translateX(5px)}

/* Generic feature cards */
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(.85rem,1.5vw,1.15rem); margin-top:clamp(2.4rem,4vw,3.2rem)}
.fgrid--2{grid-template-columns:repeat(2,1fr)}
.fcard{
  position:relative; overflow:hidden; border-radius:14px; padding:1.8rem 1.55rem 1.65rem;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(13,27,51,.6), rgba(6,11,24,.36));
  transition:transform .55s var(--ease), border-color .45s var(--ease), box-shadow .55s var(--ease);
}
.band-light .fcard{background:#fff; box-shadow:0 16px 38px -32px rgba(10,40,90,.6)}
.fcard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2.5px; background:var(--k,var(--cyan)); opacity:.9}
.fcard:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--k,var(--cyan)) 42%, transparent);
  box-shadow:0 26px 52px -34px color-mix(in srgb, var(--k,var(--cyan)) 60%, transparent)}
.fcard__n{font-family:var(--font-mono); font-size:.67rem; letter-spacing:.22em; color:var(--k,var(--cyan))}
.fcard h3{margin:.8rem 0 .55rem; color:var(--ink); font-size:1.03rem}
.band-light .fcard h3{color:#08152a}
.fcard p{font-size:.935rem; color:var(--ink-3); line-height:1.68}
.fcard__ico{width:30px; height:30px; color:var(--k,var(--cyan)); margin-bottom:.95rem}

/* Simple bullet list card */
.lcard{border:1px solid var(--line); border-radius:14px; padding:1.7rem 1.6rem;
  background:linear-gradient(180deg, rgba(13,27,51,.55), rgba(6,11,24,.32))}
.band-light .lcard{background:#fff; box-shadow:0 16px 38px -32px rgba(10,40,90,.55)}
.lcard h3{margin-bottom:1rem; color:var(--ink)}
.band-light .lcard h3{color:#08152a}
.ticks{display:flex; flex-direction:column; gap:.75rem; margin:0; padding:0; list-style:none}
.ticks li{display:flex; gap:.75rem; font-size:.96rem; color:var(--ink-2); line-height:1.62}
.ticks li::before{
  content:""; flex-shrink:0; width:16px; height:16px; margin-top:.28rem; border-radius:4px;
  background:color-mix(in srgb, var(--k,var(--cyan)) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--k,var(--cyan)) 50%, transparent);
}
.ticks li b{color:var(--ink); font-weight:600}
.band-light .ticks li{color:#41567a}
.band-light .ticks li b{color:#08152a}

/* ============================================================
   PYRAMID / LAYER DIAGRAM (animated)
   ============================================================ */
.pyramid{display:flex; flex-direction:column; align-items:center; gap:.5rem; margin-top:clamp(2.2rem,4vw,3rem)}
.pyr{
  --w:100%;
  position:relative; width:var(--w); max-width:100%; border-radius:10px;
  padding:1rem 1.4rem; display:flex; align-items:center; gap:1rem;
  border:1px solid color-mix(in srgb, var(--k) 34%, transparent);
  background:linear-gradient(100deg, color-mix(in srgb, var(--k) 13%, transparent), transparent 70%);
  opacity:0; transform:translateY(22px) scale(.97);
  transition:opacity .8s var(--ease), transform .8s var(--ease), border-color .4s;
  transition-delay:var(--d,0ms);
}
.band-light .pyr{background:linear-gradient(100deg, color-mix(in srgb, var(--k) 10%, #fff), #fff 70%);
  box-shadow:0 14px 34px -30px rgba(10,40,90,.6)}
.is-in .pyr{opacity:1; transform:none}
.pyr:hover{border-color:color-mix(in srgb, var(--k) 62%, transparent)}
.pyr__n{
  flex-shrink:0; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.74rem; font-weight:500; color:#fff;
  background:var(--k); box-shadow:0 0 18px color-mix(in srgb, var(--k) 55%, transparent);
}
.pyr__t{font-family:var(--font-display); font-weight:600; font-size:1.06rem; color:var(--ink)}
.band-light .pyr__t{color:#08152a}
.pyr__d{font-size:.9rem; color:var(--ink-3); line-height:1.6; margin-top:.2rem}
/* The stepped width comes from --w, written per layer by the generator so
   the spread is even whatever the layer count. Below 900px they go full width. */
@media (max-width:899px){
  .pyr{--w:100% !important}
}
.pyramid--flat .pyr{--w:100%}

/* Arc / step chain */
.chain{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:0; margin-top:clamp(2.2rem,4vw,3rem); position:relative}
.chain__s{position:relative; text-align:center; padding:0 .7rem}
.chain__s::after{
  content:""; position:absolute; top:26px; left:50%; width:100%; height:2px; z-index:0;
  background:linear-gradient(90deg, var(--k), color-mix(in srgb, var(--k) 20%, transparent));
  transform:scaleX(0); transform-origin:0 50%; transition:transform .9s var(--ease) var(--d,0ms);
}
.is-in .chain__s::after{transform:scaleX(1)}
.chain__s:last-child::after{display:none}
.chain__dot{
  position:relative; z-index:1; width:52px; height:52px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; font-family:var(--font-mono); font-size:.8rem; color:#fff;
  background:linear-gradient(160deg, var(--k), color-mix(in srgb, var(--k) 55%, #04070f));
  box-shadow:0 0 0 6px color-mix(in srgb, var(--k) 12%, transparent), 0 0 24px color-mix(in srgb, var(--k) 50%, transparent);
  opacity:0; transform:scale(.5); transition:opacity .6s var(--ease) var(--d,0ms), transform .6s var(--ease) var(--d,0ms);
}
.is-in .chain__dot{opacity:1; transform:none}
.chain__t{font-family:var(--font-display); font-weight:600; font-size:1.01rem; color:var(--ink); margin-bottom:.35rem}
.band-light .chain__t{color:#08152a}
.chain__d{font-size:.87rem; color:var(--ink-3); line-height:1.58}

/* ============================================================
   ACCELERATOR
   ============================================================ */
.accel{position:relative; overflow:hidden; border-radius:18px; padding:clamp(1.8rem,3.4vw,2.8rem);
  border:1px solid rgba(230,183,86,.26); margin-top:clamp(2.4rem,4vw,3.2rem);
  background:linear-gradient(160deg, rgba(45,33,12,.4), rgba(8,13,26,.55))}
.band-light .accel{border-color:rgba(164,118,26,.3);
  background:linear-gradient(160deg, rgba(230,183,86,.1), rgba(255,255,255,.9))}
.accel__head{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1.6rem}
.accel__head h3{font-size:clamp(1.15rem,2vw,1.5rem); color:var(--gold-lite)}
.band-light .accel__head h3{color:#7d5811}
.accel__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.8rem}
.acard{border-radius:11px; padding:1.15rem 1.2rem; border:1px solid var(--line);
  background:rgba(6,11,24,.4); transition:.5s var(--ease)}
.band-light .acard{background:#fff; border-color:rgba(14,44,88,.12)}
.acard:hover{transform:translateY(-4px); border-color:rgba(230,183,86,.45)}
.acard b{display:block; font-family:var(--font-display); font-size:.99rem; color:var(--ink); margin-bottom:.35rem}
.band-light .acard b{color:#08152a}
.acard span{font-size:.88rem; color:var(--ink-3); line-height:1.58}

/* ============================================================
   IMPACT STRIP / STATS
   ============================================================ */
.strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; margin-top:clamp(2.2rem,4vw,3rem);
  background:var(--line); border:1px solid var(--line); border-radius:13px; overflow:hidden}
.strip__i{background:linear-gradient(180deg, rgba(13,27,51,.72), rgba(6,11,24,.6)); padding:1.5rem 1.3rem; text-align:center}
.band-light .strip__i{background:#fff}
.strip__n{font-family:var(--font-display); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; line-height:1; color:var(--k,var(--cyan))}
.strip__l{font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); margin-top:.55rem}
.chips{display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:clamp(1.8rem,3vw,2.4rem); justify-content:center}
.chips span{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--k,var(--cyan)) 34%, transparent);
  background:color-mix(in srgb, var(--k,var(--cyan)) 8%, transparent);
  font-family:var(--font-mono); font-size:.67rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.band-light .chips span{color:color-mix(in srgb, var(--k,#0e8fb8) 70%, #0a1729)}
.chips i{width:7px; height:7px; border-radius:2px; background:var(--k,var(--cyan)); box-shadow:0 0 8px var(--k,var(--cyan))}

/* ============================================================
   INFOGRAPHIC FIGURE
   ============================================================ */
.figure{position:relative; margin-top:clamp(2.4rem,4vw,3.2rem); border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(13,27,51,.5), rgba(6,11,24,.3))}
.band-light .figure{background:#fff; box-shadow:0 26px 60px -44px rgba(10,40,90,.7); border-color:rgba(14,44,88,.13)}
.figure img{width:100%; height:auto; display:block; transition:transform 1.1s var(--ease)}
.figure:hover img{transform:scale(1.02)}
.figure figcaption{padding:.9rem 1.3rem; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4)}
.figure--split{display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:0}
.figure--split img{height:100%; object-fit:cover}
.figure__body{padding:clamp(1.6rem,3vw,2.6rem)}

/* ============================================================
   PHASES (Impact page)
   ============================================================ */
.phases{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); margin-top:clamp(2.4rem,4vw,3.2rem)}
.phase{border-radius:16px; padding:clamp(1.5rem,2.6vw,2.1rem); border:1px solid var(--line);
  background:linear-gradient(170deg, rgba(13,27,51,.6), rgba(6,11,24,.35))}
.band-light .phase{background:#fff; box-shadow:0 20px 46px -36px rgba(10,40,90,.6)}
.phase__h{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1.4rem;
  padding-bottom:1rem; border-bottom:1px solid var(--line)}
.phase__t{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--ink)}
.band-light .phase__t{color:#08152a}
.phase__y{font-family:var(--font-mono); font-size:.75rem; letter-spacing:.14em; color:var(--k,var(--cyan))}
.meter{margin-bottom:1.05rem}
.meter__top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.42rem}
.meter__l{font-size:.9rem; color:var(--ink-2)}
.meter__v{font-family:var(--font-mono); font-size:.9rem; font-weight:500; color:var(--k,var(--cyan))}
.meter__track{height:6px; border-radius:4px; background:color-mix(in srgb, var(--k,var(--cyan)) 12%, transparent); overflow:hidden}
.meter__fill{height:100%; border-radius:4px; width:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--k,var(--cyan)) 65%, transparent), var(--k,var(--cyan)));
  transition:width 1.4s var(--ease) var(--d,0ms); box-shadow:0 0 12px color-mix(in srgb, var(--k,var(--cyan)) 55%, transparent)}

/* Per-subprogram impact block */
.iblock{border-radius:16px; border:1px solid var(--line); padding:clamp(1.5rem,2.6vw,2.1rem); margin-top:1.1rem;
  background:linear-gradient(170deg, rgba(13,27,51,.55), rgba(6,11,24,.3))}
.band-light .iblock{background:#fff; box-shadow:0 18px 42px -36px rgba(10,40,90,.55)}
.iblock__h{display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem}
.iblock__dot{width:12px; height:12px; border-radius:3px; background:var(--k); box-shadow:0 0 12px var(--k); flex-shrink:0}
.iblock__h h3{color:var(--ink)}
.band-light .iblock__h h3{color:#08152a}
.iblock__cols{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.2rem,2.4vw,2rem)}
.iblock h4{font-family:var(--font-mono); font-size:.67rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); font-weight:500; margin-bottom:.8rem}

/* ============================================================
   PARTNERS
   ============================================================ */
.dims{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.3vw,1rem); margin-top:clamp(2.4rem,4vw,3.2rem)}
.dim{position:relative; overflow:hidden; border-radius:14px; padding:1.7rem 1.4rem; text-align:center;
  border:1px solid var(--line); background:#fff; box-shadow:0 16px 38px -32px rgba(10,40,90,.6); transition:.55s var(--ease)}
.dim:hover{transform:translateY(-7px); border-color:color-mix(in srgb, var(--k) 42%, transparent)}
.dim svg{width:36px; height:36px; color:var(--k); margin:0 auto .95rem}
.dim b{display:block; font-family:var(--font-display); font-size:1.07rem; color:#08152a; margin-bottom:.45rem}
.dim span{font-size:.86rem; color:#63779a; line-height:1.55}
.orgs{display:grid; grid-template-columns:repeat(7,1fr); gap:clamp(.6rem,1.1vw,.85rem); margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.org{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  padding:1.3rem .7rem 1.1rem; border-radius:12px; border:1px solid rgba(14,44,88,.12); background:#fff;
  box-shadow:0 14px 32px -30px rgba(10,40,90,.55); transition:.5s var(--ease);
}
.org:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--k) 42%, transparent)}
.org__plate{position:relative; width:52px; height:52px; border-radius:13px; overflow:hidden; display:grid; place-items:center;
  background:color-mix(in srgb, var(--k) 10%, #fff); border:1px solid color-mix(in srgb, var(--k) 26%, transparent)}
.org__mono{font-family:var(--font-display); font-weight:700; font-size:.9rem; color:var(--k); line-height:1}
.org__mono.is-long{font-size:.6rem; letter-spacing:.03em}
.org__logo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:7px; background:#fff}
.org__n{font-size:.76rem; line-height:1.4; color:#63779a}
/* institution cards carrying a descriptor line */
.orgrow{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.6rem,1.1vw,.9rem); margin-top:clamp(1.6rem,2.6vw,2.2rem)}
.orgx{
  display:flex; align-items:flex-start; gap:.9rem; padding:1.1rem 1.15rem; border-radius:12px;
  border:1px solid var(--line); background:#fff; box-shadow:0 14px 32px -30px rgba(10,40,90,.55);
  transition:transform .5s var(--ease), border-color .45s var(--ease), box-shadow .5s var(--ease);
}
.band-light .orgx{background:#fff}
.orgx:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--k) 45%, transparent);
  box-shadow:0 24px 46px -32px color-mix(in srgb, var(--k) 55%, transparent)}
.orgx__plate{position:relative; width:46px; height:46px; border-radius:12px; overflow:hidden; flex-shrink:0;
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--k) 11%, #fff); border:1px solid color-mix(in srgb, var(--k) 28%, transparent)}
.orgx__mono{font-family:var(--font-display); font-weight:700; font-size:.8rem; color:var(--k); line-height:1}
.orgx__mono.is-long{font-size:.55rem; letter-spacing:.02em}
.orgx__logo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:6px; background:#fff}
.orgx__b{display:block; font-family:var(--font-display); font-weight:600; font-size:.95rem; color:#08152a; line-height:1.3}
.orgx__d{display:block; font-size:.83rem; color:#63779a; line-height:1.55; margin-top:.3rem}

.pnote{margin-top:clamp(1.4rem,2.4vw,2rem); border:1px solid rgba(14,44,88,.14); border-radius:12px;
  background:rgba(255,255,255,.7); padding:1.05rem 1.3rem; text-align:center;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.09em; line-height:1.8; color:#6c80a1}

/* ============================================================
   CONTACT
   ============================================================ */
.xgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.5vw,1.15rem); margin-top:clamp(2.4rem,4vw,3.2rem)}
.xcard{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--line); padding:1.9rem 1.6rem 1.7rem;
  background:linear-gradient(180deg, rgba(13,27,51,.6), rgba(6,11,24,.36)); transition:.55s var(--ease)}
.band-light .xcard{background:#fff; box-shadow:0 18px 42px -34px rgba(10,40,90,.6)}
.xcard:hover{transform:translateY(-7px); border-color:color-mix(in srgb, var(--k,var(--cyan)) 40%, transparent)}
.xcard svg{width:30px; height:30px; color:var(--k,var(--cyan)); margin-bottom:1rem}
.xcard h3{font-size:1.12rem; margin-bottom:.5rem}
.xcard p{font-size:.91rem; color:var(--ink-3); line-height:1.68}
.xcard a.xl{display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; font-family:var(--font-mono);
  font-size:.72rem; color:var(--k,var(--cyan)); border-bottom:1px solid color-mix(in srgb, var(--k,var(--cyan)) 35%, transparent);
  padding-bottom:.16rem; transition:.4s var(--ease)}
.xcard a.xl:hover{border-bottom-color:var(--k,var(--cyan))}

/* ============================================================
   FINALE + FOOTER
   ============================================================ */
.finale{position:relative; overflow:hidden; text-align:center; padding:clamp(5rem,10vw,8.5rem) 0}
.finale__bg{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.8}
.finale__in{position:relative; z-index:3}
.manifesto{font-family:var(--font-display); font-weight:300; line-height:1.24;
  font-size:clamp(1.5rem,3.4vw,2.6rem); color:var(--ink)}
.manifesto b{font-weight:700}
.finale p.lede{max-width:58ch; margin:1.6rem auto 2.4rem}

.footer{position:relative; z-index:2; border-top:1px solid var(--line); padding:3.4rem 0 2.2rem; background:rgba(4,7,15,.7)}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.2rem}
.footer h4{font-family:var(--font-mono); font-size:.69rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-4); font-weight:500; margin-bottom:1rem}
.footer a{display:block; font-size:.92rem; color:var(--ink-3); padding:.28rem 0; transition:color .4s var(--ease)}
.footer a:hover{color:var(--cyan)}
.footer__tag{color:var(--ink-3); font-size:.93rem; max-width:36ch; margin-top:1rem; line-height:1.7}
.footer__meta{margin-top:1.2rem; font-size:.88rem; color:var(--ink-4); line-height:1.85}
.footer__meta b{color:var(--ink-2); font-weight:500}
.hashtags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.2rem}
.hashtags span{font-family:var(--font-mono); font-size:.58rem; letter-spacing:.06em; color:var(--ink-4);
  border:1px solid var(--line); border-radius:999px; padding:.24rem .6rem}
.footer__base{margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap;
  gap:1rem; justify-content:space-between; font-size:.78rem; color:var(--ink-4)}

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
[data-reveal]{opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:var(--d,0ms)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-30px)}
[data-reveal="right"]{transform:translateX(30px)}
[data-reveal="scale"]{transform:scale(.94)}
.is-in[data-reveal]{opacity:1; transform:none}
.word{display:inline-block; opacity:0; transform:translateY(38px) rotate(2deg);
  transition:opacity .95s var(--ease), transform .95s var(--ease); transition-delay:var(--wd,0ms)}
.is-in .word, .word.is-in{opacity:1; transform:none}

/* ============================================================
   BIG IDEA / REWIRE DIAGRAM
   ============================================================ */
.idea{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2.5rem,5vw,5rem); align-items:center}
.idea__quote{font-family:var(--font-display); font-weight:300; line-height:1.28; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.35rem); color:var(--ink)}
.idea__quote em{font-style:normal; font-weight:600}
.idea p+p{margin-top:1.1rem}
.rewire{position:relative; border:1px solid var(--line); border-radius:14px; padding:clamp(1.2rem,2.4vw,2rem);
  background:linear-gradient(150deg, rgba(13,27,51,.6), rgba(6,11,24,.5)); overflow:hidden}
.rewire__labels{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.9rem}
.rewire__labels b{color:var(--cyan); font-weight:500}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; margin-top:clamp(2.5rem,5vw,3.6rem)}
.stat{background:linear-gradient(180deg, rgba(13,27,51,.7), rgba(6,11,24,.6)); padding:1.5rem 1.3rem; text-align:center}
.stat__n{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:700; line-height:1}
.stat__l{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-top:.6rem}

/* ============================================================
   GLOBAL POWER RADIAL
   ============================================================ */
.framework{position:relative; display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,4vw,4.5rem); align-items:center}
.fw-svg{width:100%; height:auto; overflow:visible}
.fw-link{stroke:rgba(120,190,255,.34); stroke-width:1; fill:none; stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.5s var(--ease); transition-delay:var(--d,0ms)}
.is-in .fw-link{stroke-dashoffset:0}
.fw-node{opacity:0; transform:scale(.6); transform-origin:center;
  transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms)}
.is-in .fw-node{opacity:1; transform:none}
.fw-node text{font-family:var(--font-mono); font-size:10.4px; letter-spacing:.14em; fill:var(--ink-2); text-transform:uppercase}
.fw-core text{font-family:var(--font-display); letter-spacing:.1em}
.fw-list{display:grid; gap:.55rem}
.fw-item{display:flex; align-items:center; gap:1.05rem; padding:.85rem 1.15rem; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(100deg, rgba(13,27,51,.6), rgba(6,11,24,.28)); transition:.55s var(--ease)}
.fw-item:hover{border-color:rgba(58,214,245,.42); transform:translateX(7px)}
.fw-item i{width:7px; height:7px; border-radius:50%; background:var(--dot,var(--cyan)); box-shadow:0 0 12px var(--dot,var(--cyan)); flex-shrink:0}
.fw-item b{font-family:var(--font-display); font-weight:600; font-size:1.04rem; color:#fff; min-width:9.5rem}
.fw-item span{font-size:.93rem; color:var(--ink-3)}
.band-light .fw-item{background:#fff; box-shadow:0 14px 32px -30px rgba(10,40,90,.5)}
.band-light .fw-item b{color:#08152a}

/* ============================================================
   VISION 2050
   ============================================================ */
.vision{position:relative; overflow:hidden; text-align:center}
.vision__bg{position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.8}
.vision__year{font-family:var(--font-display); font-weight:800; line-height:1; padding-bottom:.05em; letter-spacing:-.03em;
  font-size:clamp(6rem,22vw,17rem);
  background:linear-gradient(180deg,#ffffff 0%, #9fdcff 38%, rgba(58,214,245,.22) 82%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 90px rgba(58,214,245,.35))}
.vision__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:clamp(2.5rem,5vw,3.5rem)}
.vcell{background:linear-gradient(180deg, rgba(11,22,42,.86), rgba(6,11,24,.8)); padding:1.5rem 1rem; text-align:left; transition:.55s var(--ease)}
.vcell:hover{background:linear-gradient(180deg, rgba(20,44,78,.9), rgba(8,16,32,.85))}
.vcell b{display:block; font-family:var(--font-display); font-size:1.07rem; font-weight:600; color:#fff; margin-top:.75rem}
.vcell em{font-style:normal; font-family:var(--font-mono); font-size:.67rem; letter-spacing:.2em; color:var(--cyan)}
.vcell svg{width:26px; height:26px; color:var(--cyan); opacity:.9}
.newdef{margin-top:clamp(2.5rem,5vw,3.4rem); display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center}
.newdef span{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-lite);
  border:1px solid rgba(230,183,86,.34); border-radius:999px; padding:.55rem 1.3rem; background:rgba(230,183,86,.05)}
.closing-line{margin-top:2.2rem; font-family:var(--font-display); font-weight:300; line-height:1.4;
  font-size:clamp(1.1rem,2.2vw,1.7rem); color:var(--ink); max-width:34ch; margin-inline:auto}

/* ---------- Collaboration ---------- */
.collab{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(.8rem,1.5vw,1.2rem); margin-top:clamp(2.5rem,4vw,3.4rem)}
.ccard{border:1px solid var(--line); border-radius:12px; padding:1.7rem 1.4rem; position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgba(13,27,51,.55), rgba(6,11,24,.35)); transition:.6s var(--ease)}
.ccard:hover{transform:translateY(-6px); border-color:rgba(58,214,245,.35)}
.ccard svg{width:30px; height:30px; color:var(--cyan); margin-bottom:1rem}
.ccard b{display:block; font-family:var(--font-display); font-size:1.09rem; color:#fff; margin-bottom:.4rem}
.ccard span{font-size:.91rem; color:var(--ink-3)}

/* ============================================================
   CORE-PILLAR RING  (native rebuild of the infographic's icon row)
   ============================================================ */
.ringrow{display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:clamp(.7rem,1.4vw,1.1rem);
  margin-top:clamp(2.4rem,4vw,3.2rem)}
.ringc{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.85rem;
  opacity:0; transform:translateY(24px) scale(.94);
  transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0ms)}
.is-in .ringc{opacity:1; transform:none}
.ringc__o{
  position:relative; width:clamp(72px,7.5vw,92px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--k) 40%, transparent);
  background:radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--k) 20%, transparent), transparent 68%);
  transition:.55s var(--ease);
}
.ringc__o::before{
  content:""; position:absolute; inset:-7px; border-radius:50%; pointer-events:none;
  border:1px dashed color-mix(in srgb, var(--k) 26%, transparent);
  animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.ringc:hover .ringc__o{transform:translateY(-6px);
  border-color:color-mix(in srgb, var(--k) 78%, transparent);
  box-shadow:0 0 34px -6px color-mix(in srgb, var(--k) 60%, transparent)}
.ringc__o svg{width:38%; height:38%; color:var(--k)}
.ringc__n{position:absolute; top:-2px; right:-2px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.52rem; color:#fff; background:var(--k)}
.ringc__t{font-family:var(--font-display); font-weight:600; font-size:.88rem; line-height:1.35; color:var(--ink)}
.band-light .ringc__t{color:#08152a}

/* ============================================================
   ACCELERATOR HUB  (central engine + orbiting drivers)
   ============================================================ */
.hub{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.6rem,3vw,2.6rem); align-items:center; margin-top:1.6rem}
.hub__core{
  position:relative; width:clamp(140px,15vw,180px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  text-align:center; padding:1rem;
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--k) 32%, transparent), transparent 70%);
  border:1px solid color-mix(in srgb, var(--k) 48%, transparent);
}
.hub__core::before,.hub__core::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none;
  border:1px dashed color-mix(in srgb, var(--k) 30%, transparent);
}
.hub__core::before{inset:-10px; animation:spin 26s linear infinite}
.hub__core::after{inset:-22px; animation:spin 40s linear infinite reverse; border-style:dotted}
.hub__core b{font-family:var(--font-display); font-weight:700; font-size:.9rem; letter-spacing:.06em; color:var(--ink); line-height:1.3}
.band-light .hub__core b{color:#08152a}
.hub__core em{display:block; font-style:normal; font-family:var(--font-mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--k); margin-top:.4rem}
.hub__list{display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:.7rem}

/* ============================================================
   OUTCOME ROW
   ============================================================ */
.outcomes{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.8rem; margin-top:clamp(2rem,3.4vw,2.8rem)}
.oc{position:relative; border-radius:12px; padding:1.4rem 1.2rem; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(13,27,51,.5), rgba(6,11,24,.3)); transition:.5s var(--ease)}
.band-light .oc{background:#fff; box-shadow:0 14px 34px -30px rgba(10,40,90,.55)}
.oc:hover{transform:translateY(-5px); border-color:color-mix(in srgb, var(--k) 42%, transparent)}
.oc__d{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; margin-bottom:.85rem;
  background:color-mix(in srgb, var(--k) 16%, transparent); border:1px solid color-mix(in srgb, var(--k) 40%, transparent)}
.oc__d span{width:8px; height:8px; border-radius:2px; background:var(--k); box-shadow:0 0 9px var(--k)}
.oc p{font-size:.92rem; color:var(--ink-2); line-height:1.6}
.band-light .oc p{color:#41567a}
.oc p b{color:var(--ink)}
.band-light .oc p b{color:#08152a}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .orgs{grid-template-columns:repeat(5,1fr)}
  .orgrow{grid-template-columns:repeat(2,1fr)}
  .dims{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  /* once cards go full width, a horizontal reveal offset pushes them past the
     viewport edge, so slide them vertically instead */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(26px)}
  .nav__links{display:none}
  .burger{display:flex}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .figure--split{grid-template-columns:1fr}
  .iblock__cols{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr}
  .xgrid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .chain{grid-auto-flow:row; gap:1.6rem}
  .chain__s::after{display:none}
  .chain__s{text-align:left; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:0}
  .chain__dot{margin:0}
  .idea{grid-template-columns:1fr; gap:2.4rem}
  .framework{grid-template-columns:1fr; gap:2.6rem}
  .vision__grid{grid-template-columns:repeat(4,1fr)}
  .hub{grid-template-columns:1fr; justify-items:center; text-align:center}
  .hub__list{width:100%}
}
@media (max-width:640px){
  .stat-row{grid-template-columns:1fr}
  .vision__grid{grid-template-columns:repeat(2,1fr)}
  .collab{grid-template-columns:1fr}
  .ringrow{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--nav-h:64px}
  .brand svg{width:32px;height:32px}
  .brand__n1{font-size:.6rem; line-height:1.25}
  .brand__n2{font-size:.45rem}
  .brand__txt{max-width:150px}
  .btn{padding:.9rem 1.2rem; font-size:.72rem}
  .hero__cta{width:100%; flex-direction:column}
  .hero__cta .btn{width:100%; justify-content:center}
  .pillars{grid-template-columns:1fr; gap:.9rem}
  .pillar,.pillar__in{clip-path:polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%)}
  .pillar__in{padding:1.5rem 1.7rem}
  .fgrid--2{grid-template-columns:1fr}
  .orgs{grid-template-columns:repeat(3,1fr)}
  .orgrow{grid-template-columns:1fr}
  .dims{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .cta-row{width:100%; flex-direction:column}
  .cta-row .btn{width:100%; justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  [data-reveal],.word,.pyr{opacity:1 !important; transform:none !important}
  .chain__dot{opacity:1 !important; transform:none !important}
}