/* ==========================================================================
   info.fitoholix.in — the page ad clicks land on.
   One screen, one action. No JavaScript, no build step: the folder is the site.

   Colours, type and the ramp mirror the main site's tokens so the two read as
   one brand. They are written out rather than imported because this page does
   not share a stylesheet with the main build.
   ========================================================================== */

@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-tight-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/inter-var-latin.woff2') format('woff2');
}

/* size-adjust fallbacks so the swap causes no layout shift */
@font-face {
  font-family: 'Inter Tight Fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 92%;
  descent-override: 23%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  --void: #08060a;
  --void-rgb: 8, 6, 10;
  --ember: #ff5e1a;
  --ember-rgb: 255, 94, 26;
  --flare: #ffa23a;
  --bone: #f7f1e9;
  --bone-rgb: 247, 241, 233;
  --stone: #a79a90;

  --font-display: 'Inter Tight', 'Inter Tight Fallback', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;

  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --page-margin: clamp(1.25rem, 5vw, 4rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--void);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--bone);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The hero, which is the whole page
   -------------------------------------------------------------------------- */

/* svh, not vh: on a phone the address bar collapsing must not shove the call
   to action off the bottom of the screen mid-read. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 8vh, 5rem) var(--page-margin);
  overflow: hidden;
}

.hero__plate {
  position: absolute;
  inset: 0;
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the faces sit above centre in both crops, so the frame holds them when the
     viewport is shorter than the image */
  object-position: 50% 32%;
}

/* Two gradients, not one flat wash: the top stop keeps the logo legible, the
   bottom one carries the call to action, and the middle stays open so the
   photograph is still a photograph. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--void-rgb), 0.92) 0%,
      rgba(var(--void-rgb), 0.55) 34%,
      rgba(var(--void-rgb), 0.72) 68%,
      rgba(var(--void-rgb), 0.95) 100%
    ),
    radial-gradient(120% 70% at 50% 108%, rgba(var(--ember-rgb), 0.16) 0%, rgba(var(--ember-rgb), 0) 68%);
}

.hero__content {
  position: relative;
  width: min(100%, 44rem);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.hero__brand {
  display: block;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}

.hero__brand img {
  width: clamp(150px, 26vw, 210px);
  height: auto;
  display: block;
}

.hero__eyebrow {
  margin: 0 0 clamp(1rem, 2.5vh, 1.5rem);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 5.4vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
  text-shadow: 0 1px 18px rgba(var(--void-rgb), 0.85);
}

.hero__title span {
  display: block;
}

.hero__lead {
  margin: clamp(1.25rem, 3vh, 1.75rem) 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.15vw, 1.1rem);
  line-height: 1.62;
  color: rgba(var(--bone-rgb), 0.86);
  text-shadow: 0 1px 14px rgba(var(--void-rgb), 0.8);
}

/* The one thing this page exists to be clicked. Full width on a phone, where
   the thumb is, and a comfortable target everywhere. */
.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  min-height: 52px;
  padding: 0.95em 2.2em;
  border-radius: 8px;
  background: linear-gradient(180deg, #f2540f 0%, #d8420a 100%);
  color: #150802;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 26px rgba(var(--void-rgb), 0.45);
  transition:
    transform 180ms var(--e-out),
    box-shadow 180ms var(--e-out),
    background 180ms var(--e-out);
}

.hero__cta:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #ff6220 0%, #e8480b 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 14px 34px rgba(var(--ember-rgb), 0.28);
}

.hero__cta:active {
  transform: translateY(0) scale(0.99);
}

/* What the click commits you to, said at the point of the click rather than
   left to be guessed. */
.hero__detail {
  margin: clamp(0.85rem, 2vh, 1.1rem) 0 0;
  font-size: 0.8125rem;
  color: var(--stone);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin: clamp(2rem, 5vh, 3rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--bone-rgb), 0.62);
}

.hero__proof li {
  position: relative;
}

/* a ramp tick before each fact, the brand's one gradient doing the pointing */
.hero__proof li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--ember), var(--flare));
}

@media (max-width: 749px) {
  /* The authored line breaks are composed for a wide measure. On a phone they
     wrap a second time inside themselves and rag badly, so the lines run
     together and the browser balances them for the width it actually has. */
  .hero__title span {
    display: inline;
  }

  .hero__cta {
    width: 100%;
    max-width: 22rem;
  }

  .hero__proof {
    gap: 0.6rem 1.1rem;
    font-size: 0.625rem;
    letter-spacing: 0.12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta {
    transition: none;
  }
}