:root {
  --primary:#1f7a6e;
  --primary-soft:#e6f4f1;
  --accent:#3fbf9c;
  --text:#1f2937;
  --muted:#6b7280;
  --card:#ffffff;
}

* {
  box-sizing: border-box;
}

body {
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background: linear-gradient(180deg,#ffffff,#f5fbfa);
  color: var(--text);
}

/* Loader */
#loader {
  position:fixed;
  inset:0;
  background:#0f3f3a;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:100000;
  transition:opacity .8s ease;
}
#loader.hide { opacity:0; pointer-events:none; }
.loader-inner { text-align:center; color:white; }
.clock { position:relative; width:90px; height:90px; border:4px solid white; border-radius:50%; margin:0 auto 25px; }
.hand { position:absolute; left:50%; bottom:50%; transform-origin:bottom; background:white; border-radius:2px; }
.hour { width:4px; height:22px; animation:hourSpin 15s linear infinite; }
.minute { width:3px; height:32px; animation:minuteSpin 10s linear infinite; }
.second { width:2px; height:38px; background:#7de4d1; animation:secondSpin 5s linear infinite; }
.loader-text { font-size:1.2rem; letter-spacing:.8px; opacity:0; animation:fadeText 0.5s ease forwards 0.5s; }

/* Hero Section */
.hero {
  position:relative;
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("../images/hero.jpg");
  background-size:cover;
  background-position:center;
  padding:110px 20px 90px;
  text-align:center;
  color:white;
}
.hero h1 {
  font-size:clamp(2.6rem,5vw,3.8rem);
  margin-bottom:10px;
  color:white;
}
.hero p {
  max-width:700px;
  margin:0 auto 28px;
  font-size:1.15rem;
  color:#e5f6f3;
}
.bh { position:absolute; top:14px; right:18px; font-weight:600; color:white; z-index:10; font-size:1.05rem; }

/* Hero animations */
.hero::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.4));
}
.hero * { position:relative; z-index:2; }
.hero h1, .hero p, .hero .badge {
  animation: fadeHero 1.2s ease forwards;
  opacity:0;
}
.hero h1 { animation-delay:.2s; }
.hero p { animation-delay:.6s; }

@keyframes fadeHero {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

/* Sections */
section { max-width:1100px; margin:0 auto; padding:90px 20px; }
h2 { font-size:2.3rem; margin-bottom:14px; color:#0f3f3a; }
.section-sub { max-width:650px; color:var(--muted); font-size:1.05rem; margin-bottom:40px; }

/* Grid cards */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.card { background:var(--card); border-radius:20px; padding:28px; box-shadow:0 12px 30px rgba(0,0,0,.08); transition: all 0.3s ease; }
.card:hover { transform: translateY(-8px); box-shadow:0 20px 45px rgba(0,0,0,.15); }
.card h3 { margin-top:0; color:var(--primary); }

/* Impact section */
.impact-section { max-width:1100px; margin:80px auto; padding:0 20px; }
.impact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px; margin-top:40px; }
.impact-card { background:white; border-radius:26px; padding:36px 24px; text-align:center; box-shadow:0 15px 40px rgba(0,0,0,.12); border-top:4px solid var(--primary); transition:.35s ease; }
.impact-card:hover { transform: translateY(-10px); box-shadow:0 25px 60px rgba(0,0,0,.2); }
.impact-icon { font-size:2.4rem; color:var(--primary); margin-bottom:14px; }
.impact-card h3 { font-size:2.6rem; font-weight:800; color:#0f3f3a; }
.impact-card p { color:var(--muted); font-weight:500; }

/* Schedule Section */
.schedule-section { background:var(--primary-soft); padding:80px 20px; border-radius:28px; margin:80px auto; max-width:1100px; text-align:center; }
.schedule-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:28px; }
.schedule-item { background:white; padding:34px 28px; border-radius:22px; box-shadow:0 12px 28px rgba(0,0,0,.08); border:1px solid #e6f4f1; transition:.3s ease; position:relative; overflow:hidden; }
.schedule-item::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--primary); }
.schedule-item:hover { transform: translateY(-8px); box-shadow:0 22px 45px rgba(0,0,0,.15); }
.schedule-item h3 { margin-bottom:10px; font-size:1.4rem; color:#0f3f3a; font-weight:700; }
.schedule-item p { font-size:1.05rem; color:var(--text); font-weight:500; }

/* Gallery Section */
.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.gallery img { width:100%; height:220px; object-fit:cover; object-position:center; border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.12); transition:.3s ease; }
.gallery img:hover { transform: scale(1.05); }

/* Form Section */
.form-wrap { max-width:520px; margin:0 auto; background:white; padding:32px; border-radius:24px; box-shadow:0 14px 40px rgba(0,0,0,.12); }
.field { position:relative; margin-bottom:18px; }
.field input { width:100%; padding:16px 14px; border-radius:10px; border:1px solid #d1d5db; font-size:1rem; transition: all 0.25s ease; }
.field label { position:absolute; left:14px; top:50%; transform:translateY(-115%); color:#6b7280; pointer-events:none; transition:.25s; background:white; padding:0 6px; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { top:-6px; font-size:.8rem; color:var(--primary); }
button { width:100%; padding:14px; border:none; border-radius:999px; background:var(--accent); color:#043f34; font-size:1.1rem; font-weight:700; cursor:pointer; transition: all 0.25s ease; }
button:hover { background:#2fae8d; transform: scale(1.03); }

/* Footer */
.site-footer { background:linear-gradient(180deg,#0f3f3a,#092f2b); color:#d1f3ed; padding:70px 20px 40px; margin-top:100px; font-size:1rem; }
.footer-main { max-width:1100px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; text-align:center; }
.footer-col h4 { color:white; font-size:1.25rem; margin-bottom:14px; letter-spacing:.5px; }
.footer-col p { line-height:1.7; color:#bfe9e2; }
.footer-col a { color:#7de4d1; text-decoration:none; font-weight:600; }
.footer-col a:hover { text-decoration:underline; }
.footer-divider { max-width:900px; margin:45px auto 25px; height:1px; background:rgba(255,255,255,.15); }
.footer-yechi { text-align:center; font-size:1.5rem; font-weight:700; color:#ffffff; letter-spacing:1px; margin-bottom:18px; padding:0 10px; }
.footer-bottom { text-align:center; font-size:.9rem; color:#9fded3; opacity:.9; }
html { scroll-behavior: smooth; }

/* Fade / Zoom Animations */
.fade-up { opacity:0; transform:translateY(40px); transition: all 0.8s ease; }
.fade-up.show { opacity:1; transform:translateY(0); }
.zoom-in { opacity:0; transform:scale(0.9); transition: all 0.8s ease; }
.zoom-in.show { opacity:1; transform:scale(1); }

/* Clock Animations */
@keyframes secondSpin { to { transform:translateX(-50%) rotate(360deg); } }
@keyframes minuteSpin { to { transform:translateX(-50%) rotate(360deg); } }
@keyframes hourSpin { to { transform:translateX(-50%) rotate(120deg); } }
@keyframes fadeText { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }

/* Responsive */
@media (max-width:640px){
  .hero { padding:80px 16px 70px; }
  .hero h1 { font-size:2.2rem; }
  section { padding:60px 16px; }
  h2 { font-size:1.8rem; text-align:center; }
  .section-sub { text-align:center; margin-left:auto; margin-right:auto; }
  .grid { grid-template-columns:1fr; }
  .card { padding:22px; }
  .schedule-grid { grid-template-columns:1fr; gap:6px; text-align:center; }
  .gallery { grid-template-columns:repeat(2,1fr); gap:12px; }
  .gallery img { height:160px; }
  .form-wrap { padding:24px 20px; }
  input, button { font-size:1rem; }
  button { padding:13px; }
  .site-footer { font-size:.85rem; line-height:1.5; }
}