/*
 * =========================================================
 * OLYTIC SOLUTIONS - Homepage Page-Specific Styles
 * home.css  /  Route: /
 *
 * Page-level component styles for index.html.
 * Covers components that don't live in the global design system:
 *   - Hero section (full-viewport, dark, nav-aware)
 *   - Problem section (narrow prose, ghost CTA)
 *   - Loop section (uses layout.css .loop-grid; this adds the container context)
 *   - ICP cards (Navy bg, self-selection mechanism)
 *   - Services grid (Blueprint + Evergreen cards)
 *   - Roadmap block (verdict-block variant for lead capture)
 *   - Proof grid (three differentiator cards)
 *   - Final CTA section (dark, dual-CTA layout)
 *
 * CSS load order (must follow):
 *   tokens.css → typography.css → buttons.css → nav.css → footer.css → layout.css → home.css
 *
 * Revision notes:
 *   Each component is clearly labelled with the section name.
 *   Reference the label when requesting revisions.
 * =========================================================
 */

/* ─────────────────────────────────────────────────────── */
/* SECTION 1: HERO                                         */
/* ─────────────────────────────────────────────────────── */

/*
 * Full-viewport hero: dark Obsidian bg, white text.
 * Nav is fixed over the top - extra padding-top compensates.
 * Min-height ensures it fills the screen above the fold.
 */

.hero {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Subtle grain texture on the hero bg (CSS-only, no image) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.45;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-16);
}

.hero__content {
  /* text + CTA column */
}

/* Large brand mark - right column of hero */
.hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__mark {
  width: 100%;
  max-width: 320px;
  height: auto;
  opacity: 0.92;
}

/* Gold decorative accent rule - replaces text eyebrow above H1 */
.hero__accent-rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-gold);
  margin-bottom: var(--space-8);
}

/* Hero H1 - brand-locked positioning statement */
.hero__headline {
  font-size: var(--text-5xl);    /* 60px desktop */
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
  max-width: 700px;
}

/* Sub-headline */
.hero__sub {
  font-size: var(--text-lg);     /* 20px */
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-body);
  max-width: 560px;
  margin-bottom: var(--space-10);
}

/* Dual CTA group */
.hero__cta {
  margin-top: 0;
}

/* Gold bottom rule - visual anchor between hero and first content section */
.hero__rule {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--color-gold) 20%,
    var(--color-gold) 80%,
    transparent 100%
  );
  opacity: 0.6;
}

/* ── Hero responsive ── */

@media (max-width: 900px) {
  .hero {
    padding-top: calc(var(--nav-height-mobile) + var(--space-16));
    padding-bottom: var(--space-16);
    min-height: auto;
  }

  /* Stack to single column on tablet/mobile - hide visual mark */
  .hero__inner {
    grid-template-columns: 1fr;
  }

  .hero__visual {
    display: none;
  }

  .hero__headline {
    font-size: var(--text-4xl);  /* 48px */
  }
}

@media (max-width: 640px) {
  .hero__headline {
    font-size: var(--text-3xl);  /* 36px */
  }

  .hero__sub {
    font-size: var(--text-base);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 2: PROBLEM / WHAT WE DO                         */
/* ─────────────────────────────────────────────────────── */

/*
 * Narrow prose block. 3 punchy paragraphs max.
 * Uses .container--narrow (768px) for comfortable reading.
 * White background.
 */

.problem .eyebrow {
  display: block;
  margin-bottom: var(--space-5);
}

.problem__body {
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}

.problem__body p {
  font-size: var(--text-md);     /* 18px */
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin-bottom: var(--space-5);
}

.problem__body p:last-child {
  margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 3: THE OLYTIC LOOP                              */
/* ─────────────────────────────────────────────────────── */

/*
 * The four-column grid is handled by layout.css (.loop-grid,
 * .loop-stage, etc.). This section adds the intro copy layout
 * and the trailing "See the full model" link.
 */

.loop-section__intro {
  max-width: 540px;
  color: var(--color-body-steel);
}

.loop-section .section-header {
  margin-bottom: var(--space-12);
}

.loop-section__link {
  margin-top: var(--space-10);
}

/* On Surface bg, stage hover gets a white card effect */
.section--surface .loop-stage:hover {
  background-color: #FFFFFF;
  box-shadow: var(--shadow-sm);
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 4: WHO WE WORK WITH (ICP)                       */
/* ─────────────────────────────────────────────────────── */

/*
 * Navy background, asymmetric two-column grid.
 * Left: heading block. Right: three ICP cards.
 * Below the grid: a disqualifier line in smaller muted text.
 */

.icp-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-12);
}

.icp-section__left {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
}

.icp-section__left .eyebrow {
  margin-bottom: var(--space-5);
}

.icp-section__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Individual ICP card */
.icp-card {
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast);
}

.icp-card:hover {
  background-color: rgba(255, 255, 255, 0.10);
  border-color: rgba(200, 169, 110, 0.40);  /* Gold ghost */
}

.icp-card .label {
  display: block;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.icp-card p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.78);
  line-height: var(--leading-body);
  margin-bottom: 0;
}

/* Qualifier disqualifier line at the bottom */
.icp-section__qualifier {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--space-6);
  max-width: 680px;
  margin-bottom: 0;
}

/* ── ICP responsive ── */

@media (max-width: 900px) {
  .icp-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .icp-section__left {
    position: static;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 5: SERVICES SIGNPOST                            */
/* ─────────────────────────────────────────────────────── */

/*
 * Side-by-side service cards: Blueprint (left), Evergreen (right).
 * White background. Not a full product page - orienting only.
 */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-bottom: var(--space-12);
}

/* Base service card */
.service-card {
  background-color: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.service-card:hover {
  box-shadow: var(--shadow-md);
}

/* Compass card: Obsidian top accent */
.service-card--compass {
  border-top: 3px solid var(--color-obsidian);
}

/* Blueprint card: Gold top accent */
.service-card--blueprint {
  border-top: 3px solid var(--color-gold);
}

/* Evergreen card: Teal top accent */
.service-card--evergreen {
  border-top: 3px solid var(--color-teal);
}

/* Card header row: label + service type */
.service-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.service-card__type {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Card name - H3 */
.service-card__name {
  font-size: var(--text-2xl);   /* 30px */
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

/* Card description */
.service-card__desc {
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin-bottom: var(--space-6);
  flex-grow: 1;
}

/* Feature list */
.service-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-card__features li {
  font-size: var(--text-sm);
  color: var(--color-body-steel);
  line-height: var(--leading-normal);
  padding-left: var(--space-5);
  position: relative;
}

/* Gold check-bullet */
.service-card__features li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--color-gold);
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  line-height: 1.2;
}

/* Card footer: price + CTA */
.service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: var(--border-default);
  margin-top: auto;
}

.service-card__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-navy);
  letter-spacing: 0.01em;
}

/* Bridge / closing note below cards */
.services-bridge {
  background-color: var(--color-surface);
  border-left: var(--border-gold-thick);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.services-bridge p {
  font-size: var(--text-md);
  color: var(--color-navy);
  font-weight: var(--weight-medium);
  line-height: var(--leading-body);
  margin-bottom: 0;
  max-width: 58ch;
}

/* ── Services responsive ── */

@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 640px) {
  .services-bridge {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 6: YOUR ROADMAP CTA                             */
/* ─────────────────────────────────────────────────────── */

/*
 * Primary lead-capture block. Visually distinct from all
 * other CTAs on the page via the verdict-block treatment
 * (layout.css). This section adds the two-column layout
 * inside the block and the trailing micro-copy note.
 */

.roadmap-section {
  /* Surface bg from .section--surface in layout.css */
}

.roadmap-block {
  /* Inherits .verdict-block styles from layout.css */
}

.roadmap-block__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
}

.roadmap-block__text .eyebrow {
  margin-bottom: var(--space-4);
}

.roadmap-block__text h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-6);
}

.roadmap-block__text p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--leading-body);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}

.roadmap-block__text p:last-child {
  font-style: italic;
  color: rgba(255, 255, 255, 0.50);
  font-size: var(--text-sm);
  margin-bottom: 0;
}

/* Right column: CTA button + micro-copy */
.roadmap-block__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 220px;
}

.roadmap-block__note {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.38);
  letter-spacing: 0.02em;
  line-height: var(--leading-normal);
  margin-bottom: 0;
}

/* ── Roadmap responsive ── */

@media (max-width: 900px) {
  .roadmap-block__inner {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .roadmap-block__action {
    min-width: auto;
  }

  .roadmap-block__action .btn {
    width: 100%;
    justify-content: center;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 7: PROOF / WHY OLYTIC                           */
/* ─────────────────────────────────────────────────────── */

/*
 * Three differentiator cards. White background.
 * Each card: icon + heading + body + contrast line (muted).
 */

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.proof-card {
  background-color: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: box-shadow var(--transition-fast),
              border-color var(--transition-fast);
}

.proof-card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 169, 110, 0.35);
}

/* Icon container - Teal color, small SVG */
.proof-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-teal);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
}

/* Heading */
.proof-card__heading {
  font-size: var(--text-xl);     /* 24px */
  font-weight: var(--weight-bold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-4);
}

/* Body copy */
.proof-card__body {
  font-size: var(--text-base);
  color: var(--color-body-steel);
  line-height: var(--leading-body);
  margin-bottom: var(--space-6);
}

/* Link below proof card body */
.proof-card__link {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-teal);
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
}

.proof-card__link:hover {
  text-decoration: underline;
}

/* Contrast line - smaller, muted, italic */
.proof-card__contrast {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: var(--leading-body);
  font-style: italic;
  border-top: var(--border-default);
  padding-top: var(--space-4);
  margin-bottom: 0;
}

/* ── Proof responsive ── */

@media (max-width: 900px) {
  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 580px) {
  .proof-grid {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────────────────── */
/* SECTION 8: FINAL CTA                                    */
/* ─────────────────────────────────────────────────────── */

/*
 * Dark Obsidian bg. Low-friction closing CTA.
 * "30 minutes. No pitch." - brand-spec phrasing.
 * Two-column layout: copy left, actions right.
 */

.final-cta-section {
  /* .section--dark from layout.css handles bg + text color */
}

.final-cta__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-16);
  align-items: center;
}

.final-cta__text .eyebrow {
  margin-bottom: var(--space-5);
}

.final-cta__text h2 {
  font-size: var(--text-4xl);    /* 48px */
  font-weight: var(--weight-bold);
  color: #FFFFFF;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.final-cta__text p {
  font-size: var(--text-md);
  color: rgba(255, 255, 255, 0.72);
  line-height: var(--leading-body);
  max-width: 52ch;
  margin-bottom: 0;
}

/* CTA action pair */
.final-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 240px;
}

/* ── Final CTA responsive ── */

@media (max-width: 900px) {
  .final-cta__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .final-cta__text h2 {
    font-size: var(--text-3xl);  /* 36px */
  }

  .final-cta__action {
    min-width: auto;
    width: 100%;
  }

  .final-cta__action .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .final-cta__text h2 {
    font-size: var(--text-2xl);  /* 30px */
  }
}