/* ==========================================================================
   FUR4 Corporate — Coming Soon
   Design reference: Figma frame "FUR4 Corp Coming Soon" (1920 × 1080)
   Sizes match the design exactly at ≥1920px and scale fluidly below.
   ========================================================================== */

:root {
  /* Colors (exact values from Figma) */
  --clr-bg: #ffffff;
  --clr-text: #545454;        /* headings, body, labels */
  --clr-accent: #00c0f3;      /* "Better" highlight */
  --clr-muted: #74788d;       /* fur4corp.com */
  --clr-divider: #929db6;     /* feature divider gradient mid-stop */

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout (94px page margin at 1920) */
  --space-page: clamp(1.5rem, 4.9vw, 5.875rem);
}

/* --- Base ----------------------------------------------------------------- */

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

body {
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

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

/* --- Page layout ---------------------------------------------------------- */

.page {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(0.75rem, 1.04vw, 1.25rem); /* 20px at 1920 */
  max-width: 120rem; /* 1920px */
  min-height: 100svh;
  margin-inline: auto;
}

/* --- Content column ------------------------------------------------------- */

.content {
  /* 101px top offset at full size */
  padding: clamp(2.5rem, 9.35vh, 6.3125rem) 0 3rem var(--space-page);
}

.logo {
  width: clamp(7.5rem, 10.26vw, 12.3125rem); /* 197px */
  margin-bottom: 1rem;
}

/* Headline: 91.296px / 127.985px, line-height 117.5px, Heavy */
.headline {
  font-weight: 800;
}

.headline-lead,
.headline-main {
  display: block;
  white-space: nowrap;
}

.headline-lead {
  font-size: clamp(2.75rem, 4.755vw, 5.706rem);
  line-height: 1.287;
}

.headline-main {
  font-size: clamp(3.75rem, 6.666vw, 8rem);
  line-height: 0.918;
}

.accent {
  color: var(--clr-accent);
}

/* Intro: 36px bold + 18px body, 12px gap, 682px measure */
.intro {
  display: grid;
  gap: 0.75rem;
  max-width: 42.625rem;
  margin-top: clamp(1.25rem, 2.9vh, 1.9375rem); /* 31px */
}

.intro h2 {
  font-size: clamp(1.375rem, 1.875vw, 2.25rem);
  font-weight: 700;
}

.intro p {
  font-size: clamp(1rem, 0.9375vw, 1.125rem);
}

/* --- Features ------------------------------------------------------------- */

.features {
  display: flex;
  align-items: center;
  gap: 2.1875rem; /* 35px */
  margin-top: clamp(2rem, 5vh, 3.375rem); /* 54px */
  padding: 0;
  list-style: none;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9375rem; /* 15px */
  text-align: center;
  font-size: 1.125rem;
}

/* Divider: 1.5 × 44px vertical gradient line, 35px clear on each side */
.feature + .feature {
  position: relative;
  padding-left: calc(2.1875rem + 1.5px);
}

.feature + .feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5px;
  height: 2.75rem;
  translate: 0 -50%;
  background: linear-gradient(
    to bottom,
    var(--clr-bg),
    var(--clr-divider) 52%,
    var(--clr-bg)
  );
}

.feature-icon {
  display: grid;
  place-items: center;
}

/* Leaf is rotated in the design: 30px glyph in a 34.13px box */
.feature-icon--leaf {
  width: 34.13px;
  height: 34.13px;
}

.feature-icon--leaf img {
  transform: rotate(-98.55deg) scaleY(-1);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  flex: 0 1 50.52%;             /* 970px at 1920 */
  margin-top: clamp(1rem, 6.2vh, 4.1875rem); /* 67px */
  margin-right: 3.22%;          /* 62px at 1920 */
}

.hero-url {
  position: absolute;
  left: 49.2%;
  top: 88.6%;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem); /* 24px */
  font-weight: 500;
  color: var(--clr-muted);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 64em) {
  .page {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .content {
    padding: 2.5rem var(--space-page) 0;
  }

  .headline-lead,
  .headline-main {
    white-space: normal;
  }

  .hero {
    width: min(100%, 40rem);
    margin: 2.5rem auto 0;
  }
}

@media (max-width: 35em) {
  .content {
    text-align: center;
  }

  .logo {
    margin-inline: auto;
  }

  .intro {
    margin-inline: auto;
  }

  .features {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 1.75rem 2.5rem;
  }

  .feature + .feature {
    padding-left: 0;
  }

  .feature + .feature::before {
    content: none;
  }
}