/* =====================================================================
   LIFE GYM CLUBHOUSE MANAGEMENT — Coming Soon
   Stylesheet
   ---------------------------------------------------------------------
   Palette is driven by the logo: deep black, royal gold, signal red.
   All colours live in :root — change them there and the whole site follows.
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --bg:        #07070a;
  --bg-2:      #0b0b10;
  --bg-3:      #101017;
  --line:      rgba(227,190,85,.16);
  --line-soft: rgba(255,255,255,.08);
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.055);

  /* brand gold */
  --gold-1: #F8E39B;
  --gold-2: #E3BE55;
  --gold-3: #C9972B;
  --gold-4: #8A5E12;
  --gold-grad: linear-gradient(100deg,#C9972B 0%,#E3BE55 22%,#FFF4CE 46%,#E3BE55 68%,#C9972B 100%);

  /* brand red + leaf */
  --red:     #E31E24;
  --red-hi:  #FF4A3D;
  --leaf:    #58C14F;

  /* type */
  --text:  #EFEBE3;
  --muted: #9D978C;
  --dim:   #6E6962;

  --ff-head: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --ff-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --shadow-gold: 0 14px 40px -18px rgba(227,190,85,.55);
  --ease: cubic-bezier(.22,.8,.26,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--ff-head); font-weight:600; line-height:1.14; letter-spacing:.01em; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

svg{ fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.ico{ width:1.1em; height:1.1em; flex:none; }

::selection{ background:var(--gold-3); color:#0a0a0c; }

:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; border-radius:4px; }

/* ---------- 3. LAYOUT ---------- */
.container{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:20px; }

.section{ position:relative; padding:clamp(64px,9vw,118px) 0; }
.section--tight{ padding-block:clamp(44px,6vw,72px); }

.section__head{ max-width:760px; margin:0 auto clamp(36px,5vw,58px); text-align:center; }
.section__sub{ color:var(--muted); font-size:1.03rem; margin-top:14px; }

.eyebrow{
  display:inline-block;
  font-family:var(--ff-head);
  font-size:.74rem; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-2);
  margin-bottom:14px;
  position:relative; padding-left:34px;
}
.eyebrow::before{
  content:""; position:absolute; left:0; top:50%; width:24px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-3));
}

.h2{ font-size:clamp(1.75rem,4.1vw,2.85rem); letter-spacing:-.01em; }

.grad{
  background:var(--gold-grad);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:gradShift 7s linear infinite;
}
@keyframes gradShift{ to{ background-position:220% 0; } }

/* ---------- 4. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-content:center; justify-items:center; gap:22px;
  background:var(--bg);
  transition:opacity .6s var(--ease), visibility .6s;
  padding:24px;
}
.preloader.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader__logo{ width:min(260px,70vw); animation:pulseGlow 2s ease-in-out infinite; }
.preloader__bar{ width:min(220px,60vw); height:2px; background:rgba(255,255,255,.1); overflow:hidden; border-radius:2px; }
.preloader__bar span{ display:block; height:100%; width:40%; background:var(--gold-grad); animation:loadSlide 1.1s var(--ease) infinite; }
.preloader__text{ font-family:var(--ff-head); font-size:.72rem; letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin:0; }
@keyframes loadSlide{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(320%);} }
@keyframes pulseGlow{ 0%,100%{ filter:drop-shadow(0 0 14px rgba(227,190,85,.25)); } 50%{ filter:drop-shadow(0 0 34px rgba(227,190,85,.5)); } }

/* ---------- 5. NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto; z-index:90;
  padding:14px 0;
  transition:background .35s var(--ease), padding .35s var(--ease), border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(7,7,10,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding:8px 0;
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav__brand img{ height:40px; width:auto; transition:height .35s var(--ease); }
.nav.is-stuck .nav__brand img{ height:32px; }

.nav__links{ display:flex; align-items:center; gap:28px; }
.nav__links a:not(.btn){
  font-family:var(--ff-head); font-size:.84rem; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  position:relative; padding:4px 0; transition:color .25s;
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold-grad); transition:width .3s var(--ease);
}
.nav__links a:not(.btn):hover{ color:var(--gold-1); }
.nav__links a:not(.btn):hover::after{ width:100%; }

.nav__toggle{ display:none; width:44px; height:44px; position:relative; z-index:101; }
.nav__toggle span{
  display:block; height:2px; width:24px; margin:5px auto; border-radius:2px;
  background:var(--gold-2); transition:transform .3s var(--ease), opacity .2s;
}
.nav__toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle.is-open span:nth-child(2){ opacity:0; }
.nav__toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--ff-head); font-weight:500; font-size:.92rem;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 26px; border-radius:999px;
  transition:transform .25s var(--ease), box-shadow .3s, background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn--sm{ padding:10px 18px; font-size:.78rem; }
.btn--wide{ width:100%; padding-block:16px; }

.btn--gold{
  background:var(--gold-grad); background-size:200% 100%;
  color:#120d02; box-shadow:var(--shadow-gold);
}
.btn--gold:hover{ transform:translateY(-2px); background-position:100% 0; box-shadow:0 18px 44px -16px rgba(227,190,85,.75); }

.btn--ghost{ border:1px solid var(--line); color:var(--gold-1); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--gold-3); background:var(--surface-2); transform:translateY(-2px); }

.btn--link{
  color:var(--muted); text-transform:none; letter-spacing:.02em;
  font-family:var(--ff-body); font-size:.95rem; padding:14px 6px;
}
.btn--link:hover{ color:var(--gold-1); }

/* ---------- 7. HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding:112px 0 110px;
  overflow:hidden;
  isolation:isolate;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; }
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(227,190,85,.10), transparent 70%),
    radial-gradient(50% 40% at 85% 10%, rgba(227,30,36,.10), transparent 70%),
    linear-gradient(180deg, rgba(7,7,10,.25) 0%, rgba(7,7,10,.55) 55%, var(--bg) 100%);
}
.hero__grid{
  position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:
    linear-gradient(rgba(227,190,85,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227,190,85,.05) 1px, transparent 1px);
  background-size:74px 74px;
  mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}
.hero__inner{ text-align:center; display:flex; flex-direction:column; align-items:center; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 18px 8px 14px; border-radius:999px;
  border:1px solid var(--line); background:rgba(227,190,85,.07);
  font-family:var(--ff-head); font-size:.7rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-1);
}
.pill__dot{
  width:7px; height:7px; border-radius:50%; background:var(--leaf); flex:none;
  box-shadow:0 0 0 0 rgba(88,193,79,.6); animation:ping 2s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(88,193,79,.55); }
  70%{ box-shadow:0 0 0 9px rgba(88,193,79,0); }
  100%{ box-shadow:0 0 0 0 rgba(88,193,79,0); }
}

.hero__logo{ position:relative; width:min(500px,88vw); margin:18px 0 6px; }
.hero__logo::before{
  content:""; position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:125%; aspect-ratio:1.9; border-radius:50%;
  background:radial-gradient(ellipse, rgba(227,190,85,.26), transparent 66%);
  filter:blur(26px); z-index:-1;
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.65; scale:1; } 50%{ opacity:1; scale:1.07; } }
.hero__logo img{ width:100%; animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

.hero__shine{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:url(../img/logo.png); mask-image:url(../img/logo.png);
  -webkit-mask-size:contain;  mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.72) 50%,transparent 60%);
  background-size:280% 100%; background-repeat:no-repeat;
  mix-blend-mode:screen;
  animation:shine 5s ease-in-out infinite;
}
@keyframes shine{ 0%{ background-position:170% 0; } 55%,100%{ background-position:-70% 0; } }

.hero__title{
  font-size:clamp(2.9rem,10vw,6.2rem);
  font-weight:700; letter-spacing:.015em; text-transform:uppercase;
  margin:6px 0 4px;
}
.hero__lead{ max-width:620px; color:var(--muted); font-size:clamp(1rem,2.1vw,1.1rem); margin-top:14px; }
.hero__lead strong{ color:var(--text); font-weight:500; }

.hero__tag{
  display:inline-flex; align-items:center; gap:9px; margin-top:20px;
  font-family:var(--ff-head); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-2);
}

/* build progress bar */
.buildbar{ width:min(520px,92vw); margin-top:32px; }
.buildbar__top{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--ff-head); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim); margin-bottom:9px;
}
.buildbar__pct{ color:var(--gold-2); font-size:.86rem; font-variant-numeric:tabular-nums; }
.buildbar__track{ height:6px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.buildbar__fill{
  height:100%; width:0; border-radius:999px;
  background:var(--gold-grad); background-size:200% 100%;
  transition:width 1.6s var(--ease);
  box-shadow:0 0 18px rgba(227,190,85,.5);
  animation:gradShift 4s linear infinite;
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }

.scroll-cue{
  position:absolute; left:50%; bottom:24px; translate:-50% 0;
  display:grid; justify-items:center; gap:8px; color:var(--dim);
  animation:floaty 3s ease-in-out infinite;
}
.scroll-cue__mouse{ width:22px; height:34px; border:1px solid var(--line); border-radius:12px; display:grid; justify-items:center; padding-top:6px; }
.scroll-cue__mouse span{ width:3px; height:6px; border-radius:2px; background:var(--gold-2); animation:wheel 1.8s ease-in-out infinite; }
@keyframes wheel{ 0%{ opacity:0; transform:translateY(-2px);} 40%{ opacity:1;} 100%{ opacity:0; transform:translateY(10px);} }
.scroll-cue__txt{ font-family:var(--ff-head); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; }

/* ---------- 8. MARQUEE ---------- */
.marquee{
  overflow:hidden; border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(227,30,36,.09),rgba(227,190,85,.07),rgba(227,30,36,.09));
  padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:scrollX 32s linear infinite; }
.marquee__set{ display:flex; align-items:center; gap:26px; padding-right:26px; }
.marquee__set span{
  font-family:var(--ff-head); font-size:.92rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-1); white-space:nowrap;
}
.marquee__set i{ color:var(--red); font-style:normal; font-size:.6rem; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- 9. STATS ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden; }
.stat{ background:var(--bg); padding:clamp(22px,3.4vw,34px) 20px; text-align:center; transition:background .3s; }
.stat:hover{ background:var(--bg-3); }
.stat__num{
  display:block; font-family:var(--ff-head); font-weight:600;
  font-size:clamp(2rem,5vw,3rem); line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__num em{ font-style:normal; }
.stat__lbl{ display:block; margin-top:10px; font-size:.86rem; color:var(--muted); line-height:1.45; }

/* ---------- 10. ABOUT ---------- */
.about{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:start; }
.about__copy p{ color:var(--muted); }
.about__copy strong{ color:var(--gold-1); font-weight:500; }
.about__copy .h2{ margin-bottom:20px; }
.about__sign{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-family:var(--ff-head); letter-spacing:.14em; text-transform:uppercase; font-size:.9rem;
}
.about__sign strong{ color:var(--gold-2); font-weight:500; }

.about__list{ display:grid; gap:16px; }
.about__list li{
  display:flex; gap:14px; padding:18px 20px;
  border:1px solid var(--line-soft); border-radius:var(--r-md);
  background:var(--surface); transition:border-color .3s, transform .3s var(--ease), background .3s;
}
.about__list li:hover{ border-color:var(--line); background:var(--surface-2); transform:translateX(5px); }
.about__list .ico{ width:20px; height:20px; color:var(--gold-2); margin-top:3px; stroke-width:2.4; }
.about__list h4{ font-size:1rem; font-weight:500; letter-spacing:.02em; margin-bottom:4px; }
.about__list p{ font-size:.9rem; color:var(--muted); line-height:1.55; }

/* ---------- 11. AMENITY CARDS ---------- */
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.card{
  position:relative; padding:28px 24px 26px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  overflow:hidden;
  transition:transform .4s var(--ease), border-color .35s, box-shadow .35s;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(120% 90% at 50% 0%, rgba(227,190,85,.14), transparent 62%);
  transition:opacity .4s;
}
.card:hover{ transform:translateY(-7px); border-color:var(--line); box-shadow:0 24px 50px -28px rgba(0,0,0,.9), 0 0 0 1px rgba(227,190,85,.14) inset; }
.card:hover::before{ opacity:1; }
.card__ico{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  border:1px solid var(--line); background:rgba(227,190,85,.08);
  color:var(--gold-2); margin-bottom:18px;
  transition:transform .4s var(--ease), box-shadow .4s, color .3s;
}
.card__ico svg{ width:25px; height:25px; }
.card:hover .card__ico{ transform:translateY(-3px) scale(1.06); color:var(--gold-1); box-shadow:0 0 26px -6px rgba(227,190,85,.6); }
.card h3{ font-size:1.07rem; font-weight:500; letter-spacing:.03em; margin-bottom:8px; position:relative; }
.card p{ font-size:.89rem; color:var(--muted); line-height:1.6; position:relative; }

/* ---------- 12. CLUBHOUSES ---------- */
.clubs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.club{
  position:relative; padding:30px 26px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(227,190,85,.07),rgba(255,255,255,.015));
  transition:transform .4s var(--ease), border-color .35s;
  overflow:hidden;
}
.club::after{
  content:""; position:absolute; right:-28px; bottom:-34px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,rgba(227,190,85,.16),transparent 68%);
}
.club:hover{ transform:translateY(-6px); border-color:var(--gold-4); }
.club__badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  font-family:var(--ff-head); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--leaf); padding:5px 12px; border-radius:999px;
  border:1px solid rgba(88,193,79,.3); background:rgba(88,193,79,.08);
}
.club h3{ font-size:1.3rem; font-weight:600; letter-spacing:.02em; margin-bottom:7px; }
.club p{ font-size:.89rem; color:var(--muted); }
.clubs__cta{ text-align:center; margin-top:34px; color:var(--muted); font-size:.98rem; }
.clubs__cta a{ color:var(--gold-2); font-weight:500; border-bottom:1px solid transparent; transition:border-color .25s; }
.clubs__cta a:hover{ border-bottom-color:var(--gold-2); }

/* ---------- 13. BUILD PROGRESS LIST ---------- */
.prog{
  max-width:860px; margin-inline:auto; display:grid; gap:22px;
  padding:clamp(24px,4vw,40px);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
}
.prog__row{ display:grid; gap:9px; }
.prog__meta{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.prog__meta h4{ font-size:.99rem; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.prog__pct{ font-family:var(--ff-head); font-size:.85rem; color:var(--gold-2); font-variant-numeric:tabular-nums; }
.prog__track{ height:7px; border-radius:999px; background:rgba(255,255,255,.07); overflow:hidden; }
.prog__fill{
  height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-4),var(--gold-2),var(--gold-1));
  transition:width 1.5s var(--ease);
  box-shadow:0 0 14px rgba(227,190,85,.4);
}
.prog__fill.is-done{ background:linear-gradient(90deg,#2E7D32,var(--leaf)); box-shadow:0 0 14px rgba(88,193,79,.4); }
.prog__state{
  justify-self:start; font-family:var(--ff-head); font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--gold-2);
  padding:4px 11px; border-radius:999px; border:1px solid var(--line); background:rgba(227,190,85,.07);
}
.prog__state--done{ color:var(--leaf); border-color:rgba(88,193,79,.3); background:rgba(88,193,79,.08); }
.prog__state--queued{ color:var(--dim); border-color:var(--line-soft); background:rgba(255,255,255,.03); }

/* ---------- 14. AWARDS ---------- */
.awards{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:860px; margin-inline:auto; }
.award{
  text-align:center; padding:36px 26px;
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(227,190,85,.06),rgba(255,255,255,.012));
  transition:transform .4s var(--ease), border-color .35s;
}
.award:hover{ transform:translateY(-6px); border-color:var(--gold-4); }
.award__ico{
  width:60px; height:60px; margin:0 auto 18px; border-radius:50%;
  display:grid; place-items:center; color:var(--gold-2);
  border:1px solid var(--line); background:rgba(227,190,85,.08);
  box-shadow:0 0 30px -10px rgba(227,190,85,.5);
}
.award__ico svg{ width:28px; height:28px; }
.award h3{ font-size:1.32rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-bottom:12px; }
.award ul{ display:grid; gap:6px; }
.award li{ font-size:.9rem; color:var(--muted); }

/* ---------- 15. FORM ---------- */
.notify{
  max-width:880px; margin-inline:auto;
  padding:clamp(28px,5vw,52px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(227,190,85,.09), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.notify__head{ text-align:center; margin-bottom:34px; }
.notify__head .section__sub{ margin-inline:auto; max-width:520px; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field{ display:grid; gap:7px; align-content:start; }
.field--full{ grid-column:1/-1; }
.field label{
  font-family:var(--ff-head); font-size:.72rem; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.field label span{ color:var(--red-hi); }
.field input,.field textarea{
  width:100%; padding:13px 16px; color:var(--text);
  background:rgba(255,255,255,.04); border:1px solid var(--line-soft);
  border-radius:var(--r-sm); font-size:.96rem; font-weight:300;
  transition:border-color .25s, background .25s, box-shadow .25s;
  resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--dim); }
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--gold-3); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(227,190,85,.1);
}
.field.is-invalid input{ border-color:var(--red); box-shadow:0 0 0 3px rgba(227,30,36,.12); }
.field__err{ font-size:.78rem; color:var(--red-hi); min-height:1em; }
.form__actions{ display:grid; gap:12px; justify-items:center; margin-top:4px; }
.form__actions .btn{ max-width:360px; }
.form__note{ font-size:.85rem; color:var(--dim); margin:0; text-align:center; min-height:1.2em; }
.form__note.is-ok{ color:var(--leaf); }

/* ---------- 16. CONTACT ---------- */
.contact{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ccard{
  padding:30px 26px; border:1px solid var(--line-soft); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:transform .4s var(--ease), border-color .35s;
}
.ccard:hover{ transform:translateY(-6px); border-color:var(--line); }
.ccard__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  color:var(--gold-2); border:1px solid var(--line); background:rgba(227,190,85,.08); margin-bottom:16px;
}
.ccard__ico svg{ width:22px; height:22px; }
.ccard h3{ font-size:1.05rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin-bottom:11px; }
.ccard p{ font-size:.9rem; color:var(--muted); line-height:1.75; }
.ccard__lines{ display:grid; gap:6px; }
.ccard__lines a{ color:var(--text); transition:color .25s; font-weight:400; }
.ccard__lines a:hover{ color:var(--gold-1); }
.ccard__link{
  display:inline-block; margin-top:14px; font-size:.84rem; color:var(--gold-2);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.ccard__link:hover{ border-bottom-color:var(--gold-2); }

/* ---------- 17. FOOTER ---------- */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(44px,6vw,66px) 0 30px; }
.footer__inner{ text-align:center; display:grid; justify-items:center; }
.footer__logo{ width:min(240px,62vw); opacity:.95; }
.footer__tag{
  font-family:var(--ff-head); font-size:.76rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-2); margin:16px 0 0;
}
.footer__meta{ color:var(--dim); font-size:.88rem; margin-top:10px; }
.footer__bar{
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-soft); width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:.82rem; color:var(--dim);
}
.footer__wip{ display:inline-flex; align-items:center; gap:8px; color:var(--muted); }

/* ---------- 18. FLOATING BUTTONS ---------- */
.fab{
  position:fixed; right:18px; z-index:80;
  width:54px; height:54px; border-radius:50%;
  display:grid; place-items:center;
  transition:transform .3s var(--ease), opacity .3s, visibility .3s, box-shadow .3s;
}
.fab svg{ width:26px; height:26px; }
.fab--wa{
  bottom:18px; background:linear-gradient(145deg,#2ED158,#1EA64A); color:#06230f;
  box-shadow:0 10px 30px -10px rgba(46,209,88,.8);
}
.fab--wa::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(46,209,88,.55); animation:ripple 2.4s ease-out infinite;
}
@keyframes ripple{ 0%{ transform:scale(1); opacity:.8; } 100%{ transform:scale(1.65); opacity:0; } }
.fab--wa:hover{ transform:scale(1.08); }

.fab--top{
  bottom:84px; background:var(--surface-2); color:var(--gold-2);
  border:1px solid var(--line); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  opacity:0; visibility:hidden; transform:translateY(12px);
}
.fab--top.is-on{ opacity:1; visibility:visible; transform:none; }
.fab--top:hover{ color:var(--gold-1); border-color:var(--gold-3); }

/* ---------- 19. SCROLL REVEAL ---------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* ---------- 20. RESPONSIVE ---------- */
@media (max-width:1024px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
}

@media (max-width:860px){
  .nav__toggle{ display:block; }
  .nav__links{
    position:fixed; inset:0; z-index:100;
    flex-direction:column; justify-content:center; gap:26px;
    background:rgba(7,7,10,.97);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    translate:100% 0; transition:translate .45s var(--ease);
    padding:80px 24px 40px;
  }
  .nav__links.is-open{ translate:0 0; }
  .nav__links a:not(.btn){ font-size:1.12rem; letter-spacing:.2em; }
  .nav__cta{ margin-top:10px; }
  .clubs{ grid-template-columns:1fr; }
  .awards{ grid-template-columns:1fr; }
  .form{ grid-template-columns:1fr; }
  .hero{ padding-top:112px; }
}

@media (max-width:560px){
  body{ font-size:15.5px; }
  .cards{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; width:100%; }
  .hero__cta .btn{ width:100%; }
  .prog__meta{ flex-direction:column; align-items:flex-start; gap:2px; }
  .footer__bar{ justify-content:center; text-align:center; }
  .scroll-cue{ display:none; }
  .fab{ width:50px; height:50px; }
  .fab--top{ bottom:78px; }
}

/* ---------- 21. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* ---------- 22. PRINT ---------- */
@media print{
  .nav,.fab,.scroll-cue,.preloader,.marquee,.hero__canvas{ display:none !important; }
  body{ background:#fff; color:#000; }
}