/* ==========================================
   HOOKED - Home Page Styles
   ========================================== */

/* ---- Hero ---- Sysinfo-style: smaller, tighter, 2-col stack.
   Drops min-height from 100vh -> 680px so there's no awkward empty
   space below at tall viewport heights. */
.hero {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    padding: 0 var(--container-padding) var(--space-3xl);
    margin-top: calc(var(--nav-height) * -1);
    padding-top: var(--nav-height);
    overflow: hidden;
}

/* ---- Scroll Indicator Section (between hero and featured products) ---- */
.scroll-indicator-section {
    padding: var(--space-4xl) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.4s ease, transform 0.4s ease;
    cursor: pointer;
}

.scroll-indicator:hover {
    opacity: 1;
    transform: translateY(6px);
}

/* Mouse icon */
.scroll-indicator-icon {
    width: 34px;
    height: 56px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    border-radius: 17px;
    position: relative;
    display: flex;
    justify-content: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.scroll-indicator:hover .scroll-indicator-icon {
    border-color: rgba(125, 0, 14, 0.4);
    box-shadow: 0 0 20px rgba(125, 0, 14, 0.08);
}

/* Animated scroll wheel */
.scroll-indicator-wheel {
    width: 4px;
    height: 10px;
    background: var(--cyan);
    border-radius: 2px;
    margin-top: 10px;
    box-shadow: 0 0 8px rgba(125, 0, 14, 0.6), 0 0 16px rgba(125, 0, 14, 0.25);
    animation: scrollWheelBounce 2s ease-in-out infinite;
}

@keyframes scrollWheelBounce {
    0%   { transform: translateY(0); opacity: 1; }
    40%  { transform: translateY(16px); opacity: 0.2; }
    60%  { opacity: 0; }
    61%  { transform: translateY(0); opacity: 0; }
    80%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.scroll-indicator-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.35em;
    padding-left: 0.35em;
    transition: color 0.4s ease;
}

.scroll-indicator:hover .scroll-indicator-text {
    color: var(--text-primary);
}

.scroll-indicator-chevrons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--cyan);
    font-size: 0.85rem;
    line-height: 1;
}

.scroll-indicator-chevrons i {
    animation: chevronFade 2s ease-in-out infinite;
    opacity: 0.3;
}

.scroll-indicator-chevrons i:nth-child(1) { animation-delay: 0s; }
.scroll-indicator-chevrons i:nth-child(2) { animation-delay: 0.2s; }
.scroll-indicator-chevrons i:nth-child(3) { animation-delay: 0.4s; }

@keyframes chevronFade {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50%      { opacity: 1; transform: translateY(3px); }
}

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

.hero-split-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    display: grid;
    /* Give the video column ~20% more width than the text column so the visual
       reads as the hero anchor, not an afterthought. */
    grid-template-columns: 1fr 1.25fr;
    gap: var(--space-3xl);
    align-items: start;
    position: relative;
    z-index: 2;
}

.hero-content {
    text-align: left;
    max-width: 520px;
}

/* Hero badge — sysinfo "Trusted by N satisfied customers ->" style.
   Inline-flex pill-less chip with an arrow tail. Uses transparent
   --bg-glass surface so it sits on top of the ambient. */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 10px;
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

.hero-badge i {
    font-size: 11px;
    color: var(--cyan);
}

.hero-badge::after {
    content: '\2192';
    margin-left: 4px;
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.hero-title {
    font-size: clamp(2.1rem, 4.2vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.hero-title-line {
    display: block;
    white-space: nowrap;
}

.hero-subtitle {
    font-size: var(--font-md);
    color: var(--text-secondary);
    max-width: 460px;
    margin-bottom: var(--space-lg);
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

/* Stat cards — sysinfo style: vertical stack, full-width cards, big
   value + small label. Two cards, not four. */
.hero-stats-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 420px;
}

.hero-stat-card {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease, background 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stat-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
}

.hero-stat-card::before { display: none; }

.stat-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.stat-label {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    text-transform: none;
}

.hero-visual {
    position: relative;
}

/* Glow behind the video container */
.hero-visual::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: radial-gradient(ellipse, rgba(125, 0, 14, 0.12) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.video-container {
    width: 100%;
    /* Slightly taller than 16:9 so the video fills the vertical space next to
       the text column (title + subtitle + buttons + stats). Was 16/9. */
    aspect-ratio: 16 / 11;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.video-container:hover {
    border-color: var(--border-hover);
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.video-container video.fade-out {
    opacity: 0;
}

.video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

/* ---- Products Grid (featured) ---- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* No backdrop-filter: these are repeated grid items, and a live blur
       per card tanks scroll perf for ~no visual gain over the dark bg. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
    cursor: pointer;
    position: relative;
}

.product-card:hover {
    border-color: var(--border-cyan);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(125, 0, 14, 0.08);
}

.product-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-base);
}

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

.product-card-image {
    width: 100%;
    height: 160px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card:hover .product-card-image img {
    transform: scale(1.05);
}

.product-card-image .placeholder-icon {
    font-size: 2.5rem;
    color: var(--text-tertiary);
}

.product-card-body {
    padding: 16px 18px 18px;
}

.product-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.product-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.product-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
    letter-spacing: -0.005em;
}

.product-card-group {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.product-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.product-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cyan);
}

.product-price-from {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    font-weight: 400;
}

.product-stock {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-xs);
    color: var(--text-secondary);
}

.stock-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-online);
    animation: pulse 2s ease-in-out infinite;
}

.stock-dot.out-of-stock {
    background: var(--status-offline);
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ---- Features Bento ---- */
.features-bento {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    align-items: stretch;
}

.bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    /* Tell the browser this card's internal layout/style can't affect things outside -
       big win for scroll repaint cost without clipping our hover lift. */
    contain: layout style;
}

.bento-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-glow);
    opacity: 0;
    transition: opacity var(--transition-base);
    pointer-events: none;
    z-index: 0;
}

.bento-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

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

.bento-card:nth-child(1) { grid-column: span 3; }
.bento-card:nth-child(2) { grid-column: span 2; }
.bento-card:nth-child(3) { grid-column: span 2; }
.bento-card:nth-child(4) { grid-column: span 3; }

.bento-visual {
    height: 170px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(125, 0, 14, 0.06) 0%, transparent 65%),
        linear-gradient(180deg, rgba(125, 0, 14, 0.03) 0%, transparent 100%);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.bento-text {
    padding: 18px 20px 20px;
    position: relative;
    z-index: 1;
}

.bento-text .feature-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.005em;
}

.bento-text .feature-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.visual-core {
    position: relative;
    z-index: 3;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cyan-glow), var(--pink-glow));
    border: 1px solid var(--border-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--cyan);
    box-shadow:
        0 0 30px rgba(125, 0, 14, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.visual-core.core-pink {
    color: var(--pink);
    background: linear-gradient(135deg, var(--pink-glow), var(--cyan-glow));
    border-color: var(--border-pink);
    box-shadow:
        0 0 30px rgba(125, 0, 14, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Visual 1: Delivery (converging packets + sweep + status pill) ---- */

/* Radial dot grid texture, masked to a soft ellipse so it fades at the edges */
.visual-delivery .delivery-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(125, 0, 14, 0.10) 1px, transparent 1.4px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, black 25%, transparent 78%);
    pointer-events: none;
    z-index: 0;
}

/* Diagonal light sweep across the visual */
.visual-delivery .delivery-sweep {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 30%,
        rgba(125, 0, 14, 0.10) 50%,
        transparent 70%);
    transform: translate3d(-100%, 0, 0);
    animation: deliverySweep 5.5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
    z-index: 1;
}

@keyframes deliverySweep {
    0%, 18% { transform: translate3d(-100%, 0, 0); }
    60%     { transform: translate3d(0%,    0, 0); }
    100%    { transform: translate3d(100%,  0, 0); }
}

/* "Ready" status pill in the top-right corner */
.visual-delivery .delivery-status {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.28);
    border-radius: var(--radius-full);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--status-online);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    z-index: 4;
}

.visual-delivery .delivery-status-dot {
    width: 5px;
    height: 5px;
    background: var(--status-online);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--status-online);
    animation: deliveryDotPulse 1.6s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes deliveryDotPulse {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%      { opacity: 0.45; transform: scale(0.82); }
}

/* Packets - small glowing dots that fly toward the core from preset vectors
   (set per-instance via --tx / --ty inline styles in the HTML) */
.visual-delivery .packet {
    --tx: 0px;
    --ty: 0px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan), 0 0 16px rgba(125, 0, 14, 0.5);
    opacity: 0;
    animation: packetTravel 2.8s cubic-bezier(0.6, 0, 0.35, 1) infinite;
    will-change: transform, opacity;
    z-index: 2;
    pointer-events: none;
}

@keyframes packetTravel {
    0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(0.6); opacity: 0; }
    12%  { opacity: 1; }
    78%  { transform: translate3d(0, 0, 0) scale(1.25); opacity: 1; }
    90%  { transform: translate3d(0, 0, 0) scale(2);    opacity: 0; }
    100% { transform: translate3d(0, 0, 0) scale(0);    opacity: 0; }
}

/* Core: bolt with a subtle scale + opacity pulse (transform/opacity only - no
   filter or box-shadow animation, keeps it cheap during scroll) */
.visual-delivery .core-delivery {
    z-index: 3;
    box-shadow:
        0 0 30px rgba(125, 0, 14, 0.22),
        0 0 60px rgba(125, 0, 14, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.visual-delivery .core-delivery i {
    display: block;
    animation: corePulse 2.6s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1);    opacity: 0.88; }
    50%      { transform: scale(1.12); opacity: 1;    }
}

/* ---- Visual 2: Shield (pulse rings) ---- */
.visual-shield .pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    border: 1px solid var(--pink);
    border-radius: 50%;
    opacity: 0;
    animation: pulseRing 2.8s ease-out infinite;
    will-change: transform, opacity;
    z-index: 2;
}

.visual-shield .pulse-ring-2 { animation-delay: 0.95s; }
.visual-shield .pulse-ring-3 { animation-delay: 1.9s; }

@keyframes pulseRing {
    0%   { transform: scale(0.7); opacity: 0; }
    20%  { opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ---- Visual 3: Payments (auto-scrolling marquee) ---- */
.visual-payments {
    padding: 0;
}

.payment-marquee {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.payment-track {
    display: flex;
    gap: var(--space-md);
    animation: marqueeScroll 28s linear infinite;
    flex-shrink: 0;
    padding-left: var(--space-md);
    will-change: transform;
}

.payment-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem 1rem;
    /* Solid bg instead of bg-glass + backdrop-filter - 14 chips × blur on a moving marquee
       was the main cause of scroll repaint cost on this section. */
    background: rgba(20, 20, 28, 0.85);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-size: var(--font-xs);
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.payment-chip i {
    color: var(--cyan);
    font-size: var(--font-md);
}

.bento-card:hover .payment-chip {
    border-color: var(--border-cyan);
    color: var(--text-primary);
}

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Visual 4: Support (chat bubbles + orbits) ---- */
.visual-support {
    overflow: hidden;
}

.visual-support .orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px dashed rgba(125, 0, 14, 0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.visual-support .orbit-1 {
    width: 130px;
    height: 130px;
    animation: orbitSpin 18s linear infinite;
}

.visual-support .orbit-2 {
    width: 200px;
    height: 200px;
    border-color: rgba(125, 0, 14, 0.14);
    animation: orbitSpin 26s linear infinite reverse;
}

@keyframes orbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.visual-support .visual-core {
    position: relative;
}

.visual-support .status-pulse {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 14px;
    height: 14px;
    background: var(--status-online);
    border: 2px solid rgba(255, 255, 255, 0.025);
    border-radius: 50%;
    box-shadow: 0 0 0 0 var(--status-online-glow);
    animation: statusPulse 1.8s ease-in-out infinite;
}

@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--status-online-glow); }
    50%      { box-shadow: 0 0 0 10px transparent; }
}

.chat-bubble {
    position: absolute;
    padding: 0.45rem 0.85rem;
    background: rgba(18, 18, 26, 0.92);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-primary);
    opacity: 0;
    animation: bubbleFloat 6s ease-in-out infinite;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    will-change: transform, opacity;
}

.chat-bubble-1 {
    top: 22%;
    left: 14%;
    display: inline-flex;
    gap: 4px;
    align-items: center;
    animation-delay: 0s;
}

.chat-bubble-1 .chat-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--cyan);
    animation: typingDot 1.4s ease-in-out infinite;
}

.chat-bubble-1 .chat-dot:nth-child(1) { animation-delay: 0s; }
.chat-bubble-1 .chat-dot:nth-child(2) { animation-delay: 0.2s; }
.chat-bubble-1 .chat-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
    30%           { transform: translateY(-3px); opacity: 1;   }
}

.chat-bubble-2 {
    top: 60%;
    left: 22%;
    animation-delay: 2s;
}

.chat-bubble-3 {
    top: 28%;
    right: 14%;
    animation-delay: 4s;
}

@keyframes bubbleFloat {
    0%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); }
    12%      { opacity: 1; transform: translateY(0) scale(1); }
    50%      { opacity: 1; transform: translateY(-2px) scale(1); }
    85%      { opacity: 1; transform: translateY(-6px) scale(1); }
    96%      { opacity: 0; transform: translateY(-10px) scale(0.94); }
}

/* ---- Card 5: Tweak Everything (interactive cheat-menu showcase) ---- */
.bento-card.bento-full {
    grid-column: 1 / -1;
}

/* Disable the lift-on-hover for the interactive card so clicks feel stable */
.bento-card.bento-full:hover {
    transform: none;
}

.bento-card.bento-full .customize-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-2xl);
    align-items: center;
    padding: var(--space-2xl);
    position: relative;
    z-index: 1;
}

/* Sysinfo-style eyebrow: plain uppercase cyan label. */
.customize-eyebrow {
    display: inline-block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: var(--space-md);
    backdrop-filter: none;
}

.customize-eyebrow i {
    display: none;
}

.customize-title {
    font-size: var(--font-3xl);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.customize-cta {
    color: var(--cyan);
    font-weight: 700;
    white-space: nowrap;
}

.customize-meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    flex-wrap: wrap;
}

.customize-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.35rem 0.8rem;
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.25);
    border-radius: var(--radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--status-online);
}

.customize-meta-dot {
    width: 6px;
    height: 6px;
    background: var(--status-online);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--status-online);
    animation: pulse 2s ease-in-out infinite;
}

.customize-meta-kbd {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-hover);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.customize-meta-text {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

/* ---- Mock menu shell ---- */
.customize-mock {
    /* Solid bg (no backdrop-filter) - the previous blur(20px) over a large area
       was the dominant cause of scroll repaint cost when leaving this section. */
    background: linear-gradient(180deg, #0a0a10 0%, #0c0c16 100%);
    border: 1px solid var(--border-hover);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 0 60px rgba(125, 0, 14, 0.06);
    user-select: none;
}

.cm-body {
    display: grid;
    grid-template-columns: 56px 1fr;
    min-height: 290px;
}

/* ---- Sidebar tabs ---- */
.cm-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px 10px;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.25);
}

/* Sliding active-tab indicator - JS sets the translateY based on the active tab.
   left:0 puts it flush against the inner left edge of the mock (the .cm-tabs
   padding-box left = border-box left when there's no left border). */
.cm-tab-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 22px;
    background: var(--gradient-primary);
    border-radius: 0 3px 3px 0;
    box-shadow: 0 0 10px rgba(125, 0, 14, 0.4);
    transform: translateY(0);
    will-change: transform;
    pointer-events: none;
    z-index: 2;
}

/* Only animate the indicator after JS has positioned it once - avoids a slide-in on first paint */
.cm-tab-indicator.ready {
    transition: transform 0.36s cubic-bezier(0.16, 1, 0.3, 1);
}

.cm-tab {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.cm-tab:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}

.cm-tab.active {
    color: var(--cyan);
    background: var(--cyan-glow);
    border-color: var(--border-cyan);
    box-shadow: 0 0 18px rgba(125, 0, 14, 0.18);
}

.cm-tab-tooltip {
    position: absolute;
    left: 110%;
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
    padding: 4px 9px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 5;
}

.cm-tab:hover .cm-tab-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ---- Panels ---- */
.cm-panels {
    position: relative;
    min-height: 290px;
}

/* All panels stack in the same spot so we get a true crossfade on tab switch */
.cm-panel {
    position: absolute;
    inset: 0;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.26s ease,
        transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.cm-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cm-panel-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-bottom: 6px;
}

.cm-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}

/* Subtle left-edge marker that grows on hover */
.cm-row::before {
    content: '';
    position: absolute;
    left: 1px;
    top: 50%;
    width: 2px;
    height: 0;
    background: var(--cyan);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.cm-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.cm-row:hover::before {
    height: 55%;
}

.cm-row-actions::before {
    display: none;
}

.cm-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* ---- Toggle pill ---- */
.cm-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.cm-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-tertiary);
    /* Springy overshoot curve replaces the old flipping keyframe approach
       for a much smoother toggle slide */
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.3s ease,
                box-shadow 0.3s ease;
}

.cm-toggle:hover {
    border-color: var(--border-hover);
}

.cm-toggle.on {
    background: linear-gradient(135deg, rgba(125, 0, 14, 0.3), rgba(125, 0, 14, 0.3));
    border-color: var(--border-cyan);
}

.cm-toggle.on::before {
    transform: translateX(16px);
    background: var(--cyan);
    box-shadow: 0 0 8px rgba(125, 0, 14, 0.6), 0 0 14px rgba(125, 0, 14, 0.3);
}

.cm-toggle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* ---- Slider (position driven by --pct CSS variable) ---- */
.cm-slider {
    --pct: 0.85;
    position: relative;
    width: 110px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    touch-action: none;
}

.cm-slider-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 2px;
}

.cm-slider-fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(125, 0, 14, 0.4);
    transform: translateY(-50%) scaleX(var(--pct));
    transform-origin: 0 50%;
    transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    will-change: transform;
}

.cm-slider-thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--pct) * 100%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 10px rgba(125, 0, 14, 0.6), 0 0 0 3px rgba(125, 0, 14, 0.12);
    transform: translate(-50%, -50%);
    transition: left 0.16s cubic-bezier(0.22, 1, 0.36, 1), transform 0.18s ease;
    pointer-events: none;
    will-change: left;
}

.cm-slider.dragging .cm-slider-thumb,
.cm-slider:hover .cm-slider-thumb {
    transform: translate(-50%, -50%) scale(1.18);
}

/* While dragging, drop the eased transition so the thumb/fill track the cursor 1:1 */
.cm-slider.dragging .cm-slider-fill,
.cm-slider.dragging .cm-slider-thumb {
    transition: none;
}

.cm-slider-value {
    position: absolute;
    right: 0;
    top: -18px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cyan);
    letter-spacing: 0.01em;
    /* Keeps the digits aligned in width so the number doesn't jitter as it changes */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    pointer-events: none;
}

.cm-slider:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
    border-radius: 6px;
}

/* ---- Cycle select (click to advance through a small set of options) ---- */
.cm-cycle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 86px;
    padding: 5px 10px 5px 12px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    user-select: none;
}

.cm-cycle:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-cyan);
}

.cm-cycle:active {
    transform: scale(0.96);
}

.cm-cycle:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.cm-cycle-value {
    flex: 1;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0;
    text-align: left;
    transition: opacity 0.16s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.cm-cycle.cycling .cm-cycle-value {
    opacity: 0;
    transform: translateX(-5px);
}

.cm-cycle i {
    font-size: 0.62rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease, color 0.2s ease;
}

.cm-cycle:hover i {
    color: var(--cyan);
    transform: translateX(2px);
}

/* ---- Action button (Save / Load Config) ---- */
.cm-row-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0.85rem 0;
    border-radius: 0;
}

.cm-row-actions:hover {
    background: transparent;
}

.cm-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(125, 0, 14, 0.18), rgba(125, 0, 14, 0.18));
    border: 1px solid var(--border-cyan);
    color: var(--cyan);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.16s ease;
}

.cm-button:hover {
    background: linear-gradient(135deg, rgba(125, 0, 14, 0.28), rgba(125, 0, 14, 0.28));
    transform: translateY(-1px);
}

.cm-button:active {
    transform: scale(0.96);
}

.cm-button.cm-button-ghost {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.cm-button.cm-button-ghost:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--border-cyan);
}

.cm-button i {
    font-size: 0.72rem;
    transition: transform 0.22s ease;
}

.cm-button.flashed {
    background: rgba(46, 204, 113, 0.18);
    border-color: rgba(46, 204, 113, 0.45);
    color: var(--status-online);
}

.cm-button.flashed i {
    transform: scale(1.15);
}

.cm-button:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

/* ---- Customize card responsive ---- */
@media (max-width: 968px) {
    .bento-card.bento-full .customize-layout {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        padding: var(--space-xl);
    }

    .customize-mock {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .cm-body {
        grid-template-columns: 50px 1fr;
    }

    .cm-tab {
        width: 34px;
        height: 34px;
    }

    .cm-slider {
        width: 90px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .visual-delivery .packet,
    .visual-delivery .delivery-sweep,
    .visual-delivery .delivery-status-dot,
    .visual-delivery .core-delivery i,
    .visual-shield .pulse-ring,
    .visual-support .orbit,
    .visual-support .status-pulse,
    .chat-bubble,
    .chat-bubble-1 .chat-dot,
    .payment-track,
    .scroll-indicator-wheel,
    .scroll-indicator-chevrons i,
    .customize-meta-dot {
        animation: none !important;
    }

    .cm-panel,
    .cm-tab-indicator.ready,
    .cm-cycle-value,
    .cm-slider-fill,
    .cm-slider-thumb {
        transition: none !important;
    }
}

/* ---- CTA Section ---- */
.cta-section {
    padding: var(--space-2xl) 0 var(--space-4xl);
}

.cta-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-4xl) var(--space-2xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, var(--cyan-glow) 0%, transparent 70%);
    pointer-events: none;
    contain: layout style;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: var(--font-4xl);
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-md);
}

.cta-desc {
    font-size: var(--font-lg);
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.6;
}

.cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

/* ---- Responsive ---- */
@media (max-width: 968px) {
    .hero-split-container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .hero-content {
        text-align: center;
    }

    .hero-subtitle {
        margin-left: auto;
        margin-right: auto;
    }

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

    .hero-stats-grid {
        margin: 0 auto;
    }

    .hero-visual {
        max-width: 600px;
        margin: 0 auto;
    }

    /* Bento → 2 equal columns on tablet */
    .features-bento {
        grid-template-columns: 1fr 1fr;
    }

    .features-bento .bento-card:nth-child(1),
    .features-bento .bento-card:nth-child(2),
    .features-bento .bento-card:nth-child(3),
    .features-bento .bento-card:nth-child(4) {
        grid-column: span 1;
    }
}

@media (max-width: 640px) {
    .hero-title {
        font-size: var(--font-4xl);
    }

    .hero-subtitle {
        font-size: var(--font-md);
    }

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

    .hero-actions .btn {
        width: 100%;
    }

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

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

    /* Bento → single column on mobile */
    .features-bento {
        grid-template-columns: 1fr;
    }

    .bento-visual {
        height: 170px;
    }

    .scroll-indicator-section {
        padding: var(--space-2xl) 0 var(--space-3xl);
    }

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

    .cta-actions .btn {
        width: 100%;
    }
}

/* ==========================================
   LIVE DEMO (blackswipe-style) + text sections
   ========================================== */

/* Full-width demo block inside the bento grid */
.ld-card {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
}

.ld-head { max-width: 760px; margin-bottom: var(--space-xl); }
.ld-eyebrow {
    display: inline-block;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    margin-bottom: var(--space-md);
}
.ld-title {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}
.ld-text {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* Stage = the two-column tabs + panel shell */
.ld-stage {
    background: #0a0a12;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.ld-card .cm-body {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 580px;
}

/* Sidebar tab list */
.ld-card .cm-tabs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border-right: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
}
.ld-card .cm-tab-indicator { display: none; }

.ld-card .cm-tab {
    display: grid;
    grid-template-columns: 36px 1fr;
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ld-card .cm-tab:hover { background: rgba(255, 255, 255, 0.03); }
.ld-card .cm-tab.active {
    background: rgba(125, 0, 14, 0.08);
    border-color: rgba(125, 0, 14, 0.3);
}
.ld-card .cm-tab-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.ld-card .cm-tab.active .cm-tab-ic {
    color: var(--cyan);
    background: rgba(125, 0, 14, 0.14);
    border-color: rgba(125, 0, 14, 0.3);
}
.ld-card .cm-tab-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
}
.ld-card .cm-tab-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.ld-card .cm-tab.active .cm-tab-name { color: var(--text-primary); font-weight: 700; }
.ld-card .cm-tab-sub {
    font-size: 0.74rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Main panel area */
.ld-card .cm-main { position: relative; }
.ld-card .cm-panels { position: relative; min-height: 580px; }
.ld-card .cm-panel {
    position: absolute;
    inset: 0;
    padding: 24px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.ld-card .cm-panel.active { opacity: 1; transform: none; pointer-events: auto; }
.ld-card .cm-panel-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: none;
    color: var(--text-primary);
    padding: 0 0 14px;
    margin: 0 0 4px;
    border-bottom: none;
}

/* Rows: card-style with title + description (blackswipe-like) */
.ld-card .cm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border-radius: 10px;
    border: none;
    background: rgba(255, 255, 255, 0.022);
    transition: background 0.18s ease;
}
.ld-card .cm-row:hover { background: rgba(255, 255, 255, 0.035); }
.ld-card .cm-row-actions {
    background: transparent;
    border-radius: 0;
    padding: 8px 0 0;
    gap: 10px;
}
.ld-card .cm-row-actions:hover { background: transparent; }

.ld-card .cm-row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    line-height: 1.25;
}
.ld-card .cm-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.ld-card .cm-desc {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* Checkbox-style toggle */
.ld-card .cm-toggle {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-hover);
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.ld-card .cm-toggle::before { display: none; }
.ld-card .cm-toggle::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 4px;
    width: 6px;
    height: 11px;
    border: solid transparent;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: border-color 0.18s ease;
}
.ld-card .cm-toggle.on {
    background: var(--cyan);
    border-color: var(--cyan);
}
.ld-card .cm-toggle.on::after { border-color: #04121a; }

/* Slider: bar with inline value on the right */
.ld-card .cm-slider {
    width: 200px;
    height: 20px;
    padding-right: 52px;
}
.ld-card .cm-slider-track,
.ld-card .cm-slider-fill { height: 5px; border-radius: 3px; }
.ld-card .cm-slider-track { right: 52px; }
.ld-card .cm-slider-fill { width: calc(100% - 52px); box-shadow: none; }
.ld-card .cm-slider-thumb {
    left: calc((100% - 52px) * var(--pct));
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 4px rgba(125, 0, 14, 0.12);
}
.ld-card .cm-slider-value {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* Preview-only note */
.ld-note {
    margin-top: var(--space-lg);
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.ld-note strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.ld-note span {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    line-height: 1.6;
}

/* ---- How it works ---- 4-col grid of mini cards, hairline borders */
.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}
.how-step {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 18px 20px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease, background 0.3s ease;
}
.how-step:hover {
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
}
.how-n {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: 0.12em;
}
.how-step h3 {
    margin: 10px 0 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.how-step p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

@media (max-width: 900px) {
    .how-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Prose block ---- sysinfo "Global support, proven reliability" layout
   Left col: badge + title + lead + long-form paragraphs.
   Right col: 3 mini feature cards stacked vertically. */
.prose-block {
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: var(--space-2xl);
    align-items: start;
}
.prose-side .section-badge { margin-bottom: var(--space-sm); }
.prose-side .section-title {
    font-size: var(--font-3xl);
    margin-bottom: var(--space-md);
}
.prose-lead {
    font-size: var(--font-md);
    color: var(--text-secondary);
    margin: 0 0 var(--space-xl);
    max-width: 50ch;
}
.prose-body p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 var(--space-md);
    max-width: 62ch;
}
.prose-body p:last-child { margin-bottom: 0; }
.prose-body a { color: var(--cyan); text-decoration: none; }
.prose-body a:hover { text-decoration: underline; }

.prose-side-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.prose-mini-card {
    background: var(--bg-glass);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease, background 0.3s ease;
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 4px;
    align-items: start;
}

.prose-mini-card:hover {
    border-color: var(--border-hover);
    background: var(--bg-glass-hover);
}

.prose-mini-ic {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(125, 0, 14, 0.08);
    border: 1px solid rgba(125, 0, 14, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    font-size: 0.78rem;
}

.prose-mini-card h4 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}

.prose-mini-card > p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.prose-mini-card a {
    color: var(--cyan);
    text-decoration: none;
}
.prose-mini-card a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .prose-block { grid-template-columns: 1fr; }
}

@media (max-width: 968px) {
    .ld-card .cm-body { grid-template-columns: 1fr; }
    .ld-card .cm-tabs {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .ld-card .cm-tab { width: auto; flex: 1 1 30%; }
    .ld-card .cm-tab-sub { display: none; }
    .how-grid { grid-template-columns: 1fr 1fr; }
    .prose-block { grid-template-columns: 1fr; gap: var(--space-lg); }
}

@media (max-width: 640px) {
    .ld-card { padding: var(--space-lg); }
    .ld-card .cm-tab { flex: 1 1 45%; }
    .ld-card .cm-slider { width: 150px; }
    .how-grid { grid-template-columns: 1fr; }
}

/* ---- Tighten flow: hero -> featured -> demo ---- */
.hero { padding-bottom: var(--space-xl); }
#products.section { padding-top: var(--space-xl); }
#demo.section { padding-top: var(--space-xl); }

/* ---- Extra interactive feedback in the live demo ---- */
.ld-card .cm-toggle {
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.18s ease;
}
.ld-card .cm-toggle:active { transform: scale(0.92); }
.ld-card .cm-toggle::after {
    transition: border-color 0.18s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
}
.ld-card .cm-toggle.on:active::after { transform: scale(0.85) rotate(45deg); }

.ld-card .cm-cycle {
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.ld-card .cm-cycle:hover { transform: translateY(-1px); }
.ld-card .cm-cycle:active { transform: scale(0.96); }

.ld-card .cm-button {
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease;
}
.ld-card .cm-button:hover { transform: translateY(-1px); }
.ld-card .cm-button:active { transform: scale(0.95); }

.ld-card .cm-slider:hover .cm-slider-value { color: var(--cyan); transition: color 0.2s ease; }

.ld-card .cm-row {
    transition: background 0.22s ease, transform 0.22s ease;
}
.ld-card .cm-row:hover { transform: translateX(2px); }

/* =================================================================
   Live vouches marquee (bleed-edge horizontal scroll, paused on hover)
   ================================================================= */

.vouches-strip-section {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
    overflow: hidden;
    position: relative;
}

.vouches-strip-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-3xl);
    flex-wrap: wrap;
}

.vouches-strip-head h2 {
    margin: 4px 0 6px;
}

.vouches-strip-head .section-subtitle {
    margin: 0;
}

.vouches-strip {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Tighter edge fade so cards visibly dissolve before they ever feel
       like they're floating in the void on either side. */
    -webkit-mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
            mask-image: linear-gradient(to right, transparent, black 16%, black 84%, transparent);
}

.vouches-strip-rail {
    display: flex;
    align-items: stretch;
    gap: 48px;
    width: max-content;
    /* Distance traveled = -50% (one full set of cards). JS duplicates the
       set so the loop is seamless. Duration scales with content length. */
    animation: vouches-strip-scroll 60s linear infinite;
    will-change: transform;
}

.vouches-strip:hover .vouches-strip-rail {
    animation-play-state: paused;
}

@keyframes vouches-strip-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.vouches-strip-card {
    /* Slightly wider so long vouches wrap fewer times. Height grows to fit
       the message — no more "…" truncation. `stretch` on the rail keeps
       neighbours the same height. */
    flex: 0 0 380px;
    min-height: 160px;
    padding: 24px 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition: border-color 0.22s ease, transform 0.22s ease;
}

.vouches-strip-card:hover {
    border-color: rgba(125, 0, 14, 0.30);
    transform: translateY(-2px);
}

.vouches-strip-card.is-skeleton {
    background: linear-gradient(110deg, rgba(255,255,255,0.02) 8%, rgba(255,255,255,0.05) 18%, rgba(255,255,255,0.02) 33%);
    background-size: 200% 100%;
    animation: vouches-strip-shimmer 1.4s ease-in-out infinite;
}

@keyframes vouches-strip-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vouches-strip-stars {
    display: inline-flex;
    gap: 3px;
}

.vouches-strip-stars i {
    font-size: 12px;
    color: #7d000e;
    filter: drop-shadow(0 0 4px rgba(125, 0, 14, 0.35));
}

.vouches-strip-stars i.empty {
    color: rgba(125, 0, 14, 0.12);
    filter: none;
}

.vouches-strip-msg {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary);
    /* Show the whole message — no clipping. Longer vouches make the card
       grow taller; the marquee rail is `align-items: stretch` so neighbours
       match the tallest card in view. */
}

.vouches-strip-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.vouches-strip-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-primary);
}

.vouches-strip-avatar-fallback {
    background: linear-gradient(135deg, #7d000e, #3d0006);
    color: #000;
    border-color: transparent;
}

.vouches-strip-name {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.vouches-strip-date {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .vouches-strip-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .vouches-strip-card {
        flex-basis: 280px;
    }
}

/* Count-up stat hint: keep the digits monospaced-ish via tabular-nums
   so the rolling numbers don't jitter horizontally during animation. */
.hero-stat-card .stat-value {
    font-variant-numeric: tabular-nums;
}

/* =================================================================
   Calm pass (owner: "calm down landing page ... more negative space").
   The landing used to run ~15 looping animations at once (flying
   packets, spinning orbits, expanding rings, sweeps). That "everything
   moving" overload is gone — the bento visuals are now still glass
   scenes. Run-once entrance fade-ins and the slow vouches strip stay.
   ================================================================= */
.delivery-sweep,
.packet,
.pulse-ring { display: none !important; }

.visual-core,
.delivery-status-dot,
.orbit,
.chat-bubble,
.chat-bubble .chat-dot,
.status-pulse,
.payment-track { animation: none !important; }

/* More breathing room between sections on the landing. */
/* Compact section rhythm — original was clamp(4.5rem, 9vw, 7.5rem) which
   was 3× too tall. Now clamp(0.75rem, 1.5vw, 1.5rem). */
.section { padding: clamp(0.75rem, 1.5vw, 1.5rem) 0; }
/* When a .section is the first thing under the fixed nav (no hero above it),
   the layout's pt-24/28 already reserves nav clearance — kill the extra top
   padding so we don't get a huge blank strip on Products/Status/FAQ/etc. */
main > .section:first-child,
main > :first-child > .section:first-child { padding-top: var(--space-xl); }
/* Status page — tight top spacing so the header sits close under the nav
   without going *under* it (the negative-margin trick made "LIVE" collide
   with the menu). */
.status-section { padding-top: var(--space-md) !important; }
.status-section .section-header { margin-bottom: var(--space-md); }
/* Inline Discord icon inside .btn — inherits currentColor so it matches the
   button's text color in both purple-fill and glass variants. */
.discord-icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.hero { min-height: 720px; }
.section-header { margin-bottom: var(--space-3xl); }

/* ---- Landing section rhythm + scroll-more indicator ----
   No `scroll-snap-type` — mandatory snapping made the wheel feel lumpy.
   Instead each hero / .section is at least a full viewport, and clicking
   the ScrollMore pill runs a JS-driven ~500 ms eased scroll (see
   components/SnapScrollLanding). */
/* Only the hero commits to a full viewport. Sections are natural-height so a
   short "how it works" block doesn't leave 40vh of empty black underneath. */
.snap-scroll .hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.snap-scroll .section { position: relative; }
.scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    z-index: 4;
    transition: transform var(--transition-base), border-color var(--transition-base);
}
.scroll-indicator:hover {
    border-color: var(--border-hover);
    transform: translateX(-50%) translateY(-2px);
}
.scroll-indicator .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.7);
    animation: si-pulse 1.6s ease-in-out infinite;
}
@keyframes si-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.15); }
}