/* ══════════════════════════════════════════════════════════════════
   LANDING.CSS — extracted from index.html inline <style>
   + conversion additions (quick-start, live-proof, card try-btn)
   ══════════════════════════════════════════════════════════════════ */

/* ── NAV DARK GLASS — override nav.css (inline wins cascade) ────── */
.nav-dark-glass { background:rgba(10,10,15,0.82) !important; backdrop-filter:blur(24px) saturate(180%) !important; -webkit-backdrop-filter:blur(24px) saturate(180%) !important; border-color:rgba(255,255,255,0.07) !important; box-shadow:0 0 0 1px rgba(101,214,158,0.06),0 8px 32px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.05) !important; }
#nav-container.scrolled .nav-dark-glass { background:rgba(8,8,12,0.93) !important; box-shadow:0 0 0 1px rgba(101,214,158,0.09),0 8px 40px rgba(0,0,0,0.55) !important; }
.nav-logo-icon { background:rgba(101,214,158,0.10) !important; border:1px solid rgba(101,214,158,0.22) !important; }
.nav-cta-btn { background:#65d69e !important; color:#0a0a0c !important; box-shadow:0 4px 20px rgba(101,214,158,0.28); font-family:var(--font-body); position:relative; overflow:hidden; }
.nav-cta-btn:hover { background:#7de0a8 !important; transform:translateY(-1px); box-shadow:0 6px 28px rgba(101,214,158,0.4); }
.nav-user-btn { background:rgba(255,255,255,0.05) !important; border:1px solid rgba(255,255,255,0.08) !important; cursor:pointer; font-family:var(--font-body); }
.nav-user-btn:hover { background:rgba(255,255,255,0.09) !important; border-color:rgba(101,214,158,0.20) !important; }
.nav-dropdown { background:rgba(11,11,17,0.97) !important; border:1px solid rgba(255,255,255,0.08) !important; box-shadow:0 0 0 1px rgba(101,214,158,0.05),0 20px 60px rgba(0,0,0,0.7) !important; }
#user-menu-dropdown.opacity-100 { opacity:1 !important; pointer-events:auto !important; transform:scale(1) !important; }
.nav-drop-item { cursor:pointer; text-align:left; background:transparent; border:none; font-family:var(--font-body); width:100%; text-decoration:none; display:flex; align-items:center; transition:background 0.15s; }
.nav-drop-item:hover { background:rgba(255,255,255,0.05) !important; }
.nav-drop-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#mobile-dropdown.menu-visible { opacity:1 !important; transform:scale(1) !important; pointer-events:auto !important; }
@keyframes navShine { 0%{left:-60%} 100%{left:120%} }
.nav-cta-btn::after { content:''; position:absolute; top:-10%; left:-60%; width:35%; height:120%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.22),transparent); animation:navShine 2.5s linear infinite; }

/* ── GLOBAL ────────────────────────────────────────────── */
body { background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); }
::selection { background:var(--color-selection-bg); color:var(--color-selection-fg); }

/* ── REVEAL ─────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── NOISE ──────────────────────────────────────────────── */
.noise-texture::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); opacity:0.4; z-index:0; }

/* ── BADGE / SHINE ──────────────────────────────────────── */
@keyframes badgePop { 0%{transform:translateX(-50%) translateY(-6px);opacity:0} 100%{transform:translateX(-50%) translateY(0);opacity:1} }
.badge-pop { animation:badgePop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s both; }
@keyframes shine { 0%{left:-100%} 100%{left:100%} }
.btn-shine::before { content:''; position:absolute; top:0; left:-100%; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent); animation:shine 2.5s ease infinite; }
@keyframes shineFast { 0%{left:-100%} 100%{left:100%} }
.animate-shine-fast { animation:shineFast 1.5s ease infinite; }

/* ── BILLING TOGGLE ─────────────────────────────────────── */
.price-monthly { display:inline; }
.price-yearly  { display:none; }
.billing-yearly .price-monthly { display:none; }
.billing-yearly .price-yearly  { display:inline; }
.yearly-badge { display:none; }
.billing-yearly .yearly-badge  { display:flex; }
.billing-toggle-wrap { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.billing-toggle-btn  { color:var(--color-text-subtle); background:transparent; border-radius:var(--radius-md); font-family:var(--font-body); transition:all 0.25s; }
.billing-toggle-btn.active { color:var(--color-text); background:var(--color-surface-2); box-shadow:0 1px 4px rgba(0,0,0,0.35); }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-item { background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color 0.2s; }
.faq-item:hover { border-color:var(--color-border-strong); }
.faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.5rem; text-align:left; background:transparent; border:none; cursor:pointer; color:var(--color-text); font-weight:700; font-family:var(--font-body); font-size:1rem; transition:background 0.15s; }
.faq-btn:hover { background:var(--color-surface-2); }
.faq-icon { color:var(--color-text-subtle); transition:transform 0.25s; flex-shrink:0; }
.faq-btn.open .faq-icon { transform:rotate(180deg); }
.faq-content { display:none; padding:0 1.5rem; background:var(--color-surface-2); border-top:1px solid var(--color-border); color:var(--color-text-muted); font-size:0.875rem; line-height:1.7; }
.faq-content.open { display:block; }
.faq-content > div { padding:1rem 0 1.5rem; }

/* ── FEATURE CARDS ──────────────────────────────────────── */
.feature-tag { color:var(--color-accent); background:var(--color-accent-bg); border:1px solid var(--color-accent-border); font-size:0.6rem; font-weight:700; padding:4px 10px; border-radius:6px; text-transform:uppercase; letter-spacing:0.1em; }

/* ── WORKFLOW ────────────────────────────────────────────── */
.workflow-item { border-radius:var(--radius-lg); border:1px solid transparent; transition:all 0.3s cubic-bezier(0.16,1,0.3,1); }
.workflow-item:hover { background:var(--color-surface); }
.workflow-item.active { background:var(--color-surface-2); border-color:var(--color-accent-border); }
.workflow-item h3 { color:var(--color-text-subtle); transition:color 0.2s; }
.workflow-item.active h3 { color:var(--color-text); }
.workflow-item p { color:var(--color-text-faint); }
.workflow-item.active p { color:var(--color-text-muted); }
.progress-fill { background:var(--color-accent) !important; }

/* ── CANCEL MODAL ───────────────────────────────────────── */
.cancel-overlay { position:fixed; inset:0; z-index:100001; display:none; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.3s; backdrop-filter:blur(20px); background:rgba(0,0,0,0.85); }
.cancel-glass { position:relative; width:90%; max-width:480px; border-radius:28px; padding:32px; max-height:90vh; overflow-y:auto; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:0 0 0 1px var(--color-border-subtle), 0 32px 80px rgba(0,0,0,0.7); }
.cancel-glass::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--color-accent-border),transparent); }
.cancel-step { display:none; }
.cancel-step--active { display:block; }
.cancel-hero-icon { width:60px; height:60px; border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.cancel-hero-icon--purple { background:var(--color-accent-bg); color:var(--color-accent); }
.cancel-hero-icon--gold   { background:rgba(251,191,36,0.1); color:#fbbf24; }
.cancel-hero-icon--green  { background:var(--color-accent-bg); color:var(--color-accent); }
.cancel-hero-icon--slate  { background:var(--color-surface-2); color:var(--color-text-muted); }
.cancel-title { color:var(--color-text); text-align:center; font-size:1.2rem; font-weight:900; margin-bottom:8px; }
.cancel-sub   { color:var(--color-text-muted); text-align:center; font-size:0.875rem; margin-bottom:4px; }
.cancel-reasons { display:flex; flex-direction:column; gap:8px; margin:16px 0 0; }
.cancel-reason { background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text-muted); border-radius:var(--radius-md); padding:0.75rem 1rem; display:flex; align-items:center; gap:0.75rem; width:100%; text-align:left; cursor:pointer; transition:all 0.2s; font-family:var(--font-body); }
.cancel-reason:hover,.cancel-reason.selected { background:var(--color-accent-bg); border-color:var(--color-accent-border); color:var(--color-text); }
.cancel-reason-emoji { font-size:1.1rem; flex-shrink:0; }
.cancel-reason-label { font-size:0.875rem; font-weight:600; }
.cancel-lose-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.cancel-lose-item { color:var(--color-text-muted); display:flex; align-items:center; gap:0.75rem; font-size:0.8rem; }
.cancel-lose-icon { background:var(--color-surface-2); color:var(--color-accent); border-radius:var(--radius-sm); width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; }
.cancel-offer { background:var(--color-surface-2); border:1px solid var(--color-accent-border); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:4px; }
.cancel-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.cancel-btn-primary { background:var(--color-accent); color:#0a0a0c; border:none; border-radius:var(--radius-md); padding:12px 20px; font-weight:800; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; transition:all 0.2s; font-family:var(--font-body); }
.cancel-btn-primary:hover { background:var(--color-accent-hover); transform:translateY(-1px); }
.cancel-btn-secondary { background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text-muted); border-radius:var(--radius-md); padding:11px 20px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; transition:all 0.2s; font-family:var(--font-body); }
.cancel-btn-secondary:hover { border-color:var(--color-border-strong); color:var(--color-text); }
.cancel-skip-btn { background:none; border:none; color:var(--color-text-faint); font-size:0.75rem; cursor:pointer; padding:8px; width:100%; text-align:center; font-family:var(--font-body); }
.cancel-skip-btn:hover { color:var(--color-text-subtle); }
.cancel-close-btn { position:absolute; top:14px; right:14px; background:var(--color-surface-2); border:1px solid var(--color-border); color:var(--color-text-subtle); border-radius:var(--radius-sm); width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; }
.cancel-close-btn:hover { color:var(--color-text); border-color:var(--color-border-strong); }

/* ── MEDIA STUDIO ───────────────────────────────────────── */
.ms-card { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 0.8s ease; }
.ms-card.ms-active { opacity:1; }
.ms-scanline { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,var(--color-accent),transparent); box-shadow:0 0 12px 2px var(--color-accent-glow); animation:msScan 3s linear infinite; z-index:15; pointer-events:none; }
@keyframes msScan { 0%{top:-2px;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100%;opacity:0} }
.ms-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(101,214,158,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(101,214,158,0.05) 1px,transparent 1px); background-size:20px 20px; z-index:2; pointer-events:none; }
.ms-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(5,5,16,0.85) 100%); z-index:3; pointer-events:none; }
.ms-overlay-top { position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(to bottom,rgba(5,5,16,0.5),transparent); z-index:4; pointer-events:none; }
.ms-overlay-bot { position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(to top,rgba(5,5,16,0.95),transparent); z-index:4; pointer-events:none; }
.ms-counter { font-family:monospace; font-size:0.5rem; letter-spacing:0.15em; }
@keyframes msCountUp { 0%{opacity:0.3} 50%{opacity:1} 100%{opacity:0.3} }
.ms-blink { animation:msCountUp 1s ease infinite; }
@keyframes msBarGrow { from{width:0} to{width:100%} }
.ms-progress-bar { animation:msBarGrow 4s linear forwards; }

/* ── EQ BARS ────────────────────────────────────────────── */
@keyframes eqBounce { 0%,100%{transform:scaleY(0.3)} 50%{transform:scaleY(1)} }
.eq-bar { animation:eqBounce 0.8s ease-in-out infinite; transform-origin:bottom; }

/* ── FOOTER LINK ────────────────────────────────────────── */
.footer-link { color:var(--color-text-subtle); font-size:0.875rem; font-weight:500; transition:color 0.2s; text-decoration:none; display:block; }
.footer-link:hover { color:var(--color-text); }

/* ── COOKIE CONSENT BANNER ──────────────────────────────── */
#cookie-banner {
    position: fixed; bottom: 1.25rem; left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 190000; width: calc(100% - 2rem); max-width: 680px;
    border-radius: 1.5rem; padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), opacity 0.35s ease;
    opacity: 0; background: var(--color-surface); border: 1px solid var(--color-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
}
#cookie-banner.cb-visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.cb-text { flex: 1; min-width: 200px; font-size: 0.78rem; font-weight: 500; line-height: 1.5; color: var(--color-text-muted); }
.cb-text strong { color: var(--color-text); font-weight: 700; }
.cb-text a { color: var(--color-accent); text-decoration: none; }
.cb-text a:hover { text-decoration: underline; }
.cb-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.cb-btn-accept { padding: 0.55rem 1.1rem; border-radius: 0.75rem; border: none; cursor: pointer; font-size: 0.78rem; font-weight: 800; background: var(--color-accent); color: #0a0a0c; transition: transform 0.15s, box-shadow 0.15s; box-shadow: 0 4px 14px var(--color-accent-glow); white-space: nowrap; }
.cb-btn-accept:hover { transform: scale(1.04); }
.cb-btn-reject { padding: 0.55rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-border); cursor: pointer; font-size: 0.78rem; font-weight: 600; background: transparent; color: var(--color-text-subtle); transition: color 0.2s; white-space: nowrap; }
.cb-btn-reject:hover { color: var(--color-text); }

/* ── VIRAL PRESETS chip strip ──────────────────────────── */
.vp-chip { font-size:0.6rem; font-weight:700; padding:4px 10px; border-radius:6px; color:var(--color-accent); background:var(--color-accent-bg); border:1px solid var(--color-accent-border); letter-spacing:.06em; white-space:nowrap; flex-shrink:0; }
@keyframes vpScroll1 { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes vpScroll2 { 0%{transform:translateX(-30%)} 100%{transform:translateX(-80%)} }

/* ── EXIT-INTENT POPUP ─────────────────────────────────── */
@keyframes exitPulse { 0%{transform:scale(0.7);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }

/* ══════════════════════════════════════════════════════════
   PREMIUM FX — mouse spotlight + click ripple
   ══════════════════════════════════════════════════════════ */
.hero-spotlight {
    position: absolute;
    width: 400px; height: 400px;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(circle at center, rgba(101,214,158,0.18) 0%, rgba(101,214,158,0.06) 30%, transparent 65%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    mix-blend-mode: screen;
    will-change: transform, opacity;
    filter: blur(20px);
}

.fx-ripple {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.0) 70%);
    pointer-events: none;
    animation: fxRipple 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    z-index: 50;
}
@keyframes fxRipple {
    0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0;   }
}

/* ══════════════════════════════════════════════════════════
   HERO SECTION TWEAKS — tighter vertical rhythm
   ══════════════════════════════════════════════════════════ */
.hero-section { padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.vhs-wrapper { margin-top: 16px !important; padding: 12px 16px 16px !important; }
.vhs-wrapper::before { display: none !important; } /* remove ambient bg blob — too noisy */

/* Hero avatar stubs — gradient circles (no external broken images) */
.hero-avatar-stub {
    display: inline-block;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-bg);
    margin-left: -10px;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.25s ease, z-index 0s;
}
.hero-avatar-stub:first-child { margin-left: 0; }
.hero-avatar-stub:hover { transform: translateY(-3px) scale(1.1); z-index: 5; }
.hero-avatar-1 { background: linear-gradient(135deg, #f87171, #fbbf24); }
.hero-avatar-2 { background: linear-gradient(135deg, #65d69e, #38bdf8); }
.hero-avatar-3 { background: linear-gradient(135deg, #a78bfa, #f472b6); }
.hero-avatar-4 { background: linear-gradient(135deg, #fb923c, #f87171); }
.hero-avatar-5 { background: linear-gradient(135deg, #38bdf8, #65d69e); }
.hero-avatar-stub::after {
    content: '';
    position: absolute;
    inset: 30% 30% 50% 30%;
    border-radius: 50%;
    background: rgba(255,255,255,0.7);
}

/* ══════════════════════════════════════════════════════════
   HERO MAIN CARD — single, centered showcase replacing 3-card VHS
   ══════════════════════════════════════════════════════════ */
.hero-main-card {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: clamp(0.75rem, 1.5vw, 1.25rem) auto 0;
    aspect-ratio: 16 / 10;
    border-radius: clamp(1.5rem, 3vw, 2.25rem);
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow:
        0 30px 80px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.04);
    isolation: isolate;
    transform: translateY(0);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}
.hero-main-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--hmcAngle, 0deg),
        transparent 0deg,
        var(--color-accent) 50deg,
        transparent 110deg,
        transparent 250deg,
        var(--color-accent) 310deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.5;
    animation: hmcSpin 9s linear infinite;
    pointer-events: none;
    z-index: 3;
}
@property --hmcAngle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes hmcSpin { to { --hmcAngle: 360deg; } }
@supports not (background: conic-gradient(from 0deg, red 0deg)) {
    .hero-main-card::before { background: linear-gradient(135deg, var(--color-accent-border), transparent 45%, transparent 55%, var(--color-accent-border)); animation: none; }
}
.hero-main-card-inner {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
/* Video fills entire card (landscape-friendly) */
.hero-main-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    border-radius: inherit;
}

/* (Hero main card overlay removed — clean video showcase) */
@media (prefers-reduced-motion: reduce) {
    .hero-main-card::before { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   CONVERSION ADDITIONS — Quick-Start, Trust-Row
   ══════════════════════════════════════════════════════════ */

/* ── QUICK START (3 glass cards) ──────────────────────── */
.qs-section {
    position: relative;
    background: var(--color-bg);
    padding: clamp(3rem, 6vw, 5rem) 1rem clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}
.qs-bg-glow {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 60%; height: 80%;
    background: radial-gradient(ellipse at center, var(--color-accent-glow) 0%, transparent 60%);
    filter: blur(110px);
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
}
.qs-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.qs-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.qs-eyebrow {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
.qs-title {
    font-family: var(--font-display, Fraunces, serif);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}
.qs-title em {
    font-style: italic;
    color: var(--color-accent);
    font-weight: 500;
}
.qs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .qs-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

/* card */
.qs-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    padding: 1.6rem 1.4rem 1.5rem;
    overflow: hidden;
    isolation: isolate;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease,
                box-shadow 0.4s ease;
    box-shadow: var(--shadow-md);
}
.qs-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent-border);
    box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 0 1px var(--color-accent-border);
}
.qs-card-glow {
    position: absolute;
    top: -50%; right: -30%;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: var(--color-accent-glow);
    filter: blur(60px);
    opacity: 0.18;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.4s ease;
}
.qs-card:hover .qs-card-glow { opacity: 0.35; }

.qs-card-num {
    font-family: var(--font-display, Fraunces, serif);
    font-style: italic;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--color-text-faint);
    margin-bottom: 1rem;
    display: block;
}
.qs-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    color: var(--color-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
    position: relative;
}
.qs-card-icon::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--color-accent-border), transparent 40%, transparent 60%, var(--color-accent-border));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.6;
}
.qs-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}
.qs-card-desc {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-muted);
    margin: 0;
    font-weight: 500;
}
.qs-card-desc strong { color: var(--color-text); font-weight: 700; }

/* ── TRUST ROW (pricing reassurance) — 4 glass chips ──── */
.trust-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    max-width: 56rem;
    width: 100%;
    margin: 0 auto 2.5rem;
    padding: 0 0.5rem;
}
@media (min-width: 768px) {
    .trust-row { grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
}
.trust-chip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.95rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
.trust-chip:hover {
    border-color: var(--color-accent-border);
    background: var(--color-surface-2);
    transform: translateY(-1px);
}
.trust-chip-ico {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.trust-chip-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.trust-chip-lbl {
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-faint);
    margin-bottom: 2px;
}
.trust-chip-body strong {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   FEATURES SECTION — Higgsfield-styled grid (premium intro +
   dramatic card hover with glow border)
   ══════════════════════════════════════════════════════════ */
.feat-section { position: relative; isolation: isolate; }
.feat-bg-glow {
    position: absolute;
    top: 8%; left: 50%; transform: translateX(-50%);
    width: 70%; height: 50%;
    background: radial-gradient(ellipse at center, var(--color-accent-glow) 0%, transparent 60%);
    filter: blur(140px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}
/* Animated gradient mesh — premium feel */
.feat-bg-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 15% 30%, rgba(101,214,158,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 50% 35% at 85% 70%, rgba(101,214,158,0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
    animation: featMesh 18s ease-in-out infinite alternate;
}
@keyframes featMesh {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(2%, -1%) scale(1.04); }
    100% { transform: translate(-2%, 2%) scale(1); }
}

.feat-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}
.feat-eyebrow-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent-glow);
    animation: shPulse 1.6s ease-in-out infinite;
}
.feat-title {
    font-family: var(--font-display, Fraunces, serif);
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0 0 0.65rem;
    max-width: 22ch;
    color: var(--color-text);
}
.feat-title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.feat-sub {
    font-size: clamp(0.85rem, 1.4vw, 0.95rem);
    color: var(--color-text-muted);
    font-weight: 500;
    max-width: 32rem;
    margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.55;
}
.feat-title {
    font-size: clamp(1.85rem, 4.2vw, 2.7rem) !important;
}

/* DRAMATIC HOVER for every feature card */
.feat-grid > a {
    position: relative;
    isolation: isolate;
    transition:
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.35s ease,
        box-shadow 0.5s ease;
}
.feat-grid > a::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
        transparent 0%,
        var(--color-accent-border) 50%,
        transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 4;
}
@media (hover: hover) {
    .feat-grid > a:hover {
        transform: translateY(-6px);
        border-color: var(--color-accent-border) !important;
        box-shadow:
            0 22px 60px rgba(0,0,0,0.5),
            0 0 0 1px var(--color-accent-border),
            0 0 40px rgba(101,214,158,0.08) !important;
    }
    .feat-grid > a:hover::before { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════
   SHOWCASE GRID — Higgsfield-inspired feature grid
   Mobile-first. 2-col mobile → 4-col desktop with BIG card 2×2.
   ══════════════════════════════════════════════════════════ */
.sh-section {
    position: relative;
    padding: clamp(3.5rem, 7vw, 6rem) 1rem clamp(4rem, 8vw, 7rem);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    isolation: isolate;
}
.sh-bg-grid {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, black 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 60% 40% at 50% 0%, black 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.sh-bg-glow {
    position: absolute;
    top: -10%; left: 50%;
    transform: translateX(-50%);
    width: 70%; height: 50%;
    background: radial-gradient(ellipse at center, var(--color-accent-glow) 0%, transparent 60%);
    filter: blur(120px);
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}
.sh-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; }

/* Head */
.sh-head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sh-eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.sh-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent-glow);
    animation: shPulse 1.6s ease-in-out infinite;
}
@keyframes shPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }
.sh-title {
    font-family: var(--font-display, Fraunces, serif);
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.6rem;
}
.sh-title em { font-style: italic; color: var(--color-accent); font-weight: 500; }
.sh-sub {
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    color: var(--color-text-muted);
    font-weight: 500;
    max-width: 32rem;
    margin: 0 auto;
    line-height: 1.55;
}

/* Grid — 1 col mobile, 4 cols desktop (Pipeline span 2 + 2 squares).
   Match Quick Start width (1100px) for visual rhythm consistency. */
.sh-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}
@media (min-width: 640px) {
    .sh-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem; }
}
@media (min-width: 900px) {
    .sh-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.9rem;
        max-width: 1100px;
    }
}

/* Card base — media + footer split */
.sh-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    isolation: isolate;
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease,
        box-shadow 0.4s ease;
    -webkit-tap-highlight-color: transparent;
}
@media (min-width: 900px) {
    .sh-card { border-radius: 1.2rem; }
}

/* Media area */
.sh-card-media {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 1 1 auto;
    aspect-ratio: 16 / 9;
}

/* Mobile: 1 col / 2 cols small → all media landscape 16:9 */
/* Square cards on desktop: media 1:1 */
@media (min-width: 900px) {
    .sh-card--md .sh-card-media { aspect-ratio: 1 / 1; }
}

/* Wide cards span 2 cols (1 row), 2:1 landscape — like hero card but compact */
@media (min-width: 900px) {
    .sh-card--wide { grid-column: span 2; }
    .sh-card--wide .sh-card-media { aspect-ratio: 2 / 1; }
}

.sh-card-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1.02);
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
    pointer-events: none;
}

/* Card footer — text BELOW media (compact, title + 1-line subtitle) */
.sh-card-footer {
    flex-shrink: 0;
    padding: 0.55rem 0.8rem 0.7rem;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
}
@media (min-width: 900px) {
    .sh-card-footer { padding: 0.65rem 0.95rem 0.8rem; }
}
.sh-card-footer h3 {
    margin: 0 0 2px;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--color-text);
    line-height: 1.2;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 900px) {
    .sh-card-footer h3 { font-size: 0.92rem; }
}
.sh-card-footer p {
    margin: 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 900px) {
    .sh-card-footer p { font-size: 0.76rem; }
}

/* Wide cards: keep title 1-line, subtitle stays 1-line for consistency */
.sh-card--wide .sh-card-footer p { white-space: nowrap; }
.sh-card-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(10,10,15,0.0) 30%,
        rgba(10,10,15,0.55) 65%,
        rgba(10,10,15,0.92) 100%);
    z-index: 1;
    pointer-events: none;
    transition: background 0.4s ease;
}

/* Badges — corner pills */
.sh-card-badges {
    position: absolute; top: 0.65rem; right: 0.65rem;
    z-index: 3;
    display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end;
    pointer-events: none;
    max-width: calc(100% - 1.3rem);
}
@media (min-width: 900px) {
    .sh-card-badges { top: 0.8rem; right: 0.8rem; gap: 6px; }
}
.sh-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.55rem; font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}
@media (min-width: 900px) {
    .sh-badge { font-size: 0.6rem; padding: 4px 9px; }
}
.sh-badge i { font-size: 0.52rem; }
.sh-badge--new       { background: var(--color-accent); color: #0a0a0c; }
.sh-badge--featured  { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.18); }
.sh-badge--image     { background: rgba(56,189,248,0.18);  color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.sh-badge--video     { background: rgba(248,113,113,0.18); color: #f87171; border: 1px solid rgba(248,113,113,0.3); }
.sh-badge--audio     { background: rgba(168,85,247,0.18);  color: #a78bfa; border: 1px solid rgba(168,85,247,0.3); }
.sh-badge--trending  { background: linear-gradient(135deg, #ff3d80, #ff7a3d); color: #fff; }
.sh-badge--gold      { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #0a0a0c; }
.sh-badge--soon      { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.12); }

/* AI Photos slideshow inside .sh-card--photos */
.sh-photos-stack {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.sh-photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: shPhotoCycle 10s infinite;
    will-change: opacity, transform;
}
.sh-photo:nth-child(1)  { animation-delay: 0s;  }
.sh-photo:nth-child(2)  { animation-delay: 1s;  }
.sh-photo:nth-child(3)  { animation-delay: 2s;  }
.sh-photo:nth-child(4)  { animation-delay: 3s;  }
.sh-photo:nth-child(5)  { animation-delay: 4s;  }
.sh-photo:nth-child(6)  { animation-delay: 5s;  }
.sh-photo:nth-child(7)  { animation-delay: 6s;  }
.sh-photo:nth-child(8)  { animation-delay: 7s;  }
.sh-photo:nth-child(9)  { animation-delay: 8s;  }
.sh-photo:nth-child(10) { animation-delay: 9s;  }
@keyframes shPhotoCycle {
    0%   { opacity: 0; transform: scale(1.06); }
    6%   { opacity: 1; transform: scale(1.03); }
    14%  { opacity: 1; transform: scale(1.01); }
    20%  { opacity: 0; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}

/* Credits indicator on cards */
.sh-card-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    background: rgba(251,191,36,0.14);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.sh-card-credits i { font-size: 0.6rem; }
.sh-card-credits--md {
    margin-top: 0.4rem;
    padding: 3px 8px;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
}
.sh-card-credits--soon {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.55);
    border-color: rgba(255,255,255,0.1);
}

/* Coming soon dim treatment (legacy class — kept for compatibility) */
.sh-card--soon { opacity: 0.65; cursor: default; pointer-events: none; }
.sh-card--soon .sh-card-video { filter: grayscale(0.5) brightness(0.55); }
@media (hover: hover) {
    .sh-card--soon:hover { transform: none !important; box-shadow: none !important; }
}

/* Soon row container — spans full width of feat-grid */
.sh-soon-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
@media (min-width: 640px) {
    .sh-soon-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* ── COMPACT "IN LUCRU" card (Viral Presets + Video Scaler) ── */
.sh-soon-card {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: 1.25rem;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    opacity: 0.6;
    transition: opacity 0.3s ease, border-color 0.3s ease;
    cursor: default;
}
.sh-soon-card:hover { opacity: 0.85; border-color: var(--color-border-strong); }
.sh-soon-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-text-subtle);
    font-size: 0.9rem;
}
.sh-soon-body {
    flex: 1;
    min-width: 0;
}
.sh-soon-body h4 {
    margin: 0 0 2px;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.4rem;
    flex-wrap: wrap;
}
.sh-soon-tag {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    padding: 2px 7px;
    border-radius: 6px;
}
.sh-soon-body p {
    margin: 0;
    font-size: 0.7rem;
    color: var(--color-text-faint);
    line-height: 1.4;
    font-weight: 500;
}
.sh-soon-badge {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--color-border);
    padding: 4px 9px;
    border-radius: 999px;
}
.sh-soon-badge i { font-size: 0.5rem; }

/* Body */
.sh-card-body {
    position: absolute; bottom: 0; left: 0; right: 0;
    z-index: 2;
    padding: 0.85rem 0.95rem 0.95rem;
    color: #fff;
}
@media (min-width: 768px) {
    .sh-card-body { padding: 1.1rem 1.1rem 1.15rem; }
}
.sh-card-body h3 {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    margin: 0 0 3px;
    line-height: 1.2;
}
.sh-card-body p {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.72);
    margin: 0;
    line-height: 1.4;
    font-weight: 500;
}
@media (min-width: 768px) {
    .sh-card-body h3 { font-size: 1.05rem; margin-bottom: 4px; }
    .sh-card-body p  { font-size: 0.78rem; }
}

/* Wide-card body — content sits in LEFT portion only (video visible on right) */
.sh-card-body--wide {
    padding: 1.1rem 1.1rem 1.2rem;
    max-width: 100%;
}
@media (min-width: 768px) {
    .sh-card-body--wide {
        padding: 1.5rem 1.8rem 1.6rem;
        max-width: 58%;
    }
}
.sh-card-tag {
    display: inline-block;
    font-size: 0.55rem; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-accent-bg);
    border: 1px solid var(--color-accent-border);
    padding: 3px 9px;
    border-radius: 999px;
    margin-bottom: 0.55rem;
    backdrop-filter: blur(8px);
}
.sh-card-body--wide h3 {
    font-size: 1.25rem;
    line-height: 1.1;
    margin-bottom: 6px;
}
.sh-card-body--wide p {
    font-size: 0.78rem;
    line-height: 1.5;
    max-width: 38ch;
    margin-bottom: 0.85rem;
}
.sh-card-body--wide p strong { color: #fff; font-weight: 700; }
@media (min-width: 768px) {
    .sh-card-body--wide h3 { font-size: 1.7rem; margin-bottom: 8px; }
    .sh-card-body--wide p  { font-size: 0.9rem; margin-bottom: 1.1rem; max-width: 42ch; }
}

/* Actions row on wide cards (CTA + credits inline) */
.sh-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
}
.sh-card-actions .sh-card-credits { margin-top: 0; }

/* Side gradient shade for wide cards (instead of bottom-only) */
.sh-card-shade--side {
    background: linear-gradient(90deg,
        rgba(10,10,15,0.92) 0%,
        rgba(10,10,15,0.65) 40%,
        rgba(10,10,15,0.0) 75%) !important;
}
@media (max-width: 767px) {
    .sh-card-shade--side {
        background: linear-gradient(180deg,
            rgba(10,10,15,0.0) 30%,
            rgba(10,10,15,0.55) 65%,
            rgba(10,10,15,0.92) 100%) !important;
    }
}

/* CTA pill (only on big) */
.sh-card-cta {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.72rem; font-weight: 800;
    color: #0a0a0c;
    padding: 0.55rem 0.95rem;
    border-radius: 0.7rem;
    background: var(--color-accent);
    box-shadow: 0 6px 18px var(--color-accent-glow);
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.sh-card-cta i { font-size: 0.65rem; transition: transform 0.25s ease; }
@media (min-width: 768px) {
    .sh-card-cta { font-size: 0.78rem; padding: 0.65rem 1.1rem; }
    .sh-card-cta i { font-size: 0.7rem; }
}

/* Hover / focus effects (desktop) */
@media (hover: hover) and (min-width: 768px) {
    .sh-card { cursor: pointer; }
    .sh-card:hover { transform: translateY(-6px); border-color: var(--color-accent-border); box-shadow: 0 22px 60px rgba(0,0,0,0.55), 0 0 0 1px var(--color-accent-border); }
    .sh-card:hover .sh-card-video { transform: scale(1.08); }
    .sh-card:hover .sh-card-shade { background: linear-gradient(180deg, rgba(10,10,15,0.0) 20%, rgba(10,10,15,0.45) 55%, rgba(10,10,15,0.94) 100%); }
    .sh-card:hover .sh-card-cta { transform: scale(1.04); box-shadow: 0 10px 28px var(--color-accent-glow); }
    .sh-card:hover .sh-card-cta i { transform: translateX(4px); }
}

/* Mobile: active state */
@media (hover: none) {
    .sh-card:active { transform: scale(0.98); }
}

/* Animated border-glow on big card */
.sh-card--wide::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from var(--shGlowAngle, 0deg),
        transparent 0deg,
        var(--color-accent) 40deg,
        transparent 90deg,
        transparent 270deg,
        var(--color-accent) 320deg,
        transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.6;
    pointer-events: none;
    animation: shGlowSpin 7s linear infinite;
    z-index: 2;
}
@property --shGlowAngle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes shGlowSpin {
    to { --shGlowAngle: 360deg; }
}
/* Fallback for browsers without @property (Firefox <128): just a static subtle border */
@supports not (background: conic-gradient(from 0deg, red 0deg)) {
    .sh-card--wide::before { background: linear-gradient(135deg, var(--color-accent-border), transparent 40%, transparent 60%, var(--color-accent-border)); animation: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .sh-card, .sh-card-video, .sh-card-shade, .sh-card-cta, .sh-card-cta i { transition: none !important; }
    .sh-card--wide::before { animation: none !important; }
    .sh-eyebrow-dot { animation: none !important; }
}

/* ── CARD "TRY FREE" BUTTON (hybrid, retained for future use) ─── */
.card-try-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:0.45rem 0.85rem; border-radius:0.65rem; background:var(--color-accent-bg); color:var(--color-accent); border:1px solid var(--color-accent-border); font-size:0.7rem; font-weight:800; transition:all 0.2s; cursor:pointer; font-family:var(--font-body); white-space:nowrap; }
.card-try-btn:hover { background:var(--color-accent); color:#0a0a0c; transform:translateY(-1px); }
.card-try-btn i { font-size:0.62rem; }