/* =========================================================================
   Design layer v2 — premium visual system (loaded after app.css)
   ========================================================================= */
:root { --head-weight: 700; --head-spacing: -0.01em; --map-a: color-mix(in srgb, var(--primary) 78%, #fff); --map-b: var(--secondary); --ink: #0b0f1a; }
h1, h2, h3, h4 { font-weight: var(--head-weight); letter-spacing: var(--head-spacing); }
body { text-rendering: optimizeLegibility; }

/* ---------- government strip ---------- */
.gov-strip { background: var(--topbar-bg); color: var(--topbar-text); font-size: .76rem; position: relative; z-index: 60; }
.gov-strip .container { display: flex; align-items: center; justify-content: space-between; min-height: 34px; gap: 10px; }
.gov-strip .gs-l { display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; }
.gov-strip .flag { width: 22px; height: 15px; border-radius: 2px; background: linear-gradient(#FF9933 0 33.3%, #fff 0 66.6%, #138808 0); box-shadow: 0 0 0 1px rgba(255,255,255,.25); flex: none; position: relative; }
.gov-strip .flag::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; border: 1px solid #0B3D91; transform: translate(-50%,-50%); }
.gov-strip .gs-r { display: flex; align-items: center; gap: 2px; }
.gov-strip button, .gov-strip a { color: var(--topbar-text); background: none; border: 0; cursor: pointer; font: inherit; padding: 4px 7px; border-radius: 6px; }
.gov-strip button:hover, .gov-strip a:hover, .gov-strip button.on { background: rgba(255,255,255,.14); }
.gov-strip .sep { width: 1px; height: 14px; background: rgba(255,255,255,.25); margin: 0 4px; }

/* ---------- brand bar (two-tier header) ---------- */
.brandbar { background: var(--header-bg); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.brandbar::before { content: ''; position: absolute; inset: 0; background: var(--pattern); opacity: .55; pointer-events: none; }
.brandbar::after { content: ''; position: absolute; right: -60px; top: -80px; width: 380px; height: 260px; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
.brandbar .container { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 96px; position: relative; z-index: 1; }
.brand2 { display: flex; align-items: center; gap: 14px; color: var(--header-text); min-width: 0; flex: 1 1 auto; }
.brand2 .marks { display: flex; align-items: center; gap: 12px; flex: none; }
.brand2 .emblem, .brand2 .emblem-img { width: 66px; height: 66px; flex: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.brand2 .vsep { width: 1px; height: 54px; background: linear-gradient(transparent, var(--border), transparent); }
.brand2 .dlogo, .brand2 .dlogo-img { width: 60px; height: 60px; flex: none; object-fit: contain; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.22; }
.brand-txt .b-hi { font-family: 'Mukta', var(--font-head); font-size: clamp(1rem, 1.55vw, 1.32rem); font-weight: 800; color: var(--primary); }
.brand-txt .b-en { font-family: var(--font-head); font-size: clamp(.86rem, 1.2vw, 1.04rem); font-weight: 700; color: var(--header-text); }
.brand-txt .b-gov { font-size: .78rem; color: var(--text-muted); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.brand-txt .b-gov .pill { background: var(--grad); color: #fff; padding: 2px 10px; border-radius: 99px; font-weight: 700; font-size: .7rem; letter-spacing: .02em; }
.brand-right { display: flex; align-items: center; gap: 14px; flex: none; }
.gis-pill { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--grad); color: #fff !important; box-shadow: 0 10px 24px -12px var(--primary); }
.gis-pill .gp-ic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 20px; }
.gis-pill b { display: block; font-size: .8rem; line-height: 1.1; } .gis-pill small { font-size: .7rem; opacity: .9; font-variant-numeric: tabular-nums; }
.leader-chip { display: flex; align-items: center; gap: 10px; margin: 0; }
.leader-chip .ph { width: 58px; height: 58px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #FF9933, #fff, #138808, #FF9933); flex: none; box-shadow: 0 8px 18px -8px rgba(0,0,0,.35); }
.leader-chip img, .leader-chip .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--surface); background: #f3f4f6; display: grid; place-items: center; font-weight: 800; color: var(--primary); }
.leader-chip figcaption { line-height: 1.15; }
.leader-chip b { display: block; font-size: .82rem; color: var(--header-text); white-space: nowrap; } .leader-chip small { font-size: .68rem; color: var(--text-muted); white-space: nowrap; }

/* ---------- sticky nav bar ---------- */
.navbar2 { position: sticky; top: 0; z-index: 900; background: var(--secondary); box-shadow: 0 10px 30px -18px rgba(0,0,0,.5); }
[data-theme="ivory"] .navbar2 { background: #0A0A0B; }
[data-theme="midnight"] .navbar2 { background: rgba(10,14,32,.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); }
.navbar2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #FF9933, var(--accent), #138808); opacity: .9; }
.navbar2 .container { display: flex; align-items: center; gap: 6px; min-height: 54px; }
.nav2 { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav2 > .ni { position: relative; }
.nav2 > .ni > a { display: flex; align-items: center; gap: 7px; padding: 0 13px; height: 54px; color: rgba(255,255,255,.88); font-weight: 600; font-size: .9rem; position: relative; white-space: nowrap; }
.nav2 > .ni > a i.lead { font-size: 17px; opacity: .85; }
.nav2 > .ni > a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--accent); transform: scaleX(0); transition: transform .25s; }
.nav2 > .ni > a:hover, .nav2 > .ni > a.active { color: #fff; }
.nav2 > .ni > a:hover::after, .nav2 > .ni > a.active::after { transform: scaleX(1); }
.nav2 .mega { position: absolute; top: 100%; left: 0; min-width: 620px; background: var(--surface); border: 1px solid var(--border); border-radius: 0 0 22px 22px; box-shadow: var(--shadow-lg); padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s; z-index: 50; }
[data-theme="midnight"] .nav2 .mega { background: #0D1328; }
.nav2 > .ni:hover .mega, .nav2 > .ni:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.nav2 .mega a { display: flex; gap: 12px; padding: 11px 12px; border-radius: 14px; color: var(--text); align-items: flex-start; }
.nav2 .mega a:hover { background: var(--primary-50); }
.nav2 .mega a i { font-size: 20px; color: #fff; width: 40px; height: 40px; display: grid; place-items: center; background: var(--grad); border-radius: 12px; flex: none; box-shadow: 0 8px 16px -10px var(--primary); }
.nav2 .mega a b { display: block; font-size: .88rem; } .nav2 .mega a small { color: var(--text-muted); font-size: .75rem; line-height: 1.3; display: block; }
.nav2 .mega .mega-feature { grid-row: span 3; border-radius: 16px; padding: 16px; color: #fff; background: var(--grad); display: flex; flex-direction: column; justify-content: flex-end; min-height: 180px; position: relative; overflow: hidden; }
.nav-act { display: flex; align-items: center; gap: 8px; }
.nav-act .nbtn { height: 38px; min-width: 38px; padding: 0 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .84rem; cursor: pointer; }
.nav-act .nbtn:hover { background: rgba(255,255,255,.18); }
.nav-act .nbtn.cta { background: var(--accent); color: #1b1300; border-color: transparent; }
.nav-act .hamb { display: none; }

/* ---------- hero v3 ---------- */
.hero3 { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: #12060b; }
[data-theme="navy"] .hero3 { background: #050d24; } [data-theme="emerald"] .hero3 { background: #021a14; } [data-theme="midnight"] .hero3 { background: #04060f; } [data-theme="ivory"] .hero3 { background: #0b0b14; }
.hero3 .h-bg { position: absolute; inset: 0; z-index: -3; }
.hero3 .h-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease, transform 9s ease; transform: scale(1.08); }
.hero3 .h-grad { position: absolute; inset: 0; z-index: -2; background: radial-gradient(1200px 600px at 85% 20%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%), radial-gradient(900px 500px at 10% 90%, color-mix(in srgb, var(--secondary) 80%, transparent), transparent 60%), linear-gradient(115deg, rgba(10,4,8,.92) 0%, rgba(10,4,8,.55) 50%, rgba(10,4,8,.25) 100%); }
.hero3 .eyebrow2 { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); font-size: .8rem; font-weight: 600; }
.hero3 .eyebrow2 .dotlive { background: var(--accent); color: #1b1300; border-radius: 99px; padding: 3px 10px; font-weight: 800; font-size: .68rem; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; }
.hero3 .eyebrow2 .dotlive::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 #16A34A; animation: pdot 1.6s infinite; }
.hero3 h1 { font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.06; margin: 18px 0 16px; text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.hl { background: linear-gradient(100deg, #FFD27A 0%, #FFB347 30%, #FF7A59 60%, #FFD27A 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
[data-theme="emerald"] .hl { background-image: linear-gradient(100deg, #BEF264, #34D399, #22D3EE, #BEF264); } [data-theme="navy"] .hl { background-image: linear-gradient(100deg, #FDE68A, #F4B400, #FFFFFF, #FDE68A); } [data-theme="midnight"] .hl { background-image: linear-gradient(100deg, #C4B5FD, #F472B6, #22D3EE, #C4B5FD); } [data-theme="ivory"] .hl { background-image: linear-gradient(100deg, #A5B4FC, #F9A8D4, #FDBA74, #A5B4FC); }
@keyframes shine { to { background-position: 200% center; } }
.hero3 .lead2 { font-size: clamp(1rem, 1.35vw, 1.15rem); opacity: .88; max-width: 600px; }
.hero3 .cta2 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .7s; }
.btn-shine:hover::after { left: 130%; }
.search-pill { margin-top: 26px; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.96); border-radius: 18px; padding: 6px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); max-width: 620px; }
[data-theme="midnight"] .search-pill { background: rgba(20,26,52,.92); border: 1px solid var(--border); }
.search-pill select { border: 0; background: var(--bg-alt); border-radius: 12px; padding: 0 12px; height: 46px; font: inherit; font-size: .84rem; color: var(--text); font-weight: 600; }
.search-pill input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: .95rem; padding: 0 10px; color: var(--text); min-width: 0; height: 46px; }
.search-pill .btn { height: 46px; border-radius: 13px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; font-size: .82rem; opacity: .9; }
.trust-row span { display: flex; align-items: center; gap: 7px; } .trust-row i { color: var(--accent); font-size: 18px; }
.mpsvg { width: 100%; height: auto; display: block; overflow: visible; }
.mpsvg .dist path { stroke: rgba(255,255,255,.6); stroke-width: .9; stroke-linejoin: round; transition: filter .25s; cursor: pointer; }
.mpsvg .m-shadow { fill: rgba(20,8,14,.3); }
.mpsvg .dist path:hover { filter: brightness(1.18) saturate(1.1); }
.mpsvg .dotc { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.mpsvg .lbl { font-size: 19px; font-weight: 700; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; pointer-events: none; }
.hero-leaders { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.hero-leaders .hl-card { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); }
.hero-leaders img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.hero-leaders b { font-size: .84rem; display: block; line-height: 1.1; } .hero-leaders small { font-size: .7rem; opacity: .85; }
.cd2 { display: flex; gap: 8px; margin-top: 16px; }
.cd2 .cd { min-width: 64px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); text-align: center; }
.cd2 .cd b { font-size: 1.45rem; display: block; line-height: 1; font-variant-numeric: tabular-nums; } .cd2 .cd small { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.slide-nav { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 4; }
.slide-nav button { width: 44px; height: 6px; border-radius: 6px; border: 0; background: rgba(255,255,255,.25); cursor: pointer; overflow: hidden; position: relative; padding: 0; }
.slide-nav button.on::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: fillbar 7s linear forwards; }
@keyframes fillbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.map-tip { position: fixed; z-index: 6000; pointer-events: none; background: rgba(15,15,25,.92); color: #fff; padding: 8px 12px; border-radius: 12px; font-size: .8rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); transform: translate(-50%, -120%); white-space: nowrap; }

/* ---------- quick bento ---------- */
.bento-wrap { position: relative; z-index: 5; margin-top: -86px; }
.bento { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 28px; padding: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.45); }
[data-theme="midnight"] .bento { background: rgba(13,19,40,.92); backdrop-filter: blur(18px); }
.bento a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 14px 6px; border-radius: 18px; color: var(--text); font-weight: 600; font-size: .84rem; line-height: 1.25; transition: .25s; position: relative; }
.bento a:hover { background: var(--primary-50); transform: translateY(-4px); }
.ico3d { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 26px; color: #fff; position: relative; background: linear-gradient(145deg, var(--c1, var(--primary)), var(--c2, var(--secondary))); box-shadow: 0 14px 22px -12px var(--c1, var(--primary)), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.18); transition: transform .3s; }
.ico3d::after { content: ''; position: absolute; inset: 3px 3px 50% 3px; border-radius: 15px 15px 40% 40%; background: linear-gradient(rgba(255,255,255,.35), transparent); }
.bento a:hover .ico3d { transform: rotate(-8deg) scale(1.08); }
.bento small { font-size: .7rem; color: var(--text-muted); font-weight: 500; display: block; margin-top: -4px; }

/* ---------- section heading motif ---------- */
.shead { text-align: center; max-width: 760px; margin: 0 auto 42px; }
.shead .kick { display: inline-flex; align-items: center; gap: 10px; font-size: .76rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.shead .kick svg { width: 26px; height: 26px; }
.shead h2 { margin: 10px 0 8px; font-size: clamp(1.7rem, 3.2vw, 2.7rem); }
.shead p { color: var(--text-muted); margin: 0; font-size: 1.02rem; }
.shead.left { text-align: left; margin-left: 0; }
.section2 { padding: 96px 0; position: relative; }
.section2.tint { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.section2.dark { background: #0d0610; color: #fff; overflow: hidden; }
[data-theme="navy"] .section2.dark { background: #061434; } [data-theme="emerald"] .section2.dark { background: #022c22; } [data-theme="midnight"] .section2.dark { background: #03050c; } [data-theme="ivory"] .section2.dark { background: #0a0a0b; }
.section2.dark .shead p { color: rgba(255,255,255,.75); } .section2.dark .shead .kick { color: var(--accent); }

/* ---------- stats band ---------- */

/* ---------- journey road ---------- */

/* ---------- GIS 2027 showcase ---------- */
.gis2 { position: relative; border-radius: 34px; overflow: hidden; color: #fff; isolation: isolate; padding: 54px; background: #12060b; box-shadow: 0 50px 100px -50px rgba(0,0,0,.6); }
.gis2 .bgimg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .3; z-index: -2; }
.gis2::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 400px at 90% 0%, color-mix(in srgb, var(--primary) 70%, transparent), transparent 60%), linear-gradient(90deg, rgba(12,4,8,.95), rgba(12,4,8,.6)); }
.gis2 .skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: -1; opacity: .35; }
.gis2-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.leader-frame { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.leader-frame .lf { width: 150px; height: 150px; border-radius: 50%; padding: 5px; background: conic-gradient(from 0deg, #FF9933, #FFD27A, #fff, #138808, #FF9933); box-shadow: 0 20px 40px -14px rgba(0,0,0,.6); }
.leader-frame img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #12060b; }
.leader-frame b { font-size: 1.05rem; } .leader-frame small { opacity: .8; font-size: .78rem; }

/* ---------- showcase cards ---------- */
.glass-light { background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); }
.land2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: stretch; }
.land2 .mapbox { position: relative; border-radius: 28px; overflow: hidden; min-height: 470px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.land2 .mapbox .fl { position: absolute; z-index: 500; }
.feat-list { display: grid; gap: 12px; }
.feat { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); transition: .25s; }
.feat:hover { border-color: var(--primary); transform: translateX(4px); }
.feat .ico3d { width: 46px; height: 46px; font-size: 21px; border-radius: 14px; flex: none; }
.feat b { display: block; } .feat p { margin: 2px 0 0; color: var(--text-muted); font-size: .86rem; }
.scheme2 { position: relative; border-radius: 22px; padding: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: .3s; display: flex; flex-direction: column; height: 100%; }
.scheme2::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: .3s; }
.scheme2:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .scheme2:hover::before { opacity: 1; }
.scheme2 .s-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.scheme2 h3 { font-size: 1.05rem; margin: 0 0 6px; } .scheme2 p { color: var(--text-muted); font-size: .86rem; flex: 1; }
.scheme2 .s-ben { font-weight: 700; font-size: .86rem; color: var(--primary); display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 14px; }
.odop2 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: center; }
.odop2 .mini-map { position: relative; }
.odop2 .mini-map .dist path { fill: var(--c, #ccc); stroke: #fff; stroke-width: .8; transition: .2s; cursor: pointer; }
.odop2 .mini-map .dist path:hover { filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,0,0,.3)); }
.odop-tile { width: 230px; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: .3s; color: var(--text); display: block; }
.odop-tile:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow-lg); }
.odop-tile .ot-art { height: 160px; display: grid; place-items: center; font-size: 70px; position: relative; overflow: hidden; }
.odop-tile .ot-art::before { content: ''; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.18); top: -60px; right: -50px; }
.odop-tile .ot-art::after { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 18px solid rgba(255,255,255,.12); bottom: -50px; left: -30px; }
.odop-tile .ot-art span { position: relative; z-index: 1; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.odop-tile .ot-b { padding: 14px 16px; } .odop-tile .ot-b b { display: block; } .odop-tile .ot-b small { color: var(--text-muted); }
.why2 { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 16px; }
.why2 .w { position: relative; border-radius: 24px; overflow: hidden; color: #fff; display: flex; align-items: flex-end; padding: 20px; isolation: isolate; }
.why2 .w .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transition: transform .8s; }
.why2 .w:hover .bg { transform: scale(1.08); }
.why2 .w::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.8)); }
.why2 .w.big { grid-column: span 2; grid-row: span 2; }
.why2 .w.stat { background: var(--grad); flex-direction: column; justify-content: center; align-items: flex-start; }
.why2 .w.stat::after { display: none; }
.why2 .w.stat b { font-size: 2.6rem; font-family: var(--font-head); line-height: 1; }
.why2 .w h3 { color: #fff; margin: 0 0 4px; } .why2 .w small { opacity: .85; }
.leader2 { text-align: center; padding: 30px 20px 24px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.leader2::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: var(--grad); opacity: .9; }
.leader2 .lp { width: 128px; height: 128px; margin: 10px auto 14px; border-radius: 50%; padding: 4px; background: conic-gradient(#FF9933, #fff, #138808, #FF9933); position: relative; }
.leader2 .lp img, .leader2 .lp .ini { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface); background: var(--bg-alt); display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; color: var(--primary); }
.leader2 b { display: block; font-size: 1.02rem; } .leader2 small { color: var(--text-muted); font-size: .8rem; display: block; }
.leader2 blockquote { margin: 12px 0 0; font-size: .86rem; color: var(--text-muted); font-style: italic; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee .mq { display: flex; gap: 14px; width: max-content; animation: tick 40s linear infinite; }
.marquee:hover .mq { animation-play-state: paused; }
.cta-band { position: relative; border-radius: 34px; padding: 50px; color: #fff; background: var(--grad); overflow: hidden; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; align-items: center; box-shadow: var(--shadow-lg); }
.cta-band::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 70px solid rgba(255,255,255,.08); right: -120px; top: -160px; }
.cta-band h2 { color: #fff; } .cta-band p { opacity: .9; }
.story2 { border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transition: .3s; }
.story2:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.story2 .ph { height: 190px; background-size: cover; background-position: center; position: relative; }
.story2 .ph::after { content: '“'; position: absolute; right: 18px; bottom: -36px; font-size: 7rem; font-family: Georgia, serif; color: #fff; text-shadow: 0 4px 20px rgba(0,0,0,.4); line-height: 1; }
.story2 .bd { padding: 20px; }
.promo-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.promo { display: flex; gap: 14px; align-items: center; border-radius: 20px; padding: 18px; color: #fff; position: relative; overflow: hidden; box-shadow: var(--shadow); transition: .25s; }
.promo:hover { transform: translateY(-4px); }
.promo.a { background: linear-gradient(135deg, #7C1D3F, #C2410C); } .promo.b { background: linear-gradient(135deg, #0B3D91, #0E7490); } .promo.c { background: linear-gradient(135deg, #047857, #84CC16); }
.promo i { font-size: 30px; width: 54px; height: 54px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; flex: none; }
.promo b { display: block; } .promo small { opacity: .9; }
.promo::after { content: ''; position: absolute; right: -30px; bottom: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.1); }

/* ---------- footer v2 ---------- */
.footer2 { position: relative; background: var(--footer-bg); color: var(--footer-text); padding-top: 120px; margin-top: 60px; }
.footer2 .skyline { position: absolute; left: 0; right: 0; top: -1px; height: 120px; width: 100%; background: var(--bg); }
.footer2 .f-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr; gap: 30px; }
.footer2 h4 { color: #fff; font-family: var(--font); font-size: .95rem; margin-bottom: 14px; }
.footer2 a { color: var(--footer-text); opacity: .85; font-size: .86rem; display: block; padding: 4px 0; }
.footer2 a:hover { color: var(--accent); opacity: 1; }
.footer2 .f-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.footer2 .f-brand .emblem, .footer2 .f-brand img { width: 56px; height: 56px; }
.footer2 .f-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding: 18px 0 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .78rem; opacity: .85; }

/* ---------- popups ---------- */
.modal.pop { width: min(720px, 100%); overflow: hidden; }
.modal.pop .modal-head { position: absolute; right: 0; top: 0; border: 0; background: transparent; z-index: 3; }
.modal.pop .modal-head h3 { display: none; }
.modal.pop .modal-body { padding: 0; }
.popup-card .pc-img { height: 230px; background-size: cover; background-position: center; position: relative; }
.popup-card .pc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); }
.popup-card .pc-tag { position: absolute; left: 20px; bottom: 16px; z-index: 1; background: var(--accent); color: #111; padding: 5px 12px; border-radius: 99px; font-weight: 800; font-size: .74rem; }
.popup-card .pc-body { padding: 24px 26px; }
.popup-card h2 { font-size: 1.5rem; margin-bottom: 8px; }
.pop-bar { position: relative; z-index: 1001; background: linear-gradient(90deg, var(--secondary), var(--primary)); color: #fff; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 50px 9px 16px; font-size: .86rem; text-align: center; flex-wrap: wrap; }
.pop-bar a { color: var(--accent); font-weight: 700; } .pop-bar button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: 0; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; }
.pop-slide { position: fixed; left: 20px; bottom: 90px; z-index: 1600; width: 340px; display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 16px; box-shadow: var(--shadow-lg); transform: translateX(-120%); transition: transform .5s cubic-bezier(.2,.9,.3,1.2); }
.pop-slide.in { transform: none; }
.pop-slide .ps-ic { width: 44px; height: 44px; border-radius: 13px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 22px; flex: none; }
.pop-slide p { font-size: .82rem; color: var(--text-muted); margin: 4px 0 10px; }
.pop-slide .x { position: absolute; right: 8px; top: 8px; border: 0; background: none; cursor: pointer; color: var(--text-muted); font-size: 18px; }

/* ---------- console (admin) components ---------- */
.perm-locked { opacity: .45 !important; cursor: not-allowed !important; filter: grayscale(.6); position: relative; }
.perm-locked::after { content: '\eecd'; font-family: remixicon; margin-left: 6px; font-size: .9em; }
.denied { text-align: center; padding: 70px 20px; }
.denied i { font-size: 64px; color: var(--danger); }
.studio-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 16px; margin-bottom: 18px; }
.studio-tabs button { border: 0; background: transparent; padding: 9px 14px; border-radius: 11px; font: inherit; font-weight: 600; font-size: .86rem; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.studio-tabs button .cnt { background: var(--border); color: var(--text); font-size: .68rem; padding: 1px 7px; border-radius: 99px; }
.studio-tabs button.on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
.form-card h3 { font-family: var(--font); font-size: 1.02rem; margin: 0 0 4px; } .form-card > p.sub { color: var(--text-muted); font-size: .84rem; margin: 0 0 16px; }
.upl { border: 2px dashed var(--border); border-radius: 16px; padding: 16px; display: flex; gap: 14px; align-items: center; background: var(--surface-2); }
.upl .prev { width: 86px; height: 86px; border-radius: 14px; background: #fff center/contain no-repeat; border: 1px solid var(--border); display: grid; place-items: center; flex: none; overflow: hidden; }
.upl .prev img { width: 100%; height: 100%; object-fit: cover; }
.font-card { border: 2px solid var(--border); border-radius: 14px; padding: 12px; cursor: pointer; transition: .15s; background: var(--surface); }
.font-card:hover { border-color: var(--primary); } .font-card.on { border-color: var(--primary); background: var(--primary-50); }
.font-card .fs { font-size: 1.3rem; line-height: 1.2; margin: 6px 0 2px; } .font-card small { color: var(--text-muted); font-size: .72rem; }
.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; max-height: 360px; overflow: auto; padding: 2px; }
/* permission matrix */
.matrix-wrap { overflow: auto; max-height: calc(100vh - 300px); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .84rem; }
.matrix th, .matrix td { padding: 9px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.matrix thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 2; font-size: .78rem; text-align: center; }
.matrix thead th:first-child, .matrix td:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; text-align: left; min-width: 280px; }
.matrix thead th:first-child { z-index: 3; background: var(--surface-2); }
.matrix tr.grp td { background: var(--bg-alt); font-weight: 800; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.matrix tr.child td:first-child { padding-left: 34px; color: var(--text-muted); }
.matrix code { font-size: .68rem; background: var(--bg-alt); padding: 2px 6px; border-radius: 5px; color: var(--text-muted); margin-left: 6px; }
.pf { display: inline-flex; gap: 3px; }
.pf button { width: 24px; height: 24px; border-radius: 6px; border: 0; font-size: .68rem; font-weight: 800; cursor: pointer; background: #e5e7eb; color: #9ca3af; transition: .12s; }
[data-theme="midnight"] .pf button { background: rgba(255,255,255,.08); color: #64748b; }
.pf button.on { background: #F59E0B; color: #fff; box-shadow: 0 2px 6px -2px #F59E0B; }
.pf button[data-f="D"].on { background: #DC2626; } .pf button[data-f="E"].on { background: #7C3AED; } .pf button[data-f="V"].on { background: #0EA5E9; } .pf button[data-f="R"].on { background: #16A34A; }
.pf.ro button { cursor: default; }
.legend-flags { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: .8rem; }
.legend-flags span { display: inline-flex; align-items: center; gap: 6px; }
/* rules studio */
.rs-grid { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: start; }
.rule-item { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; margin-bottom: 8px; cursor: pointer; background: var(--surface); transition: .15s; }
.rule-item:hover { border-color: var(--primary); } .rule-item.on { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-50); }
.rule-item code { font-size: .74rem; font-weight: 800; color: var(--text); }
.rule-item p { margin: 4px 0 0; font-size: .76rem; color: var(--text-muted); line-height: 1.35; }
.ver { font-size: .68rem; font-weight: 800; background: #FEF3C7; color: #92400E; padding: 2px 8px; border-radius: 99px; border: 1px solid #FDE68A; }
.cgroup { border: 1.5px solid var(--border); border-radius: 14px; padding: 10px; margin: 6px 0; background: var(--surface-2); }
.cgroup.any { border-color: #93C5FD; } .cgroup.not { border-color: #FCA5A5; }
.cgroup .ghead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.crow { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 6px; align-items: center; margin-bottom: 6px; background: var(--surface); padding: 6px; border-radius: 10px; border: 1px solid var(--border); }
.crow.expr { grid-template-columns: 1fr auto; }
.crow .input, .crow .select { padding: .45em .6em; font-size: .82rem; }
.code-in { font-family: 'JetBrains Mono', Consolas, monospace !important; font-size: .82rem !important; }
.code-area { width: 100%; min-height: 380px; font-family: Consolas, 'Courier New', monospace; font-size: .8rem; line-height: 1.5; border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; background: #0f172a; color: #e2e8f0; }
.trace { font-size: .82rem; }
.trace .tn { padding: 6px 10px; border-left: 3px solid; margin: 4px 0 4px 0; border-radius: 6px; background: var(--surface-2); display: flex; gap: 8px; align-items: center; }
.trace .tn.ok { border-color: var(--success); } .trace .tn.ko { border-color: var(--danger); }
.trace .tn i { font-size: 16px; } .trace .tn.ok i { color: var(--success); } .trace .tn.ko i { color: var(--danger); }
.trace .tsub { margin-left: 18px; }
.out-tbl td:last-child { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.lc { display: flex; gap: 0; margin: 8px 0 14px; }
.lc span { flex: 1; text-align: center; font-size: .7rem; font-weight: 700; padding: 6px 4px; background: var(--bg-alt); color: var(--text-muted); position: relative; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%); }
.lc span.on { background: var(--primary); color: #fff; } .lc span.done { background: var(--success); color: #fff; }
/* masters */
.tree { font-size: .86rem; }
.tree .tnode { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; cursor: pointer; }
.tree .tnode:hover { background: var(--primary-50); } .tree .tnode.on { background: var(--primary); color: #fff; }
.tree .tnode .cnt { margin-left: auto; font-size: .7rem; opacity: .7; }
.tree .tkids { margin-left: 16px; border-left: 1px dashed var(--border); padding-left: 6px; }
.lvl-chip { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--bg-alt); color: var(--text-muted); }
.crumb-path { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .82rem; margin-bottom: 12px; }
.crumb-path span { background: var(--surface-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 99px; }
.lk-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; }
.lk-card .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lk-card .chips span { font-size: .78rem; border: 1px solid var(--border); padding: 4px 10px; border-radius: 99px; background: var(--surface-2); }
.lk-card .chips span.off { opacity: .45; text-decoration: line-through; }
/* process flow */
.flow { display: grid; gap: 14px; }
.flow-lane { border: 1px solid var(--border); border-radius: 20px; padding: 18px; background: var(--surface); position: relative; overflow: hidden; }
.flow-lane::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--grad); }
.flow-steps { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px; }
.fstep { min-width: 170px; flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 12px; position: relative; margin-right: 26px; }
.fstep::after { content: '\ea6c'; font-family: remixicon; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 18px; }
.fstep:last-child { margin-right: 0; } .fstep:last-child::after { display: none; }
.fstep .fs-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--grad); margin-bottom: 8px; }
.fstep b { display: block; font-size: .84rem; } .fstep small { color: var(--text-muted); font-size: .74rem; }
.fstep.chair { border-color: #F59E0B; background: color-mix(in srgb, #F59E0B 10%, var(--surface)); }
.member-row { display: grid; grid-template-columns: 44px 1.4fr 1fr 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.member-row .av { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.role-tag { font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.role-tag.Chair { background: #FEF3C7; color: #92400E; } .role-tag.Member { background: #DBEAFE; color: #1E40AF; } .role-tag.MS { background: #F3E8FF; color: #6B21A8; } .role-tag.Inv { background: #E5E7EB; color: #374151; }
.kpi-mini { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi-mini > div { flex: 1; min-width: 120px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.kpi-mini b { display: block; font-size: 1.35rem; } .kpi-mini small { color: var(--text-muted); font-size: .74rem; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }
.empty-sm { color: var(--text-muted); font-size: .84rem; padding: 14px; text-align: center; }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .brand-right .leader-chip figcaption { display: none; }
  .nav2 > .ni > a { padding: 0 9px; font-size: .84rem; }
  .nav2 > .ni > a i.lead { display: none; }
}
@media (max-width: 1100px) {
  .hero3 .container { grid-template-columns: 1fr; padding-bottom: 150px; }
  .hero-map { max-width: 620px; margin: 0 auto; width: 100%; }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .road .nodes { grid-template-columns: repeat(3, 1fr); }
  .gis2-grid, .land2, .odop2, .cta-band { grid-template-columns: 1fr; }
  .why2 { grid-template-columns: repeat(2, 1fr); }
  .footer2 .f-top { grid-template-columns: 1fr 1fr; }
  .rs-grid { grid-template-columns: 1fr; }
  .gis-pill { display: none; }
}
@media (max-width: 980px) {
  .nav2 { display: none; }
  .nav-act .hamb { display: inline-flex; }
  .navbar2 .container { justify-content: space-between; }
  .brandbar .container { min-height: 74px; gap: 10px; }
  .brand2 .emblem, .brand2 .emblem-img { width: 48px; height: 48px; }
  .brand2 .dlogo, .brand2 .dlogo-img, .brand2 .vsep { display: none; }
  .brand-right { display: none; }
  .navbar2 .nbtn .t { display: none; }
  .promo-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gov-strip .gs-l .hide-xs, .gov-strip [data-fs] { display: none; }
  .brand-txt .b-hi { font-size: 1rem; } .brand-txt .b-en { font-size: .8rem; } .brand-txt .b-gov { font-size: .7rem; }
  .hero3 .container { padding: 30px 0 140px; min-height: 0; }
  .hero3 h1 { font-size: 2rem; }
  .search-pill { flex-wrap: wrap; } .search-pill select { width: 100%; } .search-pill .btn { width: 100%; }
  .float-card { display: none; }
  .bento-wrap { margin-top: -70px; }
  .bento { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; border-radius: 22px; }
  .bento a { padding: 8px 2px; font-size: .68rem; gap: 6px; }
  .bento small { display: none; }
  .ico3d { width: 46px; height: 46px; font-size: 21px; border-radius: 15px; }
  .section2 { padding: 64px 0; }
  .road .nodes { grid-template-columns: 1fr 1fr; gap: 14px; }
  .road svg.path { display: none; }
  .gis2 { padding: 28px 20px; border-radius: 24px; }
  .why2 { grid-template-columns: 1fr; grid-auto-rows: 180px; } .why2 .w.big { grid-column: auto; grid-row: span 1; }
  .cta-band { padding: 28px 22px; }
  .footer2 .f-top { grid-template-columns: 1fr; }
  .member-row { grid-template-columns: 40px 1fr auto; } .member-row .hide-sm { display: none; }
  .crow { grid-template-columns: 1fr 1fr; }
  .pop-slide { left: 10px; right: 10px; width: auto; bottom: 80px; }
  .cd2 .cd { min-width: 54px; } .cd2 .cd b { font-size: 1.2rem; }
}
@media (max-width: 760px) { .gov-strip .hide-xs { display: none !important; } .gov-strip .gs-l span:not(.flag) { overflow: hidden; text-overflow: ellipsis; } .navbar2 .container { justify-content: flex-end; } }
#rBody .table td .select, #rBody .table td .input { min-width: 120px; }
#rBody .table td:nth-child(2) .input { min-width: 190px; }
@media (max-width: 1100px) { .road .nodes .rnode { grid-column: auto !important; grid-row: auto !important; } .road svg.path { display: none; } }
html { overflow-x: hidden; }