:root {
  --yellow: #FCCC05;
  --tdp-red: #e31e24;
  --yellow-hover: #FFD633;
  --yellow-soft: #FFF5C2;
  --white: #ffffff;
  --charcoal: #FF2D10;
  --charcoal-mid: #FF6B57;
  --red-primary: #FF2D10;
  --red-light: #FF6B57;
  --red-lighter: #FF8A78;
  --red-soft: #FFE2DD;
  --gray-soft: #FFE2DD;
  --ink: #1f1f1f;
  --text: #5f6368;
  --muted: #7a7a7a;
  --surface: #f7f7f5;
  --line: #e8e8e8;
  --shadow: 0 20px 60px rgba(31, 31, 31, .09);
  --radius: 22px;
  --container: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: "Manrope", sans-serif; color: var(--ink); background: var(--white); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
img { max-width: 100%; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; background: var(--yellow); color: var(--charcoal); z-index: 1000; padding: 12px 16px; border-radius: 8px; font-weight: 800; }
.skip-link:focus { top: 16px; }

/* Header */
.site-header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; color: var(--white); transition: .25s ease; }
.site-header.scrolled { background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 40px rgba(31,31,31,.08); }
.site-header.scrolled .brand-copy small,
.site-header.scrolled .primary-nav > a:not(.btn),
.site-header.scrolled .language-btn { color: var(--text); }
.site-header.scrolled .primary-nav > a:not(.btn):hover,
.site-header.scrolled .primary-nav > a.active { color: var(--charcoal); }
.site-header.scrolled .login-link { border-left-color: var(--line); }
.site-header.scrolled .menu-toggle span:not(.sr-only) { background: var(--charcoal); }
.nav-wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--yellow); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(244,192,12,.2); }
.brand-wheel { width: 27px; height: 27px; border: 3px solid var(--charcoal); border-radius: 50%; position: relative; }
.brand-wheel::before, .brand-wheel::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--charcoal); border-radius: 50%; }
.brand-wheel::after { inset: 10px; background: var(--charcoal); border: 0; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 18px; letter-spacing: -.02em; }
.brand-copy small { margin-top: 5px; color: rgba(255,255,255,.58); font-size: 10px; text-transform: uppercase; letter-spacing: .13em; }
.primary-nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; }
.primary-nav > a:not(.btn) { color: rgba(255,255,255,.75); transition: .2s; }
.primary-nav > a:not(.btn):hover, .primary-nav > a.active { color: var(--white); }
.primary-nav > a.active { position: relative; }
.primary-nav > a.active::after { content: ""; position: absolute; height: 2px; width: 18px; left: 50%; transform: translateX(-50%); bottom: -12px; background: var(--yellow); border-radius: 4px; }
.language-btn { border: 0; background: transparent; color: rgba(255,255,255,.74); cursor: pointer; padding: 8px; }
.language-btn span { color: var(--yellow); }
.login-link { border-left: 1px solid rgba(255,255,255,.15); padding-left: 26px; }
.menu-toggle { display: none; border: 0; background: transparent; width: 42px; height: 42px; padding: 9px; cursor: pointer; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; background: white; margin: 5px 0; }

/* Buttons */
.btn { min-height: 52px; padding: 0 24px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s; border: 1px solid transparent; }
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background: var(--yellow); color: var(--charcoal); box-shadow: 0 12px 32px rgba(244,192,12,.18); }
.btn-yellow:hover { background: var(--yellow-hover); box-shadow: 0 15px 38px rgba(244,192,12,.26); }
.btn-ghost { color: white; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.045); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(255,255,255,.09); }
.btn-dark { width: 100%; background: var(--charcoal); color: white; margin-top: 4px; box-shadow: 0 10px 26px rgba(255,45,16,.18); }
.btn-dark:hover { background: var(--charcoal); }
.btn-small { min-height: 42px; padding-inline: 18px; border-radius: 10px; }
.btn-outline { min-height: 44px; border-color: var(--line); color: var(--ink); background: white; padding-inline: 18px; }


.btn-red { background: var(--charcoal); color: var(--white); box-shadow: 0 12px 28px rgba(255,45,16,.16); }
.btn-red:hover { background: var(--charcoal); }
.service-card:nth-child(3n+2)::before { background: var(--charcoal); }
.service-card:nth-child(3n)::before { background: var(--yellow); }
.service-card:nth-child(3n+2) .service-icon { border-color: #dddddd; background: var(--gray-soft); color: var(--charcoal); }
.service-card:nth-child(3n) .service-icon { border-color: #f4c00c; background: var(--yellow-soft); color: #f4c00c; }
.quick-dock a:nth-child(2) .dock-icon,
.quick-dock a:nth-child(4) .dock-icon { background: rgba(255,45,16,.16); color: #f0f0f0; }
.quick-dock a:nth-child(3) .dock-icon { background: rgba(255,45,16,.16); color: #ededed; }
.stats-strip article:nth-child(2) .stat-icon,
.stats-strip article:nth-child(4) .stat-icon { color: var(--charcoal); background: var(--gray-soft); }
.stats-strip article:nth-child(3) .stat-icon { color: var(--charcoal); background: var(--gray-soft); }

/* Hero */
.future-grid { background-color: var(--charcoal); background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 52px 52px; }
.hero { min-height: 860px; color: white; position: relative; padding: 150px 0 0; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 44%, rgba(255,45,16,.16), transparent 32%), linear-gradient(90deg, rgba(255,45,16,.98), rgba(255,45,16,.76) 52%, rgba(255,45,16,.62)); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 230px; background: linear-gradient(transparent, rgba(255,45,16,.72)); pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .17; }
.glow-one { width: 360px; height: 360px; background: var(--yellow); left: -180px; top: 220px; }
.glow-two { width: 400px; height: 400px; background: var(--charcoal); right: -250px; top: 80px; }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.03fr .97fr; gap: 50px; align-items: center; min-height: 570px; }
.eyebrow, .section-kicker { font-size: 11px; font-weight: 800; letter-spacing: .18em; color: #efefef; display: inline-flex; align-items: center; gap: 10px; }
.eyebrow span { width: 22px; height: 2px; background: var(--yellow); }
.hero h1 { margin: 22px 0 24px; font-size: clamp(48px, 5.3vw, 76px); line-height: 1.015; letter-spacing: -.055em; max-width: 760px; }
.hero h1 span { color: var(--yellow); }
.hero-lead { color: #fff7f7; max-width: 640px; font-size: 18px; line-height: 1.75; margin: 0; }
.telugu-line { font-family: "Noto Sans Telugu", sans-serif; font-size: 15px; color: rgba(255,255,255,.58); margin: 12px 0 0; }
.hero-actions { display: flex; gap: 14px; margin-top: 34px; }
.trust-row { display: flex; align-items: center; gap: 16px; margin-top: 42px; }
.avatar-stack { display: flex; }
.avatar-stack span { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; background: #FF6B57; border: 2px solid var(--charcoal); margin-left: -8px; color: var(--yellow); font-size: 10px; font-weight: 800; }
.avatar-stack span:first-child { margin-left: 0; }
.trust-row > div:last-child { display: grid; }
.trust-row strong { font-size: 12px; }
.trust-row small { color: #d2d2d2; font-size: 11px; margin-top: 3px; }

.hero-visual { position: relative; height: 565px; }
.globe { width: 430px; height: 430px; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle at 37% 30%, rgba(244,192,12,.15), transparent 36%), radial-gradient(circle, rgba(255,107,87,.92), rgba(255,45,16,.98)); box-shadow: inset -45px -25px 90px rgba(124,18,4,.38), 0 0 100px rgba(255,45,16,.10); overflow: hidden; }
.globe::before { content: ""; position: absolute; inset: 14px; border-radius: inherit; border: 1px solid rgba(255,255,255,.05); }
.globe-grid { position: absolute; inset: 0; border-radius: 50%; }
.globe-lat { background: repeating-radial-gradient(ellipse at center, transparent 0 43px, rgba(255,255,255,.075) 44px 45px); }
.globe-long { background: repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.055) 71px 72px); opacity: .45; transform: rotate(15deg); }
.continent { position: absolute; background: rgba(244,192,12,.12); border: 1px solid rgba(244,192,12,.34); filter: drop-shadow(0 0 10px rgba(244,192,12,.13)); }
.continent-a { width: 92px; height: 123px; left: 76px; top: 103px; border-radius: 65% 35% 46% 54% / 38% 54% 46% 62%; transform: rotate(-19deg); }
.continent-b { width: 140px; height: 115px; right: 71px; top: 104px; border-radius: 48% 52% 62% 38% / 45% 42% 58% 55%; transform: rotate(11deg); }
.continent-c { width: 82px; height: 110px; right: 116px; bottom: 72px; border-radius: 45% 55% 62% 38% / 38% 39% 61% 62%; transform: rotate(-20deg); }
.node, .map-node { position: absolute; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px rgba(244,192,12,.1), 0 0 18px var(--yellow); animation: pulse 2.8s infinite; }
.n1 { left: 92px; top: 142px; }.n2 { left: 144px; top: 214px; animation-delay: .7s; }.n3 { right: 93px; top: 145px; animation-delay: 1.1s; }.n4 { right: 133px; top: 242px; animation-delay: .3s; }.n5 { right: 90px; bottom: 95px; animation-delay: 1.5s; }.n6 { left: 204px; bottom: 74px; animation-delay: .9s; }
.connection { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(244,192,12,.7), transparent); transform-origin: left; }
.c1 { width: 180px; left: 97px; top: 147px; transform: rotate(14deg); }.c2 { width: 150px; left: 148px; top: 217px; transform: rotate(-18deg); }.c3 { width: 143px; right: 100px; bottom: 103px; transform: rotate(-52deg); }
.orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-14deg); border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbit-a { width: 535px; height: 270px; }.orbit-b { width: 590px; height: 340px; transform: translate(-50%,-50%) rotate(38deg); }
.ap-sigil { position: absolute; top: 215px; left: 50%; transform: translate(-50%,-50%); width: 108px; height: 128px; clip-path: polygon(44% 0, 67% 15%, 73% 35%, 90% 47%, 83% 69%, 62% 100%, 42% 84%, 33% 62%, 12% 51%, 24% 31%); background: rgba(244,192,12,.91); color: var(--charcoal); display: grid; place-content: center; text-align: center; filter: drop-shadow(0 15px 30px rgba(244,192,12,.23)); }
.ap-sigil strong { font-size: 27px; line-height: 1; }.ap-sigil small { font-size: 7px; width: 63px; line-height: 1.3; margin-top: 5px; text-transform: uppercase; font-weight: 800; letter-spacing: .08em; }
.sigil-line { height: 1px; width: 37px; background: var(--charcoal); margin: 0 auto 6px; }
.chapter-chip { position: absolute; padding: 9px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 9px; background: rgba(255,45,16,.75); backdrop-filter: blur(12px); color: #fff7f7; font-size: 10px; font-weight: 700; box-shadow: 0 12px 35px rgba(0,0,0,.16); }
.chapter-chip span { display: inline-block; width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; margin-right: 7px; box-shadow: 0 0 8px var(--yellow); }
.chip-us { left: 10px; top: 128px; }.chip-eu { right: 10px; top: 127px; }.chip-apac { right: 22px; bottom: 98px; }
.data-card { position: absolute; border: 1px solid rgba(255,255,255,.12); background: rgba(255,45,16,.72); backdrop-filter: blur(15px); border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.members-card { left: 12px; bottom: 40px; width: 154px; padding: 14px; display: grid; }
.data-card small { color: #cfcfcf; font-size: 8px; letter-spacing: .1em; font-weight: 800; }.members-card strong { font-size: 26px; line-height: 1.3; }
.mini-bars { display: flex; gap: 4px; height: 21px; align-items: end; margin-top: 3px; }.mini-bars i { width: 10px; background: var(--yellow); border-radius: 2px; opacity: .8; }.mini-bars i:nth-child(1){height:7px}.mini-bars i:nth-child(2){height:13px}.mini-bars i:nth-child(3){height:10px}.mini-bars i:nth-child(4){height:18px}.mini-bars i:nth-child(5){height:21px}
.live-card { right: 12px; top: 58px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; }.live-card div { display: grid; }.live-card strong { font-size: 12px; color: #fff; }.live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(244,192,12,.14), 0 0 15px var(--yellow); }
.quick-dock { position: relative; z-index: 4; transform: translateY(36px); display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.1); background: rgba(255,45,16,.94); box-shadow: 0 22px 55px rgba(0,0,0,.27); border-radius: 19px; backdrop-filter: blur(20px); overflow: hidden; }
.quick-dock a { min-height: 96px; display: flex; align-items: center; gap: 13px; padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.09); transition: .2s; }
.quick-dock a:last-child { border-right: 0; }.quick-dock a:hover { background: rgba(255,255,255,.05); }
.dock-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(244,192,12,.1); color: var(--yellow); font-size: 18px; }
.quick-dock a > span:nth-child(2) { display: grid; }.quick-dock strong { font-size: 12px; }.quick-dock small { color: #c3d1c8; font-size: 10px; margin-top: 4px; }.quick-dock b { margin-left: auto; color: var(--yellow); font-size: 15px; }

/* Common section */
.section { padding: 112px 0; }
.section-heading { margin-bottom: 48px; }
.section-kicker { color: #6f7b73; }
.section-kicker::before { content: ""; width: 18px; height: 2px; background: var(--yellow); }
.section-kicker.light { color: #dce7e0; }
.section-heading h2, .vision-copy h2, .join-layout h2 { margin: 14px 0 0; font-size: clamp(36px, 4.4vw, 58px); line-height: 1.12; letter-spacing: -.045em; }
.section-heading h2 span { color: #8a918c; }
.section-heading p { color: var(--text); max-width: 560px; margin: 0; font-size: 16px; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 70px; }.split-heading p { padding-bottom: 6px; }
.centered { text-align: center; max-width: 750px; margin: 0 auto 50px; }.centered .section-kicker { justify-content: center; }.centered p { margin: 18px auto 0; }
.heading-with-action { display: flex; justify-content: space-between; align-items: end; }.text-link { font-weight: 800; font-size: 13px; padding-bottom: 10px; }.text-link span { color: #f4c00c; margin-left: 8px; }

/* Network */
.network-section { background: #fff; padding-top: 145px; }
.network-panel { display: grid; grid-template-columns: 1.35fr .65fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 430px; box-shadow: var(--shadow); }
.future-grid-light { background-color: #fafaf8; background-image: linear-gradient(rgba(255,45,16,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,45,16,.045) 1px, transparent 1px); background-size: 40px 40px; }
.map-panel { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); }
.map-panel::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(244,192,12,.13), transparent 67%); }
.world-map { width: 88%; height: 270px; position: relative; filter: drop-shadow(0 12px 28px rgba(255,45,16,.07)); }
.map-land { position: absolute; background: #e8eee9; border: 1px solid #d5ddd7; }
.l1{width:23%;height:38%;left:3%;top:17%;border-radius:61% 39% 52% 48% / 53% 44% 56% 47%;transform:rotate(-12deg)}
.l2{width:12%;height:39%;left:25%;top:43%;border-radius:44% 56% 60% 40% / 35% 42% 58% 65%;transform:rotate(10deg)}
.l3{width:18%;height:23%;left:41%;top:18%;border-radius:63% 37% 61% 39% / 49% 47% 53% 51%}
.l4{width:27%;height:42%;right:8%;top:18%;border-radius:43% 57% 55% 45% / 46% 38% 62% 54%;transform:rotate(7deg)}
.l5{width:11%;height:17%;right:9%;bottom:10%;border-radius:55% 45% 58% 42% / 57% 45% 55% 43%;transform:rotate(-14deg)}
.mn1{left:13%;top:31%}.mn2{left:28%;top:52%;animation-delay:.6s}.mn3{left:47%;top:27%;animation-delay:1.2s}.mn4{right:35%;top:32%;animation-delay:.9s}.mn5{right:20%;top:46%;animation-delay:.3s}.mn6{right:11%;bottom:22%;animation-delay:1.5s}.mn7{right:27%;bottom:31%;animation-delay:.7s}
.map-legend { position: absolute; bottom: 25px; left: 30px; display: flex; gap: 23px; color: #776e6e; font-size: 10px; font-weight: 700; }.map-legend span { display: flex; align-items: center; gap: 8px; }.map-legend i { width: 7px; height: 7px; border-radius: 50%; }.legend-live { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }.legend-grow { background: var(--charcoal); box-shadow: 0 0 8px var(--charcoal); }
.chapter-finder { padding: 38px; }.chapter-finder h3 { font-size: 25px; line-height: 1.25; letter-spacing: -.03em; margin: 15px 0 8px; }.chapter-finder p { color: var(--text); font-size: 13px; margin: 0 0 24px; }.chapter-finder label { display: grid; gap: 7px; font-size: 10px; font-weight: 800; color: #716767; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 15px; }.chapter-finder select { appearance: none; border: 1px solid var(--line); border-radius: 10px; height: 48px; padding: 0 38px 0 14px; background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='none' stroke='%236b7788' stroke-width='1.5' d='m1 1 5 5 5-5'/%3E%3C/svg%3E") no-repeat calc(100% - 14px) center; color: var(--ink); text-transform: none; letter-spacing: 0; font-size: 13px; }.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats-strip { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 18px; margin-top: 22px; overflow: hidden; }
.stats-strip article { min-height: 122px; display: flex; align-items: center; justify-content: center; gap: 16px; border-right: 1px solid var(--line); }.stats-strip article:last-child { border: 0; }.stat-icon { color: #f4c00c; font-size: 19px; width: 41px; height: 41px; display: grid; place-items: center; background: #f4c00c; border-radius: 12px; }.stats-strip article div { line-height: 1; }.stats-strip strong { font-size: 32px; letter-spacing: -.04em; }.stats-strip b { font-size: 20px; }.stats-strip small { display: block; color: var(--muted); font-size: 10px; margin-top: 11px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }

/* Services */
.services-section { background: var(--surface); }
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { position: relative; padding: 31px; background: white; border: 1px solid var(--line); border-radius: 18px; min-height: 274px; transition: transform .25s ease, box-shadow .25s ease, border .25s; overflow: hidden; }
.service-card::before { content: ""; position: absolute; left: 31px; top: 0; height: 3px; width: 45px; background: var(--yellow); border-radius: 0 0 4px 4px; }.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #dcdcdc; }.service-number { position: absolute; right: 25px; top: 20px; color: #e4e4e2; font-size: 12px; font-weight: 800; }.service-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid #f4c00c; background: #f4c00c; border-radius: 13px; color: #f4c00c; font-size: 18px; }.service-card h3 { font-size: 18px; margin: 24px 0 10px; letter-spacing: -.02em; }.service-card p { color: var(--text); font-size: 13px; margin: 0; max-width: 290px; }.service-card a { position: absolute; left: 31px; bottom: 26px; font-size: 11px; font-weight: 800; }.service-card a span { color: #f4c00c; margin-left: 6px; }

/* Vision */
.vision-section { position: relative; background: var(--charcoal); color: white; overflow: hidden; }
.vision-grid-overlay { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to right, #000, transparent 86%); }
.vision-section::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -220px; top: 5%; background: radial-gradient(circle, rgba(255,45,16,.12), transparent 70%); }
.vision-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 85px; }
.vision-portrait { position: relative; }.portrait-placeholder { height: 530px; border-radius: 26px; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 50% 25%, #555555, #FF6B57 50%, #FF2D10); border: 1px solid rgba(255,255,255,.09); overflow: hidden; box-shadow: 0 30px 75px rgba(0,0,0,.32); }.portrait-placeholder::before { content: ""; position: absolute; inset: 8%; border: 1px solid rgba(244,192,12,.15); border-radius: 50% 50% 15% 15%; background: radial-gradient(ellipse at 50% 85%, rgba(244,192,12,.12), transparent 60%); }.portrait-placeholder span { position: relative; font-weight: 800; letter-spacing: .18em; color: rgba(255,255,255,.55); }.portrait-placeholder small { position: relative; color: rgba(255,255,255,.35); margin-top: 8px; font-size: 9px; }.portrait-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; padding: 16px 19px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,45,16,.73); backdrop-filter: blur(14px); border-radius: 13px; display: grid; }.portrait-caption strong { font-size: 12px; }.portrait-caption small { color: #cfcfcf; font-size: 9px; margin-top: 4px; }.vision-copy h2 { max-width: 680px; }.vision-copy > p { color: #dddddd; max-width: 590px; font-size: 16px; margin: 24px 0; }.vision-copy blockquote { border-left: 2px solid var(--yellow); padding: 4px 0 4px 20px; margin: 28px 0 34px; color: #ffffff; font-size: 17px; font-weight: 600; max-width: 560px; }

/* Updates */
.updates-section { background: white; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: -17px 0 28px; }.filter-row button { border: 1px solid var(--line); background: white; border-radius: 999px; padding: 8px 15px; color: var(--text); font-size: 10px; font-weight: 700; cursor: pointer; }.filter-row button.active { background: var(--charcoal); color: white; border-color: var(--charcoal); }
.news-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px; }.featured-news { display: grid; grid-template-columns: 1.06fr .94fr; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; min-height: 390px; }.news-image { position: relative; min-height: 100%; overflow: hidden; }.tech-image { background: radial-gradient(circle at 67% 44%, rgba(244,192,12,.34), transparent 12%), radial-gradient(circle at 50% 50%, #FF6B57, #FF2D10 65%); }.tech-image::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }.tech-rings { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(244,192,12,.4); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 35px rgba(244,192,12,.04), 0 0 0 70px rgba(244,192,12,.03); }.tech-rings::before, .tech-rings::after { content: ""; position: absolute; width: 9px; height: 9px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 15px var(--yellow); }.tech-rings::before { left: 14px; top: 60px; }.tech-rings::after { right: 25px; bottom: 38px; }.image-tag { position: absolute; z-index: 2; left: 20px; top: 20px; background: var(--yellow); color: var(--charcoal); padding: 7px 10px; font-size: 8px; font-weight: 900; letter-spacing: .1em; border-radius: 6px; }.news-content { padding: 34px; align-self: center; }.news-meta { color: #f4c00c; font-size: 8px; font-weight: 900; letter-spacing: .12em; }.news-content h3 { font-size: 27px; line-height: 1.24; letter-spacing: -.035em; margin: 13px 0; }.news-content p { color: var(--text); font-size: 13px; }.news-content a { display: inline-block; margin-top: 14px; font-size: 11px; font-weight: 800; }.news-content a span { color: #f4c00c; margin-left: 7px; }.small-news-stack { display: grid; grid-template-rows: repeat(3,1fr); gap: 12px; }.small-news { border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; grid-template-columns: 120px 1fr; gap: 17px; align-items: center; transition: .2s; }.small-news:hover { transform: translateX(3px); box-shadow: 0 12px 35px rgba(255,45,16,.06); }.small-thumb { height: 100px; border-radius: 11px; background-color: var(--charcoal-mid); position: relative; overflow: hidden; }.small-thumb::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 17px 17px; }.thumb-one { background: radial-gradient(circle at 35% 40%, rgba(244,192,12,.45), transparent 18%), #FF6B57; }.thumb-two { background: radial-gradient(circle at 70% 50%, rgba(255,45,16,.34), transparent 24%), #FF6B57; }.thumb-three { background: radial-gradient(circle at 45% 55%, rgba(255,45,16,.36), transparent 24%), #FF6B57; }.small-news h3 { font-size: 13px; line-height: 1.4; margin: 5px 0; letter-spacing: -.01em; }.small-news small { color: var(--muted); font-size: 9px; }

/* Events */
.events-section { background: var(--surface); }
.event-list { display: grid; gap: 12px; }.event-card { min-height: 114px; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; border: 1px solid var(--line); background: white; border-radius: 17px; padding: 13px 20px 13px 13px; transition: .2s; }.event-card:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,45,16,.07); }.event-date { height: 86px; border-radius: 13px; background: var(--charcoal); color: white; display: grid; place-content: center; text-align: center; line-height: 1; }.event-date strong { font-size: 29px; }.event-date span { font-size: 9px; color: var(--yellow); font-weight: 900; margin-top: 7px; letter-spacing: .11em; }.event-info { padding-left: 25px; }.event-type { color: #f4c00c; background: #f4c00c; border-radius: 999px; padding: 5px 8px; font-size: 7px; letter-spacing: .1em; font-weight: 900; }.event-type.online { color: #f4c00c; background: #f4c00c; }.event-info h3 { margin: 10px 0 4px; font-size: 17px; }.event-info p { margin: 0; color: var(--muted); font-size: 11px; }.event-actions { display: flex; align-items: center; gap: 25px; }.event-actions > a:first-child { font-size: 10px; font-weight: 800; color: var(--text); }

/* Join/footer */
.join-section { position: relative; color: white; padding: 85px 0; overflow: hidden; }.join-section::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,45,16,.99), rgba(255,45,16,.72)); }.join-glow { position: absolute; width: 390px; height: 390px; border-radius: 50%; background: rgba(244,192,12,.18); filter: blur(80px); right: -120px; top: -100px; }.join-layout { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 50px; }.join-layout h2 { margin-top: 12px; }.join-layout p { color: #e6e6e6; max-width: 650px; margin: 18px 0 0; }.join-actions { display: flex; gap: 12px; flex-shrink: 0; }
.site-footer { background: #FF2D10; color: white; padding: 65px 0 22px; }.footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: 60px; }.footer-brand p { color: #cfcfcf; font-size: 12px; margin-top: 19px; }.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 12px; }.footer-grid > div > strong { font-size: 11px; margin-bottom: 8px; }.footer-grid > div > a { color: #cfcfcf; font-size: 11px; }.footer-grid > div > a:hover { color: white; }.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 50px; padding-top: 21px; display: flex; justify-content: space-between; color: #bdbdbd; font-size: 9px; }

/* Animation */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; transition-duration: .001ms !important; }.reveal { opacity: 1; transform: none; } }

/* Responsive */
@media (max-width: 1050px) {
  .primary-nav { gap: 17px; }.primary-nav .login-link { display: none; }
  .hero-layout { grid-template-columns: 1fr 1fr; gap: 20px; }.hero-visual { transform: scale(.87); transform-origin: center; }
  .quick-dock { grid-template-columns: repeat(2,1fr); }.quick-dock a:nth-child(2) { border-right: 0; }.quick-dock a:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.09); }
  .network-panel { grid-template-columns: 1.15fr .85fr; }.chapter-finder { padding: 30px; }
  .service-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 820px) {
  .site-header { background: rgba(255,45,16,.89); backdrop-filter: blur(16px); }.nav-wrap { height: 74px; }
  .menu-toggle { display: block; }.primary-nav { position: absolute; left: 20px; right: 20px; top: 68px; padding: 18px; background: #FF2D10; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 22px 55px rgba(0,0,0,.3); border-radius: 15px; display: none; flex-direction: column; align-items: stretch; gap: 0; }.primary-nav.open { display: flex; }.primary-nav a, .primary-nav button { padding: 12px; text-align: left; }.primary-nav > a.active::after { display: none; }.language-btn { display: none; }.primary-nav .btn { margin-top: 7px; }
  .hero { padding-top: 115px; min-height: auto; }.hero-layout { grid-template-columns: 1fr; text-align: center; }.hero-copy { display: grid; justify-items: center; }.hero h1 { font-size: clamp(43px, 10vw, 62px); }.hero-visual { height: 515px; transform: scale(.85); margin-top: -20px; }.quick-dock { transform: translateY(42px); }
  .section { padding: 88px 0; }.network-section { padding-top: 125px; }.split-heading, .heading-with-action { display: block; }.split-heading p { margin-top: 20px; }.heading-with-action .text-link { display: inline-block; margin-top: 16px; }
  .network-panel { grid-template-columns: 1fr; }.map-panel { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .stats-strip { grid-template-columns: repeat(2,1fr); }.stats-strip article:nth-child(2) { border-right: 0; }.stats-strip article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .vision-layout { grid-template-columns: 1fr; }.portrait-placeholder { height: 460px; }.vision-copy { padding-bottom: 15px; }
  .news-grid { grid-template-columns: 1fr; }.featured-news { min-height: 370px; }
  .join-layout { display: block; }.join-actions { margin-top: 30px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }.footer-brand { grid-column: 1/-1; }
}
@media (max-width: 580px) {
  .container { width: min(calc(100% - 28px), var(--container)); }.brand-copy small { display: none; }
  .hero { padding-top: 105px; }.hero h1 { font-size: 42px; }.hero-lead { font-size: 15px; }.hero-actions { width: 100%; flex-direction: column; }.hero-actions .btn { width: 100%; }.trust-row { text-align: left; }
  .hero-visual { transform: scale(.67); height: 415px; margin: -45px -80px 0; }.quick-dock { grid-template-columns: 1fr; }.quick-dock a { min-height: 82px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09) !important; }.quick-dock a:last-child { border-bottom: 0 !important; }
  .section-heading h2, .vision-copy h2, .join-layout h2 { font-size: 36px; }.section { padding: 76px 0; }
  .network-section { padding-top: 120px; }.network-panel { border-radius: 17px; }.map-panel { min-height: 290px; }.world-map { height: 210px; }.chapter-finder { padding: 25px; }.select-row { grid-template-columns: 1fr; }.stats-strip { grid-template-columns: 1fr 1fr; }.stats-strip article { min-height: 110px; gap: 10px; }.stats-strip strong { font-size: 27px; }.stat-icon { display: none; }
  .service-grid { grid-template-columns: 1fr; }.service-card { min-height: 250px; }
  .portrait-placeholder { height: 420px; }.vision-layout { gap: 50px; }.vision-copy blockquote { font-size: 15px; }
  .featured-news { grid-template-columns: 1fr; }.news-image { min-height: 230px; }.news-content { padding: 26px; }.news-content h3 { font-size: 23px; }.small-news { grid-template-columns: 96px 1fr; }.small-thumb { height: 90px; }
  .event-card { grid-template-columns: 70px 1fr; padding-right: 13px; }.event-date { height: 74px; }.event-info { padding-left: 14px; }.event-actions { grid-column: 1/-1; justify-content: flex-end; padding-top: 10px; }.event-info h3 { font-size: 14px; }
  .join-actions { flex-direction: column; }.join-actions .btn { width: 100%; }.footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }.footer-brand { grid-column: 1/-1; }.footer-bottom { display: grid; gap: 8px; }
}

/* Yellow–white semantic accents */
.service-card:nth-child(4) .service-icon { border-color: #dddddd; background: var(--gray-soft); color: var(--charcoal); }
.service-card:nth-child(4) a { color: var(--charcoal); }
.event-card:first-child .event-date { background: var(--charcoal); }
.event-card:nth-child(2) .event-date { background: var(--yellow); color: var(--charcoal); }
.event-card:nth-child(2) .event-date span { color: var(--charcoal); }
.event-card:nth-child(3) .event-date { background: var(--charcoal); }
.event-type.urgent { color: var(--charcoal); background: var(--gray-soft); }


/* =========================================================
   YELLOW + WHITE IMAGE SLIDER HOMEPAGE
   WITH SOFT RED PHOTOGRAPH OVERLAYS
   Replace assets/slide-1.svg, slide-2.svg, and slide-3.svg
   with approved 1600x900 photographs while keeping filenames.
   ========================================================= */
.home-slider-shell { position: relative; background: var(--white); padding-bottom: 54px; }
.hero-slider { position: relative; height: clamp(610px, 76vh, 790px); min-height: 610px; overflow: hidden; background: var(--charcoal); }
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide { opacity: 0; visibility: hidden; transition: opacity .65s ease, visibility .65s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.025); transition: transform 7s ease; }
.hero-slide.is-active > img { transform: scale(1); }
.slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(214, 72, 72, .10) 8%,
      rgba(190, 48, 48, .18) 44%,
      rgba(142, 24, 24, .52) 76%,
      rgba(112, 16, 16, .66) 100%
    );
}
.slide-caption-wrap { position: relative; z-index: 2; height: 100%; display: flex; align-items: flex-end; padding-bottom: 82px; }
.slide-caption {
  color: var(--white);
  width: min(850px, 86%);
  border-left: 6px solid var(--yellow);
  border-radius: 0 18px 18px 0;
  padding: 20px 24px 20px 26px;
  background: linear-gradient(90deg, rgba(132, 18, 18, .30), rgba(184, 52, 52, .12));
  border-top: 1px solid rgba(255,255,255,.12);
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-shadow: 0 3px 24px rgba(92, 0, 0, .34);
  box-shadow: 0 18px 48px rgba(100, 10, 10, .16);
}
.slide-kicker { display: inline-block; color: var(--yellow); font-size: 11px; font-weight: 900; letter-spacing: .19em; margin-bottom: 14px; }
.slide-caption h1, .slide-caption h2 { margin: 0; color: var(--white); max-width: 800px; font-size: clamp(42px, 5.3vw, 72px); line-height: 1.03; letter-spacing: -.052em; }
.slide-caption h1 span, .slide-caption h2 span { color: var(--yellow); }
.slide-caption p { max-width: 700px; color: rgba(255,255,255,.88); font-size: 17px; line-height: 1.7; margin: 17px 0 0; }
.slide-actions { display: flex; gap: 13px; margin-top: 24px; }
.slider-arrow { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.46); background: rgba(164, 36, 36, .34); color: white; font-size: 33px; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); transition: .2s; }
.slider-arrow:hover { background: var(--yellow); color: var(--charcoal); border-color: var(--yellow); }
.slider-prev { left: 24px; }.slider-next { right: 24px; }
.slider-dots { position: absolute; z-index: 5; right: max(28px, calc((100vw - var(--container))/2 + 20px)); bottom: 38px; display: flex; align-items: center; gap: 9px; }
.slider-dots button { width: 9px; height: 9px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.58); cursor: pointer; transition: .25s; }
.slider-dots button.is-active { width: 34px; background: var(--yellow); }
.quick-dock-light { margin-top: -34px; transform: none; background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.quick-dock-light a { border-right-color: var(--line); }
.quick-dock-light a:hover { background: var(--yellow-soft); }
.quick-dock-light small { color: var(--text); }
.quick-dock-light b { color: var(--charcoal); }
.quick-dock-light .dock-icon,
.quick-dock-light a:nth-child(2) .dock-icon,
.quick-dock-light a:nth-child(3) .dock-icon,
.quick-dock-light a:nth-child(4) .dock-icon { color: var(--charcoal); background: var(--yellow); }

/* Yellow/white homepage treatment; dark neutrals are retained for readable contrast. */
.future-grid { background-color: var(--charcoal); }
.site-header.scrolled .primary-nav > a:not(.btn):hover,
.site-header.scrolled .primary-nav > a.active { color: var(--charcoal); }
.btn-yellow { color: var(--charcoal); }
.btn-dark, .btn-red { background: var(--charcoal); color: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,.16); }
.btn-dark:hover, .btn-red:hover { background: #000; }
.service-card::before, .service-card:nth-child(3n+2)::before, .service-card:nth-child(3n)::before { background: var(--yellow); }
.service-card .service-icon, .service-card:nth-child(3n+2) .service-icon, .service-card:nth-child(3n) .service-icon, .service-card:nth-child(4) .service-icon { border-color: #f4c00c; background: var(--yellow-soft); color: var(--charcoal); }
.service-card:nth-child(4) a { color: var(--charcoal); }
.stats-strip article .stat-icon, .stats-strip article:nth-child(2) .stat-icon, .stats-strip article:nth-child(3) .stat-icon, .stats-strip article:nth-child(4) .stat-icon { color: var(--charcoal); background: var(--yellow-soft); }
.future-grid-light { background-image: linear-gradient(rgba(255,45,16,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,45,16,.045) 1px, transparent 1px); }
.vision-section { background: var(--charcoal); }
.vision-section::after { background: radial-gradient(circle, rgba(244,192,12,.15), transparent 70%); }
.tech-image { background: radial-gradient(circle at 67% 44%, rgba(244,192,12,.55), transparent 14%), radial-gradient(circle at 50% 50%, #FF8A78, #FF2D10 67%); }
.small-thumb, .thumb-one, .thumb-two, .thumb-three { background-color: var(--charcoal-mid); }
.thumb-one { background: radial-gradient(circle at 35% 40%, rgba(244,192,12,.55), transparent 18%), #FF6B57; }
.thumb-two { background: radial-gradient(circle at 70% 50%, rgba(244,192,12,.28), transparent 24%), #FF6B57; }
.thumb-three { background: radial-gradient(circle at 45% 55%, rgba(244,192,12,.34), transparent 24%), #FF6B57; }
.event-card:first-child .event-date, .event-card:nth-child(3) .event-date { background: var(--charcoal); }
.event-card:nth-child(2) .event-date { background: var(--yellow); color: var(--charcoal); }
.event-type.urgent { color: var(--charcoal); background: var(--yellow-soft); }
.join-section::before { background: linear-gradient(90deg, rgba(255,45,16,.99), rgba(255,45,16,.82)); }
.join-layout p { color: #d9d9d9; }
.site-footer { background: #111; }
.footer-brand p, .footer-grid > div > a { color: #cfcfcf; }
.footer-bottom { color: #aaa; }

@media (max-width: 820px) {
  .site-header { background: rgba(255,45,16,.34); backdrop-filter: blur(12px); }
  .primary-nav { background: #FF2D10; }
  .hero-slider { height: 680px; min-height: 680px; }
  .slide-caption-wrap { padding-bottom: 72px; }
  .slide-caption { width: calc(100% - 70px); }
  .slider-arrow { width: 42px; height: 42px; }
  .quick-dock-light { grid-template-columns: repeat(2,1fr); }
  .quick-dock-light a:nth-child(-n+2) { border-bottom-color: var(--line); }
}
@media (max-width: 580px) {
  .hero-slider { height: 640px; min-height: 640px; }
  .slide-caption-wrap { padding-bottom: 76px; }
  .slide-caption { width: 100%; border-left-width: 4px; padding: 18px 18px 18px 17px; border-radius: 0 14px 14px 0; }
  .slide-caption h1, .slide-caption h2 { font-size: 39px; }
  .slide-caption p { font-size: 14px; line-height: 1.6; }
  .slide-actions { flex-direction: column; width: 100%; }
  .slide-actions .btn { width: 100%; }
  .slider-arrow { display: none; }
  .slider-dots { left: 50%; right: auto; transform: translateX(-50%); bottom: 27px; }
  .quick-dock-light { grid-template-columns: 1fr; margin-top: 0; border-radius: 0; width: 100%; }
  .quick-dock-light a { border-bottom-color: var(--line) !important; }
  .home-slider-shell { padding-bottom: 0; }
}

/* =========================================================
   PERMANENT WHITE LOGO + NAVIGATION STRIPE
   ========================================================= */
.site-header,
.site-header.scrolled {
  background: rgba(255, 255, 255, .98);
  color: var(--ink);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(31, 31, 31, .08);
  box-shadow: 0 8px 28px rgba(31, 31, 31, .08);
}

.nav-wrap {
  height: 88px;
}

.brand-logo {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.footer-brand .brand-logo {
  width: 42px;
  height: 42px;
}

/* Wordmark typography copied from the live NRI TDP logo lockup:
   Montserrat 900 for the name, Poppins 500 for the tagline. */
.brand-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
}

.brand-copy strong,
.brand-copy small {
  margin: 0;
  padding: 0;
  text-indent: 0;
}

.brand-copy strong {
  color: var(--ink);          /* header "NRI" - black on white */
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
}

.brand-copy strong span {
  color: var(--yellow);   /* "TDP" - yellow in header and footer */
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}

.brand-copy small,
.footer-brand .brand-copy small {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: .62rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.footer-brand .brand-copy strong {
  font-size: 1.25rem;
  /* Footer sits on #111, so the header's black "NRI" would disappear. */
  color: var(--tdp-red);
}

.brand-copy small,
.site-header.scrolled .brand-copy small {
  color: var(--muted);
}

.primary-nav > a:not(.btn),
.site-header.scrolled .primary-nav > a:not(.btn),
.language-btn,
.site-header.scrolled .language-btn {
  color: #3f3f3f;
}

.primary-nav > a:not(.btn):hover,
.primary-nav > a.active,
.site-header.scrolled .primary-nav > a:not(.btn):hover,
.site-header.scrolled .primary-nav > a.active {
  color: var(--ink);
}

.primary-nav > a.active::after {
  background: var(--yellow);
  height: 3px;
  width: 24px;
  bottom: -13px;
}

.login-link,
.site-header.scrolled .login-link {
  border-left-color: var(--line);
}

.language-btn span {
  color: #f4c00c;
}

.menu-toggle span:not(.sr-only),
.site-header.scrolled .menu-toggle span:not(.sr-only) {
  background: var(--ink);
}

/* Keep the slider fully visible below the white stripe — must track
   the .nav-wrap height exactly, or a gap/overlap appears. */
.home-slider-shell {
  padding-top: 88px;
}

@media (max-width: 820px) {
  .site-header,
  .site-header.scrolled {
    background: rgba(255, 255, 255, .99);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 7px 24px rgba(31, 31, 31, .09);
  }

  .nav-wrap {
    height: 74px;
  }

  .home-slider-shell {
    padding-top: 74px;
  }

  .primary-nav {
    top: 68px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: 0 22px 55px rgba(31, 31, 31, .18);
  }

  .primary-nav > a:not(.btn),
  .primary-nav .login-link {
    color: var(--ink);
  }

  .primary-nav > a:not(.btn):hover,
  .primary-nav > a.active {
    background: var(--yellow-soft);
    color: var(--ink);
    border-radius: 9px;
  }

  .primary-nav .login-link {
    border-left: 0;
  }
}

/* =========================================================
   LEADERSHIP QUOTE CARDS — SLIDE 1
   ========================================================= */
.leader-quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
  max-width: 100%;
}

.leader-quote {
  margin: 0;
  padding: 16px 18px;
  border-left: 3px solid var(--yellow);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(96, 10, 10, .42), rgba(150, 34, 34, .20));
  border-top: 1px solid rgba(255, 255, 255, .12);
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 14px 34px rgba(90, 8, 8, .20);
}

.leader-quote p {
  margin: 0 0 14px;
  max-width: none;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.72;
  color: rgba(255, 255, 255, .96);
  /* Reserve four line boxes so the Naidu and Lokesh panels render at an
     identical height. The longer quote never exceeds four lines, so both
     boxes stay the same size at every width. em tracks the clamped
     font-size, keeping this correct as the type scales. */
  min-height: calc(1.72em * 4);
}

.leader-quote cite {
  display: grid;
  gap: 3px;
  font-style: normal;
}

.leader-quote cite strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--yellow);
}

.leader-quote cite span {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .84);
}

/* Quote-only slides (Naidu, Lokesh) — a narrow, tall panel on the left,
   matching the portrait proportions of the reference layout. */
.slide-caption.quote-caption {
  width: min(470px, 88%);
  /* Shrinks on short windows so the slider can get short enough to keep
     the dock inside the fold. 4cm applies from ~652px viewport height up.
     501px = caption (227) + wrap padding (82) + the 192px the slider gives
     up to the header, dock overhang and bottom margin. */
  /* Same budget the slider is sized from, minus room for the panel itself,
     so the lift can never push the panel past the top of the slider. */
  margin-bottom: max(0px, min(4cm, calc(100svh - var(--hdr) - var(--dock-hang)
                                        - var(--fold-gap) - 330px)));
  /* The inner .leader-quote card is the only panel wanted here, so strip
     the outer .slide-caption panel back to a plain wrapper. */
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 900px) {
  .leader-quotes {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .leader-quote {
    padding: 13px 14px;
  }

  .leader-quote p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 11px;
  }

  .slide-caption.quote-caption {
    width: 100%;
  }
}

/* =========================================================
   SLIDER CAPTION POSITIONING FIX
   `.slide-caption-wrap` was `position: relative`, so it stayed in normal
   flow and stacked BELOW the slide's full-height <img> instead of over it.
   `.hero-slider` has `overflow: hidden`, so every caption was clipped out
   of view — and because it never intersected the viewport, the reveal
   observer never added `.visible` to slide 1's caption either.
   Overlaying it on the image restores all three captions.
   ========================================================= */
.slide-caption-wrap {
  position: absolute;
  inset: 0;
  height: auto;
}

/* =========================================================
   SLIDE 3 — TELUGU TITLE
   ========================================================= */
.slide-caption.title-caption {
  width: min(720px, 90%);
  /* Lift above the baseline: 8cm - 3.5cm = 4.5cm, i.e. the slogan sits 3.5cm
     lower than before. Capped against the viewport so that on a short slider
     the lift can never push the slogan off the top (the slider is
     overflow:hidden, so anything above its edge is clipped). */
  margin-bottom: max(0px, min(4.5cm, calc(100svh - var(--hdr) - var(--dock-hang)
                                          - var(--fold-gap) - 300px)));
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Must out-specify the base `.slide-caption h2 { color: var(--white) }`
   rule, otherwise the first line of the slogan renders white. */
.slide-caption h2.telugu-title {
  margin: 0;
  max-width: none;
  font-family: 'Noto Sans Telugu', sans-serif;
  font-weight: 700;
  /* Telugu needs normal tracking and looser leading than the Latin
     headings — the theme's -.052em would collide the vowel signs. */
  letter-spacing: 0;
  line-height: 1.45;
  font-size: clamp(30px, 3.1vw, 50px);
  color: var(--yellow);
  text-shadow: 0 4px 28px rgba(70, 0, 0, .55);
}

.slide-caption h2.telugu-title .line-2 {
  display: block;
  color: var(--yellow);
}

/* Quotation marks match the slogan — the whole title is yellow. */
.slide-caption h2.telugu-title .qmark {
  color: var(--yellow);
}

/* Attribution line beneath the slogan. */
.telugu-attrib {
  margin: 20px 0 0;
  max-width: none;
  font-family: 'Noto Sans Telugu', sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--white);
  text-shadow: 0 3px 20px rgba(70, 0, 0, .5);
}

.telugu-attrib strong {
  font-weight: 700;
  color: var(--white);
}

@media (max-width: 900px) {
  .slide-caption.title-caption {
    width: 100%;
  }

  .slide-caption h2.telugu-title {
    font-size: 27px;
    line-height: 1.5;
  }

  .telugu-attrib {
    font-size: 14px;
    margin-top: 14px;
  }
}

/* =========================================================
   INTERACTIVE WORLD MAP
   Real per-country geometry (173 countries). Countries render
   black; hover, keyboard focus or click fills them yellow.
   ========================================================= */
.world-map {
  width: 100%;
  height: 100%;
  padding: 26px 30px 54px;
  display: grid;
  place-items: center;
  filter: none;
}

.world-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.world-svg .cty {
  /* Cement grey (#8a918c, from `.section-heading h2 span`) taken 50% deeper. */
  fill: #454846;
  /* Hairline separator so neighbouring black countries stay readable. */
  stroke: #fafaf8;
  stroke-width: .35;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill .18s ease;
  outline: none;
}

.world-svg .cty:hover,
.world-svg .cty:focus-visible,
.world-svg .cty.is-selected {
  fill: var(--yellow);
}

.world-svg .cty:focus-visible {
  stroke: var(--charcoal);
  stroke-width: 1;
}

/* The decorative radial wash sat behind the fake blobs; it muddies the
   solid country fills, so tone it down. */
.map-panel::before {
  opacity: .5;
}

/* Legend swatch tracks the map's country colour. */
.legend-grow {
  background: #454846;
  box-shadow: 0 0 8px rgba(69, 72, 70, .7);
}

@media (max-width: 820px) {
  .world-map {
    padding: 18px 18px 46px;
  }
}

/* =========================================================
   SLIDER FILLS THE FOLD
   The hero occupies the viewport minus the fixed header, minus however much
   of the quick-dock hangs below the slider, minus a margin under the dock.
   These are declared as variables because the dock REFLOWS: it is one row
   (98px) only above 1050px. Below that it becomes two rows (194px) and on
   small phones four rows (330px), so a single hardcoded allowance left the
   dock 56-330px below the fold. Change a number here, not in four places.
   ========================================================= */
:root {
  --hdr: 88px;
  --dock-hang: 64px;   /* dock 98px tall, overlapping the slider by 34px */
  --fold-gap: 40px;    /* white margin under the dock */
  /* Floor: a share of the viewport as well as a pixel minimum. Zoom shrinks
     the CSS viewport while the header/dock stay a fixed pixel size, so a
     purely pixel floor let the photo collapse to ~56% of the screen at
     200% zoom. The photo keeps priority over the dock when space is tight. */
  --hero-min: max(360px, 52svh);
}

@media (min-width: 901px) and (max-width: 1050px) {
  /* The theme reflowed the dock to 2 rows below 1050px, doubling its height to
     194px and taking ~100px off the photo. Four cards still fit down to 900px,
     which keeps the hero tall when the page is zoomed. */
  .quick-dock { grid-template-columns: repeat(4, 1fr); }
  .quick-dock a { border-bottom: 0 !important; }
}

@media (max-width: 900px) {
  :root { --dock-hang: 160px; --hero-min: max(300px, 52svh); }   /* dock is 2 rows */
}

@media (max-width: 820px) {
  :root { --hdr: 74px; }
}

@media (max-width: 580px) {
  /* Dock is 4 stacked rows (330px) here, with no overlap onto the slider. */
  :root { --dock-hang: 330px; --hero-min: max(280px, 45svh); }
}

.hero-slider {
  height: max(var(--hero-min), calc(100vh - var(--hdr) - var(--dock-hang) - var(--fold-gap)));
  /* svh = the viewport with mobile browser chrome shown, so the dock is not
     pushed off-screen on first paint on iOS/Android. */
  height: max(var(--hero-min), calc(100svh - var(--hdr) - var(--dock-hang) - var(--fold-gap)));
  min-height: 0;
}




/* The prev arrow sits at the slider's left edge at mid-height, so on narrower
   windows — where the container edge is only 20px in — it would land on the
   left-aligned caption panels of slides 2 and 3. Indent those two clear of it.
   Slide 1's panel sits mid-frame and is unaffected. */
@media (min-width: 821px) and (max-width: 1375px) {
  .hero-slide:not(:first-child) .quote-caption,
  .title-caption {
    margin-left: 68px;
  }
}

/* The quick-dock is back, so the space below the slider is occupied again
   and the original spacing applies (the dock overlaps the slider by 34px). */
.home-slider-shell {
  padding-bottom: var(--fold-gap);
}

.network-section {
  padding-top: 96px;
}

@media (max-width: 820px) {
  .home-slider-shell {
    padding-bottom: 0;
  }

  .network-section {
    padding-top: 120px;
  }
}

/* =========================================================
   KEEP HEADS IN FRAME
   The slide photos are 1672x941 (aspect 1.78) but the slider box is 2.0-2.6
   wide, so `object-fit: cover` scales to width and crops vertically. The
   default `object-position: 50% 50%` splits that crop evenly, taking ~55px
   off the top at 1600x900 and ~109px at 1240x560 — right through the
   subjects' heads, which sit near the top of every shot. Anchoring the top
   edge moves the whole crop to the bottom (road/crowd) instead.
   ========================================================= */
.hero-slide > img {
  object-position: 50% 0%;
}

/* Slide 1 sits 1.5cm higher than the other two. The extra 1.5cm of height
   backfills the bottom, so the shift can never expose a gap — at some window
   shapes `cover` produces no vertical overflow to crop into. */


/* =========================================================
   SLIDE 1 CAPTION — SEATED BETWEEN NAIDU AND THE BUDDHA STATUE
   The replacement photo puts Naidu left of centre (his shoulder ends
   around 50% of the frame) and the Dhyana Buddha around 81%. The default
   left-aligned panel landed on his chin, so slide 1's panel is placed in
   the open sky/city band between the two. Width is capped as a percentage
   so it shrinks to stay inside that band on narrower windows instead of
   running into the statue.
   ========================================================= */
@media (min-width: 821px) {
  .hero-slide:first-child .slide-caption-wrap {
    width: 100%;
    max-width: none;
  }

  .hero-slide:first-child .quote-caption {
    /* 1cm smaller on every side: 2cm off the width, and the padding and
       type below take the same off the height. Then 2cm left and 3cm down
       (the lift cap drops from 4cm to 1cm, which lowers it by 3cm). */
    width: min(calc(470px - 2cm), 34%);
    margin-left: calc(50% - 2cm);
    margin-bottom: max(0px, min(1cm, calc(100svh - var(--hdr) - var(--dock-hang)
                                          - var(--fold-gap) - 330px)));
  }

  .hero-slide:first-child .leader-quote {
    padding: 10px 12px;
  }

  .hero-slide:first-child .leader-quote p {
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.6;
    margin-bottom: 9px;
    min-height: calc(1.6em * 4);
  }

  .hero-slide:first-child .leader-quote cite strong {
    font-size: 14px;
  }

  .hero-slide:first-child .leader-quote cite span {
    font-size: 11px;
  }
}

/* All slides show their photographs untinted — no red gradient wash. */
.slide-overlay {
  background: none;
}

/* =========================================================
   PER-SLIDE FRAMING
   `cover` scales each photo to the box width and crops the rest vertically,
   and how much varies enormously with the window. The three photos are not
   alike in content, though all three are now 4:3 (1448x1086) --
   and their subjects sit at very different heights, so a single shared value
   would be dragged down to the tightest of them. Each slide is given its own,
   checked so the crop never reaches that subject's head at any screen size.

     slide 1  head 41.3% down, 29.8% across  -> 58%
     slide 2  head 24.1% down, 63.3% across  -> 30%
     slide 3  3 faces spanning 36.6%-72%      -> 57%
   ========================================================= */
.hero-slide:nth-child(1) > img { object-position: 50% 58%; }
.hero-slide:nth-child(2) > img { object-position: 50% 30%; }
/* Slide 3 carries three faces that must all stay whole. NTR's turban starts
   36.6% down and the lowest chin sits near 72%, so the crop has to contain
   that entire band, not merely avoid the top of it. Solving both constraints
   at every screen size leaves a usable window of 53.3%-61.0% (the binding
   case is a wide, short window, where only 40% of the photo survives).
   57% sits in the middle of that window. */
.hero-slide:nth-child(3) > img { object-position: 50% 57%; }

/* Slide 2 raised until Lokesh's hair meets the top edge of the slider, just
   under the header.
   Derived rather than guessed: his hair starts 24.13% down the photo, and the
   photo is 4:3, so its scaled height is 0.75 x the box width. His hairline
   therefore sits 0.2413 x 0.75 = 0.181 x box width from the top, whatever the
   screen. The box is full-bleed, so that is 18.1vw less the scrollbar; the
   +6.7px leaves a constant ~4px so the hair is never actually clipped.
   Negative because a length in object-position measures the image's top edge
   DOWN from the box's - a positive value would open a gap instead.
   16/10 and wider only: on a squarer box `cover` leaves no vertical overflow
   to move into, and the offset would expose a gap at the bottom. */
@media (min-aspect-ratio: 16/10) {
  .hero-slide:nth-child(2) > img {
    object-position: 50% calc(6.7px - 18.1vw);
  }
}

/* =========================================================
   ANCHOR LANDING
   The header is fixed, so a plain anchor jump parks the target's top edge
   underneath it. `scroll-margin-top` offsets each jump by the header height
   plus a little breathing room. The Chapters / Find My Chapter anchor now
   sits on the map panel itself rather than the section, so clicking either
   stops with the panel and locator filling the screen instead of leaving
   them below the fold.
   ========================================================= */
#network,
#services,
#events,
#updates,
#join {
  scroll-margin-top: calc(var(--hdr) + 18px);
}

/* Slide 2's panel, 1cm smaller on every side: 2cm off the width, with the
   padding and type taking the equivalent off the height. */
@media (min-width: 821px) {
  .hero-slide:nth-child(2) .quote-caption {
    width: min(calc(470px - 2cm), 88%);
  }

  .hero-slide:nth-child(2) .leader-quote {
    padding: 10px 12px;
  }

  .hero-slide:nth-child(2) .leader-quote p {
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.6;
    margin-bottom: 9px;
    min-height: calc(1.6em * 4);
  }

  .hero-slide:nth-child(2) .leader-quote cite strong {
    font-size: 14px;
  }

  .hero-slide:nth-child(2) .leader-quote cite span {
    font-size: 11px;
  }
}

/* Quote text carries the emphasis; the attribution sits back.
   Manrope is the theme's own text face, so the quote now sits with the rest
   of the page rather than reading as a pull-quote lifted from another design,
   which is how the Lora italic looked. Upright bold also holds up far better
   than italic serif at this size over a photograph. */
.leader-quote p {
  font-family: "Lora", Georgia, serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}

/* The names were asking for Montserrat 500, but only 700/800/900 were being
   downloaded, so the browser substituted a heavier cut and they stayed bold.
   The lighter weights are now requested, and 400 sets the names back. */
.leader-quote cite strong {
  font-weight: 400;
}


/* One single yellow is now used for every yellow surface. These elements sit
   ON that surface, so their text/glyph must stay dark or it would vanish -
   the same yellow-background/charcoal-text pairing .btn-yellow already uses. */
.service-icon,
.event-type,
.event-type.online,
.stat-icon {
  color: var(--charcoal);
}


/* =========================================================
   RED SURFACE SYSTEM
   Former charcoal/black visual surfaces now use:
   Primary red #FF2D10 and lighter red #FF6B57.
   Neutral ink remains for readable body copy on white.
   ========================================================= */
.btn-dark, .btn-red { background: var(--red-primary); }
.btn-dark:hover, .btn-red:hover { background: var(--red-light); color: #1f1f1f; }
.future-grid, .vision-section, .hero-slider { background-color: var(--red-primary); }
.site-footer { background: var(--red-primary); }
.tech-image { background: radial-gradient(circle at 67% 44%, rgba(252,204,5,.55), transparent 14%), radial-gradient(circle at 50% 50%, var(--red-light), var(--red-primary) 67%); }
.small-thumb, .thumb-one, .thumb-two, .thumb-three { background-color: var(--red-light); }
.primary-nav.open { background: #ffffff; }
@media (max-width: 820px) {
  .primary-nav { background: #ffffff; }
}


/* =========================================================
   BALANCED COMMON SECTION THEME
   Vision 2047 and Join the Global Network now follow the
   same white / soft-surface / yellow-accent language used by
   the surrounding homepage sections. Red is retained as an
   accent instead of a full-bleed background.
   ========================================================= */

/* VISION 2047 — light section with a contained feature card */
.vision-section,
.future-grid.vision-section {
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}

.vision-grid-overlay {
  opacity: .55;
  background-image:
    linear-gradient(rgba(31,31,31,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,31,31,.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to right, #000, transparent 90%);
}

.vision-section::after {
  width: 480px;
  height: 480px;
  right: -210px;
  top: 8%;
  background: radial-gradient(circle, rgba(252,204,5,.22), transparent 70%);
}

.vision-layout {
  padding: 42px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.vision-portrait {
  border-radius: 22px;
}

.portrait-placeholder {
  background:
    radial-gradient(circle at 50% 22%, rgba(252,204,5,.30), transparent 34%),
    linear-gradient(145deg, #fffdf3, #fff5c2 58%, #ffe8e3);
  border: 1px solid #eadfbd;
  box-shadow: 0 22px 55px rgba(31,31,31,.10);
}

.portrait-placeholder::before {
  border-color: rgba(255,45,16,.18);
  background: radial-gradient(ellipse at 50% 85%, rgba(252,204,5,.26), transparent 62%);
}

.portrait-placeholder span {
  color: var(--ink);
}

.portrait-placeholder small {
  color: var(--muted);
}

.portrait-caption {
  border: 1px solid rgba(255,45,16,.14);
  background: rgba(255,255,255,.88);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(31,31,31,.09);
}

.portrait-caption small {
  color: var(--muted);
}

.vision-copy .section-kicker.light {
  color: var(--red-primary);
}

.vision-copy h2 {
  color: var(--ink);
}

.vision-copy > p {
  color: var(--text);
}

.vision-copy blockquote {
  color: var(--ink);
  background: var(--yellow-soft);
  border-left: 4px solid var(--yellow);
  border-radius: 0 14px 14px 0;
  padding: 18px 20px;
}

/* JOIN — white/soft-yellow CTA card rather than a full red band */
.join-section {
  position: relative;
  color: var(--ink);
  padding: 88px 0;
  overflow: hidden;
  background:
    linear-gradient(rgba(31,31,31,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,31,31,.025) 1px, transparent 1px),
    var(--surface);
  background-size: 52px 52px;
}

.join-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(252,204,5,.16), rgba(255,255,255,.55) 54%, rgba(255,107,87,.08));
  pointer-events: none;
}

.join-glow {
  width: 380px;
  height: 380px;
  right: -100px;
  top: -120px;
  background: rgba(252,204,5,.26);
  filter: blur(75px);
}

.join-layout {
  padding: 42px 46px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--line);
  border-top: 4px solid var(--yellow);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.join-layout::after {
  content: "";
  position: absolute;
  right: 30px;
  bottom: 24px;
  width: 90px;
  height: 6px;
  border-radius: 999px;
  background: var(--red-primary);
  opacity: .85;
}

.join-layout .section-kicker.light {
  color: var(--red-primary);
}

.join-layout h2 {
  color: var(--ink);
}

.join-layout p {
  color: var(--text);
}

.join-actions .btn-ghost {
  color: var(--red-primary);
  border-color: rgba(255,45,16,.30);
  background: var(--red-soft);
  backdrop-filter: none;
}

.join-actions .btn-ghost:hover {
  color: #ffffff;
  border-color: var(--red-primary);
  background: var(--red-primary);
}

@media (max-width: 820px) {
  .vision-layout,
  .join-layout {
    padding: 28px;
  }

  .join-layout::after {
    right: 24px;
    bottom: 18px;
    width: 58px;
  }
}

@media (max-width: 580px) {
  .vision-layout,
  .join-layout {
    padding: 22px;
    border-radius: 18px;
  }

  .join-section {
    padding: 72px 0;
  }
}

/* =========================================================
   MATCHED FOOTER + RED CHAPTER MAP UPDATE
   Footer now follows the common light theme instead of a
   full red background. The interactive world map now uses
   red country fills instead of dark charcoal fills.
   ========================================================= */

/* Light footer matching the rest of the site */
.site-footer {
  background: linear-gradient(180deg, #fffdf7 0%, var(--surface) 100%);
  color: var(--ink);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(252, 204, 5, .45);
}

.footer-grid {
  gap: 56px;
}

.footer-brand p,
.footer-grid > div > a,
.footer-bottom {
  color: var(--text);
}

.footer-grid > div > strong,
.footer-brand .brand-copy strong {
  color: var(--ink);
}

.footer-brand .brand-copy strong span {
  color: var(--yellow);
  text-shadow: none;
}

.footer-brand .brand-copy small {
  color: var(--muted);
}

.footer-grid > div > a:hover {
  color: var(--red-primary);
}

.footer-bottom {
  border-top: 1px solid var(--line);
}

/* Red global map on Chapters section */
.map-panel::before {
  background: radial-gradient(circle, rgba(255, 107, 87, .14), transparent 67%);
  opacity: .85;
}

.world-svg .cty {
  fill: var(--red-light);
  stroke: #fff8f6;
}

.world-svg .cty:hover,
.world-svg .cty:focus-visible,
.world-svg .cty.is-selected {
  fill: var(--yellow);
}

.world-svg .cty:focus-visible {
  stroke: var(--red-primary);
  stroke-width: 1;
}

.legend-grow {
  background: var(--red-light);
  box-shadow: 0 0 8px rgba(255, 107, 87, .7);
}

@media (max-width: 580px) {
  .site-footer {
    background: #fffdf8;
  }
}