/* ═══════════════════════════════════════════════════════════════════
   5Solution Design System — Solution Landing (scoped tokens)
   Loaded via <link rel="stylesheet" href="/solution/solution.css" />
   from the Solution page only — does NOT touch the app's global CSS.
   ═══════════════════════════════════════════════════════════════════ */

/* NOTE on fonts:
   The host app already loads "Be Vietnam Pro", "Plus Jakarta Sans",
   "JetBrains Mono" via next/font in frontend/app/layout.tsx. This file
   therefore does NOT redeclare @font-face rules — instead it references
   the CSS variables the host exposes (--font-be-vietnam-pro, etc.)
   If those are not available, we fall back to system equivalents. */

:root {
  /* ───── Brand primaries ───── */
  --5s-blue:            #3D5AF1;
  --5s-blue-600:        #3249D4;
  --5s-blue-700:        #2640B8;
  --5s-blue-400:        #5C78F5;
  --5s-blue-300:        #8DA3F8;
  --5s-blue-100:        #D8DFFE;
  --5s-blue-50:         #EEF0FF;

  --5s-magenta:         #F0356E;
  --5s-magenta-600:     #D42E63;
  --5s-magenta-400:     #F5557E;
  --5s-magenta-100:     #FFD5E5;

  --5s-lime:            #BEE14A;

  /* ───── Neutrals ───── */
  --5s-bg:              #FAF8F5;
  --5s-surface:         #F3F0EB;
  --5s-surface-2:       #E8E4DD;
  --5s-border:          #D6D3D1;
  --5s-border-strong:   #A8A29E;
  --5s-text:            #1C1917;
  --5s-text-muted:      #57534E;
  --5s-text-subtle:     #78716C;
  --5s-white:           #FFFFFF;
  --5s-black:           #0A0A0A;

  --5s-slate:           #1E293B;
  --5s-slate-500:       #64748B;
  --5s-slate-200:       #E2E8F0;
  --5s-slate-100:       #F1F5F9;
  --5s-slate-50:        #F8FAFC;

  /* ───── Semantic ───── */
  --5s-success:         #166534;
  --5s-success-bg:      #DCFCE7;
  --5s-warning:         #D97706;
  --5s-warning-bg:      #FEF3C7;
  --5s-danger:          #DC2626;
  --5s-live:            #DC2626;
  --5s-info:            var(--5s-blue);

  --5s-gold:            #D97706;
  --5s-silver:          #78716C;
  --5s-bronze:          #92400E;
  --5s-energy:          #EA580C;
  --5s-trail:           #166534;

  /* ───── Font var aliases (host exposes --font-heading / --font-sans / --font-jetbrains-mono) ───── */
  --font-be-vietnam-pro:    var(--font-heading);
  --font-plus-jakarta-sans: var(--font-sans);

  /* ───── Typography (bridge to host next/font vars) ───── */
  --font-display: var(--font-be-vietnam-pro), "Be Vietnam Pro", "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-plus-jakarta-sans), "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, -apple-system, sans-serif;
  --font-mono:    var(--font-jetbrains-mono), "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-6xl:  64px;
  --text-7xl:  80px;
  --text-hero: 96px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.02em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.18em;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  --shadow-xs:  0 1px 2px rgba(28,25,23,0.04);
  --shadow-sm:  0 1px 3px rgba(28,25,23,0.06), 0 1px 2px rgba(28,25,23,0.04);
  --shadow-md:  0 4px 6px -1px rgba(28,25,23,0.07), 0 2px 4px -2px rgba(28,25,23,0.05);
  --shadow-lg:  0 10px 15px -3px rgba(28,25,23,0.08), 0 4px 6px -4px rgba(28,25,23,0.04);
  --shadow-xl:  0 20px 25px -5px rgba(28,25,23,0.08), 0 8px 10px -6px rgba(28,25,23,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(28,25,23,0.18);
  --shadow-glow-blue:    0 0 0 1px rgba(61,90,241,0.08), 0 8px 32px rgba(61,90,241,0.22);
  --shadow-glow-magenta: 0 0 0 1px rgba(240,53,110,0.12), 0 10px 30px rgba(240,53,110,0.25);
}

/* ═══════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES (scoped under .solution-root so they don't
   leak into the rest of the app's pages).
   ═══════════════════════════════════════════════════════════════════ */

.solution-root {
  background: var(--5s-bg);
  color: var(--5s-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.solution-root * { box-sizing: border-box; }
.solution-root img { max-width: 100%; display: block; }
.solution-root button { font: inherit; }
.solution-root a { color: inherit; }

.solution-root .type-hero {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--text-5xl), 7vw, var(--text-hero));
  line-height: 1.02;
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
}

.solution-root .type-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  line-height: 1.08;
  letter-spacing: var(--tracking-tighter);
  text-transform: uppercase;
}

.solution-root .type-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-4xl);
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
}

.solution-root .type-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.solution-root .type-h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
}

.solution-root .type-eyebrow {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--5s-text-muted);
}

.solution-root .type-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: var(--5s-text-muted);
}

.solution-root .type-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--5s-text);
}

.solution-root .type-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--5s-text-muted);
}

.solution-root .type-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.solution-root .type-data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}

.solution-root .type-campaign {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: lowercase;
}

.solution-root h1,
.solution-root h2,
.solution-root h3,
.solution-root h4,
.solution-root h5,
.solution-root h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.solution-root ::selection {
  background: rgba(32,64,200,0.15);
  color: var(--5s-text);
}

/* ═══════════════════════════════════════════════════════════════════
   Animations & Motion
   ═══════════════════════════════════════════════════════════════════ */

/* Hero marquee scroll */
@keyframes solution-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Section scroll-reveal */
@keyframes s-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

.solution-root .s-up {
  opacity: 0;
  transform: translateY(36px);
}

.solution-root .s-in {
  animation: s-fade-up 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger grid children when section enters */
.solution-root .s-in .solution-step-card:nth-child(1)             { animation-delay: 0.05s; }
.solution-root .s-in .solution-step-card:nth-child(2)             { animation-delay: 0.14s; }
.solution-root .s-in .solution-step-card:nth-child(3)             { animation-delay: 0.23s; }

.solution-root .s-in .solution-pain-grid > div:nth-child(1)       { animation-delay: 0.05s; }
.solution-root .s-in .solution-pain-grid > div:nth-child(2)       { animation-delay: 0.14s; }
.solution-root .s-in .solution-pain-grid > div:nth-child(3)       { animation-delay: 0.23s; }

.solution-root .s-in .solution-testimonials-grid > div:nth-child(1) { animation-delay: 0.05s; }
.solution-root .s-in .solution-testimonials-grid > div:nth-child(2) { animation-delay: 0.14s; }
.solution-root .s-in .solution-testimonials-grid > div:nth-child(3) { animation-delay: 0.23s; }

.solution-root .s-in .solution-timeline-grid > div:nth-child(1)   { animation-delay: 0.04s; }
.solution-root .s-in .solution-timeline-grid > div:nth-child(2)   { animation-delay: 0.10s; }
.solution-root .s-in .solution-timeline-grid > div:nth-child(3)   { animation-delay: 0.16s; }
.solution-root .s-in .solution-timeline-grid > div:nth-child(4)   { animation-delay: 0.22s; }
.solution-root .s-in .solution-timeline-grid > div:nth-child(5)   { animation-delay: 0.28s; }

/* Card hover lift — applied globally to solution cards */
.solution-root .solution-step-card {
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1), box-shadow 260ms ease;
}
.solution-root .solution-step-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ── Hero stat cards hover ── */
.solution-root .solution-stat-card {
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 280ms ease,
              border-color 280ms ease,
              background 280ms ease;
  cursor: default;
}

.solution-root .solution-stat-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0,0,0,0.28);
  border-color: rgba(255,255,255,0.42) !important;
  background: rgba(255,255,255,0.13) !important;
}

.solution-root .solution-stat-card--accent:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 18px 48px rgba(212,20,90,0.45);
  background: unset !important; /* keep inline accent color */
  filter: brightness(1.08);
}

/* Live chip hover */
.solution-root .solution-live-card {
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1), box-shadow 280ms ease;
  cursor: default;
}

.solution-root .solution-live-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 72px rgba(0,0,0,0.36);
}

/* ── Feature tab auto-play progress bar ── */
@keyframes tab-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

.solution-root .solution-tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.55);
  animation: tab-progress 4800ms linear forwards;
}

/* Inactive tab hover effect */
.solution-root .solution-tab-btn:not([data-active="true"]):hover {
  background: var(--5s-blue-50) !important;
  color: var(--5s-blue) !important;
  transform: translateY(-1px);
}

/* Active tab — subtle inner glow */
.solution-root .solution-tab-btn[data-active="true"] {
  box-shadow: 0 4px 14px rgba(32,64,200,0.35);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive breakdowns — collapse inline grid layouts on small screens
   (inline styles can't do media queries, so we drop helper classes on
   the relevant grids inside each component.)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1024px: Narrow desktop / tablet landscape ── */
@media (max-width: 1024px) {
  .solution-root .solution-comparison-wrap {
    overflow-x: auto;
  }
}

/* ── 900px: Tablet portrait ── */
@media (max-width: 900px) {
  /* Hero: stack text above stats board */
  .solution-root .solution-hero-inner-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Section heading 2-col grids → single column */
  .solution-root .solution-cta-grid,
  .solution-root .solution-case-grid,
  .solution-root .solution-footer-grid {
    grid-template-columns: 1fr !important;
  }
  /* Feature tab shell → stack left panel above mock */
  .solution-root .solution-tab-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .solution-root .solution-tab-right {
    border-left: none !important;
    border-top: 1px solid var(--5s-border) !important;
    min-height: 280px !important;
  }
  /* Timeline: hide connector line, wrap to 2 cols */
  .solution-root .solution-timeline > div:first-child {
    display: none !important;
  }
  .solution-root .solution-timeline-grid {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 28px !important;
  }
  /* Reduce section side padding */
  .solution-root section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .solution-root footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Footer grid: 2-col instead of 5 */
  .solution-root .solution-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ── 768px: Large phone / small tablet ── */
@media (max-width: 768px) {
  /* Hero h1 override (inline clamp min is 52px — too big) */
  .solution-root .solution-hero-h1 {
    font-size: clamp(34px, 8vw, 48px) !important;
    line-height: 1.0 !important;
  }
  /* Feature tab content title */
  .solution-root .solution-tab-title {
    font-size: 30px !important;
  }
  /* Section headings (type-campaign with large clamp min values) */
  .solution-root .type-campaign {
    font-size: clamp(28px, 7vw, 44px) !important;
  }
  /* Body lead text */
  .solution-root .type-lead {
    font-size: 16px !important;
  }
  /* Section vertical padding reduction */
  .solution-root section {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
  }
  /* Clients grid: 3 per row max (auto-fit handles it but cap overflow) */
  .solution-root .solution-clients-grid > div:last-child {
    border-right: none !important;
  }
}

/* ── 640px: Phone landscape / small phone ── */
@media (max-width: 640px) {
  /* Header nav hidden */
  .solution-root .solution-header-nav { display: none !important; }

  /* Hero: single-column, compact */
  .solution-root .solution-hero-grid {
    padding: 28px 16px 0 !important;
  }
  .solution-root .solution-hero-h1 {
    font-size: clamp(30px, 9vw, 40px) !important;
  }
  .solution-root .solution-hero-desc {
    font-size: 15.5px !important;
    margin: 20px 0 28px !important;
  }
  /* Hero CTA: stack buttons to full width */
  .solution-root .solution-hero-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .solution-root .solution-hero-cta-row > button {
    width: 100% !important;
    justify-content: center !important;
  }
  /* Hide stats board — too much info below fold on phone */
  .solution-root .solution-hero-right {
    display: none !important;
  }
  /* Tighten marquee margin */
  .solution-root .solution-hero-marquee-wrap {
    margin-top: 36px !important;
  }

  /* Compact section padding */
  .solution-root section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 32px !important;
  }
  .solution-root footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* All section headings: much smaller on phone */
  .solution-root .type-campaign {
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1.0 !important;
  }

  /* Pain cards: force 1-col (auto-fit min 300px wraps OK but let's be explicit) */
  .solution-root .solution-pain-grid {
    grid-template-columns: 1fr !important;
  }
  /* Clients logo grid: 2-col */
  .solution-root .solution-clients-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .solution-root .solution-clients-grid > div {
    border-right: none !important;
    border-bottom: 1px solid var(--5s-border) !important;
  }

  /* Steps: 1-col */
  .solution-root .solution-steps-grid {
    grid-template-columns: 1fr !important;
  }

  /* Timeline: horizontal scroll at 2-col */
  .solution-root .solution-timeline-grid {
    grid-template-columns: repeat(5, minmax(140px, 1fr)) !important;
  }
  .solution-root .solution-timeline {
    overflow-x: auto !important;
    padding-bottom: 8px !important;
  }

  /* Feature tab bar: scrollable row instead of wrapping */
  .solution-root .solution-tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .solution-root .solution-tab-btn {
    flex: 0 0 auto !important;
    min-width: 80px !important;
    padding: 10px 12px !important;
    font-size: 11px !important;
  }
  /* Feature tab left: compact padding */
  .solution-root .solution-tab-left {
    padding: 24px 20px !important;
  }
  .solution-root .solution-tab-sub {
    font-size: 15px !important;
    margin: 12px 0 18px !important;
  }
  /* Hide right mock panel on phones — not legible at small sizes */
  .solution-root .solution-tab-right {
    display: none !important;
  }

  /* Testimonials: 1-col */
  .solution-root .solution-testimonials-grid {
    grid-template-columns: 1fr !important;
  }

  /* FAQ button: tighter padding */
  .solution-root .solution-faq-btn {
    padding: 16px 16px !important;
  }

  /* Final CTA: hide slot chart panel on phone */
  .solution-root .solution-cta-grid > div:last-child {
    display: none !important;
  }
  /* CTA buttons: full width column */
  .solution-root .solution-cta-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .solution-root .solution-cta-btns > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer: 2-col for link columns */
  .solution-root .solution-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }
  /* Footer logo row spans full width */
  .solution-root .solution-footer-grid > div:first-child {
    grid-column: 1 / -1 !important;
  }
  /* Footer bottom: stack on top of each other */
  .solution-root .solution-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ── Bar chart grow animation (BTC dashboard) ── */
@keyframes solution-bar-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.solution-bar-grow {
  transform-origin: bottom;
  animation: solution-bar-grow 0.55s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

/* ── 480px: Small phone ── */
@media (max-width: 480px) {
  .solution-root .type-campaign {
    font-size: clamp(23px, 8vw, 30px) !important;
  }
  .solution-root .solution-hero-h1 {
    font-size: clamp(27px, 9vw, 34px) !important;
  }
  /* Footer links: single column */
  .solution-root .solution-footer-grid {
    grid-template-columns: 1fr !important;
  }
}