/* ================================================================
   RAGHAV VANSH — Royal Heritage Website
   Theme: Royal Maroon & Gold | Suryavanshi Tradition
   ================================================================ */

/* Fonts loaded via <link> in HTML head — no @import needed (avoids double-load) */

/* ── Variables ── */
:root {
  --maroon:       #7B1C1C;
  --maroon-dark:  #4A0E0E;
  --maroon-mid:   #5E1515;
  --maroon-light: #A83232;
  --gold:         #C9A84C;
  --gold-light:   #E5C76A;
  --gold-dark:    #9A7A2E;
  --saffron:      #E8821A;
  --saffron-light:#F4A847;
  --cream:        #FEF6E4;
  --cream-dark:   #F5E6C8;
  --dark:         #180808;
  --dark-mid:     #2C1010;
  --text:         #2D1212;
  --text-light:   #5C3333;
  --white:        #FFFFFF;

  --font-display:  'Cinzel Decorative', serif;
  --font-heading:  'Cinzel', serif;
  --font-body:     'Lato', sans-serif;
  --font-hindi:    'Noto Serif Devanagari', serif;

  --radius:      8px;
  --radius-lg:   16px;
  --shadow-sm:   0 2px 8px rgba(0,0,0,.12);
  --shadow:      0 4px 20px rgba(0,0,0,.18);
  --shadow-lg:   0 8px 40px rgba(0,0,0,.28);
  --transition:  all .3s ease;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  line-height: 1.75;
  overflow-x: hidden;
}
a { color:var(--maroon); text-decoration:none; transition:var(--transition); }
a:hover { color:var(--gold); }
img { max-width:100%; height:auto; display:block; }

/* Language visibility */
body[data-lang="en"] .lang-hi { display:none !important; }
body[data-lang="hi"] .lang-en { display:none !important; }

/* ── Scroll Animations ── */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ================================================================
   DECORATIVE PATTERNS
   ================================================================ */
.pattern-bar {
  height:6px;
  background:repeating-linear-gradient(
    90deg,
    var(--maroon)    0  12px,
    var(--gold)     12px 24px,
    var(--saffron)  24px 36px,
    var(--gold)     36px 48px
  );
}
.ornament {
  text-align:center;
  color:var(--gold);
  letter-spacing:10px;
  font-size:1.4rem;
  margin:1.5rem 0;
  opacity:.65;
  user-select:none;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
.navbar {
  position:sticky; top:0; z-index:1000;
  background:var(--dark);
  border-bottom:3px solid var(--gold);
  padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
  box-shadow:0 2px 20px rgba(0,0,0,.5);
}
.nav-brand {
  font-family:var(--font-display);
  color:var(--gold);
  font-size:1.15rem;
  letter-spacing:1px;
  display:flex; align-items:center; gap:.5rem;
  white-space:nowrap;
}
.nav-brand .sun { color:var(--saffron); font-size:1.3rem; }
.nav-links {
  display:flex; list-style:none;
  gap:1.6rem; align-items:center;
}
.nav-links a {
  color:var(--cream);
  font-family:var(--font-heading);
  font-size:.85rem; letter-spacing:.5px;
  padding:4px 2px;
  border-bottom:2px solid transparent;
  transition:var(--transition);
}
.nav-links a:hover, .nav-links a.active {
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.nav-right { display:flex; align-items:center; gap:1rem; }
.lang-toggle {
  display:flex;
  background:var(--maroon-mid);
  border-radius:20px;
  padding:3px; gap:2px;
}
.lang-btn {
  background:transparent; border:none;
  color:var(--cream);
  padding:4px 14px; border-radius:16px;
  cursor:pointer; font-size:.8rem;
  font-family:var(--font-heading);
  transition:var(--transition);
}
.lang-btn.active {
  background:var(--gold); color:var(--dark); font-weight:700;
}
.hamburger {
  display:none; flex-direction:column;
  cursor:pointer; gap:5px;
  background:none; border:none; padding:4px;
}
.hamburger span {
  width:24px; height:3px;
  background:var(--gold); border-radius:2px;
  transition:var(--transition);
}

/* ================================================================
   HERO — HOME
   ================================================================ */
.hero {
  position:relative;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:linear-gradient(160deg, var(--dark) 0%, var(--maroon-dark) 45%, var(--maroon-mid) 100%);
  overflow:hidden;
  padding:7rem 2rem 5rem;
}
.hero-bg-text {
  position:absolute;
  font-family:var(--font-hindi);
  font-size:clamp(12rem, 28vw, 28rem);
  color:rgba(201,168,76,.04);
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  white-space:nowrap;
  pointer-events:none; user-select:none;
  line-height:1;
}
.hero-glow {
  position:absolute; top:20%; left:50%;
  transform:translate(-50%,-50%);
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; max-width:860px; }
.hero-sun {
  font-size:3.5rem;
  color:var(--saffron);
  display:block; margin-bottom:1.5rem;
  animation:sunpulse 3s ease-in-out infinite;
}
@keyframes sunpulse {
  0%,100% { text-shadow:0 0 20px rgba(232,130,26,.5); }
  50%       { text-shadow:0 0 60px rgba(232,130,26,.9); }
}
.hero-title-en {
  font-family:var(--font-display);
  font-size:clamp(2.8rem, 7vw, 5.5rem);
  color:var(--gold);
  line-height:1.15;
  letter-spacing:1px;
}
.hero-title-hi {
  font-family:var(--font-hindi);
  font-size:clamp(1.8rem, 4vw, 3.2rem);
  color:var(--cream);
  display:block; margin-top:.4rem;
}
.hero-sub {
  font-family:var(--font-heading);
  font-size:clamp(.9rem, 2vw, 1.25rem);
  color:var(--cream); opacity:.85;
  letter-spacing:3px; text-transform:uppercase;
  margin:1.5rem 0 2.5rem;
}
.hero-quote-box {
  background:rgba(201,168,76,.08);
  border:1px solid rgba(201,168,76,.3);
  border-radius:var(--radius);
  padding:1.5rem 2rem;
  margin:0 auto 2.5rem;
  max-width:680px;
}
.hero-quote-box .q-hindi {
  font-family:var(--font-hindi);
  font-size:1.3rem; color:var(--gold-light);
  line-height:1.9; margin-bottom:.5rem;
}
.hero-quote-box .q-source {
  font-family:var(--font-heading);
  font-size:.82rem; color:var(--cream); opacity:.7;
  letter-spacing:1px;
}
.hero-cta {
  display:flex; gap:1rem;
  justify-content:center; flex-wrap:wrap;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 2rem;
  border-radius:4px;
  font-family:var(--font-heading);
  font-size:.92rem; letter-spacing:1px;
  transition:var(--transition);
  cursor:pointer; border:2px solid transparent;
}
.btn-primary {
  background:var(--gold); color:var(--dark); border-color:var(--gold);
}
.btn-primary:hover {
  background:var(--gold-light); color:var(--dark);
  transform:translateY(-2px); box-shadow:var(--shadow-lg);
}
.btn-outline {
  background:transparent; color:var(--gold); border-color:var(--gold);
}
.btn-outline:hover {
  background:var(--gold); color:var(--dark);
  transform:translateY(-2px);
}
.btn-sm { padding:.5rem 1.25rem; font-size:.82rem; }

/* ================================================================
   SECTION STRUCTURE
   ================================================================ */
.section { padding:5rem 2rem; }
.section-sm { padding:3rem 2rem; }
.section-dark  { background:var(--dark);       color:var(--cream); }
.section-deep  { background:var(--maroon-dark); color:var(--cream); }
.section-cream { background:var(--cream); }
.section-light { background:var(--cream-dark); }

.container { max-width:1200px; margin:0 auto; }

.sec-header { text-align:center; margin-bottom:3.5rem; }
.sec-badge {
  display:inline-block;
  background:var(--gold); color:var(--dark);
  font-family:var(--font-heading); font-size:.75rem;
  letter-spacing:2px; text-transform:uppercase;
  padding:3px 14px; border-radius:20px; margin-bottom:1rem;
}
.sec-title {
  font-family:var(--font-display);
  font-size:clamp(1.7rem, 4vw, 2.8rem);
  color:var(--maroon); line-height:1.2;
  margin-bottom:.5rem;
}
.section-dark .sec-title,
.section-deep .sec-title { color:var(--gold); }

.sec-title-hi {
  font-family:var(--font-hindi);
  font-size:clamp(1.2rem, 3vw, 2rem);
  color:var(--text-light); display:block;
  margin-top:.25rem;
}
.section-dark .sec-title-hi,
.section-deep .sec-title-hi { color:var(--cream); opacity:.8; }

.sec-sub {
  font-size:1.05rem; color:var(--text-light);
  max-width:680px; margin:.75rem auto 0;
}
.section-dark .sec-sub,
.section-deep .sec-sub { color:var(--cream); opacity:.8; }

.divider {
  width:80px; height:3px;
  background:linear-gradient(90deg, var(--maroon), var(--gold), var(--maroon));
  margin:1rem auto; border-radius:2px;
}
.section-dark .divider,
.section-deep .divider {
  background:linear-gradient(90deg, var(--gold), var(--saffron), var(--gold));
}

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:0;
  border-top:2px solid rgba(201,168,76,.2);
  border-bottom:2px solid rgba(201,168,76,.2);
}
.stat-item {
  text-align:center; padding:2.5rem 1rem;
  border-right:1px solid rgba(201,168,76,.15);
  transition:var(--transition);
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:rgba(201,168,76,.06); }
.stat-num {
  font-family:var(--font-display);
  font-size:2.8rem; color:var(--gold);
  display:block; line-height:1;
}
.stat-lbl {
  font-family:var(--font-heading);
  font-size:.8rem; color:var(--cream); opacity:.75;
  letter-spacing:1.5px; text-transform:uppercase;
  margin-top:.4rem; display:block;
}

/* ================================================================
   FEATURE CARDS (home)
   ================================================================ */
.feature-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(310px, 1fr));
  gap:1.75rem;
}
.feature-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(123,28,28,.08);
  transition:var(--transition);
  display:flex; flex-direction:column;
}
.feature-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
}
.fc-header {
  background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  padding:1.75rem;
  display:flex; align-items:center; gap:1rem;
}
.fc-icon { font-size:2.8rem; flex-shrink:0; }
.fc-header-text h3 {
  font-family:var(--font-heading);
  color:var(--gold); font-size:1.15rem;
}
.fc-header-text span {
  font-family:var(--font-hindi);
  color:var(--cream); opacity:.8;
  font-size:.9rem; display:block; margin-top:2px;
}
.fc-body {
  padding:1.5rem; flex:1;
}
.fc-body p {
  color:var(--text); font-size:.93rem; line-height:1.75;
}
.fc-link {
  padding:1rem 1.5rem;
  border-top:1px solid rgba(123,28,28,.08);
  display:flex; align-items:center;
  justify-content:space-between;
}
.fc-link a {
  font-family:var(--font-heading);
  font-size:.82rem; color:var(--maroon);
  letter-spacing:.5px;
}
.fc-link a:hover { color:var(--saffron); }

/* ================================================================
   TIMELINE
   ================================================================ */
.timeline {
  position:relative;
  padding:2rem 0;
}
.timeline::before {
  content:'';
  position:absolute; left:50%; top:0; bottom:0;
  width:3px;
  background:linear-gradient(180deg, var(--gold), var(--maroon-light), var(--gold));
  transform:translateX(-50%);
}
.tl-item {
  display:flex;
  justify-content:flex-end;
  padding-right:calc(50% + 44px);
  margin-bottom:3rem;
  position:relative;
}
.tl-item:nth-child(even) {
  justify-content:flex-start;
  padding-right:0;
  padding-left:calc(50% + 44px);
}
.tl-dot {
  position:absolute; left:50%; top:22px;
  width:22px; height:22px;
  background:var(--gold); border-radius:50%;
  transform:translateX(-50%);
  border:4px solid var(--maroon);
  box-shadow:0 0 0 5px rgba(201,168,76,.2);
  z-index:1;
}
.tl-dot.major {
  width:30px; height:30px;
  background:var(--saffron);
  box-shadow:0 0 0 6px rgba(232,130,26,.25);
}
.tl-card {
  background:var(--white);
  border-radius:var(--radius);
  padding:1.5rem;
  box-shadow:var(--shadow);
  max-width:460px;
  border-left:4px solid var(--gold);
  position:relative;
}
.tl-item:nth-child(even) .tl-card {
  border-left:none; border-right:4px solid var(--gold);
}
.tl-era {
  font-family:var(--font-heading);
  font-size:.78rem; color:var(--gold-dark);
  letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:.35rem;
}
.tl-title {
  font-family:var(--font-heading);
  font-size:1.05rem; color:var(--maroon);
  font-weight:700; margin-bottom:.6rem;
}
.tl-title-hi {
  font-family:var(--font-hindi);
  font-size:.95rem; color:var(--maroon-light);
  display:block; margin-bottom:.5rem;
}
.tl-text {
  font-size:.88rem; color:var(--text-light); line-height:1.75;
}

/* ================================================================
   LINEAGE / GENEALOGY
   ================================================================ */
.lineage-list { max-width:820px; margin:0 auto; }
.lineage-item {
  display:flex; align-items:flex-start; gap:1.25rem;
  margin-bottom:.9rem; position:relative;
}
.lineage-item:not(:last-child)::after {
  content:'';
  position:absolute; left:19px; top:42px;
  width:2px; height:calc(100% - 42px + .9rem);
  background:linear-gradient(180deg, var(--gold-dark), transparent);
}
.ln-num {
  flex-shrink:0; width:40px; height:40px;
  border-radius:50%;
  background:var(--maroon); color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-size:.8rem; font-weight:700;
  z-index:1; position:relative;
}
.lineage-item.highlight .ln-num {
  width:50px; height:50px; font-size:.95rem;
  background:linear-gradient(135deg, var(--saffron), var(--gold));
  color:var(--dark);
  box-shadow:0 0 0 4px rgba(232,130,26,.25);
}
.ln-card {
  flex:1;
  background:var(--white);
  border-radius:var(--radius);
  padding:1rem 1.5rem;
  box-shadow:var(--shadow-sm);
  border-left:3px solid var(--gold);
}
.lineage-item.highlight .ln-card {
  border-left:5px solid var(--saffron);
  background:linear-gradient(135deg, #fffbf0, var(--white));
}
.ln-name {
  font-family:var(--font-heading); font-weight:700;
  font-size:1rem; color:var(--maroon);
  display:inline;
}
.lineage-item.highlight .ln-name {
  color:var(--saffron); font-size:1.15rem;
}
.ln-name-hi {
  font-family:var(--font-hindi);
  font-size:.9rem; color:var(--text-light);
  margin-left:.75rem; display:inline;
}
.ln-desc {
  font-size:.85rem; color:var(--text-light); margin-top:.25rem;
}

/* ================================================================
   KINGDOMS CARDS
   ================================================================ */
.kingdom-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:2rem;
}
.kingdom-card {
  background:var(--white);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:var(--transition);
}
.kingdom-card:hover {
  transform:translateY(-5px); box-shadow:var(--shadow-lg);
}
.kc-era-bar {
  background:linear-gradient(90deg, var(--maroon-dark), var(--maroon));
  padding:.6rem 1.5rem;
  display:flex; justify-content:space-between; align-items:center;
}
.kc-era-bar .era-text {
  font-family:var(--font-heading); font-size:.78rem;
  color:var(--gold); letter-spacing:1.5px; text-transform:uppercase;
}
.kc-era-bar .era-period {
  font-family:var(--font-hindi); font-size:.85rem; color:var(--cream); opacity:.8;
}
.kc-body { padding:1.5rem; }
.kc-title {
  font-family:var(--font-heading); font-size:1.25rem;
  color:var(--maroon); margin-bottom:.25rem;
}
.kc-title-hi {
  font-family:var(--font-hindi); font-size:1rem;
  color:var(--text-light); margin-bottom:1rem; display:block;
}
.kc-body p { font-size:.9rem; color:var(--text-light); line-height:1.75; }
.kc-meta {
  margin-top:1rem; padding-top:1rem;
  border-top:1px solid rgba(123,28,28,.1);
  display:flex; flex-wrap:wrap; gap:.75rem;
}
.kc-tag {
  background:rgba(123,28,28,.07);
  color:var(--maroon);
  font-family:var(--font-heading); font-size:.76rem;
  padding:3px 10px; border-radius:12px;
}

/* ================================================================
   CULTURE / INFO GRID
   ================================================================ */
.info-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:1.5rem;
}
.info-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.75rem; box-shadow:var(--shadow);
  border-top:4px solid var(--gold);
  transition:var(--transition);
}
.info-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.info-card .ic-icon { font-size:2.2rem; margin-bottom:.75rem; }
.info-card h4 {
  font-family:var(--font-heading); color:var(--maroon);
  font-size:1rem; margin-bottom:.25rem;
}
.info-card .h4-hi {
  font-family:var(--font-hindi); color:var(--text-light);
  font-size:.9rem; display:block; margin-bottom:.6rem;
}
.info-card p { font-size:.88rem; color:var(--text-light); line-height:1.7; }

/* Dark info cards */
.info-card-dark {
  background:rgba(255,255,255,.06);
  border-top-color:var(--saffron);
}
.info-card-dark h4 { color:var(--gold); }
.info-card-dark .h4-hi { color:var(--cream); opacity:.7; }
.info-card-dark p { color:var(--cream); opacity:.8; }

/* ================================================================
   QUOTE BLOCK
   ================================================================ */
.quote-block {
  background:linear-gradient(135deg, var(--maroon-dark), var(--dark));
  border-radius:var(--radius-lg);
  padding:3rem; text-align:center;
  position:relative; overflow:hidden;
}
.quote-block::before {
  content:'"';
  position:absolute; top:-2rem; left:1.5rem;
  font-size:16rem; color:rgba(201,168,76,.07);
  font-family:Georgia,serif; line-height:1;
  pointer-events:none;
}
.qb-text {
  font-family:var(--font-hindi);
  font-size:clamp(1.1rem, 2.5vw, 1.5rem);
  color:var(--gold); line-height:2;
  margin-bottom:1rem; position:relative; z-index:1;
}
.qb-translation {
  font-size:.95rem; color:var(--cream); opacity:.8;
  font-style:italic; margin-bottom:.75rem;
}
.qb-source {
  font-family:var(--font-heading); font-size:.8rem;
  color:var(--gold); opacity:.65; letter-spacing:1.5px;
}

/* ================================================================
   GEOGRAPHY REGIONS
   ================================================================ */
.region-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}
.region-card {
  background:var(--white); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition:var(--transition);
}
.region-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.rc-header {
  background:linear-gradient(135deg, var(--maroon), var(--maroon-mid));
  padding:1.25rem 1.5rem;
  display:flex; align-items:center; gap:.75rem;
}
.rc-header .rc-icon { font-size:1.8rem; }
.rc-header h3 {
  font-family:var(--font-heading); color:var(--gold); font-size:1rem;
}
.rc-header span {
  font-family:var(--font-hindi); color:var(--cream); opacity:.8;
  font-size:.85rem; display:block;
}
.rc-body { padding:1.25rem 1.5rem; }
.rc-body p { font-size:.88rem; color:var(--text-light); line-height:1.7; }
.rc-states {
  margin-top:.75rem; display:flex; flex-wrap:wrap; gap:.4rem;
}
.rc-state {
  background:rgba(123,28,28,.07); color:var(--maroon);
  font-family:var(--font-heading); font-size:.74rem;
  padding:2px 9px; border-radius:10px;
}

/* ================================================================
   TABLES
   ================================================================ */
.table-wrap {
  overflow-x:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
table { width:100%; border-collapse:collapse; background:var(--white); }
thead {
  background:linear-gradient(135deg, var(--maroon), var(--maroon-dark));
}
thead th {
  padding:1rem 1.5rem; text-align:left;
  color:var(--gold); font-family:var(--font-heading);
  font-size:.85rem; letter-spacing:.5px; font-weight:600;
}
tbody tr {
  border-bottom:1px solid rgba(123,28,28,.09);
  transition:var(--transition);
}
tbody tr:hover { background:rgba(201,168,76,.07); }
tbody tr:last-child { border-bottom:none; }
tbody td {
  padding:.9rem 1.5rem;
  font-size:.88rem; color:var(--text);
}
tbody td:first-child {
  font-family:var(--font-heading); font-weight:600; color:var(--maroon);
}

/* ================================================================
   PAGE HERO (sub-pages)
   ================================================================ */
.page-hero {
  background:linear-gradient(160deg, var(--dark) 0%, var(--maroon-dark) 55%, var(--maroon-mid) 100%);
  padding:9rem 2rem 5rem;
  text-align:center; position:relative; overflow:hidden;
}
.page-hero::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:55px;
  background:var(--cream);
  clip-path:ellipse(55% 100% at 50% 100%);
}
.page-hero.dark-bottom::after { background:var(--dark); }
.page-hero h1 {
  font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.8rem);
  color:var(--gold); margin-bottom:.5rem;
}
.page-hero .ph-hindi {
  font-family:var(--font-hindi);
  font-size:clamp(1.4rem, 3vw, 2.4rem);
  color:var(--cream); display:block;
  margin-bottom:1rem;
}
.page-hero p {
  font-size:1.05rem; color:var(--cream); opacity:.82;
  max-width:700px; margin:0 auto;
}

/* ================================================================
   BREADCRUMB
   ================================================================ */
.breadcrumb {
  background:var(--cream-dark);
  padding:.65rem 2rem;
  border-bottom:1px solid rgba(123,28,28,.1);
}
.bc-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; font-family:var(--font-heading);
}
.bc-inner a { color:var(--maroon); }
.bc-inner .bc-sep { color:var(--text-light); }
.bc-inner .bc-cur { color:var(--text); font-weight:600; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  background:var(--dark); color:var(--cream);
  padding:4.5rem 2rem 2rem;
}
.footer-inner {
  max-width:1200px; margin:0 auto;
}
.footer-grid {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:3rem;
}
.f-brand h3 {
  font-family:var(--font-display); color:var(--gold);
  font-size:1.2rem; margin-bottom:.25rem;
}
.f-brand .f-brand-hi {
  font-family:var(--font-hindi); color:var(--cream); opacity:.8;
  font-size:1.05rem; display:block; margin-bottom:1rem;
}
.f-brand .f-motto {
  font-family:var(--font-hindi); color:var(--gold);
  font-size:.88rem; line-height:2; font-style:italic;
}
.f-nav h4 {
  font-family:var(--font-heading); color:var(--gold);
  font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:1rem;
}
.f-nav ul { list-style:none; }
.f-nav li { margin-bottom:.5rem; }
.f-nav a {
  color:var(--cream); opacity:.75; font-size:.88rem;
  transition:var(--transition);
}
.f-nav a:hover { color:var(--gold); opacity:1; }
.footer-bottom {
  padding-top:2rem;
  border-top:1px solid rgba(201,168,76,.2);
  display:flex; justify-content:space-between;
  align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom p { font-size:.82rem; opacity:.6; }
.footer-bottom .dharma-text {
  font-family:var(--font-hindi); color:var(--gold);
  font-size:.88rem; opacity:.9;
}

/* ================================================================
   TWO-COLUMN TEXT SECTIONS
   ================================================================ */
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem; align-items:center;
}
.two-col.reverse { direction:rtl; }
.two-col.reverse > * { direction:ltr; }
.text-block h3 {
  font-family:var(--font-heading); color:var(--maroon);
  font-size:1.4rem; margin-bottom:.75rem;
}
.section-dark .text-block h3,
.section-deep .text-block h3 { color:var(--gold); }
.text-block h3 .h3-hi {
  font-family:var(--font-hindi); color:var(--text-light);
  font-size:1.1rem; display:block; margin-top:.2rem;
}
.section-dark .text-block h3 .h3-hi { color:var(--cream); opacity:.75; }
.text-block p {
  font-size:.95rem; color:var(--text-light); line-height:1.85;
  margin-bottom:1rem;
}
.section-dark .text-block p { color:var(--cream); opacity:.85; }
.accent-box {
  background:rgba(201,168,76,.1);
  border-left:4px solid var(--gold);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.25rem 1.5rem;
  margin-top:1.5rem;
}
.accent-box p {
  font-family:var(--font-hindi); color:var(--gold) !important;
  font-size:1rem; margin:0;
}

/* ================================================================
   HIGHLIGHT TEXT BADGES
   ================================================================ */
.badge {
  display:inline-block;
  padding:3px 12px; border-radius:12px;
  font-family:var(--font-heading); font-size:.75rem;
  letter-spacing:.5px;
}
.badge-gold { background:rgba(201,168,76,.15); color:var(--gold-dark); }
.badge-maroon { background:rgba(123,28,28,.1); color:var(--maroon); }
.badge-saffron { background:rgba(232,130,26,.12); color:var(--saffron); }

/* ================================================================
   DESCENDANT TREE
   ================================================================ */
.dtree { margin:2rem auto; max-width:900px; overflow-x:auto; }
.dtree ul {
  list-style:none; padding-top:1.5rem;
  position:relative; display:flex;
  flex-wrap:wrap; justify-content:center;
}
.dtree ul::before {
  content:''; position:absolute; top:0; left:50%;
  width:2px; height:1.5rem;
  background:var(--gold); transform:translateX(-50%);
}
.dtree li {
  padding:0 .5rem; position:relative; text-align:center;
  margin-top:0;
}
/* Horizontal connector between siblings */
.dtree li::before,
.dtree li::after {
  content:''; position:absolute; top:0;
  width:50%; height:2px; background:var(--gold-dark);
}
.dtree li::before { right:50%; border-right:none; }
.dtree li::after  { left:50%;  border-left:none;  }
.dtree li:only-child::before,
.dtree li:only-child::after { display:none; }
.dtree li:first-child::before { display:none; }
.dtree li:last-child::after  { display:none; }
/* Vertical drop from connector to node */
.dtree li > ul::before { display:block; }

.dn {
  display:inline-flex; flex-direction:column;
  align-items:center; gap:2px;
  background:var(--white);
  border:2px solid var(--gold-dark);
  border-radius:var(--radius);
  padding:.55rem 1rem;
  margin-bottom:1.5rem;
  min-width:110px;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
  cursor:default;
  position:relative;
}
.dn:hover { box-shadow:var(--shadow); border-color:var(--gold); }
/* Vertical line from node down to children */
.dn + ul { padding-top:1.5rem; position:relative; }
.dn + ul::before {
  content:''; position:absolute; top:0; left:50%;
  width:2px; height:1.5rem;
  background:var(--gold-dark); transform:translateX(-50%);
}
.dn-name {
  font-family:var(--font-heading); font-weight:700;
  font-size:.82rem; color:var(--maroon);
}
.dn-hi {
  font-family:var(--font-hindi); font-size:.78rem;
  color:var(--text-light);
}
.dn-badge {
  font-size:.65rem; font-family:var(--font-heading);
  letter-spacing:.5px; padding:1px 6px;
  border-radius:8px; margin-top:2px;
}
.dn-solar  { border-color:var(--saffron); }
.dn-solar .dn-name  { color:var(--saffron); }
.dn-solar .dn-badge { background:rgba(232,130,26,.15); color:var(--saffron); }
.dn-root   { border-color:var(--gold); background:linear-gradient(135deg,#fffbf0,var(--white)); }
.dn-root .dn-name   { color:var(--gold-dark); font-size:.9rem; }
.dn-divine { border-color:var(--maroon-light); }
.dn-divine .dn-name { color:var(--maroon-light); }
.dn-lunar  { border-color:#5B7FBF; }
.dn-lunar .dn-name  { color:#3A5D9C; }
.dn-lunar .dn-badge { background:rgba(91,127,191,.12); color:#3A5D9C; }
.dn-agni   { border-color:#B04020; }
.dn-agni .dn-name   { color:#8C2E10; }
.dn-agni .dn-badge  { background:rgba(176,64,32,.12); color:#8C2E10; }
/* Dark section tree */
.section-dark .dn, .section-deep .dn {
  background:rgba(255,255,255,.07); border-color:var(--gold-dark);
}
.section-dark .dn-name { color:var(--gold); }
.section-dark .dn-hi   { color:var(--cream); opacity:.7; }

/* ================================================================
   RAJPUT CLAN CARDS
   ================================================================ */
.clan-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:2rem;
  align-items:start;
}
.clan-card {
  background:#ffffff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(123,28,28,.12);
  transition:var(--transition);
}
.clan-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.clan-header {
  padding:1.25rem 1.5rem;
  display:flex; align-items:center; gap:.9rem;
}
.clan-header.solar { background:linear-gradient(135deg, #4A1C0C, #7B1C1C); }
.clan-header.lunar { background:linear-gradient(135deg, #0C1C4A, #1C3A7B); }
.clan-header.agni  { background:linear-gradient(135deg, #3A0A04, #6A1A0A); }
.clan-icon { font-size:2.2rem; flex-shrink:0; }
.clan-header-text h3 {
  font-family:var(--font-heading); color:#C9A84C;
  font-size:1.05rem; margin:0 0 .15rem;
}
.clan-header-text span {
  font-family:var(--font-hindi); color:#FEF6E4;
  opacity:.85; font-size:.85rem; display:block;
}
.clan-body {
  padding:1.25rem 1.5rem 0;
  background:#ffffff;
}
.clan-body p {
  font-size:.875rem;
  color:#4A2020;
  line-height:1.75;
  margin:0 0 .65rem;
}
.clan-body strong { color:#2D1212; }
.clan-rulers {
  margin-top:1rem;
  padding:.85rem 1.5rem 1rem;
  border-top:1.5px solid rgba(123,28,28,.12);
  background:rgba(201,168,76,.06);
}
.clan-rulers h5 {
  font-family:var(--font-heading); color:#7B1C1C;
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  margin:0 0 .55rem; font-weight:700;
}
.ruler-tags { display:flex; flex-wrap:wrap; gap:.35rem; align-items:flex-start; }
.ruler-tag {
  display:inline-block;
  background:rgba(123,28,28,.1); color:#7B1C1C;
  font-family:var(--font-heading); font-size:.72rem;
  padding:4px 10px; border-radius:12px;
  border:1px solid rgba(123,28,28,.2);
  white-space:nowrap; line-height:1.4;
}

/* ================================================================
   WELCOME ANIMATION OVERLAY
   ================================================================ */
#welcome-overlay {
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding-bottom:18vh;
  background:radial-gradient(ellipse at 50% 110%, #3D0D0D 0%, #180808 55%, #0A0408 100%);
  overflow:hidden;
  animation:woFadeOut .9s cubic-bezier(.4,0,.6,1) forwards;
  animation-delay:3.8s;
  animation-fill-mode:both;
}
/* Horizon glow */
#welcome-overlay::before {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:35%;
  background:radial-gradient(ellipse at 50% 100%, rgba(232,130,26,.35) 0%, rgba(201,168,76,.12) 45%, transparent 70%);
  pointer-events:none;
}
/* Horizon line */
#welcome-overlay::after {
  content:'';
  position:absolute;
  bottom:18vh; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(201,168,76,.4), rgba(232,130,26,.8), rgba(201,168,76,.4), transparent);
  pointer-events:none;
}
@keyframes woFadeOut {
  0%   { opacity:1; }
  100% { opacity:0; pointer-events:none; }
}

.wo-scene {
  position:absolute; bottom:18vh; left:50%;
  transform:translateX(-50%);
  width:300px; height:300px;
  display:flex; align-items:center; justify-content:center;
}
/* Rising sun animation */
.wo-sun-wrap {
  position:absolute;
  width:140px; height:140px;
  bottom:0; left:50%; transform:translateX(-50%) translateY(80px);
  animation:woSunRise 2.2s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:.1s;
}
@keyframes woSunRise {
  0%   { transform:translateX(-50%) translateY(80px); opacity:0; }
  20%  { opacity:1; }
  100% { transform:translateX(-50%) translateY(-60px); opacity:1; }
}
/* Rays — conic repeating gradient */
.wo-rays {
  position:absolute; inset:-80px;
  border-radius:50%;
  background:repeating-conic-gradient(
    rgba(201,168,76,.18) 0deg 7deg,
    transparent 7deg 18deg
  );
  animation:woRaysRotate 18s linear infinite, woRaysFadeIn .8s ease forwards;
  animation-delay:.1s, 1s;
  opacity:0;
}
@keyframes woRaysRotate { to { transform:rotate(360deg); } }
@keyframes woRaysFadeIn { to { opacity:1; } }

/* Sun disk */
.wo-sun {
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #FFF8E0 0%, #F4C060 30%, #E8821A 65%, #C96820 100%);
  box-shadow:
    0 0  50px 15px rgba(232,130,26,.9),
    0 0 110px 40px rgba(201,168,76,.55),
    0 0 200px 80px rgba(232,130,26,.25);
  animation:woSunGlow 1.6s ease-in-out infinite alternate;
}
@keyframes woSunGlow {
  from { box-shadow: 0 0  50px 15px rgba(232,130,26,.9), 0 0 110px 40px rgba(201,168,76,.55), 0 0 200px 80px rgba(232,130,26,.25); }
  to   { box-shadow: 0 0  70px 22px rgba(232,130,26,1),  0 0 150px 60px rgba(201,168,76,.75), 0 0 260px 100px rgba(232,130,26,.35); }
}

/* Text block below the overlay horizon */
.wo-text {
  position:absolute; bottom:5vh; left:50%;
  transform:translateX(-50%);
  text-align:center; white-space:nowrap;
  opacity:0;
  animation:woTextIn .9s ease forwards;
  animation-delay:2s;
}
@keyframes woTextIn {
  from { opacity:0; transform:translateX(-50%) translateY(12px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.wo-sanskrit {
  font-family:var(--font-hindi);
  font-size:clamp(1.6rem, 6vw, 2.8rem);
  color:var(--gold);
  letter-spacing:.08em;
  text-shadow:0 0 40px rgba(201,168,76,.8), 0 0 80px rgba(201,168,76,.4);
  display:block;
}
.wo-roman {
  font-family:var(--font-heading);
  font-size:clamp(.78rem, 2.5vw, 1.05rem);
  color:var(--cream); opacity:.85;
  letter-spacing:.35em; text-transform:uppercase;
  display:block; margin-top:.35rem;
}
.wo-meaning {
  font-family:var(--font-body);
  font-size:clamp(.7rem, 1.8vw, .88rem);
  color:rgba(254,246,228,.5);
  font-style:italic; display:block;
  margin-top:.3rem;
}
/* Skip button */
.wo-skip {
  position:absolute; bottom:2rem; right:2rem;
  font-family:var(--font-heading); font-size:.75rem;
  color:rgba(254,246,228,.4); letter-spacing:1.5px;
  background:none; border:none; cursor:pointer;
  text-transform:uppercase; transition:var(--transition);
  opacity:0; animation:woTextIn .5s ease forwards; animation-delay:1.2s;
}
.wo-skip:hover { color:rgba(254,246,228,.75); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
  .clan-grid   { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .nav-links {
    display:none;
    position:absolute; top:68px; left:0; right:0;
    background:var(--dark);
    flex-direction:column; padding:1rem 2rem;
    gap:0; border-top:1px solid rgba(201,168,76,.2);
    max-height:calc(100vh - 68px); overflow-y:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links li { padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.06); }
  .hamburger { display:flex; }

  .timeline::before { left:22px; }
  .tl-item,
  .tl-item:nth-child(even) {
    justify-content:flex-start;
    padding-right:0; padding-left:64px;
  }
  .tl-dot { left:22px; }
  .tl-item:nth-child(even) .tl-card {
    border-right:none; border-left:4px solid var(--gold);
  }

  .two-col { grid-template-columns:1fr; gap:2rem; }
  .two-col.reverse { direction:ltr; }
  .footer-grid { grid-template-columns:1fr; gap:2rem; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .kingdom-grid { grid-template-columns:1fr; }
  .region-grid  { grid-template-columns:1fr; }
  .info-grid    { grid-template-columns:1fr; }

  /* Tree on mobile — scroll horizontally */
  .dtree { overflow-x:auto; padding-bottom:1rem; }
  .dtree ul { flex-wrap:nowrap; }

  /* Hero text adjustments */
  .hero-title-en { font-size:clamp(2rem, 8vw, 3.5rem); }
  .page-hero h1  { font-size:clamp(1.6rem, 6vw, 2.8rem); }

  /* Rajputs page specifics */
  .clan-grid   { grid-template-columns:1fr; }
  .clan-header { padding:1rem 1.25rem; }
  .clan-body   { padding:1rem 1.25rem 0; }
  .clan-rulers { padding:.65rem 1.25rem .85rem; }
}
@media (max-width:480px) {
  .navbar { padding:0 1rem; }
  .section { padding:3rem 1.25rem; }
  .hero { padding:5rem 1.25rem 4rem; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .feature-grid  { grid-template-columns:1fr; }
  .table-wrap td,
  .table-wrap th  { padding:.6rem .75rem; font-size:.8rem; }
  .ln-card { padding:.75rem 1rem; }
  .quote-block { padding:2rem 1.25rem; }
  .hero-quote-box { padding:1rem 1.25rem; }
  .btn { padding:.65rem 1.4rem; font-size:.85rem; }
  /* Welcome overlay on small screens */
  .wo-scene { width:200px; height:200px; }
  .wo-sun-wrap { width:100px; height:100px; }
  .wo-rays { inset:-60px; }
}