/* ============================================================
   VoxIssue marketing, brand-tokenized Bootstrap.
   Palette from the app icon:
     #9F7AEA  Violet    , primary (dark bg)
     #5B7FFF  Blue      , gradient end
     #7C5CC9  Deep Violet, primary on light bg
     #211C2E  Ink       , brand dark surface
   ============================================================ */
:root,
[data-bs-theme="light"] {
    --bs-primary: #7C5CC9;
    --bs-primary-rgb: 124, 92, 201;
    --bs-link-color: #7C5CC9;
    --bs-link-hover-color: #5B3FA8;
    --bs-link-color-rgb: 124, 92, 201;
    --vx-grad-1: #9F7AEA;
    --vx-grad-2: #5B7FFF;
    --vx-grid: rgba(124, 92, 201, 0.09);
    --vx-card-glow: rgba(124, 92, 201, 0.14);
    --vx-surface: rgba(124, 92, 201, 0.035);
}
[data-bs-theme="dark"] {
    --bs-primary: #9F7AEA;
    --bs-primary-rgb: 159, 122, 234;
    --bs-link-color: #B79AF0;
    --bs-link-hover-color: #CDB8F5;
    --bs-link-color-rgb: 183, 154, 240;
    --bs-body-bg: #211C2E;
    --bs-body-bg-rgb: 33, 28, 46;
    --bs-tertiary-bg: #2B2440;
    --bs-secondary-bg: #2B2440;
    --bs-border-color: #3A3550;
    --bs-body-color: #EBE7F5;
    --bs-secondary-color: #A79FC0;
    --vx-grad-1: #9F7AEA;
    --vx-grad-2: #5B7FFF;
    --vx-grid: rgba(159, 122, 234, 0.10);
    --vx-card-glow: rgba(159, 122, 234, 0.22);
    --vx-surface: rgba(159, 122, 234, 0.045);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 16px; line-height: 1.6;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    font-feature-settings: "cv11", "ss01"; letter-spacing: -0.006em;
}
.display-1, .display-2, .display-3, h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    letter-spacing: -0.03em; text-wrap: balance;
}
.mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "zero"; }
.grad-text {
    background: linear-gradient(100deg, var(--vx-grad-1) 0%, var(--vx-grad-2) 55%, var(--vx-grad-1) 110%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: grad-drift 9s ease-in-out infinite;
}
@keyframes grad-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .grad-text { animation: none; } }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar-vx {
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    background: rgba(var(--bs-body-bg-rgb, 255,255,255), 0.72);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
}
.navbar-vx::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 20%, var(--bs-border-color) 80%, transparent);
}
.navbar-brand { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 20px; }
.navbar-brand img { height: 28px; margin-right: 8px; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.navbar-brand:hover img { transform: rotate(-8deg) scale(1.08); }
.navbar-vx .nav-link {
    position: relative; font-weight: 500; font-size: 15px;
    color: var(--bs-secondary-color); transition: color .2s ease;
}
.navbar-vx .nav-link::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1.5px;
    background: linear-gradient(90deg, var(--vx-grad-1), var(--vx-grad-2));
    transform: scaleX(0); transform-origin: left; border-radius: 2px;
    transition: transform .28s cubic-bezier(.22,1,.36,1);
}
.navbar-vx .nav-link:hover { color: var(--bs-body-color); }
.navbar-vx .nav-link:hover::after { transform: scaleX(1); }
.theme-toggle {
    background: transparent; border: 1px solid var(--bs-border-color);
    border-radius: 10px; width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--bs-secondary-color);
    transition: color .2s ease, border-color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.theme-toggle:hover { color: var(--bs-primary); border-color: var(--bs-primary); transform: rotate(18deg); }
.theme-toggle:active { transform: scale(.92) rotate(18deg); }
[data-bs-theme="dark"] .theme-toggle .bi-moon { display: none; }
[data-bs-theme="light"] .theme-toggle .bi-sun { display: none; }

/* Branded primary button — subtle gradient + lift */
.btn-primary {
    background: linear-gradient(120deg, var(--vx-grad-1), var(--vx-grad-2));
    border: none; font-weight: 600; letter-spacing: -0.01em;
    box-shadow: 0 6px 18px -6px rgba(124, 92, 201, .55);
    transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, filter .25s ease;
}
.btn-primary:hover {
    transform: translateY(-2px); filter: brightness(1.06);
    box-shadow: 0 12px 28px -8px rgba(124, 92, 201, .7);
}
.btn-primary:active { transform: translateY(0); }

/* ── Hero ───────────────────────────────────────────────── */
.hero-vx { position: relative; padding: 96px 0 108px; overflow: hidden; }
/* Aurora glow */
.hero-vx::before {
    content: '';
    position: absolute; inset: -20% -10% -30%;
    background:
        radial-gradient(40% 50% at 18% 28%, rgba(159, 122, 234, 0.22), transparent 70%),
        radial-gradient(45% 55% at 88% 66%, rgba(91, 127, 255, 0.18), transparent 70%),
        radial-gradient(30% 40% at 60% 10%, rgba(159, 122, 234, 0.10), transparent 70%);
    z-index: 0; pointer-events: none;
    animation: aurora 18s ease-in-out infinite alternate;
}
/* Fine grid, fading toward the fold */
.hero-vx::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, var(--vx-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--vx-grid) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 75%);
}
@keyframes aurora {
    0% { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-vx::before { animation: none; } }
.hero-vx > .container { position: relative; z-index: 1; }
.hero-vx h1 { font-size: clamp(44px, 6.4vw, 76px); font-weight: 800; line-height: 1.02; }
.lede { font-size: 19.5px; color: var(--bs-secondary-color); max-width: 564px; }

.section-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--bs-primary); margin-bottom: 14px;
}
.section-eyebrow::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: linear-gradient(120deg, var(--vx-grad-1), var(--vx-grad-2));
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}
.section-eyebrow.justify-content-center { justify-content: center; }
section { padding: 96px 0; position: relative; }
section h2 { font-size: clamp(29px, 3.8vw, 44px); font-weight: 800; line-height: 1.08; }
.section-sub { font-size: 17.5px; color: var(--bs-secondary-color); max-width: 640px; }
/* Tinted sections get a hairline gradient divider + faint surface wash */
.bg-body-tertiary {
    background:
        linear-gradient(var(--vx-surface), var(--vx-surface)),
        var(--bs-tertiary-bg) !important;
}
.bg-body-tertiary::before,
.bg-body-tertiary::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 25%, var(--bs-border-color) 75%, transparent);
}
.bg-body-tertiary::before { top: 0; }
.bg-body-tertiary::after { bottom: 0; }

/* ── Phone shots ────────────────────────────────────────── */
.phone-frame {
    position: relative;
    border-radius: 40px; border: 1px solid var(--bs-border-color);
    background: linear-gradient(160deg, #14121c, #000);
    padding: 11px;
    box-shadow:
        0 2px 0 rgba(255,255,255,.06) inset,
        0 34px 70px -18px rgba(0,0,0,.55),
        0 0 90px -30px var(--vx-card-glow);
    max-width: 322px; margin: 0 auto;
    transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
/* Glow halo behind the device */
.phone-frame::before {
    content: ''; position: absolute; inset: -14% -18%; z-index: -1;
    background: radial-gradient(closest-side, var(--vx-card-glow), transparent 78%);
    opacity: .9; filter: blur(6px);
}
.phone-frame:hover {
    transform: translateY(-8px) rotate(-.6deg);
    box-shadow:
        0 2px 0 rgba(255,255,255,.08) inset,
        0 44px 90px -20px rgba(0,0,0,.6),
        0 0 120px -28px var(--vx-card-glow);
}
.phone-frame img { width: 100%; border-radius: 30px; display: block; }
.phone-caption { text-align: center; font-size: 14px; color: var(--bs-secondary-color); margin-top: 16px; }

/* ── Feature cards ──────────────────────────────────────── */
.vx-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--bs-border-color); border-radius: 20px;
    background: var(--bs-body-bg); padding: 30px; height: 100%;
    transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, box-shadow .4s ease;
}
/* Gradient hairline that reveals on hover across the top */
.vx-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--vx-grad-1), var(--vx-grad-2));
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s cubic-bezier(.22,1,.36,1);
}
/* Soft radial glow that follows the top-left on hover */
.vx-card::after {
    content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: radial-gradient(60% 60% at 20% 0%, var(--vx-card-glow), transparent 70%);
    transition: opacity .45s ease;
}
.vx-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--bs-primary-rgb), .45);
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.5);
}
.vx-card:hover::before { transform: scaleX(1); }
.vx-card:hover::after { opacity: 1; }
.vx-card > * { position: relative; }
.vx-card .icon-chip {
    width: 50px; height: 50px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--vx-grad-1), var(--vx-grad-2));
    color: #fff; font-size: 22px; margin-bottom: 18px;
    box-shadow: 0 10px 22px -8px rgba(124, 92, 201, .6);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.vx-card:hover .icon-chip { transform: translateY(-2px) scale(1.06) rotate(-4deg); }
.vx-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.vx-card p { color: var(--bs-secondary-color); margin-bottom: 0; }
.vx-steps li { margin-bottom: 12px; color: var(--bs-secondary-color); padding-left: 2px; }
.vx-steps b { color: var(--bs-body-color); }

/* ── Field pills (GitHub issue anatomy) ─────────────────── */
.field-pill {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--bs-border-color); border-radius: 999px;
    padding: 7px 14px; font-size: 13px; font-weight: 600;
    background: var(--bs-body-bg);
    transition: transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, background .25s ease;
    cursor: default;
}
.field-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), .5);
    background: var(--bs-tertiary-bg);
}
.dot {
    width: 9px; height: 9px; border-radius: 50%; display: inline-block;
    position: relative;
}
/* Colored halo picks up each dot's inline background color */
.dot::after {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
    background: inherit; filter: blur(4px); opacity: .55; z-index: -1;
}

/* ── Demo video placeholder ─────────────────────────────── */
.demo-ph {
    position: relative; border-radius: 24px; overflow: hidden;
    border: 1px solid var(--bs-border-color);
    background:
        radial-gradient(ellipse at 30% 20%, rgba(159,122,234,.28), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(91,127,255,.22), transparent 55%),
        var(--bs-tertiary-bg);
    aspect-ratio: 16 / 9;
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px;
    cursor: pointer;
    transition: border-color .4s ease, box-shadow .4s ease;
}
/* Fine grid overlay for a "screen" feel */
.demo-ph::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(to right, var(--vx-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--vx-grid) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%);
    mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 90%);
}
/* Sweeping shimmer */
.demo-ph::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
    transform: skewX(-16deg) translateX(-260%);
    animation: demo-sweep 5.5s ease-in-out infinite;
}
@keyframes demo-sweep { 0%,60% { transform: skewX(-16deg) translateX(-260%); } 100% { transform: skewX(-16deg) translateX(360%); } }
.demo-ph:hover { border-color: rgba(var(--bs-primary-rgb), .5); box-shadow: 0 0 80px -30px var(--vx-card-glow); }
.demo-ph .play {
    position: relative; z-index: 1;
    width: 88px; height: 88px; border-radius: 50%;
    background: linear-gradient(135deg, var(--vx-grad-1), var(--vx-grad-2));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 34px; padding-left: 4px;
    box-shadow: 0 16px 44px -8px rgba(124, 92, 201, .55);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}
/* Pulsing ring */
.demo-ph .play::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--vx-grad-1);
    animation: play-pulse 2.6s ease-out infinite;
}
@keyframes play-pulse {
    0% { transform: scale(1); opacity: .7; }
    100% { transform: scale(1.6); opacity: 0; }
}
.demo-ph:hover .play { transform: scale(1.08); }
.demo-ph span { position: relative; z-index: 1; color: var(--bs-secondary-color); font-weight: 600; letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) {
    .demo-ph::after, .demo-ph .play::before { animation: none; }
}

/* ── Download badges ────────────────────────────────────── */
.store-badge {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: 14px;
    border: 1px solid var(--bs-border-color); border-radius: 16px;
    padding: 13px 24px; text-decoration: none; color: var(--bs-body-color);
    background: var(--bs-tertiary-bg); min-width: 236px;
    transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease, box-shadow .3s ease;
}
/* Diagonal shine that sweeps across on hover */
.store-badge::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-18deg); transition: left .6s ease;
}
.store-badge:hover {
    border-color: var(--bs-primary); color: var(--bs-body-color);
    transform: translateY(-3px);
    box-shadow: 0 16px 34px -16px var(--vx-card-glow);
}
.store-badge:hover::after { left: 120%; }
.store-badge i {
    font-size: 30px; position: relative;
    background: linear-gradient(135deg, var(--vx-grad-1), var(--vx-grad-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.store-badge .small { font-size: 12px; color: var(--bs-secondary-color); display: block; line-height: 1.1; }
.store-badge .big { font-size: 18px; font-weight: 700; line-height: 1.2; }
.store-badge.disabled { opacity: .5; pointer-events: none; }
.store-badge.disabled i { background: none; -webkit-text-fill-color: currentColor; color: var(--bs-secondary-color); }

.footer-vx {
    position: relative; padding: 64px 0 36px;
    background: linear-gradient(var(--vx-surface), transparent 40%);
}
.footer-vx::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--bs-border-color) 20%, rgba(var(--bs-primary-rgb), .4) 50%, var(--bs-border-color) 80%, transparent);
}
.footer-vx h5 {
    font-size: 12px; font-weight: 700; margin-bottom: 14px;
    text-transform: uppercase; letter-spacing: .1em; color: var(--bs-secondary-color);
}
.footer-vx ul { list-style: none; padding: 0; margin: 0; }
.footer-vx li { margin-bottom: 9px; }
.footer-vx a {
    text-decoration: none; color: var(--bs-secondary-color);
    transition: color .2s ease, padding-left .25s cubic-bezier(.22,1,.36,1);
}
.footer-vx ul a:hover { color: var(--bs-primary); padding-left: 5px; }
.footer-bottom { border-top: 1px solid var(--bs-border-color); margin-top: 44px; padding-top: 22px; font-size: 13px; color: var(--bs-secondary-color); }
.footer-bottom a { color: var(--bs-secondary-color); transition: color .2s ease; }
.footer-bottom a:hover { color: var(--bs-primary); }

/* ── Legal / content pages ──────────────────────────────── */
.legal-hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.legal-hero::before {
    content: '';
    position: absolute; inset: -10% 0 -40%;
    background:
        radial-gradient(ellipse at 15% 20%, rgba(159, 122, 234, 0.14), transparent 60%),
        radial-gradient(ellipse at 90% 60%, rgba(91, 127, 255, 0.10), transparent 60%);
    z-index: 0; pointer-events: none;
}
.legal-hero > .container { position: relative; z-index: 1; }
.legal-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
.legal-updated { font-size: 14px; color: var(--bs-secondary-color); }
.legal-body { padding: 8px 0 72px; }
.legal-body .prose { max-width: 760px; }
.legal-body .prose h2 { font-size: 22px; font-weight: 700; margin: 32px 0 10px; }
.legal-body .prose h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.legal-body .prose p,
.legal-body .prose li { color: var(--bs-secondary-color); }
.legal-body .prose ul { margin-bottom: 16px; }
.legal-body .prose li { margin-bottom: 6px; }
.legal-body .prose a { color: var(--bs-link-color); }

/* ── Contact form ───────────────────────────────────────── */
.contact-card {
    border: 1px solid var(--bs-border-color); border-radius: 16px;
    background: var(--bs-tertiary-bg); padding: 28px;
}
.contact-card .form-label { font-weight: 600; font-size: 14px; }
.contact-card .form-control {
    background: var(--bs-body-bg); border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
.contact-card .form-control:focus {
    background: var(--bs-body-bg); color: var(--bs-body-color);
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2);
}
.contact-method {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 16px 0; border-bottom: 1px solid var(--bs-border-color);
}
.contact-method:last-child { border-bottom: 0; }
.contact-method .icon-chip {
    width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, var(--vx-grad-1), var(--vx-grad-2));
    color: #fff; font-size: 18px;
}
.contact-method h3 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.contact-method p { color: var(--bs-secondary-color); margin: 0; font-size: 14px; }
.contact-method a { color: var(--bs-link-color); }

/* ── Craft layer: grain, reveals, refinements ───────────── */

/* Fixed film-grain overlay for depth (very subtle, dark theme only reads it) */
body::before {
    content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
    opacity: .028; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-bs-theme="light"] body::before { opacity: .02; }

/* Nav gains a solid backing once scrolled */
.navbar-vx.is-scrolled { background: rgba(var(--bs-body-bg-rgb, 255,255,255), 0.9); }

/* Scroll reveal — elements start dimmed/offset, animate in when seen */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
/* Stagger children (cards, pills, badges) */
.reveal.is-in > * { animation: none; }
.stagger > * { opacity: 0; transform: translateY(18px); }
.stagger.is-in > * {
    opacity: 1; transform: none;
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.stagger.is-in > *:nth-child(2) { transition-delay: .13s; }
.stagger.is-in > *:nth-child(3) { transition-delay: .21s; }
.stagger.is-in > *:nth-child(4) { transition-delay: .29s; }
.stagger.is-in > *:nth-child(5) { transition-delay: .37s; }
.stagger.is-in > *:nth-child(6) { transition-delay: .45s; }
.stagger.is-in > *:nth-child(7) { transition-delay: .53s; }
.stagger.is-in > *:nth-child(8) { transition-delay: .61s; }

/* Hero load-in: staggered reveal on first paint (no JS needed) */
.hero-vx .col-lg-7 > * { opacity: 0; animation: hero-in .9s cubic-bezier(.22,1,.36,1) forwards; }
.hero-vx .col-lg-7 > *:nth-child(1) { animation-delay: .05s; }
.hero-vx .col-lg-7 > *:nth-child(2) { animation-delay: .16s; }
.hero-vx .col-lg-7 > *:nth-child(3) { animation-delay: .27s; }
.hero-vx .phone-frame { opacity: 0; animation: hero-float-in 1.1s cubic-bezier(.22,1,.36,1) .3s forwards; }
@keyframes hero-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hero-float-in { from { opacity: 0; transform: translateY(30px) rotate(2deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .reveal, .stagger > *,
    .hero-vx .col-lg-7 > *, .hero-vx .phone-frame {
        opacity: 1 !important; transform: none !important; animation: none !important;
    }
}

/* Code snippet chip — terminal dots + copy affordance polish */
.code-chip {
    position: relative; font-family: 'JetBrains Mono', monospace; font-size: 13px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
    border-radius: 12px; padding: 14px 16px 14px 18px; overflow-x: auto;
}
.code-chip::before {
    content: ''; position: absolute; left: 16px; top: 14px;
    width: 8px; height: 8px; border-radius: 50%; background: #ff5f57;
    box-shadow: 16px 0 0 #febc2e, 32px 0 0 #28c840;
    opacity: .7;
}
.code-chip .code-body { display: block; margin-top: 20px; color: var(--bs-body-color); }
.code-chip .tok-cmd { color: var(--bs-primary); }