/* ============================================================
   Acell Technologies — v2 landing page
   Editorial, Wyzer-inspired design language.
   Brand colors preserved: deep blue + Acell red.
   ============================================================ */

:root {
 /* Brand */
 --primary-blue: #1a4269;
 --primary-blue-dark: #12304d;
 --primary-blue-deep: #0a2238;
 --accent-red: #d8264d;
 --accent-red-ink: #a51a3a;
 --accent-red-soft: #fde7ec;

 /* Surfaces — clean editorial palette */
 --color-page: #ffffff;
 --color-surface: #f7f8fa;
 --color-raised: #eef1f5;

 /* Text */
 --color-ink: hsl(220 30% 11%);
 --color-body: hsl(220 16% 24%);
 --color-muted: hsl(220 9% 44%);

 /* Borders */
 --color-border: #cfd6e0;
 --color-border-subtle: #e6eaf0;

 /* Accent tokens map to Acell red */
 --color-accent: var(--accent-red);
 --color-accent-soft: var(--accent-red-soft);
 --color-accent-ink: var(--accent-red-ink);

 /* Fonts */
 --font-sans:
  'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
  sans-serif;
 --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

 /* Layout */
 --section-gap: clamp(5rem, 10vw, 8rem);
 --nav-height: 64px;

 /* Radii */
 --radius-xs: 6px;
 --radius-sm: 8px;
 --radius-md: 10px;
 --radius-lg: 14px;
 --radius-pill: 999px;

 --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset ---- */
*,
*::before,
*::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
 background: #ffffff;
 color: var(--color-body);
}

body {
 font-family: var(--font-sans);
 background: #ffffff;
 color: var(--color-body);
 line-height: 1.6;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-rendering: optimizeLegibility;
 font-feature-settings: 'cv11', 'ss01', 'ss03';
}

a {
 color: inherit;
 text-decoration: none;
}
ul,
ol {
 list-style: none;
}
img,
svg {
 display: block;
 max-width: 100%;
}
button {
 font: inherit;
 cursor: pointer;
}
input,
select,
textarea {
 font: inherit;
 color: inherit;
}

::selection {
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
}

*:focus-visible {
 outline: 2px solid var(--color-accent);
 outline-offset: 2px;
 border-radius: 2px;
}

/* ---- Layout helpers ---- */
.container {
 width: 100%;
 max-width: 1240px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.section {
 padding: var(--section-gap) 0;
 position: relative;
}

.bg-light {
 background: var(--color-surface);
}

.section + .section {
 border-top: 1px solid var(--color-border-subtle);
}

.text-center {
 text-align: center;
}

/* ============================================================
   Typography
   ============================================================ */

.text-display-1 {
 font-size: clamp(44px, 7vw, 80px);
 line-height: 1;
 letter-spacing: -0.035em;
 font-weight: 600;
 color: var(--color-ink);
}

.text-display-2 {
 font-size: clamp(34px, 5vw, 56px);
 line-height: 1.04;
 letter-spacing: -0.03em;
 font-weight: 600;
 color: var(--color-ink);
}

h1,
h2,
h3,
h4 {
 color: var(--color-ink);
 font-weight: 600;
 letter-spacing: -0.02em;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 0.5rem;
 height: 40px;
 padding: 0 1.1rem;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: -0.005em;
 border-radius: var(--radius-md);
 border: 1px solid transparent;
 background: transparent;
 color: var(--color-ink);
 transition: var(--transition);
 white-space: nowrap;
 cursor: pointer;
}

.btn i {
 width: 16px;
 height: 16px;
 transition: transform 0.2s ease;
}

.btn:hover i {
 transform: translateX(2px);
}

.btn-large {
 height: 48px;
 padding: 0 1.4rem;
 font-size: 15px;
 border-radius: var(--radius-md);
}

.btn-primary {
 background: var(--color-accent);
 color: #fff;
 border-color: var(--color-accent);
}

.btn-primary:hover {
 background: var(--color-accent-ink);
 border-color: var(--color-accent-ink);
}

.btn-secondary {
 background: transparent;
 color: var(--color-ink);
 border-color: var(--color-border);
}

.btn-secondary:hover {
 background: var(--color-raised);
 border-color: var(--color-ink);
}

.btn-ghost {
 color: var(--color-muted);
}

.btn-ghost:hover {
 color: var(--color-ink);
 background: var(--color-raised);
}

/* ============================================================
   Navbar
   ============================================================ */

.navbar {
 position: sticky;
 top: 0;
 z-index: 40;
 height: var(--nav-height);
 background: var(--primary-blue);
 border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 transition:
  background 0.2s ease,
  box-shadow 0.2s ease;
}

.navbar.scrolled {
 background: var(--primary-blue-dark);
 box-shadow: 0 4px 20px rgba(10, 34, 56, 0.18);
}

.nav-container {
 height: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

/* Logo — Acell wordmark preserved */
.logo {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #ffffff;
}

.logo-text {
 display: flex;
 flex-direction: column;
 line-height: 1;
}

.acell {
 font-family: 'Playfair Display', serif;
 font-size: 1.35rem;
 line-height: 1;
 letter-spacing: 1.5px;
 color: #ffffff;
}

.tech {
 font-size: 0.5rem;
 letter-spacing: 3px;
 text-transform: uppercase;
 margin-top: 3px;
 color: rgba(255, 255, 255, 0.65);
}

.logo-rectangles {
 display: flex;
 gap: 2px;
 height: 1.35rem;
 align-items: flex-end;
}

.rect {
 width: 4px;
 background: var(--color-accent);
 border-radius: 1px;
 height: 100%;
 animation: heartbeatX 1.6s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.rect1 {
 animation-delay: 0s;
}
.rect2 {
 animation-delay: 0.1s;
}
.rect3 {
 animation-delay: 0.2s;
}

@keyframes heartbeatX {
 0%,
 100% {
  transform: translateX(0);
  opacity: 0.9;
 }
 10% {
  transform: translateX(-3px);
  opacity: 1;
  box-shadow: 0 0 8px rgba(216, 38, 77, 0.6);
 }
 20% {
  transform: translateX(5px);
  opacity: 1;
  box-shadow: 0 0 12px rgba(216, 38, 77, 0.8);
 }
 30% {
  transform: translateX(-2px);
  opacity: 1;
  box-shadow: 0 0 6px rgba(216, 38, 77, 0.4);
 }
 40% {
  transform: translateX(0);
  opacity: 0.9;
  box-shadow: 0 0 0 rgba(216, 38, 77, 0);
 }
}

@media (prefers-reduced-motion: reduce) {
 .rect {
  animation: none;
 }
}

/* Nav links */
.nav-links {
 display: flex;
 align-items: center;
 gap: 0.25rem;
}

.nav-links a:not(.btn) {
 position: relative;
 display: inline-flex;
 align-items: center;
 height: 36px;
 padding: 0 0.85rem;
 font-size: 14px;
 color: rgba(255, 255, 255, 0.78);
 border-radius: var(--radius-sm);
 transition: color 0.15s ease;
}

.nav-links a:not(.btn):hover {
 color: #ffffff;
}

.nav-links a:not(.btn)::after {
 content: '';
 position: absolute;
 left: 0.85rem;
 right: 0.85rem;
 bottom: 4px;
 height: 1px;
 background: var(--color-accent);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.2s ease;
}

.nav-links a:not(.btn):hover::after {
 transform: scaleX(1);
}

.nav-links .btn-primary {
 margin-left: 0.5rem;
 height: 36px;
 padding: 0 0.95rem;
 font-size: 13px;
 border-radius: var(--radius-sm);
}

.mobile-menu-btn {
 display: none;
 width: 36px;
 height: 36px;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.08);
 border: 1px solid rgba(255, 255, 255, 0.14);
 color: #ffffff;
 border-radius: var(--radius-sm);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
 padding-top: 6rem;
 padding-bottom: var(--section-gap);
 position: relative;
 overflow: hidden;
 color: #ffffff;
 background:
  radial-gradient(
   ellipse 70% 60% at 15% 110%,
   rgba(216, 38, 77, 0.22) 0%,
   transparent 55%
  ),
  radial-gradient(
   ellipse 60% 50% at 90% 0%,
   rgba(255, 255, 255, 0.08) 0%,
   transparent 55%
  ),
  linear-gradient(
   160deg,
   var(--primary-blue) 0%,
   var(--primary-blue-dark) 55%,
   var(--primary-blue-deep) 100%
  );
}

.hero::before {
 content: '';
 position: absolute;
 inset: 0;
 background-image:
  linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
 background-size: 56px 56px;
 pointer-events: none;
}

.hero-glow {
 position: absolute;
 width: 540px;
 height: 540px;
 top: 12%;
 left: 50%;
 transform: translateX(-50%);
 background: radial-gradient(
  circle at center,
  rgba(216, 38, 77, 0.22) 0%,
  transparent 65%
 );
 filter: blur(40px);
 pointer-events: none;
}

.hero-content {
 max-width: 880px;
 margin: 0 auto;
 text-align: center;
 position: relative;
 z-index: 1;
}

.hero-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-mono);
 font-size: 12px;
 color: rgba(255, 255, 255, 0.7);
 margin-bottom: 1.75rem;
 letter-spacing: 0;
 text-transform: lowercase;
}

.hero-eyebrow .dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--accent-red);
 box-shadow: 0 0 0 4px rgba(216, 38, 77, 0.18);
}

.hero h1 {
 font-size: clamp(2.4rem, 6vw, 4.5rem);
 line-height: 0.98;
 letter-spacing: -0.035em;
 font-weight: 600;
 color: #ffffff;
 margin-bottom: 1.5rem;
 text-wrap: balance;
}

.grad-word {
 color: var(--accent-red);
 background: none;
 -webkit-text-fill-color: var(--accent-red);
}

.hero p {
 font-size: clamp(1.05rem, 1.4vw, 1.2rem);
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.78);
 max-width: 620px;
 margin: 0 auto 2.5rem;
 text-wrap: pretty;
}

.hero-cta {
 display: flex;
 justify-content: center;
 gap: 0.75rem;
 flex-wrap: wrap;
 margin-bottom: 3.5rem;
}

.hero-cta .btn-secondary {
 color: #ffffff;
 background: rgba(255, 255, 255, 0.06);
 border-color: rgba(255, 255, 255, 0.22);
}

.hero-cta .btn-secondary:hover {
 background: rgba(255, 255, 255, 0.12);
 border-color: rgba(255, 255, 255, 0.4);
}

.metric-strip {
 display: inline-flex;
 align-items: center;
 gap: 1.25rem;
 font-family: var(--font-mono);
 font-size: 12.5px;
 color: rgba(255, 255, 255, 0.75);
 padding: 0.6rem 1.25rem;
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--radius-pill);
 margin-bottom: 3rem;
}

.metric-strip strong {
 color: #ffffff;
 font-weight: 600;
 font-variant-numeric: tabular-nums;
}

.metric-sep {
 width: 3px;
 height: 3px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.25);
}

.hero-logos {
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 padding-top: 2.25rem;
}

.hero-logos p {
 font-family: var(--font-mono);
 font-size: 11px;
 color: rgba(255, 255, 255, 0.5);
 text-transform: lowercase;
 letter-spacing: 0;
 margin: 0 auto 1.25rem;
}

.logo-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 2.5rem;
}

.logo-tile {
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0.6rem 1.1rem;
 min-height: 48px;
 background: rgba(255, 255, 255, 0.96);
 border: 1px solid rgba(255, 255, 255, 0.15);
 border-radius: var(--radius-md);
 transition: var(--transition);
}

.logo-tile:hover {
 background: #ffffff;
 transform: translateY(-1px);
}

.company-logo {
 height: 26px;
 width: auto;
 max-width: 140px;
 object-fit: contain;
}

/* ============================================================
   Section headers
   ============================================================ */

.section-header {
 margin-bottom: 4rem;
 max-width: 720px;
}

.section-header.text-center {
 text-align: center;
 margin-left: auto;
 margin-right: auto;
}

.section-label {
 display: inline-block;
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--accent-red);
 text-transform: lowercase;
 letter-spacing: 0;
 margin-bottom: 1.25rem;
}

.section-label::before,
.section-label::after {
 content: none;
}

.section-header h2 {
 font-size: clamp(2rem, 4vw, 3rem);
 line-height: 1.05;
 letter-spacing: -0.03em;
 color: var(--primary-blue-deep);
 font-weight: 600;
 margin-bottom: 0.85rem;
 text-wrap: balance;
}

.section-header p {
 font-size: 17px;
 line-height: 1.6;
 color: var(--color-body);
 max-width: 580px;
 margin: 0;
}

.section-header.text-center p {
 margin: 0 auto;
}

/* ============================================================
   Section 2 — Problem
   ============================================================ */

.problem-list {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 2.5rem 3rem;
 max-width: 1040px;
 margin: 0 auto;
}

.problem-item {
 display: flex;
 gap: 1rem;
 align-items: flex-start;
 font-size: 15px;
 line-height: 1.65;
 color: var(--color-body);
}

.problem-item i {
 width: 36px;
 height: 36px;
 flex: 0 0 36px;
 padding: 8px;
 border-radius: var(--radius-sm);
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
}

.problem-conclusion {
 margin-top: 4rem;
 text-align: center;
 font-size: clamp(1.25rem, 2vw, 1.6rem);
 line-height: 1.3;
 color: var(--color-ink);
 font-weight: 500;
 letter-spacing: -0.02em;
}

/* ============================================================
   Section 3 — How it works + Goals
   ============================================================ */

.flow-steps {
 position: relative;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 2.5rem;
 margin-bottom: 6rem;
}

.flow-line {
 position: absolute;
 top: 22px;
 left: 8.33%;
 right: 8.33%;
 height: 1px;
 background: repeating-linear-gradient(
  to right,
  var(--color-border) 0 6px,
  transparent 6px 12px
 );
 z-index: 0;
}

.step-card {
 position: relative;
 z-index: 1;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 background: #ffffff;
 padding-right: 0.5rem;
}

.step-icon {
 width: 44px;
 height: 44px;
 border-radius: var(--radius-md);
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.25rem;
 border: 1px solid #ffffff;
 box-shadow: 0 0 0 1px var(--color-border-subtle);
}

.step-icon i {
 width: 20px;
 height: 20px;
}

.step-number {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--primary-blue);
 margin-bottom: 0.4rem;
 display: inline-block;
 letter-spacing: 0.04em;
}

.step-card .step-number::before {
 content: 'step 0';
 color: var(--color-muted);
}

.step-card h3 {
 font-size: 19px;
 margin-bottom: 0.55rem;
 color: var(--primary-blue-deep);
 letter-spacing: -0.018em;
 font-weight: 600;
}

.step-card p {
 font-size: 15px;
 line-height: 1.65;
 color: var(--color-body);
}

/* Goals block */
.goals-block {
 text-align: center;
 margin-bottom: 2.5rem;
}

.goals-kicker {
 margin-bottom: 0.85rem;
}

.goals-heading {
 font-size: clamp(1.5rem, 2.6vw, 2.1rem);
 color: var(--primary-blue-deep);
 letter-spacing: -0.025em;
 font-weight: 600;
 text-align: center;
 margin: 0;
}

.goal-grid {
 display: grid;
 grid-template-columns: repeat(5, minmax(0, 1fr));
 gap: 1rem;
}

.goal-card {
 position: relative;
 padding: 1.5rem 1.25rem;
 background: #ffffff;
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-md);
 transition: var(--transition);
 overflow: hidden;
}

.goal-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--accent-red);
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.goal-card:hover {
 border-color: var(--primary-blue);
 transform: translateY(-2px);
 box-shadow: 0 8px 24px rgba(10, 34, 56, 0.06);
}

.goal-card:hover::before {
 transform: scaleX(1);
}

.goal-icon {
 width: 36px;
 height: 36px;
 border-radius: var(--radius-sm);
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1rem;
 transition: var(--transition);
}

.goal-card:hover .goal-icon {
 background: var(--primary-blue);
 color: #ffffff;
}

.goal-icon i {
 width: 18px;
 height: 18px;
}

.goal-card h4 {
 font-size: 15px;
 color: var(--primary-blue-deep);
 margin-bottom: 0.45rem;
 font-weight: 600;
 letter-spacing: -0.01em;
}

.goal-card p {
 font-size: 13.5px;
 line-height: 1.6;
 color: var(--color-body);
}

/* ============================================================
   Section 4 — Services
   ============================================================ */

.services-grid {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 3rem 3rem;
}

.service-card {
 display: flex;
 flex-direction: column;
}

.service-icon {
 width: 36px;
 height: 36px;
 border-radius: var(--radius-sm);
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 1.25rem;
}

.service-icon i {
 width: 18px;
 height: 18px;
}

.service-card h3 {
 font-size: 16px;
 color: var(--color-ink);
 margin-bottom: 0.6rem;
 letter-spacing: -0.015em;
}

.service-card p {
 font-size: 14.5px;
 line-height: 1.65;
 color: var(--color-body);
 margin-bottom: 0.85rem;
}

.service-outcome {
 font-family: var(--font-mono);
 font-size: 12px;
 color: var(--color-muted);
 margin-top: auto;
}

.service-outcome::before {
 content: '→ ';
 color: var(--color-accent);
}

/* ============================================================
   Section 5 — Compliance
   ============================================================ */

.compliance-intro {
 max-width: 720px;
 margin: 0 auto 3rem;
 font-size: 16px;
 line-height: 1.7;
 color: var(--color-body);
 text-align: center;
 text-wrap: pretty;
}

.framework-badges {
 display: flex;
 flex-wrap: wrap;
 gap: 0.5rem;
 justify-content: center;
 margin-bottom: 4rem;
}

.framework-badge {
 font-family: var(--font-mono);
 font-size: 12px;
 padding: 6px 10px;
 border-radius: 6px;
 color: var(--color-muted);
 border: 1px solid var(--color-border-subtle);
 background: var(--color-page);
 letter-spacing: 0;
}

.compliance-deliverables {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1.75rem 3rem;
 max-width: 980px;
 margin: 0 auto 4rem;
}

.compliance-item {
 display: flex;
 gap: 0.9rem;
 align-items: flex-start;
 font-size: 14.5px;
 line-height: 1.6;
 color: var(--color-body);
}

.compliance-item i {
 width: 32px;
 height: 32px;
 flex: 0 0 32px;
 padding: 7px;
 border-radius: var(--radius-sm);
 background: var(--color-accent-soft);
 color: var(--color-accent-ink);
}

.compliance-process {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 2rem;
 margin-bottom: 3rem;
}

.compliance-step h4 {
 font-size: 15px;
 color: var(--color-ink);
 margin: 0.85rem 0 0.4rem;
 letter-spacing: -0.015em;
}

.compliance-step p {
 font-size: 14px;
 line-height: 1.55;
 color: var(--color-body);
}

.compliance-step .step-number {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--primary-blue);
}

.compliance-step .step-number::before {
 content: '0';
}

.compliance-outcomes {
 font-family: var(--font-mono);
 font-size: 13px;
 color: var(--color-muted);
 text-align: center;
 padding: 1.25rem 1rem;
 border-top: 1px solid var(--color-border-subtle);
 border-bottom: 1px solid var(--color-border-subtle);
 margin-bottom: 2.5rem;
}

.compliance-cta {
 margin-top: 1rem;
}

/* ============================================================
   Section 6 — Wyzer product
   ============================================================ */

.products-stack {
 max-width: 1040px;
 margin: 0 auto 4rem;
}

.product-item {
 display: grid;
 grid-template-columns: 1.5fr 1fr;
 gap: 4rem;
 align-items: start;
 padding: 2.5rem;
 background: var(--color-page);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-lg);
}

.product-tagline {
 font-size: 18px;
 color: var(--color-ink);
 letter-spacing: -0.015em;
 margin-bottom: 1.5rem;
 line-height: 1.35;
 font-weight: 500;
}

.product-features {
 display: flex;
 flex-direction: column;
 gap: 0.85rem;
}

.product-features li {
 display: flex;
 gap: 0.75rem;
 align-items: flex-start;
 font-size: 14.5px;
 line-height: 1.6;
 color: var(--color-body);
}

.product-features li i {
 width: 18px;
 height: 18px;
 flex: 0 0 18px;
 margin-top: 2px;
 color: var(--color-accent);
}

.product-meta {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 align-items: flex-start;
}

.status-badge {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 font-family: var(--font-mono);
 font-size: 11.5px;
 color: var(--color-accent-ink);
 background: var(--color-accent-soft);
 padding: 5px 9px;
 border-radius: 6px;
}

.live-dot {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--color-accent);
}

.price-line {
 font-size: 14px;
 color: var(--color-muted);
 line-height: 1.5;
}

.product-meta .btn {
 align-self: stretch;
}

/* Comparison table */
.comparison-wrapper {
 max-width: 880px;
 margin: 0 auto;
 overflow-x: auto;
}

.comparison-table {
 width: 100%;
 border-collapse: collapse;
 font-size: 14.5px;
}

.comparison-table th,
.comparison-table td {
 text-align: left;
 padding: 1rem 1.25rem;
 border-bottom: 1px solid var(--color-border-subtle);
}

.comparison-table thead th {
 font-family: var(--font-mono);
 font-size: 11.5px;
 font-weight: 500;
 color: var(--color-muted);
 letter-spacing: 0;
 padding-top: 0;
 padding-bottom: 0.85rem;
}

.comparison-table thead th:last-child {
 color: var(--color-accent-ink);
}

.comparison-table tbody td:first-child {
 color: var(--color-muted);
 font-size: 13.5px;
}

.comparison-table tbody td {
 color: var(--color-ink);
}

.comparison-table tbody td:last-child {
 color: var(--color-accent-ink);
 font-weight: 500;
}

/* ============================================================
   Section 7 — Customer stories
   ============================================================ */

.stories-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 2rem;
}

.story-card {
 padding: 2rem;
 background: var(--color-page);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-lg);
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}

.story-logo-wrap {
 height: 36px;
 display: flex;
 align-items: center;
}

.story-logo {
 height: 28px;
 width: auto;
 filter: grayscale(1);
 opacity: 0.8;
}

.story-content {
 display: flex;
 flex-direction: column;
 gap: 0.6rem;
 font-size: 14.5px;
 line-height: 1.65;
 color: var(--color-body);
}

.story-content strong {
 color: var(--color-ink);
 font-weight: 600;
}

.story-stats {
 font-family: var(--font-mono);
 font-size: 12.5px;
 color: var(--color-muted);
 padding: 0.75rem 0;
 border-top: 1px solid var(--color-border-subtle);
 border-bottom: 1px solid var(--color-border-subtle);
}

.story-quote {
 font-size: 16px;
 line-height: 1.55;
 color: var(--color-ink);
 letter-spacing: -0.015em;
 font-style: italic;
}

.story-quote::before {
 content: '“';
 color: var(--color-accent);
 font-size: 1.4em;
 line-height: 0;
 vertical-align: -0.2em;
 margin-right: 2px;
}

.story-quote::after {
 content: '”';
 color: var(--color-accent);
 font-size: 1.4em;
 line-height: 0;
 vertical-align: -0.2em;
 margin-left: 2px;
}

.story-author {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding-top: 0.25rem;
}

.author-img {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: linear-gradient(135deg, var(--primary-blue), var(--accent-red));
 flex-shrink: 0;
}

.author-info h4 {
 font-size: 14px;
 color: var(--color-ink);
 margin: 0;
 letter-spacing: -0.01em;
}

.author-info p {
 font-size: 12.5px;
 color: var(--color-muted);
 margin: 0;
}

/* ============================================================
   Section 8 — Lead magnets
   ============================================================ */

.magnets-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 2rem;
}

.magnet-card {
 padding: 2.25rem;
 background: var(--color-page);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-lg);
}

.magnet-card h3 {
 font-size: 22px;
 color: var(--color-ink);
 letter-spacing: -0.02em;
 margin-bottom: 0.6rem;
}

.magnet-card > p {
 font-size: 14.5px;
 color: var(--color-body);
 margin-bottom: 1.5rem;
 line-height: 1.55;
}

.magnet-form {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}

.magnet-form input,
.magnet-form select {
 height: 44px;
 padding: 0 0.85rem;
 background: var(--color-page);
 border: 1px solid var(--color-border-subtle);
 border-radius: var(--radius-sm);
 color: var(--color-ink);
 font-size: 14.5px;
 transition: border-color 0.15s ease;
}

.magnet-form input::placeholder {
 color: var(--color-muted);
}

.magnet-form input:focus,
.magnet-form select:focus {
 outline: none;
 border-color: var(--color-accent);
 box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.magnet-form select {
 appearance: none;
 background-image:
  linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
  linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
 background-position:
  calc(100% - 18px) center,
  calc(100% - 13px) center;
 background-size:
  5px 5px,
  5px 5px;
 background-repeat: no-repeat;
 padding-right: 2rem;
}

.magnet-form button {
 margin-top: 0.5rem;
 height: 44px;
}

.form-status {
 min-height: 1.1em;
 margin: 0.4rem 0 0;
 font-size: 13px;
 color: var(--color-muted);
}

.form-status.error {
 color: var(--accent-red);
}

.magnet-form button:disabled {
 opacity: 0.7;
 cursor: wait;
}

.hp-field {
 position: absolute !important;
 left: -10000px !important;
 width: 1px !important;
 height: 1px !important;
 opacity: 0 !important;
 pointer-events: none !important;
}

/* ============================================================
   Section 9 — FAQ
   ============================================================ */

.faq-list {
 max-width: 820px;
 margin: 0 auto;
 border-top: 1px solid var(--color-border-subtle);
}

.faq-item {
 border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
 width: 100%;
 background: transparent;
 border: 0;
 padding: 1.25rem 0;
 text-align: left;
 font-size: 16px;
 color: var(--color-ink);
 font-weight: 500;
 letter-spacing: -0.015em;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
 transition: color 0.15s ease;
}

.faq-question:hover {
 color: var(--color-accent-ink);
}

.faq-question i {
 width: 18px;
 height: 18px;
 color: var(--color-muted);
 transition: transform 0.25s ease;
 flex-shrink: 0;
}

.faq-question[aria-expanded='true'] i {
 transform: rotate(180deg);
 color: var(--color-accent);
}

.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition:
  max-height 0.3s ease,
  padding 0.3s ease;
 font-size: 15px;
 line-height: 1.65;
 color: var(--color-body);
}

.faq-answer.active {
 max-height: 400px;
 padding: 0 0 1.25rem;
}

/* ============================================================
   Section 10 — Final CTA
   ============================================================ */

.final-cta {
 padding: var(--section-gap) 0;
}

.final-cta-card {
 max-width: 920px;
 margin: 0 auto;
 text-align: center;
}

.final-cta-card .section-label {
 margin-bottom: 1.5rem;
}

.final-cta-card h3 {
 font-size: clamp(2rem, 4vw, 3rem);
 line-height: 1.05;
 letter-spacing: -0.03em;
 color: var(--primary-blue-deep);
 font-weight: 600;
 margin-bottom: 1rem;
 text-wrap: balance;
}

.final-cta-card > p {
 font-size: 17px;
 line-height: 1.55;
 color: var(--color-body);
 max-width: 540px;
 margin: 0 auto 2rem;
}

.final-cta-actions {
 display: flex;
 justify-content: center;
 gap: 0.75rem;
 flex-wrap: wrap;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
 background: linear-gradient(
  180deg,
  var(--primary-blue-dark) 0%,
  var(--primary-blue-deep) 60%,
  #050f1c 100%
 );
 border-top: 1px solid rgba(255, 255, 255, 0.06);
 padding: 4.5rem 0 2rem;
 color: #ffffff;
 position: relative;
 overflow: hidden;
}

.footer-grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr;
 gap: 3rem;
 margin-bottom: 3rem;
}

.footer-brand {
 max-width: 320px;
}

.footer-logo {
 margin-bottom: 1.25rem;
}

.footer-tag {
 font-family: var(--font-mono);
 font-size: 12px;
 color: rgba(255, 255, 255, 0.55);
 margin-bottom: 1rem;
}

.footer-addr {
 font-size: 13.5px;
 line-height: 1.6;
 color: rgba(255, 255, 255, 0.7);
 margin-bottom: 1.25rem;
}

.footer-addr a {
 color: #ffffff;
 text-decoration: underline;
 text-underline-offset: 2px;
 text-decoration-thickness: 1px;
}

.footer-social {
 display: flex;
 gap: 0.75rem;
}

.footer-social a {
 width: 32px;
 height: 32px;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 border: 1px solid rgba(255, 255, 255, 0.12);
 border-radius: var(--radius-sm);
 color: rgba(255, 255, 255, 0.6);
 transition: var(--transition);
}

.footer-social a:hover {
 color: #ffffff;
 border-color: var(--color-accent);
}

.footer-social svg {
 width: 14px;
 height: 14px;
}

.footer h4 {
 font-family: var(--font-mono);
 font-size: 11px;
 font-weight: 500;
 color: rgba(255, 255, 255, 0.55);
 text-transform: lowercase;
 letter-spacing: 0;
 margin-bottom: 1rem;
}

.footer ul li {
 margin-bottom: 0.6rem;
}

.footer ul a {
 font-size: 13.5px;
 color: rgba(255, 255, 255, 0.7);
 transition: color 0.15s ease;
}

.footer ul a:hover {
 color: #ffffff;
}

.footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 flex-wrap: wrap;
 gap: 0.75rem;
 padding-top: 2rem;
 border-top: 1px solid rgba(255, 255, 255, 0.08);
 font-family: var(--font-mono);
 font-size: 11.5px;
 color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   Reveal animations
   ============================================================ */

.reveal {
 opacity: 0;
 transform: translateY(12px);
 transition:
  opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
  transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.in-view {
 opacity: 1;
 transform: none;
}

@media (prefers-reduced-motion: reduce) {
 *,
 *::before,
 *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
 }
 .reveal {
  opacity: 1;
  transform: none;
 }
}

/* ============================================================
   Responsive
   ============================================================ */

/* Large tablet / small desktop */
@media (max-width: 1080px) {
 .goal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
 }

 .services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
 }

 .product-item {
  grid-template-columns: 1fr;
  gap: 2rem;
 }

 .compliance-process {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
 }

 .footer-grid {
  grid-template-columns: 1.5fr 1fr 1fr;
 }
}

/* Tablet */
@media (max-width: 860px) {
 .flow-steps {
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 4.5rem;
 }

 .flow-line {
  display: none;
 }

 .step-card {
  padding-right: 0;
 }

 .stories-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
 }

 .magnets-grid {
  grid-template-columns: 1fr;
  gap: 1.5rem;
 }

 .goal-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
 }
}

/* Mobile */
@media (max-width: 640px) {
 :root {
  --section-gap: 4rem;
  --nav-height: 60px;
 }

 .container {
  padding: 0 1.1rem;
 }

 /* Navbar */
 .acell {
  font-size: 1.15rem;
  letter-spacing: 1px;
 }

 .tech {
  font-size: 0.45rem;
  letter-spacing: 2.5px;
 }

 .logo-rectangles {
  height: 1.15rem;
 }

 .nav-links {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--primary-blue-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1rem 1.1rem 1.5rem;
  transform: translateY(-120%);
  transition: transform 0.25s ease;
  z-index: 39;
  box-shadow: 0 12px 28px rgba(10, 34, 56, 0.22);
 }

 .nav-links.open {
  transform: translateY(0);
 }

 .nav-links a:not(.btn) {
  height: 44px;
  padding: 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
 }

 .nav-links a:not(.btn)::after {
  display: none;
 }

 .nav-links .btn-primary {
  margin: 0.5rem 0 0;
  height: 44px;
  font-size: 14px;
  justify-content: center;
 }

 .mobile-menu-btn {
  display: inline-flex;
 }

 /* Hero */
 .hero {
  padding-top: 3rem;
  padding-bottom: 4rem;
  text-align: center;
 }

 .hero h1 {
  font-size: clamp(2.1rem, 9vw, 3rem);
 }

 .hero p {
  font-size: 1rem;
 }

 .hero-cta,
 .final-cta-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
 }

 .hero-cta .btn,
 .final-cta-actions .btn {
  justify-content: center;
  width: 100%;
 }

 .metric-strip {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.85rem;
  font-size: 11.5px;
  padding: 0.55rem 1rem;
 }

 .metric-sep {
  display: none;
 }

 .logo-grid {
  gap: 1.25rem;
 }

 .logo-tile {
  padding: 0.5rem 0.9rem;
  min-height: 44px;
 }

 .company-logo {
  height: 22px;
 }

 /* Section headers */
 .section-header {
  margin-bottom: 2.5rem;
 }

 .section-header h2 {
  font-size: clamp(1.65rem, 6vw, 2.1rem);
 }

 .section-header p {
  font-size: 15px;
 }

 /* Problem */
 .problem-list {
  grid-template-columns: 1fr;
  gap: 1.5rem;
 }

 .problem-conclusion {
  margin-top: 2.5rem;
  font-size: 1.15rem;
 }

 /* Goals + flow */
 .goal-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
 }

 .goals-block {
  margin-bottom: 1.75rem;
 }

 /* Services */
 .services-grid {
  grid-template-columns: 1fr;
  gap: 2rem;
 }

 /* Compliance */
 .compliance-deliverables {
  grid-template-columns: 1fr;
  gap: 1.25rem;
 }

 .compliance-process {
  grid-template-columns: 1fr;
  gap: 1.75rem;
 }

 .framework-badges {
  margin-bottom: 2.5rem;
 }

 /* Product */
 .product-item {
  padding: 1.5rem;
 }

 .product-meta .btn {
  width: 100%;
 }

 /* Comparison */
 .comparison-table th,
 .comparison-table td {
  padding: 0.85rem 0.75rem;
  font-size: 13px;
 }

 /* Stories */
 .story-card {
  padding: 1.5rem;
 }

 /* Magnets */
 .magnet-card {
  padding: 1.5rem;
 }

 .magnet-card h3 {
  font-size: 19px;
 }

 /* FAQ */
 .faq-question {
  font-size: 15px;
  gap: 1rem;
 }

 /* Final CTA */
 .final-cta-card h3 {
  font-size: clamp(1.65rem, 7vw, 2.1rem);
 }

 .final-cta-card > p {
  font-size: 15px;
 }

 /* Footer */
 .footer {
  padding: 3rem 0 1.5rem;
 }

 .footer-grid {
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
 }

 .footer-brand {
  grid-column: 1 / -1;
  max-width: none;
 }

 .footer-bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
 }
}

/* Very small phones */
@media (max-width: 380px) {
 .acell {
  font-size: 1rem;
 }

 .nav-container {
  gap: 0.5rem;
 }

 .footer-grid {
  grid-template-columns: 1fr;
 }
}