/* ==============================================================================
   BASE
   ============================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { background-color: #07070B; min-height: 100%; max-width: 100%; overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
    color: #F2F3F7;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    /* No overflow-x here on purpose — html's overflow-x:clip already
       prevents horizontal scroll (confirmed: removing this redundant
       declaration doesn't reintroduce it). This specific declaration
       was the one silently breaking the header's position:sticky: any
       axis left unset computes to auto once the OTHER axis is
       non-visible, and body's resulting overflow-y:auto made it (not
       the real viewport) the header's sticky containing block. */
    font-size: 16px;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
@media (prefers-reduced-motion: reduce) { *{ animation-duration:.001s !important; transition-duration:.001s !important; } }

/* Keyboard-only focus ring — :focus-visible so mouse/touch clicks
   never show it, only actual keyboard navigation does. One rule
   covers every link and button on the page instead of styling each
   component's focus state individually. */
a:focus-visible, button:focus-visible {
    outline: 2px solid #5C9BEE;
    outline-offset: 3px;
    border-radius: 4px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media(min-width:760px){ .wrap{ padding: 0 40px; } }
section, header, footer { background-color: transparent; position: relative; z-index: 1; }
/* Anchor targets land clear of the sticky header instead of right
   under it. */
section[id] { scroll-margin-top: 76px; }

/* ==============================================================================
   NAVIGATION
   ============================================================================== */

/* ═══════════ App Store badge ═══════════ */
.store-badge {
    display: inline-flex; align-items: center; gap: 11px;
    background-color: #FFFFFF; border-radius: 12px;
    padding: 9px 18px 9px 15px; cursor: pointer;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.store-badge .text { line-height: 1.12; }
.store-badge .text .small { display: block; font-size: 9.5px; font-weight: 500; color: #3C3C43; }
.store-badge .text .big { display: block; font-size: 16px; font-weight: 700; color: #0A0A0C; letter-spacing: -0.01em; }

/* ═══════════ NAV ═══════════ */
header {
    position: sticky; top: 0; z-index: 60;
    background-color: rgba(7,7,11,0.86);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
@supports (backdrop-filter: blur(1px)) { header { backdrop-filter: blur(14px); } }
nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1180px; margin: 0 auto; }
@media(min-width:760px){ nav{ padding: 16px 40px; } }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-text .name { font-weight: 800; font-size: 16px; letter-spacing: 0.14em; line-height: 1.1; }
.brand-text .tag { font-size: 7.5px; letter-spacing: 0.3em; color: #7A72E8; font-weight: 700; margin-top: 2px; }
.nav-links { display: none; gap: 38px; }
@media(min-width:900px){ .nav-links{ display:flex; } }
.nav-links a { font-size: 14px; color: #9A9AA6; font-weight: 500; transition: color .3s ease; }
.nav-links a:hover { color: #F2F3F7; }
.nav-store { display: none; }
/* Same breakpoint the hamburger disappears at (900px) — below that,
   the hamburger's own panel already has a download button, so
   showing this ONE TOO in the header meant two (sometimes three,
   counting the panel) download buttons on screen at once between
   560-899px. */
@media(min-width:900px){ .nav-store{ display: inline-flex; } }
.nav-store.store-badge { padding: 6px 14px 6px 11px; border-radius: 10px; }
.nav-store .text .small { font-size: 8px; }
.nav-store .text .big { font-size: 13px; }

/* ═══════════ MOBILE MENU ═══════════
   Below 900px the inline nav-links disappear, and below 560px the
   header's store badge disappears too — without this, a phone-width
   header has no navigation and no download CTA at all. The hamburger
   button covers that whole range (hidden only at 900px+, where the
   inline links already do the job). */
.mobile-menu-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; border: 1px solid #23232B;
    background: #101014; cursor: pointer; flex: 0 0 auto;
}
@media(min-width:900px){ .mobile-menu-btn{ display: none; } }
.mobile-menu-btn .bar { display: block; width: 16px; height: 1.5px; background: #C9CDD6; border-radius: 1px; transition: transform .25s ease, opacity .25s ease; }
.mobile-menu-btn .bar + .bar { margin-top: 4px; }
.mobile-menu-btn[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.mobile-menu-btn[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mobile-menu {
    display: none; flex-direction: column; gap: 2px;
    max-width: 1180px; margin: 0 auto; padding: 4px 24px 18px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
@media(min-width:760px){ .mobile-menu{ padding: 4px 40px 20px; } }
.mobile-menu.open { display: flex; }
@media(min-width:900px){ .mobile-menu{ display: none !important; } }
.mobile-menu a:not(.store-badge) {
    font-size: 15px; font-weight: 600; color: #C9CDD6; padding: 13px 2px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-menu a:not(.store-badge):hover { color: #F2F3F7; }
.mobile-menu .store-badge { margin-top: 14px; align-self: flex-start; }

/* ==============================================================================
   HERO
   ============================================================================== */

/* ═══════════ HERO ═══════════ */
.hero { padding: 32px 0 96px; overflow: clip; }
@media(min-width:1000px){ .hero{ padding: 56px 0 124px; } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 70px; align-items: center; position: relative; }
@media(min-width:1000px){ .hero-grid{ grid-template-columns: 1fr 1fr; gap: 20px; } }

.eyebrow-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: #A79EF7; background-color: rgba(124,111,240,0.08); border: 1px solid rgba(124,111,240,0.28);
    border-radius: 20px; padding: 7px 15px; margin-bottom: 26px;
}
.eyebrow-pill::before { content:''; width: 5px; height: 5px; border-radius: 50%; background-color: #7C6FF0; box-shadow: 0 0 8px #7C6FF0; }

h1 { font-size: clamp(38px, 5.4vw, 58px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 22px; color: #F5F6FA; }
h1 .grad {
    background-image: linear-gradient(96deg, #4E93EE 0%, #8B7CF6 48%, #E866AE 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 16.5px; line-height: 1.7; color: #9A9AA6; max-width: 400px; margin-bottom: 4px; }
.hero-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6C6C78; margin-top: 22px; }
.hero-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 28px; }
.hero-chips li {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #B4B4BE;
    background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px; padding: 6px 12px 6px 10px;
}
.hero-secondary-cta {
    display: none;
}
@media(min-width:760px){
    .hero-secondary-cta {
        display: inline-flex; align-items: center; gap: 7px;
        height: 48px; padding: 0 18px 0 20px; border-radius: 12px;
        font-size: 13.5px; font-weight: 600; color: #C7C7D1; text-decoration: none;
        border: 1px solid #23232B; background-color: rgba(255,255,255,0.02);
        transition: color .25s ease, border-color .25s ease, background-color .25s ease;
    }
}
.hero-secondary-cta svg { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.hero-secondary-cta:hover { color: #F2F3F7; border-color: #3C3C46; background-color: rgba(255,255,255,0.045); }
.hero-secondary-cta:hover svg { transform: translateX(3px); }

/* glow ring behind phone */
.phone-stage { position: relative; display: flex; justify-content: center; width: 100%; }
.glow-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: min(560px, 96vw); aspect-ratio: 1; border-radius: 50%;
    pointer-events: none; z-index: 0;
}
.glow-ring::before {
    content:''; position: absolute; inset: 0; border-radius: 50%;
    border: 1px solid rgba(124,111,240,0.18);
    box-shadow:
            0 0 90px 6px rgba(124,111,240,0.09) inset,
            0 0 130px 8px rgba(43,127,232,0.06);
}
.glow-ring::after {
    content:''; position: absolute; inset: -18%; border-radius: 50%;
    background:
            radial-gradient(circle at 78% 62%, rgba(139,92,246,0.18) 0%, transparent 26%),
            radial-gradient(circle at 20% 30%, rgba(43,127,232,0.13) 0%, transparent 28%),
            radial-gradient(circle at 50% 50%, rgba(124,111,240,0.05) 0%, transparent 62%);
    filter: blur(32px);
}
.ring-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background-color: #6FA4F2; box-shadow: 0 0 10px #4E93EE, 0 0 20px rgba(78,147,238,0.45); opacity: .8; }
.rd1 { top: 7%; left: 68%; }
.rd2 { top: 74%; left: 6%; width: 4px; height: 4px; }
.rd3 { top: 42%; left: 97%; width: 4px; height: 4px; background-color:#B79CF8; box-shadow: 0 0 10px #8B7CF6; }

/* ═══════════ PHONE ═══════════ */
.phone {
    /* 100%, not 92vw — vw measures the raw viewport and has no idea
       .phone sits inside .wrap's 24px padding, so the two never
       agreed on the same reference frame and centering drifted. 100%
       resolves against .phone's real containing block (.phone-stage,
       already correctly bounded), so it lines up with the flex
       centering exactly. The 392px cap still applies identically on
       desktop, where the containing column is wider than that. */
    width: min(392px, 100%); aspect-ratio: 1320 / 2868; background-color: #0B0B0F; border-radius: 46px; overflow: hidden; position: relative; z-index: 2;
    margin: 0 auto;
    box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 0 8px #0C0C10,
            0 0 0 9px rgba(255,255,255,0.05),
            0 80px 150px rgba(0,0,0,0.92),
            0 34px 80px rgba(60,50,160,0.16);
}
/* Single static screenshot — the Vehicle Details screen, same asset
   used in the Demo section. No crossfade animation: nothing in the
   hero should compete with the headline for attention, and the
   "look at the app" job now belongs to the Demo section right
   below, not the hero itself. */
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Sits exactly over the health ring baked into the hero screenshot
   (position + colors verified by pixel-analysis of the source image,
   not eyeballed). The mask circle covers the static ring; this SVG
   redraws it and animates the arc filling from 0% to 64% once, on
   load — reads as the score "loading in" rather than a flat, frozen
   number that was just always there. */
.hero-ring {
    position: absolute; left: 86.023%; top: 16.551%;
    width: 18.282%; aspect-ratio: 1; transform: translate(-50%, -50%);
    pointer-events: none; z-index: 3;
}
.hero-ring-arc {
    transition: stroke-dashoffset 1.7s cubic-bezier(.16,.7,.2,1);
}
.hero-ring-value {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    font-size: 35.5px; font-weight: 800; fill: #F0F2F5; letter-spacing: -0.02em;
}
@media (prefers-reduced-motion: reduce) {
    .hero-ring-arc { transition: none; }
}

/* Same treatment as the health ring, applied to the maintenance item
   progress bars — masks each original bar and regrows it to its
   actual value on load. Position/size pixel-measured from the
   source screenshot, not eyeballed. */
.hero-bar {
    position: absolute; height: 0.279%;
    pointer-events: none; z-index: 3;
}
.hero-bar-1 { top: 67.683%; left: 23.030%; width: 56.742%; }
.hero-bar-2 { top: 78.353%; left: 23.030%; width: 56.742%; }
.hero-bar-3 { top: 93.695%; left: 23.030%; width: 56.742%; }

.hero-bar-mask {
    position: absolute; inset: -8px -2px;
    background: #111113;
}
.hero-bar-track {
    position: absolute; inset: 0;
    background: #2A2A32; border-radius: 4px;
}
.hero-bar-fill {
    position: absolute; inset: 0; width: 0%;
    background: #D94F4F; border-radius: 4px;
    transition: width 1.1s cubic-bezier(.16,.7,.2,1);
}
/* Rear brake pads / Spark plugs — "on track" items, green fill
   instead of the overdue red. */
.hero-bar-2 .hero-bar-fill, .hero-bar-3 .hero-bar-fill {
    background: #30A46C;
}
@media (prefers-reduced-motion: reduce) {
    .hero-bar-fill { transition: none; }
}

/* Simple cover-then-reveal masks over the chips row, odometer card,
   and PDF/Specs buttons. Doesn't rebuild any content — the real thing
   is already sitting underneath, unanimated; the mask just hides it
   until its turn, then fades + scales away. Bounds pixel-measured
   from the source screenshot with a small safety margin so no edge
   of the original ever peeks out mid-animation. */
.hero-reveal {
    position: absolute; background: #000000;
    opacity: 1; transform: scale(1);
    transition: opacity .7s cubic-bezier(.16,.7,.2,1), transform .7s cubic-bezier(.16,.7,.2,1);
    pointer-events: none; z-index: 3;
}
.hero-reveal.is-hidden { opacity: 0; transform: scale(1.06); }

.hero-reveal-chips { left: 4.245%; top: 22.076%; width: 71.207%; height: 2.656%; border-radius: 6px; background: #09090B; }
.hero-reveal-odom  { left: 4.500%; top: 29.400%; width: 91.000%; height: 6.500%; border-radius: 14px; background: #111113; }

@media (prefers-reduced-motion: reduce) {
    .hero-reveal { transition: none; }
}

/* ==============================================================================
   SECTIONS
   ============================================================================== */

/* ═══════════ SECTION SHELL ═══════════ */
.section-pad { padding: 108px 0; }
@media(min-width:760px){ .section-pad{ padding: 148px 0; } }
.divider-top { border-top: 1px solid rgba(255,255,255,0.05); }
.section-center { text-align: center; max-width: 600px; margin: 0 auto 68px; }
.section-center h2, .section-left h2 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 800; letter-spacing: -0.026em; line-height: 1.16; }
.section-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7A72E8; margin-bottom: 16px; }
.section-desc { color: #9A9AA6; font-size: 15.5px; line-height: 1.68; margin-top: 16px; max-width: 480px; }
.accent-violet { background-image: linear-gradient(96deg, #4E93EE, #8B7CF6 60%, #E866AE); -webkit-background-clip:text; background-clip:text; color: transparent; }

/* Tighter section rhythm on mobile — every desktop value above is
   untouched, this only lowers the mobile-first numbers. */
@media(max-width:759px){
    .section-pad { padding: 64px 0; }
    .section-center { margin-bottom: 44px; }
}

/* ==============================================================================
   COMPONENTS
   ============================================================================== */

/* ═══════════ PROBLEM → SOLUTION ═══════════ */
.compare-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media(min-width:760px){ .compare-grid{ grid-template-columns: 1fr 1fr; gap: 20px; } }
.compare-col { border-radius: 20px; padding: 30px 26px; }
.compare-without { background: #0C0C10; border: 1px solid #1B1B22; }
.compare-with {
    background: #0C0C10; border: 1px solid rgba(124,111,240,0.35);
    box-shadow: 0 0 0 1px rgba(124,111,240,0.12), 0 30px 60px -30px rgba(124,111,240,0.35);
}
.compare-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
.compare-without .compare-label { color: #6C6C78; }
.compare-with .compare-label { color: #A79EF7; }
.compare-list { list-style: none; }
.compare-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; padding: 10px 0; }
.compare-without .compare-list li { color: #6C6C78; }
.compare-with .compare-list li { color: #E4E5EA; }
.compare-list li svg { flex-shrink: 0; margin-top: 5px; }

@media(max-width:759px){
    .compare-col { padding: 22px 20px; }
    .compare-list li { padding: 7px 0; }
}

/* ═══════════ WHY BMW ═══════════ */
.why-bmw-grid { display: grid; grid-template-columns: 1fr; gap: 56px; align-items: center; }
@media(min-width:900px){ .why-bmw-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } }
.gen-timeline-wrap { padding: 8px 4px; }
.gen-timeline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px;
}
.gen-track {
    position: absolute;
    left: 15px;
    right: 15px;
    top: 7px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
            90deg,
            rgba(78,147,238,.45),
            rgba(139,124,246,.65) 55%,
            rgba(232,102,174,.45)
    );
}
.gen-point {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
/* Inactive generations recede — a plain dim dot and a quieter
   label — so the active one (the one that matters: what SixLine
   supports today) is the only thing that visually competes with the
   timeline's track. */
.gen-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #0B0B0F;
    border: 2px solid #35353F;
    box-shadow: 0 0 0 5px #07070B;
    transition: border-color .3s ease, transform .3s ease;
}
.gen-code {
    font-size: 11.5px;
    font-weight: 600;
    color: #78787E;
    letter-spacing: 0.02em;
    transition: color .3s ease, font-weight .3s ease;
}
.gen-point.active .gen-dot {
    width: 15px; height: 15px;
    background: #8B7CF6;
    border-color: #8B7CF6;
    box-shadow:
            0 0 0 5px #07070B,
            0 0 18px rgba(139,124,246,.7),
            0 0 38px rgba(139,124,246,.32);
}
.gen-point.active .gen-code {
    color: #F2F3F7;
    font-weight: 800;
}
.gen-years { display: flex; justify-content: space-between; margin-top: 16px; font-size: 11px; font-weight: 600; color: #4B4B55; }
.gen-caption { display: flex; justify-content: center; font-size: 14px; color: #84848F; line-height: 1.65; margin-top: 30px; max-width: 340px; margin-left: auto; margin-right: auto; }

@media(max-width:759px){
    .gen-timeline-wrap { padding: 4px 2px; }
    .gen-years { margin-top: 10px; }
    .gen-caption { margin-top: 16px; }
}

/* ═══════════ WATCH IT WORK ═══════════ */
.steps-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media(min-width:760px){ .steps-grid{ grid-template-columns: repeat(3,1fr); gap: 24px; } }
.step-card { text-align: center; }
.step-frame {
    aspect-ratio: 1320 / 2868; max-width: 280px;
    border-radius: 20px; overflow: hidden; border: 1px solid #1B1B22; background-color: #0C0C10; margin: 0 auto 20px; box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
.step-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.step-num { font-size: 11.5px; font-weight: 800; letter-spacing: 0.14em; color: #7A72E8; margin-bottom: 8px; }
.step-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 7px; letter-spacing: -0.01em; }
.step-card p { font-size: 13.5px; color: #84848F; line-height: 1.6; max-width: 300px; margin: 0 auto; }

/* Demo now sits directly under the hero — a smaller top gap makes it
   read as a continuation of "here's the app" rather than a new,
   equally-weighted section starting cold. Bottom padding is
   untouched, so spacing into Problem below stays normal. */
@media(min-width:760px){ .hero-adjacent { padding-top: 64px; } }

/* ═══════════ FEATURES — glass cards with a colored light source ═══════════
   Each feature is a card lit from the top-left by its accent color: a
   radial wash behind the icon, a hairline border that warms to the
   accent on hover, and a gentle lift. The same three-accent system as
   before, promoted from decoration to architecture. */
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media(min-width:700px){ .feat-grid{ grid-template-columns: repeat(2,1fr); gap: 18px; } }
@media(min-width:1000px){ .feat-grid{ grid-template-columns: repeat(3,1fr); gap: 20px; } }
.feat {
    position: relative; text-align: left; background: #0C0C10;
    border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 30px 26px 27px;
    overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s ease, box-shadow .45s ease;
}
.feat::before {
    content:''; position:absolute; top:-70px; left:-70px; width: 220px; height: 220px;
    border-radius: 50%; opacity:.5; pointer-events:none;
    transition: opacity .45s ease;
}
/* A slightly slower, smaller lift reads as considered rather than
   bouncy — the shadow grows with it instead of the card just
   floating up, so it feels grounded, not springy. */
.feat:hover { transform: translateY(-3px); }
.feat:hover::before { opacity: .85; }
.feat.a-blue::before { background: radial-gradient(circle, rgba(78,147,238,0.13) 0%, transparent 65%); }
.feat.a-violet::before { background: radial-gradient(circle, rgba(139,124,246,0.13) 0%, transparent 65%); }
.feat.a-pink::before { background: radial-gradient(circle, rgba(232,102,174,0.12) 0%, transparent 65%); }
.feat.a-blue:hover { border-color: rgba(78,147,238,0.32); box-shadow: 0 22px 48px -22px rgba(78,147,238,0.3); }
.feat.a-violet:hover { border-color: rgba(139,124,246,0.32); box-shadow: 0 22px 48px -22px rgba(139,124,246,0.3); }
.feat.a-pink:hover { border-color: rgba(232,102,174,0.3); box-shadow: 0 22px 48px -22px rgba(232,102,174,0.28); }
.feat-icon {
    width: 50px; height: 50px; border-radius: 14px; margin: 0 0 20px;
    display:flex; align-items:center; justify-content:center; position: relative;
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.feat:hover .feat-icon { transform: scale(1.05); }
.feat-icon svg { width: 21px; height: 21px; }
.feat-icon::before { content:''; position:absolute; inset:0; border-radius:14px; border: 1px solid; opacity: 0.45; border-color: inherit; }
.feat-icon.c-blue { border-color:#4E93EE; background: rgba(78,147,238,0.09); }
.feat-icon.c-violet { border-color:#8B7CF6; background: rgba(139,124,246,0.09); }
.feat-icon.c-pink { border-color:#E866AE; background: rgba(232,102,174,0.09); }
.feat h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 9px; letter-spacing: -0.012em; line-height: 1.3; }
.feat p { font-size: 13px; color: #84848F; line-height: 1.62; max-width: none; margin: 0; }

/* Fix: this used to live in a shared "mobile density" block earlier
   in the file than .feat's own base rule, so the unconditional base
   padding (declared later in source) won every cascade tie on
   mobile and silently cancelled this reduction. Living right after
   the base rule now, it always wins on mobile as intended. */
@media(max-width:759px){
    .feat { padding: 24px 22px 22px; }
    .feat-grid { gap: 12px; }
}

/* ═══════════ INTERACTIVE DEMO — single phone, tabbed, cross-fading ═══════════
   Replaces the horizontal screenshot strip with a single large device
   that switches screens on tab click or auto-advance, each tab backed
   by a filling progress bar (Apple/Stripe "product tour" pattern) —
   reads as a live demo rather than a photo dump. */
.demo-stage {
    display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
    max-width: 1080px; margin: 0 auto;
}
@media(min-width: 860px) {
    .demo-stage { grid-template-columns: 300px 1fr; gap: 56px; }
}

.demo-tabs {
    display: flex;
    gap: 8px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;

    overscroll-behavior-x: contain;

    padding: 2px 4px 6px;

    -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 20px,
            black calc(100% - 20px),
            transparent
    );
    mask-image: linear-gradient(
            to right,
            transparent,
            black 20px,
            black calc(100% - 20px),
            transparent
    );
}

.demo-tabs::-webkit-scrollbar {
    display: none;
}
.demo-tabs::-webkit-scrollbar { display: none; }
@media(min-width: 860px) {
    .demo-tabs {
        flex-direction: column; gap: 2px; overflow: visible; padding: 0; scroll-snap-type: none;
        -webkit-mask-image: none; mask-image: none;
    }
}

/* Mobile (default): filled pill chips — the same selectable-chip
   language as the filter pills and segmented controls already used
   throughout the SixLine app itself, not a generic web tab row. A
   thin underline on a cramped phone row reads as "maybe clickable";
   a filled chip reads as a control immediately. */
.demo-tab {
    flex: 0 0 auto;

    text-align: center;
    cursor: pointer;

    font-family: inherit;
    color: inherit;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    padding: 9px 16px;
    border-radius: 20px;

    border: 1px solid #23232B;
    background-color: #101014;

    transition: background-color .25s ease,
    border-color .25s ease;

    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;

    touch-action: manipulation;
}

.demo-tab * {
    -webkit-user-select: none;
    user-select: none;
}
.demo-tab.active { background-color: rgba(92,155,238,0.14); border-color: rgba(92,155,238,0.55); }
.demo-tab-name { display: block; font-size: 13px; font-weight: 700; color: #9A9AA6; letter-spacing: -0.005em; transition: color .3s ease; }
.demo-tab.active .demo-tab-name { color: #F2F3F7; }
.demo-tab-desc { display: none; }
.demo-tab-track { display: none; }

/* Desktop: back to the vertical rail — left border indicator,
   description line, and the progress-fill bar. The active/inactive
   gap now reads through weight AND opacity, not color alone, so it
   still holds up at a glance without relying on exact hue perception. */
@media(min-width: 860px) {
    .demo-tab {
        width: 100%; text-align: left; padding: 13px 16px 13px 16px;
        border-radius: 0; border: none; border-left: 2px solid #1E1E26; background: none;
        transition: border-color .35s ease;
    }
    .demo-tab.active { background: none; border-left-color: #5C9BEE; }
    .demo-tab-name { font-size: 13.5px; font-weight: 600; color: #7A7A85; transition: color .3s ease, font-weight .3s ease; }
    .demo-tab.active .demo-tab-name { color: #F5F6FA; font-weight: 700; }
    .demo-tab:hover .demo-tab-name { color: #C9CDD6; }
    .demo-tab-desc { display: block; font-size: 12px; color: #6C6C78; line-height: 1.55; margin-top: 5px; opacity: .7; transition: opacity .3s ease; }
    .demo-tab.active .demo-tab-desc { opacity: .95; }
    .demo-tab-track { display: block; height: 2px; background: #1E1E26; margin-top: 10px; border-radius: 1px; overflow: hidden; }
}

.demo-tab-fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #5C9BEE, #7C6FF0); transform: scaleX(0); transform-origin: left; }
.demo-tab.active .demo-tab-fill { animation: demoFill 6.4s linear forwards; }
.demo-tabs.paused .demo-tab.active .demo-tab-fill { animation-play-state: paused; }
@keyframes demoFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.demo-phone-wrap { position: relative; width: 240px; margin: 0 auto; }
@media(min-width:860px){ .demo-phone-wrap { width: 300px; } }
.demo-glow {
    position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
    background: radial-gradient(circle, rgba(92,155,238,0.16) 0%, rgba(124,111,240,0.08) 45%, transparent 72%);
    filter: blur(6px);
}
.demo-phone {
    position: relative; width: 240px; aspect-ratio: 400 / 869;
    background-color: #0C0C10; border-radius: 32px; border: 1px solid #23232B;
    overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.55);
}
.demo-shot {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    opacity: 0; transform: scale(0.98) translateY(6px);
    transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.demo-shot.active { opacity: 1; transform: scale(1) translateY(0); position: relative; }

/* Widget tab: a small floating card, not a full-screen shot. Centering it
   at its own natural aspect ratio (instead of stretching to fill, which
   badly distorts its wide/short shape against the tall phone frame) makes
   the phone's own dark background show around it — exactly like a real
   widget sitting on an otherwise-plain Home Screen. */
.demo-shot-widget {
    width: 84%; height: auto;
    top: 50%; left: 50%; right: auto; bottom: auto;
    transform: translate(-50%, -50%) scale(0.98) translateY(6px);
}
.demo-shot-widget.active {
    position: absolute;
    transform: translate(-50%, -50%) scale(1) translateY(0);
}

@media(max-width:759px){ .hero-adjacent { padding-top: 28px; } }

/* ═══════════ PRICING ═══════════ */
.pricing-outer { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media(min-width:1000px){ .pricing-outer{ grid-template-columns: 0.85fr 1.6fr; gap: 40px; } }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media(min-width:680px){ .pricing-grid{ grid-template-columns: 1fr 1.06fr; } }
/* Free is quieter by construction — a plain surface, no border
   glow, nothing competing with the Pro card for attention. */
.plan-card {
    background-color: #0C0C10; border: 1px solid #1C1C22; border-radius: 22px;
    padding: 34px 30px; position: relative; display:flex; flex-direction:column;
    transition: border-color .3s ease;
}
.plan-card.hi {
    background-color: #100F16;
    border-color: rgba(124,111,240,0.5);
    box-shadow:
            0 0 0 1px rgba(124,111,240,0.2),
            0 0 70px -20px rgba(124,111,240,0.6),
            0 44px 90px -44px rgba(0,0,0,0.92);
}
.plan-ribbon {
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    font-size:9.5px; font-weight:800; letter-spacing:0.16em; color:#fff;
    background-image: linear-gradient(100deg,#2B7FE8,#7C6FF0 60%,#E85BB0);
    border-radius:20px; padding:7px 18px; white-space:nowrap;
    box-shadow: 0 8px 22px -4px rgba(124,111,240,0.65), inset 0 1px 0 rgba(255,255,255,0.25);
}
.plan-name { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.plan-tagline { font-size: 12.5px; color: #79797F; margin-bottom: 26px; }
/* Extra air directly around the number — the price is the one thing
   on this card that should never feel crowded. */
.plan-price { font-size: 38px; font-weight: 800; letter-spacing: -0.028em; margin-bottom: 4px; }
.plan-price .per { font-size: 13px; font-weight: 500; color: #6C6C78; }
.plan-price-note { font-size: 12px; color: #79797F; margin-bottom: 0; }
.plan-list { list-style:none; margin: 20px 0 30px; flex-grow:1; }
.plan-list li { display:flex; align-items:flex-start; gap: 11px; font-size: 13.5px; color: #C9CDD6; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.plan-list li:last-child { border-bottom: none; }
.plan-list li svg { flex-shrink:0; margin-top:2px; }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 50px; padding: 0 24px; border-radius: 14px; width: 100%;
    background-color: transparent; border: 1px solid #2B2B33; color: #F2F3F7;
    font-size: 14.5px; font-weight: 600; cursor: pointer; transition: border-color .3s ease, background-color .3s ease;
}
.btn-ghost:hover { border-color: #46464F; background-color: #14141A; }
.pill-cta {
    display: inline-flex; align-items:center; justify-content:center; gap: 7px;
    height: 50px; padding: 0 26px; border-radius: 14px; border: none; width: 100%;
    font-size: 14.5px; font-weight: 700; color: #fff; cursor: pointer;
    background-image: linear-gradient(100deg, #2B7FE8, #7C6FF0 55%, #E85BB0);
    box-shadow: 0 14px 30px -10px rgba(124,111,240,0.6), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.pill-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 42px -10px rgba(124,111,240,0.65), inset 0 1px 0 rgba(255,255,255,0.2); }
.pricing-footnote { font-size: 13px; color: #6C6C78; margin-top: 22px; line-height: 1.6; }
.pricing-footnote strong { color: #A79EF7; font-weight: 700; }

/* Same fix as .feat above — this override previously sat before
   .plan-card's own base rule and was losing the cascade on mobile. */
@media(max-width:759px){ .plan-card { padding: 28px 24px; } }

/* ═══════════ CTA BAND ═══════════ */
.cta-band-inner {
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:32px;
    background-color: #0E0E13; border: 1px solid rgba(255,255,255,0.08); border-radius: 26px; padding: 46px 46px;
    position: relative; overflow: hidden;
}
.cta-band-inner::before { content:''; position:absolute; left:-60px; bottom:-80px; width:280px; height:280px; background: radial-gradient(circle, rgba(124,111,240,0.24), transparent 65%); filter: blur(14px); pointer-events:none; }
.cta-band-inner::after { content:''; position:absolute; right:-40px; top:-90px; width:240px; height:240px; background: radial-gradient(circle, rgba(43,127,232,0.15), transparent 65%); filter: blur(14px); pointer-events:none; }
.cta-left { display:flex; align-items:center; gap: 22px; position:relative; z-index:1; }
.cta-icon { width: 60px; height: 60px; border-radius: 17px; background-color: #131318; border:1px solid rgba(255,255,255,0.09); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cta-left h2 { font-size: clamp(20px, 2.4vw, 25px); font-weight: 800; margin-bottom: 8px; letter-spacing: -0.022em; line-height: 1.25; }
.cta-left p { font-size: 13.5px; color: #8A8A94; max-width: 360px; line-height: 1.6; }
.cta-right { position: relative; z-index: 1; }
.cta-right-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; position: relative; z-index: 1; }
.cta-microcopy { font-size: 12px; color: #6C6C78; text-align: right; }
@media(max-width:680px){ .cta-right-wrap { align-items: flex-start; } .cta-microcopy { text-align: left; } }
@media(max-width:680px){
    .cta-band-inner { padding: 32px 26px; }
    .cta-left { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ==============================================================================
   RESPONSIVE — MOBILE-ONLY CAROUSEL PRESENTATIONS
   ============================================================================== */

/* ═══════════ MOBILE STEP CAROUSEL (VIN Decode / Invoice Scan) ═══════════
   Below 760px only — the 3-column grid at ≥760px above is completely
   untouched. Each card sits at ~86% width with the next one peeking
   in on the right, snapping into place on swipe. Title/description
   stay exactly where they already are: below the screenshot. */
@media(max-width:759px){
    .steps-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;

        padding: 4px 0 8px;
        margin: 0 -24px;

        scrollbar-width: none;
    }

    .steps-grid::-webkit-scrollbar {
        display: none;
    }

    .steps-grid::before,
    .steps-grid::after {
        content: "";
        flex: 0 0 7%;
    }

    .step-card {
        flex: 0 0 86%;
        scroll-snap-align: center;
        scroll-snap-stop: always;

        display: flex;
        flex-direction: column;

        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;

        touch-action: manipulation;
    }

    .step-card * {
        -webkit-user-select: none;
        user-select: none;
    }

    .step-frame {
        order: 2;
        margin: 16px auto 0;
    }

    .step-num,
    .step-card h3,
    .step-card p {
        order: 1;
    }

    .step-card:not(:last-child) {
        margin-right: 14px;
    }
}

/* Dot indicator — one set per carousel, injected by JS right after
   each .steps-grid. Hidden entirely at ≥760px, where there's no
   carousel to indicate. */
.carousel-dots { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
@media(min-width:700px){ .carousel-dots--feat { display: none; } }
@media(min-width:760px){ .carousel-dots--steps { display: none; } }
.carousel-dot {
    box-sizing: content-box;
    width: 6px; height: 6px; padding: 9px;
    position: relative;
    background: none;
    border: none; cursor: pointer;
}
.carousel-dot::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 6px; height: 6px; border-radius: 999px;
    transform: translate(-50%, -50%);
    background-color: #2B2B33;
    transition: background-color .3s ease, width .3s ease;
}
.carousel-dot:hover:not(.active)::before { background-color: #45454F; }
.carousel-dot.active::before { width: 18px; background-color: #7C6FF0; }

/* ═══════════ MOBILE FEATURE CAROUSEL ═══════════
   Same proven pattern as the VIN Decode / Invoice Scan carousel:
   real flex-item spacers (not container padding) so percentage math
   for centering resolves against the same base as the card's own
   flex-basis — the earlier bug here was padding resolving against
   the wrong containing block, only the middle card centering by
   coincidence. No touch-action override, for the same reason as the
   steps carousel: restricting it to pan-x let iOS Safari's own
   tab-switcher gesture hijack a vertical swipe instead of it
   scrolling the page. Card design itself (padding, icon, glow,
   borders) is untouched — this only changes how six already-designed
   cards are presented. */
@media (max-width:699px) {
    .feat-grid {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;

        padding: 4px 0 8px;
        margin: 0 -24px;

        scrollbar-width: none;

        /* Safari 16+ no longer needs this, and leaving it in
           sometimes produces odd swipe behavior. */
        /* -webkit-overflow-scrolling: touch; */
    }

    .feat-grid::-webkit-scrollbar {
        display: none;
    }

    .feat-grid::before,
    .feat-grid::after {
        content: "";
        flex: 0 0 7%;
    }

    .feat {
        flex: 0 0 86%;
        scroll-snap-align: center;
        scroll-snap-stop: always;

        -webkit-user-select: none;
        user-select: none;
        -webkit-user-drag: none;

        touch-action: manipulation;
    }

    .feat * {
        -webkit-user-select: none;
        user-select: none;
    }

    .feat:not(:last-child) {
        margin-right: 14px;
    }
}

/* Hover doar pe dispozitive care chiar au hover */
@media (hover: hover) {
    .feat:hover {
        transform: translateY(-3px);
    }
}

/* ==============================================================================
   ANIMATIONS
   ============================================================================== */

/* ═══════════ WOW LAYER ═══════════ */
/* gentle floating phone */
/* Nearly imperceptible — the phone should feel steady, not
   obviously animated; a slow, small drift reads as "alive" without
   drawing the eye away from the headline. */
.phone-float-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    animation: phone-float 16s ease-in-out infinite;
    will-change: transform;
}

.phone {
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease;
}
.phone-stage:hover .phone {
    /* Subtle scale + lift — reads as the whole object rising toward
       the viewer on hover. */
    transform: scale(1.025) translateY(-8px);
    box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 0 8px #0C0C10,
            0 0 0 9px rgba(255,255,255,0.05),
            0 86px 158px rgba(0,0,0,0.93),
            0 36px 86px rgba(60,50,160,0.18);
}

.glow-ring {
    transition: filter .6s ease, opacity .6s ease;
}
.phone-stage:hover .glow-ring {
    /* Brightness/opacity only — never transform. glow-ring's own
       transform is already driven by the continuous ring-orbit
       rotation keyframe; touching it here would fight that animation
       the same way float vs. tilt did before they were split onto
       separate layers. This gets the "glow blooms with the phone"
       feeling without any of that risk. */
    filter: brightness(1.45) saturate(1.15);
    opacity: 1;
}

@keyframes phone-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}

@media (hover: none) {
    .phone-float-wrap {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phone-float-wrap {
        animation: none;
    }
}
/* orbiting dots on the glow ring — slowed further so it registers as
   ambient light, not movement */
.glow-ring { animation: ring-orbit 70s linear infinite; }
@keyframes ring-orbit { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
/* shimmering headline gradient — slow enough that it reads as a
   subtle sheen, not a competing motion element next to the headline
   it colors */
h1 .grad, .accent-violet {
    background-size: 220% 100%;
    animation: grad-shift 14s ease-in-out infinite;
}
@keyframes grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
/* scroll reveal */
.reveal { opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity .85s cubic-bezier(.16,.7,.2,1), transform .85s cubic-bezier(.16,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0) scale(1); }
.reveal:nth-child(2) { transition-delay: .09s; }
.reveal:nth-child(3) { transition-delay: .18s; }
.reveal:nth-child(4) { transition-delay: .27s; }
.reveal:nth-child(5) { transition-delay: .36s; }
.reveal:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ═══════════ FOOTER ═══════════ */
footer { padding: 84px 0 42px; border-top: 1px solid rgba(255,255,255,0.05); }
.footer-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-bottom: 56px; }
@media(min-width:760px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; gap: 24px; } }
.footer-brand-desc { font-size: 13px; color: #6C6C78; max-width: 250px; line-height: 1.68; margin-top: 16px; }
.footer-col h3 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #5C5C66; margin-bottom: 19px; }
.footer-col a { display:block; font-size: 13.5px; color: #9A9AA6; margin-bottom: 13px; transition: color .3s ease, transform .3s ease; }
.footer-col a:hover { color: #F2F3F7; transform: translateX(2px); }
.footer-closing { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 32px; text-align:center; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #9A9AA6; }
.footer-bottom { text-align:center; font-size: 12px; letter-spacing: 0.01em; color: #78787E; margin-top: 10px; }