/* =========================================================================
   Stillwater Platform Co. — marketing site
   Design tokens, base styles, and components.
   Accent is themeable via the --accent custom property on #top.
   ========================================================================= */

:root {
  --accent: #2f6bf0;               /* options: #2f6bf0 · #1f7a6b · #4338ca · #0ea5b7 */
  --play: running;                 /* toggled to 'paused' for reduce-motion */

  --page-bg: #f5f7fa;
  --ink: #16202e;
  --ink-strong: #0b1a2e;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*{ box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: #cfe0fb; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* ---- Layout helpers ---------------------------------------------------- */
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.py-lg { padding-top: clamp(64px, 8vw, 108px); padding-bottom: clamp(64px, 8vw, 108px); }
.py-md { padding-top: clamp(60px, 7vw, 104px); padding-bottom: clamp(60px, 7vw, 104px); }

/* anchor targets clear the sticky 66px header */
section[id], [data-anchor] { scroll-margin-top: 82px; }

/* ---- Keyframes --------------------------------------------------------- */
@keyframes swRev   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes swBlink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes swDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes swFill  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes swDotFail  { 0%,52% { background: #4f8bff; } 60%,90% { background: #d65a43; } 98%,100% { background: #4f8bff; } }
@keyframes swNodeFail { 0%,52% { background: rgba(255,255,255,.04); border-color: rgba(120,160,230,.16); } 60%,92% { background: rgba(214,90,67,.10); border-color: rgba(214,90,67,.4); } 98%,100% { background: rgba(255,255,255,.04); border-color: rgba(120,160,230,.16); } }
@keyframes swRunOut { 0%,48% { opacity: 1; } 56%,100% { opacity: 0; } }
@keyframes swFailIn { 0%,52% { opacity: 0; } 60%,92% { opacity: 1; } 99%,100% { opacity: 0; } }
@keyframes swToast  { 0%,53% { opacity: 0; transform: translateY(10px); } 63%,87% { opacity: 1; transform: none; } 96%,100% { opacity: 0; transform: translateY(10px); } }
@keyframes swRipple { 0%,53% { opacity: 0; transform: scale(.4); } 61% { opacity: .55; transform: scale(.7); } 84% { opacity: 0; transform: scale(1.7); } 100% { opacity: 0; } }

/* Scroll-reveal only where the view() timeline is supported, so unsupported
   browsers show the content instead of leaving it stuck at opacity 0. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: swRev linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* =========================================================================
   NAV
   ========================================================================= */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(245, 247, 250, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #e4e8ee;
}
.header__inner {
  max-width: 1140px; margin: 0 auto; padding: 0 24px; height: 66px;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink-strong); }
.brand__name { font: 700 16.5px 'Public Sans', system-ui, sans-serif; letter-spacing: -.01em; }
.brand__name span { color: #67717f; font-weight: 600; }

.nav { display: flex; align-items: center; gap: 26px; }

.sw-nav-link { position: relative; text-decoration: none; padding-bottom: 3px; font: 600 14px 'Public Sans', system-ui, sans-serif; color: #48535f; }
.sw-nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.sw-nav-link:hover::after { transform: scaleX(1); }
.sw-nav-link:hover { color: var(--ink-strong); }

.sw-nav-link-dark { position: relative; text-decoration: none; padding-bottom: 3px; }
.sw-nav-link-dark::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); }
.sw-nav-link-dark:hover::after { transform: scaleX(1); }
.sw-nav-link-dark:hover { color: #eaf1fb; }

.nav-cta {
  display: inline-flex; align-items: center; padding: 9px 17px; border-radius: 9px;
  background: var(--accent); color: #fff; text-decoration: none;
  font: 600 14px 'Public Sans', system-ui, sans-serif;
  box-shadow: 0 6px 16px -6px rgba(47,107,240,.6);
  transition: transform .22s var(--ease), box-shadow .22s ease;
}
.nav-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 22px -6px rgba(47,107,240,.65); }
.nav-cta:active { transform: translateY(0) scale(.97); }

.hamburger {
  display: none; flex-direction: column; gap: 4px; padding: 10px;
  background: none; border: 1px solid #d8dde4; border-radius: 9px; cursor: pointer;
}
.hamburger span { width: 18px; height: 2px; background: var(--ink); }

.mobile-menu {
  border-top: 1px solid #e4e8ee; padding: 10px 24px 18px;
  display: none; flex-direction: column; gap: 4px; background: #f5f7fa;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  padding: 11px 4px; font: 600 15px 'Public Sans', system-ui, sans-serif;
  color: #2a3542; text-decoration: none; border-bottom: 1px solid #ebeef2;
}
.mobile-menu a.back { display: flex; align-items: center; gap: 7px; }
.mobile-menu .menu-cta {
  margin-top: 8px; display: inline-flex; justify-content: center; padding: 13px;
  border-radius: 10px; background: var(--accent); color: #fff; border-bottom: none;
}

/* desktop / mobile nav switching (breakpoint 820px) */
@media (max-width: 820px) {
  .nav { display: none; }
  .hamburger { display: flex; }
}

/* =========================================================================
   HERO (shared shell)
   ========================================================================= */
.hero {
  position: relative; color: #eaf1fb; overflow: hidden;
  background: radial-gradient(120% 120% at 80% 0%, #13294a 0%, #0b1a2e 55%);
}
.hero__glow {
  position: absolute; top: -120px; right: -80px; width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,139,255,.16), transparent 62%);
}
.hero__grid {
  position: relative; max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #8a93a0; margin-bottom: 16px;
}
.eyebrow--dark { color: #8fa6c8; }
.eyebrow--proof { color: #7f97b8; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero h1 {
  font: 500 clamp(38px, 5.4vw, 62px)/1.04 'Newsreader', Georgia, serif;
  letter-spacing: -.018em; margin: 0; color: #fbfdff;
}
.hero p {
  font: 400 clamp(16px, 1.5vw, 19px)/1.6 'Public Sans', system-ui, sans-serif;
  color: #b7c6dd; max-width: 520px; margin: 22px 0 0;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

.btn-solid {
  display: inline-flex; align-items: center; padding: 15px 26px; border-radius: 11px;
  background: var(--accent); color: #fff; text-decoration: none; border: none; cursor: pointer;
  font: 600 15.5px 'Public Sans', system-ui, sans-serif;
  box-shadow: 0 6px 14px -8px rgba(47,107,240,.45);
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.btn-solid:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 12px 20px -10px rgba(47,107,240,.4); }
.btn-solid:active { transform: translateY(-1px) scale(.98); }

.btn-ghost {
  display: inline-flex; align-items: center; padding: 15px 24px; border-radius: 11px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(143,166,200,.32);
  color: #eaf1fb; text-decoration: none;
  font: 600 15.5px 'Public Sans', system-ui, sans-serif;
  transition: transform .25s var(--ease), background .2s ease, border-color .2s ease;
}
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: rgba(143,166,200,.5); transform: translateY(-3px); }
.btn-ghost:active { transform: translateY(-1px); }

/* ---- Hero widget (main page flow) ------------------------------------- */
.widget-col { position: relative; display: flex; justify-content: center; }
.widget-rings {
  position: absolute; inset: -40px; display: flex; align-items: center; justify-content: center;
  pointer-events: none; animation: swDrift 10s ease-in-out infinite; animation-play-state: var(--play);
}
.widget-rings span { position: absolute; border-radius: 50%; }
.ring-380 { width: 380px; height: 380px; border: 1px solid rgba(120,160,230,.14); }
.ring-270 { width: 270px; height: 270px; border: 1px solid rgba(120,160,230,.2); }
.ring-170 { width: 170px; height: 170px; border: 1px solid rgba(120,160,230,.26); }
.ring-360 { width: 360px; height: 360px; border: 1px solid rgba(120,160,230,.14); }
.ring-250 { width: 250px; height: 250px; border: 1px solid rgba(120,160,230,.2); }

.widget {
  position: relative; width: 100%; max-width: 430px;
  background: linear-gradient(180deg, #11294a, #0a1729);
  border: 1px solid rgba(120,160,230,.22); border-radius: 20px; padding: 22px;
  box-shadow: 0 40px 70px -28px rgba(5,12,24,.85);
}
.widget--flow { margin-bottom: 18px; }
.widget__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.widget__label { font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: #7f97b8; }
.widget__live { display: flex; align-items: center; gap: 6px; font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #9fb2cb; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4f8bff; animation: swBlink 2s ease-in-out infinite; animation-play-state: var(--play); }

.flow-rows { display: flex; flex-direction: column; gap: 9px; }
.flow-row {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(120,160,230,.16);
}
.flow-row .dot { width: 9px; height: 9px; border-radius: 50%; background: #4f8bff; flex: none; }
.flow-row .name { flex: 1; font: 600 13.5px 'Public Sans', system-ui, sans-serif; color: #eaf1fb; }
.flow-row .status { font: 600 10px 'IBM Plex Mono', monospace; color: #6f8aa8; }
.flow-row .status--trigger { color: #7f97b8; }

.flow-row--fail { position: relative; animation: swNodeFail 6s ease-in-out infinite; animation-play-state: var(--play); }
.flow-row--fail .dot { animation: swDotFail 6s ease-in-out infinite; animation-play-state: var(--play); }
.fail-status { position: relative; min-width: 78px; height: 14px; text-align: right; }
.fail-status .running { position: absolute; right: 0; top: 0; font: 600 10px 'IBM Plex Mono', monospace; color: #6f8aa8; animation: swRunOut 6s ease-in-out infinite; animation-play-state: var(--play); }
.fail-status .failed  { position: absolute; right: 0; top: 0; font: 600 10px 'IBM Plex Mono', monospace; color: #f0a18d; opacity: 0; animation: swFailIn 6s ease-in-out infinite; animation-play-state: var(--play); }
.fail-ripple { position: absolute; left: 14px; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -16px; border-radius: 50%; border: 1px solid #d65a43; opacity: 0; animation: swRipple 6s ease-in-out infinite; animation-play-state: var(--play); }

.flow-toast {
  position: absolute; left: 18px; right: 18px; bottom: -17px;
  display: flex; align-items: center; gap: 10px; padding: 12px 15px;
  background: #16263d; border: 1px solid rgba(214,90,67,.42); border-radius: 13px;
  box-shadow: 0 20px 36px -14px rgba(5,12,24,.8);
  opacity: 0; animation: swToast 6s ease-in-out infinite; animation-play-state: var(--play);
}
.flow-toast .dot { width: 8px; height: 8px; border-radius: 50%; background: #d65a43; flex: none; }
.flow-toast .msg { font: 600 12px 'Public Sans', system-ui, sans-serif; color: #f3d9d1; }

/* ---- Hero widget (partners capacity) ---------------------------------- */
.cap-rows { display: flex; flex-direction: column; gap: 16px; }
.cap-row__top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cap-row__name { font: 600 13.5px 'Public Sans', system-ui, sans-serif; color: #eaf1fb; }
.cap-row__meta { font: 600 10px 'IBM Plex Mono', monospace; }
.cap-track { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.cap-bar { height: 100%; border-radius: 5px; transform-origin: left; animation: swFill 1s var(--ease) both; animation-play-state: var(--play); }
.cap-caption { margin-top: 14px; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .04em; color: #7f97b8; text-align: center; }

/* =========================================================================
   PROBLEM
   ========================================================================= */
.lead { max-width: 680px; }
.h2 { font: 500 clamp(28px, 3.8vw, 44px)/1.1 'Newsreader', Georgia, serif; letter-spacing: -.015em; margin: 0 0 18px; }
.lead p { font: 400 clamp(16px, 1.5vw, 18.5px)/1.6 'Public Sans', system-ui, sans-serif; color: #525d6b; margin: 0; }

.timeline { margin-top: 40px; max-width: 680px; }
.tl-item { display: grid; grid-template-columns: 28px 1fr; column-gap: 16px; margin-bottom: 26px; }
.tl-item:last-child { margin-bottom: 0; }
.tl-marker { position: relative; }
.tl-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin-top: 3px; position: relative; z-index: 1; }
.tl-line { position: absolute; left: 6px; top: 10px; width: 2px; height: calc(100% + 26px); background: #dde3ec; z-index: 0; }
.tl-title { font: 600 17px 'Public Sans', system-ui, sans-serif; margin-bottom: 7px; }
.tl-body { font: 400 14.5px/1.6 'Public Sans', system-ui, sans-serif; color: #5a6675; }

.pullquote-block { margin-top: 24px; max-width: 640px; }
.pullquote { font: 500 clamp(24px, 3vw, 32px)/1.4 'Newsreader', Georgia, serif; letter-spacing: -.01em; color: #0b1a2e; margin: 0 0 14px; }
.pullquote-block p { font: 400 16px/1.65 'Public Sans', system-ui, sans-serif; color: #525d6b; margin: 0; }

/* =========================================================================
   SERVICES
   ========================================================================= */
.band-white { background: #fff; border-top: 1px solid #e9edf2; border-bottom: 1px solid #e9edf2; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 5vw, 64px); align-items: start; }
/* Static by default (small screens); becomes sticky only above the 820px
   breakpoint, where the two-column layout makes it useful. */
.services-sticky { align-self: start; }
@media (min-width: 821px) {
  .services-sticky { position: sticky; top: 90px; }
}
.services-sticky p { font: 400 clamp(16px, 1.5vw, 18px)/1.6 'Public Sans', system-ui, sans-serif; color: #525d6b; margin: 0 0 26px; max-width: 440px; }

.sw-eng-link { display: inline-flex; align-items: center; gap: 8px; font: 600 15px 'Public Sans', system-ui, sans-serif; color: var(--accent); text-decoration: none; }
.sw-eng-underline { position: relative; }
.sw-eng-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.sw-eng-link:hover .sw-eng-underline::after { transform: scaleX(1); }
.sw-eng-arrow { display: inline-block; transition: transform .3s var(--ease); }
.sw-eng-link:hover .sw-eng-arrow { transform: translateX(5px); }
.sw-eng-link-back:hover .sw-eng-arrow { transform: translateX(-5px); }

.svc-row { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid #edf0f4; }
.svc-row:last-child { border-bottom: none; }
.svc-num { font: 600 12px 'IBM Plex Mono', monospace; color: #aeb6c2; padding-top: 3px; }
.svc-title { font: 600 18px 'Public Sans', system-ui, sans-serif; margin-bottom: 6px; }
.svc-body { font: 400 15px/1.6 'Public Sans', system-ui, sans-serif; color: #5a6675; }

/* =========================================================================
   ENGAGEMENTS (ladder / stepper)
   ========================================================================= */
.eng-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 40px; }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; }
.rung {
  align-self: end; border-radius: 16px; padding: 22px; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e8ee;
  transition: transform .3s var(--ease), box-shadow .3s ease, border-color .2s ease;
}
.rung:hover { transform: translateY(-6px); border-color: rgba(47,107,240,.35); box-shadow: 0 20px 40px -20px rgba(16,30,50,.25); }
.rung--1 { min-height: 172px; background: #0b1a2e; color: #eaf1fb; border-color: #0b1a2e; box-shadow: 0 24px 44px -22px rgba(11,26,46,.6); }
.rung--1:hover { transform: translateY(-6px); box-shadow: 0 30px 54px -18px rgba(11,26,46,.75); border-color: #0b1a2e; }
.rung--2 { min-height: 204px; }
.rung--3 { min-height: 236px; }
.rung--4 { min-height: 268px; }
.rung__badge { align-self: flex-start; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #0b1a2e; background: var(--accent); border-radius: 6px; padding: 4px 8px; margin-bottom: auto; }
.rung__tag { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #9aa3af; margin-bottom: auto; }
.rung__title { font: 600 20px 'Public Sans', system-ui, sans-serif; margin: 18px 0 7px; }
.rung__desc { font: 400 13.5px/1.5 'Public Sans', system-ui, sans-serif; color: #5a6675; }
.rung--1 .rung__desc { color: #a9bcd6; }

/* mobile stepper */
.stepper { display: flex; flex-direction: column; }
.step { display: flex; gap: 16px; }
.step__rail { display: flex; flex-direction: column; align-items: center; width: 16px; flex: none; }
.step__node { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.step__node--accent { background: var(--accent); }
.step__node--open { background: #fff; border: 2px solid #b7c2d2; }
.step__line { flex: 1; width: 2px; background: #dbe1e9; margin: 3px 0; }
.step__body { flex: 1; padding-bottom: 22px; }
.step:last-of-type .step__body { padding-bottom: 0; }
.step__titlerow { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.step__title { font: 600 18px 'Public Sans', system-ui, sans-serif; }
.step__badge { font: 600 8.5px 'IBM Plex Mono', monospace; color: #fff; background: var(--accent); border-radius: 5px; padding: 3px 7px; }
.step__desc { font: 400 13.5px/1.5 'Public Sans', system-ui, sans-serif; color: #5a6675; margin-bottom: 10px; }
.pips { display: flex; gap: 3px; }
.pip { width: 24px; height: 4px; border-radius: 2px; background: #dde3ea; }
.pip.on { background: var(--accent); }
.stepper__foot { text-align: center; font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; color: #aeb6c2; margin-top: 6px; }

/* desktop / mobile layout switch */
.only-desktop { display: block; }
.only-mobile { display: none; }
@media (max-width: 820px) {
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}

/* =========================================================================
   PROOF / CASE STUDIES
   ========================================================================= */
.band-dark { background: #0b1a2e; color: #eaf1fb; }
.proof-head { max-width: 620px; margin-bottom: 36px; }
.proof-head .h2 { color: #fbfdff; margin-bottom: 14px; }
.proof-head p { font: 400 15.5px/1.6 'Public Sans', system-ui, sans-serif; color: #a9bcd6; margin: 0; }

.cases { display: flex; flex-direction: column; gap: 12px; }
.case { border: 1px solid rgba(120,160,230,.18); border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.025); transition: border-color .2s, background .2s; }
.case.open { border-color: rgba(79,139,255,.4); background: rgba(255,255,255,.05); }
.case__btn { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 22px 24px; background: none; border: none; cursor: pointer; font-family: 'Public Sans', system-ui, sans-serif; }
.case__title { display: block; font: 500 clamp(18px, 2vw, 22px)/1.2 'Newsreader', Georgia, serif; color: #fbfdff; }
.case__tag { display: block; font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; color: #7f97b8; margin-top: 9px; }
.case__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; }
.case__icon span { display: inline-block; font: 600 22px 'Public Sans', system-ui, sans-serif; color: #7f97b8; line-height: 1; transition: transform .3s var(--ease); }
.case.open .case__icon span { transform: rotate(45deg); }

.case__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.case.open .case__panel { grid-template-rows: 1fr; }
.case__panel > div { overflow: hidden; }
.case__inner { padding: 4px 24px 26px; border-top: 1px solid rgba(120,160,230,.16); }
.case__metric { display: inline-flex; align-items: baseline; gap: 9px; margin: 18px 0 22px; padding: 9px 15px; background: rgba(79,139,255,.1); border: 1px solid rgba(79,139,255,.26); border-radius: 11px; }
.case__metric b { font: 600 22px 'Newsreader', Georgia, serif; color: #9fc1ff; }
.case__metric span { font: 600 12px 'Public Sans', system-ui, sans-serif; color: #a9bcd6; }
.case__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.case__coltitle { font: 600 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #7f97b8; margin-bottom: 9px; }
.case__cols p { font: 400 14px/1.6 'Public Sans', system-ui, sans-serif; color: #c4d2e6; margin: 0; }

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(36px, 5vw, 64px); align-items: stretch; }
.about-photo {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; max-width: 380px; height: 380px; align-self: center;
  border-radius: 20px; object-fit: cover;
  background: #e9edf2; border: 1px dashed #c3ccd8; color: #8a93a0;
  font: 600 13px 'IBM Plex Mono', monospace; letter-spacing: .04em;
}
.about-copy { align-self: center; }
.about-copy p { font: 400 16.5px/1.65 'Public Sans', system-ui, sans-serif; color: #525d6b; margin: 0 0 14px; }
.about-copy p:last-child { margin-bottom: 0; }

/* =========================================================================
   PARTNERS BAND
   ========================================================================= */
.partners-band .wrap { padding-top: clamp(44px, 5vw, 64px); padding-bottom: clamp(44px, 5vw, 64px); }
.partners-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: linear-gradient(120deg, #11294a, #0b1a2e); border-radius: 20px; padding: clamp(28px, 4vw, 44px);
}
.partners-card__text { max-width: 600px; }
.partners-card__head { font: 500 clamp(20px, 2.4vw, 27px)/1.3 'Newsreader', Georgia, serif; color: #fbfdff; }
.partners-card__head + .partners-card__head { margin-top: 14px; }
.partners-card .eyebrow { color: #7f97b8; margin-bottom: 12px; }
.btn-white { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; background: #fff; color: #0b1a2e; border-radius: 11px; font: 600 15px 'Public Sans', system-ui, sans-serif; text-decoration: none; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-wrap { max-width: 840px; margin: 0 auto; padding: clamp(64px, 8vw, 104px) 24px; }
.faq-list { display: flex; flex-direction: column; }
.faq { border-bottom: 1px solid #e4e8ee; }
.faq__btn { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px 2px; background: none; border: none; cursor: pointer; font-family: 'Public Sans', system-ui, sans-serif; }
.faq__q { flex: 1; font: 600 17px 'Public Sans', system-ui, sans-serif; color: #16202e; }
.faq__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; }
.faq__icon span { display: inline-block; font: 600 20px 'Public Sans', system-ui, sans-serif; color: var(--accent); line-height: 1; transition: transform .3s var(--ease); }
.faq.open .faq__icon span { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq.open .faq__panel { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__inner { padding: 0 2px 22px; max-width: 660px; }
.faq__inner p { font: 400 15.5px/1.65 'Public Sans', system-ui, sans-serif; color: #525d6b; margin: 0; }

/* =========================================================================
   CONTACT / TALK FORMS
   ========================================================================= */
.contact-main { background: radial-gradient(120% 120% at 15% 0%, #13294a 0%, #0b1a2e 58%); color: #eaf1fb; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(40px, 5vw, 64px); align-items: start; }
.contact-intro .h2 { color: #fbfdff; }
.contact-intro .h2 { font-size: clamp(28px, 3.8vw, 46px); line-height: 1.08; }
.contact-intro p { font: 400 16.5px/1.65 'Public Sans', system-ui, sans-serif; color: #a9bcd6; max-width: 420px; margin: 0 0 28px; }
.contact-email { display: flex; align-items: center; gap: 11px; font: 600 14.5px 'IBM Plex Mono', monospace; color: #c4d2e6; text-decoration: none; }
.contact-email .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.form { background: rgba(255,255,255,.04); border: 1px solid rgba(120,160,230,.2); border-radius: 20px; padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px; }
.field__label { font: 600 12px 'Public Sans', system-ui, sans-serif; color: #a9bcd6; margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 0 14px; border-radius: 10px;
  border: 1px solid rgba(143,166,200,.3); background: rgba(7,16,30,.5); color: #eaf1fb;
  font: 400 14.5px 'Public Sans', system-ui, sans-serif; outline: none;
  transition: border-color .2s ease;
}
.field input { height: 46px; }
.field textarea { height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.form button {
  margin-top: 2px; display: inline-flex; justify-content: center; padding: 15px; border-radius: 11px;
  border: none; cursor: pointer; background: var(--accent); color: #fff;
  font: 600 15.5px 'Public Sans', system-ui, sans-serif;
  transition: transform .25s var(--ease), box-shadow .25s ease;
}
.form button:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 20px -10px rgba(47,107,240,.4); }
.form button:active { transform: translateY(0) scale(.98); }
.form__note { font: 400 12px 'Public Sans', system-ui, sans-serif; color: #7f97b8; text-align: center; }
.form__status { font: 600 13px 'Public Sans', system-ui, sans-serif; color: #9fc1ff; text-align: center; min-height: 0; }

/* =========================================================================
   PARTNERS PAGE specifics
   ========================================================================= */
.offer-head { max-width: 640px; margin-bottom: 40px; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.offer-card { background: #fff; border: 1px solid #e4e8ee; border-radius: 16px; padding: 26px; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .2s ease; }
.offer-card:hover { border-color: rgba(47,107,240,.35); transform: translateY(-5px); box-shadow: 0 20px 40px -20px rgba(16,30,50,.25); }
.offer-card__num { font: 600 12px 'IBM Plex Mono', monospace; color: #aeb6c2; margin-bottom: 14px; }
.offer-card__title { font: 600 18px 'Public Sans', system-ui, sans-serif; margin-bottom: 8px; }
.offer-card__body { font: 400 14.5px/1.6 'Public Sans', system-ui, sans-serif; color: #5a6675; }

.how-head { max-width: 600px; margin-bottom: 40px; }
.how-head .h2 { color: #fbfdff; }
.how-head .eyebrow { color: #7f97b8; }
.steps-row { display: flex; align-items: center; gap: 16px; }
.step-card { flex: 1; min-width: 0; border: 1px solid rgba(120,160,230,.2); border-radius: 16px; padding: 28px; background: rgba(255,255,255,.03); transition: transform .3s var(--ease), box-shadow .3s ease, border-color .2s ease; cursor: default; }
.step-card:hover { border-color: rgba(79,139,255,.4); transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(5,12,24,.6); }
.step-card__title { font: 600 18px 'Public Sans', system-ui, sans-serif; margin-bottom: 8px; color: #fbfdff; }
.step-card__body { font: 400 14.5px/1.6 'Public Sans', system-ui, sans-serif; color: #a9bcd6; }
.step-arrow { flex: none; font: 400 34px/1 'Public Sans', system-ui, sans-serif; color: #4f8bff; transition: transform .3s var(--ease); }
.step-card:hover + .step-arrow { transform: translateX(6px); }

.how .stepper .step__title, .how .stepper .step__desc { color: #fbfdff; }
.how .stepper .step__desc { color: #a9bcd6; }
.how .stepper .step__line { background: rgba(120,160,230,.3); }
.how .stepper .step__node { background: var(--accent); }

.proofline { max-width: 840px; margin: 0 auto; padding: clamp(60px, 7vw, 96px) 24px; text-align: center; }
.proofline p { font: 400 clamp(22px, 3vw, 32px)/1.35 'Newsreader', Georgia, serif; letter-spacing: -.01em; color: #16202e; margin: 0; }
.proofline__sub { margin-top: 22px; font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: #8a93a0; }
.proofline__sub .sw-eng-link { color: var(--accent); font: 600 12px 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.proofline__sub .sw-eng-underline::after { height: 1px; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer { background: #081320; color: #9fb2cb; }
.footer__inner { max-width: 1140px; margin: 0 auto; padding: 38px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer__brand { display: flex; align-items: center; gap: 11px; }
.footer__brand span { font: 700 15px 'Public Sans', system-ui, sans-serif; color: #dce6f3; }
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; font: 600 13px 'Public Sans', system-ui, sans-serif; }
.footer__links a { color: #9fb2cb; }
.footer__legal { max-width: 1140px; margin: 0 auto; padding: 0 24px 34px; font: 400 12px 'Public Sans', system-ui, sans-serif; color: #5b6f88; }

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .reveal { animation: none; opacity: 1; transform: none; }
}