/* =========================================================
   KUSO - Karnataka United Sourashtra Organisation
   Main stylesheet (v2 - upgraded design)
   ---------------------------------------------------------
   Sections in this file:
     1.  Design tokens (colors, radii, shadows)
     2.  Base / typography
     3.  Layout helpers (section, container, section titles)
     4.  Preloader
     5.  Header + Navigation
     6.  Hero (with animated shapes)
     7.  Section wave dividers
     8.  Stats counter row
     9.  News + About + Timeline
     10. Team / Person cards
     11. Language tabs
     12. Applications
     13. Sonna Kodum scroller
     14. Horoscope grid + FAQ accordion
     15. Events filter grid
     16. Gallery masonry
     17. Contact
     18. Footer
     19. Back-to-top + Lightbox
     20. Reveal-on-scroll classes + keyframes
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
  --brand: #1bac91;
  --brand-2: #0e8f76;
  --brand-3: #22d8b6;
  --brand-deep: #0b3f4f;
  --accent: #ff8a5b;
  --gold: #f5b301;
  --ink: #0f2231;
  --muted: #64748b;
  --line: #e6eef1;
  --bg: #ffffff;
  --bg-soft: #f5faf9;
  --bg-tint: #eef8f5;
  --card: #ffffff;
  --shadow-xs: 0 2px 6px rgba(15,34,49,0.06);
  --shadow-sm: 0 6px 16px rgba(15,34,49,0.08);
  --shadow-md: 0 14px 40px rgba(15,34,49,0.12);
  --shadow-lg: 0 30px 60px rgba(27,172,145,0.22);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --header-h: 78px;
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --tr: .35s var(--ease-out);
  --grad-brand: linear-gradient(135deg, #22d8b6 0%, #1bac91 45%, #0b3f4f 100%);
  --grad-hero:  linear-gradient(135deg, #052e3a 0%, #0e8f76 55%, #22d8b6 120%);
  --grad-warm:  linear-gradient(135deg, #ff8a5b 0%, #f5b301 100%);
}

/* ---------- 2. Base / typography ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", "Poppins", sans-serif;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
a { color: var(--brand); text-decoration: none; transition: color var(--tr); }
a:hover { color: var(--brand-2); }
::selection { background: var(--brand-3); color: var(--ink); }

/* Nice focus outline for accessibility */
:focus-visible { outline: 3px solid var(--brand-3); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout helpers ---------- */
.section {
  position: relative;
  padding: 100px 0;
}
.section-soft { background: var(--bg-soft); }
.section-tint { background: linear-gradient(180deg, var(--bg-tint), #ffffff); }

.section-title {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
}
.section-title .kicker {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--brand-2);
  background: var(--bg-tint);
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 14px;
  font-weight: 700;
}
.section-title h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  margin: 0 0 14px;
  background: linear-gradient(135deg, var(--ink) 40%, var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-title p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.section-title .rule {
  display: block;
  width: 70px; height: 4px;
  border-radius: 4px;
  background: var(--grad-brand);
  margin: 18px auto 0;
  position: relative;
}
.section-title .rule::before, .section-title .rule::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand);
  transform: translateY(-50%);
}
.section-title .rule::before { left: -14px; }
.section-title .rule::after  { right: -14px; }

/* ---------- 4. Preloader ---------- */
#preloader {
  position: fixed; inset: 0;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hidden { opacity: 0; visibility: hidden; }
.loader {
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 5px solid var(--bg-tint);
  border-top-color: var(--brand);
  border-right-color: var(--brand-3);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 5. Header + Navigation ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: rgba(255,255,255,0.75);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: background var(--tr), box-shadow var(--tr), border-color var(--tr), height var(--tr);
}
.site-header.scrolled {
  background: rgba(255,255,255,0.92);
  box-shadow: var(--shadow-sm);
  border-color: var(--line);
  height: 66px;
}
.header-inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img {
  height: 54px; width: auto;
  filter: drop-shadow(0 4px 10px rgba(27,172,145,0.25));
  transition: transform var(--tr);
}
.brand:hover img { transform: rotate(-6deg) scale(1.05); }
.brand-text { line-height: 1.15; }
.brand-text strong {
  display: block;
  color: var(--ink);
  font-family: "Raleway", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.brand-text span { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.5px; }

.nav-menu {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-menu a {
  display: inline-block;
  padding: 10px 16px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.94rem;
  border-radius: 999px;
  position: relative;
  transition: color var(--tr), background var(--tr);
}
.nav-menu a::before {
  content: "";
  position: absolute; inset: auto 20% -2px 20%;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--tr);
  border-radius: 2px;
}
.nav-menu a:hover,
.nav-menu li.active a { color: var(--brand-2); }
.nav-menu a:hover::before,
.nav-menu li.active a::before { transform: scaleX(1); }

.nav-cta {
  background: var(--grad-brand);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 22px rgba(27,172,145,0.35);
  transition: transform var(--tr), box-shadow var(--tr);
}
.nav-cta::before { display: none; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(27,172,145,0.55); color: #fff !important; }

.nav-toggle {
  display: none;
  background: none; border: 0; color: var(--ink);
  font-size: 1.6rem; padding: 6px; cursor: pointer;
}
@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .nav-menu {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: #fff;
    padding: 14px 20px 26px;
    max-height: 0; overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: max-height 0.45s ease;
  }
  .nav-menu.open { max-height: 620px; }
  .nav-menu a { padding: 14px 10px; border-radius: 0; border-bottom: 1px solid var(--line); }
  .nav-menu a::before { display: none; }
  .nav-cta { margin-top: 8px; text-align: center; }
}

/* ---------- 6. Hero (animated) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: #fff;
  padding: calc(var(--header-h) + 60px) 20px 60px;
  overflow: hidden;
  isolation: isolate;
  background: var(--grad-hero);
}
/* Animated soft blobs */
.hero::before, .hero::after {
  content: "";
  position: absolute; z-index: -1;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  animation: float-blob 18s ease-in-out infinite;
}
.hero::before {
  background: #22d8b6;
  top: -180px; left: -180px;
}
.hero::after {
  background: #ff8a5b;
  bottom: -220px; right: -180px;
  animation-delay: -6s;
  opacity: 0.35;
}
/* Subtle grid overlay */
.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 80%);
}
.hero-content { position: relative; z-index: 2; max-width: 1000px; }

.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.85rem; letter-spacing: 5px; text-transform: uppercase;
  color: #d0fff4;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 8px 18px;
  border-radius: 999px;
  margin: 0 0 22px;
  backdrop-filter: blur(8px);
  animation: fadeDown .9s .1s both;
}
.hero .eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-3);
  box-shadow: 0 0 0 4px rgba(34,216,182,0.25);
  animation: pulse 2s infinite;
}

.hero h1 {
  font-size: clamp(2rem, 5.4vw, 4rem);
  color: #fff;
  margin: 0 0 18px;
  line-height: 1.05;
  animation: fadeUp 1s .25s both;
}
.hero h1 .grad {
  background: linear-gradient(90deg, #fff 20%, #22d8b6 55%, #f5b301 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 sup { font-size: 0.4em; opacity: 0.9; }

.hero .motto {
  display: inline-block;
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 6px;
  color: #eafcf6;
  padding: 12px 24px;
  border-top: 1px solid rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.25);
  margin: 20px 0 28px;
  animation: fadeUp 1s .5s both;
}

.hero-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  animation: fadeUp 1s .7s both;
}

.hero .meta-row {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  margin-top: 44px;
  animation: fadeUp 1s .9s both;
}
.hero .meta {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: rgba(255,255,255,0.85); font-size: 0.95rem;
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
}
.hero .meta strong {
  color: #ffffff;
  font-family: "Raleway", "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Scroll cue */
.hero .scroll-cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 20px;
  display: flex; justify-content: center;
  padding-top: 8px;
}
.hero .scroll-cue::after {
  content: ""; width: 4px; height: 8px;
  background: #fff; border-radius: 4px;
  animation: scroll-dot 1.6s ease-in-out infinite;
}
@keyframes scroll-dot {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--tr);
  position: relative; overflow: hidden;
  text-decoration: none;
}
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.btn:hover::after { transform: translateX(120%); }

.btn-primary { background: var(--grad-brand); color: #fff; box-shadow: 0 10px 26px rgba(27,172,145,0.35); }
.btn-primary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 34px rgba(27,172,145,0.55); }

.btn-ghost { color: #fff; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--brand-2); border-color: #fff; transform: translateY(-3px); }

.btn-outline { color: var(--brand-2); border-color: var(--brand); background: transparent; }
.btn-outline:hover { color: #fff; background: var(--brand); transform: translateY(-3px); }

/* Plain button - same shape as primary but stays transparent on hover.
   Used for the hero "Discover KUSO" link so it doesn't get a background fill. */
.btn-plain {
  color: #ffffff;
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  box-shadow: none;
}
.btn-plain:hover {
  color: #ffffff;
  background: transparent;
  border-color: #ffffff;
  box-shadow: none;
  transform: translateY(-3px);
}
.btn-plain::after { display: none; }

/* ---------- 7. Wave dividers ---------- */
.wave-top, .wave-bottom {
  display: block;
  width: 100%; height: 80px;
  position: relative;
  line-height: 0;
}
.wave-top svg, .wave-bottom svg { width: 100%; height: 100%; display: block; }

/* ---------- 8. Stats counter row ---------- */
.stats {
  padding: 60px 0;
  background: linear-gradient(180deg, #fff, var(--bg-tint));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat {
  text-align: center;
  padding: 24px 16px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.stat:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; }
.stat .num {
  font-family: "Raleway", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.stat .num .plus { color: var(--brand-2); -webkit-text-fill-color: initial; margin-left: 3px; }
.stat .label { display: block; color: var(--muted); font-size: 0.95rem; margin-top: 8px; font-weight: 600; }

/* ---------- 9. News + About + Timeline ---------- */
.news-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 32px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  transition: transform var(--tr), box-shadow var(--tr);
  height: 100%;
}
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.news-card h4 { color: var(--brand-2); margin-top: 0; font-size: 1.25rem; }
.news-card ul { padding-left: 20px; margin: 8px 0 14px; }
.news-card ul li { padding: 4px 0; }
.support-table { width: 100%; border-collapse: collapse; margin: 20px 0 10px; }
.support-table td { padding: 10px 8px; border-bottom: 1px dashed var(--line); font-size: 0.92rem; }
.support-table td:nth-child(odd) { font-weight: 700; color: var(--ink); }

.about-text p { margin: 0 0 16px; color: #334155; }
.about-text b { color: var(--brand-2); }

/* Timeline */
.timeline {
  position: relative;
  padding: 30px 0;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: ""; position: absolute; left: 50%;
  top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--brand-3), var(--brand), var(--brand-deep));
  transform: translateX(-50%);
  border-radius: 3px;
}
.tl-item {
  position: relative;
  width: 50%;
  padding: 20px 40px;
}
.tl-item:nth-child(odd) { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; text-align: left; }
.tl-item::before {
  content: "";
  position: absolute; top: 32px;
  width: 18px; height: 18px;
  background: var(--brand);
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(27,172,145,0.25);
  transition: transform var(--tr);
}
.tl-item:hover::before { transform: scale(1.3); }
.tl-item:nth-child(odd)::before  { right: -9px; }
.tl-item:nth-child(even)::before { left: -9px; }
.tl-item .year {
  font-family: "Raleway", sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--brand-2);
  display: block;
  margin-bottom: 6px;
}
.tl-item .card {
  display: inline-block;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 16px 20px;
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr);
}
.tl-item .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tl-item h4 { margin: 0 0 6px; color: var(--ink); font-size: 1.05rem; }
.tl-item p { margin: 0; color: var(--muted); font-size: 0.93rem; }
@media (max-width: 767px) {
  .timeline::before { left: 18px; }
  .tl-item { width: 100%; padding-left: 50px; text-align: left !important; left: 0 !important; }
  .tl-item::before { left: 10px !important; right: auto !important; }
}

/* ---------- 10. Team / Person cards ---------- */
.team-grid {
  display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.team-card {
  position: relative;
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr);
  transform-style: preserve-3d;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-card .thumb { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.team-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.team-card .thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,63,79,0.85));
  opacity: 0; transition: opacity var(--tr);
}
.team-card:hover .thumb::after { opacity: 1; }
.team-card .info {
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, transparent, var(--bg-tint));
}
.team-card .info h4 { margin: 0 0 4px; font-size: 1.15rem; color: var(--brand-deep); }
.team-card .info span { color: var(--muted); font-size: 0.9rem; }
.team-card .arrow {
  position: absolute; top: 16px; right: 16px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-2);
  font-weight: 800;
  opacity: 0; transform: translate(-8px, 8px);
  transition: all var(--tr);
  z-index: 2;
}
.team-card:hover .arrow { opacity: 1; transform: translate(0,0); }

/* Person card (subpage headshots) */
.person-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.person {
  text-align: center;
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 12px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position: relative;
  overflow: visible;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: var(--brand-3); }
.person .avatar {
  width: 130px; height: 130px;
  margin: 0 auto 14px;
  position: relative;
}
.person .avatar::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--brand-3), var(--brand), var(--gold), var(--brand-3));
  animation: rotate 6s linear infinite;
  opacity: 0; transition: opacity var(--tr);
}
.person:hover .avatar::before { opacity: 1; }
.person .avatar img {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.person b {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
  overflow-wrap: break-word;   /* never let a long name overflow the card */
  hyphens: auto;
  padding: 0 4px;
}
.person span {
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: break-word;
  padding: 0 4px;
}


/* =========================================================
   KUSO GOOGLE FORM BANNER
   ---------------------------------------------------------
   A prominent two-column callout that appears between News
   and About.  Left column: description + bullet list.
   Right column: brand-teal card with the primary "Fill KUSO
   Form" button.
   ========================================================= */
.gform-banner-section { padding: 60px 0; }
.gform-banner {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (max-width: 820px) {
  .gform-banner { grid-template-columns: 1fr; }
}
.gform-body {
  padding: 34px 34px 30px;
}
.gform-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--brand-2);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.gform-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); animation: pulse 2s infinite;
}
.gform-title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  color: var(--brand-deep);
  margin: 0 0 12px;
  line-height: 1.2;
}
.gform-lead {
  color: #334155;
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.65;
}
.gform-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
}
.gform-list li {
  padding-left: 22px;
  position: relative;
  color: var(--brand-deep);
  font-weight: 600;
  font-size: 0.92rem;
}
.gform-list li::before {
  content: "\2713";
  position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 800;
}
.gform-cta {
  background: linear-gradient(135deg, #052e3a 0%, #0e8f76 100%);
  color: #fff;
  padding: 34px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  text-align: center;
  position: relative; overflow: hidden;
}
.gform-cta::after {
  content: ""; position: absolute;
  right: -80px; top: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(34,216,182,0.25);
  filter: blur(30px);
}
.gform-cta > * { position: relative; z-index: 1; }
.gform-cta-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: #fff; color: var(--brand-2);
  border-radius: 50%;
  font-size: 1.8rem;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}
.gform-cta-text {
  color: rgba(255,255,255,0.9);
  margin: 0; font-size: 0.95rem; max-width: 260px;
}
.gform-btn {
  font-size: 1rem;
  padding: 14px 28px;
}
.gform-cta-note {
  color: rgba(255,255,255,0.65);
  margin: 0; font-size: 0.78rem;
  letter-spacing: 0.5px;
}


/* Sonna Kodum featured cards — 1 or 2 covers shown prominently. */
.sk-featured,
.sk-featured-row {
  display: grid;
  gap: 20px;
  justify-content: center;
}
.sk-featured        { grid-template-columns: minmax(0, 520px); }
.sk-featured-row    { grid-template-columns: repeat(2, minmax(0, 420px)); }
@media (max-width: 760px) {
  .sk-featured-row  { grid-template-columns: minmax(0, 460px); }
}
.sk-featured-card {
  position: relative;
  display: block;
  max-width: 520px;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr);
}
.sk-featured-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.sk-featured-card img { width: 100%; height: auto; display: block; }
.sk-featured-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(11,63,79,0.9));
}
.sk-featured-badge {
  background: var(--brand);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase;
}
.sk-featured-cta {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .sk-featured-overlay { flex-direction: column; gap: 8px; text-align: center; }
}


/* =========================================================
   SITE DESIGNER "PROFILE POPUP" (person-dev)
   ---------------------------------------------------------
   Base state: same shape as every other .person card.
   Hover / focus: a floating popup slides in from the right
   showing the portrait photo + name + role + LinkedIn + email
   chips.  Falls back to below-the-card on narrow phones.
   ========================================================= */
.person-dev {
  position: relative;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.person-dev:hover,
.person-dev:focus-within {
  transform: translateY(-4px);
  border-color: var(--brand-3);
  z-index: 20;
}
.person-dev .avatar::before {
  background: conic-gradient(from 180deg, #C21D7A, var(--brand), #ffd84d, #0A66C2, #C21D7A);
}

.pd-popup {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translate(20px, -50%) scale(0.85);
  transform-origin: left center;
  width: 240px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(15,34,49,0.25), 0 4px 14px rgba(15,34,49,0.1);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, filter 0.25s ease,
              transform 0.42s cubic-bezier(.34,1.56,.64,1);
  z-index: 30;
}
.pd-popup::after {
  content: "";
  position: absolute;
  right: 100%; top: 50%;
  transform: translateY(-50%);
  border: 10px solid transparent;
  border-right-color: #fff;
  filter: drop-shadow(-4px 0 4px rgba(15,34,49,0.12));
}
.pd-popup::before {           /* invisible bridge for hover-continuity */
  content: "";
  position: absolute;
  top: -20px; bottom: -20px;
  left: -18px;
  width: 22px;
  background: transparent;
}
.person-dev:hover .pd-popup,
.person-dev:focus-within .pd-popup {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, -50%) scale(1);
  pointer-events: auto;
}

.pd-popup-photo {
  width: 100%;
  height: 150px;
  overflow: hidden;
  background: linear-gradient(135deg, #0a3d33, #C21D7A);
}
.pd-popup-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(.16,.84,.44,1);
}
.person-dev:hover .pd-popup-photo img,
.person-dev:focus-within .pd-popup-photo img {
  transform: scale(1.06);
}

.pd-popup-body {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
}
.pd-eyebrow {
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-magenta);
  font-weight: 800;
}
.pd-name {
  display: block;
  font-family: "Raleway", sans-serif;
  font-size: 1.05rem;
  color: var(--brand-deep);
  line-height: 1.15;
}
.pd-role {
  margin: 0 0 4px;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.35;
}
.pd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700;
  text-decoration: none;
  color: #fff;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: transform var(--tr), box-shadow var(--tr);
}
.pd-chip:hover { transform: translateY(-2px); color: #fff; box-shadow: var(--shadow-sm); }
.pd-chip .pd-ic {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
  flex-shrink: 0;
}
.pd-in   { background: #0A66C2; }
.pd-mail { background: var(--brand-deep); }

/* Staggered fade-up for the popup content */
.pd-popup .pd-eyebrow,
.pd-popup .pd-name,
.pd-popup .pd-role,
.pd-popup .pd-in,
.pd-popup .pd-mail {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.person-dev:hover .pd-eyebrow,
.person-dev:focus-within .pd-eyebrow  { transition-delay: 0.08s; opacity: 1; transform: none; }
.person-dev:hover .pd-name,
.person-dev:focus-within .pd-name     { transition-delay: 0.14s; opacity: 1; transform: none; }
.person-dev:hover .pd-role,
.person-dev:focus-within .pd-role     { transition-delay: 0.20s; opacity: 1; transform: none; }
.person-dev:hover .pd-in,
.person-dev:focus-within .pd-in       { transition-delay: 0.26s; opacity: 1; transform: none; }
.person-dev:hover .pd-mail,
.person-dev:focus-within .pd-mail     { transition-delay: 0.32s; opacity: 1; transform: none; }

/* Narrow screens: KEEP the popup on the right, just shrink it and
   pin its right edge to the viewport so it never overflows. */
@media (max-width: 640px) {
  .pd-popup {
    width: 200px;
    /* max-width already caps at (100vw - 40px), so shrink first if smaller */
    max-width: calc(100vw - 24px);
  }
  .pd-popup-photo { height: 120px; }
  .pd-popup-body  { padding: 12px 12px 14px; }
  .pd-name        { font-size: 0.95rem; }
  .pd-chip        { font-size: 0.68rem; padding: 5px 9px; }
}

/* Really narrow phones: if the popup width would push past the viewport
   right edge, shift it so its right edge hugs the viewport instead of
   overflowing.  We do this by re-anchoring at right: 0 of the card and
   letting the transform still slide it in from the right. */
@media (max-width: 460px) {
  .pd-popup {
    left: auto;
    right: -8px;
    top: calc(100% + 6px);            /* drop it just below the card so
                                         it doesn't cover the avatar */
    transform: translate(0, -8px) scale(0.9);
    transform-origin: top right;
  }
  .pd-popup::after {
    right: 22px; top: -20px; bottom: auto; left: auto;
    transform: none;
    border-right-color: transparent;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -4px 4px rgba(15,34,49,0.12));
  }
  .pd-popup::before {
    top: -20px; right: 0; left: 0; bottom: auto;
    width: auto; height: 24px;
  }
  .person-dev:hover .pd-popup,
  .person-dev:focus-within .pd-popup {
    transform: translate(0, 0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-popup,
  .pd-popup .pd-eyebrow, .pd-popup .pd-name,
  .pd-popup .pd-role, .pd-popup .pd-in, .pd-popup .pd-mail {
    transition: opacity 0.25s ease;
    transform: none;
  }
  .person-dev:hover .pd-popup { transform: translate(0, -50%); }
}
@keyframes rotate { to { transform: rotate(360deg); } }

/* ---------- 11. Language tabs ---------- */
.tabs {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 28px;
  background: #fff;
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
}
.tabs-nav {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tabs-nav button {
  width: 100%; text-align: left;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  transition: all var(--tr);
  font-family: inherit; font-size: 0.95rem;
  display: flex; align-items: center; gap: 10px;
}
.tabs-nav button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); transition: background var(--tr);
}
.tabs-nav button:hover { border-color: var(--brand); color: var(--brand-2); transform: translateX(4px); }
.tabs-nav button:hover::before { background: var(--brand); }
.tabs-nav button.active {
  background: var(--grad-brand);
  color: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.tabs-nav button.active::before { background: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn .4s ease; }
.tab-panel img {
  width: 100%; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 767px) { .tabs { grid-template-columns: 1fr; } }

/* ---------- 12. Applications ---------- */
.app-card {
  display: block;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position: relative;
}
.app-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(34,216,182,0.15), transparent 50%);
  opacity: 0; transition: opacity var(--tr);
  pointer-events: none; z-index: 1;
}
.app-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-3); }
.app-card:hover::before { opacity: 1; }
.app-card img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.app-card .info { padding: 18px; position: relative; z-index: 2; }
.app-card .info b { color: var(--brand-deep); font-size: 0.95rem; }
.app-card .badge {
  display: inline-block; margin-top: 8px;
  padding: 4px 12px; font-size: 0.75rem;
  background: var(--brand); color: #fff;
  border-radius: 999px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* ---------- 13. Sonna Kodum scroller ---------- */
.sk-scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 26px 4px 32px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--brand) var(--bg-tint);
  -webkit-overflow-scrolling: touch;
}
.sk-scroller::-webkit-scrollbar { height: 8px; }
.sk-scroller::-webkit-scrollbar-track { background: var(--bg-tint); border-radius: 8px; }
.sk-scroller::-webkit-scrollbar-thumb { background: var(--brand); border-radius: 8px; }
.sk-card {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  transition: transform var(--tr), box-shadow var(--tr);
  cursor: zoom-in;
}
.sk-card:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: var(--shadow-md); }
.sk-card img { width: 100%; height: 320px; object-fit: cover; }
.sk-card p { padding: 10px 12px; margin: 0; text-align: center; font-weight: 700; color: var(--brand-deep); font-size: 0.9rem; }

/* ---------- 14. Horoscope grid + FAQ accordion ---------- */
.faq-list { max-width: 900px; margin: 0 auto; }
.faq-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
  transition: box-shadow var(--tr), border-color var(--tr);
}
.faq-item:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-3); }
.faq-item.open { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.faq-question {
  width: 100%; text-align: left;
  background: none; border: 0;
  padding: 18px 22px;
  font-family: inherit; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-size: 1rem;
}
.faq-question::after {
  content: "+"; font-size: 1.6rem;
  color: var(--brand); font-weight: 700;
  transition: transform var(--tr);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--bg-tint);
}
.faq-item.open .faq-question::after {
  content: "−"; background: var(--brand); color: #fff;
}
.faq-answer { max-height: 0; overflow: hidden; padding: 0 22px; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-item.open .faq-answer { max-height: 500px; padding: 0 22px 18px; }

/* ---------- 15. Events filter grid ---------- */
.filter-bar {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 40px;
  list-style: none; padding: 0;
}
.filter-bar button {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
  transition: all var(--tr);
  font-family: inherit;
}
.filter-bar button:hover { color: var(--brand-2); border-color: var(--brand); transform: translateY(-2px); }
.filter-bar button.active {
  background: var(--grad-brand); color: #fff; border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.events-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.event-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  aspect-ratio: 4/3;
  transition: transform var(--tr), box-shadow var(--tr);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.event-card img {
  width: 100%; height: 100%; object-fit: cover;
}
.event-card .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(11,63,79,0.95) 0%, rgba(11,63,79,0.35) 45%, transparent 75%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; color: #fff;
  transition: background var(--tr);
}
.event-card .tag {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.9);
  color: var(--brand-2);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px;
}
.event-card h4 { color: #fff; margin: 0 0 4px; font-size: 1.2rem; }
.event-card p { margin: 0; opacity: 0.9; font-size: 0.9rem; }
.event-card .cta {
  display: inline-block; margin-top: 12px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 999px;
  font-size: 0.82rem; font-weight: 700;
  transform: translateY(10px); opacity: 0;
  transition: all var(--tr);
  color: #fff;
}
.event-card:hover .cta { transform: translateY(0); opacity: 1; }
.event-card.hide { display: none; }

/* ---------- 16. Gallery masonry ---------- */
.gallery {
  columns: 4 240px;
  column-gap: 16px;
}
.gallery a {
  display: block;
  margin: 0 0 16px;
  break-inside: avoid;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-xs);
  transition: transform var(--tr), box-shadow var(--tr);
}
.gallery a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gallery img { width: 100%; display: block; }
.gallery a::after {
  content: "🔍"; position: absolute; inset: 0;
  background: rgba(11,63,79,0.5);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.5rem;
  opacity: 0; transition: opacity var(--tr);
}
.gallery a:hover::after { opacity: 1; }

/* ---------- 17. Contact ---------- */
.contact-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.contact-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position: relative; overflow: hidden;
}
.contact-card::before {
  content: ""; position: absolute; top: -60px; right: -60px;
  width: 160px; height: 160px;
  border-radius: 50%; background: var(--bg-tint);
  transition: transform var(--tr);
}
.contact-card:hover::before { transform: scale(2); }
.contact-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--brand-3); }
.contact-card > * { position: relative; z-index: 1; }
.contact-card .icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  background: var(--grad-brand);
  color: #fff; border-radius: 16px;
  font-size: 1.4rem; font-style: normal;
  margin-bottom: 18px;
  box-shadow: 0 8px 20px rgba(27,172,145,0.35);
  transition: transform var(--tr);
}
.contact-card:hover .icon { transform: rotate(-10deg) scale(1.08); }
.contact-card h4 { margin: 0 0 8px; color: var(--brand-deep); }
.contact-card p { margin: 0; color: #334155; font-size: 0.95rem; }
.contact-card b { color: var(--ink); }
.contact-card a { color: var(--brand-2); font-weight: 700; }
.contact-card + .contact-card h4 { margin-top: 20px; }

/* Bank card call-out */
.bank-card {
  background: linear-gradient(135deg, #052e3a, #0e8f76);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  border: 0; overflow: hidden; position: relative;
}
.bank-card::before {
  content: ""; position: absolute; bottom: -80px; right: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(34,216,182,0.6), transparent 70%);
}
.bank-card h4 { color: #fff; }
.bank-card p { color: rgba(255,255,255,0.9); }
.bank-card b { color: #22d8b6; }

/* ---------- 18. Footer ---------- */
.site-footer {
  position: relative;
  background: linear-gradient(180deg, #0a2231, #051520);
  color: #cfd9e0;
  padding: 90px 0 24px;
  margin-top: 0;
  overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; top: -100px; left: -100px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(27,172,145,0.35), transparent 70%);
  filter: blur(30px);
}
.site-footer h5 { color: #fff; margin: 0 0 16px; font-size: 1.1rem; letter-spacing: 0.5px; }
.site-footer a { color: var(--brand-3); }
.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.4fr 1.5fr 1fr 1fr;
  position: relative;
}
@media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand img { width: 130px; margin-bottom: 14px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-brand p { font-size: 0.9rem; color: #96a8b3; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { padding: 4px 0; }
.footer-links a { color: #cfd9e0; }
.footer-links a::before { content: "› "; color: var(--brand-3); font-weight: 700; }
.footer-links a:hover { color: var(--brand-3); padding-left: 4px; transition: padding var(--tr), color var(--tr); }

.social-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; gap: 12px; }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  transition: all var(--tr);
  color: var(--brand-3);
  font-weight: 800;
}
.social-links a:hover {
  background: var(--brand);
  color: #fff;
  transform: translateY(-4px) rotate(-6deg);
  box-shadow: 0 12px 24px rgba(27,172,145,0.4);
}
.footer-bottom {
  text-align: center;
  padding-top: 24px; margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.9rem; color: #7a8a95;
}
.footer-bottom .heart { color: #ff6d6d; }
.footer-bottom .site-credit {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: #96a8b3;
  letter-spacing: 0.3px;
}
.footer-bottom .site-credit a { color: #22d8b6; }
.footer-bottom .site-credit a:hover { color: #fff; }

/* ---------- 19. Back-to-top + Lightbox ---------- */
.back-to-top {
  position: fixed; right: 22px; bottom: 22px;
  width: 52px; height: 52px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden;
  transform: translateY(20px);
  transition: all var(--tr);
  z-index: 998;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: #fff; transform: translateY(-6px); box-shadow: 0 22px 40px rgba(27,172,145,0.55); }

.lightbox {
  position: fixed; inset: 0;
  background: rgba(5,20,32,0.93);
  display: none; align-items: center; justify-content: center;
  z-index: 9999; padding: 24px;
  backdrop-filter: blur(4px);
}
.lightbox.open { display: flex; animation: fadeIn .3s ease; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
}
.lightbox-close {
  position: absolute; top: 22px; right: 26px;
  width: 46px; height: 46px;
  background: rgba(255,255,255,0.14);
  border: 0; color: #fff; font-size: 1.6rem;
  cursor: pointer; border-radius: 50%;
  transition: background var(--tr), transform var(--tr);
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }

/* ---------- Page header (subpages) ---------- */
.page-header {
  position: relative;
  padding: calc(var(--header-h) + 80px) 0 90px;
  background: var(--grad-hero);
  color: #fff; text-align: center;
  overflow: hidden;
}
.page-header::before, .page-header::after {
  content: ""; position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  filter: blur(80px); opacity: 0.4;
}
.page-header::before { background: #22d8b6; top: -100px; left: -100px; }
.page-header::after  { background: #ff8a5b; bottom: -100px; right: -100px; opacity: 0.3; }
.page-header > * { position: relative; z-index: 1; }
.page-header h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 12px; }
.page-header .breadcrumbs { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.page-header .breadcrumbs a { color: #fff; }
.page-header .breadcrumbs a:hover { color: var(--brand-3); }

/* ---------- Event narrative + gallery ---------- */
.event-layout { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; }
@media (max-width: 991px) { .event-layout { grid-template-columns: 1fr; } }
.event-text p { margin: 0 0 14px; color: #334155; }
.event-text b { color: var(--brand-2); }
.event-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.event-gallery img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform var(--tr), box-shadow var(--tr);
}
.event-gallery img:hover { transform: scale(1.05); box-shadow: var(--shadow-md); z-index: 2; }

/* ---------- 20. Reveal-on-scroll ---------- */
.reveal        { opacity: 0; transform: translateY(30px); transition: all .8s var(--ease-out); }
.reveal-left   { opacity: 0; transform: translateX(-40px); transition: all .8s var(--ease-out); }
.reveal-right  { opacity: 0; transform: translateX(40px);  transition: all .8s var(--ease-out); }
.reveal-zoom   { opacity: 0; transform: scale(0.9);         transition: all .7s var(--ease-out); }
.reveal.in, .reveal-left.in, .reveal-right.in, .reveal-zoom.in {
  opacity: 1; transform: none;
}
/* stagger children delays */
[data-stagger] > * { transition-delay: 0s; }
[data-stagger] > *:nth-child(1)  { transition-delay: .05s; }
[data-stagger] > *:nth-child(2)  { transition-delay: .1s; }
[data-stagger] > *:nth-child(3)  { transition-delay: .15s; }
[data-stagger] > *:nth-child(4)  { transition-delay: .2s; }
[data-stagger] > *:nth-child(5)  { transition-delay: .25s; }
[data-stagger] > *:nth-child(6)  { transition-delay: .3s; }
[data-stagger] > *:nth-child(7)  { transition-delay: .35s; }
[data-stagger] > *:nth-child(8)  { transition-delay: .4s; }

/* Keyframes */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeUp   { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-blob {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,60px) scale(1.15); }
}
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(34,216,182,0.25); }
  50%     { box-shadow: 0 0 0 10px rgba(34,216,182,0); }
}

/* Utility */
.text-center { text-align: center; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mb-20 { margin-bottom: 20px; }
.no-underline { text-decoration: none; }


/* =========================================================
   FINAL UI OVERRIDES  (three small changes, nothing else)
   ---------------------------------------------------------
   1) Main-page hero: animated YELLOW + ORANGE gradient (95deg).
   2) Logo: tint the red PNG to a Shell-style yellow / orange
      on every page using a single CSS filter (no image editing).
   3) Navbar: cleaner spacing so the logo + nav items look
      centred, evenly aligned and responsive.
   ========================================================= */

/* ----- 1. Main-page hero background ----- */

/* New palette applied only to PUBLIC pages:
      --c-cream    soft cream / off-white
      --c-yellow   bright yellow
      --c-teal     teal green
   The whole "FINAL UI OVERRIDES" block below never touches the
   admin panel. The `body:not(.admin-app)` guard on the base
   tweaks makes that explicit; the .hero and .page-header rules
   simply don't exist on any admin page. */
body:not(.admin-app) {
  --c-cream:  #FEF6D5;
  --c-yellow: #FFD84D;
  --c-teal:   #40BDA5;
}

/* HERO — animated cream -> yellow -> teal gradient at 95deg.
   background-size > 100% + the keyframe below make the
   gradient drift slowly across the surface without a jump. */
.hero {
  background: linear-gradient(95deg,
                #FEF6D5 0%,
                #FFD84D 25%,
                #40BDA5 50%,
                #FFD84D 75%,
                #FEF6D5 100%);
  background-size: 300% 300%;
  animation: hero-gradient-move 14s ease-in-out infinite;
  color: var(--ink);           /* dark text so it stays readable */
}
@keyframes hero-gradient-move {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* Hide the two old teal + coral blobs so the new sweep reads
   clearly. The subtle grid overlay is kept. */
.hero::before,
.hero::after { display: none; }

/* -- Hero text readability on the light gradient --
   Every text element inside the hero switches to dark ink
   so it stays clearly legible whichever colour is currently
   sliding under it. */
.hero .eyebrow {
  color: var(--brand-deep);
  background: rgba(255,255,255,0.55);
  border-color: rgba(11,63,79,0.15);
}
.hero .eyebrow .dot { background: var(--brand-2); }

.hero h1 { color: var(--ink); }
.hero h1 .grad {
  background: linear-gradient(90deg, var(--ink) 20%, var(--brand-deep) 60%, #b58a00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero .motto {
  color: var(--ink);
  border-top-color: rgba(11,63,79,0.25);
  border-bottom-color: rgba(11,63,79,0.25);
}

.hero .meta {
  color: var(--ink);
  background: rgba(255,255,255,0.6);
  border-color: rgba(11,63,79,0.15);
}
.hero .meta strong { color: var(--ink); }

/* Hero buttons: dark outline / dark label so they stay visible.
   (The rest of the site's buttons are NOT changed.) */
.hero .btn-plain {
  color: var(--ink);
  border-color: rgba(11,63,79,0.55);
}
.hero .btn-plain:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: transparent;
}
.hero .btn-ghost {
  color: var(--ink);
  border-color: rgba(11,63,79,0.35);
  background: rgba(255,255,255,0.4);
}
.hero .btn-ghost:hover {
  color: var(--brand-2);
  background: #fff;
  border-color: #fff;
}

/* Small scroll cue at the bottom of the hero also darkens */
.hero .scroll-cue { border-color: rgba(11,63,79,0.55); }
.hero .scroll-cue::after { background: var(--ink); }


/* SUBPAGE BANNER (`.page-header`) — same palette so team pages,
   event pages and horoscope pages match the homepage feel.
   Text stays white here because a diagonal darker teal band
   still guarantees good contrast on top. */
.page-header {
  background: linear-gradient(95deg,
                #FEF6D5 0%,
                #FFD84D 25%,
                #0e8f76 55%,
                #FFD84D 80%,
                #FEF6D5 100%);
  background-size: 300% 300%;
  animation: hero-gradient-move 18s ease-in-out infinite;
}
.page-header::before { background: #FFD84D; opacity: 0.35; }
.page-header::after  { background: #0e8f76; opacity: 0.35; }
.page-header h1 { color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,0.35); }
.page-header .breadcrumbs { color: rgba(15,34,49,0.75); }
.page-header .breadcrumbs a { color: var(--brand-deep); }
.page-header .breadcrumbs a:hover { color: var(--ink); }


/* SOFT SECTION BACKGROUND — was a very pale mint. Shift to a
   very soft cream so the whole page reads with the new palette. */
body:not(.admin-app) .section-soft {
  background: #FEF9E7;
}


/* Accent: brand kicker chip now shows a warm yellow highlight
   alongside teal. Only inside `.section-title` on public pages. */
body:not(.admin-app) .section-title .kicker {
  background: linear-gradient(90deg, var(--bg-tint), #FFF3B0);
  color: var(--brand-deep);
}


/* ----- 2. Logo colour (Shell-style yellow / orange) ----- */

/* The KUSO logo PNG is left untouched on disk. We just apply a
   CSS filter to turn the red letters into a warm yellow-orange.
   Same rule works for the header logo AND the footer logo, so
   the brand colour is identical across public pages, subpages,
   admin login, dashboard, images, content, and notifications. */
.brand img {
  filter: hue-rotate(38deg) saturate(1.55) brightness(1.08);
}
/* The footer previously inverted the logo to plain white; we
   drop that so the same tint shines through the dark footer. */
.footer-brand img {
  filter: hue-rotate(38deg) saturate(1.55) brightness(1.15);
}


/* ----- 3. Navbar alignment + spacing (responsive fix) -----
   The 8-item menu was wrapping "Sonna Kodum" onto 2 lines at
   normal laptop widths. Below fixes keep everything on ONE
   perfectly-aligned row on desktop, and cleanly switch to
   the hamburger on tablet + mobile. Header height stays 78px
   (66px when scrolled) at every width. */

/* Header spans the full viewport so the KUSO logo sits at the
   absolute TOP-LEFT and the nav items sit on the right. The
   row never wraps to a second line. */
.header-inner {
  max-width: none;
  margin: 0;
  padding: 0 22px;
  gap: 20px;
  align-items: center;
  flex-wrap: nowrap;      /* logo + nav must stay in one row */
  width: 100%;
}

/* Every nav item is one line, no wrapping, evenly spaced.
   `margin: 0 auto` uses the leftover horizontal space to sit
   the whole menu in the middle of the header - logo is still
   pinned at the top-left, but the nav no longer clings to
   the top-right corner. */
.nav-menu {
  gap: 6px;
  flex-wrap: nowrap;
  margin: 0 auto;
}
.nav-menu li { flex: 0 0 auto; }
.nav-menu a  {
  padding: 10px 12px;
  white-space: nowrap;    /* "Sonna Kodum" stays on one line */
}

/* Brand block never squashes when the nav is long. */
.brand      { flex-shrink: 0; }
.brand-text { min-width: 0; }

/* Header brand text — colour both lines to match the KUSO logo (magenta).
   Applies to the main page and every subpage automatically because the
   header markup is identical on every file. */
:root { --brand-magenta: #C21D7A; }   /* matches the red-magenta in KUSO logo */

.brand-text strong { color: var(--brand-magenta); }
.brand-text span   {
  display: block;                       /* was hidden before — bring it back */
  color: var(--brand-magenta);
  font-weight: 600;
}
/* Admin panel keeps the original neutral colour. */
body.admin-app .brand-text strong,
body.admin-app .brand-text span { color: var(--ink); }


/* ==== RESPONSIVE HEADER — smaller logo, tighter nav so the entire menu
   fits on any screen from small laptops down to phones without the user
   ever having to zoom out.  The desktop default already shrinks below
   the previous 78px header.
   ================================================================ */

/* DESKTOP DEFAULT — very compact so the 8-item nav fits every laptop
   with plenty of breathing room.  Everything above 1201px uses this. */
:root { --header-h: 56px; }
.header-inner { padding: 0 16px; gap: 12px; }
.brand img    { height: 34px; }
.brand-text strong { font-size: 0.92rem; letter-spacing: 0.4px; }
.brand-text span   { font-size: 0.6rem;  letter-spacing: 0.2px; }
.nav-menu     { gap: 2px; }
.nav-menu a   { padding: 7px 9px; font-size: 0.82rem; }
.nav-cta      { padding: 7px 15px !important; font-size: 0.82rem; }

/* Small laptops / big tablets 992-1200 */
@media (max-width: 1200px) {
  .brand img { height: 30px; }
  .brand-text strong { font-size: 0.88rem; }
  .brand-text span   { font-size: 0.58rem; }
  .nav-menu a  { padding: 6px 7px; font-size: 0.78rem; }
  .nav-cta     { padding: 6px 13px !important; font-size: 0.78rem; }
  .header-inner { padding: 0 12px; gap: 8px; }
}

/* Below 991 the hamburger drawer takes over (already handled elsewhere) */
@media (max-width: 991px) {
  .header-inner  { padding: 0 14px; gap: 12px; }
  .brand img     { height: 42px; }
  .brand-text strong { font-size: 1rem; letter-spacing: 0.5px; }
  .brand-text span   { font-size: 0.65rem; letter-spacing: 0.2px; }
  .nav-toggle    { font-size: 1.5rem; padding: 4px; flex-shrink: 0; }
}

/* Phones */
@media (max-width: 480px) {
  :root { --header-h: 60px; }
  .header-inner  { padding: 0 10px; gap: 8px; }
  .brand img     { height: 36px; }
  .brand-text strong { font-size: 0.95rem; }
  .brand-text span   {
    font-size: 0.6rem;
    max-width: 55vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Very small phones (below iPhone SE) */
@media (max-width: 360px) {
  .brand img     { height: 32px; }
  .brand-text strong { font-size: 0.9rem; }
  .brand-text span   { display: none; }
}


/* ==== NAV-MENU LINKS in warm KUSO magenta (with a hint of yellow) ====
   Home / About / Mela / Sonna Kodum / Horoscopes / Gallery / Events all
   get a warm rose-red tone that reads as "magenta + a little yellow".
   The Contact CTA pill keeps its white text on the teal gradient. */
:root { --brand-nav: #D93B57; }              /* magenta + touch of yellow */

body:not(.admin-app) .nav-menu a {
  color: var(--brand-nav);
}
body:not(.admin-app) .nav-menu a:hover,
body:not(.admin-app) .nav-menu li.active a {
  color: #A6142F;                             /* darker on hover / active */
}
body:not(.admin-app) .nav-menu a::before {   /* underline accent */
  background: var(--brand-nav);
}
/* The Contact button keeps its existing white-on-gradient styling. */
body:not(.admin-app) .nav-menu a.nav-cta { color: #fff; }
body:not(.admin-app) .nav-menu a.nav-cta:hover { color: #fff !important; }


/* ==== MAIN PAGE + SUBPAGE MAIN HEADINGS in KUSO logo magenta ====
   Recolour the big "Karnataka United Sourashtra Organisation" style
   headings so they match the KUSO logo tint instead of the old dark
   ink.  Runs on every public page, safely skipped on the admin panel. */

/* Hero H1 on the homepage: the whole line + the "Sourashtra" gradient
   span both go magenta.  !important is used to defeat the earlier
   FINAL UI OVERRIDES rules that set them to dark ink. */
body:not(.admin-app) .hero h1,
body:not(.admin-app) .hero h1 .grad {
  color: var(--brand-magenta) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: var(--brand-magenta) !important;
}

/* Subpage banner title (Office Bearers, EC Members, 40th Mela, etc.) */
body:not(.admin-app) .page-header h1 {
  color: var(--brand-magenta) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}

/* Nothing to change below 991px - animations.css already
   turns .nav-toggle on and slides .nav-menu in as a drawer. */


/* =========================================================
   UPCOMING PROGRAMS + EVENT SECTIONS
   ---------------------------------------------------------
   Reuses existing tokens (--brand, --grad-brand, --radius,
   --shadow-*) so it feels part of the site. Responsive:
   auto-fit grid -> stacks on mobile.
   ========================================================= */

.upcoming-grid {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.upcoming-card {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.upcoming-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-3);
}
.upcoming-card .up-date {
  flex: 0 0 96px;
  background: var(--grad-brand);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 8px;
  text-align: center;
  font-family: "Raleway", sans-serif;
  line-height: 1.1;
}
.upcoming-card .up-day  { font-size: 2.1rem; font-weight: 800; }
.upcoming-card .up-mon  { font-size: 1rem;   font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-top: 2px; }
.upcoming-card .up-year { font-size: 0.85rem; opacity: 0.85; margin-top: 6px; }
.upcoming-card .up-body { padding: 20px 22px; flex: 1; }
.upcoming-card .up-tag {
  display: inline-block;
  font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand-2); background: var(--bg-tint);
  padding: 4px 12px; border-radius: 999px;
  font-weight: 800;
  margin-bottom: 10px;
}
.upcoming-card .up-body h4 { margin: 0 0 6px; font-size: 1.1rem; color: var(--brand-deep); }
.upcoming-card .up-body p  { margin: 0; color: var(--muted); font-size: 0.92rem; }
.upcoming-card .up-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  background: var(--grad-brand);
  color: #fff;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(27,172,145,0.35);
  transition: transform var(--tr), box-shadow var(--tr);
}
.upcoming-card .up-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(27,172,145,0.55);
}

/* Mela 40 page — "coming soon" placeholder inside a language tab */
.mela40-soon {
  text-align: center;
  color: var(--muted);
  font-style: italic;
  padding: 40px 16px;
  margin: 0;
}
.mela40-lang-note {
  text-align: center;
  color: var(--muted);
  margin: 24px 0 20px;
}

/* Mela 40 poster figure (English + Tamil tabs)
   The PDF was rendered at 1488x2105.  We display it centred, capped at
   a comfortable reading width, and always preserving aspect ratio.
   The caption below is a simple "Download PDF" link. */
.mela40-figure {
  margin: 0;
  text-align: center;
}
.mela40-figure img {
  display: block;
  width: 100%;
  max-width: 680px;      /* readable on big screens without hitting the ceiling */
  height: auto;          /* keep original aspect ratio */
  margin: 0 auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  background: #fff;
}
.mela40-figure figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
}
.mela40-figure figcaption a {
  color: var(--brand-2);
  font-weight: 700;
}


/* =========================================================
   MELA-40 STANDALONE LANGUAGE PAGES (Telugu / Kannada)
   ---------------------------------------------------------
   One clean centred card, readable on every screen.
   Fonts (Noto Sans Telugu / Kannada) are loaded in the page
   itself so glyphs render correctly.
   ========================================================= */
.mela-doc {
  max-width: 820px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 44px 44px 40px;
  color: var(--ink);
}
.mela-doc .mela-doc-kicker {
  text-align: center;
  color: var(--brand-deep);
  font-weight: 700;
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.mela-doc .mela-doc-title {
  text-align: center;
  color: var(--brand-2);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  margin: 0 0 8px;
}
.mela-doc .mela-doc-date {
  text-align: center;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 26px;
  font-size: 1.05rem;
}
.mela-doc p {
  margin: 0 0 16px;
  color: #334155;
}
.mela-doc p b { color: var(--brand-2); }
.mela-doc a { color: var(--brand-2); font-weight: 700; }
.mela-doc .mela-doc-contact-title {
  text-align: center;
  margin: 26px 0 12px;
  color: var(--ink);
  font-weight: 700;
}
.mela-doc .mela-doc-contacts {
  list-style: none;
  margin: 0 auto 22px;
  padding: 0;
  text-align: center;
  font-weight: 700;
  color: var(--brand-deep);
}
.mela-doc .mela-doc-contacts li { padding: 6px 0; }
.mela-doc .mela-doc-signoff {
  text-align: center;
  margin: 20px 0 0;
  color: var(--accent);
  letter-spacing: 1px;
  font-size: 1.05rem;
}

@media (max-width: 640px) {
  .mela-doc { padding: 28px 22px 26px; }
}

/* Font stacks for the inline language cards inside the mela40 tabs.
   Standalone pages already load their font via their own <style>. */
.mela-doc-kn,
.mela-doc-kn h1,
.mela-doc-kn h2,
.mela-doc-kn p {
  font-family: "Noto Sans Kannada", "Open Sans", sans-serif;
  line-height: 1.9;
}
.mela-doc-te,
.mela-doc-te h1,
.mela-doc-te h2,
.mela-doc-te p {
  font-family: "Noto Sans Telugu", "Open Sans", sans-serif;
  line-height: 1.9;
}

/* When the mela-doc sits inside a tab panel, drop the outer card
   shadow / border so it blends with the surrounding tabs frame. */
.tab-panel .mela-doc {
  box-shadow: none;
  border: 0;
  padding: 20px 8px 8px;
}

@media (max-width: 480px) {
  .upcoming-card { flex-direction: column; }
  .upcoming-card .up-date { flex: none; width: 100%; padding: 14px; flex-direction: row; gap: 10px; }
  .upcoming-card .up-day  { font-size: 1.4rem; }
  .upcoming-card .up-mon  { font-size: 0.9rem; margin-top: 0; }
  .upcoming-card .up-year { margin-top: 0; }
}

/* -------- Event section -------- */
.event-list {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.event-notice {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.event-notice:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-3);
}
.event-notice .event-media {
  display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-tint);
}
.event-notice .event-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--tr);
}
.event-notice:hover .event-media img { transform: scale(1.04); }
.event-notice .event-info { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.event-notice .event-date {
  font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--brand-2); font-weight: 800;
}
.event-notice h4 { margin: 0; font-size: 1.15rem; color: var(--brand-deep); }
.event-notice p  { margin: 0; color: #334155; font-size: 0.95rem; }
.event-notice .event-pdf { align-self: flex-start; margin-top: 6px; padding: 10px 22px; font-size: 0.85rem; }
.event-empty {
  text-align: center;
  color: var(--muted);
  padding: 32px 12px;
  font-style: italic;
}


/* =========================================================
   TEAM PAGE PLACEHOLDER (when person cards are being refreshed)
   ========================================================= */
.team-placeholder {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 1rem;
  padding: 26px 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--bg-tint);
}
.team-placeholder b { color: var(--brand-2); }


/* =========================================================
   APPLICATION FORMS — cleaner card layout
   ---------------------------------------------------------
   Replaces the old col-md-6/col-lg-3 grid with an
   auto-fit grid, gives each thumbnail a contained frame so
   the form preview keeps its aspect ratio without hulking
   over the text, and adds a proper CTA line.
   ========================================================= */
.app-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 1100px;
  margin: 0 auto;
}
.app-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border: 1px solid var(--line);
  text-align: center;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  position: relative;
  isolation: isolate;
}
.app-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(34,216,182,0.15), transparent 55%);
  opacity: 0; transition: opacity var(--tr);
  pointer-events: none; z-index: 1;
}
.app-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-3); }
.app-card:hover::before { opacity: 1; }

.app-card .app-thumb {
  display: flex; align-items: center; justify-content: center;
  padding: 18px 18px 4px;
  background: linear-gradient(180deg, #fff, var(--bg-tint));
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.app-card .app-thumb img {
  max-height: 100%;
  max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  background: #fff;
  transition: transform var(--tr);
}
.app-card:hover .app-thumb img { transform: scale(1.04); }

.app-card .info {
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; gap: 8px;
  position: relative; z-index: 2;
}
.app-card .info b {
  color: var(--brand-deep);
  font-size: 1.02rem;
  font-family: "Raleway", sans-serif;
  letter-spacing: 0.2px;
}
.app-card .info .lang {
  display: inline-block;
  margin: 0 auto;
  padding: 4px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
}
.app-card .info .cta-line {
  color: var(--brand-2);
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 2px;
}

/* Legacy .app-card usages (Sonna Kodum download, etc.) that use <img>
   as a direct child continue to work with these safe fallbacks. */
.app-card > img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}


/* =========================================================
   HOROSCOPE — 39th Mela placeholder cards (girls / boys)
   Contained image (no stretching), compact centred card.
   ========================================================= */
.horoscope-row {
  display: flex;
  justify-content: center;
  margin: 20px 0 30px;
}
.horoscope-card {
  display: flex; flex-direction: column;
  width: 240px; max-width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  text-align: center;
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.horoscope-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-3); }
.horoscope-card .hc-thumb {
  height: 260px;
  display: flex; align-items: flex-start; justify-content: center;
  background: linear-gradient(180deg, #fff, var(--bg-tint));
  padding: 12px;
  overflow: hidden;
}
.horoscope-card .hc-thumb img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.horoscope-card .hc-info { padding: 16px 14px 20px; }
.horoscope-card .hc-info h4 { margin: 0 0 4px; color: var(--brand-deep); font-size: 1.05rem; }
.horoscope-card .hc-info span { color: var(--muted); font-size: 0.85rem; }

/* ---- Standalone horoscope pages: grid of page thumbnails ----
   Each item is one PDF page rendered as a JPG.  Click = open the
   full-size image (existing site lightbox handles the popup).
   Responsive auto-fit grid keeps it clean on every screen. */
.horoscope-pages {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 40px;
}
.horoscope-page {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  text-decoration: none;
  color: inherit;
}
.horoscope-page:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-3);
}
.horoscope-page img {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
}
.horoscope-page .hp-num {
  display: block;
  text-align: center;
  padding: 10px 8px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-2);
  background: var(--bg-tint);
}