/* ============================================================
   NW Agentic — Home page styles
   nwagentic.ai
   ============================================================
   Page-unique sections only. Shared primitives (button, card,
   tier-chip, eyebrow, etc.) live in base.css and partials.css.

   Depends on: tokens.css, base.css, partials.css.
   See DESIGN.md §5.1 for the page spec.
   ============================================================ */

@layer components {

  /* ─────────────────────────────────────────────────────────
     HERO
     ───────────────────────────────────────────────────────── */
  .home-hero {
    position: relative;
    min-height: 92svh;
    padding-block: 9rem 5rem;
    background:
      linear-gradient(180deg, rgba(10, 20, 36, 0.55), rgba(10, 20, 36, 0.85)),
      url('/images/hero-workflow-background.webp') center / cover no-repeat,
      var(--navy-deep);
    color: var(--text-on-dark);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  .home-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }
  .home-hero__inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 880px;
    margin-inline: auto;
  }
  .home-hero__eyebrow {
    display: inline-block;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--blue-bright);
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.32);
    padding: 0.4em 1em;
    border-radius: var(--radius-pill);
    margin-block-end: var(--space-6);
  }
  .home-hero__headline {
    font-size: var(--fs-display);
    font-weight: var(--fw-extrabold);
    line-height: var(--lh-display);
    letter-spacing: var(--tr-display);
    color: var(--text-on-dark);
    margin-block-end: var(--space-6);
    text-wrap: balance;
  }
  .home-hero__headline em,
  .home-hero__headline .accent {
    color: var(--blue-bright);
    font-style: normal;
  }
  .home-hero__sub {
    font-size: clamp(1rem, 2.2vw, 1.25rem);
    color: var(--text-on-dark-mute);
    line-height: var(--lh-body);
    max-width: 640px;
    margin: 0 auto var(--space-12);
  }
  .home-hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-end: var(--space-6);
  }
  .home-hero__tagline {
    font-size: var(--fs-body-sm);
    color: rgba(255, 255, 255, 0.5);
  }

  /* ─────────────────────────────────────────────────────────
     TIER TRIO — three deployment modes
     ───────────────────────────────────────────────────────── */
  .tier-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
  @media (max-width: 1023px) {
    .tier-trio { grid-template-columns: 1fr; }
  }
  .tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: box-shadow var(--t-slow), transform var(--t-slow), border-color var(--t);
    position: relative;
    overflow: hidden;
  }
  .tier-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-color: var(--border-strong);
  }
  /* Top stripe — uses the tier identity color */
  .tier-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tier-color, var(--blue));
  }
  .tier-card--core { --tier-color: var(--text-tertiary); }
  .tier-card--core::before { background: linear-gradient(90deg, #cbd5e1, #ffffff, #cbd5e1); }
  .tier-card--forge { --tier-color: var(--blue); }
  .tier-card--edge  { --tier-color: var(--amber-light); }

  .tier-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--text-tertiary);
  }
  .tier-card__chip-square {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .tier-card--core .tier-card__chip-square {
    background: #ffffff;
    border: 1px solid var(--border-strong);
  }
  .tier-card--forge .tier-card__chip-square { background: var(--tier-forge); }
  .tier-card--edge  .tier-card__chip-square { background: var(--tier-edge); }

  .tier-card__name {
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tr-tight);
    color: var(--text-primary);
  }
  .tier-card__lede {
    color: var(--text-secondary);
    font-size: var(--fs-body);
  }
  .tier-card__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-2);
  }
  .tier-card__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: var(--fs-body-sm);
    color: var(--text-secondary);
    line-height: 1.5;
  }
  .tier-card__list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tier-color);
    margin-top: 8px;
    flex-shrink: 0;
  }
  .tier-card__price {
    border-top: 1px solid var(--border);
    padding-top: var(--space-4);
    margin-top: auto;
  }
  .tier-card__price-amount {
    display: block;
    font-size: 1.5rem;
    font-weight: var(--fw-bold);
    color: var(--text-primary);
    line-height: 1.1;
  }
  .tier-card__price-note {
    display: block;
    font-size: var(--fs-body-sm);
    color: var(--text-tertiary);
    margin-top: 0.25rem;
  }
  .tier-card__cta {
    margin-top: var(--space-2);
  }

  /* Cloud → hybrid → edge schematic line under the trio */
  .deployment-spectrum {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-12);
    padding: var(--space-6) var(--space-8);
    background: var(--bg-subtle);
    border-radius: var(--radius);
    flex-wrap: wrap;
  }
  .deployment-spectrum__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--fs-body-sm);
    font-weight: var(--fw-medium);
    color: var(--text-secondary);
  }
  .deployment-spectrum__square {
    width: 14px;
    height: 14px;
    border-radius: 3px;
  }
  .deployment-spectrum__arrow {
    color: var(--text-tertiary);
  }

  /* ─────────────────────────────────────────────────────────
     WORKFLOW PREVIEW — left diagram, right config
     ───────────────────────────────────────────────────────── */
  .workflow-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: stretch;
  }
  @media (max-width: 1023px) {
    .workflow-preview { grid-template-columns: 1fr; }
  }
  .workflow-preview__diagram {
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    color: var(--text-on-dark);
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .workflow-preview__diagram svg {
    width: 100%;
    height: auto;
    max-height: 320px;
  }
  .workflow-preview__config {
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    overflow: hidden;
  }
  .workflow-preview__config-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .workflow-preview__config-header span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
  }
  .workflow-preview__config-header span:nth-child(1) { background: #ef4444; }
  .workflow-preview__config-header span:nth-child(2) { background: #f59e0b; }
  .workflow-preview__config-header span:nth-child(3) { background: #16a34a; }
  .workflow-preview__config-header strong {
    margin-left: var(--space-3);
    font-size: var(--fs-body-sm);
    font-family: var(--font-mono);
    color: var(--text-on-dark-soft);
    font-weight: var(--fw-medium);
  }
  .workflow-preview__config pre {
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    line-height: 1.65;
    color: var(--text-on-dark-soft);
    overflow-x: auto;
  }
  .workflow-preview__config .k { color: var(--blue-bright); }
  .workflow-preview__config .s { color: #86efac; }
  .workflow-preview__config .c { color: var(--text-tertiary); font-style: italic; }
  .workflow-preview__config .n { color: var(--amber-light); }

  /* ─────────────────────────────────────────────────────────
     SOLUTIONS STRIP
     ───────────────────────────────────────────────────────── */
  .solutions-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
  @media (max-width: 1023px) {
    .solutions-strip { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 539px) {
    .solutions-strip { grid-template-columns: 1fr; }
  }
  .solution-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: box-shadow var(--t-slow), transform var(--t-slow), border-color var(--t);
  }
  .solution-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: var(--blue);
  }
  .solution-card__title {
    font-size: 1.0625rem;
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .solution-card__title::after {
    content: '\2192';
    color: var(--blue);
    transition: transform var(--t);
  }
  .solution-card:hover .solution-card__title::after { transform: translateX(3px); }
  .solution-card__desc {
    font-size: var(--fs-body-sm);
    color: var(--text-tertiary);
  }

  /* ─────────────────────────────────────────────────────────
     WHY 3-COL
     ───────────────────────────────────────────────────────── */
  .why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-12);
  }
  @media (max-width: 1023px) {
    .why-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  }
  .why-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--brand-gradient-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color: var(--blue);
  }
  .why-item__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
  }
  .why-item__body {
    color: var(--text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  /* ─────────────────────────────────────────────────────────
     ARCHITECTURE TEASER
     ───────────────────────────────────────────────────────── */
  .arch-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    padding: var(--space-12);
    background: var(--navy-deep);
    border-radius: var(--radius-lg);
    color: var(--text-on-dark);
    position: relative;
    overflow: hidden;
  }
  @media (max-width: 1023px) {
    .arch-teaser { grid-template-columns: 1fr; padding: var(--space-8); }
  }
  .arch-teaser h2 { color: var(--text-on-dark); }
  .arch-teaser p { color: var(--text-on-dark-soft); }
  .arch-teaser__visual {
    background: var(--navy-mid);
    border-radius: var(--radius);
    padding: var(--space-6);
    border: 1px solid var(--border-on-dark);
  }
  .arch-teaser__visual svg { width: 100%; height: auto; display: block; }

  /* ─────────────────────────────────────────────────────────
     PROCESS — 4 steps
     ───────────────────────────────────────────────────────── */
  .process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    counter-reset: step;
  }
  @media (max-width: 1023px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 539px) {
    .process-grid { grid-template-columns: 1fr; }
  }
  .process-step {
    counter-increment: step;
    padding: var(--space-6);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: relative;
  }
  .process-step::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--text-tertiary);
    letter-spacing: 0.1em;
  }
  .process-step__title {
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
  }
  .process-step__body {
    font-size: var(--fs-body-sm);
    color: var(--text-tertiary);
    line-height: 1.6;
  }

  /* ─────────────────────────────────────────────────────────
     PRICING POINTER BAND
     ───────────────────────────────────────────────────────── */
  .pricing-pointer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-6);
    padding: var(--space-8) var(--space-12);
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
  }
  .pricing-pointer p {
    font-size: var(--fs-body-lg);
    color: var(--text-primary);
    margin: 0;
  }
  .pricing-pointer strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

  /* ─────────────────────────────────────────────────────────
     FINAL CTA BAND
     ───────────────────────────────────────────────────────── */
  .final-cta {
    text-align: center;
    padding-block: var(--space-24);
    background: var(--navy-deep);
    color: var(--text-on-dark);
    position: relative;
    overflow: hidden;
  }
  .final-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-gradient-soft);
    opacity: 0.4;
    pointer-events: none;
  }
  .final-cta__inner { position: relative; z-index: 1; }
  .final-cta h2 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: var(--fw-bold);
    color: var(--text-on-dark);
    line-height: 1.15;
    letter-spacing: var(--tr-heading);
    margin-bottom: var(--space-4);
    max-width: 720px;
    margin-inline: auto;
    text-wrap: balance;
  }
  .final-cta__sub {
    color: var(--text-on-dark-soft);
    font-size: var(--fs-body-lg);
    max-width: 560px;
    margin: 0 auto var(--space-8);
  }

  /* ─────────────────────────────────────────────────────────
     SECTION HEADER (centered)
     ───────────────────────────────────────────────────────── */
  .section-head {
    text-align: center;
    margin-bottom: var(--space-12);
    max-width: 720px;
    margin-inline: auto;
  }
  .section-head h2 {
    font-size: clamp(1.625rem, 3.5vw, 2.5rem);
    margin-bottom: var(--space-4);
    text-wrap: balance;
  }
  .section-head p {
    font-size: var(--fs-body-lg);
    color: var(--text-secondary);
    line-height: 1.65;
  }
  .section-head .eyebrow {
    margin-bottom: var(--space-4);
  }

}