/* VCI extension layer — technology-forward institutional identity */
:root{
  --vci-navy:#081C33; --vci-midnight:#0B2547; --vci-teal:#14B8A6; --vci-teal-d:#0E9384;
  --vci-cyan:#38E1D4; --vci-green:#7AAE88; --vci-amber:#F59E0B; --vci-bg:#F6F8FA;
  --vci-card:#FFFFFF; --vci-muted:#5B768E; --vci-line:#E2EAF0;
}
.hero-vci{background:radial-gradient(1000px 500px at 85% -10%,rgba(20,184,166,.22),transparent 60%),radial-gradient(800px 500px at 10% 110%,rgba(56,225,212,.12),transparent 60%),linear-gradient(135deg,#081C33 0%,#0B2547 55%,#071526 100%);}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--vci-cyan);background:rgba(56,225,212,.1);border:1px solid rgba(56,225,212,.25);padding:.4rem .9rem;border-radius:50px;margin-bottom:1.1rem}
.eyebrow.dark{color:var(--vci-teal-d);background:rgba(20,184,166,.1);border-color:rgba(20,184,166,.25)}
.hero-grid-2{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.hero-viz{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:1.4rem;backdrop-filter:blur(8px)}
.mock-phone{background:#0E2A46;border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:1rem;color:#fff}
.mock-screen{background:#061523;border-radius:12px;padding:1rem;min-height:300px}
.ai-tag{display:inline-block;font-size:.72rem;font-weight:700;background:var(--vci-teal);color:#04262B;padding:.2rem .6rem;border-radius:50px}
.meter{height:8px;background:rgba(255,255,255,.12);border-radius:50px;overflow:hidden;margin:.5rem 0}
.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--vci-teal),var(--vci-cyan));border-radius:50px}
.workflow{display:flex;align-items:stretch;gap:.4rem;flex-wrap:wrap;margin:2rem 0}
.wf-step{flex:1 1 130px;background:var(--vci-card);border:1px solid var(--vci-line);border-radius:14px;padding:1rem;text-align:center;font-size:.85rem}
.wf-step strong{display:block;color:var(--vci-midnight);font-size:.9rem;margin:.4rem 0 .2rem}
.wf-arrow{align-self:center;color:var(--vci-teal);font-weight:800}
.pill{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .7rem;border-radius:50px;display:inline-block}
.pill.live{background:#DCFCE7;color:#166534;border:1px solid #86EFAC}
.pill.pilot{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
.pill.dev{background:#E0F2FE;color:#0C4A6E;border:1px solid #7DD3FC}
.pill.research{background:#F3E8FF;color:#6B21A8;border:1px solid #D8B4FE}
.pill.concept{background:#F1F5F9;color:#475569;border:1px solid #CBD5E1}
.cards-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.cards-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.tech-card{background:var(--vci-card);border:1px solid var(--vci-line);border-radius:18px;padding:1.8rem;transition:.3s}
.tech-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(8,28,51,.1)}
.tech-card.featured{border:2px solid var(--vci-teal);position:relative}
.tech-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:1rem;background:linear-gradient(135deg,#0B2547,#0E9384);color:#fff}
.metric-band{background:linear-gradient(135deg,#081C33,#0B2547);border-radius:20px;padding:2.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;color:#fff}
.metric{text-align:center}.metric b{font-size:clamp(1.9rem,3vw,2.7rem);color:var(--vci-cyan);display:block;line-height:1.1}
.metric span{font-size:.88rem;color:rgba(255,255,255,.7)}
.metric small{display:block;font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.35rem}
.notice{background:#FFFBEB;border:1px solid #FCD34D;border-radius:12px;padding:1rem 1.25rem;font-size:.88rem;color:#92400E;margin:1.25rem 0}
.note-box{background:#F0FDFD;border:1px solid #99F6E4;border-radius:12px;padding:1rem 1.25rem;font-size:.9rem;color:#0F766E;margin:1.25rem 0}
.map-wrap{background:var(--vci-card);border:1px solid var(--vci-line);border-radius:18px;padding:1.5rem}
.country-dots{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0}
.c-dot{border:1px solid var(--vci-line);background:#fff;border-radius:50px;padding:.45rem .95rem;font-size:.86rem;font-weight:600;cursor:pointer;transition:.25s}
.c-dot:hover,.c-dot.active{background:#0B2547;color:#fff;border-color:#0B2547}
.country-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.c-panel{border:1px solid var(--vci-line);border-radius:14px;padding:1.25rem;background:#fff;font-size:.88rem}
.c-panel h4{color:#0B2547;margin-bottom:.2rem}
.c-panel .status{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.25rem 0}
.tab-btn{border:1px solid var(--vci-line);background:#fff;padding:.55rem 1.1rem;border-radius:50px;font-weight:600;font-size:.88rem;cursor:pointer}
.tab-btn.active{background:#0B2547;color:#fff;border-color:#0B2547}
.faq details{background:#fff;border:1px solid var(--vci-line);border-radius:12px;padding:1rem 1.25rem;margin-bottom:.7rem}
.faq summary{font-weight:700;color:#0B2547;cursor:pointer}
.timeline{border-left:3px solid var(--vci-teal);margin:1.5rem 0 1.5rem 1rem;padding-left:1.5rem}
.timeline div{margin-bottom:1.25rem}.timeline b{color:#0B2547}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--vci-line);border-radius:14px}
table.ev{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px}
table.ev th{background:#0B2547;color:#fff;text-align:left;padding:.8rem 1rem}
table.ev td{padding:.8rem 1rem;border-top:1px solid var(--vci-line);color:#334155}
.has-drop{position:relative}
.drop{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#0B2547;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.5rem;display:none;box-shadow:0 16px 40px rgba(0,0,0,.3)}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block!important;padding:.6rem .9rem!important;border-radius:8px!important}
.audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.aud-card{background:#fff;border:1px solid var(--vci-line);border-radius:16px;padding:1.6rem}
.aud-card h3{color:#0B2547;font-size:1.05rem;margin-bottom:.5rem}
.aud-card p{font-size:.88rem;color:#5B768E;margin-bottom:1rem}
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:.6rem}
.breadcrumb a{color:var(--vci-cyan)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.check-list{list-style:none;padding:0}.check-list li{padding:.5rem 0 .5rem 1.8rem;position:relative;color:#334155;font-size:.95rem}
.check-list li::before{content:'✓';position:absolute;left:0;color:var(--vci-teal-d);font-weight:800}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:1024px){.hero-grid-2,.two-col{grid-template-columns:1fr}.cards-4,.audience-grid{grid-template-columns:repeat(2,1fr)}.cards-3,.cards-2,.country-panels,.metric-band,.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cards-4,.cards-3,.cards-2,.audience-grid,.country-panels,.metric-band,.kpi-row{grid-template-columns:1fr}.drop{position:static;display:block;background:transparent;border:none;box-shadow:none;padding:0}.metric-band{padding:1.5rem}}