/* Kasama Systems — coming soon
   Design tokens from Figma (node 8:818)
   bg #08486B · accent #F9A823 · text #FFFFFF · type Poppins */

:root {
  --bg: #08486B;
  --accent: #F9A823;
  --text: #FFFFFF;
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* fluid gutters that track the Figma ~91/1980 ratio */
  padding: clamp(2rem, 4.6vw, 3.5rem) clamp(1.5rem, 4.6vw, 4.5rem);
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end; /* "systems" right-aligns under "kasama" */
  width: fit-content;
  text-decoration: none;
  color: var(--accent);
  line-height: 1;
}

.logo-name {
  font-size: clamp(2.75rem, 6.5vw, 6.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.logo-sub {
  position: relative; /* anchor for the ™, which sits outside the measured box */
  font-size: clamp(1.6rem, 3.8vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  margin-top: -0.12em;
}

/* ™ is taken out of flow so only "systems" counts for the right-edge
   alignment — its last "s" lines up under the last "a" of "kasama",
   and the mark hangs past as a superscript (as in the Figma). */
.logo-tm {
  position: absolute;
  left: 100%;
  top: 0.18em;
  font-size: 0.28em;
  font-weight: 300;
  margin-left: 0.15em;
}

/* ---------- Headline ---------- */
.headline-wrap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertically centers the block between logo and status */
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
}

.headline {
  /* em-based so chars-per-line track the Figma block (~1560/72 ≈ 21.5em) */
  max-width: 21.5em;
  font-weight: 600;
  font-size: clamp(1.6rem, 3.3vw, 4rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.headline .brand {
  white-space: nowrap; /* keep "kasama systems," together — comma never orphans */
}

.headline .hl {
  color: var(--accent);
  font-size: 1.16em; /* matches the enlarged brand run in the design */
}

/* ---------- Status ---------- */
.status {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.6vw, 4rem);
  letter-spacing: -0.02em;
}

.status .nb {
  white-space: nowrap; /* "coming soon" and "summer 2026" stay intact when wrapping */
}

@media (prefers-reduced-motion: no-preference) {
  .logo,
  .headline,
  .status {
    animation: rise 0.7s ease both;
  }
  .headline { animation-delay: 0.08s; }
  .status { animation-delay: 0.16s; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}