@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,500&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --purple-deep: #4B1D8F;
  --purple: #7B3FC4;
  --violet: #8B5CF6;
  --violet-light: #B79CF0;
  --teal: #1FBFB0;
  --teal-deep: #138A7E;
  --teal-pale: #D6F5F1;
  --lilac-bg: #F3ECFB;
  --lilac-soft: #E8DCF7;
  --white: #FFFFFF;
  --ink: #2E1A52;
  --mid: #6B5A8A;
  --light: #9C8FB5;
  --border: #E4D9F2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Nunito', sans-serif; color: var(--ink); background: var(--white); line-height: 1.6; }
h1, h2, h3 { font-family: 'Fraunces', serif; font-weight: 600; color: var(--purple-deep); line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
main { position: relative; z-index: 2; }
footer { position: relative; z-index: 2; }

.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background-color: var(--purple-deep);
  background-image:
    radial-gradient(1.5px 1.5px at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 40%, rgba(214,245,241,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 35% 8%, rgba(31,191,176,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 60%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 60% 22%, rgba(183,156,240,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 48%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 12%, rgba(31,191,176,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 92% 65%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 6% 75%, rgba(214,245,241,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 85%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 78% 88%, rgba(183,156,240,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 95%, rgba(31,191,176,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 28%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 75%, rgba(214,245,241,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 40%, rgba(255,255,255,0.65) 0%, transparent 100%),
    linear-gradient(165deg, var(--purple-deep) 0%, #341464 50%, #1E0F3D 100%);
  background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat;
  background-size: 340px 340px, 280px 280px, 400px 400px, 260px 260px, 360px 360px, 300px 300px, 420px 420px, 250px 250px, 380px 380px, 290px 290px, 410px 410px, 270px 270px, 330px 330px, 310px 310px, 370px 370px, auto;
}

.sparkle { position: absolute; color: var(--teal); font-size: 1.1rem; opacity: 0.8; pointer-events: none; }

/* HALF MOON */
.moon {
  position: absolute;
  width: clamp(100px, 13vw, 180px);
  height: clamp(100px, 13vw, 180px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #FFFFFF 0%, #EDE8F5 45%, #C9BEDD 85%, #B3A6CC 100%);
  box-shadow:
    0 0 50px 14px rgba(246,243,251,0.4),
    0 0 120px 45px rgba(31,191,176,0.2);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.moon::after {
  /* offset circle in the sky's own colour, clipped to the moon's round edge,
     carves a soft curved terminator line instead of a flat split */
  content: '';
  position: absolute;
  top: -18%;
  left: 32%;
  width: 115%;
  height: 135%;
  border-radius: 50%;
  background: var(--purple-deep);
}

/* GALAXY GLOWS */
.galaxy {
  position: absolute;
  border-radius: 50%;
  filter: blur(55px);
  pointer-events: none;
  z-index: 0;
  animation: galaxyPulse 9s ease-in-out infinite;
}
@keyframes galaxyPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.18); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .galaxy { animation: none; }
}

/* SHOOTING STARS */
.shoot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--white);
  border-radius: 50%;
  box-shadow:
    0 0 8px 2px rgba(255,255,255,0.95),
    0 0 22px 5px rgba(31,191,176,0.6);
  pointer-events: none;
  z-index: 1;
}
.shoot.rl { animation: shootRL linear forwards; }
.shoot.rl::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 1px;
  width: var(--trail-w, 130px);
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(214,245,241,0.7) 55%, rgba(255,255,255,0.95) 100%);
  transform: translateY(-50%);
  transform-origin: right center;
}
@keyframes shootRL {
  0%   { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0; }
  8%   { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate(-460px, 280px) scale(var(--scale, 1)); opacity: 0; }
}

.shoot.lr { animation: shootLR linear forwards; }
.shoot.lr::before {
  /* trail sits BEHIND the dot (to the left, since travel is left-to-right),
     brightest right next to the dot, fading out further back */
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: var(--trail-w, 130px);
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(183,156,240,0.75) 55%, rgba(255,255,255,0.98) 100%);
  transform: translateY(-50%);
  transform-origin: right center;
}
@keyframes shootLR {
  0%   { transform: translate(0, 0) scale(var(--scale, 1)); opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(108vw, 42vh) scale(var(--scale, 1)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .shoot { display: none; }
}

/* NAV */
.sitenav { position: sticky; top: 0; z-index: 100; background: rgba(75,29,143,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(31,191,176,0.25); }
.sitenav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; color: var(--white); }
.nav-logo img { width: 34px; height: 47px; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a { font-weight: 700; font-size: 0.95rem; color: rgba(255,255,255,0.78); }
.nav-links a:hover, .nav-links a.current { color: var(--teal); }
.nav-links a.nav-cta { background: var(--teal); color: var(--purple-deep); padding: 10px 22px; border-radius: 30px; }
.nav-links a.nav-cta:hover { background: var(--teal-deep); color: var(--white); }
.nav-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--white); }
@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav-links { position: absolute; top: 76px; left: 0; right: 0; background: var(--purple-deep); flex-direction: column; align-items: flex-start; max-height: 0; overflow: hidden; border-bottom: 1px solid rgba(31,191,176,0.25); transition: max-height 0.3s ease; }
  .nav-links.open { max-height: 400px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 16px 24px; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* BUTTONS */
.btn { display: inline-block; font-weight: 800; font-size: 1rem; padding: 16px 34px; border-radius: 40px; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; border: none; }
.btn-primary { background: var(--purple); color: var(--white); box-shadow: 0 12px 32px rgba(75,29,143,0.18); display: inline-flex; align-items: center; gap: 10px; }
.btn-primary:hover { transform: translateY(-2px); }
.btn-mascot { width: 20px; height: 28px; object-fit: contain; }
.btn-ghost { background: transparent; color: var(--purple); border: 2px solid var(--purple); }
.btn-ghost:hover { background: var(--lilac-bg); }
.btn-outline { background: transparent; color: var(--white); border: 2px solid var(--teal); }
.btn-outline:hover { background: rgba(31,191,176,0.15); }

/* HERO */
.hero {
  position: relative;
  text-align: center; padding: 90px 24px 70px; margin: 0 0 20px;
  background: transparent;
  color: var(--white);
  overflow: hidden;
}
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
}
.hero::before { width: 260px; height: 260px; top: -60px; right: -60px; background: rgba(31,191,176,0.35); }
.hero::after { width: 220px; height: 220px; bottom: -60px; left: -40px; background: rgba(183,156,240,0.35); }
.eyebrow { position: relative; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.85rem; color: var(--teal-pale); margin-bottom: 20px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.logo-badge { position: relative; width: 130px; height: 181px; object-fit: contain; margin: 0 auto 20px; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25)); }
.hero h1 { position: relative; font-size: clamp(2.2rem, 5.5vw, 3.4rem); margin-bottom: 20px; color: var(--white); }
.hero h1 .glow { color: var(--teal); }
.lede { position: relative; font-size: 1.15rem; color: var(--teal-pale); max-width: 54ch; margin: 0 auto 30px; }
.cta-row { position: relative; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.trust { position: relative; display: flex; gap: 10px; justify-content: center; color: rgba(255,255,255,0.75); font-size: 0.9rem; flex-wrap: wrap; }
.hero .btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.6); }
.hero .btn-ghost:hover { background: rgba(255,255,255,0.12); }

/* SECTIONS */
.panel { padding: 70px 24px; }
.sec-eyebrow { font-weight: 800; font-size: 0.85rem; color: var(--teal); text-align: center; margin-bottom: 10px; }
.sec-title { font-size: clamp(1.7rem, 4vw, 2.3rem); text-align: center; margin-bottom: 14px; color: var(--white); }
.sec-sub { text-align: center; color: rgba(255,255,255,0.78); max-width: 56ch; margin: 0 auto 46px; }

.page-hero { text-align: center; padding: 70px 24px 40px; max-width: 720px; margin: 0 auto; }
.page-eyebrow { display: block; font-weight: 800; font-size: 0.85rem; color: var(--teal); margin-bottom: 10px; }
.page-title { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 14px; color: var(--white); }
.page-lede { font-size: 1.1rem; color: rgba(255,255,255,0.78); max-width: 60ch; margin: 0 auto; }

/* PRICING */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.price-card { background: var(--white); border: 1px solid var(--border); border-radius: 28px; padding: 36px 30px; box-shadow: 0 12px 32px rgba(75,29,143,0.1); text-align: center; display: flex; flex-direction: column; }
.price-emoji { width: 50px; height: 70px; object-fit: contain; margin: 0 auto 6px; }
.price-name { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--purple-deep); margin-bottom: 6px; }
.price-kids { color: var(--mid); font-size: 0.9rem; margin-bottom: 18px; }
.price-amt { font-family: 'Fraunces', serif; font-size: 2.2rem; color: var(--purple); margin-bottom: 20px; }
.price-amt span { font-size: 0.9rem; color: var(--light); font-family: 'Nunito', sans-serif; }
.price-list { list-style: none; text-align: left; color: var(--mid); font-size: 0.95rem; line-height: 2; margin-bottom: 20px; }
.price-list li::before { content: '✓ '; color: var(--teal-deep); font-weight: 800; }
.price-extra { font-size: 0.85rem; color: var(--light); margin-bottom: 22px; }

/* TRAVEL */
.travel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 440px; margin: 0 auto; }
.travel-card { background: var(--lilac-bg); border-radius: 18px; padding: 20px; text-align: center; }
.travel-zone { font-size: 0.8rem; color: var(--mid); font-weight: 700; }
.travel-km { font-size: 0.75rem; color: var(--light); margin: 2px 0 6px; }
.travel-fee { font-family: 'Fraunces', serif; font-size: 1.5rem; color: var(--purple-deep); }

/* CERT-STYLE BOOKING BOX */
.cert-wrap { display: flex; justify-content: center; }
.cert { background: linear-gradient(150deg, var(--lilac-bg), var(--teal-pale)); border: 2px solid var(--violet-light); border-radius: 30px; padding: 4px; max-width: 560px; width: 100%; }
.cert-inner { position: relative; background: var(--white); border-radius: 26px; padding: 44px 40px; }
.seal { position: absolute; top: -18px; right: 30px; background: var(--teal); color: var(--white); font-family: 'Fraunces', serif; font-weight: 700; font-size: 0.75rem; line-height: 1.2; text-align: center; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(31,191,176,0.35); }
.cert-eyebrow { font-weight: 800; font-size: 0.8rem; color: var(--teal-deep); margin-bottom: 8px; }
.cert-title { font-size: 1.6rem; margin-bottom: 10px; }
.cert-desc { color: var(--mid); margin-bottom: 26px; }
.field { margin-bottom: 18px; text-align: left; }
.field label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--purple-deep); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; font-family: 'Nunito', sans-serif; font-size: 1rem; padding: 13px 15px; border: 2px solid var(--border); border-radius: 12px; background: var(--white); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--purple); }
.field-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--mid); margin-bottom: 20px; }

/* FAQ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; padding: 22px 4px; font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--purple-deep); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: var(--mid); }
.faq-a p { padding-bottom: 20px; }
.faq-item.open .faq-a { max-height: 300px; }
.chev { transition: transform 0.2s; color: var(--teal-deep); }
.faq-item.open .chev { transform: rotate(180deg); }

/* FOOTER */
footer { margin-top: 80px; background: var(--purple-deep); color: rgba(255,255,255,0.85); padding: 56px 24px 32px; text-align: center; }
.foot-logo { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--white); display: flex; align-items: center; justify-content: center; gap: 10px; }
.foot-mascot { width: 30px; height: 42px; object-fit: contain; }
.foot-tag { font-style: italic; color: var(--violet-light); margin-top: 6px; font-size: 0.95rem; }
.foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 28px 0; }
.foot-nav a { font-weight: 700; font-size: 0.9rem; color: rgba(255,255,255,0.85); }
.foot-nav a:hover { color: var(--teal); }
.socials { display: flex; justify-content: center; gap: 14px; margin-bottom: 24px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; }
.socials a:hover { background: var(--purple); }
.foot-fine { font-size: 0.82rem; color: rgba(255,255,255,0.55); border-top: 1px solid rgba(255,255,255,0.15); padding-top: 22px; line-height: 1.7; }
.foot-fine strong { color: rgba(255,255,255,0.85); }

/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.gallery-card { background: var(--lilac-bg); border-radius: 26px; padding: 26px; text-align: center; }
.gallery-img { width: 100%; aspect-ratio: 1; background: var(--white); border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; overflow: hidden; }
.gallery-placeholder { color: var(--light); font-size: 0.85rem; }

.terms-card { background: var(--white); border-radius: 30px; padding: 44px 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
.terms-body h2 { font-size: 1.25rem; margin: 34px 0 10px; }
.terms-body h2:first-child { margin-top: 0; }
.terms-body p { color: var(--mid); }

.faq-card { background: var(--white); border-radius: 30px; padding: 20px 36px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }