/* ============================================================
   main.css — PLI/RPLI premium design system
   Palette: ice blue · white · champagne gold · deep navy · cyan
   ============================================================ */

:root {
  /* --- Brand palette --- */
  --navy-900: #0a1a3a;
  --navy-800: #0f2350;
  --navy-700: #16306b;
  --navy-600: #1e3f8a;
  --blue-500: #2f6bd8;
  --blue-400: #4f8ef0;
  --cyan-300: #8fd4e6;
  --ice-100:  #eef5ff;
  --ice-50:   #f6faff;
  --gold-600: #b8912f;
  --gold-500: #cfa24a;
  --gold-400: #e3c477;
  --gold-200: #f3e3b8;
  --emerald-500: #2f9e73;
  --grey-600: #5b6472;
  --grey-400: #8a93a3;
  --grey-200: #d8dee8;
  --white: #ffffff;

  /* --- Semantic --- */
  --bg:          var(--ice-50);
  --bg-alt:      var(--ice-100);
  --ink:         #10192e;
  --ink-soft:    #35415a;
  --ink-muted:   var(--grey-600);
  --accent:      var(--blue-500);
  --accent-ink:  var(--navy-700);
  --gold:        var(--gold-500);
  --line:        rgba(16, 25, 46, 0.10);

  /* --- Glass --- */
  --glass-bg:      rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border:  rgba(255, 255, 255, 0.65);
  --glass-shadow:  0 10px 40px -12px rgba(16, 40, 90, 0.28);
  --glass-blur:    18px;

  /* --- Typography --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Spacing / radius --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-1: 0 2px 8px rgba(16, 40, 90, 0.06);
  --shadow-2: 0 12px 32px -10px rgba(16, 40, 90, 0.18);
  --shadow-gold: 0 8px 30px -8px rgba(207, 162, 74, 0.45);
  --maxw: 1200px;

  --grad-hero: radial-gradient(120% 120% at 15% 10%, #f6faff 0%, #e9f1ff 45%, #dfeaff 100%);
  --grad-gold: linear-gradient(135deg, var(--gold-400), var(--gold-600));
  --grad-navy: linear-gradient(135deg, var(--navy-700), var(--navy-900));
}

/* Language-script fonts stack onto body automatically via Noto fallback */
:root[lang="te"] { --font-body: 'Noto Sans Telugu','Plus Jakarta Sans',sans-serif; --font-display:'Noto Serif Telugu','Fraunces',serif; }
:root[lang="hi"] { --font-body: 'Noto Sans Devanagari','Plus Jakarta Sans',sans-serif; --font-display:'Noto Serif Devanagari','Fraunces',serif; }
:root[lang="ta"] { --font-body: 'Noto Sans Tamil','Plus Jakarta Sans',sans-serif; --font-display:'Noto Serif Tamil','Fraunces',serif; }
:root[lang="kn"] { --font-body: 'Noto Sans Kannada','Plus Jakarta Sans',sans-serif; --font-display:'Noto Serif Kannada','Fraunces',serif; }
:root[lang="ml"] { --font-body: 'Noto Sans Malayalam','Plus Jakarta Sans',sans-serif; --font-display:'Noto Serif Malayalam','Fraunces',serif; }

/* --- Dark scheme (subtle, respects system) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #070d1c;
    --bg-alt: #0b1428;
    --ink: #eaf0ff;
    --ink-soft: #c2cce0;
    --ink-muted: #9aa6be;
    --line: rgba(255,255,255,0.10);
    --glass-bg: rgba(20, 32, 60, 0.55);
    --glass-bg-strong: rgba(20, 32, 60, 0.72);
    --glass-border: rgba(255,255,255,0.14);
    --glass-shadow: 0 10px 44px -12px rgba(0,0,0,0.6);
    --grad-hero: radial-gradient(120% 120% at 15% 10%, #0b1428 0%, #0a1123 50%, #070d1c 100%);
  }
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 .5em; letter-spacing: -0.015em; font-optical-sizing: auto; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1rem; color: var(--ink-soft); }
.lead { font-size: 1.2rem; color: var(--ink-soft); }
small, .muted { color: var(--ink-muted); }

/* ============================================================
   Layout
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(18px, 4vw, 40px); }
.section { padding-block: clamp(56px, 8vw, 110px); position: relative; }
.section--alt { background: var(--bg-alt); }
.grid { display: grid; gap: clamp(18px, 2.5vw, 30px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600);
  padding: .35rem .8rem; border-radius: 999px;
  background: linear-gradient(135deg, rgba(207,162,74,.14), rgba(207,162,74,.05));
  border: 1px solid rgba(207,162,74,.3);
}
.section-head { max-width: 760px; margin-bottom: clamp(30px, 5vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --btn-bg: var(--grad-navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 650; font-size: 1rem;
  padding: .85rem 1.5rem; border-radius: 999px; border: 0; cursor: pointer;
  color: #fff; background: var(--btn-bg);
  box-shadow: var(--shadow-2); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, filter .25s;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(16,40,90,.4); color:#fff; }
.btn:active { transform: translateY(-1px); }
.btn--gold { --btn-bg: var(--grad-gold); color: #3a2c07; box-shadow: var(--shadow-gold); }
.btn--gold:hover { color:#3a2c07; box-shadow: 0 16px 44px -10px rgba(207,162,74,.6); }
.btn--ghost {
  background: var(--glass-bg); color: var(--accent-ink);
  border: 1px solid var(--glass-border); backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
}
.btn--ghost:hover { background: var(--glass-bg-strong); color: var(--accent-ink); }
.btn--lg { padding: 1.05rem 2rem; font-size: 1.08rem; }
.btn--block { display: flex; width: 100%; }
.btn .icon { width: 1.1em; height: 1.1em; }

/* ============================================================
   Footer (structure; visuals in components)
   ============================================================ */
.site-footer { position: relative; background: var(--grad-navy); color: #cdd8f0; padding-block: 64px 28px; margin-top: 40px; }
/* postage-stamp perforation — the site's signature motif (torn-stamp top edge) */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 13px; transform: translateY(-100%);
  background: var(--navy-900);
  -webkit-mask: radial-gradient(circle at 8px 13px, transparent 6px, #000 6.5px) repeat-x;
          mask: radial-gradient(circle at 8px 13px, transparent 6px, #000 6.5px) repeat-x;
  -webkit-mask-size: 16px 13px; mask-size: 16px 13px;
}
.site-footer h4 { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 1rem; }
.site-footer a { color: #b7c4e4; display: block; padding: .28rem 0; }
.site-footer a:hover { color: var(--gold-400); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size: .85rem; color: #93a1c4; }

/* ============================================================
   Utilities
   ============================================================ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; } .items-center { align-items: center; } .gap { gap: 1rem; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(47,107,216,.1); color: var(--accent-ink); border: 1px solid rgba(47,107,216,.2);
}
.badge--gold { background: rgba(207,162,74,.14); color: var(--gold-600); border-color: rgba(207,162,74,.3); }
.badge--rural { background: rgba(47,158,115,.12); color: var(--emerald-500); border-color: rgba(47,158,115,.28); }
.disclaimer-bar {
  font-size: .82rem; color: var(--ink-muted); text-align: center;
  padding: .7rem 1rem; background: var(--bg-alt); border-top: 1px solid var(--line);
}
.skip-link { position:absolute; left:-999px; top:0; background:#fff; color:var(--ink); padding:.6rem 1rem; z-index:1000; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; }

/* Focus visibility (a11y) */
:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}