/* ============================================================
   Public Site — Vibrant Youth Stylesheet
   ============================================================ */
:root{
  --sun:#f59e0b;
  --sun-2:#f97316;
  --flame:#ea580c;
  --coral:#ef4444;
  --sky:#0ea5e9;
  --sky-2:#0284c7;
  --teal:#14b8a6;
  --grape:#7c3aed;
  --rose:#ec4899;
  --lime:#84cc16;
  --navy:#0a1f3d;
  --navy-2:#153a63;
  --ink:#0f1e35;
  --muted:#64748b;
  --paper:#ffffff;
  --bg:#fefcf7;
  --border:#e7e2d8;
  --shadow:0 12px 32px rgba(15,30,53,.10), 0 4px 12px rgba(15,30,53,.05);
  --shadow-lg:0 30px 70px rgba(15,30,53,.18);
  --r:14px;
  --r-lg:22px;
  --r-xl:32px;
  --tr:200ms cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
.site-body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--bg);
  margin:0; line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.site-body h1,.site-body h2,.site-body h3,.site-body h4{
  font-family:'Outfit',sans-serif;
  letter-spacing:-.02em; line-height:1.15;
  margin:0 0 .5rem; color:var(--navy);
}
.site-body a{color:inherit; text-decoration:none; transition:opacity var(--tr)}
.site-body img{max-width:100%; display:block}

.site-wrap{width:min(1200px,92vw); margin:0 auto}

/* ---------------- NAVBAR ---------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; transition:all var(--tr);
  padding:1.1rem 0;
}
.site-nav.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  box-shadow:0 2px 20px rgba(15,30,53,.08);
  padding:.65rem 0;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem}
.site-brand{display:flex; align-items:center; gap:.7rem; color:#fff; transition:color var(--tr)}
.site-nav.scrolled .site-brand{color:var(--navy)}
.site-brand-mark{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,var(--sun),var(--flame));
  display:grid; place-items:center;
  font-family:'Bebas Neue',sans-serif; font-size:1.35rem;
  color:#fff; letter-spacing:.03em;
  box-shadow:0 8px 22px rgba(249,115,22,.4);
}
.site-brand-text{display:flex; flex-direction:column; line-height:1.1}
.site-brand-text strong{font-family:'Outfit',sans-serif; font-weight:800; font-size:1rem; letter-spacing:-.01em}
.site-brand-text small{font-size:.72rem; opacity:.75; letter-spacing:.02em}

.site-menu{display:flex; align-items:center; gap:.15rem}
.site-menu a{
  padding:.55rem .9rem; border-radius:10px;
  color:rgba(255,255,255,.92); font-weight:600; font-size:.9rem;
  transition:all var(--tr);
}
.site-nav.scrolled .site-menu a{color:var(--navy)}
.site-menu a:hover{background:rgba(255,255,255,.15)}
.site-nav.scrolled .site-menu a:hover{background:rgba(15,30,53,.06)}
.site-menu-cta{
  background:linear-gradient(135deg,var(--sun),var(--flame)) !important;
  color:#fff !important; font-weight:700 !important;
  padding:.65rem 1.2rem !important;
  box-shadow:0 8px 22px rgba(249,115,22,.35);
  margin-left:.4rem;
}
.site-menu-cta:hover{transform:translateY(-1px); background:linear-gradient(135deg,var(--sun-2),var(--coral)) !important}
.site-menu-cta-outline{
  border:1.5px solid rgba(255,255,255,.5) !important;
  margin-left:.3rem;
}
.site-nav.scrolled .site-menu-cta-outline{border-color:var(--border) !important}
.site-menu-cta-outline:hover{background:rgba(255,255,255,.15) !important}

.site-burger{
  display:none; border:0; background:transparent; padding:.4rem;
  cursor:pointer; flex-direction:column; gap:5px;
}
.site-burger span{
  display:block; width:26px; height:2.5px; background:#fff; border-radius:3px;
  transition:all var(--tr);
}
.site-nav.scrolled .site-burger span{background:var(--navy)}
.site-burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.site-burger.open span:nth-child(2){opacity:0}
.site-burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:900px){
  .site-burger{display:flex}
  .site-menu{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch;
    background:#fff; box-shadow:0 20px 40px rgba(15,30,53,.15);
    padding:1rem;
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:all var(--tr);
    border-radius:0 0 20px 20px;
  }
  .site-menu.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .site-menu a{color:var(--navy) !important; padding:.8rem 1rem}
  .site-menu-cta, .site-menu-cta-outline{text-align:center; margin:0}
}

/* ---------------- HERO ---------------- */
.hero-v2{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:9rem 0 7rem;
  overflow:hidden;
}
.hero-v2::after{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 15% 30%, rgba(245,158,11,.15), transparent 45%),
    radial-gradient(circle at 85% 70%, rgba(234,88,12,.14), transparent 45%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:820px}
.hero-kicker{
  display:inline-block;
  padding:.4rem 1rem;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  border-radius:100px;
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  margin-bottom:1.6rem;
  animation:heroFade .8s .1s both;
}
.hero-title{
  font-family:'Bebas Neue',sans-serif !important;
  font-size:clamp(3rem,8vw,6rem);
  line-height:.95;
  color:#fff !important;
  letter-spacing:.01em;
  margin:0 0 1.2rem;
  text-shadow:0 4px 40px rgba(0,0,0,.4);
  animation:heroFade .8s .2s both;
}
.hero-sub{
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:rgba(255,255,255,.9);
  max-width:640px;
  margin:0 0 2.2rem;
  animation:heroFade .8s .35s both;
}
.hero-buttons{
  display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:3.5rem;
  animation:heroFade .8s .5s both;
}
.btn-vibrant{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.9rem;
  background:linear-gradient(135deg,var(--sun),var(--flame));
  color:#fff; font-weight:700;
  border-radius:100px;
  font-size:1rem;
  border:0; cursor:pointer;
  box-shadow:0 14px 36px rgba(249,115,22,.42), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform var(--tr), box-shadow var(--tr);
}
.btn-vibrant:hover{transform:translateY(-2px); box-shadow:0 20px 44px rgba(249,115,22,.55)}
.btn-vibrant .arrow{transition:transform var(--tr); font-size:1.1rem}
.btn-vibrant:hover .arrow{transform:translateX(4px)}
.btn-vibrant.btn-lg{padding:1.15rem 2.2rem; font-size:1.08rem}

.btn-ghost-light{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:1rem 1.9rem;
  background:rgba(255,255,255,.1);
  color:#fff; font-weight:700;
  border:1.5px solid rgba(255,255,255,.4);
  border-radius:100px;
  backdrop-filter:blur(8px);
  transition:all var(--tr);
}
.btn-ghost-light:hover{background:rgba(255,255,255,.22); border-color:#fff}
.btn-ghost-light.btn-lg{padding:1.15rem 2.2rem; font-size:1.08rem}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  max-width:700px;
  animation:heroFade .8s .65s both;
}
.hero-stats > div{display:flex; flex-direction:column}
.hero-stats strong{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--sun); line-height:1;
  letter-spacing:.02em;
}
.hero-stats span{
  font-size:.75rem; text-transform:uppercase;
  letter-spacing:.12em; opacity:.8; margin-top:.3rem;
}
@media(max-width:640px){
  .hero-stats{grid-template-columns:repeat(2,1fr); gap:1rem}
  .hero-v2{min-height:auto; padding:8rem 0 5rem}
}
.hero-wave{
  position:absolute; bottom:-1px; left:0; right:0; height:80px;
  background:var(--bg);
  clip-path:polygon(0 100%, 0 40%, 12% 55%, 25% 30%, 38% 55%, 52% 25%, 65% 50%, 78% 25%, 90% 50%, 100% 35%, 100% 100%);
  z-index:3;
}
@keyframes heroFade{
  from{opacity:0; transform:translateY(24px)}
  to{opacity:1; transform:none}
}

/* ---------------- SECTIONS ---------------- */
.section{padding:6rem 0; position:relative}
.section-kicker{
  display:inline-block;
  font-family:'Outfit',sans-serif;
  font-size:.78rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--flame); margin-bottom:.8rem;
}
.section-kicker::before{
  content:''; display:inline-block; vertical-align:middle;
  width:24px; height:2px; background:var(--flame);
  margin-right:.6rem;
}
.section-title{
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:800; margin:0 0 1.5rem;
  letter-spacing:-.03em;
}
.section-head{text-align:center; margin-bottom:3rem}
.section-head .section-kicker::before{display:none}
.section-head .section-kicker::after{
  content:''; display:inline-block; vertical-align:middle;
  width:24px; height:2px; background:var(--flame);
  margin-left:.6rem;
}

/* ---------------- MESSAGE ---------------- */
.section-message{background:#fff}
.message-grid{
  display:grid; grid-template-columns:minmax(280px,1fr) 1.4fr;
  gap:4rem; align-items:center;
}
@media(max-width:820px){
  .message-grid{grid-template-columns:1fr; gap:2.5rem}
}
.message-photo{position:relative}
.photo-frame{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px rgba(15,30,53,.2);
  background:#f0f0f0;
}
.photo-frame::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(15,42,74,.35));
  pointer-events:none;
}
.photo-frame img{width:100%; height:100%; object-fit:cover}
.photo-badge{
  position:absolute; top:-16px; right:-16px;
  width:72px; height:72px; border-radius:50%;
  background:linear-gradient(135deg,var(--sun),var(--flame));
  color:#fff;
  display:grid; place-items:center;
  font-size:2rem;
  box-shadow:0 14px 32px rgba(249,115,22,.45);
  border:4px solid #fff;
  animation:floatBadge 3s ease-in-out infinite;
}
@keyframes floatBadge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.father-role{
  color:var(--flame); font-weight:600;
  font-size:1rem; margin-bottom:1.6rem;
  letter-spacing:.02em;
}
.father-message{
  border-left:3px solid var(--sun);
  padding-left:1.4rem;
  margin:0 0 1.6rem;
  color:#3a4a5f;
  font-size:1.02rem;
  line-height:1.75;
}
.father-message p{margin:0 0 1rem}
.father-message p:last-child{margin:0}
.father-signature{display:flex; align-items:center; gap:1rem}
.sig-line{flex:0 0 60px; height:1px; background:var(--navy)}
.father-signature span{
  font-family:'Outfit',sans-serif; font-weight:700;
  color:var(--navy); font-size:1rem;
}

/* ---------------- ABOUT ---------------- */
.section-about{background:var(--bg)}
.about-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:4rem; align-items:start}
@media(max-width:820px){.about-grid{grid-template-columns:1fr; gap:2.5rem}}
.about-para{font-size:1.05rem; color:#4a5a70; margin-bottom:1rem; max-width:60ch}
.about-text .btn-vibrant{margin-top:1rem}
.about-cards{display:flex; flex-direction:column; gap:1rem}
.cat-card{
  display:flex; gap:1rem; align-items:center;
  background:#fff;
  border-radius:var(--r);
  padding:1.3rem 1.4rem;
  box-shadow:0 8px 24px rgba(15,30,53,.07);
  border-left:4px solid var(--cat-color);
  transition:transform var(--tr), box-shadow var(--tr);
}
.cat-card:hover{transform:translateX(6px); box-shadow:0 16px 40px rgba(15,30,53,.13)}
.cat-icon{
  width:52px; height:52px; border-radius:14px;
  background:rgba(245,158,11,.15);
  display:grid; place-items:center;
  font-size:1.6rem; flex:0 0 auto;
}
.cat-card strong{
  display:block; font-family:'Outfit',sans-serif;
  font-weight:700; color:var(--navy); font-size:1.02rem;
}
.cat-card span{
  display:inline-block;
  background:var(--cat-color); color:#fff;
  font-size:.68rem; font-weight:700;
  padding:.15rem .55rem; border-radius:100px;
  letter-spacing:.08em; margin:.25rem 0;
}
.cat-card small{display:block; color:var(--muted); font-size:.85rem}

/* ---------------- GALLERY ---------------- */
.section-gallery{background:#fff}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px;
  gap:1rem;
}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:170px}}
@media(max-width:520px){.gallery-grid{grid-template-columns:1fr; grid-auto-rows:220px}}

.gallery-item{
  position:relative; margin:0;
  border-radius:var(--r);
  overflow:hidden; cursor:pointer;
  background:#f0f0f0;
  transition:transform var(--tr);
}
.gallery-item:hover{transform:scale(1.02); z-index:2}
.gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--tr)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.4rem 1.1rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color:#fff; font-weight:600; font-size:.9rem;
  opacity:0; transform:translateY(8px);
  transition:all var(--tr);
}
.gallery-item:hover figcaption{opacity:1; transform:none}
.gallery-big{
  grid-column:span 2;
  grid-row:span 2;
}
@media(max-width:520px){.gallery-big{grid-column:span 1; grid-row:span 1}}

/* ---------------- EVENTS ---------------- */
.section-events{background:linear-gradient(180deg, var(--bg), #fff)}
.events-list{display:flex; flex-direction:column; gap:1rem; max-width:900px; margin:0 auto}
.ev-card{
  display:flex; gap:1.4rem;
  background:#fff;
  border-radius:var(--r);
  padding:1.2rem 1.4rem;
  box-shadow:0 8px 24px rgba(15,30,53,.06);
  border:1.5px solid transparent;
  transition:all var(--tr);
}
.ev-card:hover{
  border-color:var(--sun);
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(15,30,53,.11);
}
.ev-date{
  flex:0 0 auto; text-align:center;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff; border-radius:14px;
  padding:.7rem .9rem;
  min-width:76px;
  display:flex; flex-direction:column; justify-content:center;
}
.ev-day{font-family:'Bebas Neue',sans-serif; font-size:1.9rem; line-height:1; letter-spacing:.02em}
.ev-mon{font-size:.72rem; font-weight:700; letter-spacing:.12em; color:var(--sun)}
.ev-body{flex:1; min-width:0}
.ev-body h3{font-size:1.15rem; margin:0 0 .35rem; font-weight:700}
.ev-meta{font-size:.85rem; color:var(--muted); margin:0 0 .5rem}
.ev-desc{margin:0; color:#4a5a70; font-size:.95rem; line-height:1.6}

/* ---------------- CTA BANNER ---------------- */
.cta-banner{
  background:
    radial-gradient(circle at 20% 50%, rgba(245,158,11,.3), transparent 60%),
    linear-gradient(135deg, var(--flame), var(--coral) 60%, var(--rose));
  padding:4rem 0; color:#fff;
  position:relative; overflow:hidden;
}
.cta-banner::before{
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.15), transparent 40%),
    repeating-linear-gradient(45deg, transparent 0 40px, rgba(255,255,255,.03) 40px 41px);
  pointer-events:none;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap;
  position:relative; z-index:2;
}
.cta-inner h2{
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  color:#fff !important; margin:0 0 .3rem;
  font-weight:800;
}
.cta-inner p{color:rgba(255,255,255,.9); margin:0; font-size:1.05rem}
.cta-inner .btn-vibrant{
  background:#fff; color:var(--flame);
  box-shadow:0 14px 36px rgba(0,0,0,.25);
}
.cta-inner .btn-vibrant:hover{background:#fff; color:var(--coral); transform:translateY(-2px)}

/* ---------------- CONTACT ---------------- */
.section-contact{background:#fff}
.contact-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;
}
@media(max-width:900px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  background:linear-gradient(180deg,#fff,var(--bg));
  border:1.5px solid var(--border);
  border-radius:var(--r);
  padding:1.6rem 1.4rem;
  transition:all var(--tr);
}
.contact-card:hover{
  border-color:var(--sun);
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(15,30,53,.09);
}
.contact-icon{
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(135deg,var(--sun),var(--flame));
  color:#fff; display:grid; place-items:center;
  font-size:1.4rem; margin-bottom:1rem;
  box-shadow:0 8px 20px rgba(249,115,22,.35);
}
.contact-card h4{
  font-size:1rem; margin:0 0 .4rem;
  font-weight:700;
}
.contact-card p{
  margin:0; color:#4a5a70; font-size:.92rem;
  line-height:1.6; word-break:break-word;
}
.contact-card a{color:var(--flame); font-weight:600}

/* ---------------- LINKS ---------------- */
.section-links{background:linear-gradient(180deg, #fff, var(--bg))}
.links-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1rem;
}
@media(max-width:900px){.links-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.links-grid{grid-template-columns:1fr}}
.link-card{
  display:flex; align-items:center; gap:1rem;
  background:#fff; padding:1.1rem 1.2rem;
  border-radius:var(--r);
  border:1.5px solid var(--border);
  transition:all var(--tr);
}
.link-card:hover{
  border-color:var(--sky);
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(14,165,233,.15);
}
.link-icon{
  width:44px; height:44px; border-radius:12px;
  background:linear-gradient(135deg,#e0f2fe,#fef3c7);
  display:grid; place-items:center;
  font-size:1.4rem; flex:0 0 auto;
}
.link-card strong{display:block; font-weight:700; color:var(--navy)}
.link-card small{display:block; color:var(--muted); font-size:.82rem; margin-top:.15rem}
.link-arrow{
  margin-left:auto; color:var(--muted); font-size:1.1rem;
  transition:all var(--tr);
}
.link-card:hover .link-arrow{color:var(--sky); transform:translate(3px,-3px)}

/* ---------------- FOOTER ---------------- */
.site-footer-v2{
  background:linear-gradient(180deg, var(--navy), #05101f);
  color:#c7d5e8;
  padding:4rem 0 0;
  margin-top:0;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:3rem;
}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; gap:2rem}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h5{
  font-family:'Outfit',sans-serif; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--sun); margin:0 0 1rem; font-weight:700;
}
.footer-grid a, .footer-grid p{
  display:block; color:#c7d5e8; font-size:.9rem;
  margin:0 0 .5rem; transition:color var(--tr);
}
.footer-grid a:hover{color:var(--sun)}
.footer-tag{
  font-family:'Outfit',sans-serif; font-style:italic;
  color:var(--sun) !important; font-size:1rem !important;
  margin-top:.5rem !important;
}
.social-row{display:flex; gap:.5rem}
.social-row a{
  width:38px; height:38px; border-radius:10px;
  background:rgba(255,255,255,.08);
  display:grid; place-items:center;
  font-weight:700; font-size:.85rem;
  transition:all var(--tr);
}
.social-row a:hover{background:var(--sun); color:var(--navy)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:1.4rem 0;
  text-align:center;
  font-size:.82rem;
  color:#8fa3bf;
}

@keyframes slideIn{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:none}
}
.section > .site-wrap > *{animation:slideIn .6s both}