/* =========================================================================
   Design layer v3 — loaded after design.css
   Calm, smooth, graphic. No blinking colour, no heavy filters, no 3D transforms on large layers.
   Backgrounds are theme-aware SVG masks generated by bgfx.js (var(--m-*)).
   ========================================================================= */
:root { --ease: cubic-bezier(.22, .8, .24, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); }
html { scroll-padding-top: 72px; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary) 45%, transparent) transparent; }
::selection { background: color-mix(in srgb, var(--accent) 55%, #fff); color: #1a1208; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 80%, #fff); outline-offset: 2px; border-radius: 6px; }
#bgfx-sprite, #mp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

body { background-image: radial-gradient(1100px 700px at 106% 20%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%), radial-gradient(900px 700px at -10% 52%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%), radial-gradient(1000px 800px at 96% 94%, color-mix(in srgb, var(--secondary) 6%, transparent), transparent 70%); background-repeat: no-repeat; }

/* ---------- smoothness ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: auto; }
.reveal.in { opacity: 1; transform: none; }
.grid > .reveal:nth-child(2), .st-grid > .reveal:nth-child(2) { transition-delay: .07s; } .grid > .reveal:nth-child(3), .st-grid > .reveal:nth-child(3) { transition-delay: .14s; }
.grid > .reveal:nth-child(4) { transition-delay: .21s; } .grid > .reveal:nth-child(5) { transition-delay: .28s; } .grid > .reveal:nth-child(6) { transition-delay: .35s; }
.page-enter { animation: pageIn .55s var(--ease) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.btn, .bento a, .scheme2, .odop-tile, .story2, .promo, .feat, .jn-card, .st-card, .leader2, .panel, .card { transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s, background-color .3s, color .3s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .hm-live .spark, .r-car { display: none; } }

/* ---------- buttons ---------- */
.btn { letter-spacing: .005em; }
.btn-grad { background: var(--grad); background-size: 140% 100%; background-position: 0 0; box-shadow: 0 14px 28px -14px var(--primary), inset 0 1px 0 rgba(255,255,255,.28); }
.btn-grad:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 20px 34px -14px var(--primary), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-accent { box-shadow: 0 14px 28px -14px var(--accent), inset 0 1px 0 rgba(255,255,255,.4); } .btn-accent:hover { transform: translateY(-2px); }
.btn-light:hover, .btn-outline:hover { transform: translateY(-2px); }

/* ---------- top: brand bar + nav ---------- */
.gov-strip { background: linear-gradient(90deg, var(--topbar-bg), color-mix(in srgb, var(--topbar-bg) 82%, var(--primary))); }
.brandbar { background: linear-gradient(180deg, color-mix(in srgb, var(--header-bg) 100%, #fff), var(--header-bg)); }
.brandbar::before { background: var(--primary); opacity: .05; -webkit-mask: var(--m-jaali) 0 0 / 64px repeat; mask: var(--m-jaali) 0 0 / 64px repeat; }
.navbar2 { background: linear-gradient(180deg, color-mix(in srgb, var(--secondary) 92%, #fff), var(--secondary)); }
[data-theme="ivory"] .navbar2 { background: #0A0A0B; }
.nav2 > .ni > a { transition: color .25s; }

/* ---------- hero ---------- */
:root { --dark-base: #12070c; } [data-theme="navy"] { --dark-base: #061434; } [data-theme="emerald"] { --dark-base: #02221b; } [data-theme="midnight"] { --dark-base: #04060f; } [data-theme="ivory"] { --dark-base: #0b0b14; }
.hero3 { background: var(--dark-base); contain: paint; } .section2.dark { background-color: var(--dark-base); }
.hero3 .h-img { transform: none; transition: opacity 1.6s ease; } .hero3 .h-img.on { opacity: .32; }
.hero3 .h-grad { background: radial-gradient(900px 560px at 76% 44%, color-mix(in srgb, var(--primary) 36%, transparent), transparent 68%), radial-gradient(760px 520px at 4% 100%, color-mix(in srgb, var(--secondary) 66%, transparent), transparent 70%), linear-gradient(112deg, rgba(8,3,6,.95) 0%, rgba(8,3,6,.74) 46%, rgba(8,3,6,.36) 100%); }
.h-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.h-contour { background: var(--accent); opacity: .11; -webkit-mask: var(--m-contour) center / cover no-repeat; mask: var(--m-contour) center / cover no-repeat; }
.h-mandala { background: #fff; opacity: .055; -webkit-mask: var(--m-mandala) 108% 46% / 820px no-repeat; mask: var(--m-mandala) 108% 46% / 820px no-repeat; }
.h-dots { background-image: radial-gradient(rgba(255,255,255,.24) 1px, transparent 1.5px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(ellipse at 74% 46%, #000 0, transparent 66%); mask-image: radial-gradient(ellipse at 74% 46%, #000 0, transparent 66%); opacity: .6; }
.hero3 .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; padding: 58px 0 160px; min-height: 680px; }
.hero3 .eyebrow2 { backdrop-filter: none; background: rgba(255,255,255,.07); }
.hero3 .eyebrow2 .dotlive::before { animation: none; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.28); }
.hero3 h1 { font-size: clamp(2.3rem, 4.5vw, 4.1rem); letter-spacing: -.02em; line-height: 1.05; }
.hl { animation: none; background-size: 100% auto; }
.hero-leaders .hl-card { backdrop-filter: none; background: rgba(255,255,255,.08); }
.search-pill { box-shadow: 0 28px 60px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.4); }
.ridge-div { --r1: color-mix(in srgb, var(--secondary) 50%, var(--dark-base)); --r2: color-mix(in srgb, var(--primary) 34%, var(--ridge-to)); --r3: var(--ridge-to); }
.hero-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 150px; --ridge-to: var(--bg); z-index: 2; pointer-events: none; display: block; }
.slide-nav { bottom: 78px; z-index: 5; }

/* hero map — instrument panel */
.hero-map { position: relative; max-width: 660px; margin-inline: auto; width: 100%; perspective: none; }
.hero-map .hm { position: relative; width: 100%; }
.hm-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hm-rings, .hm-live { pointer-events: none; }
.hm-rings .grat path { stroke: rgba(255,255,255,.075); stroke-width: 1.4; fill: none; }
.hm-rings .grat text { fill: rgba(255,255,255,.38); font-size: 21px; font-family: var(--font); letter-spacing: .08em; }
.hm-rings .rings circle { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1.8; }
.hm-rings .tk { stroke: rgba(255,255,255,.3); stroke-width: 2; fill: none; }
.hm-map .m-depth { fill: color-mix(in srgb, var(--secondary) 50%, #000); stroke: none; }
.hm-map .m-sheen { fill: url(#hmSheen); stroke: none; pointer-events: none; }
.hm-map .m-glow2 { fill: none; stroke: var(--accent); stroke-width: 22; opacity: .07; stroke-linejoin: round; }
.hm-map .m-glow { fill: none; stroke: var(--accent); stroke-width: 7; opacity: .3; stroke-linejoin: round; }
.hm-fill path { fill: rgba(255,255,255,var(--a, .08)); stroke: rgba(255,255,255,.5); stroke-width: 1.5; stroke-linejoin: round; cursor: pointer; transition: fill .3s var(--ease); }
.hm-fill path.ia { fill: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.1)); }
.hm-fill path.lb { fill: color-mix(in srgb, var(--accent-2) 24%, rgba(255,255,255,.08)); }
.hm-fill path:hover { fill: color-mix(in srgb, var(--accent) 62%, rgba(255,255,255,.2)); }
.hm-live .arc { fill: none; stroke: rgba(255,214,130,.55); stroke-width: 2.6; stroke-dasharray: 2 11; stroke-linecap: round; }
.hm-live .ind .halo { fill: color-mix(in srgb, var(--accent) 30%, transparent); }
.hm-live .ind .dotc { fill: #fff; stroke: var(--accent); stroke-width: 3.6; }
.hm-live .ind.dev .halo { fill: rgba(245,158,11,.3); } .hm-live .ind.dev .dotc { fill: #FFE29A; stroke: #F59E0B; }
.hm-live .ind.lbk .halo { fill: color-mix(in srgb, var(--accent-2) 34%, transparent); } .hm-live .ind.lbk .dotc { fill: #fff; stroke: var(--accent-2); }
.hm-live .spark { fill: #FFE9B0; }
.hm-live .city circle { fill: #fff; stroke: var(--accent); stroke-width: 5; }
.hm-live .city rect { fill: rgba(14,6,10,.78); stroke: rgba(255,255,255,.24); stroke-width: 1.5; }
.hm-live .city text { fill: #fff; font-size: 25px; font-weight: 700; font-family: var(--font); }
.hm-badge { position: absolute; right: 1%; top: 1%; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22); box-shadow: 0 20px 36px -18px rgba(0,0,0,.6); }
.hm-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-badge text { fill: rgba(255,255,255,.88); font-size: 8.4px; font-weight: 700; letter-spacing: .15em; font-family: var(--font); }
.hm-badge b { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; line-height: 1; background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hcard { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 10px 15px 10px 10px; border-radius: 18px; background: rgba(16,7,11,.68); border: 1px solid rgba(255,255,255,.18); color: #fff; box-shadow: 0 22px 40px -20px rgba(0,0,0,.7); }
.hcard .fc-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: var(--grad); flex: none; }
.hcard b { display: block; font-size: 1.22rem; line-height: 1.05; font-variant-numeric: tabular-nums; } .hcard small { display: block; font-size: .7rem; opacity: .8; margin-top: 2px; }
.hcard.c1 { left: -3%; top: 4%; } .hcard.c2 { left: -5%; top: 31%; }
.hm-sheen-dummy {} .hm-legend { position: relative; margin: -4px auto 0; width: max-content; max-width: 100%; display: flex; gap: 14px; padding: 7px 16px; border-radius: 99px; background: rgba(16,7,11,.6); border: 1px solid rgba(255,255,255,.14); font-size: .7rem; color: rgba(255,255,255,.82); white-space: nowrap; z-index: 3; }
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; } .hm-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .hm-legend .d1 { background: #fff; box-shadow: 0 0 0 2px var(--accent); } .hm-legend .d2 { background: #FFE29A; box-shadow: 0 0 0 2px #F59E0B; } .hm-legend .d3 { background: #fff; box-shadow: 0 0 0 2px var(--accent-2); } .hm-legend .ln { width: 16px; height: 0; border-top: 2px dotted rgba(255,214,130,.8); border-radius: 0; }

/* ---------- quick-service dock ---------- */
.bento-wrap { margin-top: -100px; }
.bento { gap: 6px; padding: 14px; border-radius: 32px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 50px 90px -40px rgba(40,10,20,.55), 0 12px 26px -14px rgba(40,10,20,.2); border: 1px solid color-mix(in srgb, var(--border) 60%, #fff); }
.bento a { border-radius: 22px; padding: 20px 6px 16px; overflow: hidden; }
.bento a::before { content: ''; position: absolute; left: 50%; top: 18px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c, var(--primary)) 18%, transparent), transparent); opacity: 0; transition: opacity .4s var(--ease); }
.bento a:hover { background: color-mix(in srgb, var(--primary-50) 70%, transparent); transform: translateY(-5px); } .bento a:hover::before { opacity: 1; }
.bento a + a::after { content: ''; position: absolute; left: -3px; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, var(--border), transparent); }

/* ---------- section scaffolding & backgrounds ---------- */
.section2 { padding: 104px 0; }
.section2 > .container { position: relative; z-index: 1; }
.section2[class*="bg-"]::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--primary); opacity: .07; }
.bg-contour::before { -webkit-mask: var(--m-contour) center / cover no-repeat; mask: var(--m-contour) center / cover no-repeat; }
.bg-jaali::before { opacity: .075; -webkit-mask: var(--m-jaali) 0 0 / 84px repeat, radial-gradient(ellipse 90% 70% at 50% 0, #000, transparent 78%); mask: var(--m-jaali) 0 0 / 84px repeat, radial-gradient(ellipse 90% 70% at 50% 0, #000, transparent 78%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.bg-plus::before { opacity: .12; -webkit-mask: var(--m-plus) 0 0 / 38px repeat, radial-gradient(ellipse 80% 60% at 100% 0, #000, transparent 75%); mask: var(--m-plus) 0 0 / 38px repeat, radial-gradient(ellipse 80% 60% at 100% 0, #000, transparent 75%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.bg-waves::before { opacity: .09; -webkit-mask: var(--m-waves) 0 0 / 130px 61px repeat, linear-gradient(180deg, #000, transparent 85%); mask: var(--m-waves) 0 0 / 130px 61px repeat, linear-gradient(180deg, #000, transparent 85%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.bg-rays::before { background: var(--accent); opacity: .07; -webkit-mask: var(--m-rays) 50% 0 / 1300px no-repeat, linear-gradient(180deg, #000, transparent 60%); mask: var(--m-rays) 50% 0 / 1300px no-repeat, linear-gradient(180deg, #000, transparent 60%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.bg-mesh::before { opacity: 1; background: radial-gradient(640px 360px at 6% 12%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%), radial-gradient(600px 380px at 96% 70%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(520px 320px at 40% 100%, color-mix(in srgb, var(--secondary) 7%, transparent), transparent 70%); }
.section2.tint { background: linear-gradient(180deg, var(--bg-alt), color-mix(in srgb, var(--bg-alt) 40%, var(--bg))); }
.shead { margin-bottom: 52px; }
.shead h2 { font-size: clamp(1.95rem, 3.8vw, 3.05rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 12px 0 4px; }
.shead .kick { padding: 6px 16px; border-radius: 99px; background: color-mix(in srgb, var(--primary) 9%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); }
.shead .kick svg { width: 18px; height: 18px; }
.shead .orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 16px; }
.shead .orn b { width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); } .shead .orn b:last-child { transform: scaleX(-1); }
.shead .orn u { width: 9px; height: 9px; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.shead.left .orn { justify-content: flex-start; }
.section2.dark .shead .kick { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: var(--accent); } .section2.dark .shead h2 { color: #fff; }
.sec-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 110px; --ridge-to: var(--bg-alt); z-index: 2; pointer-events: none; display: block; }

/* ---------- promos ---------- */
.promo { border-radius: 24px; padding: 20px 22px; min-height: 96px; }
.promo::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .09; -webkit-mask: var(--m-jaali) 100% 0 / 60px repeat; mask: var(--m-jaali) 100% 0 / 60px repeat; }
.promo:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* ---------- statistics ---------- */
.stats3 { padding: 112px 0 170px; background-image: radial-gradient(1100px 620px at 86% -4%, color-mix(in srgb, var(--primary) 36%, transparent), transparent 70%), radial-gradient(900px 520px at -4% 100%, color-mix(in srgb, var(--secondary) 62%, transparent), transparent 70%); }
.st-art { position: absolute; inset: 0; pointer-events: none; }
.st-net { background: var(--accent); opacity: .1; -webkit-mask: var(--m-net) center / cover no-repeat; mask: var(--m-net) center / cover no-repeat; }
.st-glow { background: radial-gradient(520px 320px at 18% 24%, rgba(255,255,255,.06), transparent 70%); }
.st-map { position: absolute; right: -9%; top: 8%; width: 66%; pointer-events: none; }
.st-mp { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.16); stroke-width: 1.4; stroke-linejoin: round; }
.st-skyline { position: absolute; left: 0; right: 0; bottom: 40px; width: 100%; height: 120px; fill: var(--accent); pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); mask-image: linear-gradient(180deg, transparent, #000 70%); }
.st-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 18px; position: relative; }
.st-card { position: relative; overflow: hidden; border-radius: 28px; padding: 24px 24px 22px; color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 34px 56px -34px rgba(0,0,0,.7); }
.st-card::before { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent); }
.st-card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.3); }
.st-card.lg { grid-column: span 3; } .st-card.xl { grid-column: span 4; } .st-card.mini { grid-column: span 2; padding: 20px; }
.st-card .sc-top { display: flex; align-items: center; justify-content: space-between; position: relative; }
.st-card .sc-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--grad); box-shadow: 0 12px 20px -10px var(--primary), inset 0 1px 0 rgba(255,255,255,.35); margin: 0; position: relative; }
.st-card.mini .sc-ic { margin-bottom: 14px; }
.sc-chip { font-size: .72rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 3px; } .sc-chip.up { color: #4ADE80; background: rgba(74,222,128,.13); }
.st-card .sc-num { display: flex; align-items: baseline; gap: 4px; margin: 16px 0 2px; position: relative; }
.st-card.mini .sc-num { margin-top: 0; }
.st-card .sc-num b { display: inline-block; font-family: var(--font-head); font-weight: 800; font-size: clamp(2.3rem, 3.8vw, 3.3rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent) 70%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-card.mini .sc-num b { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.st-card .sc-num small { font-size: 1.15rem; opacity: .7; font-weight: 600; }
.st-card h3 { color: #fff; font-family: var(--font); font-size: 1rem; font-weight: 700; margin: 8px 0 2px; position: relative; }
.st-card p { margin: 0; font-size: .8rem; opacity: .68; position: relative; max-width: 30ch; }
.st-card svg.spark { position: absolute; right: 14px; top: 22px; width: 46%; height: 40px; opacity: .7; pointer-events: none; }
.ringbox { position: relative; width: 172px; height: 172px; margin: 14px auto 6px; }
.ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .rb { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 9; } .ring .rt { stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.ring .rv { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.2s var(--ease-out) .25s; }
.reveal.in .ring .rv { stroke-dashoffset: calc(100 - var(--v)); }
.ringbox .rc { position: absolute; inset: 0; display: grid; place-items: center; } .ringbox .rc b { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; }
.area, .bars { display: block; width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.area .al { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 2.4s var(--ease-out) .3s; }
.reveal.in .area .al { stroke-dashoffset: 0; }
.area .af { opacity: 0; transition: opacity 1.4s ease 1s; } .reveal.in .area .af { opacity: 1; }
.area .ae { fill: #fff; stroke: var(--accent); stroke-width: 3.4; opacity: 0; transition: opacity .5s ease 2.2s; } .reveal.in .area .ae { opacity: 1; }
.bars rect { fill: rgba(255,255,255,.2); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms + .3s); }
.reveal.in .bars rect { transform: none; } .bars rect.hi { fill: var(--accent); }

/* ---------- lifecycle journey ---------- */
.journey3 { padding: 118px 0 110px; background: linear-gradient(180deg, var(--bg-alt) 0%, color-mix(in srgb, var(--accent) 7%, var(--bg)) 100%); overflow: hidden; }
.journey3 .shead { margin-bottom: 76px; }
.jr { position: relative; padding: 0 var(--jpad, 70px); --jpad: 70px; --cols: 4; }
.jr[data-cols="2"] { --jpad: 30px; --cols: 2; } .jr[data-cols="1"] { --jpad: 0px; --cols: 1; }
.jr-scene { position: absolute; inset: -40px 0 -50px; pointer-events: none; z-index: 0; }
.jr-scene .sp { position: absolute; fill: var(--primary); opacity: .3; overflow: visible; }
.jr-scene .sp.s1 { fill: var(--secondary); opacity: .26; } .jr-scene .sp.s2 { fill: var(--accent-2); opacity: .32; }
.jr-scene .sun { fill: var(--accent); color: var(--accent); opacity: .45; } .jr-scene .cld { fill: var(--primary); opacity: .1; } .jr-scene .plane { fill: var(--primary); opacity: .28; }
.jr-road { position: absolute; left: var(--jpad); top: 0; pointer-events: none; z-index: 1; overflow: visible; }
.jr-road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.r-edge { stroke: color-mix(in srgb, var(--primary) 20%, transparent); stroke-width: 58px; }
.r-top { stroke: #2b2f3b; stroke-width: 44px; filter: drop-shadow(0 10px 8px rgba(20,10,20,.28)); }
[data-theme="midnight"] .r-top { stroke: #232a44; } [data-theme="midnight"] .r-edge { stroke: rgba(139,92,246,.22); }
.r-line { stroke: rgba(255,255,255,.8); stroke-width: 2.6px; stroke-dasharray: 11 13; }
.r-car rect { fill: var(--accent); } .r-car .gl { fill: #1b1208; opacity: .75; } .r-car .hd { fill: #fff; }
.jr-nodes { position: relative; z-index: 2; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); column-gap: 22px; row-gap: 118px; }
.jn { position: relative; padding-top: 52px; }
.jn .jpin { position: absolute; left: calc(50% - 32px); top: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 27px; z-index: 3; background: linear-gradient(145deg, var(--p1), var(--p2)); box-shadow: 0 0 0 5px var(--bg), 0 0 0 7px color-mix(in srgb, var(--p1) 45%, transparent), 0 18px 28px -10px var(--p1), inset 0 2px 0 rgba(255,255,255,.35); transition: transform .5s var(--ease); }
.jn .jpin em { position: absolute; right: -8px; top: -8px; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: .74rem; font-weight: 800; color: #fff; background: #151a28; border: 2px solid var(--bg); }
.jn:hover .jpin { transform: scale(1.1) rotate(-4deg); }
.jn-card { position: relative; display: block; height: 100%; border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--text); }
.jn-card:hover { transform: translateY(-8px); box-shadow: 0 36px 56px -26px var(--p1); border-color: color-mix(in srgb, var(--p1) 50%, var(--border)); }
.jn-art { position: relative; display: flex; justify-content: space-between; align-items: flex-start; height: 86px; padding: 14px 16px; overflow: hidden; color: #fff; background: linear-gradient(135deg, var(--p1), var(--p2)); }
.jn-art::before { content: ''; position: absolute; inset: 0; background: #fff; opacity: .16; -webkit-mask: var(--m-jaali) 0 0 / 52px repeat; mask: var(--m-jaali) 0 0 / 52px repeat; }
.jn-art .big { position: absolute; right: -4px; bottom: -22px; font-size: 96px; opacity: .24; transform: rotate(-10deg); line-height: 1; }
.jn-ph { position: relative; background: rgba(255,255,255,.22); border-radius: 99px; padding: 3px 11px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.jn-step { position: relative; font-size: .7rem; font-weight: 700; letter-spacing: .16em; opacity: .92; padding-top: 4px; margin-right: 70px; }
.jn-body { display: block; padding: 16px 18px 18px; }
.jn-body b { display: block; font-size: 1.02rem; line-height: 1.25; margin-bottom: 5px; font-family: var(--font-head); }
.jn-body small { display: block; color: var(--text-muted); font-size: .8rem; line-height: 1.5; }
.jn-go { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: .78rem; font-weight: 700; color: var(--p1); transition: gap .3s var(--ease); } .jn-card:hover .jn-go { gap: 9px; }
.jr-end { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; transform: translate(-50%, -100%); pointer-events: none; }
.jr-end svg { width: 36px; height: 58px; fill: var(--primary); } .jr-end.finish svg { fill: var(--accent); width: 48px; height: 60px; }
.jr-end b { font-size: .6rem; letter-spacing: .2em; color: #fff; background: var(--primary); padding: 3px 8px; border-radius: 6px; } .jr-end.finish b { background: var(--accent); color: #1b1208; }
.jr[data-cols="1"] .jn { padding: 0 0 0 82px; } .jr[data-cols="1"] .jn .jpin { left: 0; top: 16px; } .jr[data-cols="1"] .jr-nodes { row-gap: 22px; }
.jr[data-cols="1"] .r-edge { stroke-width: 40px; } .jr[data-cols="1"] .r-top { stroke-width: 30px; } .jr[data-cols="1"] .jr-end { display: none; } .jr[data-cols="1"] .jr-scene { display: none; }
.jr[data-cols="2"] .jn-art { height: 78px; }

/* ---------- other home sections ---------- */
.gis-sec { padding-top: 70px; }
.gis2 { border-radius: 38px; }
.odop2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .odop2 > * { min-width: 0; } .odop2 .mini-map { max-width: 560px; margin-inline: auto; width: 100%; }
.gis2::after { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .05; -webkit-mask: var(--m-jaali) 0 0 / 70px repeat; mask: var(--m-jaali) 0 0 / 70px repeat; }
.feat, .scheme2, .odop-tile, .story2, .leader2 { border-radius: 26px; }
.scheme2:hover, .story2:hover { transform: translateY(-8px); }
.why2 .w { border-radius: 28px; }
.cta-band { border-radius: 38px; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: .08; -webkit-mask: var(--m-contour) center / cover no-repeat; mask: var(--m-contour) center / cover no-repeat; pointer-events: none; }
.panel, .card { border-radius: 22px; }

/* ---------- footer ---------- */
.footer2 .f-brand svg, .footer2 .f-brand img { width: 58px; height: 58px; flex: none; object-fit: contain; }
.footer2 { background: radial-gradient(900px 400px at 85% 0, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%), var(--footer-bg); padding-top: 64px; margin-top: 150px; }
.footer2::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: .035; -webkit-mask: var(--m-jaali) 0 0 / 84px repeat; mask: var(--m-jaali) 0 0 / 84px repeat; pointer-events: none; }
.footer2 > .container { position: relative; z-index: 1; }
.footer2 .skyline { top: auto; bottom: calc(100% - 1px); height: 120px; background: none; z-index: 1; }

/* ---------- inner page heroes ---------- */
.page-hero { background: radial-gradient(700px 320px at 88% 0, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%), var(--grad); padding: 54px 0 84px; }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: .1; mix-blend-mode: normal; -webkit-mask: var(--m-contour) center / cover no-repeat; mask: var(--m-contour) center / cover no-repeat; }
.page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; top: auto; width: auto; height: 70px; border: 0; border-radius: 0; background: var(--bg); z-index: 0; -webkit-mask: var(--m-ridge) bottom / 100% 100% no-repeat; mask: var(--m-ridge) bottom / 100% 100% no-repeat; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { letter-spacing: -.02em; font-weight: 800; }

/* ---------- admin accordion (replaces <details>/<summary>) ---------- */
.acc .acc-head { display: flex; align-items: center; gap: 12px; }
.acc .acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; padding: 4px; text-align: left; color: inherit; font: inherit; cursor: pointer; border-radius: 12px; }
.acc .acc-toggle:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.acc .acc-chev { font-size: 22px; transition: transform .3s var(--ease); color: var(--text-muted); } .acc.open .acc-chev { transform: rotate(180deg); }
.acc:not(.open) .acc-body { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero3 .hero-grid { grid-template-columns: 1fr; padding: 40px 0 150px; min-height: 0; } .hero-map { max-width: 540px; }
  .st-grid { grid-template-columns: repeat(6, 1fr); } .st-card.lg { grid-column: span 3; } .st-card.xl { grid-column: span 6; order: -1; } .st-card.mini { grid-column: span 2; }
  .st-map { width: 90%; right: -20%; }
}
@media (max-width: 720px) {
  .section2 { padding: 70px 0; } .stats3 { padding: 80px 0 130px; } .journey3 { padding: 80px 0; } .journey3 .shead { margin-bottom: 40px; }
  .hero3 .hero-grid { padding: 30px 0 140px; gap: 10px; } .hero-map { max-width: 420px; } .hcard.c2, .hcard.c3 { display: none; } .hcard.c1 { left: 0; top: -2%; } .hm-badge { width: 84px; height: 84px; } .hm-badge b { font-size: 1.6rem; } .hm-badge text { font-size: 9.5px; } .hm-legend { display: none; }
  .hero-ridge { height: 90px; } .slide-nav { bottom: 50px; } .bento-wrap { margin-top: -70px; }
  .st-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .st-card.mini:last-child { grid-column: span 2; } .st-card.lg, .st-card.xl { grid-column: span 2; } .st-card.mini { grid-column: span 1; padding: 16px; } .st-card.mini p { display: none; } .st-card { border-radius: 22px; padding: 20px; }
  .st-card.mini svg.spark { width: 44%; height: 30px; top: 18px; }
  .shead { margin-bottom: 34px; } .shead .orn b { width: 40px; }
  .jr .jn-body { padding: 14px 16px; }
}