/* ============================================================
   VICTORY HOUSE JUNIOR CHURCH — Stylesheet
   RCCG Victory House Geneva
   Version 1.0 | April 2026
   ============================================================ */

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Purple palette */
  --j950: #1A0B38;
  --j800: #2D1565;
  --j700: #4A1D96;
  --j500: #7C3AED;
  --j400: #A855F7;
  --j100: #EDE9FE;

  /* Fun accents */
  --coral:  #F97316;   /* orange */
  --coral-d:#C05D0F;
  --sky:    #0EA5E9;   /* blue */
  --mint:   #10B981;   /* green */
  --pink:   #EC4899;   /* hot pink */
  --gold:   #C9A235;
  --gold-l: #E8C05A;
  --gold-d: #A07D1C;

  /* Surfaces */
  --off:    #F8F4FF;
  --muted:  #5B4B7A;

  /* Shape */
  --r:   12px;
  --rl:  18px;
  --rx:  24px;

  /* Shadows */
  --sh-sm: 0 2px 14px rgba(26,11,56,.1);
  --sh-lg: 0 14px 52px rgba(26,11,56,.2);
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: "Nunito", "Segoe UI", sans-serif; color: var(--j950); background: #fff; line-height: 1.6; }
a     { text-decoration: none; }
img   { max-width: 100%; display: block; }

/* ── FLOATING STARS BACKGROUND ───────────────────────────── */
.stars-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.star {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  animation: starFloat linear infinite;
}
@keyframes starFloat {
  0%   { transform: translateY(0) scale(0); opacity: 0; }
  10%  { opacity: 1; transform: scale(1); }
  90%  { opacity: .6; }
  100% { transform: translateY(-120vh) scale(.3); opacity: 0; }
}

/* ── WAVY DIVIDER ─────────────────────────────────────────── */
.wave-divider { width: 100%; overflow: hidden; line-height: 0; }
.wave-divider svg { display: block; }

/* ── NAVIGATION ───────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999;
  background: var(--j950);
  border-bottom: 1px solid rgba(201,162,53,.2);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}
.nbrand { display: flex; align-items: center; gap: 10px; }
.nbrand img { height: 40px; width: 40px; object-fit: contain; border-radius: 50%; }
.nbrand-text h4 { font-family: "Fredoka One", "Nunito", sans-serif; font-size: 13px; color: #fff; font-weight: 700; letter-spacing: .04em; line-height: 1.2; }
.nbrand-text span { font-size: 10px; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; }
.nnav { display: flex; align-items: center; gap: 16px; }
.nback { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.6); font-size: 13px; font-weight: 600; transition: color .2s; }
.nback:hover { color: var(--gold); }
.nback svg { width: 14px; height: 14px; }
.nsep { color: rgba(255,255,255,.2); font-size: 14px; }

/* ── HERO (50vh) ──────────────────────────────────────────── */
.hero {
  min-height: 50vh;
  background: linear-gradient(135deg, var(--j950) 0%, var(--j800) 40%, #3B1A7A 70%, #5B0F4E 100%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center;
  padding: 82px 40px 50px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(124,58,237,.35) 0%, transparent 55%),
              radial-gradient(ellipse at 20% 70%, rgba(236,72,153,.2) 0%, transparent 50%);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(201,162,53,.15); border: 1px solid rgba(201,162,53,.35);
  border-radius: 100px; padding: 7px 18px; margin-bottom: 20px;
  position: relative; z-index: 2;
}
.hero-badge span { color: var(--gold-l); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); animation: pulse 2s infinite; flex-shrink: 0; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);} }

.hero h1 {
  font-family: "Fredoka One", sans-serif;
  font-size: clamp(36px, 6vw, 76px);
  color: #fff;
  line-height: 1.0;
  margin-bottom: 16px;
  position: relative; z-index: 2;
  text-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.hero h1 em { color: var(--coral); font-style: normal; }
.hero h1 .accent { color: var(--gold-l); }

.hero-sub {
  font-size: clamp(14px,1.6vw,17px);
  color: rgba(255,255,255,.78);
  max-width: 540px; line-height: 1.8;
  margin-bottom: 24px;
  position: relative; z-index: 2;
}
.hero-verse {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-left: 4px solid var(--coral);
  border-radius: var(--rl); padding: 14px 22px;
  max-width: 500px; margin-bottom: 28px;
  position: relative; z-index: 2;
}
.hero-verse p { font-size: 13px; color: rgba(255,255,255,.82); font-style: italic; line-height: 1.7; }
.hero-verse cite { font-size: 11px; color: var(--gold-l); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; display: block; margin-top: 5px; }

.hbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 2; }
.hero-scroll {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: rgba(255,255,255,.3); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  z-index: 2; animation: scrollbounce 2.5s ease-in-out infinite;
}
.hero-scroll svg { width: 18px; height: 18px; opacity: .4; }
@keyframes scrollbounce { 0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(8px);} }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 26px; border-radius: var(--rx);
  font-family: "Fredoka One", sans-serif; font-size: 14px;
  letter-spacing: .03em; cursor: pointer;
  transition: all .25s; border: none; text-decoration: none;
}
.btn-coral { background: linear-gradient(135deg,var(--coral),var(--coral-d)); color:#fff; box-shadow:0 6px 22px rgba(249,115,22,.4); }
.btn-coral:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(249,115,22,.6); }
.btn-purple { background: linear-gradient(135deg,var(--j500),var(--j700)); color:#fff; box-shadow:0 6px 22px rgba(124,58,237,.4); }
.btn-purple:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(124,58,237,.6); }
.btn-gold { background: linear-gradient(135deg,var(--gold),var(--gold-d)); color:var(--j950); box-shadow:0 6px 22px rgba(201,162,53,.35); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 10px 32px rgba(201,162,53,.5); }
.btn-outline { background:transparent; border:2px solid rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover { border-color:var(--coral); color:var(--coral); transform:translateY(-2px); }

/* ── AGE GROUPS STATS BAR ─────────────────────────────────── */
.age-bar { background: linear-gradient(135deg,var(--j950),var(--j800)); border-top: 3px solid var(--coral); }
.age-groups { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.06); }
.age-card {
  padding: 28px 20px; text-align: center; background: rgba(255,255,255,.03);
  transition: background .25s;
}
.age-card:hover { background: rgba(255,255,255,.08); }
.age-ico { font-size: 38px; margin-bottom: 8px; display: block; animation: bounce 2s ease-in-out infinite; }
.age-card:nth-child(1) .age-ico { animation-delay: 0s; }
.age-card:nth-child(2) .age-ico { animation-delay: .3s; }
.age-card:nth-child(3) .age-ico { animation-delay: .6s; }
.age-card:nth-child(4) .age-ico { animation-delay: .9s; }
@keyframes bounce { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }
.age-label { font-family: "Fredoka One", sans-serif; font-size: 20px; color: #fff; display: block; line-height: 1.1; margin-bottom: 4px; }
.age-sub { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; }

/* ── SECTION BASE ─────────────────────────────────────────── */
.sec { padding: 80px 36px; }
.sec-dark  { background: linear-gradient(135deg,var(--j950),var(--j800)); }
.sec-off   { background: var(--off); }
.sec-white { background: #fff; }
.sec-fun   { background: linear-gradient(135deg,#FFF4F0,#F8F4FF,#F0FAFF); }
.max { max-width: 1160px; margin: 0 auto; }
.ctr { text-align: center; }

.ey { font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--j500); display: block; margin-bottom: 6px; }
.ey-light { color: rgba(201,162,53,.8); }
.ey-coral { color: var(--coral); }

h2 { font-family: "Fredoka One", sans-serif; font-size: clamp(28px,3.5vw,46px); color: var(--j950); font-weight: 400; line-height: 1.15; }
h2.light { color: #fff; }

.div { width: 52px; height: 4px; background: linear-gradient(90deg,var(--coral),var(--j400)); border-radius: 4px; margin: 14px auto 24px; }
.div-left { margin-left: 0; }

p.lead { font-size: 16px; color: var(--muted); line-height: 1.85; max-width: 660px; margin: 0 auto; }

/* ── FUN PILLARS ──────────────────────────────────────────── */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
.pil {
  background: #fff; border-radius: var(--rl); padding: 34px 26px;
  box-shadow: var(--sh-sm); text-align: center; transition: all .3s;
  border-top: 5px solid var(--coral); position: relative; overflow: hidden;
}
.pil::before {
  content: ""; position: absolute; bottom: -30px; right: -30px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.07), transparent 70%);
}
.pil:hover { transform: translateY(-7px) rotate(.5deg); box-shadow: var(--sh-lg); }
.pil:nth-child(2) { border-top-color: var(--j500); }
.pil:nth-child(3) { border-top-color: var(--mint); }
.pil-ico { font-size: 44px; margin-bottom: 14px; display: block; }
.pil h3 { font-family: "Fredoka One", sans-serif; font-size: 22px; color: var(--j800); margin-bottom: 10px; }
.pil p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.pil .pil-verse { font-size: 11px; font-style: italic; color: var(--j500); margin-top: 12px; display: block; }

/* ── MISSION TILES ────────────────────────────────────────── */
.mission-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.mtile { background: rgba(255,255,255,.06); padding: 38px 30px; border: 1px solid rgba(255,255,255,.08); transition: background .25s; }
.mtile:hover { background: rgba(255,255,255,.11); }
.mtile-num { font-family: "Fredoka One", sans-serif; font-size: 52px; color: var(--coral); line-height: 1; display: block; margin-bottom: 12px; opacity: .7; }
.mtile h4 { font-family: "Fredoka One", sans-serif; font-size: 20px; color: #fff; margin-bottom: 10px; }
.mtile p { color: rgba(255,255,255,.72); font-size: 14.5px; line-height: 1.8; }

/* ── ACTIVITIES ───────────────────────────────────────────── */
.acts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.act-list { display: grid; gap: 16px; }
.act {
  background: #fff; border-radius: var(--r); padding: 20px 18px;
  box-shadow: var(--sh-sm); display: flex; gap: 14px; align-items: flex-start;
  border-left: 5px solid var(--coral); transition: all .25s;
}
.act:hover { transform: translateX(5px); box-shadow: var(--sh-lg); }
.act:nth-child(2) { border-left-color: var(--j500); }
.act:nth-child(3) { border-left-color: var(--mint); }
.act:nth-child(4) { border-left-color: var(--sky); }
.act:nth-child(5) { border-left-color: var(--pink); }
.act-ico { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
.act h4 { font-family: "Fredoka One", sans-serif; font-size: 17px; color: var(--j800); margin-bottom: 4px; }
.act p { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── SCHEDULE CARD ────────────────────────────────────────── */
.sched-card { background: linear-gradient(135deg,var(--j800),var(--j700)); border-radius: var(--rl); padding: 32px; margin-bottom: 20px; }
.sched-card h3 { font-family: "Fredoka One", sans-serif; color: var(--gold); font-size: 20px; margin-bottom: 18px; }
.sched-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.sched-row:last-child { border-bottom: none; }
.sched-row span:first-child { color: rgba(255,255,255,.75); font-size: 14px; }
.sched-row span:last-child { color: var(--coral); font-weight: 700; font-size: 14px; font-family: "Fredoka One", sans-serif; }

/* ── JOIN FORM CARD ───────────────────────────────────────── */
.join-card { background: #fff; border-radius: var(--rl); padding: 34px; box-shadow: var(--sh-lg); border-top: 5px solid var(--coral); }
.join-card h3 { font-family: "Fredoka One", sans-serif; font-size: 22px; color: var(--j800); margin-bottom: 5px; }
.join-card .sub { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.fg { margin-bottom: 14px; }
.fg label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--j700); margin-bottom: 5px; }
.fg input, .fg select, .fg textarea { width: 100%; padding: 11px 14px; border: 2px solid #E0D4F7; border-radius: 10px; font-family: inherit; font-size: 14px; color: var(--j950); background: #fff; transition: border-color .2s; outline: none; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--j400); box-shadow: 0 0 0 3px rgba(168,85,247,.12); }
.fg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg,var(--coral),var(--coral-d)); color: #fff; border: none; border-radius: var(--rx); font-family: "Fredoka One", sans-serif; font-size: 16px; cursor: pointer; transition: all .25s; margin-top: 4px; }
.submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(249,115,22,.45); }

/* ── GALLERY ──────────────────────────────────────────────── */
.collage-section { overflow: hidden; background: var(--j950); }
.collage-header { text-align: center; padding: 48px 36px 32px; }

.collage-hero { position: relative; height: 460px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; }
.collage-main { grid-row: 1/3; position: relative; overflow: hidden; }
.collage-cell { position: relative; overflow: hidden; }
.collage-cell img, .collage-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s, filter .4s; }
.collage-cell:hover img, .collage-main:hover img { transform: scale(1.08); filter: brightness(1.07); }
.collage-cell::after, .collage-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,rgba(26,11,56,.65)); pointer-events: none; }
.collage-tag { position: absolute; bottom: 10px; left: 12px; z-index: 2; background: var(--coral); color: #fff; font-family: "Fredoka One", sans-serif; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; }
.collage-caption { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px 20px; background: linear-gradient(to top,rgba(26,11,56,.85) 0%,transparent 50%); }
.collage-caption h3 { font-family: "Fredoka One", sans-serif; font-size: 20px; color: #fff; margin-bottom: 5px; line-height: 1.2; }
.collage-caption p { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; }

.fun-line { height: 5px; background: linear-gradient(90deg,var(--j700),var(--coral),var(--gold),var(--mint),var(--sky),var(--j400)); opacity: .8; }

.mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 350px; }
.mosaic-tall { grid-row: 1/3; position: relative; overflow: hidden; }
.mosaic-tall img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mosaic-tall:hover img { transform: scale(1.05); }
.mosaic-sm { position: relative; overflow: hidden; }
.mosaic-sm img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mosaic-sm:hover img { transform: scale(1.06); }

.quote-strip { position: relative; height: 250px; overflow: hidden; }
.quote-strip .qs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; height: 100%; }
.quote-strip .qs-cell { overflow: hidden; }
.quote-strip .qs-cell img { width: 100%; height: 100%; object-fit: cover; }
.quote-overlay { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,rgba(26,11,56,.75),rgba(124,58,237,.55)); text-align: center; padding: 28px; }
.quote-overlay p { font-family: "Fredoka One", sans-serif; font-size: clamp(18px,2.8vw,32px); color: #fff; line-height: 1.3; margin-bottom: 10px; }
.quote-overlay cite { font-size: 11px; color: var(--gold-l); letter-spacing: .12em; text-transform: uppercase; }

/* ── TICKER ───────────────────────────────────────────────── */
.ticker-wrap { overflow: hidden; background: var(--j950); padding: 6px 0; border-top: 3px solid var(--coral); border-bottom: 3px solid var(--coral); }
.ticker-track { display: flex; gap: 5px; animation: ticker 40s linear infinite; width: max-content; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-thumb { width: 140px; height: 96px; flex-shrink: 0; border-radius: 10px; overflow: hidden; border: 2px solid rgba(255,255,255,.1); }
.ticker-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ticker-thumb:hover img { transform: scale(1.09); }
@keyframes ticker { from{transform:translateX(0);}to{transform:translateX(-50%);} }

/* ── GAL7 ─────────────────────────────────────────────────── */
.gal7 { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: 230px 230px; gap: 4px; }
.gal7-a { grid-column: 1/2; grid-row: 1/3; }
.gal7-b { grid-column: 2/3; grid-row: 1/2; }
.gal7-c { grid-column: 3/4; grid-row: 1/2; }
.gal7-d { grid-column: 4/5; grid-row: 1/3; }
.gal7-e { grid-column: 2/3; grid-row: 2/3; }
.gal7-f { grid-column: 3/4; grid-row: 2/3; }
.gal7-g { grid-column: 1/5; height: 190px; margin-top: 4px; }
.gal7 div { overflow: hidden; position: relative; }
.gal7 div img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .4s; }
.gal7 div:hover img { transform: scale(1.06); filter: brightness(1.05); }
.gal7 div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 55%,rgba(26,11,56,.5)); pointer-events: none; }
.gal7-g { position: relative; }
.gal7-g::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg,rgba(74,29,150,.65),rgba(26,11,56,.8),rgba(249,115,22,.4)); }
.gal7-g .gal-quote { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 22px; }
.gal-quote p { font-family: "Fredoka One", sans-serif; font-size: clamp(16px,2.2vw,26px); color: #fff; line-height: 1.3; margin-bottom: 8px; }
.gal-quote cite { font-size: 11px; color: var(--gold-l); letter-spacing: .12em; text-transform: uppercase; }

/* ── FUN SOCIALS ──────────────────────────────────────────── */
.socials { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; }
.soc-btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all .25s; }
.soc-btn:hover { transform: scale(1.15) rotate(-5deg); }
.soc-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: #fff; }
.soc-fb { background: #1877F2; color: #fff; }
.soc-yt { background: #FF0000; color: #fff; }

/* ── CTA SECTION ──────────────────────────────────────────── */
.cta-sec {
  background: linear-gradient(135deg,var(--j950) 0%,var(--j800) 50%,#4A0E3A 100%);
  padding: 90px 36px; text-align: center; position: relative; overflow: hidden;
}
.cta-sec::before { content: ""; position: absolute; inset: 0; opacity: .04; background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23F97316'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3C/g%3E%3C/svg%3E"); }

/* ── FULL SITE NAV OVERRIDE (replaces old nav{} rules) ────── */
nav#nav,nav#nav *{box-sizing:border-box;}
nav#nav{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:9000!important;height:82px!important;background:rgba(13,8,32,.97)!important;backdrop-filter:blur(14px);display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 36px!important;border-bottom:1px solid rgba(201,162,53,.3)!important;gap:0!important;flex-wrap:nowrap!important;}
nav#nav .nbrand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none;}
nav#nav .nbrand img{width:62px;height:62px;border-radius:50%;object-fit:contain;background:#fff;padding:3px;box-shadow:0 0 14px rgba(201,162,53,.3);}
nav#nav .nbrand-t strong{display:block;font-family:'Cinzel','Fredoka One',serif;font-size:14px;font-weight:700;color:#C9A235;letter-spacing:.06em;line-height:1.2;}
nav#nav .nbrand-t span{font-size:9.5px;color:rgba(255,255,255,.38);letter-spacing:.1em;text-transform:uppercase;}
nav#nav .nlinks{display:flex!important;align-items:center;gap:1px;margin-left:auto;flex-wrap:nowrap;}
nav#nav .nlinks>a,nav#nav .nlinks>.drop>a{color:rgba(255,255,255,.8);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:6px 10px;border-radius:5px;transition:all .2s;white-space:nowrap;display:block;}
nav#nav .nlinks>a:hover,nav#nav .nlinks>.drop>a:hover{color:#fff;background:rgba(80,70,212,.3);}
nav#nav .drop{position:relative;cursor:pointer;}
nav#nav .drop::after{content:'';position:absolute;top:100%;left:-10px;right:-10px;height:14px;background:transparent;}
nav#nav .drop>a::after{content:" ▾";font-size:8px;opacity:.6;}
nav#nav .dmenu{position:absolute;top:calc(100% + 8px);left:0;background:#110B2E;border:1px solid rgba(201,162,53,.22);border-top:2px solid #C9A235;border-radius:0 0 12px 12px;padding:8px 30px 12px 8px;min-width:240px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:all 0.2s ease;transition-delay:0.15s;z-index:10000;box-shadow:0 16px 48px rgba(0,0,0,.5);}
nav#nav .drop:hover .dmenu{opacity:1;pointer-events:all;transform:translateY(0);transition-delay:0s;}
nav#nav .dmenu a{display:flex!important;align-items:center;gap:10px;padding:9px 28px 9px 12px!important;border-radius:6px;color:rgba(255,255,255,.75);font-size:13px;font-weight:500;transition:all .15s;white-space:nowrap;width:100%;text-transform:none!important;letter-spacing:0!important;}
nav#nav .dmenu a:hover{background:rgba(80,70,212,.3);color:#fff;padding-left:16px!important;}
nav#nav .dmenu a span:first-child{font-size:15px;width:22px;text-align:center;flex-shrink:0;}
nav#nav .ngive{background:linear-gradient(135deg,#C9A235,#8A6B1A)!important;color:#fff!important;font-weight:700!important;padding:8px 16px!important;border-radius:6px!important;white-space:nowrap;}
nav#nav .nlinks>a.active,nav#nav .nlinks>.drop.active>a{color:#C9A235!important;background:rgba(201,162,53,.12)!important;}
nav#nav .ham{display:none!important;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;flex-shrink:0;}
nav#nav .ham span{display:block;width:24px;height:2px;background:#fff;border-radius:1px;transition:.3s;}
nav#nav .lang-sw{display:flex;align-items:center;gap:2px;margin-left:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:3px;flex-shrink:0;}
nav#nav .lang-btn{background:transparent;border:none;color:rgba(255,255,255,.6);font-size:11px;font-weight:700;padding:4px 8px;border-radius:5px;cursor:pointer;font-family:inherit;}
nav#nav .lang-btn.on{background:var(--gold);color:#0D0820;}
nav#nav .lang-btn:hover{color:#fff;background:rgba(255,255,255,.12);}
/* Mobile menu */
#mob{display:none;position:fixed;top:82px;left:0;right:0;bottom:0;background:rgba(13,8,32,.99);z-index:8999;overflow-y:auto;padding:12px 0;}
#mob.open{display:block!important;}
#mob a{display:block!important;color:rgba(255,255,255,.78);padding:13px 28px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
#mob a:hover{color:#fff!important;background:rgba(80,70,212,.2)!important;}
.mob-st{padding:12px 28px 4px;font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#C9A235;}
.mob-sub a{padding:9px 44px!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important;font-weight:500!important;}
@media(max-width:960px){
  nav#nav{padding:0 16px!important;}
  nav#nav .nlinks{display:none!important;}
  nav#nav .lang-sw{display:none!important;}
  nav#nav .ham{display:flex!important;}
}

/* ── FOOTER ───────────────────────────────────────────────── */
footer { background: var(--j950); border-top: 1px solid rgba(249,115,22,.2); padding: 36px; text-align: center; }
.footer-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; }
.footer-logo img { height: 38px; border-radius: 50%; }
.footer-logo span { font-family: "Fredoka One", sans-serif; font-size: 16px; color: #fff; }
.footer-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.45); font-size: 13px; transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.2); }
.footer-copy span { color: var(--coral); }

/* ── TOAST ────────────────────────────────────────────────── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--j800); color: #fff; padding: 12px 24px; border-radius: 100px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.4); border: 2px solid var(--coral); opacity: 0; transition: all .4s; z-index: 9999; pointer-events: none; white-space: nowrap; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media(max-width:900px) {
  nav { padding: 0 18px; }
  .sec { padding: 56px 20px; }
  .pillars { grid-template-columns: 1fr 1fr; }
  .acts-grid { grid-template-columns: 1fr; gap: 28px; }
  .mission-grid { grid-template-columns: 1fr; }
  .age-groups { grid-template-columns: 1fr 1fr; }
  .collage-hero { grid-template-columns: 1fr 1fr; height: auto; }
  .collage-main { grid-row: 1/2; grid-column: 1/3; height: 240px; }
  .collage-cell { height: 170px; }
  .mosaic { grid-template-columns: 1fr 1fr; height: auto; }
  .mosaic-tall { grid-row: 1/2; grid-column: 1/3; height: 220px; }
  .mosaic-sm { height: 170px; }
  .gal7 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .gal7-a, .gal7-d { grid-column: auto; grid-row: auto; height: 190px; }
  .gal7-b, .gal7-c, .gal7-e, .gal7-f { height: 170px; }
  .gal7-g { grid-column: 1/3; height: 150px; }
  .ticker-thumb { width: 110px; height: 80px; }
  .nnav .nback:first-child, .nnav .nback:nth-child(3) { display: none; }
}
@media(max-width:580px) {
  .pillars { grid-template-columns: 1fr; }
  .age-groups { grid-template-columns: 1fr 1fr; }
  .fg-row { grid-template-columns: 1fr; }
}