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

 :root {
     /* DigitalRates brand */
     --dr-red: #EF4136;
     --dr-red-dark: #d4342a;
     --dr-red-soft: rgba(239, 65, 54, 0.08);
     --dr-red-mid: rgba(239, 65, 54, 0.15);
     --dr-cyan: #27AAE1;
     --dr-cyan-soft: rgba(39, 170, 225, 0.10);
     --dr-cyan-mid: rgba(39, 170, 225, 0.20);
     /* arc gradient colors */
     --arc-1: #EF4136;
     --arc-2: #C75658;
     --arc-3: #9F6B7A;
     --arc-4: #77809D;
     --arc-5: #4F95BF;
     /* light mode */
     --bg: #F7F8FA;
     --bg-card: #FFFFFF;
     --bg-subtle: #F0F2F6;
     --ink: #0D0F14;
     --ink-2: #2C3040;
     --ink-3: #5A6275;
     --ink-4: #8B94A8;
     --border: #E2E6EF;
     --border-2: #CDD3E0;
     --white: #FFFFFF;
     --font: 'Sora', system-ui, sans-serif;
     /* --font: 'Inter', system-ui, sans-serif; */
     --mono: 'JetBrains Mono', monospace;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: var(--font);
     background: var(--bg);
     color: var(--ink);
     line-height: 1.6;
     overflow-x: hidden;
     -webkit-font-smoothing: antialiased;
 }

 /* ─── REDIRECT BAR ─── */
 .redir-bar {
     background: var(--ink);
     color: rgba(255, 255, 255, 0.7);
     font-family: var(--mono);
     font-size: 0.73rem;
     letter-spacing: 0.02em;
     padding: 10px 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     flex-wrap: wrap;
 }

 .redir-bar a {
     color: var(--dr-cyan);
     text-decoration: none;
     font-weight: 600;
 }

 .redir-bar a:hover {
     text-decoration: underline;
 }

 #cd {
     background: var(--dr-red);
     color: #fff;
     border-radius: 3px;
     padding: 1px 8px;
     font-weight: 700;
     font-size: 0.7rem;
     min-width: 20px;
     text-align: center;
     display: inline-block;
 }

 /* ─── TOPNAV ─── */
 .topnav {
     position: sticky;
     top: 0;
     z-index: 200;
     background: #ffffffad;
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--border);
     height: 64px;
     display: flex;
     align-items: center;
     padding: 0 40px;
     justify-content: space-between;
     gap: 16px;
 }

 .topnav-left {
     display: flex;
     align-items: center;
     gap: 28px;
 }

 .logo-wrap {
     display: flex;
     align-items: center;
     gap: 10px;
     text-decoration: none;
 }

 .logo-mark {
     width: 32px;
     height: 32px;
     flex-shrink: 0;
 }

 .logo-wordmark {
     font-size: 1.05rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--ink);
     line-height: 1;
 }

 .logo-wordmark span {
     color: var(--dr-red);
 }

 .logo-divider {
     width: 1px;
     height: 18px;
     background: var(--border-2);
     flex-shrink: 0;
 }

 .product-badge {
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.05em;
     color: var(--ink-4);
     /* text-transform: uppercase; */
 }

 .topnav-right {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .nav-toggle {
     display: none;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--white);
     color: var(--ink);
     cursor: pointer;
     transition: border-color 0.15s, background 0.15s, transform 0.1s;
 }

 .nav-toggle:hover {
     background: var(--bg-subtle);
     border-color: var(--border-2);
 }

 .nav-toggle:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px var(--dr-red-soft);
     border-color: var(--dr-red);
 }

 .nav-toggle-icon,
 .nav-toggle-icon::before,
 .nav-toggle-icon::after {
     display: block;
     width: 18px;
     height: 2px;
     border-radius: 999px;
     background: currentColor;
     transition: transform 0.2s ease, opacity 0.2s ease;
     content: '';
 }

 .nav-toggle-icon {
     position: relative;
 }

 .nav-toggle-icon::before {
     position: absolute;
     top: -6px;
     left: 0;
 }

 .nav-toggle-icon::after {
     position: absolute;
     top: 6px;
     left: 0;
 }

 .topnav.is-open .nav-toggle-icon {
     background: transparent;
 }

 .topnav.is-open .nav-toggle-icon::before {
     transform: translateY(6px) rotate(45deg);
 }

 .topnav.is-open .nav-toggle-icon::after {
     transform: translateY(-6px) rotate(-45deg);
 }

 .nav-btn-ghost {
     font-size: 0.83rem;
     font-weight: 500;
     color: var(--ink-2);
     text-decoration: none;
     padding: 6px 14px;
     border-radius: 6px;
     transition: background 0.15s;
 }

 .nav-btn-ghost:hover {
     background: var(--bg-subtle);
 }

 .nav-btn-primary {
     font-size: 0.83rem;
     font-weight: 600;
     color: var(--white);
     background: var(--dr-red);
     text-decoration: none;
     padding: 8px 18px;
     border-radius: 6px;
     transition: background 0.15s, transform 0.1s;
     letter-spacing: 0.01em;
 }

 .nav-btn-primary:hover {
     background: var(--dr-red-dark);
     transform: translateY(-1px);
 }

 /* ─── HERO ─── */
 .hero-wrap {
     z-index: 1;
     overflow: hidden;
     position: relative;
     border-bottom: 1px solid var(--border);
 }

 /* Line grid background */
 .hero-bg-grid {
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(var(--border) 1px, transparent 1px),
         linear-gradient(90deg, var(--border) 1px, transparent 1px);
     background-size: 40px 40px;
     opacity: 0.5;
     pointer-events: none;
 }

 .hero-bg-glow-1 {
     position: absolute;
     top: -200px;
     right: -100px;
     width: 700px;
     height: 700px;
     background: radial-gradient(circle, rgba(239, 65, 54, 0.07) 0%, transparent 65%);
     pointer-events: none;
 }

 .hero-bg-glow-2 {
     position: absolute;
     bottom: -200px;
     right: -100px;
     width: 600px;
     height: 600px;
     background: radial-gradient(circle, rgba(239, 65, 54, 0.07) 0%, transparent 60%);
     pointer-events: none;
 }


 .hero-inner {
     position: relative;
     z-index: 1;
     max-width: 1240px;
     margin: 0 auto;
     padding: 80px 40px 72px;
     display: grid;
     grid-template-columns: 1fr 460px;
     gap: 64px;
     align-items: center;
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 7px;
     background: var(--dr-red-soft);
     border: 1px solid rgba(239, 65, 54, 0.22);
     border-radius: 100px;
     padding: 5px 13px;
     font-size: 0.7rem;
     font-weight: 700;
     color: var(--dr-red);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     font-family: var(--mono);
     margin-bottom: 22px;
 }

 .tag-pulse {
     width: 6px;
     height: 6px;
     background: var(--dr-red);
     border-radius: 50%;
     animation: tagpulse 1.8s ease-in-out infinite;
 }

 @keyframes tagpulse {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.4;
         transform: scale(0.7);
     }
 }

 h1 {
     font-size: clamp(2.2rem, 3.8vw, 3.6rem);
     font-weight: 800;
     letter-spacing: -0.035em;
     line-height: 1.08;
     color: var(--ink);
     margin-bottom: 20px;
 }

 h1 .accent-red {
     color: var(--dr-red);
 }

 h1 .accent-cyan {
     color: var(--dr-cyan);
 }

 .hero-desc {
     font-size: 1.02rem;
     color: var(--ink-3);
     line-height: 1.8;
     max-width: 520px;
     margin-bottom: 36px;
     font-weight: 300;
 }

 .hero-cta-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     align-items: center;
     margin-bottom: 48px;
 }

 .btn-red {
     background: var(--dr-red);
     color: #fff;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.92rem;
     padding: 13px 26px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
     letter-spacing: 0.01em;
 }

 .btn-red:hover {
     background: var(--dr-red-dark);
     transform: translateY(-1px);
     box-shadow: 0 6px 24px rgba(239, 65, 54, 0.28);
 }

 .btn-outline-cyan {
     border: 1.5px solid var(--dr-cyan);
     color: var(--dr-cyan);
     background: transparent;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.9rem;
     padding: 12px 22px;
     border-radius: 8px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     transition: background 0.15s;
 }

 .btn-outline-cyan:hover {
     background: var(--dr-cyan-soft);
 }

 .hero-trust {
     display: flex;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 0.78rem;
     color: var(--ink-4);
     font-weight: 500;
 }

 .trust-dot {
     width: 5px;
     height: 5px;
     background: var(--dr-cyan);
     border-radius: 50%;
 }

 .trust-sep {
     color: var(--border-2);
     font-size: 0.9rem;
 }

 /* Score card */
 .score-panel {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 16px;
     box-shadow: 0 24px 64px rgba(13, 15, 20, 0.10), 0 2px 8px rgba(13, 15, 20, 0.04);
     padding: 28px;
     position: relative;
     overflow: hidden;
 }

 .score-panel::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--arc-1), var(--arc-2), var(--arc-3), var(--arc-4), var(--arc-5), var(--dr-cyan));
 }

 .sp-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 20px;
 }

 .sp-title {
     font-family: var(--mono);
     font-size: 0.68rem;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: var(--ink-4);
     font-weight: 500;
 }

 .sp-live {
     display: flex;
     align-items: center;
     gap: 5px;
     font-family: var(--mono);
     font-size: 0.65rem;
     color: #22c55e;
     font-weight: 600;
 }

 .live-dot {
     width: 6px;
     height: 6px;
     background: #22c55e;
     border-radius: 50%;
     animation: tagpulse 1.5s infinite;
 }

 .sp-score-row {
     display: flex;
     align-items: flex-end;
     gap: 10px;
     margin-bottom: 6px;
 }

 .sp-score-num {
     font-size: 3.6rem;
     font-weight: 800;
     letter-spacing: -0.04em;
     line-height: 1;
     color: var(--ink);
 }

 .sp-score-num span {
     color: var(--dr-red);
 }

 .sp-score-max {
     font-size: 0.9rem;
     color: var(--ink-4);
     margin-bottom: 8px;
     font-weight: 500;
 }

 .sp-grade {
     display: inline-flex;
     align-items: center;
     background: rgba(34, 197, 94, 0.10);
     color: #16a34a;
     border: 1px solid rgba(34, 197, 94, 0.25);
     border-radius: 4px;
     font-family: var(--mono);
     font-size: 0.72rem;
     font-weight: 700;
     padding: 3px 10px;
     letter-spacing: 0.04em;
     margin-bottom: 16px;
 }

 /* Gauge bar */
 .gauge-track {
     height: 8px;
     background: var(--bg-subtle);
     border-radius: 100px;
     overflow: hidden;
     margin-bottom: 6px;
 }

 .gauge-fill {
     height: 100%;
     width: 0%;
     background: linear-gradient(90deg, var(--arc-1), var(--arc-3), var(--arc-5), var(--dr-cyan));
     border-radius: 100px;
     animation: fillbar 1.4s 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }

 @keyframes fillbar {
     to {
         width: 82%;
     }
 }

 .gauge-labels {
     display: flex;
     justify-content: space-between;
     font-family: var(--mono);
     font-size: 0.6rem;
     color: var(--ink-4);
     margin-bottom: 20px;
 }

 /* Metric grid */
 .sp-metrics {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-bottom: 18px;
 }

 .sp-metric {
     background: var(--bg-subtle);
     border-radius: 8px;
     padding: 12px 14px;
 }

 .sp-metric-val {
     font-family: var(--mono);
     font-size: 1rem;
     font-weight: 600;
     color: var(--ink);
     margin-bottom: 2px;
 }

 .sp-metric-val.up {
     color: #16a34a;
 }

 .sp-metric-val.warn {
     color: var(--dr-red);
 }

 .sp-metric-label {
     font-size: 0.65rem;
     color: var(--ink-4);
     text-transform: uppercase;
     letter-spacing: 0.06em;
     font-weight: 600;
 }

 /* Signal list */
 .sp-signals {
     display: flex;
     flex-direction: column;
     gap: 6px;
 }

 .sp-signal {
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: 0.78rem;
 }

 .sp-signal-name {
     color: var(--ink-3);
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .sig-bar-wrap {
     flex: 1;
     height: 4px;
     background: var(--bg-subtle);
     border-radius: 100px;
     overflow: hidden;
     margin: 0 10px;
 }

 .sig-bar {
     height: 100%;
     border-radius: 100px;
     background: var(--dr-cyan);
 }

 .sp-signal-pct {
     font-family: var(--mono);
     font-size: 0.7rem;
     font-weight: 600;
     color: var(--ink-2);
     min-width: 32px;
     text-align: right;
 }

 /* ─── TICKER STRIP ─── */
 .ticker {
     background: var(--bg-subtle);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     padding: 11px 0;
     overflow: hidden;
 }

 .ticker-inner {
     display: flex;
     width: max-content;
     animation: ticker-scroll 30s linear infinite;
 }

 @keyframes ticker-scroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 .ticker-item {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 0 28px;
     border-right: 1px solid var(--border-2);
     font-family: var(--mono);
     font-size: 0.7rem;
     color: var(--ink-4);
     white-space: nowrap;
     letter-spacing: 0.04em;
 }

 .ticker-dot {
     width: 5px;
     height: 5px;
     background: var(--dr-red);
     border-radius: 50%;
     flex-shrink: 0;
 }

 /* ─── SECTION SHELL ─── */
 .section {
     max-width: 1240px;
     margin: 0 auto;
     padding: 72px 40px;
 }

 .section-eyebrow {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 14px;
 }

 .eyebrow-bar {
     width: 28px;
     height: 2px;
     background: var(--dr-red);
 }

 .eyebrow-text {
     font-family: var(--mono);
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--dr-red);
 }

 h2 {
     font-size: clamp(1.7rem, 2.8vw, 2.4rem);
     font-weight: 800;
     letter-spacing: -0.03em;
     line-height: 1.15;
     color: var(--ink);
     margin-bottom: 16px;
 }

 h2 .red {
     color: var(--dr-red);
 }

 h2 .cyan {
     color: var(--dr-cyan);
 }

 .section-body {
     font-size: 0.98rem;
     color: var(--ink-3);
     max-width: 660px;
     line-height: 1.85;
     font-weight: 300;
 }

 .section-body p+p {
     margin-top: 14px;
 }

 .section-body a {
     color: var(--dr-red);
     font-weight: 500;
     text-decoration: none;
 }

 .section-body a:hover {
     text-decoration: underline;
 }

 .rule {
     border: none;
     border-top: 1px solid var(--border);
 }

 /* ─── PROBLEM GRID ─── */
 .problem-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin-top: 44px;
 }

 .problem-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 28px 24px;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
     position: relative;
     overflow: hidden;
 }

 .problem-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--dr-red), var(--arc-3));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.25s ease;
 }

 .problem-card:hover {
     border-color: var(--border-2);
     box-shadow: 0 8px 32px rgba(13, 15, 20, 0.08);
     transform: translateY(-3px);
 }

 .problem-card:hover::after {
     transform: scaleX(1);
 }

 .problem-num {
     font-family: var(--mono);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     color: var(--dr-red);
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .problem-card h3 {
     font-size: 0.96rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
 }

 .problem-card p {
     font-size: 0.86rem;
     color: var(--ink-3);
     line-height: 1.7;
     font-weight: 300;
 }

 /* ─── FEATURE GRID ─── */
 .feat-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 16px;
     margin-top: 44px;
 }

 .feat-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 28px 24px;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
     position: relative;
     overflow: hidden;
 }

 .feat-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--dr-red), var(--dr-cyan));
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.25s ease;
 }

 .feat-card:hover {
     border-color: var(--border-2);
     box-shadow: 0 8px 32px rgba(13, 15, 20, 0.08);
     transform: translateY(-3px);
 }

 .feat-card:hover::after {
     transform: scaleX(1);
 }

 .feat-num {
     font-family: var(--mono);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     color: var(--dr-red);
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .feat-card h3 {
     font-size: 0.96rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
 }

 .feat-card p {
     font-size: 0.86rem;
     color: var(--ink-3);
     line-height: 1.7;
     font-weight: 300;
 }

 /* Unique capability highlight */
 .highlight-panel {
     background: var(--ink);
     border-radius: 14px;
     padding: 36px 40px;
     margin-top: 40px;
     display: grid;
     grid-template-columns: 1fr auto;
     gap: 40px;
     align-items: center;
 }

 .highlight-panel p {
     font-size: 1rem;
     color: rgba(255, 255, 255, 0.75);
     line-height: 1.8;
     font-weight: 300;
 }

 .highlight-stats {
     display: flex;
     flex-direction: column;
     gap: 14px;
     min-width: 160px;
 }

 .hl-stat {
     text-align: center;
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 10px;
     padding: 14px 20px;
     background: rgba(255, 255, 255, 0.04);
 }

 .hl-stat-num {
     font-family: var(--mono);
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--dr-cyan);
     line-height: 1;
     margin-bottom: 4px;
 }

 .hl-stat-label {
     font-size: 0.65rem;
     color: rgba(255, 255, 255, 0.45);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: 600;
 }

 /* ─── HOW IT WORKS ─── */
 .modules-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin-top: 44px;
 }

 .module-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 28px 24px;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
     position: relative;
     overflow: hidden;
 }

 .module-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
 }

 .module-card.sai::before {
     background: var(--dr-red);
 }

 .module-card.mapa::before {
     background: var(--dr-cyan);
 }

 .module-card.cas::before {
     background: linear-gradient(90deg, var(--dr-red), var(--dr-cyan));
 }

 .module-card:hover {
     border-color: var(--border-2);
     box-shadow: 0 8px 32px rgba(13, 15, 20, 0.08);
     transform: translateY(-3px);
 }

 .module-tag {
     font-family: var(--mono);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     margin-bottom: 6px;
 }

 .module-tag.red {
     color: var(--dr-red);
 }

 .module-tag.cyan {
     color: var(--dr-cyan);
 }

 .module-tag.gradient {
     background: linear-gradient(90deg, var(--dr-red), var(--dr-cyan));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .module-card h3 {
     font-size: 0.96rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
 }

 .module-card p {
     font-size: 0.86rem;
     color: var(--ink-3);
     line-height: 1.7;
     font-weight: 300;
 }

 .cas-note {
     background: var(--dr-red-soft);
     border: 1px solid rgba(239, 65, 54, 0.18);
     border-radius: 10px;
     padding: 20px 24px;
     margin-top: 20px;
     display: flex;
     gap: 14px;
     align-items: flex-start;
 }

 .cas-note-icon {
     font-size: 1.3rem;
     flex-shrink: 0;
 }

 .cas-note p {
     font-size: 0.85rem;
     color: var(--ink-2);
     line-height: 1.7;
     font-weight: 400;
 }

 /* ─── PHILOSOPHY ─── */
 .philosophy-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-top: 44px;
 }

 .philosophy-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 28px 24px;
 }

 .philosophy-card h3 {
     font-size: 0.96rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
 }

 .philosophy-card p {
     font-size: 0.86rem;
     color: var(--ink-3);
     line-height: 1.7;
     font-weight: 300;
 }

 .philosophy-tag {
     display: inline-block;
     font-family: var(--mono);
     font-size: 0.63rem;
     font-weight: 700;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     background: var(--dr-red-soft);
     border: 1px solid rgba(239, 65, 54, 0.18);
     color: var(--dr-red);
     border-radius: 4px;
     padding: 2px 8px;
     margin-bottom: 12px;
 }

 .verdict-band {
     background: var(--ink);
     border-radius: 14px;
     padding: 36px 40px;
     margin-top: 40px;
 }

 .verdict-quote {
     font-size: 1.1rem;
     color: rgba(255, 255, 255, 0.8);
     line-height: 1.75;
     font-style: italic;
     font-weight: 300;
     margin-bottom: 28px;
     max-width: 720px;
 }

 .verdict-quote em {
     color: var(--dr-cyan);
     font-style: normal;
     font-weight: 600;
 }

 .verdict-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     max-width: 560px;
 }

 .verdict-card {
     border-radius: 10px;
     padding: 18px 20px;
     border: 1px solid;
 }

 .verdict-card.green {
     border-color: rgba(34, 197, 94, 0.25);
     background: rgba(34, 197, 94, 0.06);
 }

 .verdict-card.red {
     border-color: rgba(239, 65, 54, 0.25);
     background: rgba(239, 65, 54, 0.06);
 }

 .verdict-label {
     font-family: var(--mono);
     font-size: 0.65rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     margin-bottom: 4px;
 }

 .verdict-card.green .verdict-label {
     color: #22c55e;
 }

 .verdict-card.red .verdict-label {
     color: var(--dr-red);
 }

 .verdict-desc {
     font-size: 0.78rem;
     color: rgba(255, 255, 255, 0.55);
     font-weight: 300;
     line-height: 1.5;
 }

 /* ─── COMPARISON TABLE ─── */
 .compare-table-wrap {
     margin-top: 44px;
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
 }

 .compare-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 0.86rem;
 }

 .compare-table thead {
     background: var(--ink);
 }

 .compare-table thead th {
     padding: 16px 20px;
     text-align: left;
     font-family: var(--mono);
     font-size: 0.68rem;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     font-weight: 600;
 }

 .compare-table thead th:first-child {
     color: rgba(255, 255, 255, 0.45);
 }

 .compare-table thead th:nth-child(2) {
     color: rgba(255, 255, 255, 0.45);
 }

 .compare-table thead th:nth-child(3) {
     color: var(--dr-cyan);
 }

 .compare-table tbody tr {
     border-bottom: 1px solid var(--border);
 }

 .compare-table tbody tr:last-child {
     border-bottom: none;
 }

 .compare-table tbody tr:nth-child(odd) {
     background: var(--white);
 }

 .compare-table tbody tr:nth-child(even) {
     background: var(--bg-subtle);
 }

 .compare-table td {
     padding: 14px 20px;
     color: var(--ink-3);
     line-height: 1.5;
     vertical-align: top;
 }

 .compare-table td:first-child {
     font-weight: 600;
     color: var(--ink-2);
     font-size: 0.82rem;
     white-space: nowrap;
 }

 .compare-table td:nth-child(3) {
     color: var(--ink-2);
     font-weight: 500;
 }

 .new-badge {
     display: inline-block;
     font-family: var(--mono);
     font-size: 0.58rem;
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     background: var(--dr-cyan);
     color: var(--white);
     border-radius: 3px;
     padding: 1px 5px;
     margin-left: 6px;
     vertical-align: middle;
 }

 /* ─── WHO IT'S FOR ─── */
 .audience-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin-top: 44px;
 }

 .audience-card {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 28px 24px;
     transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
 }

 .audience-card:hover {
     border-color: var(--border-2);
     box-shadow: 0 8px 32px rgba(13, 15, 20, 0.08);
     transform: translateY(-3px);
 }

 .audience-icon {
     font-size: 1.8rem;
     margin-bottom: 14px;
     display: block;
 }

 .audience-card h3 {
     font-size: 0.96rem;
     font-weight: 700;
     color: var(--ink);
     margin-bottom: 8px;
     letter-spacing: -0.01em;
 }

 .audience-card>p {
     font-size: 0.86rem;
     color: var(--ink-3);
     line-height: 1.65;
     font-weight: 300;
     margin-bottom: 16px;
 }

 .audience-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 7px;
 }

 .audience-list li {
     font-size: 0.8rem;
     color: var(--ink-3);
     line-height: 1.5;
     display: flex;
     gap: 8px;
     align-items: flex-start;
 }

 .audience-list li::before {
     content: '→';
     color: var(--dr-red);
     font-weight: 700;
     flex-shrink: 0;
     margin-top: 1px;
 }

 /* ─── STATS BOX ─── */
 .stats-box {
     background: var(--white);
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
 }

 .stats-box-header {
     background: var(--ink);
     padding: 16px 22px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .stats-box-title {
     font-family: var(--mono);
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: rgba(255, 255, 255, 0.5);
 }

 .stats-box-tag {
     font-family: var(--mono);
     font-size: 0.63rem;
     background: var(--dr-red);
     color: #fff;
     padding: 2px 8px;
     border-radius: 3px;
     font-weight: 600;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
 }

 .stat-cell {
     padding: 22px 20px;
     border-right: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
 }

 .stat-cell:nth-child(even) {
     border-right: none;
 }

 .stat-cell:nth-last-child(-n+2) {
     border-bottom: none;
 }

 .stat-num {
     font-size: 1.9rem;
     font-weight: 800;
     letter-spacing: -0.04em;
     color: var(--ink);
     line-height: 1;
     margin-bottom: 5px;
 }

 .stat-num .unit {
     color: var(--dr-red);
 }

 .stat-label {
     font-size: 0.75rem;
     color: var(--ink-4);
     font-weight: 500;
     line-height: 1.4;
 }

 /* ─── MISSION BAND ─── */
 .mission-band {
     background: var(--ink);
     padding: 64px 40px;
 }

 .mission-inner {
     max-width: 1240px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .mission-band h2 {
     color: var(--white);
 }

 .mission-band .section-body {
     color: rgba(255, 255, 255, 0.55);
 }

 .mission-band .eyebrow-text {
     color: var(--dr-cyan);
 }

 .mission-band .eyebrow-bar {
     background: var(--dr-cyan);
 }

 .mission-pillars {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
 }

 .mission-pillar {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.10);
     border-radius: 8px;
     padding: 14px 12px;
     text-align: center;
     transition: border-color 0.2s, background 0.2s;
 }

 .mission-pillar:hover {
     border-color: var(--dr-cyan);
     background: rgba(39, 170, 225, 0.08);
 }

 .mission-pillar-icon {
     font-size: 1.4rem;
     display: block;
     margin-bottom: 6px;
 }

 .mission-pillar-label {
     font-size: 0.75rem;
     color: rgba(255, 255, 255, 0.65);
     font-weight: 500;
     line-height: 1.3;
 }

 /* ─── CTA SECTION ─── */
 .cta-band {
     background: var(--white);
     border-top: 1px solid var(--border);
     border-bottom: 1px solid var(--border);
     padding: 80px 40px;
 }

 .cta-inner {
     max-width: 1000px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 420px;
     gap: 64px;
     align-items: start;
 }

 .cta-text h2 {
     margin-bottom: 16px;
 }

 .cta-text p {
     font-size: 0.98rem;
     color: var(--ink-3);
     line-height: 1.75;
     margin-bottom: 28px;
     font-weight: 300;
 }

 .cta-btn-row {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }

 .cta-note {
     margin-top: 18px;
     font-size: 0.78rem;
     color: var(--ink-4);
 }

 .cta-note a {
     color: var(--dr-red);
     text-decoration: none;
     font-weight: 500;
 }

 .cta-benefits {
     display: grid;
     gap: 10px;
     margin: 0 0 26px;
 }

 .cta-benefit {
     position: relative;
     padding-left: 18px;
     font-size: 0.9rem;
     color: var(--ink-2);
     line-height: 1.6;
 }

 .cta-benefit::before {
     content: '';
     position: absolute;
     left: 0;
     top: 0.65em;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--dr-red);
     transform: translateY(-50%);
 }

 .cta-alt {
    margin-top: 12px;
    font-size: 0.85rem;
    color: var(--ink-4);
}

.cta-alt a {
    color: var(--dr-red);
    font-weight: 500;
    text-decoration: none;
}

.cta-alt a:hover {
    text-decoration: underline;
}

 /* Demo form */
 .demo-form-panel {
     background: var(--bg-subtle);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 28px 24px;
     box-shadow: 0 18px 48px rgba(13, 15, 20, 0.06);
 }

 .demo-form-title {
     font-family: var(--mono);
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.10em;
     text-transform: uppercase;
     color: var(--ink-4);
     margin-bottom: 20px;
 }

 .demo-form-intro {
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--ink-3);
    margin-bottom: 18px;
}

 .form-field {
     display: flex;
     flex-direction: column;
     gap: 5px;
     margin-bottom: 12px;
 }

 .form-field label {
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--ink-3);
     letter-spacing: 0.02em;
 }

 .form-field input,
 .form-field select {
     font-family: var(--font);
     font-size: 0.88rem;
     color: var(--ink);
     background: var(--white);
     border: 1px solid var(--border-2);
     border-radius: 7px;
     padding: 10px 14px;
     outline: none;
     transition: border-color 0.15s, box-shadow 0.15s;
     appearance: none;
     -webkit-appearance: none;
 }

 .form-field input:focus,
 .form-field select:focus {
     border-color: var(--dr-red);
     box-shadow: 0 0 0 3px var(--dr-red-soft);
 }

 .form-field input::placeholder {
     color: var(--ink-4);
 }

 .form-submit {
     width: 100%;
     /* margin-top: 8px; */
     background: var(--dr-red);
     color: #fff;
     border: none;
     font-family: var(--font);
     font-size: 0.92rem;
     font-weight: 600;
     padding: 13px 20px;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.15s, transform 0.1s;
     letter-spacing: 0.01em;
 }

 .form-submit:hover {
     background: var(--dr-red-dark);
     transform: translateY(-1px);
 }

 .form-submit.is-loading {
     background: var(--ink);
     cursor: wait;
     transform: none;
 }

 .form-submit.is-success {
     background: #16a34a;
 }

 .form-submit.is-error {
     background: var(--dr-red-dark);
 }

 .form-confirm {
     margin-top: 14px;
     font-size: 0.77rem;
     color: var(--ink-4);
     line-height: 1.6;
 }

 .form-status {
    margin-top: 12px;
    font-size: 0.84rem;
    line-height: 1.5;
    min-height: 1.5em;
 }

 .form-status.is-success {
    color: #15803d;
 }

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

 .form-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
 }

 .form-field .cf-turnstile {
    align-self: center;
}

 .form-field .checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    position: relative;
}

/* Hide default checkbox but keep it interactive */
 .form-field .checkbox-wrap input {
    position: absolute;
    opacity: 0;
    width: 16px;
    height: 16px;
    margin: 0;
}

/* Custom box */
 .form-field .checkmark {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--border-2);
    border-radius: 4px;
    background: var(--white);
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.15s ease;
    position: relative;
}

/* Hover */
 .form-field .checkbox-wrap:hover .checkmark {
    border-color: var(--dr-red);
}

/* Checked state */
 .form-field .checkbox-wrap input:checked + .checkmark {
    background: var(--dr-red);
    border-color: var(--dr-red);
}

/* Check icon */
 .form-field .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

/* Show check */
 .form-field .checkbox-wrap input:checked + .checkmark::after {
    opacity: 1;
}

/* Text */
 .form-field .checkbox-text {
    font-size: 0.7rem;
    color: var(--ink-4);
    line-height: 1.5;
    font-weight: 200;
}

.form-field .checkbox-text a {
    color: var(--dr-red);
    text-decoration: none;
}

.form-field .checkbox-text a:hover {
    text-decoration: underline;
}

 .form-field .form-legal-note {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--ink-4);
}

 /* ─── FOOTER ─── */
 footer {
     background: var(--bg-subtle);
     border-top: 1px solid var(--border);
     padding: 32px 40px 24px;
 }

 .footer-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 24px;
     margin-bottom: 24px;
 }

 .footer-left {
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .footer-logo-row {
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .footer-logo {
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
 }

 .footer-logo img {
     display: block;
     height: 22px;
     flex-shrink: 0;
 }

 .footer-logo span {
     font-size: 0.95rem;
     font-weight: 700;
     letter-spacing: -0.02em;
     color: var(--ink);
 }

 .footer-logo span em {
     font-style: normal;
     color: var(--dr-red);
 }

 .footer-sep {
     color: var(--border-2);
 }

 .footer-links {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
 }

 .footer-links a {
     font-size: 0.8rem;
     color: var(--ink-4);
     text-decoration: none;
     transition: color 0.15s;
 }

 .footer-links a:hover {
     color: var(--dr-red);
 }

 .footer-legal-entity {
     font-size: 0.75rem;
     color: var(--ink-4);
     line-height: 1.6;
 }

 .footer-legal-entity strong {
     color: var(--ink-3);
     font-weight: 600;
 }

 .footer-bottom {
     border-top: 1px solid var(--border);
     padding-top: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 12px;
 }

 .footer-copy {
     font-size: 0.75rem;
     color: var(--ink-4);
 }

 .footer-bottom-links {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
 }

 .footer-bottom-links a {
     font-size: 0.74rem;
     color: var(--ink-4);
     text-decoration: none;
     transition: color 0.15s;
 }

 .footer-bottom-links a:hover {
     color: var(--dr-red);
     text-decoration: underline;
 }


 #cookie-consent-banner {
     position: fixed;
     right: 24px;
     bottom: 24px;
     width: min(520px, calc(100vw - 32px));
     /* max-width: calc(100vw - 32px);
     max-height: calc(100dvh - 32px); */
     display: none;
     flex-direction: column;
     align-items: stretch;
     box-sizing: border-box;
     padding: 24px;
     background: var(--white, #FFFFFF);
     border: 1px solid var(--border, #E2E6EF);
     border-radius: 16px;
     box-shadow:
         0 24px 64px rgba(13, 15, 20, 0.10),
         0 2px 8px rgba(13, 15, 20, 0.04);
     color: var(--ink, #0D0F14);
     font-family: var(--font);
     z-index: 40000;
     overflow: auto;
     overscroll-behavior: contain;
     -webkit-overflow-scrolling: touch;
 }

 #cookie-consent-banner::before {
     content: "";
     position: absolute;
     inset: 0 0 auto 0;
     height: 3px;
     background: linear-gradient(90deg,
             var(--arc-1, #EF4136),
             var(--arc-2, #C75658),
             var(--arc-3, #9F6B7A),
             var(--arc-4, #77809D),
             var(--arc-5, #4F95BF),
             var(--dr-cyan, #27AAE1));
 }

 #cookie-consent-banner h3,
 #cookie-consent-banner p,
 #cookie-consent-banner .cookie-consent-options,
 #cookie-consent-banner .cookie-consent-buttons {
     position: relative;
     z-index: 1;
 }

 #cookie-consent-banner h3 {
     margin: 0 0 12px;
     font-size: 1.1rem;
     line-height: 1.2;
     letter-spacing: -0.02em;
     font-weight: 700;
     color: var(--ink, #0D0F14);
     text-align: left;
 }

 #cookie-consent-banner p {
     margin: 0 0 20px;
     font-size: 0.75em;
     line-height: 1.7;
     font-weight: 300;
     color: var(--ink-3, #5A6275);
     text-align: left;
     text-wrap: pretty;
 }

 #cookie-consent-banner .cookie-consent-options {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 10px 12px;
     margin-bottom: 20px;
     padding: 16px;
     background: var(--bg-subtle, #F0F2F6);
     border: 1px solid var(--border, #E2E6EF);
     border-radius: 12px;
 }

 #cookie-consent-banner label {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     min-width: 0;
     font-size: 0.8rem;
     line-height: 1.45;
     font-weight: 500;
     color: var(--ink-2, #2C3040);
     cursor: pointer;
 }

 #cookie-consent-banner label input {
     margin: 2px 0 0;
     accent-color: var(--dr-red, #EF4136);
     inline-size: 16px;
     block-size: 16px;
     flex: 0 0 16px;
 }

 #cookie-consent-banner label input:disabled {
     cursor: not-allowed;
 }

 #cookie-consent-banner .cookie-consent-buttons {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 10px;
     margin: 0;
 }

 #cookie-consent-banner .cookie-consent-buttons button {
     appearance: none;
     border: 1px solid transparent;
     border-radius: 10px;
     min-height: 46px;
     padding: 0px 14px;
     width: 100%;
     font-family: var(--font);
     font-size: 0.84rem;
     font-weight: 600;
     letter-spacing: 0.01em;
     line-height: 1.2;
     text-align: center;
     cursor: pointer;
     transition:
         background 0.15s ease,
         color 0.15s ease,
         border-color 0.15s ease,
         transform 0.1s ease,
         box-shadow 0.15s ease;
 }

 #cookie-consent-banner .cookie-consent-buttons button:hover {
     transform: translateY(-1px);
 }

 #cookie-consent-banner .cookie-consent-buttons button:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px var(--dr-red-soft, rgba(239, 65, 54, 0.08));
 }

 /* Reject All */
 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(1) {
     background: transparent;
     color: var(--ink-2, #2C3040);
     border-color: var(--border-2, #CDD3E0);
 }

 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(1):hover {
     background: var(--bg-subtle, #F0F2F6);
     border-color: var(--border-2, #CDD3E0);
 }

 /* Accept Selection */
 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(2) {
     background: transparent;
     color: var(--dr-cyan, #27AAE1);
     border: 1.5px solid var(--dr-cyan, #27AAE1);
 }

 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(2):hover {
     background: var(--dr-cyan-soft, rgba(39, 170, 225, 0.10));
 }

 /* Accept All */
 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(3) {
     background: var(--dr-red, #EF4136);
     color: var(--white, #FFFFFF);
     border-color: var(--dr-red, #EF4136);
     box-shadow: 0 6px 24px rgba(239, 65, 54, 0.18);
 }

 #cookie-consent-banner .cookie-consent-buttons button:nth-of-type(3):hover {
     background: var(--dr-red-dark, #d4342a);
     border-color: var(--dr-red-dark, #d4342a);
     box-shadow: 0 6px 24px rgba(239, 65, 54, 0.28);
 }

 @media (max-width: 900px) {
     #cookie-consent-banner {
         right: 20px;
         left: 20px;
         bottom: 20px;
         width: auto;
         max-width: none;
         max-height: calc(100dvh - 40px);
         padding: 20px;
     }

     #cookie-consent-banner .cookie-consent-options {
         grid-template-columns: 1fr 1fr;
     }

     footer,
     .footer-top,
     .footer-bottom {
         flex-direction: column;
         align-items: flex-start;
     }

 }

 @media (max-width: 600px) {
     #cookie-consent-banner {
         left: 12px;
         right: 12px;
         bottom: 12px;
         width: auto;
         /* max-height: min(560px, calc(100dvh - 24px)); */
         padding: 16px;
         border-radius: 14px;
     }

     #cookie-consent-banner h3 {
         font-size: 0.98rem;
         margin-bottom: 10px;
         padding-right: 16px;
     }

     #cookie-consent-banner p {
         font-size: 0.82rem;
         line-height: 1.6;
         margin-bottom: 14px;
     }

     #cookie-consent-banner .cookie-consent-options {
         grid-template-columns: 1fr;
         gap: 6px;
         padding: 12px;
         margin-bottom: 14px;
     }

     #cookie-consent-banner label {
         font-size: 0.76rem;
         line-height: 1.4;
         padding: 6px 0;
     }

     #cookie-consent-banner .cookie-consent-buttons {
         grid-template-columns: 1fr;
         gap: 8px;
         position: sticky;
         bottom: 0;
         padding-top: 8px;
         background: linear-gradient(180deg,
                 rgba(255, 255, 255, 0) 0%,
                 rgba(255, 255, 255, 0.94) 20%,
                 rgba(255, 255, 255, 1) 100%);
     }

     #cookie-consent-banner .cookie-consent-buttons button {
         min-height: 44px;
         font-size: 0.82rem;
         padding: 12px;
     }


     .logo-divider,
     .trust-sep,
     .footer-sep {
         display: none;
     }

     .hero-inner,
     .section,
     .mission-band,
     .cta-band,
     footer {
         padding-left: 16px;
         padding-right: 16px;
     }

     .footer-links {
         gap: 12px;
     }

     .footer-copy {
         line-height: 1.5;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 10px;
     }

     .footer-bottom-links {
         gap: 12px;
     }
 }

 @media (max-width: 380px) {
     #cookie-consent-banner {
         left: 10px;
         right: 10px;
         bottom: 10px;
         padding: 14px;
         /* max-height: calc(100dvh - 20px); */
     }

     #cookie-consent-banner h3 {
         font-size: 0.92rem;
     }

     #cookie-consent-banner p {
         font-size: 0.78rem;
     }

     #cookie-consent-banner label {
         font-size: 0.72rem;
     }
 }

 @media (max-width: 1024px) {
     .hero-inner {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .score-panel {
         max-width: 560px;
         margin: 0 auto;
     }

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

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

     .cta-inner {
         grid-template-columns: 1fr;
         gap: 40px;
     }
 }

 @media (max-width: 900px) {
     .topnav {
         height: auto;
         min-height: 64px;
         padding: 10px 20px;
         align-items: center;
         flex-wrap: wrap;
     }

     .topnav-left {
         width: auto;
         flex: 1;
         min-width: 0;
         gap: 14px;
         flex-wrap: wrap;
     }

     .nav-toggle {
         display: inline-flex;
     }

     .topnav-right {
         display: none;
         width: 100%;
         flex-direction: column;
         align-items: stretch;
         gap: 8px;
         /* border-top: 1px solid var(--border); */
     }

     .topnav.is-open .topnav-right {
         display: flex;
     }

     .nav-btn-ghost,
     .nav-btn-primary {
         width: 100%;
         text-align: center;
         justify-content: center;
         padding-left: 12px;
         padding-right: 12px;
     }

     .problem-grid,
     .feat-grid,
     .modules-grid,
     .audience-grid,
     .mission-inner,
     .highlight-panel {
         grid-template-columns: 1fr;
     }

     .mission-inner {
         gap: 40px;
     }

     .highlight-stats {
         flex-direction: row;
         flex-wrap: wrap;
     }

     .verdict-cards {
         grid-template-columns: 1fr;
     }

     .compare-table-wrap {
         overflow-x: auto;
         -webkit-overflow-scrolling: touch;
     }

     .compare-table {
         min-width: 760px;
     }

     .hero-inner,
     .section {
         padding-left: 20px;
         padding-right: 20px;
     }

     .cta-band {
         padding: 56px 20px;
     }

     .mission-band {
         padding: 48px 20px;
     }

     footer,
     .footer-left,
     .footer-links {
         flex-direction: column;
         align-items: flex-start;
     }
 }

 @media (max-width: 600px) {
     .redir-bar {
         padding: 10px 16px;
         justify-content: flex-start;
     }

     .logo-divider,
     .trust-sep,
     .footer-sep {
         display: none;
     }

     .topnav {
         padding: 10px 16px;
     }

     .topnav-left {
         gap: 10px;
     }



     .hero-inner,
     .section,
     .mission-band,
     .cta-band,
     footer {
         padding-left: 16px;
         padding-right: 16px;
     }

     .hero-inner {
         padding-top: 56px;
         padding-bottom: 56px;
     }

     .hero-desc,
     .section-body,
     .cta-text p {
         max-width: 100%;
     }

     .hero-cta-row,
     .cta-btn-row {
         flex-direction: column;
         align-items: stretch;
     }

     .btn-red,
     .btn-outline-cyan {
         width: 100%;
         justify-content: center;
     }

     .hero-trust {
         gap: 10px;
     }

     .trust-item {
         width: 100%;
     }

     .score-panel,
     .demo-form-panel,
     .highlight-panel,
     .verdict-band {
         padding: 22px 18px;
     }

     .sp-header,
     .sp-score-row,
     .sp-signal {
         gap: 8px;
     }

     .sp-header,
     .sp-score-row {
         flex-wrap: wrap;
     }

     .sp-metrics,
     .mission-pillars,
     .stats-grid {
         grid-template-columns: 1fr;
     }

     .stat-cell,
     .stat-cell:nth-child(even) {
         border-right: none;
     }

     .stat-cell:not(:last-child) {
         border-bottom: 1px solid var(--border);
     }

     .sp-signal {
         flex-wrap: wrap;
     }

     .sig-bar-wrap {
         width: 100%;
         margin: 4px 0 0;
     }

     .sp-signal-pct {
         min-width: auto;
     }

     .gauge-labels {
         font-size: 0.54rem;
         gap: 8px;
     }

     .highlight-stats {
         flex-direction: column;
     }

     .compare-table {
         min-width: 640px;
     }

     .footer-links {
         gap: 12px;
     }

     .footer-copy {
         line-height: 1.5;
     }
 }