/* ============================================
   DuggVoice Landing Page — Premium Design
   Inspired by Cluely.com
   ============================================ */

:root {
    /* Blue palette matching download button */
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-primary-light: #60A5FA;
    --color-primary-soft: #93C5FD;
    --color-primary-50: #EFF6FF;
    --color-primary-100: #DBEAFE;
    --color-primary-200: #BFDBFE;

    /* Backgrounds with blue-purple gradient */
    --color-bg: #FFFFFF;
    --color-bg-page: #F8FAFF;
    --color-bg-soft: #F4F6FB;
    --color-bg-card: linear-gradient(150deg, rgba(99, 102, 241, 0.16) 0%, rgba(59, 130, 246, 0.22) 48%, rgba(56, 189, 248, 0.14) 100%);
    --color-bg-card-white: #FFFFFF;
    --color-bg-card-alt: linear-gradient(150deg, rgba(99, 102, 241, 0.14) 0%, rgba(59, 130, 246, 0.18) 100%);

    /* Text */
    --color-text: #0D0F1C;
    --color-text-secondary: #4B5067;
    --color-text-muted: #8B90A5;
    --color-text-on-primary: #FFFFFF;

    /* Borders */
    --color-border: #E2E5F0;
    --color-border-light: rgba(255, 255, 255, 0.6);
    --color-border-card: rgba(255, 255, 255, 0.35);

    /* Accents */
    --color-success: #22C55E;
    --color-amber: #F59E0B;

    /* Typography */
    --font-serif: 'Instrument Serif', Georgia, serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --section-gap: 140px;
    --container-max: 1180px;

    /* Radius - squarish with rounded corners */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-card: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 32px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12);
    --shadow-card: 0 2px 8px rgba(59, 130, 246, 0.08), 0 8px 32px rgba(59, 130, 246, 0.06);
    --shadow-card-hover: 0 4px 12px rgba(59, 130, 246, 0.12), 0 16px 48px rgba(59, 130, 246, 0.1);
    --shadow-blue: 0 4px 16px rgba(59, 130, 246, 0.35);

    /* Transitions */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 150ms var(--ease);
    --t-normal: 300ms var(--ease);
    --t-slow: 500ms var(--ease);
}

/* === Reset === */
*,
*::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-sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    overflow-x: hidden;
}

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

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

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px;
}

/* === Typography === */
h1,
h2,
h3 {
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

h1 {
    font-size: clamp(62px, 8.5vw, 100px);
}

h2 {
    font-size: clamp(36px, 5vw, 56px);
}

h3 {
    font-size: clamp(22px, 2.5vw, 28px);
}

em {
    font-style: italic;
}

kbd {
    display: inline-block;
    padding: 3px 9px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
    background: #FFF;
    border: 1px solid var(--color-border);
    border-radius: 7px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all var(--t-normal);
    white-space: nowrap;
    text-decoration: none;
}

.btn-icon {
    flex-shrink: 0;
}

.btn-primary {
    background: linear-gradient(180deg, #81BAFF 0%, #68A2FF 100%);
    color: white;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 9999px;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.9),
        inset 0 -5px 12px rgba(45, 95, 220, 0.5),
        inset 0 0 0 1px rgba(150, 190, 255, 0.6),
        0 8px 24px rgba(70, 130, 245, 0.35),
        0 16px 40px rgba(70, 130, 245, 0.25);
    position: relative;
    overflow: hidden;
    letter-spacing: -0.01em;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #90C3FF 0%, #75AAFF 100%);
    transform: translateY(-2px);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.95),
        inset 0 -5px 12px rgba(45, 95, 220, 0.45),
        inset 0 0 0 1px rgba(160, 200, 255, 0.7),
        0 10px 28px rgba(70, 130, 245, 0.4),
        0 20px 48px rgba(70, 130, 245, 0.3);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-text);
    padding: 12px 24px;
    font-size: 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    backdrop-filter: blur(8px);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    border-color: #B8BFD8;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.btn-large {
    padding: 15px 32px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 16px;
}

/* === HEADER === */
.header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid transparent;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 28px;
    height: 80px;
}

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

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-normal);
}

.logo-icon svg,
.logo-icon img {
    width: 40px;
    height: 40px;
    display: block;
}

.logo:hover .logo-icon {
    transform: translateY(-1px) scale(1.04);
}

.logo-text {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: -0.02em;
    font-style: italic;
}

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

.nav-link {
    font-size: 13.5px;
    font-weight: 450;
    color: var(--color-text-secondary);
    transition: color var(--t-fast);
    letter-spacing: -0.01em;
}

.nav-link:hover {
    color: var(--color-text);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-normal);
}

/* Collapse the (hidden) header download slot at the top so the persistent
   auth control sits flush right. It only matters once the user scrolls, at
   which point the download button floats fixed anyway. */
.header-actions:not(.show) {
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.header-actions.show {
    opacity: 1;
    pointer-events: auto;
}

/* === Auth control (persistent, top-right over the hero) === */
.auth-slot {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-signin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #16213C;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(20, 30, 60, 0.12);
    border-radius: 9999px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all var(--t-normal);
}

.auth-signin svg {
    flex-shrink: 0;
}

.auth-signin:hover {
    background: #fff;
    border-color: rgba(20, 30, 60, 0.18);
    box-shadow: 0 6px 18px rgba(20, 30, 60, 0.12);
    transform: translateY(-1px);
}

.auth-user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 6px 5px 8px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(20, 30, 60, 0.12);
    border-radius: 9999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.auth-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.auth-avatar-fallback {
    background: linear-gradient(135deg, #81BAFF 0%, #68A2FF 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.auth-name {
    font-size: 14px;
    font-weight: 600;
    color: #16213C;
    letter-spacing: -0.01em;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-signout {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: #56627E;
    background: rgba(20, 30, 60, 0.05);
    border: none;
    border-radius: 9999px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.auth-signout:hover {
    background: rgba(20, 30, 60, 0.1);
    color: #16213C;
}

.btn-header {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-radius: var(--radius-sm);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating download button when scrolled */
.btn-header.floating {
    position: fixed;
    right: 28px;
    top: 20px;
    z-index: 101;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}

/* === HERO === */
.hero {
    position: relative;
    padding: 150px 0 80px;
    overflow: hidden;
    text-align: center;
    /* Bold atmospheric aurora — saturated indigo→blue→cyan glow up top, fading to white */
    background:
        radial-gradient(135% 90% at 50% -18%, rgba(79, 70, 229, 0.30) 0%, rgba(59, 130, 246, 0.16) 32%, rgba(96, 165, 250, 0) 62%),
        radial-gradient(75% 55% at 86% -2%, rgba(124, 58, 237, 0.18) 0%, rgba(124, 58, 237, 0) 55%),
        radial-gradient(70% 50% at 12% 6%, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 55%),
        linear-gradient(180deg, #ECF1FF 0%, #F6F9FF 55%, #FFFFFF 100%);
}

/* Subtle ambience orbs */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-gradient-1 {
    position: absolute;
    top: -22%;
    left: 10%;
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, rgba(99, 130, 246, 0.20) 0%, transparent 70%);
    animation: float-1 22s ease-in-out infinite;
    filter: blur(72px);
}

.hero-gradient-2 {
    position: absolute;
    top: -14%;
    right: 6%;
    width: 680px;
    height: 680px;
    background: radial-gradient(circle, rgba(125, 177, 247, 0.18) 0%, transparent 70%);
    animation: float-2 28s ease-in-out infinite;
    filter: blur(72px);
}

.hero-gradient-3 {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(160, 200, 250, 0.14) 0%, transparent 70%);
    animation: float-3 20s ease-in-out infinite;
    filter: blur(72px);
}

@keyframes float-1 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(40px, -30px)
    }
}

@keyframes float-2 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-30px, 40px)
    }
}

@keyframes float-3 {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(25px, 25px)
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 550;
    color: var(--color-primary);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 100px;
    margin-bottom: 32px;
    backdrop-filter: blur(12px);
    letter-spacing: -0.01em;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.badge-dot {
    width: 7px;
    height: 7px;
    background: var(--color-success);
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.35
    }
}

.hero-title {
    font-size: clamp(36px, 4.8vw, 56px);
    margin-bottom: 18px;
    color: var(--color-text);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-title em {
    background: linear-gradient(120deg, #4F46E5 0%, #3B82F6 48%, #38BDF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
}

.hero-subtitle {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    max-width: 540px;
    margin: 0 auto 30px;
    font-weight: 400;
}

.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
}

/* "Is it safe?" expandable trust line under the hero download button */
.dl-trust {
    max-width: 540px;
    margin: 14px auto 0;
}

.dl-trust summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    font-size: 13px;
    font-weight: 550;
    letter-spacing: -0.01em;
    color: var(--color-text-secondary);
    transition: color var(--t-normal);
}

.dl-trust summary::-webkit-details-marker {
    display: none;
}

.dl-trust summary:hover {
    color: var(--color-text);
}

.dl-trust summary > svg:first-child {
    color: #059669;
}

.dl-trust-chevron {
    transition: transform var(--t-normal);
}

.dl-trust[open] .dl-trust-chevron {
    transform: rotate(180deg);
}

.dl-trust-body {
    margin-top: 10px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.dl-trust-body p {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-align: center;
}

.hero-note {
    font-size: 12.5px;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

/* ===== Cluely-style hero — scenic mountain landscape with legibility scrim ===== */
.hero {
    padding: 104px 0 56px;
    background:
        /* fade the very bottom to white so the section melts into the page */
        linear-gradient(180deg, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.55) 84%, #FFFFFF 100%),
        /* deepen the sky behind the headline so white type stays crisp */
        linear-gradient(180deg, rgba(34, 78, 158, 0.46) 0%, rgba(52, 110, 196, 0.22) 28%, rgba(255, 255, 255, 0) 52%),
        url('img/hero-landscape.jpg') center 22% / cover no-repeat,
        #bcd8f5;
}

/* photo replaces the floating orbs */
.hero .hero-bg {
    display: none;
}

.hero-badge {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px);
    box-shadow: 0 2px 14px rgba(13, 23, 68, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}

.badge-dot {
    background: #34D399;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.85);
}

.hero-title {
    color: #FFFFFF;
    text-shadow: 0 1px 28px rgba(20, 48, 110, 0.22);
}

.hero-title em {
    color: rgba(255, 255, 255, 0.96);
    -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
    font-style: italic;
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 3px rgba(20, 44, 96, 0.30), 0 2px 24px rgba(20, 44, 96, 0.22);
}

.hero-note {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(20, 44, 96, 0.34), 0 2px 18px rgba(20, 44, 96, 0.22);
}

.hero .btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    box-shadow: none;
}

.hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* White logo over the colored hero (header is absolute, only sits over the hero) */
.header .logo-text {
    color: #FFFFFF;
}

.header .logo-icon {
    filter: drop-shadow(0 4px 10px rgba(13, 23, 68, 0.22));
}

/* === Hero App Preview === */
.hero-preview {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 36px auto 0;
    padding: 0 28px;
}

/* Soft white halo behind the window — lifts the mock off the colored hero (Cluely-style) */
.hero-preview::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -10%;
    transform: translateX(-50%);
    width: 90%;
    height: 96%;
    background: radial-gradient(56% 62% at 50% 0%, rgba(255, 255, 255, 0.55) 0%, rgba(226, 236, 255, 0.25) 44%, transparent 74%);
    filter: blur(58px);
    border-radius: 48px;
    z-index: -1;
    pointer-events: none;
}

/* === macOS desktop stage — the app window floats on a real wallpaper, Cluely-style === */
.hero-stage {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    padding: 0 0 48px;
    background: url('img/desktop-wallpaper.jpg') center / cover no-repeat;
    box-shadow:
        0 2px 8px rgba(13, 15, 28, 0.06),
        0 32px 70px rgba(30, 50, 120, 0.28),
        0 64px 140px rgba(13, 15, 28, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.18) inset;
}

/* faux macOS menu bar */
.hero-stage-menubar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 16px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
    background: rgba(20, 20, 30, 0.22);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.hsm-left,
.hsm-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hsm-left .hsm-logo {
    display: inline-flex;
}

.hsm-left .hsm-app {
    font-weight: 700;
}

.hsm-left .hsm-menu {
    font-weight: 500;
    opacity: 0.82;
}

.hsm-right {
    gap: 12px;
}

.hsm-right svg {
    display: block;
    opacity: 0.95;
}

@media (max-width: 640px) {

    .hsm-left .hsm-menu,
    .hsm-right .hsm-hide-sm {
        display: none;
    }
}

.preview-window {
    position: relative;
    width: 90%;
    max-width: 940px;
    margin: 40px auto 0;
    background: var(--color-bg);
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow:
        0 2px 8px rgba(13, 15, 28, 0.10),
        0 30px 64px rgba(13, 15, 28, 0.34),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    overflow: hidden;
}

.preview-titlebar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    padding: 0 16px;
    background: linear-gradient(180deg, #FCFCFE 0%, #F1F2F6 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

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

.dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.dot-red {
    background: #FF5F57;
}

.dot-yellow {
    background: #FEBC2E;
}

.dot-green {
    background: #28C840;
}

/* centered command bar (Cluely-style) */
.preview-omnibar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 7px;
    width: min(48%, 380px);
    height: 28px;
    padding: 0 12px;
    background: rgba(15, 23, 42, 0.045);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 8px;
    font-size: 12.5px;
    color: #9aa0b4;
    white-space: nowrap;
    overflow: hidden;
}

.preview-omnibar svg {
    flex-shrink: 0;
}

.preview-titlebar-right {
    display: flex;
    align-items: center;
}

.preview-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4F46E5 0%, #38BDF8 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(13, 15, 28, 0.22);
}

/* App layout — matches desktop app (app/src/index.css) exactly */
.preview-app-layout {
    display: flex;
    height: 560px;
    background: #F8FAFF;
}

.preview-sidebar-app {
    width: 232px;
    background: linear-gradient(180deg, #F8FAFE 0%, #F1F5FC 100%);
    border-right: 1px solid rgba(15, 23, 42, 0.06);
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.preview-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 20px;
}

.preview-logo-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4F46E5 0%, #38BDF8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.35);
}

.preview-logo-icon svg {
    width: 16px;
    height: 16px;
}

.preview-logo-text {
    font-size: 16px;
    font-weight: 700;
    color: #0D0F1C;
    letter-spacing: -0.03em;
}

.preview-logo-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 9999px;
    color: #3B82F6;
    letter-spacing: 0.02em;
    background: rgba(59, 130, 246, 0.05);
}

.preview-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.preview-nav-spacer {
    flex: 1;
}

.preview-nav-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(59, 130, 246, 0.1);
    margin-top: 8px;
}

.preview-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 450;
    color: #4B5067;
    letter-spacing: -0.01em;
}

.preview-nav-item.active {
    background: rgba(59, 130, 246, 0.12);
    color: #3B82F6;
    font-weight: 550;
    box-shadow: inset 3px 0 0 #3B82F6;
}

.preview-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}

.preview-nav-item.active svg {
    opacity: 1;
}

.preview-main-app {
    flex: 1;
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 44px 44px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}

/* Cluely-style toolbar: title + model chip on the left, primary action on the right */
.preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.preview-toolbar-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.preview-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 600;
    color: #2563EB;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 9999px;
    white-space: nowrap;
}

.preview-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.preview-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.preview-start-cap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.preview-start-cap kbd {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #6B7090;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 2px 6px;
}

.preview-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 9999px;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.32), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.preview-readyline {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    margin-bottom: 26px;
    font-size: 13px;
    color: #4B5067;
    background: #F4F8FF;
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 12px;
}

.preview-readyline kbd {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: #2563EB;
    background: #fff;
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 5px;
    padding: 1px 5px;
    margin: 0 1px;
}

.preview-ready-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.16);
    flex-shrink: 0;
}

.preview-app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.preview-welcome {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    color: #0D0F1C;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0;
}

.preview-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}

.preview-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4B5067;
    font-weight: 500;
}

.preview-stat-icon {
    font-size: 14px;
}

.preview-stat-value {
    font-weight: 700;
    color: #0D0F1C;
}

.preview-banner {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.18) 100%);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

.preview-banner-text h3 {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 400;
    color: #0D0F1C;
    margin: 0 0 4px 0;
}

.preview-banner-text p {
    font-size: 13px;
    color: #4B5067;
    margin: 0;
}

.preview-banner-btn {
    padding: 8px 18px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.preview-history-section {
    margin-top: 8px;
}

.preview-history-date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3B82F6;
    margin-bottom: 16px;
}

.preview-history-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.preview-history-date-sub {
    margin-top: 24px;
}

.preview-history-item {
    display: flex;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 1px solid #E8EEFC;
    align-items: center;
    justify-content: space-between;
}

.preview-history-item:first-child {
    border-top: 1px solid #E8EEFC;
}

.preview-history-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.55;
    color: #1B2030;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preview-history-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.preview-dur {
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7090;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 6px;
    padding: 2px 8px;
}

.preview-time {
    font-size: 12.5px;
    font-weight: 500;
    color: #9499AD;
    min-width: 58px;
    text-align: right;
    flex-shrink: 0;
}

.preview-body {
    display: flex;
    min-height: 340px;
}

.preview-sidebar {
    width: 170px;
    padding: 14px 10px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: #FBFCFE;
}

.preview-sidebar-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    font-size: 13px;
    font-weight: 450;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    transition: all var(--t-fast);
    letter-spacing: -0.01em;
}

.preview-sidebar-item.active {
    background: var(--color-primary-50);
    color: var(--color-primary);
    font-weight: 500;
}

.preview-sidebar-item.settings {
    margin-top: auto;
}

.preview-main {
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.preview-welcome h3 {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 6px;
    color: var(--color-text);
}

.preview-welcome p {
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.preview-voice-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 16px 28px;
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.voice-dot {
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
    animation: voice-pulse 1.2s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes voice-pulse {

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

.preview-transcription {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 18px 22px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.transcript-label {
    display: block;
    font-size: 10.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.transcript-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text);
    margin-bottom: 10px;
}

.transcript-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-success);
    font-weight: 550;
}

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

/* New clean preview design */
.preview-content {
    padding: 60px 40px;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FAFBFF 0%, #F5F7FF 100%);
}

.preview-center {
    text-align: center;
    max-width: 500px;
    width: 100%;
}

.voice-indicator-large {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 80px;
    padding: 0 32px;
    margin-bottom: 20px;
}

.voice-wave {
    width: 4px;
    background: var(--color-primary);
    border-radius: 4px;
    animation: wave 1.2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes wave {

    0%,
    100% {
        height: 20px;
        opacity: 0.4;
    }

    50% {
        height: 60px;
        opacity: 1;
    }
}

.preview-status {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.preview-transcript-box {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.transcript-live {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    text-align: left;
}

.preview-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.preview-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: all var(--t-fast);
    font-family: var(--font-sans);
}

.preview-btn-stop {
    background: white;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

.preview-btn-stop:hover {
    background: var(--color-bg-soft);
    color: var(--color-text);
}

.preview-btn-primary {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(91, 108, 242, 0.3);
}

.preview-btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 108, 242, 0.4);
}

.status-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-success);
    font-weight: 550;
}

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

/* === Section Headers === */
.section-header {
    text-align: left;
    max-width: 560px;
    margin: 0 0 56px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    margin-bottom: 14px;
    color: var(--color-text);
    line-height: 1.08;
}

.section-subtitle {
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* === FEATURES — Cluely-style cards === */
.features {
    padding: 100px 0 80px;
    background: #FFFFFF;
}

/* Medusa-style hairline rails framing the content column for crisp structure */
.features,
.how-it-works {
    position: relative;
}

.features::before,
.how-it-works::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(var(--container-max), calc(100% - 56px));
    border-left: 1px solid rgba(15, 23, 42, 0.07);
    border-right: 1px solid rgba(15, 23, 42, 0.07);
    pointer-events: none;
    z-index: 0;
}

.how-it-works {
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.features .container,
.how-it-works .container {
    position: relative;
    z-index: 1;
}

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

.feature-card {
    position: relative;
    border-radius: 28px;
    padding: 0;
    overflow: hidden;
    transition: all var(--t-normal);
    background: var(--color-bg-card);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 30px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    opacity: 0;
    transition: opacity var(--t-normal);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.feature-card:hover::before {
    opacity: 1;
}

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

.feature-card-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.feature-card-visual {
    position: relative;
    padding: 38px 34px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 248px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    /* Tinted stage so the white mock window floats with depth (like the hero) */
    background:
        radial-gradient(120% 95% at 50% -12%, rgba(79, 70, 229, 0.12) 0%, rgba(59, 130, 246, 0.05) 42%, rgba(255, 255, 255, 0) 72%),
        linear-gradient(180deg, #EDF2FF 0%, #F6F9FF 100%);
}

/* faint hairline grid on the stage for crisp Cluely/Medusa structure */
.feature-card-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.028) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 30%, #000 0%, transparent 80%);
    mask-image: radial-gradient(80% 80% at 50% 30%, #000 0%, transparent 80%);
    pointer-events: none;
}

.feature-card-visual>* {
    position: relative;
    z-index: 1;
}

.feature-card-text {
    padding: 24px 28px 28px;
}

.feature-title {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 650;
    margin-bottom: 6px;
    color: var(--color-text);
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.feature-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* ============================================================
   Cluely-style "stage" feature cards (bold colored cards with
   the heading inside and a floating mock that pops)
   ============================================================ */
.feature-card.stage {
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
}

/* Wide stages: copy on the left, art on the right (one continuous stage) */
.feature-card-wide.stage {
    display: grid;
    grid-template-columns: 0.84fr 1fr;
    align-items: stretch;
}

/* Narrow stages: copy on top, art below */
.feature-card.stage:not(.feature-card-wide) {
    display: flex;
    flex-direction: column;
}

.stage-copy {
    padding: 44px 44px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.feature-card-wide.stage .stage-copy {
    padding: 48px 24px 48px 46px;
}

.stage-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px 40px;
    overflow: hidden;
    flex: 1;
}

.feature-card-wide.stage .stage-art {
    padding: 40px 46px 40px 24px;
}

.stage-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stage-eyebrow svg {
    width: 14px;
    height: 14px;
}

.stage-title {
    font-family: var(--font-sans);
    font-size: clamp(19px, 1.8vw, 23px);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.feature-card-wide.stage .stage-title {
    font-size: clamp(22px, 2.2vw, 30px);
}

.stage-desc {
    font-size: 14.5px;
    line-height: 1.62;
    max-width: 48ch;
    font-weight: 400;
}

/* ---- Blue stage (vibrant, Cluely signature) ---- */
.stage-blue {
    border: none !important;
    background: #6A99FE;
    box-shadow: 0 12px 32px rgba(106, 153, 254, 0.15), 0 4px 12px rgba(106, 153, 254, 0.08);
}

.stage-blue .stage-eyebrow { color: rgba(255, 255, 255, 0.85); }
.stage-blue .stage-title { color: #FFFFFF; }
.stage-blue .title-dim { color: rgba(255, 255, 255, 0.62); }
.stage-blue .stage-desc { color: rgba(255, 255, 255, 0.8); }

.stage-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(106, 153, 254, 0.2), 0 6px 16px rgba(106, 153, 254, 0.1);
}

/* ---- Light stage ---- */
.stage-light {
    border: none !important;
    background: #F4F6F9;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.02);
}

.stage-light .stage-eyebrow { color: #4F46E5; }
.stage-light .stage-title { color: var(--color-text); }
.stage-light .stage-desc { color: var(--color-text-secondary); }
.stage-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 6px 16px rgba(0, 0, 0, 0.03);
}

/* ---- Dark stage ---- */
.stage-dark {
    border: none !important;
    background: radial-gradient(115% 130% at 82% 0%, #344163 0%, #1F2A45 52%, #131B2F 100%);
    box-shadow: 0 26px 60px rgba(12, 18, 36, 0.42), 0 2px 8px rgba(12, 18, 36, 0.3);
}

.stage-dark .stage-eyebrow { color: #93C5FD; }
.stage-dark .stage-title { color: #FFFFFF; }
.stage-dark .title-dim { color: rgba(226, 232, 240, 0.55); }
.stage-dark .stage-desc { color: rgba(226, 232, 240, 0.72); }

.stage-dark .stage-desc .kbd-inline {
    display: inline-block;
    padding: 1px 8px;
    margin: 0 1px;
    font-size: 12.5px;
    font-weight: 600;
    color: #E2E8F0;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 6px;
}

.stage-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 76px rgba(12, 18, 36, 0.52);
}

/* ---- Frosted glass panel that floats inside colored stages ---- */
.glass-panel {
    width: 100%;
    max-width: 430px;
    border-radius: 16px;
    overflow: hidden;
}

.stage-blue .glass-panel,
.stage-dark .glass-panel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* Privacy monitor panel */
.gp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.gp-title {
    font-size: 12.5px;
    font-weight: 650;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.gp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 650;
    color: rgba(255, 255, 255, 0.9);
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 100px;
}

.gp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ADE80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.9);
}

.gp-body {
    padding: 11px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 11px;
}

.gp-ico {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
}

.gp-ico svg {
    width: 17px;
    height: 17px;
}

.gp-text {
    flex: 1;
    font-size: 13.5px;
    font-weight: 600;
    color: #FFFFFF;
}

.gp-flag {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 100px;
    letter-spacing: 0.01em;
}

.gp-flag.ok {
    color: #DCFCE7;
    background: rgba(34, 197, 94, 0.28);
    border: 1px solid rgba(134, 239, 172, 0.4);
}

.gp-flag.bad {
    color: #FEE2E2;
    background: rgba(239, 68, 68, 0.32);
    border: 1px solid rgba(252, 165, 165, 0.42);
}

.gp-row.danger .gp-ico {
    background: rgba(239, 68, 68, 0.3);
    color: #FECACA;
}

/* ---- Privacy panel: crisp solid-white card that pops off the blue ---- */
.stage-blue .glass-panel.privacy-panel {
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    box-shadow:
        0 38px 76px rgba(13, 30, 100, 0.5),
        0 12px 28px rgba(13, 30, 100, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.privacy-panel .gp-bar {
    padding: 15px 17px;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF1F7;
}

.privacy-panel .gp-title {
    color: #0D0F1C;
    font-weight: 700;
    font-size: 13px;
}

.privacy-panel .gp-pill {
    color: #15803D;
    background: #E7F8EE;
    border: 1px solid #C3EBD2;
}

.privacy-panel .gp-dot {
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

.privacy-panel .gp-body {
    padding: 13px;
    gap: 10px;
    background: linear-gradient(180deg, #F7F9FD 0%, #F1F5FC 100%);
}

.privacy-panel .gp-row {
    background: #FFFFFF;
    border: 1px solid #EAEEF6;
    box-shadow: 0 2px 6px rgba(18, 30, 70, 0.06);
    padding: 12px 13px;
    transition: all var(--t-normal);
}

.privacy-panel .gp-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(18, 30, 70, 0.1);
}

.privacy-panel .gp-text {
    color: #14203A;
    font-weight: 650;
}

.privacy-panel .gp-ico {
    color: #FFFFFF;
    box-shadow: 0 5px 12px rgba(18, 40, 120, 0.2);
}

.privacy-panel .gp-row:nth-child(1) .gp-ico {
    background: linear-gradient(150deg, #5B9BFF 0%, #3B78F2 100%);
}

.privacy-panel .gp-row:nth-child(2) .gp-ico {
    background: linear-gradient(150deg, #8E7CFF 0%, #6B57F0 100%);
}

.privacy-panel .gp-row.danger .gp-ico {
    background: linear-gradient(150deg, #FB8A8A 0%, #EF4444 100%);
    color: #FFFFFF;
}

.privacy-panel .gp-flag {
    border: none;
}

.privacy-panel .gp-flag.ok {
    color: #15803D;
    background: #E2F7EB;
}

.privacy-panel .gp-flag.bad {
    color: #C42525;
    background: #FCE4E4;
}

/* Hotkey dark stage art */
/* Hotkey dark stage art (Cluely premium style) */
.hk-stage-new {
    position: relative;
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.hk-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.hk-time {
    font-size: 42px;
    font-weight: 500;
    color: #FFFFFF;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
    line-height: 1;
}

.hk-rec-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    font-weight: 500;
}

.hk-rec-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF5A5A;
    box-shadow: 0 0 6px rgba(255, 90, 90, 0.8);
}

.hk-big-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
}

.hk-bar {
    width: 3px;
    background: #FFFFFF;
    border-radius: 4px;
    transition: height 0.2s ease;
}

/* Compact transcription chip — what DuggVoice is typing into the active app */
.hk-transcript {
    width: 100%;
    background: rgba(15, 23, 50, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hk-transcript-text {
    font-size: 14.5px;
    font-weight: 500;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.hk-caret {
    display: inline-block;
    margin-left: 1px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    animation: hkCaretBlink 1.05s steps(1) infinite;
}

@keyframes hkCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.hk-transcript-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.hk-transcript-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.62);
}

.hk-transcript-tag svg {
    width: 12px;
    height: 12px;
}

.hk-transcript-send {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(180deg, #4F8DFF 0%, #2F6BFF 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(47, 107, 255, 0.45);
    flex-shrink: 0;
}

.hk-transcript-send svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .feature-card-wide.stage {
        grid-template-columns: 1fr;
    }

    .feature-card-wide.stage .stage-copy {
        padding: 30px 26px 14px;
    }

    .feature-card-wide.stage .stage-art {
        padding: 8px 26px 30px;
    }
}

/* ---- Light frosted glass panel that floats inside light stages ---- */
.glass-panel-light {
    width: 100%;
    max-width: 440px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFF 100%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 34px 70px rgba(20, 33, 78, 0.16),
        0 10px 24px rgba(20, 33, 78, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    margin: 10px auto 0;
}

.gpl-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.gpl-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.gpl-badge {
    background: rgba(34, 197, 94, 0.12);
    color: #15803D;
    border: 1px solid rgba(34, 197, 94, 0.22);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 100px;
}

.gpl-badge.blue {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    border-color: rgba(59, 130, 246, 0.22);
}

.gpl-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

/* ===== Reusable high-fidelity macOS window frame for feature mocks (Medusa-grade) ===== */
.mock-frame {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 24px 50px rgba(13, 23, 68, 0.13),
        0 4px 12px rgba(13, 23, 68, 0.06);
}

.mock-frame-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: linear-gradient(180deg, #FCFDFF 0%, #F1F4FB 100%);
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.mfd {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.mfd:nth-child(1) { background: #FF5F57; }
.mfd:nth-child(2) { background: #FEBC2E; }
.mfd:nth-child(3) { background: #28C840; }

.mock-frame-title {
    margin-left: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #5A5E6E;
    letter-spacing: -0.01em;
}

.mock-frame-status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #16A34A;
    letter-spacing: -0.01em;
}

.mock-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
}

.mock-frame-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Privacy Visual - New Mock UI Style */
.privacy-visual-new {
    width: 100%;
    max-width: 100%;
}

.privacy-visual-right {
    padding: 44px 40px;
}

.privacy-mock-window {
    border-radius: 14px;
    overflow: hidden;
}

.privacy-mock-bar {
    display: none;
}

.privacy-mock-title {
    font-size: 12px;
    font-weight: 600;
    color: #5A5E6E;
    letter-spacing: -0.01em;
}

.privacy-mock-content {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.privacy-flow-item {
    display: flex;
    align-items: center;
    gap: 13px;
    position: relative;
    padding: 12px 14px;
    background: #F7FAFF;
    border: 1px solid rgba(15, 23, 42, 0.07);
    border-radius: 10px;
    transition: all var(--t-normal);
}

.privacy-flow-item:hover {
    background: #FFFFFF;
    border-color: rgba(59, 130, 246, 0.22);
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.08);
}

.privacy-flow-item.blocked {
    background: #FEF6F6;
    border-color: rgba(239, 68, 68, 0.18);
}

.privacy-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.privacy-icon-box.audio {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.privacy-icon-box.local {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.privacy-icon-box.model {
    background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
}

.privacy-icon-box.device {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.privacy-icon-box.cloud-blocked {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    position: relative;
}

.block-x {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    font-weight: 700;
    color: white;
    line-height: 1;
    pointer-events: none;
}

.privacy-flow-arrow {
    flex-shrink: 0;
    margin: 0 2px;
    display: none;
}

.privacy-flow-arrow.blocked-arrow {
    opacity: 0.5;
}

.privacy-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #0D0F1C;
    letter-spacing: -0.01em;
    flex: 1;
}

.privacy-flow-item.blocked .privacy-label {
    color: #EF4444;
}

.privacy-status-badge {
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

.privacy-status-badge.blocked-badge {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
}

/* Old privacy visual styles - keep for backwards compatibility */
.privacy-visual {
    display: flex;
    align-items: center;
    gap: 28px;
    width: 100%;
}

.shield-icon {
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(59, 130, 246, 0.2));
}

.privacy-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.privacy-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
}

.line-label {
    width: 65px;
    color: var(--color-text-secondary);
    font-weight: 550;
    font-size: 12.5px;
}

.line-path {
    flex: 1;
    display: flex;
    align-items: center;
}

.line-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.line-dot.start {
    background: var(--color-primary);
}

.line-dot.end {
    background: var(--color-success);
}

.line-track {
    flex: 1;
    height: 2px;
    margin: 0 4px;
}

.line-track.local {
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
}

.line-track.cloud {
    background: var(--color-border);
}

.line-cross {
    color: #EF4444;
    font-weight: 700;
    font-size: 16px;
    margin-left: 4px;
}

.line-dest {
    font-size: 12px;
    font-weight: 650;
    color: var(--color-success);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.privacy-line.crossed .line-dest {
    color: #EF4444;
}

/* Models Visual */
.models-preview {
    width: 100%;
}

.models-preview .mock-frame-body {
    gap: 7px;
}

.model-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text);
    box-shadow: 0 1px 2px rgba(20, 33, 78, 0.05);
    transition: all var(--t-normal);
    cursor: pointer;
}

.model-chip-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.model-chip-name {
    font-size: 13.5px;
    line-height: 1.2;
    font-weight: 650;
    color: #14203A;
}

.model-chip-sub {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
    color: #6B7689;
}

.model-chip.active .model-chip-sub {
    color: #5566A0;
}

.model-chip:hover {
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 8px 20px rgba(20, 33, 78, 0.1);
    transform: translateY(-1px);
}

.model-chip.active {
    border-color: rgba(59, 130, 246, 0.5);
    background: linear-gradient(180deg, #F4F9FF 0%, #FFFFFF 100%);
    color: var(--color-text);
    font-weight: 600;
    box-shadow: 0 12px 26px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.35) inset;
}

.model-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #CBD5E1;
    flex-shrink: 0;
    transition: all var(--t-fast);
}

.model-chip.active .model-dot {
    background: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.model-tag {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    background: rgba(15, 23, 42, 0.05);
    border-radius: 100px;
    color: var(--color-text-muted);
    letter-spacing: 0.01em;
}

/* Best fit — vivid blue pill */
.model-tag.accent {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 11px rgba(59, 130, 246, 0.34);
}

/* Installed — calm green with a check */
.model-tag.installed {
    background: #E8F7EE;
    color: #15803D;
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.model-tag.installed::before {
    content: '✓';
    margin-right: 4px;
    font-weight: 800;
}

/* Get — outlined button that fills on hover */
.model-tag.get {
    background: #FFFFFF;
    color: #2563EB;
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.08);
}

.model-chip:hover .model-tag.get {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #FFFFFF;
    border-color: transparent;
    box-shadow: 0 4px 11px rgba(59, 130, 246, 0.34);
}

/* Cleanup Visual */
.cleanup-preview {
    width: 100%;
}

.cleanup-before,
.cleanup-after {
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.cleanup-before {
    background: #F7FAFF;
    border: 1px solid rgba(15, 23, 42, 0.07);
    color: var(--color-text-secondary);
}

.cleanup-before p {
    color: #5B6475;
    margin: 0;
}

.cleanup-before .cw-fill {
    color: #DC2626;
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(220, 38, 38, 0.55);
}

.cleanup-after {
    background: linear-gradient(180deg, #F2F8FF 0%, #FFFFFF 100%);
    border: 1px solid rgba(59, 130, 246, 0.28);
    color: var(--color-text);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.1);
}

.cleanup-label {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 8px;
    border-radius: 5px;
    margin-bottom: 8px;
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
}

.cleanup-label.success {
    background: rgba(34, 197, 94, 0.08);
    color: var(--color-success);
}

.cleanup-arrow {
    display: flex;
    justify-content: center;
}

/* Hotkey Visual */
.feature-card-wide .feature-card-text {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-card-wide .feature-card-visual {
    padding: 44px 40px;
    border-bottom: none;
    border-left: 1px solid rgba(15, 23, 42, 0.06);
}

.hotkey-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

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

.key-large {
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 650;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 255, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-sm);
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
    color: var(--color-text);
    backdrop-filter: blur(8px);
    transition: all var(--t-fast);
}

.key-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.key-plus {
    font-size: 18px;
    color: var(--color-text-muted);
    font-weight: 300;
}

.hotkey-overlay-demo {
    width: 100%;
    display: flex;
    justify-content: center;
}

.overlay-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    border-radius: 100px;
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.overlay-dot {
    width: 5px;
    height: 5px;
    background: white;
    border-radius: 50%;
    animation: overlay-wave 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.12s);
}

@keyframes overlay-wave {

    0%,
    100% {
        transform: scaleY(0.5);
        opacity: 0.3;
    }

    50% {
        transform: scaleY(2);
        opacity: 1;
    }
}

.overlay-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.75);
    margin-left: 8px;
    font-weight: 450;
}

/* === HOW IT WORKS — matches feature section UI === */
.how-it-works {
    padding: 100px 0;
    background: #FFFFFF;
}

.how-it-works .section-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto 64px;
}

.how-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.how-card {
    background: var(--color-bg-card);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-card), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    transition: all var(--t-normal);
    backdrop-filter: blur(10px);
}

.how-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

.how-card-visual {
    padding: 32px 24px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
}

.how-mock {
    width: 100%;
    max-width: 320px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFF 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 12px 32px rgba(13, 23, 68, 0.08),
        0 4px 12px rgba(13, 23, 68, 0.04),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset,
        0 0 0 1px rgba(13, 23, 68, 0.05);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.how-card:hover .how-mock {
    transform: translateY(-4px) scale(1.02);
    box-shadow:
        0 20px 48px rgba(13, 23, 68, 0.12),
        0 8px 24px rgba(13, 23, 68, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.9) inset,
        0 0 0 1px rgba(13, 23, 68, 0.06);
}

.mock-content {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Download mock */
.download-icon {
    width: 64px;
    height: 64px;
    background: #EFF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-filename {
    font-size: 15px;
    font-weight: 700;
    color: #0D0F1C;
    letter-spacing: -0.02em;
}

.download-size {
    font-size: 12px;
    font-weight: 600;
    color: #3B82F6;
}

.download-badge {
    font-size: 11px;
    font-weight: 650;
    padding: 5px 12px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(96, 165, 250, 0.18) 100%);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 100px;
    color: #3B82F6;
    margin-top: 4px;
}

/* Recording mock — matches feature section hotkey overlay */
.recording-content {
    gap: 20px;
}

.how-hotkey-keys .key-large {
    padding: 10px 18px;
    font-size: 13px;
}

.how-overlay-pill {
    padding: 12px 24px;
}

.how-overlay-pill .overlay-dot {
    width: 5px;
    height: 5px;
}

.key-mock {
    padding: 8px 16px;
    background: #F3F4F6;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0D0F1C;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05);
}

/* Text mock — matches feature section polish */
.text-mock .mock-content {
    padding: 24px 20px;
    align-items: flex-start;
}

.text-editor {
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.75;
    color: #0D0F1C;
}

.editor-line {
    padding: 3px 0;
}

.editor-line.typing {
    color: #3B82F6;
    font-weight: 500;
}

.cursor {
    animation: blink 1s infinite;
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

.insert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 650;
    color: #16A34A;
}

.how-card-text {
    padding: 0 28px 32px;
    text-align: center;
}

.how-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 650;
    margin-bottom: 8px;
    color: var(--color-text);
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.how-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* === STATS === */
.stats {
    padding: 100px 0;
    background: #FFFFFF;
}

.stats-layout {
    display: flex;
    align-items: center;
    gap: 80px;
}

.stats-preview {
    flex: 1;
}

/* Outer lavender outer card — as in the Cluely screenshot */
.stats-floating-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.sf-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #363638;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    padding: 6px 6px 6px 12px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.sf-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-hide {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
}

.sf-hide svg {
    width: 14px;
    height: 14px;
}

.sf-stop {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-square {
    width: 10px;
    height: 10px;
    background: #FFFFFF;
    border-radius: 2px;
}

.sf-box {
    background: #4B4D52;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
}

.sf-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sfb-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.sfb-badge {
    background: #1D4ED8;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 100px;
}

.sfb-desc {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.sfb-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sfb-actions span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.sfb-actions svg {
    width: 14px;
    height: 14px;
}

.sfb-dot-sep {
    color: rgba(255, 255, 255, 0.3) !important;
}

.sfb-input {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sfb-input-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sfb-input-text kbd {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: #FFF;
    font-family: var(--font-sans);
}

.sfb-input-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sfb-smart {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 100px;
}

.sfb-smart svg {
    width: 12px;
    height: 12px;
}

.sfb-dots {
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-left: 4px;
}

.sfb-send {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1D4ED8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.sfb-send svg {
    width: 14px;
    height: 14px;
}

/* Right side stats content */
.stats-content {
    flex: 1;
}

.stats-content .section-title {
    text-align: left;
    margin-bottom: 0;
    font-size: clamp(30px, 4vw, 44px);
}

.stats-list {
    display: flex;
    flex-direction: column;
    margin-top: 28px;
}

/* Each stat row is separated by a thin border-top — exactly like the screenshot */
.stat-item {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 28px 0;
    border-top: 1px solid var(--color-border);
}

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

.stat-number {
    font-family: var(--font-sans);
    font-size: 54px;
    font-weight: 700;
    color: #0F172A;
    line-height: 1;
    min-width: 120px;
    letter-spacing: -0.04em;
    flex-shrink: 0;
}

.stat-unit {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: #0F172A;
}

.stat-info h4 {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 650;
    color: var(--color-text);
    margin-bottom: 5px;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.stat-info p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--color-text-secondary);
    max-width: 280px;
}

/* === PRICING (Cluely-style cards) === */
.pricing {
    padding: 100px 0;
    background: #FFFFFF;
}

.pricing-head {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 48px;
}

.pricing-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.pricing-title {
    font-family: var(--font-serif);
    font-size: clamp(36px, 4.5vw, 54px);
    color: var(--color-text);
    line-height: 1.06;
    margin-bottom: 18px;
    letter-spacing: -0.015em;
}

.pricing-desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    max-width: 760px;
    margin: 0 auto;
}

.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 32px;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    box-shadow:
        0 1px 2px rgba(30, 45, 90, 0.02),
        0 8px 16px rgba(30, 45, 90, 0.04),
        0 24px 48px rgba(30, 45, 90, 0.06),
        0 48px 96px rgba(30, 45, 90, 0.08);
    transition: all var(--t-normal);
}

.price-card.featured {
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        0 1px 2px rgba(30, 45, 90, 0.03),
        0 12px 24px rgba(30, 45, 90, 0.05),
        0 32px 64px rgba(30, 45, 90, 0.08),
        0 64px 128px rgba(30, 45, 90, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(30, 45, 90, 0.02),
        0 12px 24px rgba(30, 45, 90, 0.05),
        0 32px 64px rgba(30, 45, 90, 0.08),
        0 64px 128px rgba(30, 45, 90, 0.1);
}

.price-card.featured:hover {
    box-shadow:
        0 1px 2px rgba(30, 45, 90, 0.03),
        0 16px 32px rgba(30, 45, 90, 0.06),
        0 40px 80px rgba(30, 45, 90, 0.1),
        0 80px 160px rgba(30, 45, 90, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.price-card.muted {
    background: #FAFBFE;
}

.price-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    padding: 4px 10px;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.price-name {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.price-amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.price-num {
    font-family: var(--font-sans);
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--color-text);
}

.price-card.featured .price-num {
    color: #0D0F1C;
}

.price-card.muted .price-num {
    color: var(--color-text-muted);
}

.price-per {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.price-sub {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 22px;
    line-height: 1.5;
}

.price-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    transition: all var(--t-fast);
    margin-bottom: 24px;
}

.price-btn.primary {
    color: #fff;
    background: linear-gradient(180deg, #2E3036 0%, #1A1C20 100%);
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    padding: 13px 26px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 1px 2px rgba(15, 23, 42, 0.2),
        0 4px 12px rgba(15, 23, 42, 0.4);
    position: relative;
    overflow: hidden;
}

.price-btn.primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #35383F 0%, #1D1F24 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 2px 4px rgba(15, 23, 42, 0.25),
        0 8px 16px rgba(15, 23, 42, 0.45);
}

.price-btn.disabled {
    color: var(--color-text-muted);
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(15, 23, 42, 0.08);
    cursor: default;
}

.price-list {
    list-style: none;
    margin: 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--color-divider);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.price-list li {
    position: relative;
    padding-left: 28px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--color-text);
}

.price-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.4 6.2L4.9 8.7L9.6 3.6' stroke='%234F46E5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.price-list.muted-list li {
    color: var(--color-text-secondary);
}

.price-list li.x {
    color: var(--color-text-muted);
}

.price-list li.x::before {
    background: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3.5 3.5L8.5 8.5M8.5 3.5L3.5 8.5' stroke='%2394A3B8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* === FAQ === */
.faq {
    padding: 100px 0;
    background: #FFFFFF;
}

.faq .section-header {
    text-align: center;
    max-width: 540px;
    margin: 0 auto 56px;
}

.faq-list {
    max-width: 680px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    transition: all var(--t-normal);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.5);
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -12px;
    margin-right: -12px;
    border-radius: var(--radius-md);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    font-family: var(--font-sans);
    font-size: 15.5px;
    font-weight: 550;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    transition: color var(--t-fast);
    letter-spacing: -0.01em;
}

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

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

.faq-icon {
    font-size: 20px;
    color: var(--color-text-muted);
    transition: transform var(--t-normal);
    font-weight: 300;
}

.faq-item[open] .faq-icon {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 0 20px;
}

.faq-answer p {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* === CTA === */
/* === CTA + FOOTER — one continuous airy lavender panel (Cluely-style) === */
.cta {
    position: relative;
    padding: 96px 0 34px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EEF1FA 40%, #E6EAF6 100%);
    border-top: 1px solid rgba(15, 23, 42, 0.05);
    overflow: hidden;
    text-align: left;
}

.cta-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 230px;
    margin-bottom: 76px;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 540px;
}

.cta-title {
    margin-bottom: 12px;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.cta-title em {
    color: var(--color-primary-hover);
    -webkit-text-fill-color: currentColor;
    background: none;
    font-style: italic;
}

.cta-subtitle {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin-bottom: 26px;
}

.cta-note {
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.btn-cta {
    padding: 13px 26px;
    font-size: 15px;
}

/* Floating 3D keycaps — clean white keys + one candy-blue focal key (Cluely-style) */
.cta-keys {
    position: relative;
    z-index: 1;
    width: 370px;
    height: 268px;
    flex-shrink: 0;
}

/* Real keycap: top face + solid bottom wall (the 0 Ypx 0 color trick) + ambient shadow */
.cta-key {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F4FC 58%, #E7ECF8 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.95),
        inset 0 -9px 15px rgba(170, 184, 220, 0.32),
        0 9px 0 #C6CFE3,
        0 13px 7px rgba(64, 84, 146, 0.16),
        0 24px 40px rgba(64, 84, 146, 0.26);
}

/* White option key */
.cta-key-opt {
    width: 104px;
    height: 104px;
    border-radius: 26px;
    right: 30px;
    top: 0;
    transform: rotate(11deg);
    font-size: 44px;
    font-weight: 400;
    color: #97A1BD;
}

.cta-key-opt span,
.cta-key-space span {
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* White space bar */
.cta-key-space {
    width: 176px;
    height: 78px;
    border-radius: 22px;
    right: 8px;
    bottom: 4px;
    transform: rotate(7deg);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #8B95B2;
}

/* Candy-blue focal key (mic) — matches the glossy download button */
.cta-key-mic {
    width: 150px;
    height: 150px;
    border-radius: 32px;
    left: 12px;
    top: 84px;
    transform: rotate(-8deg);
    color: #FFFFFF;
    background:
        radial-gradient(120% 80% at 50% 4%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 46%),
        linear-gradient(180deg, #6FA1FF 0%, #4C84F6 52%, #3B78F2 100%);
    box-shadow:
        inset 0 2px 2px rgba(255, 255, 255, 0.6),
        inset 0 -13px 20px rgba(26, 66, 168, 0.5),
        inset 0 0 0 1.5px rgba(150, 188, 255, 0.5),
        0 11px 0 #2B5FD6,
        0 17px 12px rgba(40, 90, 200, 0.3),
        0 32px 54px rgba(54, 110, 235, 0.46);
}

/* Soft diffuse blue glow behind only the focal key */
.cta-key-mic::before {
    content: '';
    position: absolute;
    inset: -48%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(92, 150, 255, 0.55) 0%, rgba(92, 150, 255, 0) 66%);
    filter: blur(26px);
    z-index: -1;
}

.cta-key-mic svg {
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 2px 3px rgba(20, 50, 140, 0.4));
}

/* === FOOTER (nested in the CTA panel) === */
.footer {
    position: relative;
    z-index: 2;
    padding-top: 38px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

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

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

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

.footer-brand .logo-text {
    color: var(--color-text);
}

.footer-tagline {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

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

.footer-col h4 {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 14px;
    text-transform: none;
    letter-spacing: 0;
}

.footer-col a {
    display: block;
    font-size: 13.5px;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
    transition: color var(--t-fast);
}

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

.footer-status {
    margin-bottom: 22px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 12.5px;
    font-weight: 550;
    color: var(--color-text-secondary);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 18px;
    border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.footer-bottom p {
    font-size: 13px;
    color: var(--color-text-muted);
}

.footer-social {
    display: flex;
    gap: 8px;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--color-text-muted);
    transition: all var(--t-fast);
}

.social-link:hover {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.7);
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .stats-layout {
        flex-direction: column;
        gap: 48px;
    }

    .stats-content .section-title {
        text-align: center;
    }

    .feature-card-wide {
        grid-template-columns: 1fr;
    }

    .feature-card-wide .feature-card-visual {
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.06);
    }

    /* On wide cards where the visual comes first in source (none here), keep order natural */
}

@media (max-width: 768px) {
    .hero {
        padding: 110px 0 40px;
    }

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

    .feature-card-large {
        grid-column: auto;
    }

    .feature-card-wide {
        grid-column: auto;
    }

    .privacy-visual {
        flex-direction: column;
        align-items: flex-start;
    }

    .how-cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .how-card-visual {
        min-height: 220px;
    }

    .hero-cta {
        flex-direction: column;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }

    .cta-panel {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-height: 0;
        margin-bottom: 56px;
    }

    .cta-keys {
        display: none;
    }

    .footer-top {
        flex-direction: column;
        gap: 36px;
    }

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

    .preview-sidebar-app {
        display: none;
    }

    .preview-app-layout {
        height: 460px;
    }

    .preview-sidebar-app {
        width: 200px;
    }

    .preview-main-app {
        padding: 24px 20px;
    }

    .preview-app-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .preview-welcome {
        font-size: 26px;
    }

    .preview-banner {
        flex-direction: column;
        gap: 12px;
        text-align: left;
    }

    .preview-banner-btn {
        width: 100%;
    }

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

@media (max-width: 480px) {
    .hero-title {
        font-size: 42px;
    }

    .preview-body {
        min-height: 260px;
    }

    .pricing-card {
        max-width: 100%;
    }

    .price-num {
        font-size: 44px;
    }
}

/* === Additional Polish === */

/* Smooth scroll for the entire page */
html {
    scroll-padding-top: 80px;
}

/* Add subtle animation to hero content */
.hero-content {
    animation: fadeInUp 0.8s ease-out;
}

/* Enhanced focus states for accessibility */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Smooth transitions for all interactive elements */
button,
a,
input,
select,
textarea {
    transition: all var(--t-fast);
}

/* Add subtle hover effect to all cards */
.stats-card-outer:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
}

/* Enhanced mobile touch targets */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        padding: 12px 24px;
    }

    .nav-link {
        padding: 12px 0;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ---- Stats transcript mock: soft periwinkle panel + clean white window ---- */
.stats-card-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 46px 52px;
    border-radius: 30px;
    background: linear-gradient(160deg, #E4EAF8 0%, #D3DDF3 55%, #C4D1EE 100%);
    box-shadow:
        0 30px 70px rgba(59, 96, 178, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transition: transform var(--t-normal), box-shadow var(--t-normal);
}

.stats-window {
    width: 100%;
    max-width: 300px;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    padding: 18px 18px 20px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

.sw-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.sw-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
}

.sw-sep {
    font-size: 11px;
    color: var(--color-text-muted);
}

.sw-avatars {
    display: inline-flex;
    align-items: center;
}

.sw-avatars i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #FFFFFF;
    display: inline-block;
}

.sw-avatars i:first-child {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
}

.sw-avatars i:last-child {
    background: linear-gradient(135deg, #A78BFA, #7C3AED);
    margin-left: -6px;
}

.sw-meta {
    font-size: 11px;
    color: var(--color-text-muted);
}

.sw-title {
    font-family: var(--font-sans);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--color-text);
    margin-bottom: 14px;
}

.sw-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.sw-tab {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 7px;
    color: var(--color-text-muted);
    background: transparent;
}

.sw-tab.active {
    color: var(--color-text);
    background: rgba(15, 23, 42, 0.06);
}

.sw-msgs {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sw-msg-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 3px;
}

.sw-spk {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.sw-spk.ai {
    color: #3B82F6;
}

.sw-time {
    font-size: 10px;
    color: var(--color-text-muted);
}

.sw-msg p {
    font-size: 12px;
    line-height: 1.55;
    color: var(--color-text-secondary);
}

.sw-msg.ai p,
.sw-msg:nth-child(2) p {
    color: var(--color-text);
}

/* ============================================================
   Install instructions modal (OS-detected download flow)
   ============================================================ */
.install-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.install-overlay.open {
    opacity: 1;
    visibility: visible;
}

.install-card {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 28px;
    padding: 30px 40px 26px;
    box-shadow:
        0 40px 100px rgba(15, 23, 42, 0.3),
        0 10px 30px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(16px) scale(0.97);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.install-card::-webkit-scrollbar {
    width: 9px;
}

.install-card::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.14);
    border-radius: 100px;
    border: 3px solid #fff;
}

.install-overlay.open .install-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.install-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--color-text-muted);
    background: transparent;
    transition: all var(--t-fast);
}

.install-close:hover {
    background: rgba(15, 23, 42, 0.06);
    color: var(--color-text);
}

.install-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.01em;
    color: #15803D;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    padding: 5px 12px 5px 10px;
    border-radius: 100px;
    margin: 4px auto 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.install-status svg {
    width: 13px;
    height: 13px;
}

.install-title {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 750;
    text-align: center;
    color: var(--color-text);
    margin: 12px 0 30px;
    letter-spacing: -0.02em;
}

.install-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.ins-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Number badge popping over the top edge of each card */
.ins-num {
    position: absolute;
    top: -13px;
    left: 16px;
    z-index: 4;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #5B9DF9;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px #fff, 0 4px 10px rgba(37, 99, 235, 0.3);
}

.ins-art {
    position: relative;
    height: 156px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ins-cap {
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    text-align: center;
    padding: 0 6px;
}

.ins-cap b {
    color: #2563EB;
    font-weight: 650;
}

.ins-cursor {
    position: absolute;
    width: 15px;
    height: 18px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ---- Step 1: dark Downloads panel ---- */
.ins-dl {
    background: linear-gradient(165deg, #232a52 0%, #14182e 100%);
    flex-direction: column;
}

.ins-dl-pill {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 600;
    color: #e7ebf7;
    background: rgba(255, 255, 255, 0.14);
    padding: 4px 16px;
    border-radius: 9px;
}

.ins-dl-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 26px;
}

.ins-dl-tile {
    width: 40px;
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

.ins-dl-tile.is-file {
    width: 52px;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
}

.ins-dl-tile.is-file img {
    width: 36px;
    height: 36px;
    display: block;
}

.ins-dl .ins-cursor {
    left: 57%;
    top: 58%;
}

/* ---- Step 2: drag to Applications ---- */
.ins-drag2 {
    background: #E9EBF2;
    justify-content: space-between;
    padding: 0 24px;
}

.ins-drag-app {
    position: relative;
    flex: 0 0 auto;
}

.ins-drag-app img {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(15, 23, 42, 0.2));
}

.ins-hand {
    position: absolute;
    right: -12px;
    bottom: -8px;
    width: 26px;
    height: 26px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.ins-drag-arr {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
}

.ins-drop {
    flex: 0 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 16px;
    border: 2px dashed rgba(47, 107, 246, 0.55);
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ins-folder2 {
    width: 56px;
    height: 46px;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(47, 107, 246, 0.3));
}

/* ---- Step 3: Applications list ---- */
.ins-list {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.09);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

.ins-list-head {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text);
    padding: 11px 14px 9px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.ins-list-rows {
    position: relative;
    padding: 5px 0;
}

.ins-list-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12.5px;
    font-weight: 500;
    color: #44506b;
    padding: 7px 13px;
}

.ins-row-ic {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex: 0 0 auto;
}

.ins-list-row.is-sel {
    background: linear-gradient(180deg, #3B82F6 0%, #2F6BF6 100%);
    color: #fff;
    font-weight: 600;
}

.ins-list-row .ins-cursor {
    right: 12px;
    top: 50%;
    transform: translateY(-30%);
}

/* ---- Generic glyph card (Windows / Linux) ---- */
.ins-glyph {
    background: linear-gradient(165deg, #EEF3FF 0%, #F7F9FE 100%);
}

.ins-glyph svg {
    width: 54px;
    height: 54px;
    color: #2F6BF6;
}

.ins-glyph-dark {
    background: linear-gradient(165deg, #232a52 0%, #14182e 100%);
}

.ins-term-mini {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #93C5FD;
    text-align: center;
}

.ins-term-mini span {
    color: rgba(255, 255, 255, 0.45);
}

/* ---- Trust + first-launch cards ---- */
.install-extra:not(:empty) {
    margin-top: 32px;
    max-width: 680px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ins-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    padding: 20px 24px;
    background: #F8FAFC;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.ins-card-safe {
}

.ins-card-launch {
}

.ins-card-ic {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
}

.ins-card-ic svg {
    width: 18px;
    height: 18px;
}

.ins-card-safe .ins-card-ic {
    color: #059669;
}

.ins-card-launch .ins-card-ic {
    color: #475569;
}

.ins-card-tx {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.ins-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 650;
    color: var(--color-text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.ins-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748B;
    background: #E2E8F0;
    border-radius: 100px;
    padding: 3px 8px;
}

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

.ins-card-body b {
    color: var(--color-text);
    font-weight: 600;
}

.ins-card-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ins-card-list li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.ins-card-list li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #94A3B8;
}

.ins-card-list li b {
    color: var(--color-text);
    font-weight: 600;
}

/* ---- Advanced (xattr) disclosure ---- */
.ins-adv {
    margin-top: 14px;
}

.ins-adv summary {
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
    transition: color var(--t-fast);
}

.ins-adv summary:hover {
    color: var(--color-text);
}

.ins-adv summary::-webkit-details-marker {
    display: none;
}

.ins-adv summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--t-fast);
}

.ins-adv[open] summary::before {
    transform: rotate(45deg);
}

.ins-adv-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 10px 0 8px;
    line-height: 1.5;
}

.ins-cmd {
    display: flex;
    align-items: stretch;
    background: #FFFFFF;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.ins-cmd code {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--color-text-secondary);
    padding: 10px 14px;
    white-space: nowrap;
    overflow-x: auto;
}

.ins-cmd button {
    flex-shrink: 0;
    background: #F8FAFC;
    color: #475569;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 12px;
    font-weight: 650;
    padding: 0 16px;
    cursor: pointer;
    transition: all var(--t-fast);
}

.ins-cmd button:hover {
    background: #F1F5F9;
    color: var(--color-text);
}

.install-again {
    text-align: center;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 20px;
}

.install-again a {
    color: #2563EB;
    font-weight: 600;
}

.install-again a:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .install-card {
        padding: 24px 20px 20px;
        border-radius: 22px;
    }

    .install-title {
        font-size: 23px;
        margin: 12px 0 26px;
    }

    .install-steps {
        grid-template-columns: 1fr;
        gap: 26px;
        max-width: 360px;
        margin-inline: auto;
    }

    .ins-art {
        height: 168px;
    }
}