/* ==========================================================
   MNDL — Club Ecosystem
   Design concept: the hand-drawn mind map, brought to life.
   Warm notebook paper, ink-line connectors that draw themselves,
   five element colours lifted straight from the original sketch.
   ========================================================== */

:root{
  --paper: #FBF6EA;
  --paper-fold: #EFE6D3;
  --paper-line: #E4D9C0;
  --ink: #2B2620;
  --ink-muted: #6B6255;
  --ink-soft: #9C9282;

  --vriksha: #2F7A4D;
  --vriksha-bg: #E4F0E6;
  --jal: #1487A8;
  --jal-bg: #DEF1F5;
  --agni: #C43E3E;
  --agni-bg: #F7E3DF;
  --vayu: #5F6B75;
  --vayu-bg: #E7EAEC;
  --shoonya: #4A3F8C;
  --shoonya-bg: #E7E4F5;

  --gold: #B9862E;
  --gold-bg: #F4E7CC;
  --silver: #7C8894;
  --silver-bg: #E9ECEE;
  --bronze: #9C6B3E;
  --bronze-bg: #EFE0CE;
  --platinum: #5B8A9A;
  --platinum-bg: #DDECEF;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --shadow-card: 0 6px 0 rgba(43,38,32,0.08), 0 2px 10px rgba(43,38,32,0.10);
  --font-display: "Baloo 2", ui-rounded, "Segoe UI", sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", sans-serif;
  --nav-h: 72px;
  --ease: cubic-bezier(.34,1.56,.64,1);
}

[data-theme="dark"]{
  --paper: #211F1A;
  --paper-fold: #2B2822;
  --paper-line: #3A362D;
  --ink: #F2ECDD;
  --ink-muted: #C9C0AC;
  --ink-soft: #948C79;

  --vriksha-bg: #1E3428;
  --jal-bg: #163842;
  --agni-bg: #3E2523;
  --vayu-bg: #2D3237;
  --shoonya-bg: #2A2545;

  --gold-bg: #3B3220;
  --silver-bg: #2C2F32;
  --bronze-bg: #33281D;
  --platinum-bg: #1E3138;
  --shadow-card: 0 6px 0 rgba(0,0,0,0.28), 0 2px 12px rgba(0,0,0,0.35);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 1px 1px, var(--paper-line) 1px, transparent 1.4px);
  background-size: 26px 26px;
  transition: background-color .3s ease, color .3s ease;
}

h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; margin: 0 0 .4em; color: var(--ink); letter-spacing: .2px; }
p{ margin: 0 0 1em; color: var(--ink-muted); }
a{ color: inherit; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper); padding:10px 16px; border-radius: 0 0 8px 0; z-index:999; }
.skip-link:focus{ left:0; }

img,svg{ display:block; max-width:100%; }

button, a, input{ font-family: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 3px solid var(--jal); outline-offset: 2px; border-radius: 4px;
}

/* ---------- spiral notebook edge ---------- */
.spiral-edge{
  position: fixed; top:0; left:0; bottom:0; width: 22px; z-index: 5;
  background-image: repeating-linear-gradient(180deg, transparent 0 14px, var(--ink-soft) 14px 16px, transparent 16px 30px);
  opacity:.35; pointer-events:none;
}
@media (max-width: 720px){ .spiral-edge{ display:none; } }

/* ---------- layout helpers ---------- */
.section{ max-width: 1120px; margin: 0 auto; padding: 96px 28px 32px; position:relative; }
.section-title{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.subsection-title{ font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin-top: 3.2em; }
.section-lede{ max-width: 62ch; font-size: 1.05rem; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family: var(--font-display); font-weight:600; font-size:1rem;
  padding: .85em 1.5em; border-radius: 999px; border: 2.5px solid var(--ink);
  cursor:pointer; text-decoration:none; transition: transform .18s var(--ease), box-shadow .18s ease;
}
.btn-primary{ background: var(--ink); color: var(--paper); box-shadow: 0 4px 0 var(--ink-soft); }
.btn-primary:hover{ transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ transform: translateY(-2px); background: var(--paper-fold); }
.btn-small{ padding: .6em 1.1em; font-size:.9rem; }

/* ---------- reveal-on-scroll (single, disciplined motion) ---------- */
.reveal{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s var(--ease); }
.reveal.in{ opacity:1; transform: translateY(0); }

/* ============ NAVBAR ============ */
.navbar{
  position: sticky; top:0; z-index: 60; height: var(--nav-h);
  display:flex; align-items:center; gap: 18px;
  padding: 0 24px 0 40px;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--paper-line);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--font-display); font-weight:800; font-size:1.2rem; color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:50%; background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:1.05rem;
}
.nav-links{ display:flex; gap: 4px; margin-left: auto; flex-wrap:wrap; }
.nav-links a{
  text-decoration:none; color: var(--ink-muted); font-weight:600; font-size:.94rem;
  padding: 8px 12px; border-radius: 999px; transition: background .18s ease, color .18s ease;
  white-space:nowrap;
}
.nav-links a:hover, .nav-links a.active{ background: var(--paper-fold); color: var(--ink); }

.theme-toggle{
  border: 2px solid var(--ink); background:transparent; color:var(--ink);
  width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:38px; background:transparent; border:none; cursor:pointer; flex:none; }
.hamburger span{ display:block; height:3px; border-radius:2px; background:var(--ink); width:100%; transition: transform .25s ease, opacity .25s ease; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px){
  .navbar{ padding: 0 18px; }
  .nav-links{
    position: fixed; inset: var(--nav-h) 0 auto auto; top: var(--nav-h);
    right:0; width: min(78vw, 320px); background: var(--paper);
    border-left: 2px solid var(--paper-line); border-bottom: 2px solid var(--paper-line);
    border-bottom-left-radius: var(--radius-md);
    flex-direction: column; align-items: stretch; padding: 14px;
    transform: translateX(105%); transition: transform .3s var(--ease);
    max-height: calc(100vh - var(--nav-h)); overflow:auto;
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-links a{ padding: 12px 14px; }
  .hamburger{ display:flex; }
}

/* ============ HERO ============ */
.hero{
  padding-top: 56px;
  display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:center;
}
.kicker{ font-family: var(--font-display); font-weight:700; color: var(--jal); margin-bottom:.3em; }
.hero h1{ font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; }
.hero-sub{ font-size: 1.12rem; max-width: 46ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 8px; }

.orbit-wrap{ position:relative; width: 100%; aspect-ratio: 1/1; max-width: 480px; margin: 0 auto; }
.orbit-lines{ position:absolute; inset:0; width:100%; height:100%; color: var(--ink-soft); }
.orbit-lines path{ stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s var(--ease); }
.orbit-wrap.drawn .orbit-lines path{ stroke-dashoffset: 0; }

.orbit{ position:absolute; inset:0; }
.hub{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 118px; height:118px; border-radius:50%;
  background: var(--ink); color: var(--paper); border: none; cursor:pointer;
  font-family: var(--font-display); font-weight:800; font-size:1.15rem; letter-spacing:.5px;
  box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--ink);
  transition: transform .25s var(--ease);
}
.hub:hover{ transform: translate(-50%,-50%) scale(1.06); }
.hub:active{ transform: translate(-50%,-50%) scale(0.96); }

.node{
  position:absolute; width: 96px; height:96px; margin:-48px 0 0 -48px;
  border-radius:50%; border: 3px solid var(--ink); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:var(--font-display); font-weight:700; font-size:.82rem;
  background: var(--paper); box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s ease;
}
.node .emoji{ font-size:1.5rem; }
.node:hover{ transform: scale(1.08); }
.node.active{ box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px currentColor, var(--shadow-card); transform: scale(1.08); }

.club-detail{
  grid-column: 1 / -1; margin-top: 10px; padding: 22px 26px; border-radius: var(--radius-lg);
  border: 2.5px dashed var(--paper-line); min-height: 92px;
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  transition: border-color .3s ease, background .3s ease;
}
.club-detail-hint{ margin:0; color: var(--ink-soft); font-style: italic; }
.club-detail h3{ margin-bottom:.15em; display:flex; align-items:center; gap:10px; }
.club-detail .tag-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
.club-detail .tag{ font-size:.8rem; font-weight:700; padding: 4px 11px; border-radius:999px; background: var(--paper-fold); }

@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; padding-top: 32px; }
  .orbit-wrap{ max-width: 360px; }
}

/* ============ CLUBS GRID ============ */
.clubs-grid{ display:grid; grid-template-columns: repeat(5,1fr); gap:16px; margin-top: 28px; }
.club-chip{
  border-radius: var(--radius-md); padding: 20px 14px; text-align:center;
  border: 2.5px solid var(--ink); box-shadow: var(--shadow-card);
}
.club-chip .emoji{ font-size:2rem; display:block; margin-bottom:8px; }
.club-chip h4{ margin:0 0 4px; font-size:1.05rem; }
.club-chip p{ margin:0; font-size:.85rem; color: var(--ink-muted); }
@media (max-width: 820px){ .clubs-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .clubs-grid{ grid-template-columns: 1fr; } }

/* ============ STEPPER (pedagogical continuum) ============ */
.stepper{ display:flex; gap: 10px; margin-top: 26px; flex-wrap:wrap; }
.step{
  flex:1 1 200px; text-align:left; padding: 18px 18px 16px; border-radius: var(--radius-md);
  border: 2.5px solid var(--paper-line); background: var(--paper-fold); cursor:pointer;
  transition: border-color .2s ease, transform .2s var(--ease), background .2s ease;
}
.step .step-num{ font-family:var(--font-display); font-weight:800; font-size:.85rem; color: var(--ink-soft); }
.step h4{ margin: 4px 0 2px; font-size:1.08rem; }
.step .step-range{ font-size:.85rem; color: var(--ink-muted); }
.step.active{ border-color: var(--ink); background: var(--paper); transform: translateY(-4px); box-shadow: var(--shadow-card); }
.stage-detail{ margin-top: 16px; padding: 18px 22px; border-radius: var(--radius-md); background: var(--paper-fold); min-height: 30px; }

/* ============ STAMP WHEEL (curriculum features) ============ */
.stamp-wheel{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 22px; }
.stamp{
  width: 96px; height: 96px; border-radius:50%; border: 3px solid var(--ink);
  background: var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; font-size:.82rem; cursor:pointer;
  transform: rotate(var(--tilt,0deg)); transition: transform .22s var(--ease), background .2s ease;
}
.stamp:hover{ transform: rotate(0deg) scale(1.08); }
.stamp.active{ background: var(--ink); color: var(--paper); transform: rotate(0deg) scale(1.1); }
.stamp-detail{ margin-top: 14px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-fold); min-height: 30px; }

/* ============ FOLDER ROW (capstones) ============ */
.folder-row{ display:grid; grid-template-columns: repeat(5,1fr); gap: 16px; margin-top: 22px; perspective: 1200px; }
.folder{ position:relative; height: 190px; cursor:pointer; }
.folder-inner{ position:relative; width:100%; height:100%; transition: transform .6s var(--ease); transform-style: preserve-3d; }
.folder.flipped .folder-inner{ transform: rotateY(180deg); }
.folder-face{
  position:absolute; inset:0; border-radius: var(--radius-md) var(--radius-md) 6px 6px;
  backface-visibility: hidden; padding: 18px; display:flex; flex-direction:column;
  border: 2.5px solid var(--ink); box-shadow: var(--shadow-card);
}
.folder-face::before{
  content:""; position:absolute; top:-14px; left:16px; width: 46%; height:16px;
  background: inherit; border: 2.5px solid var(--ink); border-bottom:none;
  border-radius: 8px 8px 0 0;
}
.folder-front{ justify-content:flex-end; }
.folder-front .emoji{ font-size:1.8rem; }
.folder-front h4{ margin:6px 0 0; }
.folder-back{ transform: rotateY(180deg); justify-content:center; background: var(--paper); }
.folder-back p{ margin:0; font-size:.92rem; }
@media (max-width: 900px){ .folder-row{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 560px){ .folder-row{ grid-template-columns: repeat(2,1fr); } }

/* ============ STICKY NOTES (programs) ============ */
.sticky-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 26px; perspective: 1200px; }
.sticky{ height: 168px; cursor:pointer; }
.sticky-inner{ position:relative; width:100%; height:100%; transition: transform .55s var(--ease); transform-style:preserve-3d; }
.sticky.flipped .sticky-inner{ transform: rotateY(180deg); }
.sticky-face{
  position:absolute; inset:0; border-radius: 4px; backface-visibility:hidden;
  padding: 16px; display:flex; flex-direction:column; justify-content:center;
  box-shadow: 0 8px 14px rgba(43,38,32,.14); transform: rotate(var(--tilt,-1.5deg));
  border: 1.5px solid rgba(0,0,0,.06);
}
.sticky-front{ align-items:center; text-align:center; }
.sticky-front .acr{ font-family:var(--font-display); font-weight:800; font-size:1.5rem; }
.sticky-front .full{ font-size:.72rem; color: var(--ink-muted); margin-top:4px; }
.sticky-back{ transform: rotate(var(--tilt,-1.5deg)) rotateY(180deg); }
.sticky-back p{ margin:0; font-size:.88rem; color: var(--ink); }
@media (max-width: 900px){ .sticky-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px){ .sticky-grid{ grid-template-columns: 1fr; } }

/* ============ FIELD BOARD ============ */
.field-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 24px; }
.filter-chip{
  border: 2px solid var(--ink); background:transparent; color:var(--ink); border-radius:999px;
  padding: 7px 14px; font-family: var(--font-display); font-weight:600; font-size:.85rem; cursor:pointer;
  transition: background .18s ease, color .18s ease;
}
.filter-chip.active{ background: var(--ink); color: var(--paper); }
.field-board{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px; min-height: 44px; }
.field-tag{
  padding: 9px 16px; border-radius: 6px; font-weight:700; font-size:.9rem;
  transform: rotate(var(--tilt,0deg)); box-shadow: 0 3px 6px rgba(0,0,0,.08);
  transition: transform .18s var(--ease);
}
.field-tag:hover{ transform: rotate(0deg) translateY(-2px); }
.field-tag.pinned{ border: 2px dashed var(--ink); background: transparent !important; color: var(--ink); }

.suggest-box{ margin-top: 30px; padding: 20px 22px; border-radius: var(--radius-md); background: var(--paper-fold); }
.suggest-box label{ display:block; font-weight:700; margin-bottom:8px; font-family:var(--font-display); }
.suggest-row{ display:flex; gap:10px; flex-wrap:wrap; }
.suggest-row input{
  flex:1 1 220px; padding: .8em 1em; border-radius: 999px; border: 2px solid var(--paper-line);
  font-family: var(--font-body); font-size:1rem; background: var(--paper); color: var(--ink);
}
.suggest-row input:focus{ outline: 3px solid var(--jal); outline-offset:1px; }
.suggest-note{ margin: 10px 0 0; font-size:.9rem; color: var(--vriksha); font-weight:700; min-height:1.2em; }

/* ============ BADGE PATH ============ */
.badge-path{ display:flex; align-items:flex-end; gap: 10px; margin-top: 26px; flex-wrap:wrap; }
.badge-node{
  flex:1 1 130px; display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; border:none; background:transparent; padding: 10px 6px; font-family: var(--font-body);
}
.badge-medal{
  width: 74px; height:74px; border-radius:50%; border: 3px solid var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  transition: transform .2s var(--ease);
}
.badge-node:hover .badge-medal{ transform: translateY(-4px) scale(1.05); }
.badge-node.active .badge-medal{ box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--ink); }
.badge-node .badge-bar{ width: 100%; height: 10px; border-radius:6px; background: var(--paper-fold); overflow:hidden; }
.badge-node .badge-bar span{ display:block; height:100%; width:0%; border-radius:6px; transition: width .8s var(--ease); }
.badge-node.active .badge-bar span{ width:100%; }
.badge-node strong{ font-family: var(--font-display); }
.badge-detail{ margin-top: 16px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-fold); min-height: 30px; }

/* ============ FILMSTRIP (events) ============ */
.filmstrip-wrap{ display:flex; align-items:center; gap: 10px; margin-top: 22px; }
.filmstrip{ display:flex; gap: 18px; overflow-x:auto; scroll-behavior:smooth; padding: 8px 4px 16px; scrollbar-width: thin; flex:1; }
.film-card{
  flex: 0 0 260px; border-radius: var(--radius-md); border: 2.5px solid var(--ink);
  padding: 20px; background: var(--paper); box-shadow: var(--shadow-card); scroll-snap-align:start;
}
.filmstrip{ scroll-snap-type: x mandatory; }
.film-card .emoji{ font-size:2rem; }
.film-card h4{ margin: 8px 0 2px; }
.film-card .film-tag{ font-size:.78rem; font-weight:700; color: var(--ink-muted); }
.film-btn{
  flex:none; width:42px; height:42px; border-radius:50%; border: 2.5px solid var(--ink);
  background: var(--paper); font-size:1.3rem; cursor:pointer; line-height:1;
}
.film-dots{ display:flex; gap:6px; justify-content:center; margin-top:10px; }
.film-dots span{ width:8px; height:8px; border-radius:50%; background: var(--paper-line); }
.film-dots span.active{ background: var(--ink); }

/* ============ CALENDAR ============ */
.term-tabs{ display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; }
.term-tab{
  padding: 12px 20px; border-radius: 999px; border: 2.5px solid var(--ink); background:transparent;
  font-family: var(--font-display); font-weight:700; cursor:pointer; color:var(--ink);
}
.term-tab.active{ background: var(--ink); color: var(--paper); }
.term-months{ display:flex; flex-wrap:wrap; gap:12px; margin-top: 20px; min-height: 60px; }
.month-chip{
  padding: 14px 20px; border-radius: var(--radius-sm); border: 2px solid var(--paper-line);
  background: var(--paper-fold); font-family: var(--font-display); font-weight:700;
  animation: chipIn .4s var(--ease) both;
}
@keyframes chipIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* ============ ORG CHART ============ */
.org-chart{ margin-top: 26px; display:flex; flex-direction:column; align-items:center; gap: 26px; }
.org-row{ display:flex; gap: 16px; flex-wrap:wrap; justify-content:center; }
.org-node{
  border: 2.5px solid var(--ink); border-radius: var(--radius-md); padding: 14px 18px;
  background: var(--paper); cursor:pointer; text-align:center; min-width: 130px;
  box-shadow: var(--shadow-card); transition: transform .2s var(--ease);
}
.org-node:hover{ transform: translateY(-3px); }
.org-node.active{ background: var(--ink); color: var(--paper); }
.org-node .count{ font-size:.78rem; color: var(--ink-muted); }
.org-node.active .count{ color: var(--paper-fold); }
.org-detail{ margin-top: 8px; padding: 16px 20px; border-radius: var(--radius-md); background: var(--paper-fold); min-height: 30px; max-width: 640px; margin-left:auto; margin-right:auto; text-align:center; }
.org-connector{ width:2.5px; height:22px; background: var(--paper-line); }

.ambassador-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.ambassador-card{ border: 2.5px solid var(--ink); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-card); }
.ambassador-card h4{ display:flex; align-items:center; gap:8px; }
@media (max-width: 700px){ .ambassador-grid{ grid-template-columns: 1fr; } }

/* ============ IDENTITY FLOW ============ */
.identity-flow{ display:flex; align-items:center; gap: 18px; margin-top: 26px; flex-wrap:wrap; justify-content:center; }
.identity-in, .identity-out{ display:flex; flex-direction:column; gap:14px; }
.identity-card{
  border: 2.5px solid var(--ink); border-radius: var(--radius-md); padding: 16px 22px; min-width: 190px;
  box-shadow: var(--shadow-card);
}
.identity-card h4{ margin:0 0 2px; }
.identity-card p{ margin:0; font-size:.88rem; }
.identity-card.helix, .identity-card.vise{ background: var(--paper-fold); }
.identity-card.apaar, .identity-card.param{ background: var(--gold-bg); border-color: var(--gold); }
.identity-card.apaar h4, .identity-card.param h4{ color: var(--gold); }
.identity-arrow{ width: 90px; color: var(--ink-soft); flex:none; }
@media (max-width: 700px){ .identity-arrow{ transform: rotate(90deg); width:60px; } }

/* ============ FOOTER ============ */
.footer{ background: var(--ink); color: var(--paper); padding: 56px 28px 26px; margin-top: 60px; }
.footer-top{ max-width:1120px; margin: 0 auto 22px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.3rem; }
.footer-brand .brand-mark{ background: var(--paper); color: var(--ink); }
.footer-top p{ color: color-mix(in srgb, var(--paper) 70%, transparent); margin-top:8px; }
.footer-links{ max-width:1120px; margin: 0 auto; display:flex; gap:18px; flex-wrap:wrap; padding-bottom: 22px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-links a{ color: var(--paper); text-decoration:none; font-weight:600; opacity:.85; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{ max-width:1120px; margin: 18px auto 0; display:flex; gap:10px; align-items:center; color: color-mix(in srgb, var(--paper) 65%, transparent); font-size:.9rem; }
.footer-bottom .dot{ opacity:.5; }

/* ============ MISC FLOATING UI ============ */
.to-top{
  position:fixed; right: 20px; bottom: 20px; width: 46px; height:46px; border-radius:50%;
  border: 2.5px solid var(--ink); background: var(--paper); color:var(--ink); font-size:1.2rem;
  cursor:pointer; opacity:0; pointer-events:none; transition: opacity .25s ease, transform .25s ease;
  z-index: 50; box-shadow: var(--shadow-card);
}
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ transform: translateY(-3px); }

.confetti-layer{ position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
.confetti-piece{ position:absolute; top:-20px; border-radius:2px; animation: fall linear forwards; }
@keyframes fall{
  to{ transform: translateY(110vh) rotate(540deg); opacity:.9; }
}

/* colour utility classes reused across widgets */
.c-vriksha{ color: var(--vriksha); } .bg-vriksha{ background: var(--vriksha-bg); border-color: var(--vriksha) !important; }
.c-jal{ color: var(--jal); } .bg-jal{ background: var(--jal-bg); border-color: var(--jal) !important; }
.c-agni{ color: var(--agni); } .bg-agni{ background: var(--agni-bg); border-color: var(--agni) !important; }
.c-vayu{ color: var(--vayu); } .bg-vayu{ background: var(--vayu-bg); border-color: var(--vayu) !important; }
.c-shoonya{ color: var(--shoonya); } .bg-shoonya{ background: var(--shoonya-bg); border-color: var(--shoonya) !important; }

.c-bronze{ color: var(--bronze); } .bg-bronze{ background: var(--bronze-bg); }
.c-silver{ color: var(--silver); } .bg-silver{ background: var(--silver-bg); }
.c-gold{ color: var(--gold); } .bg-gold{ background: var(--gold-bg); }
.c-platinum{ color: var(--platinum); } .bg-platinum{ background: var(--platinum-bg); }