:root{
  --teal: #4e908f;
  --teal-dark: #396e6d;
  --teal-light: #eaf3f2;
  --ink: #2b3533;
  --muted: #6b7876;
  --paper: #ffffff;
  --radius: 22px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: -apple-system, "Segoe UI", "Nunito", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
.container{max-width:1100px; margin:0 auto; padding:0 24px;}
section{padding: 110px 0;}
h1,h2,h3{line-height:1.15; font-weight:800;}
.eyebrow{
  display:inline-block; font-size:0.8rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color: var(--teal-dark); background: var(--teal-light);
  padding:6px 16px; border-radius:999px; margin-bottom:18px;
}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform: translateY(0);}

/* ---------- nav ---------- */
header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  transition: box-shadow .3s ease;
}
header.scrolled{box-shadow: 0 6px 24px rgba(0,0,0,0.06);}
nav{
  max-width:1100px; margin:0 auto; padding: 14px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.15rem;}
.brand img{width:42px; height:42px; border-radius:50%; box-shadow:0 4px 14px rgba(78,144,143,0.35);}
.nav-links{display:flex; gap:32px; font-weight:600; font-size:0.95rem;}
.nav-links a{position:relative; color:var(--ink); opacity:.8; transition:opacity .2s;}
.nav-links a:hover{opacity:1;}
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:0.95rem;
  padding: 13px 28px; border-radius:999px; transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 26px rgba(78,144,143,0.3);
}
.btn-primary{background: var(--teal); color:#fff;}
.btn-primary:hover{transform: translateY(-3px); box-shadow: 0 16px 32px rgba(78,144,143,0.42);}
.btn-ghost{background:transparent; color:var(--teal-dark); box-shadow:none; border:2px solid var(--teal);}
.btn-ghost:hover{background:var(--teal-light);}
.nav-cta{padding:10px 22px; font-size:0.9rem;}
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:42px; height:42px; border-radius:12px; background:transparent;
  border:none; cursor:pointer;
}
.nav-toggle span{
  width:22px; height:2px; background: var(--ink); border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-7px) rotate(-45deg);}

/* ---------- hero ---------- */
.hero{
  padding: 190px 0 120px;
  position:relative;
  background: radial-gradient(ellipse at 75% 15%, var(--teal-light) 0%, #ffffff 55%);
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:50px; align-items:center;
}
.hero h1{font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing:-0.02em;}
.hero h1 span{color:var(--teal);}
.hero p.lead{font-size:1.15rem; color:var(--muted); max-width:480px; margin: 22px 0 34px;}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap;}
.hero-visual{
  position:relative; display:flex; align-items:center; justify-content:center;
}
.blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background: linear-gradient(135deg, var(--teal), #7fc4c1);
  filter: blur(2px);
  animation: float 6s ease-in-out infinite;
}
.hero-visual img{
  position:relative; width:340px; height:340px; border-radius:50%;
  box-shadow: 0 30px 60px rgba(78,144,143,0.35);
  animation: float 6s ease-in-out infinite;
  animation-delay: .3s;
}
@keyframes float{
  0%,100%{transform: translateY(0px);}
  50%{transform: translateY(-18px);}
}
.quote-chip{
  position:absolute; bottom: -10px; left: -10px;
  background:#fff; padding:14px 20px; border-radius:16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
  font-weight:700; font-size:0.9rem; color: var(--teal-dark);
  display:flex; align-items:center; gap:10px;
}

/* ---------- about ---------- */
.about-grid{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:60px; align-items:center;}
.about-visual{
  background: var(--teal-light); border-radius: var(--radius);
  padding: 40px; text-align:center;
}
.about-visual img{width:220px; margin:0 auto; border-radius:50%; box-shadow:0 20px 40px rgba(78,144,143,0.25);}
.about h2{font-size:2.2rem; margin-bottom:20px;}
.about p{color:var(--muted); margin-bottom:16px; font-size:1.05rem;}
blockquote{
  margin-top:24px; padding: 18px 24px; border-left:4px solid var(--teal);
  background: var(--teal-light); border-radius: 0 14px 14px 0;
  font-style:italic; font-weight:600; color: var(--teal-dark);
}

/* ---------- why join ---------- */
.why{background: var(--teal-light);}
.section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
.section-head h2{font-size:2.2rem;}
.section-head p{color:var(--muted); margin-top:14px;}
.cards3{display:grid; grid-template-columns: repeat(3, 1fr); gap:28px;}
.card{
  background:#fff; border-radius: var(--radius); padding: 38px 30px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover{transform: translateY(-8px); box-shadow: 0 22px 48px rgba(78,144,143,0.2);}
.card .icon{
  width:56px; height:56px; border-radius:16px; background: var(--teal);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom:20px;
}
.card h3{font-size:1.15rem; margin-bottom:10px;}
.card p{color:var(--muted); font-size:0.96rem;}

/* ---------- schedule ---------- */
.schedule-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:24px;}
.sched-card{
  border:2px solid var(--teal-light); border-radius: var(--radius);
  padding:30px; text-align:center; transition: border-color .25s ease, transform .25s ease;
}
.sched-card:hover{border-color:var(--teal); transform: translateY(-6px);}
.sched-card .day{font-weight:800; font-size:1.2rem; color:var(--teal-dark); margin-bottom:8px;}
.sched-card .time{font-size:1.5rem; font-weight:800; margin-bottom:6px;}
.sched-card .place{color:var(--muted); font-size:0.92rem;}
.placeholder-note{
  text-align:center; margin-top:28px; font-size:0.88rem; color:var(--muted);
  background: var(--teal-light); display:inline-block; padding:10px 20px; border-radius:999px;
}
.placeholder-note-wrap{text-align:center;}

/* ---------- gallery ---------- */
.gallery{background: var(--teal-light);}
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;
}
.gallery-grid div{
  position:relative; aspect-ratio: 1; border-radius:18px;
  overflow:hidden;
  background: var(--teal-light);
  transition: transform .3s ease;
}
.gallery-grid div img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: opacity .35s ease, transform .35s ease;
}
.gallery-cover{opacity:1; transform: scale(1);}
.gallery-photo{opacity:0; transform: scale(1.08);}
.gallery-grid div:hover{transform: scale(1.05) rotate(-1deg);}
.gallery-grid div:hover .gallery-cover{opacity:0;}
.gallery-grid div:hover .gallery-photo{opacity:1; transform: scale(1);}

/* ---------- cta ---------- */
.cta{
  background: linear-gradient(120deg, var(--teal-dark), var(--teal));
  border-radius: var(--radius); color:#fff; text-align:center;
  padding: 70px 40px; margin: 0 24px;
}
.cta h2{font-size:2.2rem; margin-bottom:16px;}
.cta p{opacity:.9; max-width:520px; margin:0 auto 30px;}
.cta .btn-primary{background:#fff; color: var(--teal-dark); box-shadow:0 12px 30px rgba(0,0,0,0.2);}

/* ---------- footer ---------- */
footer{padding: 60px 0 30px; text-align:center;}
footer .brand{justify-content:center; margin-bottom:18px;}
footer .socials{display:flex; gap:16px; justify-content:center; margin-bottom:24px;}
.social-link{
  position:relative;
  width:42px; height:42px; border-radius:50%; background: var(--teal-light);
  display:flex; align-items:center; justify-content:center; color:var(--teal-dark);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.social-link svg{width:20px; height:20px;}
.social-link:hover, .social-link:focus-visible{background:var(--teal); color:#fff; transform: translateY(-3px);}
.social-link::after{
  content: attr(data-tooltip);
  position:absolute; bottom: calc(100% + 10px); left:50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color:#fff; font-size:0.78rem; font-weight:600; white-space:nowrap;
  padding:6px 12px; border-radius:8px; opacity:0; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.social-link::before{
  content:""; position:absolute; bottom: calc(100% + 5px); left:50%; transform: translateX(-50%);
  border:5px solid transparent; border-top-color: var(--ink);
  opacity:0; pointer-events:none; transition: opacity .18s ease;
}
.social-link:hover::after, .social-link:focus-visible::after{opacity:1; transform: translateX(-50%) translateY(0);}
.social-link:hover::before, .social-link:focus-visible::before{opacity:1;}
footer .fine{color:var(--muted); font-size:0.85rem;}

@media (max-width: 860px){
  .hero{padding:140px 0 60px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; margin-bottom:12px;}
  .blob{width:170px; height:170px;}
  .hero-visual img{width:150px; height:150px;}
  .quote-chip{padding:8px 14px; font-size:0.78rem; bottom:-6px; left:-6px;}
  .about-grid{display:block;}
  .about-grid::after{content:""; display:table; clear:both;}
  .about-visual{
    float:left; width:84px; margin:2px 14px 10px 0; padding:0;
    background:none; box-shadow:none;
  }
  .about-visual img{width:100%; margin:0;}
  .cards3{grid-template-columns:1fr;}
  .schedule-grid{gap:14px;}
  .sched-card{padding:18px 12px;}
  .sched-card .day{font-size:1rem; margin-bottom:4px;}
  .sched-card .time{font-size:1.05rem; margin-bottom:4px;}
  .sched-card .place{font-size:0.8rem;}
  .gallery-grid{grid-template-columns: repeat(2,1fr);}
  .nav-toggle{display:flex;}
  .nav-links{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid rgba(0,0,0,0.05);
    box-shadow: 0 16px 30px rgba(0,0,0,0.08);
    max-height:0; overflow:hidden;
    transition: max-height .3s ease;
  }
  .nav-links.open{max-height:320px;}
  .nav-links a{padding:16px 24px; border-top:1px solid rgba(0,0,0,0.05);}
  .nav-cta{display:none;}
  section{padding:80px 0;}
}