:root {
      --maroon: #7A1E2C; --maroon-dark: #5C1420; --maroon-light: #9A2E3C;
      --deep-red: #B22234; --deep-red-hover: #D43A4C;
      --gold: #D4AF37; --gold-light: #E0C060; --gold-dark: #B8962E; --gold-pale: #F5E8C8;
      --navy: #1F2E4A; --navy-light: #2A3D5E; --navy-dark: #141F33;
      --warm-white: #F9F7F3; --cream: #FFF8EC; --light-grey: #F2F4F7;
      --ink: #222222; --muted: #666666; --muted-light: #8A8A8A;
      --white: #FFFFFF; --success: #2E7D32; --pending: #F57C00;
      --rejected: #C62828; --progress: #1565C0;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body { background: var(--warm-white); color: var(--ink); font-family: 'DM Sans', sans-serif; overflow-x: hidden; }
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: var(--light-grey); }
    ::-webkit-scrollbar-thumb { background: var(--maroon); border-radius: 99px; }
    ::selection { background: var(--gold); color: var(--ink); }

    /* LOADING SCREEN */
    #loader { position: fixed; inset: 0; z-index: 10001; background: var(--maroon); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.8s ease, visibility 0.8s ease; }
    #loader::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(212,175,55,0.06) 0%, transparent 70%); pointer-events: none; }
    #loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
    #loader .loader-ring { width: 64px; height: 64px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.12); border-top-color: var(--gold); animation: spin 0.8s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    #loader .loader-bar { width: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin-top: 1.5rem; animation: loader-bar-pulse 1.2s ease-in-out infinite; border-radius: 2px; }
    @keyframes loader-bar-pulse { 0%,100% { opacity: 0.2; transform: scaleX(0.6); } 50% { opacity: 1; transform: scaleX(1); } }
    #loader p { margin-top: 0.8rem; color: var(--gold); font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; animation: pulse-text 1.5s ease-in-out infinite; font-family: 'DM Sans', sans-serif; }
    @keyframes pulse-text { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

    /* PROGRESS BAR */
    #progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); z-index: 10001; width: 0%; transition: width 0.1s linear; }

    /* ── NAVBAR (two-tier) ── */
    #nav-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: var(--maroon); height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; transition: transform 0.4s ease; }
    #nav-topbar.hide-nav { transform: translateY(-72px); }
    .topbar-left { display: flex; align-items: center; gap: 1.6rem; }
    .topbar-left a, .topbar-left span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; }
    .topbar-left a:hover { color: var(--gold); }
    .topbar-left i { font-size: 11px; color: var(--gold); }
    .topbar-right { display: flex; align-items: center; gap: 1rem; }
    .topbar-right .font-size-btn { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.65); font-size: 11px; font-weight: 600; padding: 2px 5px; transition: color 0.2s; font-family: 'DM Sans', sans-serif; }
    .topbar-right .font-size-btn:hover { color: var(--gold); }
    .topbar-right .divider { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }
    .topbar-socials { display: flex; align-items: center; gap: 12px; }
    .topbar-socials a { color: rgba(255,255,255,0.65); font-size: 13px; transition: color 0.2s; }
    .topbar-socials a:hover { color: var(--gold); }
    .topbar-login { color: rgba(255,255,255,0.75) !important; font-size: 12px !important; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.2s; }
    .topbar-login:hover { color: var(--gold) !important; }
    #navbar { position: fixed; top: 36px; left: 0; right: 0; z-index: 1000; padding: 0 2.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; background: var(--white); border-bottom: 1px solid rgba(122,30,44,0.1); box-shadow: 0 2px 20px rgba(0,0,0,0.06); transition: transform 0.4s ease, box-shadow 0.3s, top 0.4s ease; }
    #navbar.hide-nav { transform: translateY(-100px); }
    #navbar.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.1); top: 0; }
    .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .nav-logo img { height: 44px; width: auto; border-radius: 6px; }
    .nav-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
    .nav-logo-text .top { font-family: 'Tiro Tamil', serif; font-size: 19px; font-weight: 700; color: var(--maroon); }
    .nav-logo-text .en { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--maroon-dark); }
    .nav-logo-text .sub { font-size: 9px; letter-spacing: 1px; color: var(--muted-light); font-family: 'Tiro Tamil', serif; margin-top: 1px; }
    .nav-links { display: flex; align-items: center; gap: 1.8rem; list-style: none; flex: 1; justify-content: center; }
    .nav-links a { color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: color 0.2s; position: relative; padding-bottom: 2px; }
    .nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--maroon); transition: width 0.25s; border-radius: 2px; }
    .nav-links a:hover, .nav-links a.active { color: var(--maroon); }
    .nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
    .nav-cta { display: flex; gap: 10px; align-items: center; }
    .btn-outline { padding: 8px 18px; border: 1.5px solid var(--maroon); border-radius: 6px; color: var(--maroon); font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
    .btn-outline:hover { background: var(--maroon); color: var(--white); }
    .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; background: var(--maroon); border-radius: 6px; color: var(--white); font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.2s; border: none; cursor: pointer; }
    .btn-primary:hover { background: var(--maroon-light); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(122,30,44,0.25); }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
    .hamburger span { display: block; width: 24px; height: 2px; background: var(--maroon); border-radius: 2px; transition: all 0.3s; }
    #mobile-nav { display: none; position: fixed; top: 100px; left: 0; right: 0; background: var(--white); padding: 1.5rem 2rem 2rem; z-index: 999; border-bottom: 2px solid var(--maroon); box-shadow: 0 8px 30px rgba(0,0,0,0.1); }
    #mobile-nav.open { display: block; }
    #mobile-nav a { display: block; padding: 12px 0; color: var(--ink); text-decoration: none; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.06); transition: color 0.2s; }
    #mobile-nav a:hover { color: var(--maroon); }
    #mobile-nav .mob-btns { display: flex; gap: 10px; margin-top: 1.2rem; }
    #mobile-nav .mob-btns a { border: none; padding: 0; }

    /* ── HERO (light split layout, map right) ── */
    #hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding-top: 100px; background: #FBF6EE; }
    .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(212,175,55,0.08) 0%, transparent 60%), radial-gradient(ellipse 40% 50% at 10% 80%, rgba(122,30,44,0.04) 0%, transparent 60%); pointer-events: none; }

    .hero-city-bg { position: absolute; bottom: 0; left: 0; right: 0; height: 220px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220'%3E%3Cg fill='rgba(122,30,44,0.04)'%3E%3Crect x='60' y='80' width='40' height='140'/%3E%3Crect x='55' y='70' width='50' height='20'/%3E%3Crect x='67' y='50' width='8' height='25'/%3E%3Crect x='130' y='100' width='60' height='120'/%3E%3Crect x='220' y='60' width='30' height='160'/%3E%3Crect x='215' y='50' width='40' height='15'/%3E%3Crect x='228' y='30' width='6' height='25'/%3E%3Crect x='270' y='110' width='50' height='110'/%3E%3Crect x='340' y='90' width='45' height='130'/%3E%3Crect x='405' y='70' width='35' height='150'/%3E%3Crect x='400' y='58' width='45' height='16'/%3E%3Crect x='412' y='38' width='8' height='24'/%3E%3Crect x='460' y='105' width='55' height='115'/%3E%3Crect x='535' y='85' width='40' height='135'/%3E%3Crect x='600' y='65' width='50' height='155'/%3E%3Crect x='596' y='52' width='58' height='16'/%3E%3Crect x='618' y='32' width='8' height='24'/%3E%3Crect x='670' y='100' width='45' height='120'/%3E%3Crect x='735' y='88' width='38' height='132'/%3E%3Crect x='800' y='70' width='42' height='150'/%3E%3Crect x='796' y='56' width='50' height='16'/%3E%3Crect x='808' y='36' width='8' height='24'/%3E%3Crect x='860' y='108' width='52' height='112'/%3E%3Crect x='932' y='78' width='38' height='142'/%3E%3Crect x='1000' y='62' width='44' height='158'/%3E%3Crect x='996' y='48' width='52' height='16'/%3E%3Crect x='1010' y='28' width='8' height='24'/%3E%3Crect x='1064' y='98' width='50' height='122'/%3E%3Crect x='1136' y='82' width='40' height='138'/%3E%3Crect x='1200' y='68' width='46' height='152'/%3E%3Crect x='1196' y='55' width='54' height='15'/%3E%3Crect x='1210' y='35' width='8' height='24'/%3E%3Crect x='1270' y='104' width='48' height='116'/%3E%3Crect x='1340' y='86' width='42' height='134'/%3E%3C/g%3E%3C/svg%3E") no-repeat bottom center / cover; pointer-events: none; }

    #particle-canvas { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.5; }

    .hero-inner { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 4vw 4vh; min-height: calc(100vh - 100px); }

    .hero-content { position: relative; }
    .hero-reveal { opacity: 0; transform: translateY(30px); animation: heroReveal 0.7s ease forwards; }
    .hero-reveal:nth-child(1) { animation-delay: 0.1s; }
    .hero-reveal:nth-child(2) { animation-delay: 0.25s; }
    .hero-reveal:nth-child(3) { animation-delay: 0.4s; }
    .hero-reveal:nth-child(4) { animation-delay: 0.55s; }
    .hero-reveal:nth-child(5) { animation-delay: 0.7s; }
    @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } }

    .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(122,30,44,0.08); border: 1px solid rgba(122,30,44,0.2); border-radius: 4px; padding: 7px 16px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--maroon); margin-bottom: 1.5rem; font-weight: 700; font-family: 'Tiro Tamil', serif; }
    .hero-eyebrow span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--maroon); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.6); } }

    .hero-h1 { font-family: 'Tiro Tamil', serif; font-size: clamp(40px, 6vw, 78px); font-weight: 700; line-height: 1.2; color: var(--maroon-dark); margin-bottom: 0.5rem; letter-spacing: 1px; }
    .hero-h1 .accent { display: block; color: var(--maroon); }
    .hero-h1-en { font-family: 'DM Sans', sans-serif; font-size: clamp(14px, 1.8vw, 20px); font-weight: 700; color: var(--maroon); letter-spacing: -0.2px; margin-bottom: 1.5rem; opacity: 0.75; }
    .hero-desc { font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 460px; margin-bottom: 2.5rem; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 3rem; }
    .btn-hero-primary { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; background: var(--maroon); color: var(--white); font-weight: 700; font-size: 14px; border-radius: 8px; text-decoration: none; transition: all 0.25s; box-shadow: 0 4px 20px rgba(122,30,44,0.2); }
    .btn-hero-primary:hover { background: var(--maroon-light); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(122,30,44,0.28); }
    .btn-hero-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border: 2px solid var(--maroon); color: var(--maroon); font-weight: 600; font-size: 14px; border-radius: 8px; text-decoration: none; transition: all 0.2s; background: transparent; }
    .btn-hero-secondary:hover { background: var(--maroon); color: var(--white); }
    .btn-hero-lang { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 2px solid var(--gold); color: var(--gold); font-weight: 700; font-size: 13px; border-radius: 8px; text-decoration: none; transition: all 0.25s; background: transparent; letter-spacing: 0.3px; }
    .btn-hero-lang:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }

    .hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
    .hero-stat { border-left: 3px solid var(--gold); padding-left: 14px; }
    .hero-stat .num { font-family: 'DM Sans', sans-serif; font-size: 28px; font-weight: 700; color: var(--maroon); line-height: 1; }
    .hero-stat .lbl { font-size: 11px; color: var(--muted-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

    .hero-tag-row { display: flex; gap: 10px; margin-top: 2rem; flex-wrap: wrap; }
    .hero-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-family: 'Tiro Tamil', serif; }
    .hero-tag i { color: var(--gold); font-size: 13px; }

    .shimmer { background: linear-gradient(90deg, var(--maroon) 0%, #C0392B 30%, var(--maroon-dark) 50%, #C0392B 70%, var(--maroon) 100%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmerSweep 4s ease-in-out infinite; }
    @keyframes shimmerSweep { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

    /* MAP SIDE */
    .hero-map-side { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
    .hero-map-img { width: 100%; max-width: 640px; height: auto; position: relative; z-index: 2; filter: drop-shadow(0 20px 60px rgba(122,30,44,0.12)); animation: mapFloat 6s ease-in-out infinite; }
    @keyframes mapFloat { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-12px); } }

    .map-card { position: absolute; background: var(--white); border-radius: 12px; padding: 10px 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); display: flex; align-items: center; gap: 10px; min-width: 170px; z-index: 5; animation: cardFloat 0.6s ease both; }
    .map-card.c1 { top: 12%; left: -5%; animation-delay: 1s; animation: heroReveal 0.6s 1s ease both, cardPulse1 7s 1.6s ease-in-out infinite; }
    .map-card.c2 { bottom: 28%; left: -8%; animation: heroReveal 0.6s 1.3s ease both, cardPulse2 7s 1.9s ease-in-out infinite; }
    .map-card.c3 { top: 15%; right: -4%; animation: heroReveal 0.6s 1.1s ease both, cardPulse3 8s 1.7s ease-in-out infinite; }
    .map-card.c4 { bottom: 15%; right: -3%; animation: heroReveal 0.6s 1.5s ease both, cardPulse4 9s 2.1s ease-in-out infinite; }
    @keyframes cardPulse1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    @keyframes cardPulse2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
    @keyframes cardPulse3 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    @keyframes cardPulse4 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
    .map-card-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
    .map-card-icon.water { background: #E3F2FD; color: #1565C0; }
    .map-card-icon.road { background: #FFF3E0; color: #E65100; }
    .map-card-icon.resolved { background: #E8F5E9; color: #2E7D32; }
    .map-card-icon.drain { background: #EDE7F6; color: #6A1B9A; }
    .map-card-body { flex: 1; }
    .map-card-label { font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 2px; }
    .map-card-title { font-size: 12px; font-weight: 700; color: var(--ink); line-height: 1.2; }
    .map-card-time { font-size: 10px; color: var(--muted-light); margin-top: 2px; }
    .map-card-resolved .map-card-title { color: var(--success); }

    /* VOLUNTEER BANNER */
    #vol-banner { background: var(--cream); padding: 60px 0; border-bottom: 2px solid var(--gold); }
    .vol-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
    .vol-banner-inner .vol-text { flex: 1; min-width: 280px; }
    .vol-banner-inner .vol-text h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--ink); line-height: 1.15; }
    .vol-banner-inner .vol-text h2 span { color: var(--maroon); }
    .vol-banner-inner .vol-text p { font-size: 14px; color: var(--muted); margin-top: 8px; line-height: 1.7; max-width: 480px; }
    .vol-banner-inner .vol-actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-vol { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--maroon); color: var(--white); font-weight: 600; font-size: 14px; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
    .btn-vol:hover { background: var(--maroon-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(122,30,44,0.2); }
    .btn-vol-outline { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border: 2px solid var(--maroon); color: var(--maroon); font-weight: 600; font-size: 14px; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
    .btn-vol-outline:hover { background: var(--maroon); color: var(--white); transform: translateY(-2px); }
    .vol-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-pale); color: var(--maroon); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 4px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }

    /* TICKER */
    .ticker-wrap { background: var(--maroon); padding: 10px 0; overflow: hidden; position: relative; border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); }
    .ticker-track { display: flex; gap: 0; animation: ticker 30s linear infinite; width: max-content; }
    .ticker-item { display: flex; align-items: center; gap: 12px; padding: 0 2rem; font-size: 13px; font-weight: 500; color: var(--white); white-space: nowrap; }
    .ticker-item .dot { color: var(--gold); font-size: 18px; }
    @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

    /* SECTIONS */
    section { position: relative; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
    .section-pad { padding: 100px 0; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--maroon); font-weight: 600; margin-bottom: 1.2rem; }
    .eyebrow::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--maroon); }
    .eyebrow.gold { color: var(--gold); }
    .eyebrow.gold::before { background: var(--gold); }
    .section-h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -0.5px; margin-bottom: 1rem; }

    /* REVEAL */
    .reveal { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; }
    .reveal.visible { opacity: 1; transform: translate(0,0) !important; }
    .reveal-up { transform: translateY(40px); }
    .reveal-left { transform: translateX(-50px); }
    .reveal-right { transform: translateX(50px); }
    .reveal-scale { transform: scale(0.9); }

    /* ABOUT */
    #about { background: var(--warm-white); }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; }
    .about-left .section-h2 span { color: var(--maroon); }
    .about-left p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 1.2rem; }
    .about-pillars { display: flex; flex-direction: column; gap: 16px; margin-top: 2.5rem; }
    .pillar { display: flex; align-items: flex-start; gap: 16px; padding: 16px 20px; background: var(--cream); border: 1px solid rgba(122,30,44,0.1); border-radius: 8px; transition: all 0.2s; }
    .pillar:hover { border-color: var(--gold); background: var(--gold-pale); }
    .pillar-icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--maroon); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--gold); }
    .pillar h4 { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
    .pillar p { font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0; }
    .about-right { position: relative; }
    .about-card-big { background: var(--cream); border: 1px solid rgba(122,30,44,0.12); border-radius: 16px; padding: 2.5rem; position: relative; overflow: hidden; }
    .about-card-big::before { content: ''; position: absolute; top: -50px; right: -50px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(212,175,55,0.1), transparent 70%); }
    .about-card-big .flag { width: 60px; height: auto; margin-bottom: 1.5rem; }
    .about-card-big .manifesto { font-family: 'Tiro Tamil', serif; font-size: 20px; line-height: 1.6; color: var(--maroon); font-style: italic; margin-bottom: 1rem; }
    .about-card-big .attr { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); }
    .stat-box-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1.5rem; }
    .stat-box { background: var(--white); border: 1px solid rgba(122,30,44,0.1); border-radius: 10px; padding: 1.2rem; text-align: center; transition: transform 0.3s, box-shadow 0.3s; }
    .stat-box:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
    .stat-box .n { font-family: 'DM Sans', sans-serif; font-size: 34px; font-weight: 700; color: var(--maroon); line-height: 1; }
    .stat-box .l { font-size: 11px; color: var(--muted-light); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

    /* LEADERSHIP */
    #leadership { background: var(--cream); }
    #leadership .section-h2 .g { color: var(--maroon); }
    .leaders-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-top: 3.5rem; }
    .leader-card { background: var(--white); border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 24px rgba(0,0,0,0.05); transition: box-shadow 0.25s; transform-style: preserve-3d; perspective: 1000px; }
    .leader-card:first-child { grid-column: span 1; }
    .leader-card-inner { transform-style: preserve-3d; transition: transform 0.15s ease; }
    .leader-card-top { background: linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%); padding: 2rem 2rem 0; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; transform: translateZ(20px); }
    .leader-card-top::before { content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 200px; height: 60px; background: var(--white); border-radius: 50%; }
    .leader-photo-wrap { width: 110px; height: 130px; position: relative; z-index: 1; }
    .leader-photo-placeholder { width: 110px; height: 130px; border-radius: 10px; background: rgba(255,255,255,0.15); border: 2.5px solid rgba(212,175,55,0.5); display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .leader-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
    .leader-badge { position: absolute; bottom: -12px; right: -8px; background: var(--gold); color: var(--ink); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
    .leader-card-body { padding: 2rem 1.8rem 1.8rem; transform: translateZ(30px); }
    .leader-name { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
    .leader-role { font-size: 12px; color: var(--maroon); font-weight: 600; margin-bottom: 12px; }
    .leader-margin { display: inline-flex; align-items: center; gap: 8px; background: #FEF0F0; border: 1px solid rgba(122,30,44,0.12); border-radius: 4px; padding: 5px 12px; font-size: 12px; color: var(--maroon); font-weight: 600; margin-bottom: 14px; }
    .leader-quote { font-family: 'Tiro Tamil', serif; font-size: 13px; line-height: 1.75; color: var(--muted); font-style: italic; border-left: 3px solid var(--gold); padding-left: 12px; margin-top: 4px; }
    .leader-detail { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.06); }

    /* MLA IN ACTION */
    #mla-in-action { background: var(--navy); color: var(--white); }
    #mla-in-action .section-h2 { color: var(--white); }
    #mla-in-action .section-h2 span { color: var(--gold); }
    #mla-in-action .eyebrow { color: var(--gold); }
    #mla-in-action .eyebrow::before { background: var(--gold); }
    .mla-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 2rem 0 3rem; }
    .mla-stat { text-align: center; padding: 1.5rem 1rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.1); border-radius: 10px; }
    .mla-stat .num { font-size: 32px; font-weight: 700; color: var(--gold); }
    .mla-stat .lbl { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
    .mla-cards { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .mla-cards::-webkit-scrollbar { height: 4px; }
    .mla-cards::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 99px; }
    .mla-card { min-width: 280px; background: rgba(255,255,255,0.04); border: 1px solid rgba(212,175,55,0.1); border-radius: 12px; padding: 1.5rem; scroll-snap-align: start; }
    .mla-card .date { font-size: 11px; color: var(--gold); font-weight: 600; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
    .mla-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
    .mla-card p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; }
    .mla-card .tag { display: inline-block; margin-top: 10px; font-size: 10px; padding: 3px 10px; border-radius: 4px; background: rgba(212,175,55,0.12); color: var(--gold); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

    /* RESOLVED WALL */
    #resolved-wall { background: var(--light-grey); }
    .resolved-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 3rem; }
    .resolved-card { background: var(--white); border-radius: 12px; padding: 1.5rem; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.03); transition: transform 0.3s, box-shadow 0.3s; }
    .resolved-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
    .resolved-card .status-badge { display: inline-block; font-size: 10px; padding: 3px 10px; border-radius: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: #E8F5E9; color: var(--success); }
    .resolved-card h4 { font-size: 14px; font-weight: 700; margin: 10px 0 6px; color: var(--ink); }
    .resolved-card p { font-size: 12px; color: var(--muted); line-height: 1.6; }
    .resolved-card .meta { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 11px; color: var(--muted-light); }

    /* HOW IT WORKS */
    #workflow { background: var(--warm-white); }
    .workflow-header { text-align: center; margin-bottom: 4rem; }
    .workflow-header .section-h2 span { color: var(--maroon); }
    .steps-row { display: flex; gap: 0; position: relative; }
    .steps-row::before { content: ''; position: absolute; top: 48px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--maroon) 0%, var(--gold) 50%, var(--maroon) 100%); z-index: 0; }
    .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1rem; position: relative; z-index: 1; }
    .step-num { width: 96px; height: 96px; border-radius: 50%; background: var(--white); border: 3px solid var(--maroon); display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; font-size: 36px; font-weight: 700; color: var(--maroon); margin-bottom: 1.5rem; position: relative; transition: all 0.3s; flex-shrink: 0; }
    .step:hover .step-num { border-color: var(--gold); background: var(--maroon); color: var(--gold); transform: scale(1.08); }
    .step-icon { position: absolute; bottom: -2px; right: -2px; width: 32px; height: 32px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
    .step h4 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
    .step p { font-size: 13px; color: var(--muted); line-height: 1.65; }

    /* FEATURES */
    #features { background: var(--cream); }
    .features-header { margin-bottom: 3.5rem; }
    .features-header .section-h2 span { color: var(--maroon); }
    .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .feature-card { background: var(--white); border: 1px solid rgba(122,30,44,0.08); border-radius: 14px; padding: 2rem 1.6rem; transition: all 0.25s; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
    .feature-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.06); }
    .feature-icon { width: 52px; height: 52px; background: var(--maroon); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--gold); margin-bottom: 1.2rem; }
    .feature-card h4 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
    .feature-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }
    .feature-tag { display: inline-block; margin-top: 14px; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--maroon); font-weight: 600; background: #FEF0F0; padding: 3px 10px; border-radius: 4px; }
    .feature-card.feature-highlight { background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%); border-color: rgba(212,175,55,0.2); }
    .feature-card.feature-highlight h4 { color: var(--white); }
    .feature-card.feature-highlight p { color: rgba(255,255,255,0.6); }
    .feature-card.feature-highlight .feature-tag { background: rgba(212,175,55,0.15); color: var(--gold); }
    .feature-card.feature-highlight .feature-icon { background: var(--gold); color: var(--maroon); }

    /* VILLAGE DIRECTORY */
    #village-directory { background: var(--warm-white); }
    .dir-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 2.5rem; }
    .dir-card { background: var(--white); border: 1px solid rgba(122,30,44,0.08); border-radius: 10px; padding: 1.2rem; text-align: center; transition: all 0.2s; }
    .dir-card:hover { border-color: var(--gold); transform: translateY(-2px); }
    .dir-card .vname { font-size: 14px; font-weight: 700; color: var(--ink); }
    .dir-card .vreps { font-size: 11px; color: var(--muted); margin-top: 4px; }
    .dir-card .vphone { font-size: 12px; color: var(--maroon); font-weight: 600; margin-top: 6px; }

    /* COMPLAINT FORM */
    #submit-section { background: var(--light-grey); }
    .form-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.5rem; align-items: start; }
    .form-layout .col-6 { grid-column: span 6; }
    .tip-card { background: linear-gradient(135deg, var(--maroon), #5C1420); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 30px rgba(122,30,44,0.15); }
    .tip-card-head { display: flex; align-items: center; gap: 10px; padding: 1.2rem 1.5rem; background: rgba(255,255,255,0.06); color: var(--gold); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
    .tip-card-head i { font-size: 18px; }
    .tip-card-body { padding: 1.5rem; }
    .tip-card-text { font-size: 16px; line-height: 1.8; color: rgba(255,255,255,0.9); font-weight: 400; }
    .tip-card-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.8rem 1.5rem; background: rgba(0,0,0,0.15); font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 0.5px; }
    .tip-share-btn { background: rgba(255,255,255,0.1); border: none; color: var(--gold); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: background 0.15s; }
    .tip-share-btn:hover { background: rgba(255,255,255,0.2); }
    .viewer-card { background: linear-gradient(135deg, var(--maroon), #5C1420); border-radius: 14px; margin-top: 1rem; overflow: hidden; }
    .viewer-card-body { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 1rem 1.5rem; }
    .viewer-stat { text-align: center; }
    .viewer-num { display: block; font-size: 28px; font-weight: 800; color: var(--gold); font-family: 'DM Sans', sans-serif; line-height: 1.2; letter-spacing: -0.5px; }
    .viewer-lbl { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255,255,255,0.6); margin-top: 2px; font-weight: 600; }
    .complaint-form { background: var(--white); border-radius: 16px; padding: 2.5rem; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 40px rgba(0,0,0,0.06); }
    .form-title { font-family: 'DM Sans', sans-serif; font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; }
    .form-subtitle { font-size: 13px; color: var(--muted-light); margin-bottom: 1.8rem; }

    .form-group { margin-bottom: 18px; position: relative; }
    .form-group label { display: block; font-size: 12px; font-weight: 600; color: var(--muted-light); letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 6px; transition: all 0.2s; }
    .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 16px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--ink); background: var(--warm-white); transition: border-color 0.3s, box-shadow 0.3s; outline: none; }
    .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(212,175,55,0.15); }
    .form-group textarea { resize: vertical; min-height: 100px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .village-detail { display: none; }
    .village-detail.show { display: block; }
    .village-detail .form-group { width: 100%; }

    .form-submit { width: 100%; padding: 14px; background: var(--maroon); color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; margin-top: 6px; }
    .form-submit:hover { background: var(--maroon-light); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(122,30,44,0.2); }
    .form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
    .field-error { display: block; font-size: 11px; color: #c0392b; margin-top: 4px; min-height: 14px; }


    .form-message.error { color: #c0392b; font-size: 12px; margin-top: 10px; text-align: center; }
    .form-message.error.ta { font-family: 'Tiro Tamil', serif; margin-top: 4px; }

    #form-success { display: none; text-align: center; padding: 2rem; }
    #form-success .tick { width: 64px; height: 64px; background: #E8F5E9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--success); margin: 0 auto 1rem; }
    #form-success h3 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
    #form-success p { font-size: 13px; color: var(--muted); }
    #form-success .ref { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--maroon); letter-spacing: 1px; background: #FEF0F0; padding: 6px 16px; border-radius: 6px; }

    /* TESTIMONIALS */
    #testimonials { background: var(--cream); }
    .testimonials-header { text-align: center; margin-bottom: 3.5rem; }
    .testimonials-header .section-h2 span { color: var(--maroon); }
    .testi-carousel { position: relative; min-height: 280px; }
    .testi-slide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; opacity: 0; position: absolute; inset: 0; transition: opacity 0.6s ease; pointer-events: none; }
    .testi-slide.active { opacity: 1; position: relative; pointer-events: auto; }
    .testi-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2rem; }
    .testi-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(122,30,44,0.2); border: none; cursor: pointer; transition: all 0.3s; }
    .testi-dot.active { background: var(--maroon); transform: scale(1.3); }
    .testi-card { background: var(--white); border: 1px solid rgba(122,30,44,0.08); border-radius: 12px; padding: 2rem; transition: border-color 0.2s; box-shadow: 0 2px 12px rgba(0,0,0,0.03); }
    .testi-card:hover { border-color: var(--gold); }
    .testi-stars { display: flex; gap: 3px; margin-bottom: 1rem; }
    .testi-stars i { color: var(--gold); font-size: 13px; }
    .testi-quote { font-size: 14px; line-height: 1.75; color: var(--muted); font-style: italic; margin-bottom: 1.5rem; }
    .testi-author { display: flex; align-items: center; gap: 12px; }
    .testi-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--maroon); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--gold); }
    .testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .testi-author .name { font-size: 13px; font-weight: 700; color: var(--ink); }
    .testi-author .loc { font-size: 11px; color: var(--muted-light); margin-top: 2px; }

    /* TEAM */
    #team { background: var(--warm-white); }
    .team-header { text-align: center; margin-bottom: 3.5rem; }
    .team-header .section-h2 span { color: var(--maroon); }
    .team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
    .team-card { background: var(--white); border: 1px solid rgba(122,30,44,0.08); border-radius: 12px; padding: 1.4rem 1rem; text-align: center; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
    .team-card:hover { border-color: var(--gold); transform: translateY(-6px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
    .team-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; color: var(--gold); }
    .team-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .team-card h4 { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
    .team-card .role { font-size: 11px; color: var(--maroon); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; font-weight: 600; }
    .team-card .area { font-size: 11px; color: var(--muted-light); }
    .team-card .contact-link { display: inline-block; margin-top: 8px; font-size: 11px; color: var(--maroon); text-decoration: none; font-weight: 600; }
    .team-card .contact-link:hover { color: var(--gold); }

    /* DEVELOPMENT IDEA SESSION */
    #idea-session { background: var(--cream); padding-bottom: 100px; }
    .idea-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
    .idea-sample-grid { display: flex; flex-direction: column; gap: 14px; }
    .idea-sample-card { display: flex; align-items: flex-start; gap: 14px; background: var(--white); border-radius: 12px; padding: 1rem 1.2rem; border: 1px solid rgba(122,30,44,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
    .idea-sample-card strong { font-size: 14px; color: var(--ink); display: block; margin-bottom: 2px; }
    .idea-sample-card p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
    .isc-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .isc-icon i { font-size: 18px; color: var(--gold); }

    .idea-form-card { background: var(--white); border-radius: 16px; padding: 1.8rem 2rem; border: 1px solid rgba(122,30,44,0.08); box-shadow: 0 8px 30px rgba(122,30,44,0.06); }
    .if-row { margin-bottom: 16px; }
    .if-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .if-group label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted-light); margin-bottom: 5px; }
    .if-group input, .if-group select, .if-group textarea { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--ink); outline: none; background: var(--cream); box-sizing: border-box; transition: border-color 0.2s; }
    .if-group input:focus, .if-group select:focus, .if-group textarea:focus { border-color: var(--maroon); background: var(--white); box-shadow: 0 0 0 3px rgba(122,30,44,0.08); }
    .if-group textarea { resize: vertical; min-height: 72px; }
    .if-error { background: #FEF0F0; color: #c0392b; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
    .idea-submit-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); color: var(--white); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.25s; }
    .idea-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(122,30,44,0.25); }
    .idea-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
    .idea-form-success { text-align: center; padding: 2rem 1rem; }
    .idea-form-success .ifs-icon { font-size: 48px; color: var(--success); margin-bottom: 1rem; }
    .idea-form-success h4 { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
    .idea-form-success p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 360px; margin: 0 auto; }

    @media (max-width: 768px) {
      .idea-layout { grid-template-columns: 1fr; gap: 2rem; }
      .if-2col { grid-template-columns: 1fr; gap: 0; }
      .idea-form-card { padding: 1.5rem; }
    }

    /* APP BANNER — Compact */
    #app-banner-compact { background: var(--navy); padding: 24px 0; border-top: 1px solid rgba(212,175,55,0.1); }
    .abc-inner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
    .abc-icon { font-size: 28px; line-height: 1; }
    .abc-text { display: flex; flex-direction: column; gap: 2px; text-align: center; }
    .abc-text strong { font-size: 14px; color: var(--gold); font-weight: 700; }
    .abc-text span { font-size: 12px; color: rgba(255,255,255,0.5); }

    /* DEVELOPER CREDIT */
    #dev-credit { background: var(--navy-dark); padding: 36px 0; border-top: 1px solid rgba(212,175,55,0.08); }
    .dc-inner { text-align: center; }
    .dc-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); background: rgba(212,175,55,0.1); padding: 4px 14px; border-radius: 20px; margin-bottom: 1rem; }
    .dc-main { margin-bottom: 0.5rem; }
    .dc-label { font-size: 13px; color: rgba(255,255,255,0.5); }
    .dc-name { font-size: 20px; color: var(--gold); font-weight: 800; letter-spacing: 1px; margin-left: 4px; }
    .dc-desc { font-size: 12px; color: rgba(255,255,255,0.35); max-width: 400px; margin: 0 auto 1rem; line-height: 1.6; }
    .dc-contacts { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
    .dc-contacts a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
    .dc-contacts a i { color: var(--gold); font-size: 13px; }
    .dc-contacts a:hover { color: var(--gold); }

    /* PRESS STRIP */
    #press { background: var(--warm-white); padding: 50px 0; }
    .press-inner { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
    .press-inner span { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--muted-light); font-weight: 600; }
    .press-logo { font-size: 20px; font-weight: 700; color: var(--muted-light); opacity: 0.5; transition: opacity 0.2s; }
    .press-logo:hover { opacity: 0.8; }

    /* CTA BANNER */
    #cta-banner { background: linear-gradient(135deg, var(--maroon-dark) 0%, var(--maroon) 50%, var(--maroon-light) 100%); position: relative; overflow: hidden; padding: 80px 0; }
    #cta-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-55deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 10px, rgba(0,0,0,0.04) 10px, rgba(0,0,0,0.04) 11px); }
    .cta-inner { text-align: center; position: relative; z-index: 1; }
    .cta-inner .eyebrow { color: var(--gold); justify-content: center; }
    .cta-inner .eyebrow::before { background: var(--gold); }
    .cta-inner h2 { font-family: 'DM Sans', sans-serif; font-size: clamp(44px, 6vw, 72px); font-weight: 700; color: var(--white); line-height: 1.05; margin-bottom: 1.2rem; }
    .cta-inner h2 span { color: var(--gold); }
    .cta-inner p { font-size: 15px; color: rgba(255,255,255,0.7); max-width: 500px; margin: 0 auto 2.5rem; line-height: 1.7; }
    .cta-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
    .cta-btn-main { display: inline-flex; align-items: center; gap: 10px; padding: 15px 36px; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 15px; border-radius: 6px; text-decoration: none; transition: all 0.2s; }
    .cta-btn-main:hover { background: var(--gold-light); transform: translateY(-2px); }
    .cta-btn-sec { display: inline-flex; align-items: center; gap: 10px; padding: 15px 36px; border: 2px solid rgba(255,255,255,0.35); color: var(--white); font-weight: 600; font-size: 15px; border-radius: 6px; text-decoration: none; transition: all 0.2s; }
    .cta-btn-sec:hover { border-color: var(--gold); color: var(--gold); background: rgba(255,255,255,0.06); }
    .cta-note { margin-top: 1.5rem; font-size: 12px; color: rgba(255,255,255,0.4); }

    /* BADGE + MAP */
    .tvk-badge { display: inline-flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(122,30,44,0.12); border-radius: 8px; padding: 10px 16px; margin-top: 1.5rem; font-size: 12px; color: var(--muted); }
    .tvk-badge i { color: var(--maroon); font-size: 18px; }
    .map-wrap { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); margin-top: 1.5rem; }

    /* FOOTER */
    footer { background: var(--navy); padding: 60px 0 30px; border-top: 3px solid var(--maroon); }
    .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; margin-bottom: 3rem; }
    .footer-brand .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; text-decoration: none; }
    .footer-brand .logo img { height: 36px; width: auto; }
    .footer-brand p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.75; max-width: 280px; margin-bottom: 1.2rem; }
    .footer-brand .tamil-tag { display: inline-flex; align-items: center; gap: 8px; font-family: 'Tiro Tamil', serif; font-size: 14px; color: rgba(212,175,55,0.6); font-style: italic; }
    .footer-brand .tvk-flag { width: 24px; height: auto; }
    .footer-col h5 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1.2rem; }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
    .footer-col ul li a:hover { color: var(--white); }
    .footer-contact h5 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 1.2rem; }
    .contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 12px; line-height: 1.6; }
    .contact-item i { color: var(--gold); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
    .social-row { display: flex; gap: 10px; margin-top: 1.5rem; }
    .soc { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); font-size: 15px; text-decoration: none; transition: all 0.2s; }
    .soc:hover { border-color: var(--gold); color: var(--gold); }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.5rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .footer-bottom p { font-size: 12px; color: rgba(255,255,255,0.25); }
    .footer-bottom .bottom-links { display: flex; gap: 1.5rem; }
    .footer-bottom .bottom-links a { font-size: 12px; color: rgba(255,255,255,0.25); text-decoration: none; }
    .footer-bottom .bottom-links a:hover { color: rgba(255,255,255,0.5); }

    /* BACK TO TOP */
    #back-to-top { position: fixed; bottom: 90px; right: 24px; z-index: 999; width: 44px; height: 44px; border-radius: 50%; background: var(--maroon); color: var(--gold); border: 2px solid var(--gold); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s; }
    #back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
    #back-to-top:hover { background: var(--gold); color: var(--ink); }

    .stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

    /* LEADER — Chief Minister of Tamil Nadu */
    #leader-cm { background: linear-gradient(135deg, #0d0d1a 0%, #1a1a2e 50%, #0d0d1a 100%); padding: 80px 0; position: relative; overflow: hidden; }
    #leader-cm::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); }
    #leader-cm::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--gold), transparent, var(--gold)); }
    #leader-cm .section-header .section-h2 { color: var(--white); }
    #leader-cm .section-header .section-h2 span { color: var(--gold); }

    .cm-grid { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem; align-items: start; margin-top: 2.5rem; }

    /* ─── CM Photo Card ─── */
    .cm-card { background: rgba(13,13,26,0.92); border-radius: 20px; overflow: hidden; border: 1px solid rgba(212,175,55,0.15); }
    @supports (backdrop-filter: blur(12px)) { .cm-card { background: rgba(255,255,255,0.04); backdrop-filter: blur(12px); } }
    .cm-card-top { height: 4px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); }
    .cm-card-body { padding: 1.5rem 1.5rem 1.8rem; text-align: center; }
    .cm-photo-frame { width: 240px; height: 320px; border-radius: 12px; overflow: hidden; margin: 0 auto 1.2rem; border: 3px solid var(--gold); box-shadow: 0 8px 32px rgba(212,175,55,0.25), 0 0 60px rgba(212,175,55,0.08); display: block; }
    .cm-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cm-tag { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 5px 14px; border-radius: 4px; margin-bottom: 0.8rem; text-transform: uppercase; }
    .cm-name { font-family: 'DM Sans', sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; color: var(--white); margin-bottom: 0.3rem; line-height: 1.1; }
    .cm-role { font-size: 12px; color: var(--gold); font-weight: 600; margin-bottom: 0.4rem; line-height: 1.4; text-shadow: 0 1px 2px rgba(212,175,55,0.15); }
    .cm-party { font-size: 10px; color: rgba(255,255,255,0.45); font-weight: 500; letter-spacing: 0.5px; }

    /* ─── CM Info ─── */
    .cm-info { min-width: 0; }
    .cm-bio { font-size: 13px; color: rgba(255,255,255,0.72); line-height: 1.8; margin-bottom: 1rem; }
    .cm-quote { font-family: 'Tiro Tamil', serif; font-style: italic; font-size: 14px; color: var(--gold); padding: 1rem 1.2rem; background: rgba(212,175,55,0.06); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; margin-bottom: 1rem; line-height: 1.6; }
    .cm-focus-tag { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(212,175,55,0.5); margin-bottom: 0.6rem; }
    .cm-focus-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
    .cm-focus-item { font-size: 11px; font-weight: 600; color: var(--gold-light); background: rgba(212,175,55,0.08); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(212,175,55,0.15); }
    .cm-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 0.5rem; }
    .cm-stat { background: rgba(255,255,255,0.04); border-radius: 12px; padding: 14px 12px; text-align: center; border: 1px solid rgba(212,175,55,0.1); }
    .cm-stat-num { display: block; font-size: 16px; font-weight: 700; color: var(--gold); line-height: 1.3; }
    .cm-stat-lbl { display: block; font-size: 10px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; }

    /* MUTHAL SEVAGAN — MLA Profile (CM-style layout, light theme) */
    #muthal-sevagan { background: linear-gradient(135deg, var(--cream) 0%, var(--warm-white) 100%); padding: 80px 0; position: relative; }
    #muthal-sevagan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon)); }

    .ms-grid-new { display: grid; grid-template-columns: 4fr 8fr; gap: 3rem; align-items: start; margin-top: 2.5rem; }

    /* ─── MLA Photo Card (same as CM card but light) ─── */
    .ms-card { background: var(--white); border-radius: 20px; overflow: hidden; border: 1px solid rgba(212,175,55,0.15); box-shadow: 0 15px 50px rgba(0,0,0,0.06); }
    .ms-card-top { height: 6px; background: linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon)); }
    .ms-card-body { padding: 1.5rem 1.5rem 1.8rem; text-align: center; }
    .ms-photo-frame { width: 260px; height: 290px; border-radius: 12px; overflow: hidden; margin: 0 auto 1.2rem; border: 3px solid var(--maroon); box-shadow: 0 8px 32px rgba(122,30,44,0.18), 0 0 40px rgba(212,175,55,0.06); display: block; }
    .ms-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ms-tag { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, var(--gold), var(--gold-light)); color: var(--navy); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; padding: 5px 14px; border-radius: 4px; margin-bottom: 0.8rem; text-transform: uppercase; }
    .ms-name { font-family: 'DM Sans', sans-serif; font-size: clamp(22px, 2.5vw, 32px); font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; line-height: 1.1; }
    .ms-role { font-size: 14px; color: var(--maroon); font-weight: 700; margin-bottom: 0.8rem; line-height: 1.4; text-shadow: 0 1px 2px rgba(122,30,44,0.15); }
    .ms-degrees { font-size: 11px; color: var(--navy); font-weight: 600; line-height: 1.6; margin-bottom: 0.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(212,175,55,0.2); text-shadow: 0 1px 1px rgba(0,0,0,0.06); }
    .ms-consultant { font-size: 11px; color: var(--gold-dark); font-weight: 600; margin-bottom: 0.6rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(212,175,55,0.2); line-height: 1.4; }
    .ms-socials { display: flex; gap: 8px; margin: 0.6rem 0 0; justify-content: center; }
    .ms-social-link { width: 32px; height: 32px; border-radius: 50%; background: var(--cream); border: 1px solid rgba(212,175,55,0.2); display: flex; align-items: center; justify-content: center; color: var(--maroon); font-size: 13px; text-decoration: none; transition: all 0.2s; }
    .ms-social-link:hover { background: var(--maroon); color: var(--gold); transform: translateY(-2px); }

    /* ─── MLA Info (right side) ─── */
    .ms-info { min-width: 0; }
    .ms-bio { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 1rem; }
    .ms-vision { font-family: 'Tiro Tamil', serif; font-size: 14px; color: var(--maroon); font-style: italic; padding: 1rem 1.2rem; background: rgba(212,175,55,0.08); border-radius: 10px; margin-bottom: 1rem; line-height: 1.6; }
    .ms-focus-tag { font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted-light); margin-bottom: 0.6rem; }
    .ms-focus-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }
    .ms-focus-item { font-size: 12px; font-weight: 600; color: var(--navy); background: var(--cream); padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(212,175,55,0.2); }
    .ms-quote { font-family: 'Tiro Tamil', serif; font-style: italic; font-size: 13px; color: var(--maroon); padding: 1rem 1.2rem; background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(212,175,55,0.03)); border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; margin-bottom: 1.2rem; line-height: 1.6; }
    .ms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 0.5rem; }
    .ms-stat { background: var(--white); border-radius: 12px; padding: 14px 12px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border: 1px solid rgba(212,175,55,0.12); }
    .ms-stat-num { display: block; font-size: 22px; font-weight: 800; color: var(--maroon); line-height: 1.2; }
    .ms-stat-lbl { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 3px; }

    /* ─── Lower area (Instagram Reels + Proof of Work) ─── */
    .ms-lower { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
    .ms-lower-col { min-width: 0; }

    /* ─── Latest Activities ─── */
    .ms-activities { min-width: 0; }
    .ms-acts-header { margin-bottom: 1.5rem; }
    .ms-acts-heading { font-family: 'DM Sans', sans-serif; font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; color: var(--navy); line-height: 1.2; }
    .ms-acts-heading span { color: var(--maroon); }
    .ms-acts-sub { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.6; }

    /* Featured Update */
    .ms-featured { background: var(--white); border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.04); margin-bottom: 1.2rem; border-left: 4px solid var(--maroon); }
    .ms-featured-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 0.6rem; flex-wrap: wrap; }
    .ms-featured-tag { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--white); background: var(--maroon); padding: 3px 10px; border-radius: 4px; }
    .ms-featured-date { font-size: 11px; color: var(--muted-light); }
    .ms-featured-title { font-size: clamp(16px, 1.5vw, 20px); font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 0.4rem; }
    .ms-featured-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 0.8rem; }
    .ms-featured-cta { font-size: 12px; font-weight: 700; color: var(--maroon); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.2s; }
    .ms-featured-cta:hover { gap: 10px; }

    /* Activity List */
    .ms-activity-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 1.5rem; }

    /* Social Media Platform Cards */
    .ms-social-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1rem; }
    .ms-social-card { background: var(--white); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
    .ms-social-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
    .ms-social-card-head { display: flex; align-items: center; gap: 10px; padding: 1rem 1rem 0.6rem; }
    .ms-social-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 16px; flex-shrink: 0; }
    .ms-social-icon.insta { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .ms-social-icon.fb { background: #1877F2; }
    .ms-social-icon.x { background: #000; }
    .ms-social-icon.yt { background: #FF0000; }
    .ms-social-icon.in { background: #0A66C2; }
    .ms-social-icon.wa { background: #25D366; }
    .ms-social-icon.tg { background: #0088CC; }
    .ms-social-name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.2; }
    .ms-social-handle { font-size: 10px; color: var(--muted-light); line-height: 1.2; }
    .ms-social-preview { position: relative; overflow: hidden; aspect-ratio: 1; margin: 0 0.8rem; border-radius: 8px; }
    .ms-social-preview-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
    .ms-social-preview-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem 0.7rem; background: linear-gradient(transparent, rgba(0,0,0,0.6)); display: flex; gap: 1rem; font-size: 11px; color: var(--white); }
    .ms-social-preview-overlay span { display: flex; align-items: center; gap: 4px; }
    .ms-social-stats { padding: 0.6rem 1rem 0; font-size: 11px; color: var(--muted-light); }
    .ms-social-stats i { margin-right: 4px; }
    .ms-social-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0.6rem 0.8rem 0.8rem; padding: 8px; border-radius: 8px; color: var(--white); font-size: 12px; font-weight: 700; text-decoration: none; transition: opacity 0.2s; }
    .ms-social-btn.insta { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    .ms-social-btn.fb { background: #1877F2; }
    .ms-social-btn.x { background: #000; }
    .ms-social-btn.yt { background: #FF0000; }
    .ms-social-btn.in { background: #0A66C2; }
    .ms-social-btn.wa { background: #25D366; }
    .ms-social-btn.tg { background: #0088CC; }
    .ms-social-btn:hover { opacity: 0.85; }

    /* Instagram Reels Showcase */
    .ir-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
    .ir-header-left { display: flex; align-items: flex-start; gap: 14px; }
    .ir-header-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex-shrink: 0; }
    .ir-heading { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; }
    .ir-subtitle { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; max-width: 400px; }
    .ir-profile-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--maroon); color: #fff; font-size: 13px; font-weight: 600; border-radius: 50px; text-decoration: none; transition: background 0.2s; white-space: nowrap; }
    .ir-profile-btn:hover { background: var(--maroon-dark); }
    .ir-divider { height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin-bottom: 1.8rem; border-radius: 2px; }
    .ir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
    .ir-card { text-decoration: none; display: block; border-radius: 18px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; background: var(--white); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
    .ir-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
    .ir-card-inner { display: flex; flex-direction: column; }
    .ir-thumb { position: relative; aspect-ratio: 9/16; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: space-between; }
    .ir-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.6) 100%); pointer-events: none; }
    .ir-top-badge { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px; margin: 10px; width: fit-content; }
    .ir-top-badge i { font-size: 13px; }
    .ir-play-btn { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; margin: auto; width: 52px; height: 52px; background: rgba(255,255,255,0.9); border-radius: 50%; font-size: 20px; color: var(--maroon); transition: transform 0.3s ease, background 0.3s ease; }
    .ir-card:hover .ir-play-btn { transform: scale(1.12); background: #fff; }
    .ir-play-btn i { margin-left: 3px; }
    .ir-bottom-info { position: relative; z-index: 2; padding: 0 12px 12px; }
    .ir-reel-title { font-size: 13px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.4); line-height: 1.3; }
    .ir-reel-loc { font-size: 11px; color: rgba(255,255,255,0.8); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
    .ir-reel-loc i { font-size: 9px; }
    .ir-stats-bar { display: flex; align-items: center; justify-content: space-around; padding: 10px 12px; background: var(--white); border-top: 1px solid rgba(0,0,0,0.04); }
    .ir-stats-bar span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); font-weight: 500; }
    .ir-stats-bar span i { font-size: 12px; color: var(--gold); }
    .ir-empty { grid-column: 1/-1; text-align: center; padding: 2.5rem; color: var(--muted); font-size: 14px; background: var(--cream); border-radius: 14px; }
    .ir-footer { text-align: center; margin-top: 2rem; }
    .ir-view-all { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; background: var(--maroon); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.3s; }
    .ir-view-all:hover { background: var(--maroon-dark); gap: 14px; }

    /* Unified Follow Banner */
    .ms-social-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, var(--navy-dark), var(--navy)); border-radius: 14px; padding: 1rem 1.5rem; }
    .ms-social-banner-text { display: flex; flex-direction: column; }
    .ms-social-banner-label { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
    .ms-social-banner-desc { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }
    .ms-social-banner-links { display: flex; gap: 8px; }
    .ms-banner-link { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 15px; text-decoration: none; transition: transform 0.2s; }
    .ms-banner-link:hover { transform: scale(1.1); }
    .ms-recent-head { margin-bottom: 1.2rem; }
    .ms-recent-tag { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); background: rgba(212,175,55,0.1); padding: 4px 12px; border-radius: 4px; margin-bottom: 0.4rem; }
    .ms-recent-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
    .la-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
    .la-card { background: var(--white); border-radius: 10px; padding: 1rem 1.1rem; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 2px 8px rgba(0,0,0,0.03); transition: all 0.25s; }
    .la-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.06); border-color: var(--gold); }
    .la-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
    .la-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--maroon); background: rgba(122,30,44,0.06); padding: 2px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 4px; }
    .la-emoji { font-size: 14px; }
    .la-date { font-size: 10px; color: var(--muted-light); white-space: nowrap; }
    .la-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .la-meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--muted-light); }
    .la-meta i { color: var(--gold); margin-right: 4px; font-size: 10px; }
    .la-ref { font-family: monospace; font-size: 10px; color: rgba(0,0,0,0.15); letter-spacing: 0.5px; }
    @media (max-width: 480px) { .la-grid { grid-template-columns: 1fr; } }

    /* ── Chatbot ── */
    #chatbot { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: 'DM Sans', sans-serif; }
    .cb-btn { width: 56px; height: 56px; border-radius: 50%; background: var(--maroon); border: 2px solid var(--gold); color: var(--gold); font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(122,30,44,0.35); transition: transform 0.2s; animation: cb-pulse 2s ease-in-out infinite; }
    .cb-btn:hover { transform: scale(1.08); animation: none; }
    @keyframes cb-pulse { 0%,100% { box-shadow: 0 4px 20px rgba(122,30,44,0.35); } 50% { box-shadow: 0 4px 30px rgba(122,30,44,0.55); } }
    .cb-panel { position: absolute; bottom: 70px; right: 0; width: 340px; height: 460px; background: var(--white); border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); display: none; flex-direction: column; overflow: hidden; border: 1px solid rgba(212,175,55,0.15); }
    .cb-panel.open { display: flex; }
    .cb-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--maroon); color: var(--white); font-size: 15px; font-weight: 700; }
    .cb-head i { color: var(--gold); margin-right: 8px; }
    .cb-close { background: none; border: none; color: rgba(255,255,255,0.7); font-size: 22px; cursor: pointer; padding: 0 4px; }
    .cb-close:hover { color: var(--white); }
    .cb-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
    .cb-msgs::-webkit-scrollbar { width: 4px; }
    .cb-msgs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 99px; }
    .cb-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-wrap: break-word; animation: cb-fade 0.3s ease; }
    @keyframes cb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .cb-bot { background: var(--cream); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
    .cb-user { background: var(--maroon); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
    .cb-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid rgba(0,0,0,0.06); }
    .cb-input { flex: 1; padding: 10px 14px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 10px; font-size: 13px; outline: none; font-family: 'DM Sans', sans-serif; }
    .cb-input:focus { border-color: var(--maroon); }
    .cb-send { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--maroon); color: var(--white); font-size: 15px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .cb-send:hover { background: var(--maroon-dark); }

    /* Chat Chips */
    .cb-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0; animation: cb-fade 0.3s ease; }
    .cb-chip { padding: 7px 14px; border: 1.5px solid var(--maroon); border-radius: 20px; background: var(--white); color: var(--maroon); font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: 'DM Sans', sans-serif; white-space: nowrap; }
    .cb-chip:hover { background: var(--maroon); color: var(--white); }

    /* ── FIELD UPDATES — Homepage Preview ── */
    #field-updates { position: relative; }
    #field-updates::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon)); }

    .fu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; max-width: 1080px; margin: 0 auto; }
    .fu-item { }
    .fu-img { position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 1.2rem; aspect-ratio: 16/10; }
    .fu-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
    .fu-item:hover .fu-img img { transform: scale(1.05); }
    .fu-cat { font-size: 11px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.4rem; }
    .fu-title { font-size: 17px; font-weight: 700; color: var(--maroon); line-height: 1.3; margin-bottom: 0.4rem; }
    .fu-summary { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 0.7rem; }
    .fu-line { width: 32px; height: 2px; background: var(--gold); margin-bottom: 0.6rem; }
    .fu-date { font-size: 12px; color: var(--muted-light); display: inline-flex; align-items: center; gap: 5px; }
    .fu-date i { color: var(--gold); font-size: 11px; }

    .fu-view-all { display: inline-flex; align-items: center; gap: 10px; padding: 14px 36px; border: 2px solid var(--maroon); color: var(--maroon); font-size: 14px; font-weight: 700; text-decoration: none; border-radius: 50px; transition: all 0.3s; letter-spacing: 0.5px; text-transform: uppercase; }
    .fu-view-all:hover { background: var(--maroon); color: var(--white); gap: 14px; }

    /* Share button on field update images */
    .fu-img { position: relative; }
    .fu-share-btn { position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; border:none; border-radius:50%; background:rgba(255,255,255,0.9); color:var(--maroon); font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.2s; box-shadow:0 2px 8px rgba(0,0,0,0.15); }
    .fu-share-btn:hover { background:var(--maroon); color:#fff; transform:scale(1.08); }
    .fu-share-drop { position:absolute; top:54px; right:12px; z-index:10; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,0.18); padding:6px; display:none; flex-direction:column; gap:2px; min-width:160px; }
    .fu-share-drop.show { display:flex; }
    .fu-share-drop button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:none; background:transparent; color:var(--ink); font-size:13px; font-weight:500; cursor:pointer; border-radius:8px; text-align:left; transition:background 0.15s; font-family:'DM Sans',sans-serif; }
    .fu-share-drop button:hover { background:#f5f0eb; }
    .fu-share-drop button i { width:18px; text-align:center; color:var(--maroon); font-size:14px; }
    .fu-share-drop button:nth-child(2) i { color:#25D366; }

    /* BECOME A VOLUNTEER */
    #become-volunteer { background: var(--warm-white); padding: 80px 0; }
    .become-vol-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: center; }
    .become-vol-desc { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 1.5rem; }
    .become-vol-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
    .become-vol-list li { font-size: 14px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
    .become-vol-list li i { color: var(--success); font-size: 16px; }
    .become-vol-card { background: var(--cream); border: 1px solid rgba(212,175,55,0.2); border-radius: 16px; padding: 2.5rem 2rem; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.06); }
    .become-vol-icon { font-size: 48px; margin-bottom: 1rem; }
    .become-vol-card h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin-bottom: 0.8rem; }
    .become-vol-card p { font-size: 14px; color: var(--muted); line-height: 1.7; }

    /* JOB SEEKER */
    #job-seeker { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); padding: 80px 0; }
    .jobseeker-inner { text-align: center; }
    .jobseeker-desc { font-size: 15px; color: rgba(255,255,255,0.6); max-width: 600px; margin: 1rem auto 2.5rem; line-height: 1.75; }
    .jobseeker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 1rem; }
    .jobseeker-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 2rem; text-align: center; transition: all 0.3s; }
    .jobseeker-card:hover { background: rgba(255,255,255,0.08); transform: translateY(-4px); }
    .jobseeker-icon { font-size: 36px; margin-bottom: 1rem; }
    .jobseeker-card h4 { font-size: 16px; font-weight: 700; color: var(--gold); margin-bottom: 0.6rem; }
    .jobseeker-card p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; }

    @media (max-width: 1024px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .team-grid { grid-template-columns: repeat(3, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .resolved-grid { grid-template-columns: repeat(2, 1fr); }
      .dir-grid { grid-template-columns: repeat(3, 1fr); }
      .mla-strip { grid-template-columns: repeat(2, 1fr); }
      .hero-inner { grid-template-columns: 1fr 1fr; gap: 1rem; }
      .map-card.c1 { left: -2%; }
      .map-card.c2 { left: -4%; }
      .map-card.c3 { right: -2%; }
      .topbar-left a:nth-child(3) { display: none; }
      .cm-grid { grid-template-columns: 1fr; gap: 2rem; }
      .ms-grid-new { grid-template-columns: 1fr; gap: 2rem; }
      .ms-photo-frame { width: 220px; height: 250px; }
      .ir-grid { grid-template-columns: repeat(2, 1fr); }
      .become-vol-inner { grid-template-columns: 1fr; gap: 2.5rem; }
      .jobseeker-grid { grid-template-columns: repeat(2, 1fr); }
      .fu-grid { gap: 1.5rem; }
    }
    /* ── OPPORTUNITY HUB — Unified 3-Card Section ── */
    .opp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 960px; margin: 0 auto; }
    .opp-card { background: var(--white); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; align-items: center; }
    .opp-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
    .opp-icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 1.2rem; }
    .opp-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; color: var(--ink); }
    .opp-card p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 1.5rem; flex: 1; }
    .opp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; background: var(--maroon); color: var(--white); border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background 0.2s; }
    .opp-btn:hover { background: var(--maroon-dark); }

    /* ── Nav Language Toggle ── */
    /* ── Notification Center ── */
    .notif-bell-wrap { position:relative; display:flex; align-items:center; }
    .notif-bell { background:none; border:none; color:var(--gold); font-size:18px; cursor:pointer; padding:6px 10px; position:relative; transition:color 0.2s; }
    .notif-bell:hover { color:var(--white); }
    .notif-badge { position:absolute; top:2px; right:4px; background:var(--maroon); color:#fff; font-size:9px; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
    .notif-panel { position:absolute; top:calc(100% + 10px); right:0; width:360px; max-height:440px; background:var(--white); border:1px solid rgba(0,0,0,0.08); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,0.12); display:none; z-index:1000; overflow:hidden; }
    .notif-panel.open { display:flex; flex-direction:column; }
    .notif-panel-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid rgba(0,0,0,0.06); }
    .notif-panel-header h4 { font-size:14px; font-weight:700; color:var(--ink); margin:0; }
    .notif-mark-read { background:none; border:none; color:var(--maroon); font-size:11px; font-weight:600; cursor:pointer; padding:4px 8px; border-radius:4px; }
    .notif-mark-read:hover { background:rgba(122,30,44,0.06); }
    .notif-login { padding:16px 18px; }
    .notif-login p { font-size:12px; color:var(--muted); margin:0 0 10px 0; }
    .notif-input-wrap { display:flex; gap:8px; }
    .notif-input-wrap input { flex:1; padding:10px 14px; border:1.5px solid rgba(0,0,0,0.1); border-radius:8px; font-size:13px; outline:none; font-family:'DM Sans',sans-serif; }
    .notif-input-wrap input:focus { border-color:var(--maroon); }
    .notif-input-wrap button { width:40px; height:40px; background:var(--maroon); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:14px; }
    .notif-input-wrap button:hover { background:var(--maroon-light); }
    .notif-list { flex:1; overflow-y:auto; padding:8px 0; }
    .notif-item { display:flex; gap:12px; padding:12px 18px; border-bottom:1px solid rgba(0,0,0,0.04); cursor:pointer; transition:background 0.15s; }
    .notif-item:hover { background:rgba(0,0,0,0.02); }
    .notif-item.unread { background:rgba(122,30,44,0.04); }
    .notif-item-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
    .notif-item-icon.approval { background:#E8F5E9; color:#2e7d32; }
    .notif-item-icon.rejection { background:#FEF0F0; color:#c0392b; }
    .notif-item-icon.update { background:#E3F2FD; color:#1565c0; }
    .notif-item-icon.info { background:#FFF3E0; color:#e65100; }
    .notif-item-icon.job_match { background:#F3E5F5; color:#7b1fa2; }
    .notif-item-icon.status_change { background:#E8F5E9; color:#2e7d32; }
    .notif-item-content { flex:1; min-width:0; }
    .notif-item-title { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:2px; }
    .notif-item-msg { font-size:12px; color:var(--muted); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
    .notif-item-time { font-size:10px; color:rgba(0,0,0,0.35); margin-top:4px; }
    .notif-empty { padding:32px 18px; text-align:center; }
    .notif-empty i { font-size:32px; color:rgba(0,0,0,0.12); margin-bottom:10px; }
    .notif-empty p { font-size:13px; color:var(--muted); margin:0; }
    .notif-loading { padding:32px 18px; text-align:center; color:var(--muted); font-size:13px; }
    .notif-mobile-bar { padding:10px 18px; background:rgba(0,0,0,0.02); border-bottom:1px solid rgba(0,0,0,0.04); display:flex; align-items:center; justify-content:space-between; }
    .notif-mobile-bar span { font-size:12px; color:var(--muted); }
    .notif-mobile-bar button { background:none; border:none; color:var(--maroon); font-size:11px; font-weight:600; cursor:pointer; }

    /* ── File Upload ── */
    .file-upload { position: relative; }
    .file-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; height: 100%; width: 100%; }
    .upload-box { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 2px dashed rgba(0,0,0,0.12); border-radius: 10px; font-size: 13px; color: var(--muted); transition: border-color 0.2s, background 0.2s; background: var(--cream); }
    .file-upload input[type="file"]:hover + .upload-box, .file-upload input[type="file"]:focus + .upload-box { border-color: var(--maroon); background: var(--cream); }
    .file-upload.has-file .upload-box { border-color: var(--maroon); background: #f0f8f0; color: var(--ink); }

    /* ── Sub Village Dropdown ── */
    #sub-village-group { margin-top: -8px; margin-bottom: 16px; }

    @media (max-width: 768px) {
      .nav-links { display: none; }
      .nav-cta { display: none; }
      .notif-bell-wrap { display: none; }
      .hamburger { display: flex; }
      .topbar-left a:nth-child(2), .topbar-left a:nth-child(3) { display: none; }
      .topbar-right .font-size-btn { display: none; }
      .topbar-right .divider:first-of-type { display: none; }
      #nav-topbar { padding: 0 1.2rem; }
      #mobile-nav { top: 100px; }
      .hero-map-side { display: none; }
      .hero-inner { grid-template-columns: 1fr; padding: 2rem 1.5rem 3rem; min-height: auto; }
      .hero-content { text-align: center; }
      .hero-eyebrow { margin: 0 auto 1.5rem; }
      .hero-desc { max-width: 100%; }
      .hero-actions { justify-content: center; }
      .hero-stats { justify-content: center; gap: 1.5rem; }
      .hero-tag-row { justify-content: center; }
      .about-grid { grid-template-columns: 1fr; }
      .leaders-grid { grid-template-columns: 1fr; }
      .cm-grid { grid-template-columns: 1fr; gap: 1.5rem; }
      #leader-cm { padding: 50px 0; }
      .cm-card { background: rgba(13,13,26,0.95); backdrop-filter: none; -webkit-backdrop-filter: none; }
      .cm-card-body { padding: 1.2rem 1rem; }
      .cm-photo-frame { width: 150px; height: 200px; margin-bottom: 0.8rem; border-width: 2px; }
      .cm-name { font-size: 20px; }
      .cm-role { font-size: 11px; }
      .cm-stats { gap: 8px; }
      .cm-stat { background: rgba(255,255,255,0.06); padding: 10px 8px; }
      .cm-stat-num { font-size: 14px; }
      .cm-bio { font-size: 12px; line-height: 1.7; }
      .cm-quote { font-size: 13px; padding: 0.8rem 1rem; background: rgba(212,175,55,0.08); }
      .cm-focus-item { font-size: 10px; padding: 4px 10px; }
      .leader-card:first-child { grid-column: span 1; }
      .steps-row { flex-direction: column; gap: 2rem; }
      .steps-row::before { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .form-layout { grid-template-columns: 1fr; gap: 1.5rem; }
      .form-layout .col-6 { grid-column: span 1; }
      .form-row { grid-template-columns: 1fr; }
      .testi-slide { grid-template-columns: 1fr; }
      .team-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-bottom { flex-direction: column; text-align: center; }
      #navbar { padding: 0 1.2rem; }
      .container { padding: 0 1.2rem; }
      .resolved-grid { grid-template-columns: 1fr; }
      .opp-grid { grid-template-columns: 1fr; max-width: 400px; }
      .dir-grid { grid-template-columns: repeat(2, 1fr); }
      .mla-strip { grid-template-columns: 1fr; }
      .testi-carousel { min-height: auto; }
      .testi-slide { position: relative; opacity: 1; pointer-events: auto; display: none; }
      .testi-slide.active { display: grid; }
      .press-inner { gap: 1.5rem; }
      .ir-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
      .ms-lower { grid-template-columns: 1fr; gap: 2rem; }
      .ms-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
      .fu-grid { grid-template-columns: 1fr; max-width: 480px; }
      #loader .loader-ring { width: 56px; height: 56px; border-width: 3px; }
      #loader p { font-size: 13px; letter-spacing: 2px; }
    }
    .form-group { margin-bottom: 22px; }
    .office-card { background: var(--white); border-radius: 16px; overflow: hidden; border: none; margin-top: 1.5rem; box-shadow: 0 8px 30px rgba(122,30,44,0.08); }
    .office-card-head { background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); color: var(--white); padding: 1.1rem 1.5rem; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: 0.5px; }
    .office-card-head i { color: var(--gold); font-size: 18px; }
    .office-card-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.2rem; }
    .office-row { display: flex; gap: 14px; align-items: flex-start; }
    .office-row i { width: 36px; height: 36px; border-radius: 10px; background: var(--cream); display: flex; align-items: center; justify-content: center; color: var(--maroon); font-size: 14px; flex-shrink: 0; }
    .office-row strong { font-size: 12px; color: var(--muted-light); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
    .office-row span, .office-row a { font-size: 13px; line-height: 1.5; }
    @media (max-width: 480px) {
      .team-grid { grid-template-columns: 1fr 1fr; }
      .cta-btns { flex-direction: column; align-items: center; }
      .dir-grid { grid-template-columns: 1fr; }
      .jobseeker-grid { grid-template-columns: 1fr; }
      #nav-topbar { display: none; }
      #navbar { top: 0; }
      #mobile-nav { top: 64px; }
      .notif-panel { width:300px; right:-20px; }
      .ir-grid { grid-template-columns: 1fr; max-width: 360px; margin-left: auto; margin-right: auto; }
      .ir-header { flex-direction: column; align-items: stretch; }
      .ir-header-icon { width: 40px; height: 40px; font-size: 20px; }
      .ir-profile-btn { align-self: flex-start; font-size: 12px; padding: 8px 16px; }
      .cb-panel { width: calc(100vw - 32px); height: 420px; right: -8px; }
      .cb-btn { width: 48px; height: 48px; font-size: 20px; }
      .fu-title { font-size: 16px; }
      .fu-body { padding: 1rem 1rem 1.2rem; }
      .cm-grid { gap: 1rem; }
      #leader-cm { padding: 36px 0; }
      .cm-card-body { padding: 1rem 0.8rem; }
      .cm-photo-frame { width: 120px; height: 160px; }
      .cm-name { font-size: 17px; }
      .cm-stats { gap: 6px; }
      .cm-stat { padding: 8px 6px; }
      .cm-stat-num { font-size: 13px; }
      .cm-bio { font-size: 11px; }
    }

/* ── Future Radhapuram Section ── */
#future-section.section-pad { padding: 80px 0; background: #F5F0EB; }
#future-section .future-eyebrow { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: #D4AF37; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
#future-section .future-eyebrow::before, #future-section .future-eyebrow::after { content: ''; width: 30px; height: 2px; background: #D4AF37; }
#future-section .future-heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(28px,4vw,48px); letter-spacing: 2px; margin-bottom: 8px; color: #222; }
#future-section .future-heading span { color: #7A1E2C; }
#future-section .future-subtitle { font-size: 14px; color: #888; max-width: 600px; margin: 0 auto 40px; line-height: 1.6; text-align: center; }

/* Vision Card */
#future-section .future-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; max-width: 1100px; margin: 0 auto; align-items: start; }
#future-section .future-vision-card { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); border-radius: 20px; padding: 2rem; color: #fff; position: sticky; top: 100px; overflow: hidden; }
#future-section .future-vision-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%); pointer-events: none; }
#future-section .future-vision-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 1.5rem; }
#future-section .future-vision-grid-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; background: rgba(255,255,255,0.06); border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); text-align: center; }
#future-section .future-vision-grid-item i { font-size: 22px; color: #D4AF37; }
#future-section .future-vision-grid-item span { font-size: 10px; color: rgba(255,255,255,0.6); line-height: 1.2; }
#future-section .future-vision-text { font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: #fff; }
#future-section .future-vision-text span { color: #D4AF37; }
#future-section .future-vision-desc { font-size: 13px; color: rgba(255,255,255,0.6); line-height: 1.6; }
#future-section .future-vision-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,175,55,0.15); color: #D4AF37; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-top: 1rem; }

/* Form */
#future-section .future-form-card { background: #fff; border-radius: 16px; padding: 1.8rem; box-shadow: 0 8px 30px rgba(0,0,0,0.05); }
#future-section .future-form-card h3 { font-size: 18px; font-weight: 700; color: #222; margin-bottom: 4px; }
#future-section .future-form-card p { font-size: 12px; color: #888; margin-bottom: 1.2rem; }
#future-section .future-form-card .fg { margin-bottom: 16px; }
#future-section .future-form-card .fg label { display: block; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 5px; }
#future-section .future-form-card .fg input,
#future-section .future-form-card .fg select,
#future-section .future-form-card .fg textarea { width: 100%; padding: 10px 14px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 13px; color: #222; background: #fff; outline: none; box-sizing: border-box; }
#future-section .future-form-card .fg input:focus,
#future-section .future-form-card .fg select:focus,
#future-section .future-form-card .fg textarea:focus { border-color: #7A1E2C; box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
#future-section .future-form-card .fg textarea { min-height: 80px; resize: vertical; }
#future-section .benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#future-section .benefits-grid label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(0,0,0,0.7); cursor: pointer; padding: 6px 10px; background: #f9f7f3; border: 1px solid rgba(0,0,0,0.06); border-radius: 6px; }
#future-section .benefits-grid label:hover { border-color: #D4AF37; }
#future-section .benefits-grid input[type="checkbox"] { width: auto; accent-color: #7A1E2C; }
#future-section .future-btn { width: 100%; padding: 13px; background: linear-gradient(135deg, #7A1E2C, #9A2E3C); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
#future-section .future-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(122,30,44,0.25); }
#future-section .future-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Preview */
#future-section .future-preview { max-width: 1100px; margin: 3rem auto 0; }
#future-section .future-preview h3 { font-size: 18px; font-weight: 700; text-align: center; margin-bottom: 1.2rem; color: #222; }
#future-section .future-preview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
#future-section .future-preview-card { background: #fff; border-radius: 12px; padding: 1.2rem; box-shadow: 0 4px 15px rgba(0,0,0,0.04); }
#future-section .future-preview-card:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
#future-section .future-preview-card .fp-icon { font-size: 28px; margin-bottom: 8px; }
#future-section .future-preview-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: #222; }
#future-section .future-preview-card p { font-size: 12px; color: #888; line-height: 1.5; }
#future-section .future-view-all { text-align: center; margin-top: 1.2rem; }
#future-section .future-view-all a { display: inline-flex; align-items: center; gap: 6px; color: #7A1E2C; font-weight: 700; font-size: 13px; text-decoration: none; padding: 10px 20px; border: 1.5px solid #7A1E2C; border-radius: 8px; }
#future-section .future-view-all a:hover { background: #7A1E2C; color: #fff; }

@media (max-width: 768px) {
  #future-section .future-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  #future-section .future-vision-card { position: static; }
  #future-section .future-preview-grid { grid-template-columns: 1fr; }
  #future-section .benefits-grid { grid-template-columns: 1fr; }
}

/* ── Mobile Overrides (must be last for specificity) ── */
@media (max-width: 768px) {
  .section-pad { padding: 60px 0; }
  .hero-h1 { font-size: clamp(28px, 9vw, 44px); }
  .hero-desc { font-size: 14px; }
  .btn-hero-primary, .btn-hero-secondary, .btn-hero-lang { padding: 11px 18px; font-size: 13px; }
  #navbar { height: 56px; }
  .nav-logo img { height: 36px; }
  .nav-logo-text .top { font-size: 16px; }
  .nav-logo-text .en { font-size: 9px; }
  .cm-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  #leader-cm { padding: 50px 0; }
  .cm-card { background: rgba(13,13,26,0.95); backdrop-filter: none; -webkit-backdrop-filter: none; border-width: 1px; }
  .cm-card-body { padding: 1.2rem 1rem; }
  .cm-photo-frame { width: 150px; height: 200px; margin-bottom: 0.8rem; border-width: 2px; }
  .cm-name { font-size: 20px; }
  .cm-role { font-size: 11px; }
  .cm-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cm-stat { background: rgba(255,255,255,0.06); padding: 10px 8px; }
  .cm-stat-num { font-size: 14px; }
  .cm-bio { font-size: 12px; line-height: 1.7; }
  .cm-quote { font-size: 13px; padding: 0.8rem 1rem; background: rgba(212,175,55,0.08); }
  .cm-focus-item { font-size: 10px; padding: 4px 10px; }
  .ms-grid-new { grid-template-columns: 1fr; gap: 1.5rem; }
  .ms-card-body { padding: 1rem; }
  .ms-photo-frame { width: 180px; height: 210px; }
  .ms-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ms-stat { padding: 10px 6px; }
  .ms-stat-num { font-size: 18px; }
  .ms-stat-lbl { font-size: 8px; }
  .ms-bio { font-size: 12px; }
  .ms-vision { font-size: 13px; padding: 0.8rem 1rem; }
  .ms-quote { font-size: 12px; padding: 0.8rem 1rem; }
  .ms-social-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ms-lower { gap: 1.5rem; }
  .testi-slide { inset: auto; }
  .testi-card { padding: 1.5rem; }
  .leaders-grid { gap: 20px; }
  .form-title { font-size: 22px; }
  .complaint-form { padding: 1.5rem; }
  .features-grid { gap: 14px; }
  .feature-card { padding: 1.5rem 1.2rem; }
  .mla-strip { gap: 10px; }
  .mla-stat { padding: 1rem 0.5rem; }
  .mla-stat .num { font-size: 24px; }
  .leader-card-top { padding: 1.5rem 1.5rem 0; }
  .leader-card-body { padding: 1.5rem 1.2rem 1.2rem; }
  .leader-name { font-size: 22px; }
  #cta-banner { padding: 50px 0; }
  .cta-inner h2 { font-size: clamp(28px, 8vw, 44px); }
  #back-to-top { bottom: 80px; right: 16px; width: 38px; height: 38px; font-size: 15px; }
  .cb-btn { width: 48px; height: 48px; font-size: 20px; }
  .cb-panel { width: calc(100vw - 32px); height: 380px; right: -16px; }
  #chatbot { bottom: 16px; right: 16px; }
  .leader-card { transform-style: flat; perspective: none; }
  .leader-card-inner { transform-style: flat; }
  .leader-card, .leader-card * { pointer-events: auto !important; }
  .cm-card, .ms-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .about-card-big .manifesto { font-size: 18px; }
  .stat-box .n { font-size: 26px; }
  .pillar { padding: 12px 16px; }
  .fu-title { font-size: 15px; }
  .step-num { width: 72px; height: 72px; font-size: 28px; }
  .step h4 { font-size: 14px; }
}
@media (max-width: 480px) {
  .section-pad { padding: 40px 0; }
  .hero-inner { padding: 1rem 1rem 2rem; }
  .hero-tag-row { gap: 6px; }
  .hero-tag { font-size: 11px; }
  .hero-actions { gap: 10px; }
  .about-grid { gap: 2rem; }
  .cm-grid { gap: 1rem; }
  #leader-cm { padding: 36px 0; }
  .cm-card-body { padding: 1rem 0.8rem; }
  .cm-photo-frame { width: 120px; height: 160px; }
  .cm-name { font-size: 17px; }
  .cm-stats { gap: 6px; }
  .cm-stat { padding: 8px 6px; }
  .cm-stat-num { font-size: 13px; }
  .ms-grid-new { gap: 1rem; }
  .ms-photo-frame { width: 150px; height: 180px; }
  .ms-stats { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ms-name { font-size: 20px; }
  .ms-role { font-size: 12px; }
  .ms-card-body { padding: 0.8rem; }
  .ms-social-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .team-card { padding: 1rem 0.5rem; }
  .ir-grid { grid-template-columns: 1fr; gap: 1rem; }
  .ir-heading { font-size: 17px; }
  .ir-profile-btn { padding: 8px 14px; font-size: 12px; }
  .footer-grid { gap: 1.5rem; }
  .footer-bottom { gap: 0.8rem; }
  .container { padding: 0 1rem; }
  .form-layout { gap: 1.5rem; }
  .complaint-form { padding: 1rem; }
  .form-row { gap: 10px; }
  .dir-grid { grid-template-columns: 1fr 1fr; }
  .mla-card { min-width: 220px; padding: 1rem; }
  .la-grid { grid-template-columns: 1fr; }
  .become-vol-inner { gap: 1.5rem; }
  .become-vol-card { padding: 1.5rem 1rem; }
  .jobseeker-grid { grid-template-columns: 1fr; gap: 1rem; }
  .step { padding: 0; }
  .cm-focus-item { font-size: 10px; padding: 4px 10px; }
  .ms-focus-item { font-size: 10px; padding: 4px 10px; }
  .fu-grid { gap: 1.5rem; }
  .fu-img { aspect-ratio: 4/3; }
  .visually-hidden { display: none; }
}

/* ── Hero logo ── */
.hero-logo-mobile {
  display: none;
  justify-content: center;
  margin: 0 0 12px;
}
@media (max-width: 768px) {
  .hero-logo-mobile { display: flex; }
}
.hero-logo-mobile img {
  width: 180px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(122,30,44,0.25);
}
@media (max-width: 768px) {
  .hero-logo-mobile img {
    width: 150px;
  }
  #hero { padding-top: 60px; }
}