/* ============================================================
   STARFALL PC CLUB — styles.css
   Layout: A — boxed-1200 | Spacing scale: regular (96 / 56, 48 mobile)
   Theme: dark. Fonts: Genos (display) / Figtree (body)
   ============================================================ */

:root{
  /* palette */
  --c-bg:#eff0f4;          /* light, used sparingly */
  --c-bg-dark:#0d1024;     /* primary starry dark */
  --c-bg-dark-2:#141a3a;
  --c-ink:#eff0f4;         /* text on dark */
  --c-ink-inv:#0d1024;     /* text on light */
  --c-a1:#fbbf24;          /* star amber */
  --c-a2:#60a5fa;          /* meteor blue */
  --c-muted:#a9b2d6;

  /* fonts */
  --f-display:"Genos", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, sans-serif;

  /* radius / border */
  --r-card:12px;
  --border:1px solid rgba(96,165,250,0.35);

  /* container */
  --w-container:1200px;
  --w-narrow:760px;

  /* spacing 8px step */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:56px;

  /* section rhythm — regular */
  --sec-y:96px;
  --block-y:56px;
}
@media (max-width:768px){
  :root{ --sec-y:48px; }
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-body);
  font-size:16.5px;
  line-height:1.68;
  color:var(--c-ink);
  background:var(--c-bg-dark);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.05; margin:0 0 var(--s-3); letter-spacing:.5px; }
h1{ font-size:clamp(38px,6vw,84px); }
h2{ font-size:clamp(28px,4.5vw,50px); }
h3{ font-size:clamp(22px,2.4vw,28px); margin-bottom:var(--s-2); }
h4{ font-size:19px; margin-bottom:var(--s-2); }
p{ margin:0 0 var(--s-2); }

.container{ max-width:var(--w-container); margin-inline:auto; padding-inline:32px; }
.container--narrow{ max-width:var(--w-narrow); }
@media (max-width:768px){ .container{ padding-inline:16px; } }

.u-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- buttons ---------- */
.btn-primary,.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:var(--r-card); cursor:pointer;
  position:relative; overflow:hidden; border:1px solid transparent;
  transition:transform .18s ease;
}
.btn-primary{ background:var(--c-a1); color:var(--c-ink-inv); }
.btn-primary::before{ content:"★"; font-size:14px; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.btn-primary:hover::after{ animation:meteorSweep .7s ease; }
.btn-primary:hover,.btn-ghost:hover{ transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--c-ink); border:var(--border); }
@keyframes meteorSweep{ 0%{left:-60%;opacity:.9} 100%{left:120%;opacity:0} }

/* ---------- logo lockup ---------- */
.logo-lockup{ display:inline-flex; flex-direction:column; line-height:.92; }
.logo-lockup__top{ font-family:var(--f-display); font-weight:600; font-size:26px; letter-spacing:2px; position:relative; }
.logo-lockup__a{ position:relative; }
.logo-lockup__a::before{
  content:"★"; position:absolute; top:-.7em; left:50%; transform:translateX(-50%);
  font-size:.42em; color:var(--c-a1);
}
.logo-lockup__sub{ font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:5px; color:var(--c-a2); }

/* ============================================================
   NAV — nav-underline-bar
   ============================================================ */
.nav{ position:sticky; top:0; z-index:60; background:rgba(13,16,36,.86); backdrop-filter:blur(10px); border-bottom:var(--border); }
.nav__inner{ display:flex; align-items:center; gap:var(--s-3); min-height:66px; }
.nav__badge{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--c-muted);
  border:var(--border); border-radius:999px; padding:5px 12px; white-space:nowrap;
}
.nav__links{ display:flex; gap:var(--s-3); margin-left:auto; }
.nav__links a{ position:relative; font-weight:500; font-size:15px; padding:4px 0; color:var(--c-muted); transition:color .2s; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:100%; height:2px;
  background:linear-gradient(90deg,var(--c-a2),var(--c-a1));
  transform:scaleX(0); transform-origin:left; transition:transform .28s ease;
}
.nav__links a:hover,.nav__links a.is-active{ color:var(--c-ink); }
.nav__links a:hover::after,.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__cta{ padding:10px 20px; }
@media (max-width:900px){
  .nav__badge{ display:none; }
  .nav__links{ gap:var(--s-2); }
}
@media (max-width:680px){
  .nav__inner{ flex-wrap:wrap; gap:var(--s-2); min-height:0; padding-block:12px; }
  .nav__links{ order:3; width:100%; margin-left:0; justify-content:space-between; }
  .nav__cta{ margin-left:auto; }
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding-block:var(--sec-y); position:relative; overflow:hidden; }
.section__coord{ font-size:12px; letter-spacing:2px; color:var(--c-a2); text-transform:uppercase; margin-bottom:var(--s-2); font-weight:600; }
.section__coord--dark{ color:#3b5bdb; }
.section__intro{ max-width:64ch; color:var(--c-muted); margin-bottom:var(--s-6); font-size:17.5px; }
.section--light{ background:var(--c-bg); color:var(--c-ink-inv); }
.section--light .section__intro{ color:#3a3f57; }

/* decorative bg layers */
.section[data-decor]::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.16; filter:saturate(.7);
}
.section[data-decor="bg"]::before{ background-image:url("images/bg.jpg"); }
.section[data-decor="bg1"]::before{ background-image:url("images/bg1.jpg"); }
.section[data-decor="bg2"]::before{ background-image:url("images/bg2.jpg"); }
.section[data-decor]::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg,rgba(13,16,36,.82),rgba(13,16,36,.94));
}
.section[data-decor] > .container{ position:relative; z-index:1; }

/* ============================================================
   HERO — hero-countdown + Meteor Wish
   ============================================================ */
.s-hero{ position:relative; min-height:92vh; display:flex; align-items:center; padding-block:120px 80px; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__photo{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero__tint{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(180deg, rgba(13,16,36,.72), rgba(13,16,36,.92));
}
.hero__sky{ position:absolute; inset:0; width:100%; height:100%; }
.hero__inner{ position:relative; z-index:2; }
.hero__eyebrow{ color:var(--c-a1); font-weight:600; letter-spacing:1px; font-size:14px; text-transform:uppercase; margin-bottom:var(--s-3); }
.s-hero h1{ max-width:16ch; }
.hero__lead{ max-width:56ch; font-size:19px; color:#d7ddf5; margin-bottom:var(--s-5); }
.hero__countdown{ display:inline-flex; align-items:flex-end; gap:var(--s-2); margin-bottom:var(--s-1); }
.cd__unit{ display:flex; flex-direction:column; align-items:center; }
.cd__num{ font-family:var(--f-display); font-weight:600; font-size:clamp(40px,7vw,64px); color:var(--c-ink); font-variant-numeric:tabular-nums; min-width:1.6em; text-align:center; }
.cd__lbl{ font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--c-muted); }
.cd__sep{ font-family:var(--f-display); font-size:clamp(34px,6vw,54px); color:var(--c-a2); padding-bottom:.4em; }
.hero__cdnote{ color:var(--c-muted); font-size:14px; margin-bottom:var(--s-5); }
.hero__actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; }

/* ============================================================
   METEOR DIVIDERS
   ============================================================ */
.meteor-divider{ position:relative; height:2px; background:transparent; overflow:visible; margin:0; }
.meteor-divider__line{
  display:block; height:2px; width:100%;
  background:linear-gradient(90deg,transparent, rgba(96,165,250,.15) 20%, var(--c-a2) 50%, rgba(251,191,36,.6) 75%, transparent);
  transform-origin:left; transform:scaleX(0) rotate(-.6deg);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.meteor-divider--reverse .meteor-divider__line{ transform:scaleX(0) rotate(.8deg); transform-origin:right; }
.meteor-divider.is-in .meteor-divider__line{ transform:scaleX(1) rotate(0); }

/* ============================================================
   CARDS
   ============================================================ */
.cards{ display:grid; gap:var(--s-4); }
.cards--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .cards--3{ grid-template-columns:1fr; } }

.card{ background:var(--c-bg-dark-2); border:var(--border); border-radius:var(--r-card); overflow:hidden; display:flex; flex-direction:column; }
.card__img{ width:100%; height:220px; object-fit:cover; }
.card__figure{ height:220px; display:flex; align-items:center; justify-content:center; gap:14px; background:radial-gradient(circle at 50% 40%, rgba(96,165,250,.16), transparent 70%); }
.core-glyph,.duo-glyph{ width:48px; height:48px; border:var(--border); border-radius:8px; background:linear-gradient(160deg, rgba(96,165,250,.25), transparent); }
.card__body{ padding:var(--s-4); }
.card__rating{ display:flex; align-items:center; gap:4px; margin-bottom:var(--s-2); }
.star{ color:rgba(233,236,244,.22); font-size:16px; }
.star--on{ color:var(--c-a1); }
.card__rating-txt{ margin-left:8px; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--c-muted); }
.spec{ list-style:none; margin:var(--s-2) 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.spec li{ font-size:12.5px; color:var(--c-muted); border:var(--border); border-radius:999px; padding:4px 11px; }

/* ============================================================
   THE WINDOW band
   ============================================================ */
.band{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s-6); align-items:center; }
.band__media{ position:relative; border-radius:var(--r-card); overflow:hidden; border:var(--border); }
.band__media img{ width:100%; height:100%; object-fit:cover; }
.band__meteor{
  position:absolute; top:14%; left:-10%; width:60%; height:2px;
  background:linear-gradient(90deg,transparent,var(--c-a2),#fff);
  transform:rotate(24deg); border-radius:2px; box-shadow:0 0 12px rgba(96,165,250,.6);
  opacity:.85;
}
.band__text p{ color:#d7ddf5; }
@media (max-width:900px){ .band{ grid-template-columns:1fr; } }

/* ============================================================
   HARDWARE feature grid
   ============================================================ */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:900px){ .feature-grid{ grid-template-columns:1fr; } }
.feature{ padding:var(--s-4); background:#fff; border:1px solid rgba(13,16,36,.12); border-radius:var(--r-card); }
.feature__k{ font-family:var(--f-display); font-weight:600; font-size:26px; color:#1e2a6b; display:block; margin-bottom:var(--s-1); }
.feature p{ color:#3a3f57; margin:0; }

/* ============================================================
   RATES
   ============================================================ */
.rates .rate{ background:var(--c-bg-dark-2); border:var(--border); border-radius:var(--r-card); padding:var(--s-4); }
.rate--feature{ border-color:var(--c-a1); box-shadow:inset 0 0 0 1px rgba(251,191,36,.35); }
.rate__price{ display:flex; align-items:baseline; gap:6px; margin:var(--s-1) 0 var(--s-3); }
.rate__num{ font-family:var(--f-display); font-weight:600; font-size:52px; color:var(--c-a1); }
.rate__num::before{ content:"$"; font-size:.5em; vertical-align:super; color:var(--c-muted); }
.rate__unit{ color:var(--c-muted); font-size:15px; }
.rate p{ color:#d7ddf5; }
.rates__note{ margin-top:var(--s-5); color:var(--c-muted); font-size:16px; }
.meteor-mark{ position:relative; color:var(--c-ink); font-weight:600; white-space:nowrap; }
.meteor-mark::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:linear-gradient(90deg,transparent, var(--c-a2), var(--c-a1));
  border-radius:2px;
}

/* ============================================================
   WISH BOARD
   ============================================================ */
.wish-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:900px){ .wish-grid{ grid-template-columns:1fr; } }
.wish{
  position:relative; background:var(--c-bg-dark-2); border:var(--border);
  border-radius:var(--r-card); padding:var(--s-5) var(--s-4) var(--s-4);
  clip-path:polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.wish__star{ position:absolute; top:14px; right:16px; font-size:22px; color:rgba(233,236,244,.22); transition:color .5s ease, transform .5s ease; }
.wish--done.is-lit .wish__star{ color:var(--c-a1); transform:scale(1.15); }
.wish__goal{ font-style:italic; font-size:18px; color:var(--c-ink); margin-bottom:var(--s-2); }
.wish__by{ font-size:13px; color:var(--c-a2); margin:0; letter-spacing:.5px; }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
.gallery__item{ margin:0; border:var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--c-bg-dark-2); }
.gallery__item img{ width:100%; height:300px; object-fit:cover; }
.gallery__item--wide{ grid-column:1 / -1; }
.gallery__item--wide img{ height:340px; }
.gallery figcaption{ padding:var(--s-2) var(--s-3); font-size:14px; color:var(--c-muted); }
@media (max-width:768px){ .gallery{ grid-template-columns:1fr; } }

/* ============================================================
   STATS BAND — stats-icon-paired
   ============================================================ */
.grid--stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); }
@media (max-width:900px){ .grid--stats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .grid--stats{ grid-template-columns:1fr; } }
.card--stat{
  background:var(--c-bg-dark-2); border:var(--border); border-radius:var(--r-card);
  padding:var(--s-4); text-align:left;
}
.card--stat .card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:var(--s-2);
  border:var(--border); border-radius:10px; color:var(--c-a2); font-size:20px;
  background:linear-gradient(160deg, rgba(96,165,250,.18), transparent);
}
.card--stat .stats__num{
  display:block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(40px,5vw,58px); line-height:1; color:var(--c-a1); margin-bottom:var(--s-2);
}
.stats__unit{ font-size:.42em; color:var(--c-muted); margin-left:4px; vertical-align:super; }
.card--stat p{ color:#d7ddf5; margin:0; font-size:15px; }

/* band reverse (newcomers photo left/right swap) */
.band--reverse .band__media{ order:2; }
.band--reverse .band__text{ order:1; }
@media (max-width:900px){
  .band--reverse .band__media{ order:1; }
  .band--reverse .band__text{ order:2; }
}

/* ============================================================
   TIMELINE — timeline-horizontal-numbered
   ============================================================ */
.timeline--horizontal{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5); position:relative; }
.timeline--horizontal .timeline__step{
  position:relative; padding-top:var(--s-2);
}
.timeline--horizontal .timeline__step:not(:last-child)::after{
  content:""; position:absolute; top:24px; left:56px; right:calc(-1 * var(--s-5) - 8px); height:2px;
  background:linear-gradient(90deg, var(--c-a2), rgba(251,191,36,.5), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .8s ease;
}
.timeline--horizontal .timeline__step.is-in:not(:last-child)::after{ transform:scaleX(1); }
.timeline__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px;
  font-family:var(--f-display); font-weight:600; font-size:24px;
  color:var(--c-bg-dark); background:var(--c-a1); margin-bottom:var(--s-3);
}
.timeline__step h3{ margin-bottom:var(--s-1); }
.timeline__step p{ color:#d7ddf5; margin:0; }
@media (max-width:768px){
  .timeline--horizontal{ grid-template-columns:1fr; gap:var(--s-4); }
  .timeline--horizontal .timeline__step:not(:last-child)::after{ display:none; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq__item{ border-bottom:1px solid rgba(13,16,36,.14); padding:var(--s-3) 0; }
.faq__item summary{ font-family:var(--f-display); font-weight:600; font-size:22px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; color:var(--c-ink-inv); }
.faq__item summary::after{ content:"+"; color:#3b5bdb; font-size:26px; line-height:1; transition:transform .25s ease; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item p{ margin:var(--s-2) 0 0; color:#3a3f57; max-width:70ch; }

/* ============================================================
   FORM
   ============================================================ */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.book-form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field:nth-child(1),.field:nth-child(2){ grid-column:span 1; }
.book-form__submit{ grid-column:1 / -1; justify-content:center; }
.form-status{ grid-column:1 / -1; margin:0; min-height:1.2em; font-weight:500; }
.form-status.success{ color:var(--c-a1); }
.form-status.error{ color:#f87171; }
label{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--c-muted); }
input,select{
  font-family:var(--f-body); font-size:16px; color:var(--c-ink);
  background:var(--c-bg-dark); border:var(--border); border-radius:10px;
  padding:12px 14px; width:100%;
  background-clip:padding-box; position:relative;
  transition:border-color .2s, box-shadow .2s;
}
input::placeholder{ color:#6b73a0; }
input:focus,select:focus{ outline:none; border-color:var(--c-a2); box-shadow:0 2px 0 0 var(--c-a2); }
select option{ color:#0d1024; }
@media (max-width:600px){ .book-form{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER — footer-newsletter-embed
   ============================================================ */
.footer{ background:var(--c-bg-dark-2); border-top:var(--border); padding-block:var(--s-6) var(--s-4); }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s-5); }
.footer__tag{ color:var(--c-muted); font-size:14px; margin:var(--s-2) 0 var(--s-3); }
.footer__newsletter{ display:flex; gap:8px; flex-wrap:wrap; max-width:320px; }
.footer__newsletter input{ flex:1 1 160px; }
.footer__newsletter .hp-field{ position:absolute; left:-9999px; }
.footer__col h4{ color:var(--c-ink); }
.footer__col a{ display:block; color:var(--c-muted); font-size:14px; padding:3px 0; transition:color .2s; }
.footer__col a:hover{ color:var(--c-ink); }
.hours{ list-style:none; margin:0; padding:0; }
.hours li{ font-size:14px; color:var(--c-muted); padding:3px 0; }
.hours span{ display:inline-block; min-width:78px; color:var(--c-ink); }
.footer__bottom{ max-width:var(--w-container); margin:var(--s-6) auto 0; padding:var(--s-4) 32px 0; border-top:var(--border); display:flex; justify-content:space-between; gap:var(--s-2); flex-wrap:wrap; }
.footer__disclaimer{ margin:0; color:var(--c-a1); font-weight:600; }
.footer__copy{ margin:0; color:var(--c-muted); font-size:14px; }
@media (max-width:900px){ .footer__inner{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .footer__inner{ grid-template-columns:1fr; } .footer__bottom{ padding-inline:16px; } }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal{ max-width:var(--w-narrow); margin-inline:auto; padding:120px 24px 80px; }
.legal .meteor-divider{ margin-bottom:var(--s-5); }
.legal h1{ font-size:clamp(32px,5vw,56px); }
.legal h2{ font-size:clamp(22px,3vw,30px); margin-top:var(--s-5); }
.legal p, .legal li{ color:#d7ddf5; }
.legal ul{ padding-left:20px; }
.legal .coord{ font-size:12px; letter-spacing:2px; color:var(--c-a2); text-transform:uppercase; }
.legal-nav{ padding:20px 24px; border-bottom:var(--border); }
.legal-nav .container{ display:flex; align-items:center; justify-content:space-between; }
.legal-back{ color:var(--c-muted); font-size:14px; }
.legal-back:hover{ color:var(--c-ink); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .meteor-divider__line{ transform:scaleX(1) rotate(0); }
  .wish--done .wish__star{ color:var(--c-a1); }
  .hero__sky{ display:none; }
}


/* === adjust: fit hero in one screen (smaller h1 + countdown) === */
.s-hero h1{ font-size:clamp(28px,3.2vw,46px); line-height:1.08; }
.s-hero .hero__lead{ font-size:clamp(15px,1.3vw,18px); }
.s-hero{ padding-block:96px 64px; }
.cd__num{ font-size:clamp(28px,4.4vw,44px); }
.cd__sep{ font-size:clamp(24px,4vw,38px); }