/* ============================================================
   Code N Bots — styled to match codenbots.org
   Teal #155261 + white · Adamina (serif display) + Poppins
   + fluid animations
   ============================================================ */

:root {
  /* Brand (sampled from codenbots.org) */
  --teal:    #155261;
  --teal-d:  #114551;
  --teal-dd: #0d3540;
  --gold:    #f3c44b;
  --gold-d:  #e0ad2e;
  --danger:  #c0492c;

  --white: #ffffff;
  --ink:   #2d3133;
  --ink-soft: #5b6c71;
  --line:  #e4e9ea;
  --line-teal: rgba(255,255,255,.18);

  /* text contexts */
  --on-teal: #ffffff;
  --on-teal-soft: rgba(255,255,255,.82);

  --font-head: "Adamina", Georgia, "Times New Roman", serif;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;

  --r: 6px;
  --r-lg: 10px;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.12);
  --shadow: 0 14px 36px rgba(0,0,0,.18);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.28);
  --ease: cubic-bezier(.22,.7,.2,1);
  --maxw: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--on-teal);
  background: var(--teal);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  animation: pageIn .6s var(--ease) both;
}
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 860px; }
.section { padding: 86px 0; }
.section-sm { padding: 50px 0; }
.center { text-align: center; }
.muted { color: var(--on-teal-soft); }
.lead { font-size: 1.14rem; }
.mt-1{margin-top:8px}.mt-2{margin-top:18px}.mt-3{margin-top:34px}.mb-0{margin-bottom:0}
.hidden{display:none !important}

/* ---- section contexts ---- */
.sec-teal  { background: var(--teal);  color: var(--on-teal); }
.sec-white { background: var(--white); color: var(--ink); }
.sec-white h1,.sec-white h2,.sec-white h3,.sec-white h4 { color: var(--ink); }
.sec-white .muted { color: var(--ink-soft); }

.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.sec-white .eyebrow { color: var(--gold-d); }

.rule { width: 64px; height: 2px; background: var(--gold); border: 0; margin: 18px 0; }
.center .rule, .rule.center { margin-left: auto; margin-right: auto; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- layout helpers ---- */
.row { display: flex; align-items: center; }
.row-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; }
.grid { display: grid; gap: 28px; }
.cols-2 { grid-template-columns: repeat(2,1fr); }
.cols-3 { grid-template-columns: repeat(3,1fr); }
.cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .cols-2,.cols-3,.cols-4 { grid-template-columns: 1fr; } }
@media (max-width: 900px){ .cols-3.keep,.cols-4.keep { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   Buttons — white square, uppercase (matches original)
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: .82rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 34px; border-radius: 0; border: 2px solid transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 16px 42px; font-size: .88rem; }
.btn-sm { padding: 9px 20px; font-size: .72rem; }
.btn-block { width: 100%; }

/* white button on teal */
.btn-primary { background: var(--white); color: var(--ink); }
.btn-primary:hover { background: var(--gold); color: var(--ink); box-shadow: var(--shadow-sm); }
/* outline on teal/photo */
.btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-outline:hover { background: #fff; color: var(--teal); }
/* teal button on white sections */
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--gold); color: var(--ink); }
/* gold button */
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold-d); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-danger { background: #fbe9e7; color: var(--danger); }
.btn-danger:hover { background: #f6d4cf; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.active { background: #fff; color: var(--teal); border-color: #fff; }

/* contextual: white primary buttons turn teal inside white cards/modals */
.card .btn-primary, .modal .btn-primary { background: var(--teal); color: #fff; }
.card .btn-primary:hover, .modal .btn-primary:hover { background: var(--gold); color: var(--ink); }
/* ghost buttons adapt to dark (teal) vs light (card) context */
.portal .btn-ghost, .sec-teal .btn-ghost, .hero .btn-ghost { color: #fff; border-color: rgba(255,255,255,.45); }
.portal .btn-ghost:hover, .sec-teal .btn-ghost:hover, .hero .btn-ghost:hover { background: #fff; color: var(--teal); border-color: #fff; }
.card .btn-ghost, .modal .btn-ghost { color: var(--ink); border-color: var(--line); }
.card .btn-ghost:hover, .modal .btn-ghost:hover { color: var(--teal); border-color: var(--teal); }
/* active filter state must beat every contextual ghost rule */
.btn.active, .portal .btn-ghost.active, .sec-teal .btn-ghost.active { background: #fff; color: var(--teal); border-color: #fff; }

/* ============================================================
   Header / nav — centered logo, centered nav
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 60; background: var(--teal);
  transition: box-shadow .3s var(--ease), padding .3s var(--ease);
}
.nav.scrolled { box-shadow: 0 6px 22px rgba(0,0,0,.25); }
.nav-top { display: flex; justify-content: flex-end; padding: 10px 0 0; }
.nav-phone { color: #fff; font-size: 1.15rem; font-weight: 300; }
.nav-phone b { font-weight: 600; }
.nav-brand { display: flex; justify-content: center; padding: 6px 0 2px; }
.nav-brand img { height: 92px; width: auto; transition: transform .6s var(--ease), height .3s var(--ease); }
.nav-brand:hover img { transform: rotate(8deg) scale(1.04); }
.nav-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 8px 0 16px;
}
.nav-links a {
  position: relative; color: #fff; font-size: .82rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; padding: 8px 16px;
}
.nav-links a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav.scrolled .nav-brand img { height: 64px; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 10px;
  position: absolute; right: 14px; top: 14px; z-index: 5;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; margin: 6px 0; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 820px){
  .nav .container { position: relative; }
  .nav-top { justify-content: center; }
  .nav-phone { font-size: .95rem; }
  .nav-brand img { height: 64px; }
  .nav-toggle { display: block; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 16px; }
  .nav-links a { padding: 9px 14px; font-size: .8rem; letter-spacing: .12em; }
}

/* ============================================================
   Hero — full-bleed photo, centered serif title
   ============================================================ */
.hero {
  position: relative; overflow: hidden; min-height: 360px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 96px 24px;
}
.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  animation: kenburns 18s ease-out both;
}
.hero-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(13,53,64,.45), rgba(13,53,64,.58));
}
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-inner { position: relative; z-index: 2; max-width: 880px; }
.hero h1 {
  text-transform: uppercase; letter-spacing: .02em; color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero .hero-sub { font-size: 1.15rem; color: #fff; max-width: 62ch; margin-left: auto; margin-right: auto; }
.hero .rule { background: var(--gold); margin: 22px auto; }
/* compact hero for sub-pages; overlap variant leaves room for a pulled-up card */
.hero-sm { min-height: auto; padding: 88px 24px; }
.hero-sm.hero-overlap { padding-bottom: 116px; }


/* ============================================================
   Content blocks
   ============================================================ */
.block-title { margin-bottom: .4em; }
.feature-img { border-radius: var(--r-lg); box-shadow: var(--shadow); width: 100%; object-fit: cover; }

/* cards (used for programs/camps + app surfaces) */
.card {
  background: var(--white); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-sm);
}
.card h1,.card h2,.card h3,.card h4 { color: var(--ink); }
.card .muted, .modal .muted, table.tbl .muted { color: var(--ink-soft); }
.card p a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.card p a:hover { color: var(--gold-d); }
.card-pad-lg { padding: 38px; }
.card-pad-sm { padding: 16px; }
.container-slim { max-width: 840px; }
.card-hover { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.card-hover:hover { transform: translateY(-8px); box-shadow: var(--shadow); }

.prog-card { display: flex; flex-direction: column; height: 100%; }
.prog-card .body { flex: 1; }
.prog-card > .btn { margin-top: auto; }
.price { font-family: var(--font-head); font-size: 1.5rem; color: var(--teal); }
.price small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; color: var(--ink-soft); }
.meta-row { display: flex; flex-direction: column; gap: 8px; font-size: .9rem; color: var(--ink-soft); margin: 14px 0; }
.meta-row .mi { display: flex; gap: 9px; align-items: flex-start; }
.meta-row .mi b { color: var(--ink); font-weight: 600; }

/* pills / tags / badges */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:600;
  color: var(--teal); background: #eaf2f3; border:1px solid #d7e6e8; padding:5px 12px; border-radius:999px; }
.tag { font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:3px; }
.pill-gold{ background:#fbedc4; border-color:#f4dd9b; color:#9a7611; }
.pill-coral{ background:#fde6df; border-color:#f8cdc0; color:var(--danger); }
.pill-mint{ background:#dbf1e9; border-color:#bfe7da; color:#1c8a6c; }
.badge{ font-size:.72rem; font-weight:700; padding:4px 9px; border-radius:999px; }
.badge-ok{ background:#dbf1e9; color:#1c8a6c; } .badge-no{ background:#fde6df; color:var(--danger); }
.badge-warn{ background:#fbedc4; color:#9a7611; } .badge-info{ background:#e5eff1; color:var(--teal); }

.ficon{ width:54px;height:54px;border-radius:10px;display:grid;place-items:center;background:#eaf2f3;color:var(--teal);font-size:1.4rem;flex:none; }
.ficon.gold{background:#fbedc4;color:#9a7611}.ficon.coral{background:#fde6df;color:var(--danger)}.ficon.mint{background:#dbf1e9;color:#1c8a6c}

.progress{ height:7px; background:var(--line); border-radius:999px; overflow:hidden; margin-top:8px; }
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--teal)); }

.inc-label{ display:block; font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.76rem; color:var(--gold); margin:18px 0 8px; }
.sec-white .inc-label{ color:var(--gold-d); }
.inc-list{ list-style:none; padding:0; margin:0 0 8px; }
.inc-list li{ position:relative; padding-left:24px; margin-bottom:7px; }
.inc-list li::before{ content:"▸"; position:absolute; left:2px; color:var(--gold); }
.sec-white .inc-list li::before{ color:var(--gold-d); }

.divider{ height:1px;background:var(--line);margin:22px 0; }
.kpi{ display:flex;align-items:center;gap:14px; }
.kpi .num{ font-family:var(--font-head);font-size:1.9rem;color:var(--teal);line-height:1; }

/* ============================================================
   Footer
   ============================================================ */
.footer { background: var(--teal-dd); color: rgba(255,255,255,.78); padding: 64px 0 26px; }
.footer h4 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; font-family: var(--font-body); font-weight: 600; letter-spacing:.04em; }
.footer a { color: rgba(255,255,255,.78); display:block; padding: 4px 0; transition: color .2s; }
.footer a:hover { color: var(--gold); }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1.3fr; gap: 40px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr; gap:30px; } }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); margin-top:40px; padding-top:22px; font-size:.76rem; letter-spacing:.04em; color: rgba(255,255,255,.6); text-transform: uppercase; }

/* ============================================================
   Forms / app
   ============================================================ */
.field { margin-bottom: 16px; }
.field > label { display:block; font-weight:600; font-size:.88rem; color:var(--ink); margin-bottom:6px; }
.field .hint { font-size:.8rem; color:var(--ink-soft); margin-top:4px; }
.req { color:var(--danger); }
.input,.select,.textarea {
  width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r); background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(243,196,75,.3); }
.textarea{ min-height:96px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:640px){ .field-row,.field-row-3{ grid-template-columns:1fr; } }

.checkrow{ display:flex; gap:11px; align-items:flex-start; }
.checkrow input[type=checkbox]{ width:19px;height:19px;margin-top:3px;accent-color:var(--teal);flex:none;cursor:pointer; }
.checkrow label{ font-size:.95rem; color:var(--ink); cursor:pointer; }

.auth-card{ max-width:460px; margin:0 auto; }
.auth-tabs{ display:flex; background:#eef3f4; border-radius:999px; padding:5px; margin-bottom:26px; }
.auth-tabs button{ flex:1; border:0; background:transparent; padding:10px; border-radius:999px; font-family:var(--font-body); font-weight:600; color:var(--ink-soft); cursor:pointer; transition:.2s; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.auth-tabs button:hover{ color:var(--teal); }
.auth-tabs button.active{ background:#fff; color:var(--teal); box-shadow:var(--shadow-sm); }

.alert{ padding:12px 16px; border-radius:var(--r); font-size:.9rem; margin-bottom:16px; }
.alert-error{ background:#fdecea; color:var(--danger); border:1px solid #f5c6c0; }
.alert-success{ background:#e6f7f1; color:#1c8a6c; border:1px solid #c4efe2; }
.alert-info{ background:#e5eff1; color:var(--teal); border:1px solid #cfe2e6; }

.portal-head{ background:var(--teal-d); color:#fff; padding:44px 0 72px; }
.portal-head h1{ color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.portal-head .lead{ color:rgba(255,255,255,.82); }
.portal-head .eyebrow{ margin-bottom:8px; }
.portal-head .rule{ margin-top:14px; }
.back-link{ color:rgba(255,255,255,.75); font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; transition:color .2s; }
.back-link:hover{ color:var(--gold); }
.portal-body{ position:relative; z-index:5; margin-top:-46px; padding-bottom:80px; }
.portal{ background:var(--teal); min-height:100vh; }

.avatar{ width:48px;height:48px;border-radius:10px;display:grid;place-items:center;font-family:var(--font-head);color:#fff;background:var(--teal);font-size:1.15rem;flex:none; }

.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); }
table.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; background:#fff; color:var(--ink); }
table.tbl th{ text-align:left; font-family:var(--font-body); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:13px 16px; border-bottom:1px solid var(--line); background:#f4f7f7; white-space:nowrap; }
table.tbl td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tr:last-child td{ border-bottom:0; }
table.tbl tr:hover td{ background:#f4f9f9; }

.modal-overlay{ position:fixed; inset:0; background:rgba(13,53,64,.6); backdrop-filter:blur(3px); display:none; align-items:flex-start; justify-content:center; padding:36px 16px; z-index:100; overflow-y:auto; }
.modal-overlay.open{ display:flex; }
.modal{ background:#fff; color:var(--ink); border-radius:var(--r-lg); width:100%; max-width:640px; box-shadow:var(--shadow-lg); animation:pop .25s var(--ease); }
.modal h1,.modal h2,.modal h3{ color:var(--ink); }
.modal-wide{ max-width:820px; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 26px; border-bottom:1px solid var(--line); }
.modal-head h3{ margin:0; }
.modal-body{ padding:24px 26px; }
.modal-foot{ padding:18px 26px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.x-btn{ background:#eef3f4; border:0; width:34px;height:34px; border-radius:8px; cursor:pointer; font-size:1.1rem; color:var(--ink-soft); }
.x-btn:hover{ background:#e0e8e9; }
@keyframes pop{ from{ transform:translateY(12px) scale(.98); opacity:0; } to{ transform:none; opacity:1; } }

.policy{ border:1px solid var(--line); border-radius:var(--r); margin-bottom:14px; overflow:hidden; background:#fff; color:var(--ink); }
.policy summary{ cursor:pointer; padding:16px 18px; font-family:var(--font-body); font-weight:600; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; background:#f4f7f7; }
.policy summary:hover{ background:#eef3f4; }
.policy summary::-webkit-details-marker{ display:none; }
.policy summary::after{ content:"+"; font-size:1.3rem; color:var(--teal); }
.policy[open] summary::after{ content:"–"; }
.policy .policy-text{ padding:16px 18px; font-size:.9rem; color:var(--ink-soft); max-height:240px; overflow-y:auto; border-top:1px solid var(--line); }
.policy .policy-agree{ padding:14px 18px; border-top:1px solid var(--line); background:#fff; }

.empty-state{ text-align:center; padding:56px 20px; color:var(--ink-soft); }
.empty-state .ficon{ margin:0 auto 16px; }

/* ============================================================
   FX — scroll progress, 3D unlock sections, tilt, glass
   ============================================================ */
.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--gold), var(--gold-d));
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

.card-hover.tilting { transition: box-shadow .3s var(--ease); will-change: transform; }

/* scroll-to-unlock 3D section */
.unlock3d { position: relative; height: 240vh; }
.unlock3d-stage {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center; overflow: hidden;
}
.unlock3d-grid {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; width: 100%;
}
@media (max-width: 900px){ .unlock3d-grid { grid-template-columns: 1fr; gap: 20px; } }
.unlock3d model-viewer {
  width: 100%; height: min(62vh, 560px); display: block;
  --poster-color: transparent; background: transparent;
  filter: saturate(.35) brightness(.75); transition: filter .8s var(--ease);
  pointer-events: none;
}
@media (max-width: 900px){ .unlock3d model-viewer { height: 44vh; } }
.unlock3d.unlocked model-viewer { filter: none; pointer-events: auto; }
.unlock3d-hint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--font-body); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  border: 1px solid rgba(243,196,75,.4); padding: 10px 18px; border-radius: 999px;
  transition: border-color .4s, color .4s;
}
.unlock3d-hint .hint-locked, .unlock3d-hint .hint-open { display: none; }
.unlock3d:not(.unlocked) .hint-locked { display: inline; }
.unlock3d.unlocked .hint-open { display: inline; }
.unlock3d.unlocked .unlock3d-hint { border-color: rgba(255,255,255,.25); color: #fff; }
/* progress ring under the model */
.unlock3d-track { height: 3px; background: rgba(255,255,255,.15); border-radius: 99px; overflow: hidden; margin-top: 16px; }
.unlock3d-track i { display: block; height: 100%; background: var(--gold); width: calc(var(--p, 0) * 100%); }

model-viewer::part(default-progress-bar) { display: none; }

/* small ambient 3D accent (auto-rotating, non-interactive) */
.mv-accent { width: 150px; height: 150px; --poster-color: transparent; pointer-events: none; }
@media (max-width: 900px){ .mv-accent { display: none; } }

/* interactive 3D showcase card (volunteer, etc.) */
.mv-card { width: 100%; height: 380px; --poster-color: transparent; border-radius: var(--r); }

/* glass KPI cards for portal/admin heads */
.card-glass {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r); padding: 22px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.15);
  transition: transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card-glass:hover { transform: translateY(-4px); border-color: rgba(243,196,75,.5); background: rgba(255,255,255,.1); }
.card-glass .kpi .num { color: var(--gold); }
.card-glass .muted { color: rgba(255,255,255,.75); }
.card-glass .ficon { background: rgba(255,255,255,.12); color: #fff; }

/* ============================================================
   Animations — scroll reveal + utilities
   ============================================================ */
.reveal { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior: auto; }
}