/* ==================== CSS VARIABLES ==================== */
:root {
    --ferrari-red: #DC0000;
    --ferrari-red-dark: #b30000;

    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111111;
    --border-color: #1a1a1a;
    --border-hover: #333333;
    --text-primary: #e5e5e5;
    --text-secondary: #888888;
    --text-muted: #666666;
    --white: #ffffff;

    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);

    --transition: all 0.2s ease;
}

/* ==================== RESET & BASE ==================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom scrollbar */
body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background: #000;
}

body::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 4px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #444;
}

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

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

a:hover {
    color: var(--ferrari-red-dark);
}

/* ==================== CONTAINER ==================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-family);
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--ferrari-red);
    color: var(--white) !important;
}

.btn-primary:hover {
    background-color: var(--ferrari-red-dark);
    color: var(--white) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -8px rgba(220, 0, 0, 0.4);
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-hover);
}

.btn-secondary:hover {
    border-color: var(--text-secondary);
    color: var(--white);
}

.btn-small {
    padding: 8px 16px;
    font-size: 14px;
}

.btn-large {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-full {
    width: 100%;
}

.btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== HEADER (GLASSMORPHISM) ==================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

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

.logo-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

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

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

.nav a:hover {
    color: var(--white);
}

/* ==================== HERO SECTION (PARALLAX) ==================== */
.hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The header is fixed and opaque: without this the hero centres against
       the whole viewport and slides its first lines underneath it. */
    padding-top: 71px;
    background: radial-gradient(ellipse at bottom, #0a0a0a 0%, #000 100%);
    z-index: 1;
    will-change: transform, opacity;
}

/* Grid overlay */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    pointer-events: none;
}

/* Copy on the left, the actual prediction screen on the right. The hero is
   fixed and exactly one viewport tall, so the figure has to be capped by
   height rather than width or it pushes the CTA off screen on short displays. */
.hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 48px;
    align-items: center;
    max-width: 1380px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin-bottom: 28px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 0;
}

.hero-figure {
    min-width: 0;
}

.hero-figure img {
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
    object-position: left center;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.7);
}

.hero-outcomes {
    list-style: none;
    text-align: left;
    margin: 0 0 28px;
    padding: 0;
}

.hero-outcomes li {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 24px;
    position: relative;
}

.hero-outcomes li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: var(--ferrari-red);
    font-weight: 700;
}

.hero-outcomes li strong {
    color: var(--text-primary);
}

.btn-link {
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 14px 0;
}

.btn-link:hover {
    color: var(--ferrari-red);
}

/* Small phones (360x640 and the like) leave ~570px under the header: not
   enough for headline, subtitle, list and buttons. The list goes — it stays
   in the DOM — because a hero whose Download button is cut off is useless. */
@media (max-width: 768px) and (max-height: 720px) {
    .hero h1 {
        font-size: 24px;
        margin-bottom: 12px;
    }

    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hero-outcomes {
        display: none;
    }
}

/* Laptops at 768px tall have ~700px left once the header is accounted for.
   Tighten the type rather than let the hero overflow its own viewport. */
@media (max-height: 860px) and (min-width: 1025px) {
    .hero h1 {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 18px;
    }

    .hero-outcomes {
        margin-bottom: 20px;
    }

    .hero-outcomes li {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .hero-figure img {
        max-height: 54vh;
    }
}

/* Scroll spacer pushes content below the fixed hero */
.hero-scroll-spacer {
    height: 100vh;
    position: relative;
    z-index: 1;
}

/* ==================== MAIN CONTENT (ABOVE HERO) ==================== */
.main-content {
    position: relative;
    z-index: 10;
    background: var(--bg-primary);
}

/* ==================== SECTIONS ==================== */
.section {
    padding: 80px 0;
}

.section-dark {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    color: var(--white);
}

.section-subtitle {
    font-size: 18px;
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 48px;
}

/* ==================== HOW IT WORKS - WORKFLOW DIAGRAM ==================== */
.workflow-diagram {
    margin-top: 40px;
    overflow-x: auto;
    padding: 20px 0;
}

.workflow-svg {
    display: block;
    max-width: 100%;
    height: auto;
    min-width: 900px;
}

.step-label {
    font-size: 13px;
    font-weight: 600;
}

.step-sublabel {
    font-size: 11px;
}

/* Workflow tooltips */
.workflow-steps-container {
    position: relative;
}

.hoverable-step {
    cursor: pointer;
    transition: var(--transition);
}

.hoverable-step:hover rect {
    stroke: var(--ferrari-red);
    stroke-width: 3;
    filter: drop-shadow(0 4px 8px rgba(220, 0, 0, 0.2));
}

.workflow-tooltip {
    position: absolute;
    bottom: -120px;
    left: 0;
    background: var(--bg-card);
    border: 2px solid var(--ferrari-red);
    border-radius: 12px;
    padding: 20px;
    max-width: 320px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
    pointer-events: none;
}

.workflow-tooltip.active {
    opacity: 1;
    visibility: visible;
}

.workflow-tooltip strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.workflow-tooltip p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Mobile workflow */
.workflow-mobile {
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.workflow-step-mobile {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.workflow-step-mobile.highlight {
    background: var(--ferrari-red);
    border-color: var(--ferrari-red);
    color: var(--white);
}

.workflow-step-mobile.highlight .step-number {
    background: var(--white);
    color: var(--ferrari-red);
}

.step-number {
    width: 40px;
    height: 40px;
    background: var(--ferrari-red);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.step-content h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.step-content p {
    font-size: 14px;
    opacity: 0.8;
}

/* ==================== WHAT YOU NEED / GET ==================== */
.need-get-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.need-get-card {
    background: var(--bg-card);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.need-card {
    border-color: var(--border-color);
}

.need-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.get-card {
    border-color: var(--ferrari-red);
}

.get-card:hover {
    border-color: var(--ferrari-red-dark);
    box-shadow: 0 10px 30px rgba(220, 0, 0, 0.15);
    transform: translateY(-2px);
}

.need-get-icon {
    margin-bottom: 24px;
}

.need-get-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 24px;
}

.need-get-list {
    list-style: none;
    padding: 0;
}

.need-get-list li {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
    padding-left: 8px;
}

.need-get-list li strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Input card accent */
.need-get-card.input-card {
    border-left: 4px solid var(--ferrari-red);
}

/* Output card accent */
.need-get-card.output-card {
    border-left: 4px solid #3b82f6;
}

/* ==================== FEATURES ==================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.feature-card {
    background: var(--bg-card);
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.feature-card:hover {
    border-color: var(--ferrari-red);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.feature-icon {
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.feature-card-wide {
    grid-column: 1 / -1;
}

/* ==================== APP-STYLE SECTION BAR (Telemetry | Session Logs) ==================== */
/* Pinned under the site header while you scroll a section, so the other half
   of the app is always one click away — same role as the bar inside the app. */
.app-bar {
    position: sticky;
    /* The site header is fixed and 71px tall: park the bar just below it,
       otherwise it slides underneath (the header sits at z-index 1000). */
    top: 79px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 0 40px;
    padding: 10px 14px;
    background: rgba(8, 8, 10, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.app-tabs {
    display: flex;
    gap: 6px;
}

.app-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.app-tab:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
}

.app-tab.is-active {
    background: var(--ferrari-red);
    color: #fff;
}

.app-tab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* The inactive half stays in the DOM so its copy is still indexed. */
.app-panel {
    display: none;
}

.app-panel.is-active {
    display: block;
}

.app-bar .screenshot-theme-toggle {
    margin: 0;
}

@media (max-width: 768px) {
    .app-bar {
        justify-content: center;
        padding: 8px 10px;
    }

    /* Tabs and theme toggle together wrap onto two rows, and a 110px sticky
       bar eats a seventh of a phone screen. The screenshots are barely
       legible at this width anyway, so the light/dark choice steps aside. */
    .app-bar .screenshot-theme-toggle {
        display: none;
    }

    .app-tab {
        padding: 9px 14px;
        font-size: 14px;
    }
}

/* ==================== TELEMETRY FLOW (chevron tabs) ==================== */
.flow {
    margin-top: 48px;
    margin-bottom: 88px;
}

.flow-head {
    margin-bottom: 20px;
}

.flow-head h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

.flow-head p {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* The chevrons mirror the wizard inside the app: same clip-path notch,
   same red-for-active. Kept as real buttons so the flow is keyboard
   operable and screen readers announce it as a tab list. */
.chevrons {
    display: flex;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 28px;
}

.chevron-group {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

/* Not a fourth chevron: in the app this is the button that runs the wizard,
   so it keeps the button shape and stays red whether or not it is selected.
   Selectors are doubled up to outrank the generic .chevron rules below. */
.chevrons .chevron-start {
    flex: 0 0 auto;
    justify-content: center;
    gap: 10px;
    padding: 16px 26px;
    clip-path: none;
    border-radius: 8px;
    background: var(--ferrari-red);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.chevrons .chevron-start:hover {
    background: var(--ferrari-red-dark);
}

.chevrons .chevron-start.is-active {
    background: var(--ferrari-red);
    box-shadow: 0 0 0 3px rgba(220, 0, 0, 0.35);
}

.chevron {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 30px 16px 44px;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    background: #16181c;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%, 20px 50%);
    transition: background 0.25s ease;
}

/* Only the first one is squared off on the left. All three keep the arrow on
   the right, pointing at the Start Processing button, as in the app. */
.chevron-group .chevron:first-child {
    padding-left: 26px;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 0 100%);
}

.chevron:hover {
    background: #1e2126;
}

.chevron.is-active {
    background: var(--ferrari-red);
}

.chevron:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -4px;
}

.chevron-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease;
}

.chevron.is-active .chevron-num {
    color: var(--ferrari-red);
}

.chevron-txt {
    min-width: 0;
}

.chevron-txt strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
}

.chevron-txt em {
    display: block;
    font-size: 12.5px;
    font-style: normal;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s ease;
}

.chevron.is-active .chevron-txt strong { color: #fff; }
.chevron.is-active .chevron-txt em { color: rgba(255, 255, 255, 0.75); }

/* One panel visible at a time; the others stay in the DOM (so they are
   still indexed) and slide in from the side the user is travelling from. */
/* All three panels share one grid cell, so the stage is always as tall as
   the tallest of them and the page below never jumps when you switch step. */
.flow-stage {
    display: grid;
    overflow: hidden;
}

.flow-panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px);
    transition: opacity 0.38s ease, transform 0.38s ease, visibility 0.38s;
}

.flow-panel.from-left {
    transform: translateX(-60px);
}

.flow-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.flow-shot {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.flow-shot img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    background: var(--bg-card);
}

.flow-copy h4 {
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 12px;
}

.flow-copy > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 26px;
}

@media (prefers-reduced-motion: reduce) {
    .flow-panel {
        transition: opacity 0.01s;
        transform: none;
    }
}

@media (max-width: 1024px) {
    .flow-panel {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .chevron {
        padding: 12px 22px 12px 34px;
        gap: 10px;
    }

    .chevrons .chevron-start {
        padding: 12px 18px;
        font-size: 14px;
    }

    .chevron-txt em {
        display: none;
    }
}

@media (max-width: 768px) {
    .chevrons,
    .chevron-group {
        flex-direction: column;
        gap: 6px;
    }

    .chevron,
    .chevron-group .chevron:first-child {
        clip-path: none;
        border-radius: 8px;
        padding: 12px 16px;
    }

    .chevrons .chevron-start {
        justify-content: flex-start;
        padding: 12px 16px;
    }

    .chevron-txt em {
        display: block;
    }
}

/* ==================== FEATURE SHOWCASE (TEXT + SCREENSHOT) ==================== */
.feature-showcase {
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 48px;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: start;
}

.feature-block.img-left {
    grid-template-columns: 1.4fr 1fr;
}

/* The statistics shot is a tall crop of one column, not a full window:
   give it a narrower slot so it does not tower over its own text. */
.feature-block.feature-block-narrow.img-left {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
}

.feature-block-text h3 {
    font-size: 28px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 16px;
}

.feature-block-text > p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
}

.feature-detail {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.feature-detail:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.feature-detail strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}

.feature-detail p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.feature-block-image {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.feature-block-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.feature-block-image img {
    width: 100%;
    height: auto;
    display: block;
    cursor: zoom-in;
    min-height: 200px;
    background: var(--bg-card);
    transition: opacity 0.2s ease;
}

.feature-block-image:hover img {
    opacity: 0.85;
}

/* Zoom icon overlay on hover */
.feature-block-image::after {
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(220, 0, 0, 0.85);
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

.feature-block-image:hover::after {
    opacity: 1;
}

/* Tablet */
@media (max-width: 1024px) {
    .feature-block,
    .feature-block.img-left,
    .feature-block.feature-block-narrow.img-left {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Stacked, the tall statistics crop would run the height of the screen:
       cap it and let it sit centred instead. */
    .feature-block-narrow .feature-block-image {
        max-width: 420px;
        margin: 0 auto;
    }

    .feature-showcase {
        gap: 60px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .feature-showcase {
        gap: 48px;
    }

    .feature-block-text h3 {
        font-size: 22px;
    }
}

/* ==================== WHO IT'S FOR (SIMPLIFIED) ==================== */
.audience-bullets {
    max-width: 600px;
    margin: 0 auto 24px;
}

.audience-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-card);
    border-radius: 10px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.audience-item:hover {
    border-color: var(--ferrari-red);
    box-shadow: var(--shadow-sm);
}

.audience-item svg {
    flex-shrink: 0;
}

.audience-item span {
    font-size: 16px;
    color: var(--text-secondary);
}

.audience-item strong {
    color: var(--text-primary);
}

.not-for-you {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    margin-top: 24px;
}

/* ==================== WHY IT'S USEFUL (VALUE GRID) ==================== */
.value-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.value-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.value-item:hover {
    border-color: var(--ferrari-red);
    box-shadow: var(--shadow-sm);
}

.value-icon {
    flex-shrink: 0;
    padding: 8px;
    background: rgba(220, 0, 0, 0.1);
    border-radius: 8px;
}

.value-text strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 4px;
}

.value-text span {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==================== 3-STEP WORKFLOW ==================== */
.workflow-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.workflow-step-simple {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.workflow-step-simple:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.workflow-step-simple.highlight {
    background: var(--ferrari-red);
    border-color: var(--ferrari-red);
    color: var(--white);
}

.workflow-step-simple.highlight .step-number-large {
    background: var(--white);
    color: var(--ferrari-red);
}

.workflow-step-simple.highlight h3,
.workflow-step-simple.highlight p {
    color: var(--white);
}

.step-number-large {
    width: 48px;
    height: 48px;
    background: var(--ferrari-red);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    margin: 0 auto 16px;
}

.workflow-step-simple h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.workflow-step-simple p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.workflow-arrow {
    flex-shrink: 0;
}

/* ==================== SCREENSHOT THEME TOGGLE ==================== */
.screenshot-theme-toggle {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
    margin-top: 16px;
}

.theme-btn {
    padding: 8px 24px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--border-hover);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.theme-btn:first-child {
    border-radius: 8px 0 0 8px;
}

.theme-btn:last-child {
    border-radius: 0 8px 8px 0;
    border-left: none;
}

.theme-btn.active {
    background: var(--ferrari-red);
    border-color: var(--ferrari-red);
    color: var(--white);
}

.theme-btn:not(.active):hover {
    border-color: var(--text-secondary);
    color: var(--white);
}

/* ==================== SCREENSHOTS 3-COLUMN ==================== */
.screenshots-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
}

/* ==================== FAQ SIMPLE ==================== */
.faq-simple {
    max-width: 700px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 12px;
    background: var(--bg-card);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.faq-item summary {
    padding: 18px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 22px;
    font-weight: 400;
    color: var(--ferrari-red);
    transition: transform 0.2s;
}

.faq-item[open] summary::after {
    content: '\2212';
}

.faq-item summary:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-item .faq-answer {
    padding: 0 24px 18px 24px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.faq-more {
    text-align: center;
    margin-top: 32px;
    font-size: 15px;
    color: var(--text-muted);
}

.faq-more a {
    color: var(--ferrari-red);
    font-weight: 500;
}

/* ==================== FOOTER LINKS ==================== */
.footer-links {
    display: flex;
    gap: 24px;
}

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

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

/* Legacy audience grid (keep for compatibility) */
.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.audience-card {
    text-align: center;
    padding: 32px 24px;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.audience-card:hover {
    border-color: var(--ferrari-red);
    box-shadow: var(--shadow-md);
}

.audience-icon {
    margin-bottom: 20px;
}

.audience-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 12px;
}

.audience-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ==================== SCREENSHOTS ==================== */
.screenshots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.screenshot-item {
    position: relative;
    background: var(--bg-card);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: var(--transition);
}

.screenshot-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.15);
}

.screenshot-item img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.screenshot-caption {
    padding: 20px;
}

.screenshot-caption h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.screenshot-caption p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.screenshot-clickable {
    cursor: zoom-in;
    transition: var(--transition);
}

.screenshot-item:hover .screenshot-clickable {
    opacity: 0.9;
}

.click-hint {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(220, 0, 0, 0.9);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: var(--transition);
    pointer-events: none;
}

.screenshot-item:hover .click-hint {
    opacity: 1;
}

/* ==================== LIGHTBOX ==================== */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    animation: fadeIn 0.2s ease-in-out;
}

.lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

/* Zoomed: fits viewport width, scrollable vertically */
.lightbox.active.zoomed {
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 24px 24px;
}

.lightbox-content {
    max-width: 90%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    animation: zoomIn 0.3s ease-in-out;
    cursor: zoom-in;
    transition: max-width 0.3s ease, max-height 0.3s ease;
}

.lightbox.zoomed .lightbox-content {
    max-width: 95vw;
    max-height: none;
    cursor: zoom-out;
}

.lightbox-close {
    position: fixed;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    z-index: 10000;
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--ferrari-red);
}

.lightbox-caption {
    margin-top: 20px;
    text-align: center;
    color: #ccc;
    font-size: 16px;
    max-width: 800px;
    padding: 0 20px;
}

.lightbox.zoomed .lightbox-caption {
    display: none;
}

/* Zoom hint */
.lightbox-zoom-hint {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #999;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    pointer-events: none;
    z-index: 10000;
    transition: opacity 0.3s;
}

.lightbox.zoomed .lightbox-zoom-hint {
    opacity: 0;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==================== CONTACT FORM ==================== */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.required {
    color: var(--ferrari-red);
}

.optional {
    color: var(--text-muted);
    font-weight: 400;
}

.form-group select {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-family);
    font-size: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    transition: var(--transition);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.form-group select:focus {
    outline: none;
    border-color: var(--ferrari-red);
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 0 var(--ferrari-red), 0 8px 24px -8px rgba(220, 0, 0, 0.3);
}

.form-group select option {
    background: #1a1a1a;
    color: var(--white);
}

.radio-row {
    display: flex;
    gap: 24px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--text-secondary);
    cursor: pointer;
}

.radio-label input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ferrari-red);
    cursor: pointer;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-family);
    font-size: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--white);
    transition: var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--ferrari-red);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 0 var(--ferrari-red), 0 8px 24px -8px rgba(220, 0, 0, 0.3);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-buttons {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

.form-buttons .btn {
    flex: 1;
}

.form-hint {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .form-buttons {
        flex-direction: column;
    }
}

.contact-email {
    text-align: center;
    margin-top: 32px;
    font-size: 16px;
    color: var(--text-secondary);
}

.contact-email a {
    color: var(--ferrari-red);
    font-weight: 500;
    text-decoration: none;
}

.contact-email a:hover {
    color: var(--white);
    text-decoration: underline;
}

/* ==================== FOOTER ==================== */
.footer {
    background-color: var(--bg-secondary);
    color: var(--text-muted);
    padding: 40px 0;
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-brand .logo-text {
    color: var(--white);
    font-size: 16px;
}

.footer-brand p {
    font-size: 14px;
    margin-top: 8px;
}

.footer-contact a {
    color: var(--text-secondary);
}

.footer-contact a:hover {
    color: var(--ferrari-red);
}

.footer-copy {
    font-size: 13px;
}

/* ==================== TECHNICAL GUIDE PAGE ==================== */
.guide-content p,
.guide-content li {
    color: var(--text-secondary);
    line-height: 1.8;
}

.guide-content h2 {
    text-align: left;
    margin-bottom: 16px;
}

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

/* Tablet */
@media (max-width: 1024px) {
    .hero h1 {
        font-size: 36px;
    }

    /* Below two comfortable columns the screenshot becomes illegible long
       before it becomes small, so the hero goes back to copy only. */
    .hero-content {
        grid-template-columns: 1fr;
        max-width: 720px;
    }

    .hero-figure {
        display: none;
    }

    .need-get-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

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

    .audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .screenshots-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .workflow-arrow {
        display: none;
    }

    .workflow-simple {
        flex-direction: column;
        gap: 16px;
    }

    .workflow-step-simple {
        max-width: 100%;
        width: 100%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .nav {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-direction: column;
        padding: 20px;
        gap: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav.nav-open {
        display: flex;
    }

    .nav a {
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .nav a:last-child {
        border-bottom: none;
        margin-top: 8px;
    }

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

    .mobile-menu-btn span {
        background-color: var(--white);
    }

    .mobile-menu-btn.menu-open span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mobile-menu-btn.menu-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-btn.menu-open span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Keeps the 71px header clearance from the base rule — a bare
       `padding: 0 20px` here used to wipe it and slide the title under. */
    .hero {
        padding: 71px 20px 0;
    }

    .hero h1 {
        font-size: 27px;
        margin-bottom: 14px;
    }

    .hero-subtitle {
        font-size: 15px;
        margin-bottom: 18px;
    }

    /* The hero is fixed and one viewport tall, so anything that does not fit
       is cut off rather than scrolled to — which on a phone was swallowing
       the Download button. Trim the list to the three claims that sell, and
       keep the rest in the DOM for search engines. */
    .hero-outcomes {
        margin-bottom: 20px;
    }

    .hero-outcomes li {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    .hero-outcomes li:nth-child(3),
    .hero-outcomes li:nth-child(4) {
        display: none;
    }

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

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 30px;
    }

    .stat {
        flex: 1 0 40%;
    }

    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    /* Hide desktop workflow, show mobile */
    .workflow-diagram {
        display: none;
    }

    .workflow-mobile {
        display: flex;
    }

    .need-get-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .need-get-card {
        padding: 28px;
    }

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

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

    .screenshots-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .screenshots-grid-3 {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .footer-links {
        flex-direction: column;
        gap: 12px;
    }

    .hero-outcomes {
        padding-left: 8px;
    }

    .hero-outcomes li {
        font-size: 15px;
    }

    .audience-item {
        padding: 14px 16px;
    }

    .audience-item span {
        font-size: 15px;
    }

    .value-item {
        padding: 20px;
    }

    .workflow-simple {
        gap: 12px;
    }

    .workflow-step-simple {
        padding: 24px 20px;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

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

    .hero-stats {
        flex-direction: column;
        gap: 20px;
    }

    .stat {
        flex: none;
    }

    .feature-card,
    .audience-card {
        padding: 24px;
    }
}

/* ==================== MOBILE MENU BUTTON ==================== */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background-color: var(--white);
    transition: var(--transition);
}

/* ==================== TECHNICAL GUIDE - NON-PARALLAX HERO ==================== */
.hero-static {
    position: relative;
    padding: 140px 0 60px;
    background: radial-gradient(ellipse at bottom, #0a0a0a 0%, #000 100%);
}

.hero-static::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    pointer-events: none;
}

.hero-static .hero-content {
    position: relative;
    z-index: 2;
}

.hero-static h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fff 0%, #888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}