:root {
  --bg:        #0d0d0f;
  --surface:   #17171b;
  --surface-2: #1f1f25;
  --text:      #f2f2f4;
  --muted:     #a9a9b2;
  --accent:    #e63946;
  --accent-hi: #ff5864;
  --border:    #2a2a31;
  --radius:    12px;
  --maxw:      1100px;
  --display:   "Anton", "Impact", "Haettenschweiler", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-hi); }

img { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }

/* ---------- Header ---------- */
header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
header.scrolled {
  background: rgba(13,13,15,.88);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
}
/* logo-mark.jpg is the emblem only (no wordmark) on pure black, so
   mix-blend-mode: lighten drops its background out completely. */
.logo {
  height: 54px;
  width: auto;
  mix-blend-mode: lighten;
  flex: 0 0 auto;
}
.brand {
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 1.5px;
  line-height: 1.05;
  text-transform: uppercase;
}
.brand .hl { color: var(--accent); }
/* Second line, tracked out to sit under the wordmark like the logo's own
   "Stronger Everyday" strapline */
.brand-sub {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: #fff;
  margin-top: 5px;
  margin-left: 1px;
}
.header-cta { margin-left: auto; }

/* Anchor targets clear the fixed header */
section { scroll-margin-top: 80px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  transition: background .15s ease, transform .05s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hi); }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 9px 16px; font-size: .9rem; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn.ghost:hover { border-color: var(--accent); color: #fff; }

/* ---------- Hero: full-screen logo + wordmark backdrop ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-block: 140px 96px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Ambient blurred wash of the logo — fills the whole screen edge to edge */
.hero-glow {
  position: absolute;
  inset: -10%;
  z-index: -3;
  background: url("../images/logo.jpeg") center/cover no-repeat;
  filter: blur(70px) saturate(1.5) brightness(1.15);
  transform: scale(1.15);
  opacity: .85;
  animation: glowDrift 18s ease-in-out infinite alternate;
}

/* The crisp logo + wordmark, as large as fits without clipping any letters */
.hero-mark {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/logo.jpeg") no-repeat;
  background-position: center 30%;
  background-size: min(1180px, 96%) auto;
  mix-blend-mode: lighten;
  opacity: 0;
  animation: markIn 1.6s cubic-bezier(.2,.7,.2,1) .1s forwards;
}

/* Darkens top + bottom so the header and the copy stay readable */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 22%, transparent 30%, rgba(13,13,15,.55) 100%),
    linear-gradient(180deg,
      rgba(13,13,15,.72) 0%,
      rgba(13,13,15,.18) 26%,
      rgba(13,13,15,.55) 58%,
      rgba(13,13,15,.94) 82%,
      var(--bg) 100%);
}

.hero-content { position: relative; }

.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 10rem);
  line-height: .92;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  text-shadow: 0 10px 50px rgba(0,0,0,.75);
}
.hero h1 .accent { color: var(--accent); }

.hero .tagline {
  color: var(--muted);
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  max-width: 46ch;
  margin: 0 0 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,.8);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}

/* ---------- Looping typewriter (hero headline) ---------- */
.typewriter .word {
  display: inline-block;
  margin-right: .3em;
}
.typewriter .word.accent { margin-right: 0; }

/* Each letter lands: out of focus, low and small -> sharp and settled. */
.typewriter .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.3em) scale(.72);
  filter: blur(10px);
  transition:
    opacity .3s ease,
    transform .42s cubic-bezier(.16,1.1,.3,1.32),
    filter .3s ease;
  will-change: opacity, transform, filter;
}
.typewriter .char.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
/* Deleting is quicker and drops the letters away rather than lifting them. */
.typewriter.is-erasing .char {
  transition-duration: .16s;
  transform: translateY(-.16em) scale(.86);
}

/* Once the line is complete, the red word breathes a slow glow. */
.typewriter.is-full .accent {
  animation: accentGlow 2.8s ease-in-out infinite;
}
@keyframes accentGlow {
  0%, 100% { text-shadow: 0 10px 50px rgba(0,0,0,.75); }
  50%      { text-shadow: 0 10px 50px rgba(0,0,0,.75), 0 0 38px rgba(230,57,70,.6); }
}

/* ---------- Word-by-word reveal ---------- */
.reveal-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em) scale(.86);
  filter: blur(6px);
}
.reveal-words.is-animating .word {
  animation: wordPop .8s cubic-bezier(.2,.9,.25,1.25) both;
}
.reveal-words.no-anim .word {
  opacity: 1;
  transform: none;
  filter: none;
}

@keyframes wordPop {
  0%   { opacity: 0; transform: translateY(.45em) scale(.86); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(0) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes markIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: .95; transform: scale(1); }
}
@keyframes glowDrift {
  from { transform: scale(1.15) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.25) translate3d(1.5%, 1%, 0); }
}

/* ---------- Scroll cue ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  color: var(--muted);
  text-decoration: none;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue .arrow {
  font-size: 1.1rem;
  animation: cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: .6; }
  50%      { transform: translateY(5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-mark, .scroll-cue .arrow { animation: none; }
  .hero-mark { opacity: .95; }
}

/* ---------- Sections ---------- */
section { padding-block: 56px; }
.section-head { margin-bottom: 32px; }
.section-head h2 {
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 800;
}
.section-head p { color: var(--muted); margin: 0; max-width: 55ch; }

/* ---------- Facilities ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { font-size: 1.15rem; }
.card p { color: var(--muted); margin: 0; }
.card .icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.4rem;
  margin-bottom: 14px;
}

/* ---------- Plans ---------- */
#plans { background: var(--surface); border-block: 1px solid var(--border); }
.plan {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}
.plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.plan .badge {
  align-self: flex-start;
  background: var(--accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.plan h3 { font-size: 1.25rem; margin-bottom: 4px; }
.plan .price {
  font-size: 2rem;
  font-weight: 900;
  margin: 8px 0 2px;
}
.plan .price small { font-size: .85rem; font-weight: 500; color: var(--muted); }
.plan ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  color: var(--muted);
  flex: 1;
}
.plan li {
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.plan li::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.plan li:last-child { border-bottom: 0; }

/* ---------- Footer ---------- */
footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-block: 48px 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.footer-brand img {
  height: 46px;
  width: auto;
  mix-blend-mode: lighten;
}
footer h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: 10px; color: var(--muted); }
.contact-list a { color: var(--text); text-decoration: none; }
.contact-list a:hover { color: var(--accent-hi); }
.contact-list .label {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin-bottom: 2px;
}
.copyright {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
}

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  #plans .grid { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: 160px 110px; }
  .logo { height: 62px; }
  .brand { font-size: 1.7rem; }
  .brand-sub { font-size: .66rem; letter-spacing: .34em; }
  /* 1.3 is the logo's aspect ratio, so the third term caps the logo by
     height — on a short window it shrinks instead of running into the copy. */
  .hero-mark {
    background-position: center 32%;
    background-size: min(1180px, 78%, calc(76svh * 1.3)) auto;
  }
}

/* Phones and tablets: give the logo its own grid row above the copy, so the
   wordmark can never land on top of "Jogeshwari East, Mumbai". The row is
   whatever height is left over, and background-size: contain fits the logo
   into it — big where there is room, smaller on a short screen. */
@media (max-width: 899px) {
  .hero {
    grid-template-rows: minmax(140px, 1fr) auto;
    align-content: stretch;
    row-gap: 18px;
    padding-block: 88px 72px;
  }
  /* Lighter scrim over the top now that the logo sits up there on its own */
  .hero-scrim {
    background:
      radial-gradient(130% 70% at 50% 26%, transparent 45%, rgba(13,13,15,.5) 100%),
      linear-gradient(180deg,
        rgba(13,13,15,.7) 0%,
        rgba(13,13,15,.08) 22%,
        rgba(13,13,15,.34) 50%,
        rgba(13,13,15,.9) 78%,
        var(--bg) 100%);
  }
  .hero-mark {
    position: relative;
    inset: auto;
    grid-row: 1;
    min-height: 0;
    background-position: center center;
    background-size: contain;
  }
  .hero-content { grid-row: 2; }
}

/* Keep header balanced on very small screens */
@media (max-width: 420px) {
  .logo { height: 40px; }
  .brand { font-size: 1.15rem; }
  .brand-sub { font-size: .48rem; letter-spacing: .22em; margin-top: 3px; }
  .header-cta .btn { padding: 8px 12px; }
  .hero { padding-block: 78px 68px; row-gap: 14px; }
  .hero .tagline { margin-bottom: 22px; }
}

a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}