/* ============================================================
   VinReliability Landing Page — Stylesheet
   ============================================================ */

/* ── CSS Custom Properties ──────────────────────────────── */
:root {
    --base-primary: #FFFFFF;
    --base-secondary: #F8FAFC;
    --base-tertiary: #E2E8F0;

    --dark-primary: #334155;
    --dark-light: #475569;
    --dark-secondary: #1E293B;
    --dark-deepest: #0F172A;

    --accent-primary: #6366F1;
    --accent-primary-hover: #4F46E5;
    --accent-success: #10B981;
    --accent-warning: #F59E0B;
    --accent-danger: #EF4444;
    --accent-info: #06B6D4;
    --lemon-green: #BFFF00;

    --text-primary: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --text-light: #F8FAFC;

    --font-primary: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    --container-max: 1200px;
    --card-radius: 16px;
    --btn-radius: 10px;
    --section-padding: 100px 0;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--base-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* ── Container ──────────────────────────────────────────── */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: var(--btn-radius);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--transition);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent-primary);
    color: #fff;
    border-color: var(--accent-primary);
}
.btn-primary:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}
.btn-secondary:hover {
    border-color: #fff;
    background: rgba(255,255,255,0.08);
    transform: translateY(-2px);
}

.btn-lg {
    padding: 18px 40px;
    font-size: 18px;
}

.btn-sm {
    padding: 10px 22px;
    font-size: 14px;
}

.btn-white {
    background: #fff;
    color: var(--dark-deepest);
    border-color: #fff;
}
.btn-white:hover {
    background: var(--base-secondary);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ── Section Utilities ──────────────────────────────────── */
.section {
    padding: var(--section-padding);
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-header h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.section-header p {
    font-size: 18px;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.section-dark {
    background: var(--dark-deepest);
    color: var(--text-light);
}

.section-dark .section-header p {
    color: var(--text-muted);
}

.section-light {
    background: var(--base-secondary);
}

/* ── Animations ─────────────────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.4s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.5s; }

/* ============================================================
   1. NAVIGATION
   ============================================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: var(--transition);
}

.navbar.scrolled {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    padding: 0 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0;
}

.logo svg {
    height: 54px;
    width: auto;
}

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

.nav-links a {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

.nav-links a:hover {
    color: #fff;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: var(--transition);
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
    opacity: 0;
}
.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================================
   2. HERO
   ============================================================ */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--dark-deepest) 0%, var(--dark-secondary) 100%);
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 40px;
}

/* Subtle grid pattern overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(99, 102, 241, 0.08) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
}

/* Gradient orb decoration */
.hero::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.hero .container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 0 40px;
}

.hero-content {
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(16, 185, 129, 0.08);
    color: var(--accent-success);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 0;
}

.hero-badge svg {
    width: 16px;
    height: 16px;
}

.hero h1 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 0;
    white-space: nowrap;
    background: linear-gradient(135deg, #fff 0%, #CBD5E1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    margin-bottom: 0;
    flex-basis: 100%;
}

.hero-cta {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: nowrap;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 12px 20px;
    color: var(--text-muted);
    font-size: 12px;
    flex-wrap: wrap;
}

.hero-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hero-trust svg {
    width: 14px;
    height: 14px;
    color: var(--accent-success);
}

.hero-image {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    width: 100%;
}

.hero-screenshot {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(99, 102, 241, 0.15);
    transform: perspective(1000px) rotateY(-5deg);
    transition: transform 0.5s ease;
}

.hero-screenshot:hover {
    transform: perspective(1000px) rotateY(0deg);
}

/* ── Animated App Mockup ───────────────────────────────── */
.app-mockup {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #0C1222;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 80px rgba(99, 102, 241, 0.12);
    transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
    transition: transform 0.6s ease;
}

.app-mockup:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

/* Mirror perspective for Box-Cox mockup (was Weibull) */
.app-mockup.boxcox-mockup {
    transform: perspective(1200px) rotateY(3deg) rotateX(1deg);
}

.app-mockup.boxcox-mockup:hover {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.mockup-titlebar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mockup-dots {
    display: flex;
    gap: 6px;
}

.mockup-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mockup-title {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-primary);
}

.mockup-body {
    display: flex;
    min-height: 380px;
}

.mockup-sidebar {
    width: 80px;
    background: linear-gradient(180deg, #141C2E 0%, #1A2438 100%);
    border-right: 1px solid rgba(255,255,255,0.05);
    padding: 12px 0;
    flex-shrink: 0;
}

.mock-nav-item {
    padding: 7px 10px;
    font-size: 9px;
    color: var(--text-muted);
    cursor: default;
    border-left: 2px solid transparent;
    transition: all 0.2s;
}

.mock-nav-item.active {
    color: #BFFF00;
    background: rgba(191, 255, 0, 0.05);
    border-left-color: #BFFF00;
    font-weight: 600;
}

.mockup-main {
    flex: 1;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.mockup-chart-area {
    flex: 1;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 10px;
}

.chart-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.capability-svg {
    width: 100%;
    height: auto;
}

/* ── ANIMATION MASTER TIMING ─────────────────────────────
   Total cycle: 10s animation + 2s pause = 12s loop
   Phase 1 (0-1.5s):   Spec lines + zones appear
   Phase 2 (0.5-3s):   Histogram bars grow up
   Phase 3 (2.5-4.5s): Bell curve draws
   Phase 4 (3-5s):     Mean arrow appears
   Phase 5 (4-6.5s):   Stats count up
   Phase 6 (5.5-8s):   Interpretation types in
   Phase 7 (8-10s):    Hold for reading
   Phase 8 (10-12s):   Everything fades, then restarts
   ──────────────────────────────────────────────────────── */

/* Spec lines (LSL/USL) + out-of-spec zones */
.spec-line, .spec-label {
    animation: fadeInOut 12s ease infinite;
}

.oos-zone {
    animation: fadeInOut 12s ease infinite;
}

@keyframes fadeInOut {
    0%      { opacity: 0; }
    3%      { opacity: 0; }
    8%      { opacity: 1; }
    80%     { opacity: 1; }
    90%     { opacity: 0; }
    100%    { opacity: 0; }
}

/* Histogram bars — grow up from baseline using scaleY transform */
.hbar {
    transform-origin: center bottom;
    transform-box: fill-box;
    animation: barGrow 12s ease infinite;
}

/* Stagger the bars from edges to center for visual effect */
.hb1  { animation-delay: 0.0s; }
.hb2  { animation-delay: 0.08s; }
.hb3  { animation-delay: 0.16s; }
.hb4  { animation-delay: 0.24s; }
.hb5  { animation-delay: 0.32s; }
.hb6  { animation-delay: 0.40s; }
.hb7  { animation-delay: 0.32s; }
.hb8  { animation-delay: 0.24s; }
.hb9  { animation-delay: 0.16s; }
.hb10 { animation-delay: 0.08s; }
.hb11 { animation-delay: 0.0s; }

@keyframes barGrow {
    0%, 4%   { transform: scaleY(0); opacity: 0; }
    6%       { opacity: 1; }
    18%      { transform: scaleY(1.08); }
    22%      { transform: scaleY(1); }
    78%      { transform: scaleY(1); opacity: 1; }
    88%, 100% { transform: scaleY(0); opacity: 0; }
}

/* Bell curve draws itself */
.bell-curve {
    stroke-dasharray: 700;
    stroke-dashoffset: 700;
    animation: drawBell 12s ease infinite;
}

@keyframes drawBell {
    0%, 18%  { stroke-dashoffset: 700; opacity: 0; }
    20%      { opacity: 1; }
    38%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 700; opacity: 0; }
}

/* Mean indicator */
.mean-indicator {
    animation: fadeInOut 12s ease infinite;
    animation-delay: 0.5s;
}

/* ── Stats Panel ───────────────────────────────────────── */
.mockup-bottom-panels {
    display: flex;
    gap: 10px;
}

.mockup-stats-panel {
    flex: 0 0 140px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
}

.stats-header {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label {
    font-size: 9px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    font-family: var(--font-mono);
}

.stat-good {
    color: #10B981;
}

/* Stats counter animation */
.stat-anim {
    animation: statReveal 12s ease infinite;
}

.s1 { animation-delay: 0.0s; }
.s2 { animation-delay: 0.15s; }
.s3 { animation-delay: 0.3s; }
.s4 { animation-delay: 0.45s; }
.s5 { animation-delay: 0.6s; }
.s6 { animation-delay: 0.75s; }

@keyframes statReveal {
    0%, 30%  { opacity: 0; transform: translateY(4px); }
    38%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; transform: translateY(0); }
    90%      { opacity: 0; transform: translateY(-4px); }
    100%     { opacity: 0; }
}

/* Interpretation panel */
.mockup-interpretation {
    flex: 1;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 8px;
    padding: 8px 12px;
}

.interp-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    font-weight: 700;
    color: #10B981;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.interp-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.typing-line {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.5;
    opacity: 0;
    animation: typeInLoop 12s ease infinite;
    white-space: nowrap;
    overflow: hidden;
}

.typing-line em {
    color: #F59E0B;
    font-style: normal;
    font-weight: 600;
}

.line1 { animation-delay: 0s; }
.line2 { animation-delay: 0.4s; }
.line3 { animation-delay: 0.8s; }
.line4 { animation-delay: 1.2s; }

@keyframes typeInLoop {
    0%, 42% { opacity: 0; max-width: 0; }
    46%     { opacity: 1; max-width: 0; }
    56%     { opacity: 1; max-width: 600px; }
    80%     { opacity: 1; max-width: 600px; }
    90%     { opacity: 0; max-width: 600px; }
    100%    { opacity: 0; max-width: 0; }
}

/* ============================================================
   WEIBULL MOCKUP: Layout + Animations
   ============================================================ */

/* Two charts side by side inside Weibull mockup */
.weibull-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    flex: 1;
}

.weibull-chart-panel {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 6px;
}

.weibull-svg, .bathtub-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Weibull stats panel sizing override */
.weibull-stats-panel {
    flex: 0 0 120px !important;
}

/* ── Weibull Data Points ── */
.wdp {
    opacity: 0;
    animation: weibullPopIn 12s ease infinite;
}
.wdp1 { animation-delay: 0.0s; }
.wdp2 { animation-delay: 0.2s; }
.wdp3 { animation-delay: 0.4s; }
.wdp4 { animation-delay: 0.6s; }
.wdp5 { animation-delay: 0.8s; }
.wdp6 { animation-delay: 1.0s; }
.wdp7 { animation-delay: 1.2s; }
.wdp8 { animation-delay: 1.4s; }
.wdp9 { animation-delay: 1.6s; }

@keyframes weibullPopIn {
    0%, 4%   { opacity: 0; }
    10%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ── Weibull Regression Line ── */
.weibull-regline {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: weibullDrawLine 12s ease infinite;
}

@keyframes weibullDrawLine {
    0%, 15%  { stroke-dashoffset: 400; opacity: 0; }
    18%      { opacity: 1; }
    35%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 400; opacity: 0; }
}

/* ── Eta marker ── */
.weibull-eta-line, .weibull-eta-label {
    animation: fadeInOut 12s ease infinite;
    animation-delay: 1s;
}

/* ── Bathtub Curve ── */
.bathtub-curve {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: bathtubDraw 12s ease infinite;
}

@keyframes bathtubDraw {
    0%, 8%   { stroke-dashoffset: 500; opacity: 0; }
    10%      { opacity: 1; }
    32%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 500; opacity: 0; }
}

/* ── Bathtub Regions + Labels ── */
.bathtub-region {
    animation: fadeInOut 12s ease infinite;
}

.bathtub-labels, .bathtub-divider {
    animation: fadeInOut 12s ease infinite;
    animation-delay: 0.3s;
}

/* ── Bathtub Current Indicator ── */
.bathtub-indicator {
    opacity: 0;
    animation: bathtubIndicatorPulse 12s ease infinite;
}

@keyframes bathtubIndicatorPulse {
    0%, 28%  { opacity: 0; }
    35%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ── Weibull Stats Delay Classes ── */
.ws1 { animation-delay: 0.0s; }
.ws2 { animation-delay: 0.15s; }
.ws3 { animation-delay: 0.3s; }
.ws4 { animation-delay: 0.45s; }
.ws5 { animation-delay: 0.6s; }
.ws6 { animation-delay: 0.75s; }

/* ── Weibull Interpretation Delay Classes ── */
.wline1 { animation-delay: 0s; }
.wline2 { animation-delay: 0.4s; }
.wline3 { animation-delay: 0.8s; }
.wline4 { animation-delay: 1.2s; }

/* ============================================================
   SPC CONTROL CHART ANIMATION (12s loop)
   ============================================================ */
.spc-svg { width: 100%; height: auto; display: block; padding: 8px; }

.spc-limit { opacity: 0; animation: spcFadeIn 12s ease infinite; }
@keyframes spcFadeIn {
    0%, 3%   { opacity: 0; }
    8%       { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.spc-line {
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: spcDrawLine 12s ease infinite;
}
@keyframes spcDrawLine {
    0%, 5%   { stroke-dashoffset: 800; opacity: 0; }
    8%       { opacity: 1; }
    35%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 800; opacity: 0; }
}

.spc-dot { opacity: 0; animation: spcPopDot 12s ease infinite; }
.spc-d1  { animation-delay: 0.0s; }
.spc-d2  { animation-delay: 0.15s; }
.spc-d3  { animation-delay: 0.3s; }
.spc-d4  { animation-delay: 0.45s; }
.spc-d5  { animation-delay: 0.6s; }
.spc-d6  { animation-delay: 0.75s; }
.spc-d7  { animation-delay: 0.9s; }
.spc-d8  { animation-delay: 1.05s; }
.spc-d9  { animation-delay: 1.2s; }
.spc-d10 { animation-delay: 1.35s; }
.spc-d11 { animation-delay: 1.5s; }
.spc-d12 { animation-delay: 1.65s; }

@keyframes spcPopDot {
    0%, 10%  { opacity: 0; }
    18%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.spc-ooc { animation: spcOocPulse 12s ease infinite; animation-delay: 1.05s; }
@keyframes spcOocPulse {
    0%, 10%  { opacity: 0; }
    18%      { opacity: 1; }
    50%, 55% { opacity: 0.6; }
    58%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.spc-violation { opacity: 0; animation: spcViolation 12s ease infinite; }
@keyframes spcViolation {
    0%, 35%  { opacity: 0; transform: translateY(4px); }
    42%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.spc-stats-box { opacity: 0; animation: spcStatsBox 12s ease infinite; }
@keyframes spcStatsBox {
    0%, 40%  { opacity: 0; }
    48%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.spc-interp-line { opacity: 0; animation: spcInterpFade 12s ease infinite; }
.sil1 { animation-delay: 0.0s; }
.sil2 { animation-delay: 0.3s; }
.sil3 { animation-delay: 0.6s; }
@keyframes spcInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   HYPOTHESIS TESTING / ANOVA ANIMATION (12s loop)
   ============================================================ */
.hyp-svg { width: 100%; height: auto; display: block; padding: 8px; }

.hyp-box { opacity: 0; animation: hypBoxIn 12s ease infinite; }
.hyp-box-a { animation-delay: 0.0s; }
.hyp-box-b { animation-delay: 0.5s; }
.hyp-box-c { animation-delay: 1.0s; }
@keyframes hypBoxIn {
    0%, 5%   { opacity: 0; }
    15%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.hyp-means { opacity: 0; animation: hypMeans 12s ease infinite; }
@keyframes hypMeans {
    0%, 28%  { opacity: 0; }
    35%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.hyp-sig { opacity: 0; animation: hypSig 12s ease infinite; }
@keyframes hypSig {
    0%, 38%  { opacity: 0; transform: translateY(6px); }
    45%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.hyp-anova-box { opacity: 0; animation: hypAnovaBox 12s ease infinite; }
@keyframes hypAnovaBox {
    0%, 42%  { opacity: 0; }
    50%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.hyp-interp-line { opacity: 0; animation: hypInterpFade 12s ease infinite; }
.hil1 { animation-delay: 0.0s; }
.hil2 { animation-delay: 0.3s; }
.hil3 { animation-delay: 0.6s; }
@keyframes hypInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   REGRESSION ANIMATION (12s loop)
   ============================================================ */
.reg-svg { width: 100%; height: auto; display: block; padding: 8px; }

/* Scatter dots fade in sequentially */
.reg-dot { opacity: 0; animation: regPopDot 12s ease infinite; }
.reg-d1  { animation-delay: 0.0s; }
.reg-d2  { animation-delay: 0.1s; }
.reg-d3  { animation-delay: 0.2s; }
.reg-d4  { animation-delay: 0.3s; }
.reg-d5  { animation-delay: 0.4s; }
.reg-d6  { animation-delay: 0.5s; }
.reg-d7  { animation-delay: 0.6s; }
.reg-d8  { animation-delay: 0.7s; }
.reg-d9  { animation-delay: 0.8s; }
.reg-d10 { animation-delay: 0.9s; }
.reg-d11 { animation-delay: 1.0s; }
.reg-d12 { animation-delay: 1.1s; }
.reg-d13 { animation-delay: 1.2s; }
.reg-d14 { animation-delay: 1.3s; }
@keyframes regPopDot {
    0%, 3%   { opacity: 0; }
    10%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Partial regression curve draws in */
.reg-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: regDrawLine 12s ease infinite;
}
@keyframes regDrawLine {
    0%, 18%  { stroke-dashoffset: 400; opacity: 0; }
    20%      { opacity: 1; }
    38%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 400; opacity: 0; }
}

/* CI band fades in */
.reg-band, .reg-ci-band { opacity: 0; animation: regBandExpand 12s ease infinite; }
.reg-ci-band { animation-delay: 0.3s; }
@keyframes regBandExpand {
    0%, 35%  { opacity: 0; }
    45%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Coefficient bars grow in place from the zero line via scaleX */
.reg-bar { transform-box: fill-box; transform-origin: left center; animation: regBarGrow 12s ease infinite; }
.reg-b1 { animation-delay: 0.0s; }
.reg-b2 { animation-delay: 0.2s; }
.reg-b3 { animation-delay: 0.4s; }
.reg-b4 { animation-delay: 0.6s; transform-origin: right center; }
.reg-b5 { animation-delay: 0.8s; }
@keyframes regBarGrow {
    0%, 22%  { transform: scaleX(0); }
    35%      { transform: scaleX(1); }
    80%      { transform: scaleX(1); }
    90%      { transform: scaleX(0); }
    100%     { transform: scaleX(0); }
}

/* Coefficient value labels fade in after bars */
.reg-bval { opacity: 0; animation: regBvalFade 12s ease infinite; }
.reg-bv1 { animation-delay: 0.2s; }
.reg-bv2 { animation-delay: 0.4s; }
.reg-bv3 { animation-delay: 0.6s; }
.reg-bv4 { animation-delay: 0.8s; }
.reg-bv5 { animation-delay: 1.0s; }
@keyframes regBvalFade {
    0%, 33%  { opacity: 0; }
    40%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Model stats annotation */
.reg-annotation { opacity: 0; animation: regAnnotate 12s ease infinite; }
@keyframes regAnnotate {
    0%, 45%  { opacity: 0; transform: translateY(4px); }
    52%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Interpretation bar */
.reg-interp-line { opacity: 0; animation: regInterpFade 12s ease infinite; }
.ril1 { animation-delay: 0.0s; }
.ril2 { animation-delay: 0.3s; }
.ril3 { animation-delay: 0.6s; }
@keyframes regInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   RELIABILITY / KAPLAN-MEIER ANIMATION (12s loop)
   ============================================================ */
.rel-svg { width: 100%; height: auto; display: block; padding: 8px; }

.rel-curve {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: relDrawCurve 12s ease infinite;
}
@keyframes relDrawCurve {
    0%, 5%   { stroke-dashoffset: 1000; opacity: 0; }
    8%       { opacity: 1; }
    35%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 1000; opacity: 0; }
}

.rel-band { opacity: 0; animation: relBandIn 12s ease infinite; }
@keyframes relBandIn {
    0%, 30%  { opacity: 0; }
    40%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.rel-cen { opacity: 0; animation: relCensorIn 12s ease infinite; }
.rel-c1 { animation-delay: 0.2s; }
.rel-c2 { animation-delay: 0.5s; }
.rel-c3 { animation-delay: 0.8s; }
.rel-c4 { animation-delay: 1.1s; }
.rel-c5 { animation-delay: 1.4s; }
@keyframes relCensorIn {
    0%, 15%  { opacity: 0; }
    22%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.rel-median { opacity: 0; animation: relMedian 12s ease infinite; }
@keyframes relMedian {
    0%, 40%  { opacity: 0; }
    48%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.rel-interp-line { opacity: 0; animation: relInterpFade 12s ease infinite; }
.ril-r1 { animation-delay: 0.0s; }
.ril-r2 { animation-delay: 0.3s; }
.ril-r3 { animation-delay: 0.6s; }
@keyframes relInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   GLM / ANOVA ANIMATION (12s loop)
   ============================================================ */
.glm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
}

.glm-mini-chart { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 8px; }
.glm-mini-title {
    font-size: 10px; color: #94A3B8; text-align: center;
    margin-bottom: 4px; font-family: 'Segoe UI', sans-serif; font-weight: 600;
}
.glm-svg { width: 100%; height: auto; display: block; }

.glm-bar { opacity: 0; transform-origin: bottom; animation: glmBarGrow 12s ease infinite; }
.glm-b1 { animation-delay: 0.0s; }
.glm-b2 { animation-delay: 0.3s; }
.glm-b3 { animation-delay: 0.6s; }
.glm-b4 { animation-delay: 0.9s; }
@keyframes glmBarGrow {
    0%, 5%   { opacity: 0; transform: scaleY(0); }
    20%      { opacity: 1; transform: scaleY(1); }
    80%      { opacity: 1; transform: scaleY(1); }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.glm-ci { opacity: 0; animation: glmCIFade 12s ease infinite; }
.glm-ci1 { animation-delay: 0.2s; }
.glm-ci2 { animation-delay: 0.5s; }
.glm-ci3 { animation-delay: 0.8s; }
.glm-ci4 { animation-delay: 1.1s; }
@keyframes glmCIFade {
    0%, 18%  { opacity: 0; }
    28%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.glm-sig-bracket { opacity: 0; animation: glmSigBracket 12s ease infinite; }
@keyframes glmSigBracket {
    0%, 35%  { opacity: 0; transform: translateY(4px); }
    45%      { opacity: 1; transform: translateY(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ANOVA table styling */
.glm-anova-table {
    padding: 6px;
}
.glm-anova-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
    font-family: 'Segoe UI', sans-serif;
}
.glm-anova-table thead th {
    color: #94A3B8;
    font-weight: 600;
    text-align: left;
    padding: 3px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 8px;
}
.glm-anova-table tbody td {
    color: #CBD5E1;
    padding: 3px 5px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.glm-sig-val { color: #BFFF00; font-weight: 600; }

.glm-row { opacity: 0; animation: glmRowFade 12s ease infinite; }
.glm-r1 { animation-delay: 0.0s; }
.glm-r2 { animation-delay: 0.3s; }
.glm-r3 { animation-delay: 0.6s; }
.glm-r4 { animation-delay: 0.9s; }
@keyframes glmRowFade {
    0%, 10%  { opacity: 0; }
    20%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.glm-model-fit {
    display: flex;
    gap: 16px;
    margin-top: 6px;
    padding: 4px 5px;
    background: rgba(191,255,0,0.06);
    border-radius: 4px;
    font-size: 8.5px;
    color: #BFFF00;
    font-weight: 600;
    font-family: 'Segoe UI', sans-serif;
    opacity: 0;
    animation: glmModelFit 12s ease infinite;
}
@keyframes glmModelFit {
    0%, 45%  { opacity: 0; }
    55%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.glm-interp-line { opacity: 0; animation: glmInterpFade 12s ease infinite; }
.gli1 { animation-delay: 0.0s; }
.gli2 { animation-delay: 0.3s; }
.gli3 { animation-delay: 0.6s; }
@keyframes glmInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   WEIBULL FEATURE SECTION ANIMATION (12s loop)
   ============================================================ */
.weibull-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
}
.weibull-feat-chart { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 6px; }
.wfeat-svg { width: 100%; height: auto; display: block; }

.wfeat-line { stroke-dasharray: 320; stroke-dashoffset: 320; animation: wfeatDraw 12s ease infinite; }
@keyframes wfeatDraw {
    0%, 5%   { stroke-dashoffset: 320; }
    35%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; }
    90%      { stroke-dashoffset: 320; }
    100%     { stroke-dashoffset: 320; }
}

.wfeat-band { opacity: 0; animation: wfeatBand 12s ease infinite; }
@keyframes wfeatBand {
    0%, 30%  { opacity: 0; }
    40%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.wfeat-dot { opacity: 0; animation: wfeatDotPop 12s ease infinite; }
.wfd1 { animation-delay: 0.0s; }
.wfd2 { animation-delay: 0.15s; }
.wfd3 { animation-delay: 0.3s; }
.wfd4 { animation-delay: 0.45s; }
.wfd5 { animation-delay: 0.6s; }
.wfd6 { animation-delay: 0.75s; }
.wfd7 { animation-delay: 0.9s; }
.wfd8 { animation-delay: 1.05s; }
.wfd9 { animation-delay: 1.2s; }
@keyframes wfeatDotPop {
    0%, 5%   { opacity: 0; transform: scale(0); }
    15%      { opacity: 1; transform: scale(1.3); }
    20%      { transform: scale(1); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.wfeat-eta { opacity: 0; animation: wfeatEta 12s ease infinite; }
@keyframes wfeatEta {
    0%, 35%  { opacity: 0; }
    45%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.wfeat-bathtub { stroke-dasharray: 400; stroke-dashoffset: 400; animation: wfeatBathtubDraw 12s ease infinite; }
@keyframes wfeatBathtubDraw {
    0%, 5%   { stroke-dashoffset: 400; }
    40%      { stroke-dashoffset: 0; }
    80%      { stroke-dashoffset: 0; }
    90%      { stroke-dashoffset: 400; }
    100%     { stroke-dashoffset: 400; }
}

.wfeat-region { opacity: 0; animation: wfeatRegion 12s ease infinite; }
@keyframes wfeatRegion {
    0%, 15%  { opacity: 0; }
    25%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.wfeat-indicator { opacity: 0; animation: wfeatIndicator 12s ease infinite; }
@keyframes wfeatIndicator {
    0%, 40%  { opacity: 0; }
    50%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.wfeat-interp-line { opacity: 0; animation: wfeatInterpFade 12s ease infinite; }
.wfi1 { animation-delay: 0.0s; }
.wfi2 { animation-delay: 0.3s; }
.wfi3 { animation-delay: 0.6s; }
@keyframes wfeatInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   SYSTEM RELIABILITY ANIMATION (12s loop)
   ============================================================ */
.sysrel-svg { width: 100%; height: auto; display: block; padding: 8px; }

.sysrel-pump { opacity: 0; animation: sysrelPumpIn 12s ease infinite; }
.sysrel-p1 { animation-delay: 0.0s; }
.sysrel-p2 { animation-delay: 0.3s; }
.sysrel-p3 { animation-delay: 0.6s; }
.sysrel-p4 { animation-delay: 0.9s; }
.sysrel-p5 { animation-delay: 1.2s; }
@keyframes sysrelPumpIn {
    0%, 5%   { opacity: 0; transform: translateX(-8px); }
    18%      { opacity: 1; transform: translateX(0); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.sysrel-flow { opacity: 0; animation: sysrelFlow 12s ease infinite; }
@keyframes sysrelFlow {
    0%, 2%   { opacity: 0; }
    10%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.sysrel-fanlines { opacity: 0; animation: sysrelFanlines 12s ease infinite; }
@keyframes sysrelFanlines {
    0%, 8%   { opacity: 0; }
    18%      { opacity: 0.6; }
    80%      { opacity: 0.6; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.sysrel-kofn { opacity: 0; animation: sysrelKofn 12s ease infinite; }
@keyframes sysrelKofn {
    0%, 30%  { opacity: 0; transform: scale(0.9); }
    40%      { opacity: 1; transform: scale(1); }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.sysrel-badge { opacity: 0; animation: sysrelBadge 12s ease infinite; }
@keyframes sysrelBadge {
    0%, 42%  { opacity: 0; }
    52%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

.sysrel-interp-line { opacity: 0; animation: sysrelInterpFade 12s ease infinite; }
.sri1 { animation-delay: 0.0s; }
.sri2 { animation-delay: 0.3s; }
.sri3 { animation-delay: 0.6s; }
@keyframes sysrelInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    80%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   BOX-COX HERO MOCKUP ANIMATION
   ============================================================ */
.boxcox-mockup .mockup-main { padding: 8px; }
.boxcox-charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}
.boxcox-chart-panel { background: rgba(255,255,255,0.02); border-radius: 6px; padding: 6px; }
.boxcox-svg { width: 100%; height: auto; display: block; }

.bcbar { opacity: 0; transform-origin: bottom; animation: bcBarGrow 10s ease infinite; }
.bcb1 { animation-delay: 0.0s; }
.bcb2 { animation-delay: 0.1s; }
.bcb3 { animation-delay: 0.2s; }
.bcb4 { animation-delay: 0.3s; }
.bcb5 { animation-delay: 0.4s; }
.bcb6 { animation-delay: 0.5s; }
.bcb7 { animation-delay: 0.6s; }
.bcbn1 { animation-delay: 0.0s; }
.bcbn2 { animation-delay: 0.1s; }
.bcbn3 { animation-delay: 0.2s; }
.bcbn4 { animation-delay: 0.3s; }
.bcbn5 { animation-delay: 0.4s; }
.bcbn6 { animation-delay: 0.5s; }
.bcbn7 { animation-delay: 0.6s; }
@keyframes bcBarGrow {
    0%, 5%   { opacity: 0; transform: scaleY(0); }
    20%      { opacity: 1; transform: scaleY(1); }
    78%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

.boxcox-curve-before, .boxcox-curve-after {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    animation: bcCurveDraw 10s ease infinite;
}
@keyframes bcCurveDraw {
    0%, 15%  { stroke-dashoffset: 300; }
    40%      { stroke-dashoffset: 0; }
    78%      { stroke-dashoffset: 0; }
    88%      { stroke-dashoffset: 300; }
    100%     { stroke-dashoffset: 300; }
}

.bc-badge { opacity: 0; animation: bcBadgeFade 10s ease infinite; }
@keyframes bcBadgeFade {
    0%, 35%  { opacity: 0; }
    45%      { opacity: 1; }
    78%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

.boxcox-stats-panel .stat-anim { opacity: 0; animation: bcStatPop 10s ease infinite; }
.bc1 { animation-delay: 0.0s; }
.bc2 { animation-delay: 0.15s; }
.bc3 { animation-delay: 0.3s; }
.bc4 { animation-delay: 0.45s; }
.bc5 { animation-delay: 0.6s; }
.bc6 { animation-delay: 0.75s; }
@keyframes bcStatPop {
    0%, 20%  { opacity: 0; transform: translateY(4px); }
    30%      { opacity: 1; transform: translateY(0); }
    78%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

.boxcox-interpretation .typing-line { opacity: 0; animation: bcTypeLine 10s ease infinite; }
.bcline1 { animation-delay: 0.0s; }
.bcline2 { animation-delay: 0.4s; }
.bcline3 { animation-delay: 0.8s; }
.bcline4 { animation-delay: 1.2s; }
@keyframes bcTypeLine {
    0%, 48%  { opacity: 0; }
    58%      { opacity: 1; }
    78%      { opacity: 1; }
    88%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   FEATURE SHOWCASE (ARIMA + DOE animated sections)
   ============================================================ */
.feature-showcase {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 64px;
}

.feature-showcase.showcase-reversed {
    grid-template-columns: 1.2fr 1fr;
}

.showcase-visual {
    position: relative;
}

.showcase-card {
    background: #0C1222;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
}

.showcase-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.4);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.showcase-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.showcase-card-title {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-primary);
}

.showcase-text h3 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.showcase-text p {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
}

.showcase-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--accent-primary);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.showcase-badge-light {
    background: rgba(191, 255, 0, 0.1);
    color: #BFFF00;
    border-color: rgba(191, 255, 0, 0.2);
}

/* Dark section showcase text override */
.section-dark .showcase-text h3 {
    color: var(--text-light);
}

.section-dark .showcase-text p {
    color: var(--text-muted);
}

/* Interpretation bar (shared) */
.showcase-interp {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.05);
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 8px;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.showcase-interp em {
    color: #F59E0B;
    font-style: normal;
    font-weight: 600;
}

.doe-interp-bar {
    background: rgba(99, 102, 241, 0.05);
}

.arima-interp-sep {
    color: rgba(255,255,255,0.15);
    font-size: 10px;
}

/* ── ARIMA Animation (10s loop) ───────────────────────────── */
.arima-svg {
    width: 100%;
    height: auto;
    display: block;
    padding: 8px;
}

/* Today divider */
.arima-today {
    animation: arimaFadeInOut 10s ease infinite;
}

@keyframes arimaFadeInOut {
    0%, 3%   { opacity: 0; }
    8%       { opacity: 1; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Historical line draws itself */
.arima-hist {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: arimaDrawHist 10s ease infinite;
}

@keyframes arimaDrawHist {
    0%, 3%   { stroke-dashoffset: 600; opacity: 0; }
    5%       { opacity: 1; }
    30%      { stroke-dashoffset: 0; }
    78%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 600; opacity: 0; }
}

/* Forecast line draws after historical */
.arima-forecast {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: arimaDrawForecast 10s ease infinite;
}

@keyframes arimaDrawForecast {
    0%, 30%  { stroke-dashoffset: 200; opacity: 0; }
    32%      { opacity: 1; }
    50%      { stroke-dashoffset: 0; }
    78%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 200; opacity: 0; }
}

/* Confidence band expands */
.arima-band {
    opacity: 0;
    animation: arimaBand 10s ease infinite;
}

@keyframes arimaBand {
    0%, 35%  { opacity: 0; transform: scaleY(0); }
    45%      { opacity: 1; transform: scaleY(1); }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Data points pop in sequentially */
.arima-dp {
    opacity: 0;
    animation: arimaPopIn 10s ease infinite;
}

.adp1 { animation-delay: 0.0s; }
.adp2 { animation-delay: 0.2s; }
.adp3 { animation-delay: 0.4s; }
.adp4 { animation-delay: 0.6s; }
.adp5 { animation-delay: 0.8s; }
.adp6 { animation-delay: 1.0s; }
.adp7 { animation-delay: 1.2s; }
.adp8 { animation-delay: 1.4s; }
.adp9 { animation-delay: 1.6s; }

@keyframes arimaPopIn {
    0%, 5%   { opacity: 0; r: 0; }
    12%      { opacity: 1; r: 4.5; }
    16%      { r: 3.5; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Forecast annotation */
.arima-annotation {
    opacity: 0;
    animation: arimaAnnotate 10s ease infinite;
}

@keyframes arimaAnnotate {
    0%, 50%  { opacity: 0; transform: translateY(4px); }
    58%      { opacity: 1; transform: translateY(0); }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ARIMA interp lines */
.arima-interp-line {
    opacity: 0;
    animation: arimaInterpFade 10s ease infinite;
}

.ail1 { animation-delay: 0.0s; }
.ail2 { animation-delay: 0.3s; }
.ail3 { animation-delay: 0.6s; }

@keyframes arimaInterpFade {
    0%, 55%  { opacity: 0; }
    62%      { opacity: 1; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Scale DOE showcase card to ~75% */
#cp-feat-doe .panel-animation {
    flex: 0 0 54%;
    max-width: 54%;
}

/* ── DOE Animation (12s loop) ─────────────────────────────── */
.doe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 6px;
    background: rgba(255,255,255,0.02);
}

.doe-mini-chart {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 6px;
}

.doe-mini-title {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.doe-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* DOE lines draw themselves */
.doe-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: doeDrawLine 12s ease infinite;
}

.doe-line-a { animation-delay: 0.0s; }
.doe-line-b { animation-delay: 0.3s; }
.doe-line-c { animation-delay: 0.0s; }
.doe-line-d { animation-delay: 0.3s; }

@keyframes doeDrawLine {
    0%, 5%   { stroke-dashoffset: 200; opacity: 0; }
    8%       { opacity: 1; }
    25%      { stroke-dashoffset: 0; }
    78%      { stroke-dashoffset: 0; opacity: 1; }
    90%      { opacity: 0; }
    100%     { stroke-dashoffset: 200; opacity: 0; }
}

/* DOE data dots */
.doe-dot {
    opacity: 0;
    animation: doePopDot 12s ease infinite;
}

.doe-dot1 { animation-delay: 0.3s; }
.doe-dot2 { animation-delay: 0.8s; }
.doe-dot3 { animation-delay: 0.5s; }
.doe-dot4 { animation-delay: 1.0s; }
.doe-dot5 { animation-delay: 0.3s; }
.doe-dot6 { animation-delay: 0.8s; }
.doe-dot7 { animation-delay: 0.5s; }
.doe-dot8 { animation-delay: 1.0s; }

@keyframes doePopDot {
    0%, 15%  { opacity: 0; r: 0; }
    22%      { opacity: 1; r: 4; }
    26%      { r: 3; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Pareto bars grow from left via scaleX */
.doe-bar {
    transform-origin: left center;
    transform-box: fill-box;
    animation: doeBarGrow 12s ease infinite;
}

.doe-bar1 { animation-delay: 0.0s; }
.doe-bar2 { animation-delay: 0.15s; }
.doe-bar3 { animation-delay: 0.3s; }
.doe-bar4 { animation-delay: 0.45s; }

@keyframes doeBarGrow {
    0%, 8%   { transform: scaleX(0); opacity: 0; }
    10%      { opacity: 1; }
    28%      { transform: scaleX(1.05); }
    32%      { transform: scaleX(1); }
    78%      { transform: scaleX(1); opacity: 1; }
    90%      { opacity: 0; transform: scaleX(0); }
    100%     { transform: scaleX(0); opacity: 0; }
}

/* Significance line */
.doe-sig-line, .doe-sig-label {
    animation: fadeInOut 12s ease infinite;
    animation-delay: 0.5s;
}

/* Contour ellipses fade in from outer to inner */
.doe-contour {
    opacity: 0;
    animation: doeContourIn 12s ease infinite;
}

.dc1 { animation-delay: 0.0s; }
.dc2 { animation-delay: 0.4s; }
.dc3 { animation-delay: 0.8s; }
.dc4 { animation-delay: 1.2s; }

@keyframes doeContourIn {
    0%, 10%  { opacity: 0; transform: scale(0.5); }
    25%      { opacity: 1; transform: scale(1); }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* Optimal point */
.doe-optimal {
    opacity: 0;
    animation: doeOptimalPulse 12s ease infinite;
}

@keyframes doeOptimalPulse {
    0%, 28%  { opacity: 0; }
    35%      { opacity: 1; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* DOE interp lines */
.doe-interp-line {
    opacity: 0;
    animation: doeInterpFade 12s ease infinite;
}

.dil1 { animation-delay: 0.0s; }
.dil2 { animation-delay: 0.3s; }
.dil3 { animation-delay: 0.6s; }

@keyframes doeInterpFade {
    0%, 50%  { opacity: 0; }
    58%      { opacity: 1; }
    78%      { opacity: 1; }
    90%      { opacity: 0; }
    100%     { opacity: 0; }
}

/* ============================================================
   APP SHELL: Global Sidebar + Content Panel
   ============================================================ */
.app-shell {
    display: flex;
    height: calc(100vh - 70px);
    position: sticky;
    top: 70px;
    z-index: 10;
    background: #0F172A;
}


/* ── Global Sidebar ── */
.global-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: #1E293B;
    overflow-y: auto;
    padding: 12px 0;
    border-right: 1px solid rgba(255,255,255,0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.gs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--font-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.gs-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.gs-item:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #E2E8F0;
}

.gs-item:hover svg {
    opacity: 0.9;
}

.gs-item.active {
    background: rgba(99, 102, 241, 0.12);
    color: #FFFFFF;
    border-left-color: #6366F1;
    font-weight: 600;
}

.gs-item.active svg {
    opacity: 1;
    color: #6366F1;
}

/* Expandable group (Features) */
.gs-expandable {
    position: relative;
}

.gs-chevron {
    width: 14px !important;
    height: 14px !important;
    margin-left: auto;
    transition: transform 0.25s ease;
    opacity: 0.4 !important;
}

.gs-expandable[data-expanded="true"] .gs-chevron {
    transform: rotate(180deg);
}

.gs-expandable[data-expanded="false"] .gs-chevron {
    transform: rotate(-90deg);
}

/* Submenu */
.gs-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.gs-subitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px 10px 36px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 13px;
    font-weight: 400;
    font-family: var(--font-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.gs-subitem svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.gs-subitem:hover {
    color: #CBD5E1;
    background: rgba(99, 102, 241, 0.05);
}

.gs-subitem:hover svg {
    opacity: 0.7;
}

.gs-subitem.active {
    color: #6366F1;
    font-weight: 600;
    border-left-color: #6366F1;
    background: rgba(99, 102, 241, 0.08);
}

.gs-subitem.active svg {
    opacity: 1;
    color: #6366F1;
}

/* ── Content Panel ── */
.content-panel {
    flex: 1;
    overflow-y: auto;
    background: #0F172A;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    display: flex;
    flex-direction: column;
}

/* Push footer to the bottom of the content panel */
.content-panel > .footer {
    margin-top: auto;
}

.cp-section {
    display: none;
    padding: 24px 48px;
    animation: cpFadeIn 0.3s ease;
}

.cp-section.active {
    display: block;
    flex: 1 0 auto;
}

@keyframes cpFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cp-header {
    margin-bottom: 16px;
}

.cp-header h2 {
    font-size: 32px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.cp-header h3 {
    font-size: 28px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.cp-header p {
    font-size: 15px;
    color: #94A3B8;
    line-height: 1.7;
    max-width: 700px;
}

/* ── Panel animation container ── */
.panel-animation {
    margin-bottom: 24px;
    max-width: 700px;
}

.panel-animation .showcase-card {
    max-width: 100%;
}

/* ── Feature Panel 2-Column Body Layout ── */
.panel-body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.panel-body .panel-animation {
    flex: 0 0 72%;
    max-width: 72%;
    margin-bottom: 0;
}

.panel-body .panel-animation .showcase-card svg {
    max-height: 340px;
    width: 100%;
}

.panel-body .panel-features {
    flex: 1;
    min-width: 0;
}

.panel-body .panel-features ul {
    grid-template-columns: 1fr;
    gap: 6px;
}

/* ── Panel feature lists (inside content panels) ── */
.panel-features ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 32px;
}

.panel-features li {
    font-size: 18px;
    color: #CBD5E1;
    padding: 8px 0;
    padding-left: 28px;
    position: relative;
    line-height: 1.5;
}

.panel-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 16px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6366F1;
    opacity: 0.6;
}

/* Bullet colors per feature panel */
#cp-feat-doe .panel-features li::before { background: #FBBF24; }
#cp-feat-timeseries .panel-features li::before { background: #BFFF00; }
#cp-feat-quality .panel-features li::before { background: #38BDF8; }
#cp-feat-statistics .panel-features li::before { background: #818CF8; }
#cp-feat-regression .panel-features li::before { background: #F472B6; }
#cp-feat-reliability .panel-features li::before { background: #2DD4BF; }
#cp-feat-anova .panel-features li::before { background: #A78BFA; }
#cp-feat-weibull .panel-features li::before { background: #FBBF24; }
#cp-feat-sysrel .panel-features li::before { background: #34D399; }

/* ── Why Us: Differentiator cards (dark theme) ── */
#cp-why-us .diff-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

#cp-why-us .diff-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

#cp-why-us .diff-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(255,255,255,0.06);
}

#cp-why-us .diff-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #FFFFFF;
}

#cp-why-us .diff-card p {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.7;
}

#cp-why-us .diff-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.diff-icon-purple { background: rgba(99, 102, 241, 0.15); color: #818CF8; }
.diff-icon-teal { background: rgba(6, 182, 212, 0.15); color: #22D3EE; }
.diff-icon-green { background: rgba(16, 185, 129, 0.15); color: #34D399; }
.diff-icon-red { background: rgba(239, 68, 68, 0.15); color: #F87171; }
.diff-icon-amber { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.diff-icon-blue { background: rgba(56, 189, 248, 0.15); color: #38BDF8; }

/* ── Compare section (dark theme) ── */
#cp-compare .comparison-table-wrap {
    max-width: 900px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

#cp-compare .comparison-table {
    width: 100%;
    border-collapse: collapse;
}

#cp-compare .comparison-table thead th {
    background: rgba(99, 102, 241, 0.15);
    color: #E2E8F0;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 700;
}

#cp-compare .comparison-table thead th:first-child {
    text-align: left;
    width: 50%;
}

#cp-compare .comparison-table tbody td {
    padding: 12px 20px;
    font-size: 14px;
    color: #CBD5E1;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

#cp-compare .comparison-table tbody td:first-child {
    text-align: left;
}

#cp-compare .comparison-table tbody tr:hover {
    background: rgba(99, 102, 241, 0.05);
}

#cp-compare .check { color: #10B981; font-size: 16px; font-weight: 700; }
#cp-compare .cross { color: #64748B; opacity: 0.6; }
#cp-compare .price-highlight { color: #6366F1; font-weight: 700; font-size: 15px; }
#cp-compare .price-competitor { color: #94A3B8; }

#cp-compare .savings-callout {
    margin-top: 24px;
    padding: 16px 24px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    color: #10B981;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    max-width: 900px;
}

/* ── Pricing section (inside content panel) ── */
#cp-pricing .pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
}

#cp-pricing .pricing-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 36px 28px;
    position: relative;
    transition: all 0.3s ease;
}

#cp-pricing .pricing-card:hover {
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-4px);
}

#cp-pricing .pricing-card.recommended {
    border-color: rgba(99, 102, 241, 0.4);
    background: rgba(99, 102, 241, 0.06);
}

#cp-pricing .pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #10B981;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#cp-pricing .pricing-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #E2E8F0;
    margin-bottom: 8px;
}

#cp-pricing .pricing-amount {
    margin-bottom: 8px;
}

#cp-pricing .pricing-amount .currency {
    font-size: 24px;
    color: #94A3B8;
    vertical-align: super;
    font-weight: 600;
}

#cp-pricing .pricing-amount .price {
    font-size: 56px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1;
}

#cp-pricing .pricing-amount .period {
    font-size: 16px;
    color: #94A3B8;
    font-weight: 400;
}

#cp-pricing .pricing-subtitle {
    font-size: 13px;
    color: #64748B;
    margin-bottom: 24px;
}

#cp-pricing .pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
}

#cp-pricing .pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14px;
    color: #CBD5E1;
}

#cp-pricing .pricing-features li svg {
    width: 16px;
    height: 16px;
    color: #10B981;
    flex-shrink: 0;
}

#cp-pricing .volume-pricing {
    text-align: center;
    margin-top: 32px;
}

#cp-pricing .volume-pricing h4 {
    font-size: 18px;
    font-weight: 600;
    color: #E2E8F0;
    margin-bottom: 16px;
}

#cp-pricing .volume-tiers {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

#cp-pricing .volume-tier {
    font-size: 14px;
    color: #94A3B8;
    padding: 12px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
}

#cp-pricing .volume-tier strong {
    display: block;
    color: #CBD5E1;
    margin-bottom: 4px;
}

/* ── Download section ── */
#cp-download {
    display: none;
}

#cp-download.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.cp-download-content {
    text-align: center;
    max-width: 600px;
}

.cp-download-content h2 {
    font-size: 36px;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 16px;
}

.cp-download-content .cta-tagline {
    font-size: 17px;
    color: #94A3B8;
    margin-bottom: 32px;
    line-height: 1.7;
}

.cp-download-content .cta-meta {
    margin-top: 16px;
    font-size: 13px;
    color: #64748B;
}

/* (Old section rules removed — now handled by app-shell CSS above) */

/* ============================================================
   8. FOOTER
   ============================================================ */
.footer {
    background: var(--dark-deepest);
    color: var(--text-muted);
    padding: 32px 24px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 20px;
}

.footer-brand p {
    font-size: 14px;
    line-height: 1.7;
    margin-top: 16px;
    max-width: 320px;
}

.footer-brand .logo {
    margin-bottom: 4px;
}

.footer h4 {
    color: var(--text-light);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: 14px;
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--text-light);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.footer-bottom-right {
    color: var(--text-muted);
    font-style: italic;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .hero .container {
        padding: 0 24px;
        gap: 24px;
    }

    .hero-content {
        flex-direction: column;
        text-align: center;
    }

    .hero h1 {
        font-size: 32px;
        white-space: normal;
    }

    .hero-subtitle {
        flex-basis: auto;
        margin: 0 auto 16px;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .hero-image {
        max-width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .app-mockup {
        width: 100%;
        margin-left: 0;
    }

    .app-mockup.boxcox-mockup {
        transform: none;
    }

    .section-header h2 {
        font-size: 32px;
    }

    /* App-shell: sidebar collapses to horizontal tab bar */
    .app-shell {
        flex-direction: column;
        height: auto;
        position: relative;
        top: 0;
    }

    .global-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 0;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        display: flex;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        position: sticky;
        top: 70px;
        z-index: 90;
    }

    .global-sidebar::-webkit-scrollbar {
        display: none;
    }

    .gs-item {
        white-space: nowrap;
        padding: 14px 18px;
        font-size: 13px;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
    }

    .gs-item.active {
        border-left-color: transparent;
        border-bottom-color: #6366F1;
    }

    .gs-item svg:first-child {
        width: 16px;
        height: 16px;
    }

    .gs-chevron {
        display: none;
    }

    .gs-group {
        display: contents;
    }

    .gs-submenu {
        display: contents !important;
    }

    .gs-subitem {
        white-space: nowrap;
        padding: 14px 16px;
        font-size: 12px;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex-shrink: 0;
    }

    .gs-subitem.active {
        border-left-color: transparent;
        border-bottom-color: #6366F1;
    }

    .content-panel {
        min-height: calc(100vh - 140px);
    }

    .cp-section {
        padding: 32px 24px;
    }

    #cp-why-us .diff-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    #cp-pricing .pricing-cards {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
    }

    .panel-features ul {
        grid-template-columns: 1fr 1fr;
    }

    .panel-body {
        flex-direction: column;
    }

    .panel-body .panel-animation {
        flex: none;
        max-width: 100%;
    }

    .panel-body .panel-features ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --section-padding: 64px 0;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--dark-deepest);
        flex-direction: column;
        padding: 80px 32px 32px;
        gap: 24px;
        transition: right 0.3s ease;
        box-shadow: -10px 0 30px rgba(0,0,0,0.3);
    }

    .nav-links.active {
        right: 0;
    }

    .navbar .container {
        padding: 0 16px;
    }

    .logo svg {
        height: 36px;
    }

    .hamburger {
        display: flex;
    }

    .hero {
        padding-top: 100px;
        padding-bottom: 40px;
    }

    .hero h1 {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 13px;
    }

    .hero-cta {
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
    }

    .hero-trust {
        flex-direction: column;
        gap: 8px;
    }

    .hero-image {
        grid-template-columns: 1fr;
    }

    .cp-section {
        padding: 24px 16px;
    }

    .cp-header h2 {
        font-size: 24px;
    }

    .cp-header h3 {
        font-size: 22px;
    }

    .panel-features ul {
        grid-template-columns: 1fr;
    }

    .panel-body {
        flex-direction: column;
        gap: 16px;
    }

    .panel-body .panel-animation {
        max-width: 100%;
    }

    .panel-body .panel-features ul {
        grid-template-columns: 1fr;
    }

    .gs-item {
        padding: 12px 14px;
        font-size: 12px;
        gap: 8px;
    }

    .gs-subitem {
        padding: 12px 12px;
        font-size: 11px;
    }

    #cp-compare .comparison-table-wrap {
        overflow-x: auto;
    }

    #cp-pricing .pricing-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    #cp-pricing .volume-tiers {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

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

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .app-mockup {
        transform: none;
        width: 100%;
        margin-left: 0;
    }

    .app-mockup:hover {
        transform: none;
    }

    .weibull-charts {
        grid-template-columns: 1fr;
    }

    .boxcox-charts {
        grid-template-columns: 1fr;
    }

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

    .weibull-feat-grid {
        grid-template-columns: 1fr;
    }

    .mockup-sidebar {
        width: 60px;
    }

    .mock-nav-item {
        font-size: 7px;
        padding: 5px 6px;
    }

    .mockup-body {
        min-height: 280px;
    }

    .mockup-bottom-panels {
        flex-direction: column;
    }

    .mockup-stats-panel {
        flex: none;
    }

    .weibull-stats-panel {
        flex: none !important;
    }

    .typing-line {
        font-size: 7px;
    }

    .chart-title {
        font-size: 8px;
    }

    .stat-label, .stat-value {
        font-size: 8px;
    }

    .showcase-card-title {
        font-size: 7px;
    }

    .doe-mini-title {
        font-size: 7px;
    }

    .showcase-interp {
        font-size: 7px;
    }

    .cp-download-content h2 {
        font-size: 28px;
    }
}