/* ============================================================================
   homepage.css — tuppu.net marketing homepage
   Depends on: tokens.css, reset.css, primitives.css, components.css

   Layout is handled by primitives. This file owns:
   · Page-specific chrome (nav sticky, section borders, hero sizing)
   · Typography and colour for homepage elements
   · Entrance animations
   · Genuinely specific layouts that primitives can't express
   ============================================================================ */


/* ----------------------------------------------------------------------------
   Sections
   ---------------------------------------------------------------------------- */

.hp-section {
  padding-block: var(--space-xl-2xl);
  border-bottom: 0.5px solid var(--border);
}

.hp-section--no-border { border-bottom: none; }
.hp-section--center    { text-align: center; }

.section-label {
  font-size: var(--step--2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-t);
  margin-block-end: var(--space-l);
}

/* ----------------------------------------------------------------------------
   Hero
   HTML uses: <section class="hero"> / <div class="center stack stack--loose hero__inner">
              <div class="cluster cluster--xs hero__eyebrow">
              <div class="cluster cluster--xs hero__cta-row">
              <div class="cluster cluster--m hero__ticker">
   ---------------------------------------------------------------------------- */

.hero {
  padding-block-start: var(--space-xl-2xl);
  padding-block-end: var(--space-l-xl);
  border-bottom: 0.5px solid var(--border);
}

.hero__eyebrow {
  font-size: var(--step--2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-t);
}

.hero__headline {
  font-size: var(--step-7);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
}

.hero__headline em {
  font-style: normal;
  color: var(--blue);
}

.hero__sub {
  font-size: var(--step-1);
  font-weight: 300;
  color: var(--text-s);
  line-height: 1.6;
  max-inline-size: 42ch;
}

.hero__ticker {
  padding-block: var(--space-s);
  border-top: 0.5px solid var(--border);
  font-size: var(--step--2);
  color: var(--text-t);
  letter-spacing: 0.06em;
}

.ticker-stat strong {
  font-weight: 400;
  color: var(--text-s);
}

/* ----------------------------------------------------------------------------
   Concept grid — "how it works"
   HTML uses: <div class="grid concept-grid"> (--grid-min-size: 18rem)
              <div class="stack stack--xs concept-step">
   ---------------------------------------------------------------------------- */

.concept-grid {
  --grid-min-size: 18rem;
}

/* Decoration only — layout is .stack.stack--xs in HTML */
.concept-step {
  padding: var(--space-s);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg1);
}

.concept-step__num   { font-size: var(--step--2); color: var(--blue); letter-spacing: 0.1em; }
.concept-step__title { font-size: var(--step-2); font-weight: 300; letter-spacing: -0.01em; }
.concept-step__body  { font-size: var(--step--1); color: var(--text-t); line-height: 1.6; }

.concept-step__example {
  margin-block-start: auto; /* pushes to bottom within the stack — intentional */
  padding-block-start: var(--space-xs);
  border-top: 0.5px solid var(--border);
  font-size: var(--step--2);
  color: var(--text-t);
}

.concept-step__example code {
  color: var(--blue);
  font-family: var(--mono);
}

/* ----------------------------------------------------------------------------
   Dashboard preview
   HTML uses: <div class="spread preview-header">
              <div class="cluster cluster--xs preview-chrome">
              <div class="stack stack--m preview-body">
   ---------------------------------------------------------------------------- */

/* .preview-header is a .spread with flex-end alignment — one-off override */
.preview-header {
  align-items: flex-end;
  margin-block-end: var(--space-m);
}

.preview-frame {
  background: var(--bg1);
  border: 0.5px solid var(--border-s);
  border-radius: calc(var(--radius) * 1.5);
  overflow: hidden;
}

/* Decoration only — layout is .cluster.cluster--xs in HTML */
.preview-chrome {
  background: var(--bg2);
  padding: var(--space-xs) var(--space-s);
  border-bottom: 0.5px solid var(--border);
}

/* Fixed pixel gap — not a token, belongs here not in primitives */
.chrome-dots { display: flex; gap: 5px; }

.chrome-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border-s);
}

.chrome-url {
  font-size: var(--step--2);
  color: var(--text-t);
  letter-spacing: 0.03em;
  margin-inline-start: var(--space-2xs);
}

/* Decoration only — layout is .stack.stack--m in HTML */
.preview-body {
  padding: var(--space-m);
}

/* ----------------------------------------------------------------------------
   Mini dashboard stats — inside preview
   HTML uses: <div class="spread dash-title-row"> (align baseline: override below)
              <div class="cluster cluster--tight dash-live">
              <div class="cluster cluster--s dash-stats">
              <div class="stack stack--tight dash-stat">
   ---------------------------------------------------------------------------- */

/* align-items: baseline is semantically distinct from the spread default (center)
   and carries meaning — it aligns the large number to the "live" label baseline */
.dash-title-row {
  align-items: baseline;
}

.dash-total {
  font-size: var(--step-5);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.dash-label {
  font-size: var(--step--2);
  color: var(--text-t);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dash-live {
  font-size: var(--step--2);
  color: var(--text-t);
  letter-spacing: 0.08em;
}

.dash-stat__val { font-size: var(--step-2); font-weight: 300; letter-spacing: -0.01em; }
.dash-stat__lbl { font-size: var(--step--2); color: var(--text-t); letter-spacing: 0.08em; text-transform: uppercase; }

.platform-section-title {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-t);
  margin-block-end: var(--space-xs);
}

/* Three-column grid: fixed label | fluid bar | fixed count — not a primitive */
.platform-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  gap: var(--space-xs);
  align-items: center;
  padding-block: var(--space-3xs);
  border-bottom: 0.5px solid var(--border);
  font-size: var(--step--2);
}

/* ----------------------------------------------------------------------------
   Features grid
   HTML uses: <div class="grid features-grid"> (--grid-min-size: 16rem)
              <div class="stack stack--2xs feature-item">
   ---------------------------------------------------------------------------- */

.features-grid {
  --grid-min-size: 16rem;
}

/* Decoration only — layout is .stack.stack--2xs in HTML */
.feature-item {
  padding: var(--space-s);
  border-top: 0.5px solid var(--border-s);
}

.feature-item__title { font-size: var(--step-0); font-weight: 400; letter-spacing: 0.02em; }
.feature-item__body  { font-size: var(--step--1); color: var(--text-t); line-height: 1.6; }

/* ----------------------------------------------------------------------------
   CTA
   .cta-stack is a centred stack — .stack doesn't centre children by design,
   so this is genuinely specific and stays here.
   ---------------------------------------------------------------------------- */

.cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
}

.cta-headline {
  font-size: var(--step-4);
  font-weight: 300;
  letter-spacing: -0.02em;
  max-inline-size: 22ch;
  line-height: 1.15;
}

/* ----------------------------------------------------------------------------
   Footer
   HTML uses: <div class="center spread hp-footer__inner">
              <ul class="cluster cluster--m hp-footer__links">
   ---------------------------------------------------------------------------- */

.hp-footer {
  padding-block: var(--space-l);
  border-top: 0.5px solid var(--border);
}

/* Typography only — layout is .spread in HTML */
.hp-footer__inner {
  font-size: var(--step--2);
  color: var(--text-t);
  letter-spacing: 0.04em;
}

.hp-footer__links a:hover { color: var(--text-s); }

/* ----------------------------------------------------------------------------
   Entrance animations
   ---------------------------------------------------------------------------- */

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

.hero__headline { animation: fadeUp 0.6s       ease both; }
.hero__sub      { animation: fadeUp 0.6s 0.10s ease both; }
.hero__cta-row  { animation: fadeUp 0.6s 0.20s ease both; }
.hero__ticker   { animation: fadeUp 0.6s 0.30s ease both; }