/* ====================================================================
   HELIOS AI STUDIOS — Global Design System
   Theme: Ultra-Premium Dark + Gold Accent
   ==================================================================== */

/* ===== FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500&display=swap');

/* ===== DESIGN TOKENS ===== */
:root {
    /* Blacks — layered depth */
    --color-black-deep:    #0c0c0c;
    --color-black-card:    #161616;
    --color-black-hover:   #1e1e1e;
    --color-black-border:  #2a2a2a;

    /* Gold — antique, matte, royal */
    --color-gold:          #B8972E;
    --color-gold-soft:     #A8883A;
    --color-gold-dim:      #B8972E99;
    --color-gold-faint:    #B8972E44;

    /* Ivory — warm off-white */
    --color-ivory:         #F5F0E8;
    --color-ivory-muted:   #F5F0E8AA;
    --color-ivory-faint:   #F5F0E844;

    /* Legacy aliases (keep for downstream compatibility) */
    --bg-primary:   var(--color-black-deep);
    --bg-secondary: var(--color-black-deep);
    --bg-card:      var(--color-black-card);
    --bg-elevated:  var(--color-black-hover);
    --bg-input:     var(--color-black-hover);
    --bg-overlay:   rgba(12, 12, 12, 0.95);

    --border:        var(--color-black-border);
    --border-hover:  rgba(245, 240, 232, 0.18);
    --border-active: rgba(245, 240, 232, 0.30);

    --neutral:              var(--color-ivory);
    --neutral-dim:          var(--color-ivory-muted);
    --neutral-hover-bg:     rgba(245, 240, 232, 0.06);
    --neutral-active-bg:    rgba(245, 240, 232, 0.10);
    --neutral-border:       rgba(245, 240, 232, 0.12);
    --neutral-border-hover: rgba(245, 240, 232, 0.22);
    --neutral-border-active:rgba(245, 240, 232, 0.30);
    --neutral-glow:         none;

    --text-primary:   var(--color-ivory);
    --text-secondary: #9e9891;
    --text-muted:     #6e6964;

    --accent:          var(--color-gold);
    --accent-hover:    var(--color-gold-soft);
    --accent-dark:     #9a7a26;
    --accent-glow:     var(--color-gold-faint);
    --accent-gradient: var(--color-gold);

    --gold: var(--color-gold);
    --success: #4CAF50;
    --error: #FF5252;
    --info: #60A5FA;

    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', monospace;

    /* Legacy brand aliases */
    --color-bg:               var(--color-black-deep);
    --color-surface:          var(--color-black-deep);
    --color-surface-2:        var(--color-black-card);
    --color-border:           var(--color-black-border);
    --color-gold-glow:        var(--color-gold-faint);
    --color-gold-glow-strong: var(--color-gold-dim);
    --color-orange:           var(--color-gold);
    --color-gradient:         var(--color-gold);
    --color-text:             var(--color-ivory);
    --color-text-muted:       #9e9891;
    --color-text-dim:         #6e6964;
    --color-success:          #4CAF50;
    --color-error:            #FF5252;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3.5rem;
    --text-hero: clamp(2.5rem, 4vw, 3.5rem);

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;
    --space-5xl: 8rem;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    --header-h: 72px;
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 60px;
    --container: 1200px;

    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --ease: cubic-bezier(.25,1,.5,1);
    --transition: 250ms ease;
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    background:var(--bg-primary);
    color:var(--text-primary);
    font-family:var(--font);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
h1,h2{font-weight:600;line-height:1.15;letter-spacing:0.06em;color:var(--text-primary)}
h3{font-weight:500;line-height:1.15;letter-spacing:0.06em;color:var(--text-primary)}
h4,h5,h6{font-weight:500;line-height:1.15;letter-spacing:0.06em;color:var(--text-primary)}
p{line-height:1.7;color:var(--text-secondary)}
a{text-decoration:none;color:inherit;transition:color var(--transition)}
ul,ol{list-style:none}
img,video,svg{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}
::selection{background:var(--color-gold-faint);color:var(--color-ivory)}

/* Scroll snap removed — natural smooth scrolling preserved */

/* ===== GOLD GRAIN TEXTURE ===== */
.gold-grain {
    position: relative;
    overflow: hidden;
}
.gold-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: 0.045;
}

/* ===== CINEMATIC SECTION DIVIDER ===== */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl) 0;
    color: var(--color-gold-dim);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
}
.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    max-width: 200px;
    height: 0.5px;
    background: var(--color-gold-soft);
    opacity: 0.3;
}

/* ===== CORNER BRACKET ORNAMENTS ===== */
.corner-brackets {
    position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: var(--color-gold-dim);
    border-style: solid;
    opacity: 0.4;
    pointer-events: none;
}
.corner-brackets::before {
    top: var(--space-lg);
    left: var(--space-lg);
    border-width: 1px 0 0 1px;
}
.corner-brackets::after {
    bottom: var(--space-lg);
    right: var(--space-lg);
    border-width: 0 1px 1px 0;
}

/* Film-perforation strip (decorative card edge detail) */
.video-card-film {
    position: relative;
}
.video-card-film::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 6px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--color-gold-faint) 0px,
        var(--color-gold-faint) 4px,
        transparent 4px,
        transparent 10px
    );
    border-radius: 1px;
    opacity: 0.5;
}

/* ===== GOLD TEXT ANTIALIASING ===== */
.text-gold,
.logo-ai,
.sidebar-link.upgrade,
.testimonial-stars,
.pricing-badge,
.nav-item.active {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== BACKGROUND DEPTH ORBS ===== */
.bg-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(100px);
    will-change: transform;
}
.bg-orb-1,.bg-orb-2,.bg-orb-3 { display: none; }

/* ===== NAV CTA (appears on scroll) ===== */
.nav-cta {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.nav-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ===== UTILITY ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-xl)}
.container-wide{max-width:1400px;margin:0 auto;padding:0 var(--space-xl)}
.section{padding:var(--space-4xl) 0}
.section-header{text-align:center;margin-bottom:var(--space-2xl)}
.section-header h2{font-size:clamp(2rem, 4vw, 3.25rem);font-weight:500;margin-bottom:var(--space-xl);letter-spacing:0.06em}
.section-header p{font-size:var(--text-lg);color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7}

/* Pull-quote — for standout lines */
.pull-quote {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-style: italic;
    font-weight: 500;
    color: var(--text-secondary);
    border-left: 3px solid var(--neutral-border-hover);
    padding-left: var(--space-xl);
    max-width: 700px;
    margin: var(--space-3xl) auto;
    line-height: 1.6;
    text-align: left;
}
.section + .section,.hero + .section,.about-hero + .section,.community-hero + .section,.page-hero + .section{border-top:0.5px solid rgba(168,136,58,0.15)}
.section-title,.section-header .section-title{font-size:var(--text-5xl);font-weight:500;margin-bottom:var(--space-md);letter-spacing:0.06em}
.section-subtitle,.section-header .section-subtitle{font-size:var(--text-xl);color:var(--text-secondary);max-width:600px;margin:0 auto;line-height:1.7}
.gradient-text{color:var(--color-ivory)}
.text-accent{color:var(--neutral)}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-center{text-align:center}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mt-2xl{margin-top:var(--space-2xl)}
.mt-3xl{margin-top:var(--space-3xl)}
.mt-4xl{margin-top:var(--space-4xl)}
.mb-sm{margin-bottom:var(--space-sm)}
.mb-md{margin-bottom:var(--space-md)}
.mb-lg{margin-bottom:var(--space-lg)}
.mb-xl{margin-bottom:var(--space-xl)}
.mb-2xl{margin-bottom:var(--space-2xl)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2xl)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2xl)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl)}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.hidden{display:none!important}

/* ===== HEADER / NAV ===== */
.header{
    position:fixed;top:0;left:0;width:100%;height:var(--header-h);
    background:rgba(12,12,12,.8);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-bottom:0.5px solid rgba(168,136,58,0.5);
    z-index:1000;display:flex;align-items:center;
    transition:background .3s;
}
.header.scrolled{background:rgba(12,12,12,.95)}
.header-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font-weight:500;font-size:var(--text-lg);letter-spacing:0.06em;color:var(--text-primary);white-space:nowrap;cursor:pointer}
.logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:var(--space-lg)}
.nav-item{position:relative;font-size:var(--text-sm);font-weight:500;color:var(--color-ivory-muted);transition:color .2s;white-space:nowrap}
.nav-item:hover{color:var(--color-ivory)}
.nav-item.active{color:var(--color-gold)}
.nav-item.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:1px;background:var(--color-gold)}
.nav-right{display:flex;align-items:center;gap:var(--space-md)}

/* Mobile menu toggle */
.mobile-toggle{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer;z-index:1100}
.mobile-toggle span{display:block;width:22px;height:2px;background:var(--text-primary);transition:all .3s}
.mobile-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.mobile-toggle.open span:nth-child(2){opacity:0}
.mobile-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);
    padding:.875rem 2rem;font-weight:500;font-size:var(--text-sm);
    border-radius:var(--radius-md);transition:all .3s var(--ease);
    letter-spacing:0.05em;white-space:nowrap;position:relative;overflow:hidden;
}
.btn-primary{
    position:relative;
    padding:16px 40px;
    font-family:inherit;
    font-size:12px;
    font-weight:500;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:#BFA46A;
    background:transparent;
    border:1px solid #BFA46A99;
    border-radius:3px;
    cursor:pointer;
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
    outline:none;
    user-select:none;
    transition:border-color 0.35s ease, color 0.1s ease 0.2s;
}
.btn-primary::before{
    content:'';
    position:absolute;
    top:0;bottom:0;left:0;right:auto;
    width:51%;
    background:#BFA46A;
    background-image:none;
    transform:translateX(-101%);
    transition:transform 0.4s cubic-bezier(0.77,0,0.175,1);
    z-index:0;
    opacity:1;
    mix-blend-mode:normal;
    pointer-events:none;
}
.btn-primary::after{
    content:'';
    position:absolute;
    top:0;bottom:0;right:0;left:auto;
    width:51%;
    background:#BFA46A;
    background-image:none;
    transform:translateX(101%);
    transition:transform 0.4s cubic-bezier(0.77,0,0.175,1);
    z-index:0;
    opacity:1;
    mix-blend-mode:normal;
    pointer-events:none;
}
.btn-primary span{
    position:relative;
    z-index:2;
    transition:color 0.15s ease 0.05s;
}
.btn-primary.btn-small span{
    transition:color 0.1s ease;
}
.btn-primary:hover::before{transform:translateX(0)}
.btn-primary:hover::after{transform:translateX(0)}
.btn-primary:hover span{color:#0c0c0c}
.btn-primary.btn-small:hover span{color:#0c0c0c;transition-delay:0s}
.btn-primary:hover{border-color:#BFA46A}
.btn-outline{border:1px solid var(--color-ivory-faint);color:var(--color-ivory-muted);background:transparent}
.btn-outline:hover{border-color:var(--neutral-border-hover);color:var(--neutral);background:var(--neutral-hover-bg)}
.btn-ghost{color:var(--text-secondary);background:transparent;padding:.5rem 1rem}
.btn-ghost:hover{color:var(--text-primary)}
.btn-large{padding:1.1rem 2.5rem;font-size:var(--text-base)}
.btn-small{padding:.5rem 1.25rem;font-size:var(--text-xs)}
.btn-block{width:100%}
.btn:disabled,.btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn-icon{width:40px;height:40px;padding:0;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center}

/* ===== BADGES ===== */
.badge{
    display:inline-flex;align-items:center;gap:var(--space-xs);
    padding:.35rem .85rem;font-size:var(--text-xs);font-weight:500;
    border-radius:var(--radius-full);letter-spacing:.05em;text-transform:uppercase;
}
.badge-accent{background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border)}
.badge-success{background:rgba(52,211,153,.12);color:var(--success);border:1px solid rgba(52,211,153,.2)}
.badge-error{background:rgba(248,113,113,.12);color:var(--error);border:1px solid rgba(248,113,113,.2)}
.badge-info{background:rgba(96,165,250,.12);color:var(--info);border:1px solid rgba(96,165,250,.2)}
.badge-plan{padding:.25rem .65rem;font-size:10px}
.badge-plan.free{background:rgba(255,255,255,.06);color:var(--text-secondary);border:1px solid var(--border)}
.badge-plan.lite{background:rgba(255,255,255,.06);color:var(--text-secondary);border:1px solid var(--border)}
.badge-plan.plus{background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border)}
.badge-plan.pro{background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border)}
.badge-plan.max{background:rgba(184,151,46,.12);color:var(--color-gold);border:1px solid rgba(184,151,46,.25)}
.badge-plan.team{background:rgba(96,165,250,.1);color:var(--info);border:1px solid rgba(96,165,250,.2)}
.badge-plan.business{background:rgba(96,165,250,.1);color:var(--info);border:1px solid rgba(96,165,250,.2)}
.badge-plan.starter{background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border)}
.badge-plan.professional{background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border)}
.badge-plan.agency{background:rgba(96,165,250,.1);color:var(--info);border:1px solid rgba(96,165,250,.2)}
.badge-hero{font-size:var(--text-sm);padding:.5rem 1.25rem}

/* ===== CARDS ===== */
.card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    transition:all .35s var(--ease);
}
.card:hover{border-color:var(--color-black-border)}
.card-glow:hover{border-color:var(--color-gold-faint)}

/* Feature Card */
.feature-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.feature-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:1px;
    background:var(--color-gold-dim);opacity:0;transition:opacity .4s;
}
.feature-card:hover{border-color:var(--color-gold-faint)}
.feature-card:hover::before{opacity:1}
.feature-icon{
    width:56px;height:56px;border-radius:var(--radius-lg);
    background:var(--neutral-hover-bg);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;
    font-size:1.5rem;margin-bottom:var(--space-lg);
}
.feature-title{font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-sm)}
.feature-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}

/* Pricing Card */
.pricing-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-xl);
    position:relative;text-align:center;display:flex;flex-direction:column;
    transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .4s ease;
}
.pricing-card:hover{border-color:var(--border-hover);transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.pricing-card.featured{
    border-color:var(--color-gold-soft);
    background:linear-gradient(180deg, rgba(184,151,46,0.06) 0%, rgba(184,151,46,0.02) 30%, var(--bg-card) 60%);
    box-shadow:0 0 40px rgba(184,151,46,0.08), 0 0 80px rgba(184,151,46,0.04);
}
.pricing-card.featured::after{
    content:'';position:absolute;top:0;left:15%;right:15%;height:2px;
    background:linear-gradient(90deg, transparent, var(--color-gold), transparent);
    border-radius:2px;pointer-events:none;
}
.pricing-card.featured:hover{
    border-color:var(--color-gold);
    box-shadow:0 0 50px rgba(184,151,46,0.14), 0 0 100px rgba(184,151,46,0.06);
}
.pricing-badge{
    position:absolute;top:-14px;left:50%;transform:translateX(-50%);
    background:var(--color-gold);color:var(--color-black-deep);
    padding:.4rem 1.25rem;border-radius:var(--radius-full);
    font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    z-index:2;white-space:nowrap;
}
.pricing-plan{font-size:var(--text-xl);font-weight:600;margin-bottom:var(--space-xs);letter-spacing:0.02em}
.pricing-card.featured .pricing-plan{color:var(--color-gold)}
.pricing-desc{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-lg)}
.pricing-amount{font-size:clamp(2rem, 4vw, 2.75rem);font-weight:500;letter-spacing:0.04em;margin-bottom:var(--space-xs)}
.pricing-amount span{font-size:var(--text-sm);font-weight:400;color:var(--text-muted)}
.pricing-features{text-align:left;margin:0 0 var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm);flex:1}
.pricing-features li{display:flex;align-items:center;gap:var(--space-sm);color:var(--text-secondary);font-size:var(--text-sm)}
.pricing-features li .check{color:var(--success);font-weight:500;font-size:var(--text-base)}
.pricing-features li .x-mark{color:var(--text-muted)}

/* Feature icons (inline SVGs in pricing cards) */
.feat-icon{width:18px;height:18px;flex-shrink:0;color:var(--color-gold);opacity:0.8}
.feat-icon svg{width:18px;height:18px}

/* Plan Type Toggle (Individual / Teams) */
.plan-type-toggle{display:flex;justify-content:center;gap:var(--space-xs);margin-bottom:var(--space-xl)}
.plan-type-btn{
    padding:.6rem 1.5rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;
    background:transparent;border:1px solid var(--border);color:var(--text-muted);cursor:pointer;
    transition:all .25s var(--ease);
}
.plan-type-btn.active{background:var(--bg-card);color:var(--text-primary);border-color:var(--color-gold-soft)}
.plan-type-btn:hover:not(.active){color:var(--text-secondary)}

/* Pricing Grid for 2-card team layout */
.pricing-grid-2{
    display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2xl);
    max-width:720px;margin:0 auto;
}
.pricing-grid-2 .pricing-card{padding:var(--space-2xl)}

/* Free Plan Banner */
.free-plan-banner{
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
    padding:var(--space-xl) var(--space-2xl);text-align:center;
    max-width:700px;margin:0 auto;
}
.free-plan-banner p{color:var(--text-secondary);font-size:var(--text-sm);margin:0}
.free-plan-banner strong{color:var(--text-primary)}
.free-plan-banner a{color:var(--accent);font-weight:600;margin-left:var(--space-sm)}

/* Billing Toggle — pill slider */
.billing-toggle{
    display:inline-flex;position:relative;
    background:var(--color-black-card);border:1px solid var(--border);
    border-radius:var(--radius-full);padding:4px;
}
.billing-toggle-slider{
    position:absolute;top:4px;bottom:4px;left:4px;
    background:var(--color-gold);border-radius:var(--radius-full);
    transition:left .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
    z-index:0;
}
.billing-option{
    position:relative;z-index:1;padding:.6rem 1.5rem;
    font-size:var(--text-sm);font-weight:500;color:var(--color-ivory-muted);
    background:none;border:none;cursor:pointer;font-family:var(--font);
    transition:color .25s;white-space:nowrap;
}
.billing-option.active{color:var(--color-black-deep)}
.billing-save{font-size:var(--text-xs);font-weight:600;margin-left:4px}

/* Currency toggle */
.currency-toggle{display:inline-flex;gap:2px;margin-left:var(--space-lg);vertical-align:middle}
.currency-opt{
    width:34px;height:34px;border-radius:var(--radius-full);
    border:1px solid var(--border);background:transparent;
    color:var(--text-muted);font-size:var(--text-sm);font-weight:600;
    cursor:pointer;font-family:var(--font);transition:all .2s;
    display:flex;align-items:center;justify-content:center;
}
.currency-opt.active{background:var(--color-gold);color:var(--color-black-deep);border-color:var(--color-gold)}
.currency-opt:hover:not(.active){border-color:var(--border-hover);color:var(--text-secondary)}

/* Trust strip (risk reversal) */
.trust-strip{
    display:flex;justify-content:center;gap:var(--space-3xl);flex-wrap:wrap;
    padding:var(--space-lg) 0;margin-top:var(--space-md);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.trust-item{display:flex;align-items:center;gap:var(--space-sm);font-size:var(--text-sm);color:var(--text-secondary)}
.trust-item svg{width:18px;height:18px;color:var(--color-gold);flex-shrink:0}

@media(max-width:768px){
    .pricing-grid-2{grid-template-columns:1fr}
    .plan-type-toggle{flex-wrap:wrap}
    .free-plan-banner{margin-left:var(--space-md);margin-right:var(--space-md)}
    .billing-toggle{flex-wrap:nowrap}
    .trust-strip{gap:var(--space-xl);padding:var(--space-md) var(--space-md)}
    .currency-toggle{margin-left:0;margin-top:var(--space-sm)}
    .toggles-row{flex-direction:column;align-items:center}
}

/* Blog Card */
.blog-card{
    background:var(--bg-card);border:1px solid rgba(245,240,232,0.10);
    border-radius:var(--radius-lg);overflow:hidden;
    transition:all .4s var(--ease);
}
.blog-card:hover{border-color:var(--color-black-border)}
.blog-card-image{
    width:100%;height:160px;
    background:var(--bg-elevated);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
}
.blog-card-image img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card-body{padding:var(--space-lg)}
.blog-card-tag{
    font-size:var(--text-xs);font-weight:500;text-transform:uppercase;
    color:var(--neutral-dim);letter-spacing:.06em;margin-bottom:var(--space-sm);
}
.blog-card-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-sm);line-height:1.3}
.blog-card-excerpt{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--space-lg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.blog-card-meta{display:flex;align-items:center;gap:var(--space-md);font-size:var(--text-xs);color:var(--text-muted)}

/* Blog Hero Header */
.blog-hero-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-xl)}
.blog-hero-text{flex:1}
.blog-search-wrapper{flex-shrink:0;width:280px}
.blog-search-input{
    width:100%;padding:10px 16px 10px 40px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--text-primary);
    font-family:var(--font);font-size:var(--text-sm);outline:none;
    transition:border-color 0.2s;
}
.blog-search-input:focus{border-color:var(--color-gold-soft)}
.blog-search-input::placeholder{color:var(--text-muted)}
.blog-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
@media(max-width:768px){
    .blog-hero-header{flex-direction:column;align-items:flex-start}
    .blog-search-wrapper{width:100%}
}

/* Example Card */
.example-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;
    transition:all .4s var(--ease);cursor:pointer;
}
.example-card:hover{border-color:var(--color-black-border)}
.example-card-video{
    width:100%;height:240px;position:relative;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
}
.example-card-video .play-icon{
    width:64px;height:64px;border-radius:50%;
    background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s,background .3s;
}
.example-card:hover .play-icon{transform:scale(1.1);background:rgba(255,255,255,.25)}
.example-card-body{padding:var(--space-lg)}
.example-card-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-xs)}
.example-card-info{color:var(--text-muted);font-size:var(--text-xs)}

/* Testimonial Card */
.testimonial-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    position:relative;transition:all .35s var(--ease);
}
.testimonial-card:hover{border-color:var(--color-black-border)}
.testimonial-stars{color:var(--gold);font-size:var(--text-lg);margin-bottom:var(--space-lg);letter-spacing:2px}
.testimonial-author{display:flex;align-items:center;gap:var(--space-md)}
.testimonial-avatar{
    width:48px;height:48px;border-radius:50%;
    background:var(--neutral-hover-bg);display:flex;align-items:center;justify-content:center;
    font-weight:500;font-size:var(--text-lg);color:var(--neutral);border:1px solid var(--neutral-border);
}
.testimonial-name{font-weight:500;font-size:var(--text-sm)}
.testimonial-role{color:var(--text-muted);font-size:var(--text-xs)}
.testimonial-quote{font-size:var(--text-lg);line-height:1.8;margin-bottom:var(--space-xl);color:var(--text-secondary);font-style:italic}

/* Step / How It Works Card */
.step-card{
    text-align:center;padding:var(--space-2xl);position:relative;
}
.step-number{
    width:64px;height:64px;border-radius:50%;
    background:var(--neutral);
    display:flex;align-items:center;justify-content:center;
    font-size:var(--text-2xl);font-weight:500;color:var(--bg-primary);
    margin:0 auto var(--space-lg);
    border:1px solid var(--color-black-border);
}
.step-title{font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-sm)}
.step-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7;max-width:280px;margin:0 auto}
.step-connector{
    position:absolute;top:32px;right:-50%;width:100%;height:2px;
    background:var(--color-black-border);
    display:none;
}

/* Use Case Card */
.usecase-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    transition:all .4s var(--ease);
}
.usecase-card:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.usecase-icon{font-size:2rem;margin-bottom:var(--space-lg)}
.usecase-title{font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-sm)}
.usecase-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}
.usecase-list{margin-top:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm)}
.usecase-list li{color:var(--text-secondary);font-size:var(--text-sm);display:flex;align-items:center;gap:var(--space-sm)}
.usecase-list li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--neutral-dim);flex-shrink:0}

/* Pricing Hero Title — rotating words */
.pricing-hero-title{color:var(--color-ivory-muted);text-align:center;max-width:none;margin-left:auto;margin-right:auto}
.pricing-hero-line{display:block;white-space:nowrap}
.pricing-hero-title .hero-rotating-word{color:var(--color-gold);display:inline-block}
#pricingWord1{text-align:left}
#pricingWord2{text-align:right}
#pricingWord3{color:var(--color-ivory-muted)}
@media(max-width:768px){.pricing-hero-title{font-size:clamp(1.5rem,6vw,2.5rem)}.pricing-hero-line{white-space:normal}.pricing-hero-title .hero-rotating-word{min-width:0!important}}

/* Compare Toggle (collapsible) */
.compare-toggle{display:flex;align-items:center;justify-content:center;gap:var(--space-md);cursor:pointer;padding:var(--space-md) 0}
.compare-toggle:hover{opacity:0.8}
.compare-arrow{color:var(--text-secondary);transition:transform .3s ease}
.compare-toggle.open .compare-arrow{transform:rotate(180deg)}

/* Comparison Table */
.comparison-table{width:100%;border-collapse:collapse;margin-top:var(--space-2xl)}
.comparison-table th,.comparison-table td{
    padding:var(--space-lg);text-align:left;border-bottom:1px solid var(--border);font-size:var(--text-sm);
}
.comparison-table thead th{
    color:var(--text-muted);font-weight:500;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;
}
.comparison-table .highlight-col{background:rgba(255,255,255,.03);border-radius:0}
.comparison-table .feature-name{color:var(--text-secondary);font-weight:500}
.comparison-table .check-icon{color:var(--success)}
.comparison-table .cross-icon{color:var(--text-muted)}

/* Stats */
.stat-item{text-align:center}
.stat-number{font-size:var(--text-4xl);font-weight:500;letter-spacing:0.06em}
.stat-label{color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-xs)}

/* Resource Card */
.resource-card{
    background:var(--bg-card);border:1px solid rgba(245,240,232,0.10);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    display:flex;align-items:flex-start;gap:var(--space-lg);
    transition:all .35s var(--ease);
}
.resource-card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.resource-icon{
    width:48px;height:48px;border-radius:var(--radius-md);flex-shrink:0;
    background:var(--neutral-hover-bg);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;font-size:1.25rem;
}
.resource-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-xs);color:var(--text-primary)}
.resource-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}

/* ===== HERO SECTION ===== */
.hero{
    min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:left;
    padding:calc(var(--header-h) + var(--space-2xl)) var(--space-xl) var(--space-xl);
    position:relative;overflow:hidden;
}
.hero::before{display:none}
.hero-split{
    display:grid;grid-template-columns:1fr 380px;gap:var(--space-3xl);
    align-items:center;width:100%;margin-bottom:var(--space-2xl);
}
.hero-text{display:flex;flex-direction:column;align-items:flex-start}
.hero-badge{margin-bottom:var(--space-xl)}
.hero-title{
    font-size:var(--text-hero);font-weight:500;line-height:1.1;
    letter-spacing:0.06em;max-width:700px;margin:0 0 var(--space-lg);
}
/* Rotating word animation in hero */
.hero-rotating-word{
    display:inline-block;
    color:var(--accent);
    position:relative;
    min-width:140px;
    text-align:left;
}
.persona-title{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:0.3em;
}
#personaSection .hero-rotating-word{
    width:5.5em;
    min-width:auto;
}
.hero-rotating-word.fade-out{
    animation:heroWordOut 0.35s ease forwards;
}
.hero-rotating-word.fade-in{
    animation:heroWordIn 0.35s ease forwards;
}
@keyframes heroWordOut{
    0%{opacity:1;transform:translateY(0)}
    100%{opacity:0;transform:translateY(-16px)}
}
@keyframes heroWordIn{
    0%{opacity:0;transform:translateY(16px)}
    100%{opacity:1;transform:translateY(0)}
}

.hero-subtitle{
    font-size:var(--text-lg);color:var(--text-secondary);
    max-width:540px;margin:0 0 var(--space-md);line-height:1.7;
}
/* Hero floating video preview card */
.hero-preview{display:flex;align-items:center;justify-content:center}
.hero-preview-card{
    width:100%;max-width:340px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);overflow:hidden;
    animation:heroFloat 5s ease-in-out infinite;
    box-shadow:0 20px 60px rgba(0,0,0,.4), 0 0 40px rgba(184,151,46,.08);
}
@keyframes heroFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-14px)}
}
.hero-preview-frame{
    width:100%;aspect-ratio:16/9;position:relative;
    display:flex;align-items:center;justify-content:center;
}
.hero-preview-gradient{
    position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.6) 100%);
}
.hero-preview-play{
    position:relative;z-index:1;opacity:.85;
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.hero-preview-info{padding:1rem 1.25rem}
.hero-preview-title{
    display:block;font-size:var(--text-sm);font-weight:500;
    color:var(--text-primary);margin-bottom:.5rem;
}
.hero-preview-meta{display:flex;gap:.5rem}
.hero-preview-badge{
    font-size:0.7rem;padding:.2rem .55rem;
    background:rgba(255,255,255,.06);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text-muted);
    letter-spacing:.04em;
}
.hero-preview-card{cursor:pointer}
.hero-preview-player{width:100%;aspect-ratio:16/9}
.hero-preview-player video{display:block;background:#000}
.hero-video{
    width:100%;max-width:1000px;aspect-ratio:16/9;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);overflow:hidden;
    position:relative;margin:0 auto var(--space-3xl);
}
.hero-video-inner{
    width:100%;height:100%;
    background:var(--color-black-card);
    display:flex;align-items:center;justify-content:center;
}
.play-btn{
    width:80px;height:80px;border-radius:50%;
    background:rgba(255,255,255,.1);backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .3s var(--ease);border:1px solid rgba(255,255,255,.1);
}
.play-btn:hover{background:rgba(255,255,255,.2);transform:scale(1.1);border-color:rgba(255,255,255,.2)}
.play-btn svg{margin-left:4px}
.hero-cta{display:flex;gap:var(--space-md);align-items:center;justify-content:center;flex-wrap:wrap}

/* ===== HERO PROMPT BOX ===== */
.hero-prompt-box{
    width:100%;max-width:780px;margin:0 0 var(--space-2xl);
}
.hero-prompt-textarea{
    width:100%;padding:1.25rem var(--space-xl);
    background:var(--bg-card);border:1px solid var(--border-hover);
    border-radius:var(--radius-lg);color:var(--text-primary);
    font-size:var(--text-base);font-family:var(--font);
    resize:none;line-height:1.6;transition:all .3s;
}
.hero-prompt-textarea:focus{
    outline:none;border-color:var(--color-gold-dim);
}
.hero-prompt-textarea::placeholder{color:var(--text-muted)}
.hero-prompt-actions{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:var(--space-md);gap:var(--space-md);flex-wrap:wrap;
}
.example-chips{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.example-chip{
    padding:.4rem .85rem;font-size:var(--text-xs);
    color:var(--text-muted);border:1px solid var(--border);
    border-radius:var(--radius-full);cursor:pointer;
    transition:all .2s;background:transparent;font-family:var(--font);
}
.example-chip:hover{border-color:var(--neutral-border-hover);color:var(--neutral);background:var(--neutral-hover-bg)}
.hero-prompt-hint{
    text-align:left;color:var(--text-muted);font-size:var(--text-sm);
    margin-top:var(--space-md);
}
.hero-prompt-hint a{color:var(--neutral);font-weight:500}
.hero-prompt-hint a:hover{text-decoration:underline}
.text-center .hero-prompt-box{margin-left:auto;margin-right:auto}
.text-center .hero-prompt-hint{text-align:left}

/* Proof bar styles consolidated into cinematic section below */

/* ===== PRODUCT DEMO SHOWCASE ===== */
.demo-showcase{
    max-width:960px;margin:0 auto;
}
.demo-frames{position:relative;height:480px}
.demo-frame{
    position:absolute;top:0;left:0;width:100%;
    opacity:0;transform:translateY(12px);
    transition:opacity .5s ease,transform .5s ease;
    pointer-events:none;
}
.demo-frame.active{
    opacity:1;transform:translateY(0);
    pointer-events:auto;
}

/* Demo window chrome */
.demo-window{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);overflow:hidden;
}
.demo-window-bar{
    display:flex;align-items:center;gap:8px;
    padding:var(--space-md) var(--space-lg);
    background:var(--bg-secondary);border-bottom:1px solid var(--border);
}
.demo-window-bar .demo-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--border-hover);
}
.demo-window-bar .demo-dot:first-child{background:#FF5F57}
.demo-window-bar .demo-dot:nth-child(2){background:#FEBC2E}
.demo-window-bar .demo-dot:nth-child(3){background:#28C840}
.demo-window-title{
    margin-left:auto;margin-right:auto;
    color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
}
/* Old demo frame CSS removed — replaced by enhanced demo styles below */

/* ===== DEMO MINI FEATURE CARDS ===== */
.demo-mini-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-xl);
    transition:all .4s var(--ease);overflow:hidden;
}
.demo-mini-card:hover{border-color:var(--border);transform:none}
.demo-mini-visual{
    height:120px;background:var(--bg-elevated);
    border-radius:var(--radius-md);margin-bottom:var(--space-lg);
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;padding:var(--space-md);
}
.demo-mini-title{font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs)}
.demo-mini-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}

/* Feature grid — 3 columns, 2 rows */
.feature-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
@media (max-width: 1024px) { .feature-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid-6 { grid-template-columns: 1fr; } }

/* Mini script mockup */
.mini-script-mock { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); }
.mini-script-input {
    padding: .4rem .75rem;
    background: var(--bg-card);
    border: 1px solid var(--border-active);
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: var(--neutral);
}
.mini-script-prompt::before { content: '> '; color: var(--text-muted); }
.mini-script-output { display: flex; flex-direction: column; gap: 3px; }
.mini-script-line {
    padding: .25rem .5rem;
    background: var(--bg-card);
    border-left: 2px solid var(--neutral-border-hover);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 9px;
    color: var(--text-secondary);
    line-height: 1.4;
    opacity: 0;
    transform: translateY(4px);
    animation: scriptLineIn 0.4s ease forwards;
}
.mini-script-line:nth-child(1) { animation-delay: 0.3s; }
.mini-script-line:nth-child(2) { animation-delay: 0.6s; }
.mini-script-line:nth-child(3) { animation-delay: 0.9s; }
@keyframes scriptLineIn { to { opacity: 1; transform: translateY(0); } }

/* Mini cinema mockup */
.mini-cinema-mock {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: center;
}
.mini-cinema-script {
    display: flex; align-items: center; gap: 4px;
    padding: .4rem .6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 10px; color: var(--text-secondary);
}
.mini-cinema-arrow { color: var(--neutral); font-size: 16px; font-weight: 500; }
.mini-cinema-frame {
    width: 80px; height: 50px;
    background: var(--color-black-card);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
}
.mini-cinema-gradient {
    position: absolute; inset: 0;
    background: rgba(0,0,0,.4);
}

/* Mini music mockup */
.mini-music-mock {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}
.mini-music-tag {
    padding: .3rem .7rem;
    background: var(--neutral-hover-bg);
    border: 1px solid var(--neutral-border);
    border-radius: var(--radius-full);
    font-size: 10px;
    color: var(--neutral);
    font-weight: 500;
}
.mini-music-eq {
    display: flex; align-items: end; gap: 4px; height: 28px;
}
.mini-music-eq span {
    width: 5px; background: var(--neutral-dim); border-radius: 2px;
    animation: waveBar 1s ease-in-out infinite;
}
.mini-music-eq span:nth-child(1) { height: 6px; animation-delay: 0s; }
.mini-music-eq span:nth-child(2) { height: 14px; animation-delay: .12s; }
.mini-music-eq span:nth-child(3) { height: 22px; animation-delay: .24s; }
.mini-music-eq span:nth-child(4) { height: 10px; animation-delay: .36s; }
.mini-music-eq span:nth-child(5) { height: 26px; animation-delay: .48s; }
.mini-music-eq span:nth-child(6) { height: 18px; animation-delay: .6s; }
.mini-music-eq span:nth-child(7) { height: 8px; animation-delay: .72s; }
.mini-music-eq span:nth-child(8) { height: 20px; animation-delay: .84s; }

/* Mini voice mockup */
.mini-voice-mock{width:100%;display:flex;flex-direction:column;gap:var(--space-md);align-items:center}
.mini-dropdown{
    padding:.4rem .75rem;background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    font-size:var(--text-xs);color:var(--text-secondary);
}
.mini-waveform{display:flex;align-items:end;gap:3px;height:32px}
.mini-waveform span{
    width:4px;background:var(--neutral-dim);border-radius:2px;
    animation:waveBar 1.2s ease-in-out infinite;
}
.mini-waveform span:nth-child(1){height:8px;animation-delay:0s}
.mini-waveform span:nth-child(2){height:16px;animation-delay:.1s}
.mini-waveform span:nth-child(3){height:24px;animation-delay:.2s}
.mini-waveform span:nth-child(4){height:12px;animation-delay:.3s}
.mini-waveform span:nth-child(5){height:28px;animation-delay:.4s}
.mini-waveform span:nth-child(6){height:20px;animation-delay:.5s}
.mini-waveform span:nth-child(7){height:10px;animation-delay:.6s}
.mini-waveform span:nth-child(8){height:22px;animation-delay:.7s}
.mini-waveform span:nth-child(9){height:14px;animation-delay:.8s}
.mini-waveform span:nth-child(10){height:26px;animation-delay:.9s}
.mini-waveform span:nth-child(11){height:18px;animation-delay:1s}
.mini-waveform span:nth-child(12){height:8px;animation-delay:1.1s}
@keyframes waveBar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}

/* Mini scenes mockup */
.mini-scenes-mock{display:flex;flex-direction:column;gap:6px;width:100%}
.mini-scene{
    padding:.35rem .6rem;background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    font-size:10px;color:var(--text-muted);
    transition:transform .6s ease;
}
.demo-mini-card:hover .mini-scene{
    transform:translateX(calc(var(--i) * 8px));
}

/* Mini platform mockup */
.mini-platform-mock{display:flex;gap:var(--space-sm);margin-bottom:var(--space-sm)}
.mini-ratio{
    padding:.3rem .6rem;font-size:10px;font-weight:500;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-sm);color:var(--text-muted);
    transition:all .2s;
}
.mini-ratio.active{border-color:var(--neutral-border-hover);color:var(--neutral);background:var(--neutral-hover-bg)}
.mini-platforms{display:flex;gap:var(--space-sm);flex-wrap:wrap}
.mini-platforms span{
    font-size:10px;color:var(--text-muted);
    padding:.2rem .5rem;background:var(--bg-card);
    border-radius:var(--radius-sm);
}

/* Transform styles consolidated into cinematic section below */

/* ===== FAQ SECTION ===== */
.faq-list{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-sm)}
.faq-item{
    background:var(--bg-card);border:1px solid rgba(245,240,232,0.10);
    border-radius:var(--radius-lg);overflow:hidden;
    transition:border-color .2s;
}
.faq-item.open{border-color:var(--border-hover)}
.faq-question{
    width:100%;display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-lg) var(--space-xl);
    font-size:var(--text-base);font-weight:500;color:var(--text-primary);
    text-align:left;cursor:pointer;font-family:var(--font);
    background:transparent;border:none;transition:color .2s;
}
.faq-question:hover{color:var(--text-primary)}
.faq-arrow{
    font-size:var(--text-xl);color:var(--text-muted);
    transition:transform .3s;flex-shrink:0;
}
.faq-item.open .faq-arrow{transform:rotate(45deg)}
.faq-answer{
    max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;
}
.faq-item.open .faq-answer{max-height:600px;padding:0 var(--space-xl) var(--space-lg)}
.faq-answer p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}

/* ===== GUEST BANNER (create.html) ===== */
.guest-banner{
    background:var(--neutral-hover-bg);border-bottom:1px solid var(--neutral-border);
    padding:var(--space-sm) var(--space-xl);
    display:flex;align-items:center;justify-content:center;gap:var(--space-md);
    font-size:var(--text-sm);color:var(--neutral);
}
.guest-banner a{color:var(--color-ivory);font-weight:500;text-decoration:underline}

/* ===== AUTH MODAL ===== */
.auth-modal-overlay{
    position:fixed;inset:0;z-index:2000;
    background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;
    padding:var(--space-xl);
}
.auth-modal-overlay.visible{display:flex}
.auth-modal{
    width:100%;max-width:420px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-3xl);
    text-align:center;animation:fadeInUp .3s ease;
}
.auth-modal h2{font-size:var(--text-2xl);margin-bottom:var(--space-sm)}
.auth-modal p{color:var(--text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2xl)}
.auth-modal .btn{width:100%;margin-bottom:var(--space-md)}
.auth-modal-footer{
    margin-top:var(--space-lg);font-size:var(--text-sm);color:var(--text-muted);
}
.auth-modal-footer a{color:var(--neutral);font-weight:500}

/* ===== SLIDER LIMIT MESSAGE ===== */
.slider-limit-msg{
    margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);
    background:var(--neutral-hover-bg);border:1px solid var(--neutral-border);
    border-radius:var(--radius-md);font-size:var(--text-xs);
    color:var(--neutral);display:none;
    transition:opacity .3s;
}
.slider-limit-msg.visible{display:block}
.slider-limit-msg a{color:var(--color-ivory);font-weight:500;text-decoration:underline}

/* ===== RESPONSIVE: NEW SECTIONS ===== */
@media(max-width:768px){
    .hero-prompt-actions{flex-direction:column;align-items:stretch}
    .example-chips{justify-content:center}
    .hero-prompt-actions .btn{width:100%}
    .proof-stats{gap:var(--space-xl)}
    .proof-divider{display:none}
    .demo-review{flex-direction:column}
    .demo-review-sidebar,.demo-review-player{width:100%}
    .demo-frames{min-height:auto}
    .transform-grid{grid-template-columns:1fr}
    .faq-question{font-size:var(--text-sm);padding:var(--space-md) var(--space-lg)}
    .demo-dots{gap:var(--space-sm)}
    .demo-dot-btn{padding:.4rem .85rem;font-size:var(--text-xs)}
}

/* ===== PAIN / PROBLEM SECTION ===== */
.pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-xl)}
.pain-item{
    display:flex;align-items:flex-start;gap:var(--space-lg);
    padding:var(--space-xl);background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-lg);
}
.pain-icon{
    width:44px;height:44px;flex-shrink:0;border-radius:var(--radius-md);
    background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.15);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.pain-title{font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs)}
.pain-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6}

/* ===== FORMS ===== */
.form-group{margin-bottom:var(--space-lg)}
.form-label{display:block;font-weight:500;font-size:var(--text-sm);margin-bottom:var(--space-sm);color:var(--text-secondary)}
.form-input,.form-textarea,.form-select{
    width:100%;padding:.875rem var(--space-lg);
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--text-primary);
    font-size:var(--text-base);transition:all .2s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
    outline:none;border-color:var(--color-gold-dim);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--color-ivory-faint)}
.form-textarea{resize:vertical;min-height:120px;line-height:1.6}
.form-hint{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-xs)}
.form-error-msg{font-size:var(--text-xs);color:var(--error);margin-top:var(--space-xs)}
.form-input.error,.form-textarea.error{border-color:var(--error)}
.form-divider{
    display:flex;align-items:center;gap:var(--space-md);
    margin:var(--space-xl) 0;color:var(--text-muted);font-size:var(--text-sm);
}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:var(--border)}

/* Toggle / Tabs */
.toggle-group{
    display:inline-flex;background:var(--bg-input);
    border:1px solid var(--border);border-radius:var(--radius-md);
    padding:4px;gap:4px;
}
.toggle-btn{
    padding:.625rem 1.5rem;border-radius:var(--radius-sm);
    font-size:var(--text-sm);font-weight:500;color:var(--text-muted);
    transition:all .2s;cursor:pointer;border:none;background:transparent;
    font-family:var(--font);
}
.toggle-btn.active{background:var(--neutral);color:var(--bg-primary)}

/* ===== FOOTER ===== */
.footer{
    background:var(--bg-card);border-top:1px solid var(--border);
    padding:var(--space-4xl) 0 var(--space-xl);
}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-3xl)}
.footer-brand .logo{font-size:var(--text-xl);margin-bottom:var(--space-md)}
.footer-tagline{color:var(--text-muted);font-size:var(--text-sm);line-height:1.7;max-width:280px}
.footer-col h4{font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-lg);text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary)}
.footer-col ul{display:flex;flex-direction:column;gap:var(--space-sm)}
.footer-col a{color:var(--text-secondary);font-size:var(--text-sm);transition:color .2s}
.footer-col a:hover{color:var(--text-primary)}
.footer-bottom{
    margin-top:var(--space-3xl);padding-top:var(--space-xl);
    border-top:1px solid var(--border);
    display:flex;justify-content:space-between;align-items:center;
    color:var(--text-muted);font-size:var(--text-xs);
}
.footer-social{display:flex;gap:var(--space-lg)}
.footer-social a{color:var(--text-muted);transition:color .2s}
.footer-social a:hover{color:var(--text-primary)}

/* ===== AUTH PAGES ===== */
.auth-page{
    min-height:100vh;display:flex;align-items:center;justify-content:center;
    padding:var(--space-xl);
    background:var(--bg-primary);position:relative;
}
.auth-page::before{display:none}
.auth-card{
    width:100%;max-width:420px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-3xl);
    position:relative;z-index:1;
}
.auth-header{text-align:center;margin-bottom:var(--space-2xl)}
.auth-header .logo{font-size:var(--text-xl);margin-bottom:var(--space-lg);display:inline-block}
.auth-header h1{font-size:var(--text-2xl);font-weight:500;margin-bottom:var(--space-xs)}
.auth-header p{color:var(--text-muted);font-size:var(--text-sm)}
.auth-footer{text-align:center;margin-top:var(--space-xl);font-size:var(--text-sm);color:var(--text-muted)}
.auth-footer a{color:var(--neutral);font-weight:500}
.auth-footer a:hover{text-decoration:underline}

/* Google OAuth Button */
.btn-google{
    width:100%;padding:.875rem;border:1px solid var(--border);
    border-radius:var(--radius-md);background:var(--bg-elevated);
    color:var(--text-primary);font-weight:500;font-size:var(--text-sm);
    display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
    transition:all .2s;font-family:var(--font);cursor:pointer;
}
.btn-google:hover{border-color:var(--border-hover);background:var(--bg-card)}
.btn-google img{width:18px;height:18px}

/* ===== DASHBOARD LAYOUT ===== */
.dashboard{display:flex;min-height:100vh}
.sidebar{
    width:var(--sidebar-w-collapsed);background:var(--bg-secondary);
    border-right:1px solid var(--border);
    display:flex;flex-direction:column;
    padding:var(--space-sm) var(--space-xs);position:fixed;top:0;left:0;
    height:100vh;z-index:900;
    transition:width .25s var(--ease),padding .25s var(--ease);
    overflow:hidden;
}
.sidebar:hover{
    width:var(--sidebar-w);padding:var(--space-lg);
}
.sidebar-logo{
    padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-xl);
    font-weight:500;font-size:var(--text-base);letter-spacing:0.06em;
    white-space:nowrap;overflow:hidden;
    opacity:0;transition:opacity .2s;
}
.sidebar:hover .sidebar-logo{opacity:1}
.sidebar-logo span{color:var(--accent)}
.sidebar-nav{display:flex;flex-direction:column;gap:var(--space-xs);flex:1}
.sidebar-spacer{flex:1}
.sidebar-link{
    display:flex;align-items:center;gap:var(--space-md);
    padding:.75rem var(--space-sm);border-radius:var(--radius-md);
    color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
    transition:all .2s;white-space:nowrap;overflow:hidden;
}
.sidebar:hover .sidebar-link{padding:.75rem var(--space-md)}
.sidebar-link:hover{background:rgba(255,255,255,.04);color:var(--text-secondary)}
.sidebar-link.active{background:var(--neutral-hover-bg);color:var(--neutral)}
.sidebar-link .icon{width:20px;text-align:center;font-size:var(--text-base);flex-shrink:0}
.sidebar-text{opacity:0;transition:opacity .2s}
.sidebar:hover .sidebar-text{opacity:1}
.sidebar-divider{height:1px;background:var(--border);margin:var(--space-md) 0}
.sidebar-link.danger{color:var(--error)}
.sidebar-link.danger:hover{background:rgba(248,113,113,.06)}
.sidebar-link.upgrade{color:var(--accent)}
.sidebar-link.upgrade:hover{background:rgba(212,136,42,.08)}

/* Sidebar section label */
.sidebar-section-label{
    padding:.5rem var(--space-sm);
    font-size:.65rem;font-weight:500;letter-spacing:.1em;
    text-transform:uppercase;color:var(--text-muted);
    white-space:nowrap;overflow:hidden;
}
.sidebar:hover .sidebar-section-label{padding:.5rem var(--space-md)}

/* Sidebar bottom area */
.sidebar-bottom{
    border-top:1px solid var(--border);
    padding-top:var(--space-sm);
    display:flex;flex-direction:column;gap:var(--space-xs);
}

/* Account trigger */
.sidebar-account{position:relative}
.sidebar-account-trigger{
    display:flex;align-items:center;gap:var(--space-md);
    padding:.75rem var(--space-sm);border-radius:var(--radius-md);
    cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden;
}
.sidebar:hover .sidebar-account-trigger{padding:.75rem var(--space-md)}
.sidebar-account-trigger:hover{background:rgba(255,255,255,.04)}
.sidebar-avatar{
    width:28px;height:28px;border-radius:50%;
    background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;
    font-size:.75rem;font-weight:500;flex-shrink:0;
}
.sidebar-user-name{
    font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);
    overflow:hidden;text-overflow:ellipsis;
}
.sidebar-account-arrow{
    margin-left:auto;font-size:.7rem;color:var(--text-muted);
}

/* Account popover */
.sidebar-account-popover{
    display:none;position:absolute;bottom:calc(100% + 8px);left:0;
    min-width:200px;
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);
    border:1px solid var(--color-black-border);
    padding:var(--space-xs);z-index:1000;
}
.sidebar-account-popover.open{display:block}
.account-popover-item{
    display:flex;align-items:center;gap:var(--space-sm);
    padding:.6rem var(--space-md);border-radius:var(--radius-md);
    color:var(--text-secondary);font-size:var(--text-sm);font-weight:500;
    white-space:nowrap;transition:all .15s;cursor:pointer;
}
.account-popover-item:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.account-popover-icon{width:16px;text-align:center;font-size:var(--text-sm);flex-shrink:0}
.account-popover-divider{height:1px;background:var(--border);margin:var(--space-xs) 0}
.account-popover-danger{color:var(--error)}
.account-popover-danger:hover{background:rgba(248,113,113,.08);color:var(--error)}

/* ===== Dashboard Home Page ===== */
.dash-welcome{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-2xl) var(--space-2xl) var(--space-lg);
}
.dash-greeting{
    font-size:var(--text-2xl);font-weight:500;line-height:1.2;
}
.dash-sub{
    color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-xs);
}
.dash-header-right{display:flex;align-items:center;gap:var(--space-md)}
.dash-avatar{
    width:40px;height:40px;border-radius:50%;
    background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;
    font-weight:500;font-size:var(--text-base);
}
.dash-section{padding:0 var(--space-2xl) var(--space-2xl)}
.dash-section-title{
    font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-lg);
}
.dash-section-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-lg);
}
.dash-section-header .dash-section-title{margin-bottom:0}
.dash-view-all{
    color:var(--neutral);font-size:var(--text-sm);font-weight:500;
}
.dash-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:var(--space-lg);
}
.dash-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-xl);
    transition:all .3s var(--ease);display:block;
    text-decoration:none;color:inherit;
}
.dash-card:hover{
    border-color:var(--color-black-border);
}
.dash-card-primary{border-color:var(--neutral-border-hover)}
.dash-card-primary:hover{
    border-color:var(--color-gold-faint);
}
.dash-card-icon{
    width:48px;height:48px;border-radius:var(--radius-md);
    background:var(--bg-elevated);
    display:flex;align-items:center;justify-content:center;
    margin-bottom:var(--space-md);color:var(--neutral);
}
.dash-card-primary .dash-card-icon{
    background:var(--neutral-hover-bg);
}
.dash-card h3{
    font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs);
    color:var(--text-primary);
}
.dash-card p{
    color:var(--text-muted);font-size:var(--text-sm);line-height:1.5;
}
.dash-recent{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;
}
.dash-recent-item{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-md) var(--space-lg);
    border-bottom:1px solid var(--border);font-size:var(--text-sm);
}
.dash-recent-item:last-child{border-bottom:none}
.dash-recent-title{flex:1;font-weight:500;color:var(--text-primary)}
.dash-recent-status{
    font-size:var(--text-xs);padding:2px 10px;
    border-radius:var(--radius-full);font-weight:500;
}
.status-completed{background:rgba(52,211,153,.1);color:var(--success)}
.status-processing,.status-producing{background:rgba(212,136,42,.1);color:var(--accent)}
.status-queued{background:rgba(96,165,250,.1);color:#60A5FA}
.status-failed,.status-error{background:rgba(248,113,113,.1);color:var(--error)}
.dash-recent-date{color:var(--text-muted);font-size:var(--text-xs)}
.dash-empty{
    padding:var(--space-2xl);text-align:center;
    color:var(--text-muted);font-size:var(--text-sm);
}
.dash-empty .btn{margin-top:var(--space-md)}
.dash-plan-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-xl);
    display:flex;align-items:center;justify-content:space-between;
}
.dash-plan-info h3{font-size:var(--text-base);font-weight:500;margin-bottom:var(--space-xs)}
.dash-plan-info p{color:var(--text-muted);font-size:var(--text-sm)}

/* Main content area */
.main-content{
    flex:1;margin-left:var(--sidebar-w-collapsed);min-height:100vh;
    background:var(--bg-primary);
}
.main-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-lg) var(--space-2xl);
    border-bottom:1px solid var(--border);
    background:var(--bg-primary);position:sticky;top:0;z-index:100;
}
.main-header h1{font-size:var(--text-2xl);font-weight:500}
.user-info{display:flex;align-items:center;gap:var(--space-md)}
.avatar{
    width:36px;height:36px;border-radius:50%;
    background:var(--neutral-hover-bg);display:flex;align-items:center;justify-content:center;
    font-weight:500;font-size:var(--text-sm);color:var(--neutral);border:1px solid var(--neutral-border);
}
.content-area{padding:var(--space-2xl)}

/* Create Video Form */
.create-form{max-width:700px;margin:0 auto}
.create-form .form-group{margin-bottom:var(--space-xl)}
.mode-selector{margin-bottom:var(--space-2xl)}
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.voice-option{
    padding:var(--space-md);border:1px solid var(--border);
    border-radius:var(--radius-md);cursor:pointer;text-align:center;
    transition:all .2s;font-size:var(--text-sm);
}
.voice-option:hover{border-color:var(--border-hover)}
.voice-option.selected{border-color:var(--neutral-border-hover);background:var(--neutral-hover-bg)}
.voice-option-name{font-weight:500;margin-bottom:2px}
.voice-option-label{color:var(--text-muted);font-size:var(--text-xs)}

/* Video Table */
.video-table{width:100%;border-collapse:collapse}
.video-table th{
    text-align:left;padding:var(--space-md) var(--space-lg);
    font-size:var(--text-xs);font-weight:500;text-transform:uppercase;
    letter-spacing:.08em;color:var(--text-muted);
    border-bottom:1px solid var(--border);
}
.video-table td{
    padding:var(--space-md) var(--space-lg);
    font-size:var(--text-sm);border-bottom:1px solid var(--border);
    color:var(--text-secondary);vertical-align:middle;
}
.video-table tr:hover td{background:rgba(255,255,255,.02)}
.video-table .title-cell{color:var(--text-primary);font-weight:500}
.status-dot{
    width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:var(--space-sm);
}
.status-dot.completed{background:var(--success)}
.status-dot.processing{background:var(--gold);animation:pulse 1.5s infinite}
.status-dot.review_ready{background:var(--accent);animation:pulse 1.5s infinite}
.status-dot.queued{background:var(--info)}
.status-dot.failed{background:var(--error)}

/* Empty State */
.empty-state{
    text-align:center;padding:var(--space-5xl) var(--space-xl);
    color:var(--text-muted);
}
.empty-state-icon{font-size:4rem;margin-bottom:var(--space-lg);opacity:.3}
.empty-state h3{font-size:var(--text-xl);font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-sm)}
.empty-state p{font-size:var(--text-sm);margin-bottom:var(--space-xl)}

/* ===== MODALS ===== */
.modal-overlay{
    position:fixed;top:0;left:0;width:100%;height:100%;
    background:rgba(0,0,0,.6);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    z-index:2000;opacity:0;pointer-events:none;
    transition:opacity .3s;
}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-content{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl);
    max-width:480px;width:90%;position:relative;
    transform:translateY(20px);transition:transform .3s var(--ease);
}
.modal-overlay.active .modal-content{transform:translateY(0)}
.modal-close{
    position:absolute;top:var(--space-lg);right:var(--space-lg);
    width:32px;height:32px;border-radius:var(--radius-md);
    display:flex;align-items:center;justify-content:center;
    color:var(--text-muted);background:transparent;cursor:pointer;
    transition:all .2s;font-size:var(--text-lg);
}
.modal-close:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}

/* ===== TOAST NOTIFICATIONS ===== */
.toast{
    position:fixed;top:var(--space-xl);right:var(--space-xl);
    padding:var(--space-md) var(--space-xl);
    border-radius:var(--radius-md);
    font-size:var(--text-sm);font-weight:500;
    z-index:3000;
    animation:slideInRight .3s var(--ease),fadeOut .3s 3.5s ease forwards;
    display:flex;align-items:center;gap:var(--space-sm);
    max-width:400px;
}
.toast-success{background:var(--bg-card);border:1px solid rgba(52,211,153,.3);color:var(--success)}
.toast-error{background:var(--bg-card);border:1px solid rgba(248,113,113,.3);color:var(--error)}
.toast-info{background:var(--bg-card);border:1px solid rgba(96,165,250,.3);color:var(--info)}

/* ===== LOADING ===== */
.spinner{
    width:40px;height:40px;border:3px solid var(--border);
    border-top-color:var(--neutral);border-radius:50%;
    animation:spin .8s linear infinite;
}
.loading-overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    background:rgba(7,7,13,.9);backdrop-filter:blur(4px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    border-radius:inherit;z-index:10;
}
.loading-text{margin-top:var(--space-lg);color:var(--text-secondary);font-size:var(--text-sm)}

/* Processing state */
.processing-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-3xl);
    text-align:center;max-width:500px;margin:0 auto;
}
.processing-card .spinner{margin:0 auto var(--space-xl)}
.processing-title{font-size:var(--text-2xl);font-weight:500;margin-bottom:var(--space-sm)}
.processing-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7}

/* Video Ready */
.video-ready-icon{
    width:56px;height:56px;border-radius:50%;
    background:rgba(52,211,153,.15);color:var(--success);
    font-size:28px;font-weight:500;line-height:56px;
    margin:0 auto var(--space-lg);
}
.video-failed-icon{
    width:56px;height:56px;border-radius:50%;
    background:rgba(248,113,113,0.15);color:var(--error);
    font-size:28px;font-weight:500;line-height:56px;
    margin:0 auto var(--space-lg);
}
.video-player-wrap{
    margin-top:var(--space-xl);border-radius:var(--radius-lg);
    overflow:hidden;border:1px solid var(--border);
    background:#000;
}
.video-player-wrap video{
    width:100%;display:block;max-height:320px;
}

/* Production Confirmation Overlay */
.production-confirm-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.7);
    display:flex;align-items:center;justify-content:center;
    z-index:1000;backdrop-filter:blur(4px);
}
.production-confirm-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-3xl);
    max-width:440px;width:90%;text-align:center;
}
.production-confirm-card h3{
    font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-lg);
}
.confirm-summary{
    text-align:left;margin-bottom:var(--space-xl);
    background:var(--bg-input);border-radius:var(--radius-md);
    padding:var(--space-md) var(--space-lg);
}
.confirm-summary-row{
    display:flex;justify-content:space-between;
    padding:var(--space-xs) 0;font-size:var(--text-sm);
    border-bottom:1px solid var(--border);
}
.confirm-summary-row:last-child{border-bottom:none}
.confirm-summary-row .label{color:var(--text-muted)}
.confirm-summary-row .value{color:var(--text-primary);font-weight:500}
.confirm-actions{
    display:flex;gap:var(--space-md);margin-top:var(--space-lg);
}
.confirm-actions .btn{flex:1}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glow{0%,100%{opacity:0.8}50%{opacity:1}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes gradientX{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Cinematic reveal system */
.animate-on-scroll{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.45s}
.delay-4{transition-delay:.6s}

/* Reveal variants */
.reveal-heading{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-heading.is-visible{opacity:1;transform:translateY(0)}
.reveal-text{opacity:0;transform:translateY(16px);transition:opacity .8s cubic-bezier(.16,1,.3,1) .15s,transform .8s cubic-bezier(.16,1,.3,1) .15s}
.reveal-text.is-visible{opacity:1;transform:translateY(0)}
.reveal-visual{opacity:0;transform:translateY(20px) scale(.97);transition:opacity .9s cubic-bezier(.16,1,.3,1) .3s,transform .9s cubic-bezier(.16,1,.3,1) .3s}
.reveal-visual.is-visible{opacity:1;transform:translateY(0) scale(1)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-left.is-visible{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal-right.is-visible{opacity:1;transform:translateX(0)}

/* Gradient border effect */
.gradient-border{position:relative}
.gradient-border::before{
    content:'';position:absolute;inset:-1px;
    border-radius:inherit;padding:1px;
    background:var(--color-gold-faint);
    -webkit-mask:linear-gradient(var(--color-ivory) 0 0) content-box,linear-gradient(var(--color-ivory) 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;
}

/* ===== PAGE-SPECIFIC ===== */
/* Page hero — reusable for subpage hero sections */
.page-hero{
    padding:calc(var(--header-h) + var(--space-5xl)) 0 var(--space-3xl);
    text-align:center;position:relative;overflow:hidden;
}
.page-hero::before{display:none}

/* ═══════════════════════════════════════
   ABOUT PAGE — Premium redesign
   ═══════════════════════════════════════ */

/* Softer, warmer base tone */
body.about-page{ background:#111116 }
body.about-page .header{ background:rgba(17,17,22,0.92);backdrop-filter:blur(12px) }
body.about-page .footer{ background:#0e0e13 }
body.about-page .proof-bar{
    background:rgba(255,255,255,0.015);
    border-color:rgba(255,255,255,0.04);
}

/* ── Eyebrow label (reusable) ── */
.about-eyebrow{
    display:inline-block;
    font-size:0.75rem;font-weight:600;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--accent);
    margin-bottom:var(--space-lg);
    position:relative;padding-left:1.6rem;
}
.about-eyebrow::before{
    content:'';position:absolute;left:0;top:50%;
    width:1rem;height:1.5px;
    background:var(--accent);transform:translateY(-50%);
}

/* ── Hero ── */
.about-hero{
    padding:calc(var(--header-h) + var(--space-5xl)) 0 var(--space-5xl);
    text-align:center;position:relative;overflow:hidden;
}
.about-hero::before{display:none}
.about-hero h1{
    font-size:clamp(2.2rem, 4.5vw, 3.8rem);
    font-weight:600;line-height:1.15;letter-spacing:-0.01em;
    max-width:800px;margin:0 auto var(--space-xl);
}
.about-hero p{
    font-size:var(--text-lg);color:var(--text-secondary);
    max-width:600px;margin:0 auto;line-height:1.75;
}
.about-hero-line{
    width:60px;height:2px;margin:var(--space-2xl) auto 0;
    background:linear-gradient(90deg, transparent, #B8972E, transparent);
    border-radius:2px;
}

/* ── Mission — pull-quote with golden accent bar ── */
.about-mission-section{ padding-top:var(--space-3xl);padding-bottom:var(--space-3xl) }
.about-mission-block{
    display:flex;gap:var(--space-xl);
    max-width:740px;margin:var(--space-2xl) auto 0;
    position:relative;
}
.about-mission-accent{
    flex-shrink:0;width:3px;
    border-radius:3px;
    background:linear-gradient(180deg, #B8972E 0%, rgba(184,151,46,0.15) 100%);
}
.about-mission-text{
    font-size:var(--text-lg);color:var(--text-secondary);
    line-height:1.85;
}

/* ── Founder — two-column editorial layout ── */
.about-founder-section{ padding-top:var(--space-2xl);padding-bottom:var(--space-3xl) }
.founder-layout{
    display:grid;grid-template-columns:1fr 320px;
    gap:var(--space-4xl);align-items:center;
    max-width:960px;margin:0 auto;
}
.founder-story .about-eyebrow{ margin-bottom:var(--space-md) }
.founder-name{
    font-size:var(--text-3xl);font-weight:600;
    margin-bottom:var(--space-xs);letter-spacing:-0.01em;
}
.founder-role{
    color:var(--accent);font-weight:500;
    font-size:var(--text-sm);margin-bottom:var(--space-lg);
}
.founder-bio{
    color:var(--text-secondary);font-size:var(--text-base);line-height:1.85;
}
.founder-badges{
    display:flex;gap:var(--space-sm);
    margin-top:var(--space-xl);flex-wrap:wrap;
}

/* Photo with ambient golden glow */
.founder-photo-wrap{
    position:relative;display:flex;
    align-items:center;justify-content:center;
}
.founder-photo-glow{
    position:absolute;
    width:300px;height:300px;border-radius:50%;
    background:radial-gradient(circle, rgba(184,151,46,0.12) 0%, transparent 70%);
    filter:blur(40px);
    pointer-events:none;
}
.founder-photo{
    width:240px;height:240px;border-radius:50%;
    object-fit:cover;object-position:center top;
    border:3px solid rgba(184,151,46,0.2);
    position:relative;z-index:1;
    box-shadow:0 0 60px rgba(184,151,46,0.08);
}

/* ── CTA — centered dramatic ── */
.about-cta-section{
    text-align:center;
    padding-top:var(--space-4xl);padding-bottom:var(--space-4xl);
}
.about-cta-inner{
    max-width:600px;margin:0 auto;
}
.about-cta-inner .cin-section-title{
    font-size:var(--text-4xl);
    margin-bottom:var(--space-md);
}
.about-cta-sub{
    color:var(--text-secondary);font-size:var(--text-lg);
    margin-bottom:var(--space-2xl);line-height:1.7;
}
.about-cta-inner .btn{ font-size:1rem }

/* Blog detail */
.blog-hero{
    padding:calc(var(--header-h) + var(--space-4xl)) 0 var(--space-2xl);
    text-align:center;max-width:800px;margin:0 auto;
}
.blog-content{max-width:720px;margin:0 auto;padding:var(--space-2xl) var(--space-xl)}
.blog-content h2{font-size:var(--text-3xl);margin:var(--space-2xl) 0 var(--space-lg)}
.blog-content h3{font-size:var(--text-xl);margin:var(--space-xl) 0 var(--space-md)}
.blog-content p{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-lg);font-size:var(--text-base)}
.blog-content ul,.blog-content ol{
    color:var(--text-secondary);margin:var(--space-md) 0 var(--space-lg) var(--space-xl);
    display:flex;flex-direction:column;gap:var(--space-sm);
}
.blog-content li{line-height:1.7}
.blog-content blockquote{
    border-left:3px solid var(--neutral-border-hover);padding:var(--space-md) var(--space-xl);
    margin:var(--space-xl) 0;background:var(--bg-card);border-radius:0 var(--radius-md) var(--radius-md) 0;
    color:var(--text-secondary);font-style:italic;
}

/* Community page */
.community-hero{padding:calc(var(--header-h) + var(--space-5xl)) 0 var(--space-3xl);text-align:center;position:relative;overflow:hidden}
.community-hero::before{display:none}
.community-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.channel-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-2xl);
    text-align:center;transition:all .35s var(--ease);
}
.channel-card:hover{border-color:var(--border-hover);transform:translateY(-4px)}
.channel-icon{font-size:2.5rem;margin-bottom:var(--space-lg)}
.channel-name{font-size:var(--text-xl);font-weight:500;margin-bottom:var(--space-sm)}
.channel-desc{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--space-lg)}

/* Contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3xl);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:var(--space-xl)}
.contact-method{
    display:flex;align-items:flex-start;gap:var(--space-lg);
    padding:var(--space-xl);background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-lg);
}
.contact-method-icon{
    width:44px;height:44px;border-radius:var(--radius-md);flex-shrink:0;
    background:var(--neutral-hover-bg);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.contact-method-title{font-size:var(--text-lg);font-weight:500;margin-bottom:var(--space-xs)}
.contact-method-email{color:var(--neutral);font-weight:500;margin-bottom:var(--space-xs)}
.contact-method-note{color:var(--text-muted);font-size:var(--text-sm)}
.contact-form-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl);
}

/* Legal page tabs */
.legal-tabs{
    display:flex;gap:var(--space-sm);margin-bottom:var(--space-2xl);
    border-bottom:1px solid var(--border);padding-bottom:var(--space-md);
}
.legal-tab{
    padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);
    font-size:var(--text-sm);font-weight:500;color:var(--text-muted);
    cursor:pointer;transition:all .2s;background:transparent;border:none;
    font-family:var(--font);
}
.legal-tab:hover{color:var(--text-secondary)}
.legal-tab.active{background:var(--neutral-hover-bg);color:var(--neutral)}
.legal-content{max-width:800px}
.legal-content h2{font-size:var(--text-2xl);margin:var(--space-2xl) 0 var(--space-md)}
.legal-content h3{font-size:var(--text-lg);margin:var(--space-xl) 0 var(--space-md)}
.legal-content p{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-md);font-size:var(--text-sm)}
.legal-content ul{color:var(--text-secondary);margin:var(--space-md) 0 var(--space-lg) var(--space-xl);display:flex;flex-direction:column;gap:var(--space-sm)}
.legal-content li{font-size:var(--text-sm);line-height:1.7;list-style:disc}

/* ===== ADVANCED VIDEO CONTROLS ===== */
/* Control Sections - Collapsible */
.control-section{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-bottom:var(--space-md);
    overflow:visible;transition:border-color .3s;
}
.control-section:not(.open){overflow:hidden}
.control-section:hover{border-color:var(--border-hover)}
.section-toggle{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-lg) var(--space-xl);cursor:pointer;
    transition:background .2s;user-select:none;
}
.section-toggle:hover{background:rgba(255,255,255,.02)}
.section-icon{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;border-radius:8px;
    background:rgba(191,164,106,.1);color:#bfa46a;
    flex-shrink:0;
}
.section-icon svg{width:18px;height:18px}

/* Section icon animations */
.icon-video-setup svg{animation:iconPulse 3s ease-in-out infinite}
.icon-visual-style svg{animation:iconColorShift 4s ease-in-out infinite}
.icon-narrator svg{animation:iconGlow 3s ease-in-out infinite}
.icon-music svg{animation:iconWave 2.5s ease-in-out infinite}
.icon-subtitles svg{animation:iconBlink 2s step-end infinite}
.icon-keywords svg{animation:iconShimmer 3s ease-in-out infinite}
.icon-branding svg{animation:iconSway 4s ease-in-out infinite}
.icon-cta svg{animation:iconBounce 2s ease-in-out infinite}

@keyframes iconPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}
@keyframes iconColorShift{0%,100%{filter:hue-rotate(0deg);opacity:.85}50%{filter:hue-rotate(30deg);opacity:1}}
@keyframes iconGlow{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px rgba(191,164,106,.5))}}
@keyframes iconWave{0%,100%{transform:translateY(0)}25%{transform:translateY(-1px)}75%{transform:translateY(1px)}}
@keyframes iconBlink{0%,90%{opacity:.85}95%{opacity:.3}}
@keyframes iconShimmer{0%{opacity:.7}50%{opacity:1;filter:brightness(1.3)}100%{opacity:.7}}
@keyframes iconSway{0%,100%{transform:rotate(0)}25%{transform:rotate(2deg)}75%{transform:rotate(-2deg)}}
@keyframes iconBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.section-title-text{flex:1;font-weight:500;font-size:var(--text-sm);color:var(--text-primary)}
.toggle-icon{
    font-size:var(--text-xs);color:var(--text-muted);
    transition:transform .3s var(--ease);
}
.control-section.open .toggle-icon{transform:rotate(180deg)}
.section-content{
    max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease),padding .3s;
}
.control-section.open .section-content{
    max-height:2000px;padding:0 var(--space-xl) var(--space-xl);
    overflow:visible;
}

/* Subsection Headers */
.subsection-header{
    font-size:var(--text-xs);font-weight:500;text-transform:uppercase;
    letter-spacing:.08em;color:var(--text-muted);
    margin:var(--space-xl) 0 var(--space-md);padding-bottom:var(--space-sm);
    border-bottom:1px solid var(--border);
}
.subsection-header:first-child{margin-top:0}

/* Form Rows - Two columns */
.form-row{display:flex;gap:var(--space-lg)}
.form-group.half{flex:1;min-width:0}
.required{color:var(--error)}

/* Custom Select Dropdown */
.custom-select{position:relative}
.select-trigger{
    display:flex;align-items:center;gap:var(--space-sm);
    padding:.75rem var(--space-lg);
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);cursor:pointer;
    transition:all .2s;font-size:var(--text-sm);color:var(--text-primary);
}
.select-trigger:hover{border-color:var(--border-hover)}
.custom-select.open .select-trigger{border-color:var(--color-gold-dim)}
.select-value{flex:1}
.select-arrow{
    font-size:var(--text-xs);color:var(--text-muted);
    transition:transform .2s;
}
.custom-select.open .select-arrow{transform:rotate(180deg)}
.select-options{
    position:absolute;top:calc(100% + 4px);left:0;right:0;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-xs);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:all .2s var(--ease);z-index:1000;
    max-height:220px;overflow-y:auto;
}
.custom-select.open .select-options{opacity:1;visibility:visible;transform:translateY(0)}
.select-option{
    padding:.625rem var(--space-md);border-radius:var(--radius-sm);
    font-size:var(--text-sm);color:var(--text-secondary);
    cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:var(--space-sm);
}
.select-option:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
.select-option.selected{background:var(--neutral-hover-bg);color:var(--neutral)}
.custom-select.small .select-trigger{padding:.5rem var(--space-md);font-size:var(--text-xs)}
.custom-select.small .select-option{padding:.5rem var(--space-md);font-size:var(--text-xs)}

/* Scrollbar for dropdowns */
.select-options::-webkit-scrollbar{width:6px}
.select-options::-webkit-scrollbar-track{background:transparent}
.select-options::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}

/* Aspect Ratio Icons */
.ratio-icon{
    display:inline-block;border:1.5px solid currentColor;
    border-radius:2px;margin-right:var(--space-xs);flex-shrink:0;
}
.ratio-21-9{width:21px;height:9px}
.ratio-16-9{width:18px;height:10px}
.ratio-4-3{width:16px;height:12px}
.ratio-1-1{width:14px;height:14px}
.ratio-3-4{width:12px;height:16px}
.ratio-9-16{width:10px;height:18px}

/* Duration Slider - Compact Version */
.duration-compact{
    display:flex;align-items:center;gap:var(--space-md);
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:.75rem var(--space-lg);
    transition:border-color .2s;
}
.duration-compact:hover{border-color:var(--border-hover)}
.duration-slider-compact{
    -webkit-appearance:none;flex:1;height:6px;
    background:linear-gradient(90deg,var(--color-gold) 30%,var(--color-black-border) 30%);
    border-radius:var(--radius-full);outline:none;cursor:pointer;
}
.duration-slider-compact::-webkit-slider-thumb{
    -webkit-appearance:none;width:18px;height:18px;
    background:var(--neutral);border:2px solid var(--bg-primary);
    border-radius:50%;cursor:grab;
    transition:transform .15s;
}
.duration-slider-compact::-webkit-slider-thumb:hover{transform:scale(1.1)}
.duration-slider-compact::-moz-range-thumb{
    width:18px;height:18px;background:var(--neutral);
    border:2px solid var(--bg-primary);border-radius:50%;cursor:grab;
}
.duration-value-compact{
    font-size:var(--text-xl);font-weight:500;min-width:28px;
    color:var(--neutral);
}
.duration-unit-compact{
    font-size:var(--text-sm);color:var(--text-muted);
}

/* Toggle Switch */
.toggle-switch{
    position:relative;display:inline-block;
    width:44px;height:24px;flex-shrink:0;
}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
    position:absolute;cursor:pointer;inset:0;
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-full);transition:all .3s;
}
.toggle-slider::before{
    content:'';position:absolute;height:18px;width:18px;
    left:2px;bottom:2px;background:var(--text-muted);
    border-radius:50%;transition:all .3s;
}
.toggle-switch input:checked + .toggle-slider{
    background:#bfa46a;border-color:#bfa46a;
}
.toggle-switch input:checked + .toggle-slider::before{
    background:#fff;transform:translateX(20px);
}
.toggle-switch input:focus + .toggle-slider{
    border-color:var(--color-gold-dim);
}

/* Small inline toggle */
.inline-toggle{
    display:flex;align-items:center;gap:var(--space-sm);
    cursor:pointer;
}
.toggle-slider-small{
    position:relative;width:32px;height:18px;flex-shrink:0;
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-full);transition:all .3s;
}
.toggle-slider-small::before{
    content:'';position:absolute;height:12px;width:12px;
    left:2px;top:2px;background:var(--text-muted);
    border-radius:50%;transition:all .3s;
}
.inline-toggle input{position:absolute;opacity:0;width:0;height:0}
.inline-toggle input:checked + .toggle-slider-small{
    background:#bfa46a;border-color:#bfa46a;
}
.inline-toggle input:checked + .toggle-slider-small::before{
    background:#fff;transform:translateX(14px);
}
.toggle-label{font-size:var(--text-sm);color:var(--text-secondary)}

/* Overlay option row (toggle + label + info button) */
.overlay-option{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-sm) 0;
    border-bottom:1px solid var(--border);
}
.overlay-option:last-child{border-bottom:none}

/* Info button with tooltip */
.info-btn{
    width:20px;height:20px;border-radius:50%;
    background:var(--bg-input);border:1px solid var(--border);
    color:var(--text-muted);font-size:11px;font-weight:500;
    cursor:help;position:relative;display:inline-flex;
    align-items:center;justify-content:center;flex-shrink:0;
    transition:all .2s;
}
.info-btn:hover{
    border-color:var(--neutral-border-hover);color:var(--neutral);
}
.info-btn:hover::after{
    content:attr(data-tooltip);
    position:absolute;bottom:calc(100% + 8px);right:0;
    width:260px;padding:var(--space-sm) var(--space-md);
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-sm);font-size:var(--text-xs);
    font-weight:400;color:var(--text-secondary);line-height:1.5;
    z-index:100;
    pointer-events:none;
}

/* CTA Blocks */
.cta-block{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);margin-bottom:var(--space-md);
    overflow:hidden;
}
.cta-block:last-child{margin-bottom:0}
.cta-header{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-md) var(--space-lg);
}
.cta-title{font-weight:500;font-size:var(--text-sm);color:var(--text-primary)}
.cta-hint{flex:1;font-size:var(--text-xs);color:var(--text-muted)}
.cta-content{
    padding:0 var(--space-lg) var(--space-lg);
    border-top:1px solid var(--border);
    animation:fadeIn .2s ease;
}
.cta-custom-input{margin-top:var(--space-md)}
.voice-cta-row{
    display:flex;align-items:center;gap:var(--space-lg);
    margin-top:var(--space-md);flex-wrap:wrap;
}
.voice-cta-tone{margin:0;flex:1;min-width:150px}

/* Minutes Badge */
.minutes-badge{
    display:inline-flex;align-items:center;gap:var(--space-xs);
    padding:.35rem .85rem;font-size:var(--text-xs);font-weight:500;
    border-radius:var(--radius-full);
    background:var(--neutral-hover-bg);color:var(--neutral);
    border:1px solid var(--neutral-border);
}
.minutes-badge.warning{
    background:rgba(212,136,42,.1);color:var(--gold);
    border-color:rgba(212,136,42,.2);
}
.minutes-badge.danger{
    background:rgba(248,113,113,.1);color:var(--error);
    border-color:rgba(248,113,113,.2);
}

/* Audio Subsections */
.audio-subsection{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);margin-bottom:var(--space-md);
    overflow:hidden;
}
.audio-subsection:last-child{margin-bottom:0}
.subsection-header-toggle{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-md) var(--space-lg);
    font-weight:500;font-size:var(--text-sm);color:var(--text-primary);
}
.audio-subsection-content{
    padding:0 var(--space-lg) var(--space-lg);
    border-top:1px solid var(--border);
}
.audio-subsection-content.hidden{display:none}

/* Branding Subsections */
.branding-subsection{
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);margin-bottom:var(--space-md);
    overflow:hidden;
}
.branding-subsection:last-child{margin-bottom:0}
.branding-subsection-content{
    padding:var(--space-lg);
    border-top:1px solid var(--border);
}

/* Brand Video Items */
.brand-video-item{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-md);margin-bottom:var(--space-md);
    overflow:hidden;
}
.brand-video-item:last-child{margin-bottom:0}
.brand-video-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-md) var(--space-lg);
    background:rgba(255,255,255,.02);
}
.brand-video-title{font-weight:500;font-size:var(--text-sm);color:var(--text-secondary)}
.brand-video-upload{padding:var(--space-md)}

/* Compact File Upload */
.file-upload-compact{padding:var(--space-lg)}
.file-upload-compact .upload-icon{font-size:1.5rem;margin-bottom:var(--space-xs)}
.file-upload-compact .upload-text{font-size:var(--text-xs)}

/* Section Toggle Switch in Header */
.section-toggle-switch{margin-left:auto;margin-right:var(--space-md)}

/* File Upload */
.file-upload-area{
    border:2px dashed var(--border);border-radius:var(--radius-md);
    padding:var(--space-2xl);text-align:center;cursor:pointer;
    transition:all .2s;background:var(--bg-input);
}
.file-upload-area:hover{border-color:var(--neutral-border-hover);background:var(--neutral-hover-bg)}
.upload-placeholder{color:var(--text-muted)}
.upload-icon{font-size:2rem;display:block;margin-bottom:var(--space-sm);opacity:.5}
.upload-text{font-size:var(--text-sm)}
.upload-preview{position:relative;display:inline-block}
.upload-preview img{max-width:200px;max-height:100px;border-radius:var(--radius-sm)}
.remove-logo-btn{
    position:absolute;top:-8px;right:-8px;
    width:24px;height:24px;border-radius:50%;
    background:var(--error);color:var(--color-ivory);border:none;
    cursor:pointer;font-size:var(--text-base);
    display:flex;align-items:center;justify-content:center;
    transition:transform .15s;
}
.remove-logo-btn:hover{transform:scale(1.1)}

/* Videos Dashboard View Toggle */
.view-toggle-container{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-xl);
}
.view-toggle-btn{
    display:flex;align-items:center;gap:var(--space-sm);
    padding:.5rem var(--space-md);border:1px solid var(--border);
    border-radius:var(--radius-md);background:var(--bg-card);
    color:var(--text-secondary);font-size:var(--text-sm);
    cursor:pointer;transition:all .2s;font-family:var(--font);
}
.view-toggle-btn:hover{border-color:var(--neutral-border-hover);color:var(--neutral)}
.view-toggle-btn.active{background:var(--neutral-hover-bg);border-color:var(--neutral-border-hover);color:var(--neutral)}

/* Detailed Table */
.video-table-container{
    overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);
    scrollbar-width:thin;scrollbar-color:var(--border-hover) transparent;
}
.video-table-container::-webkit-scrollbar{height:8px}
.video-table-container::-webkit-scrollbar-track{background:var(--bg-card);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.video-table-container::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:4px}
.video-table-container::-webkit-scrollbar-thumb:hover{background:var(--neutral-dim)}
.video-table-scroll{min-width:1600px}
.video-table.detailed th,.video-table.detailed td{
    padding:var(--space-sm) var(--space-md);font-size:var(--text-xs);
    white-space:nowrap;
}
.video-table.detailed th{background:var(--bg-card);position:sticky;top:0;z-index:10}
.col-group-header{
    text-align:center;background:var(--bg-elevated)!important;
    border-bottom:2px solid var(--neutral-border-hover)!important;
    color:var(--neutral);font-weight:500;
}
.scroll-hint{
    display:none;padding:var(--space-sm) var(--space-md);
    background:rgba(255,255,255,.03);border-radius:var(--radius-md);
    font-size:var(--text-xs);color:var(--text-muted);
    text-align:center;margin-bottom:var(--space-md);
}
@media(max-width:1400px){.scroll-hint{display:block}}

/* Validation error state */
.form-input.error,.form-textarea.error,.custom-select.error .select-trigger{
    border-color:var(--error);
}
.shake{animation:shake .4s ease}
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%,60%{transform:translateX(-5px)}
    40%,80%{transform:translateX(5px)}
}

/* ===== RESPONSIVE ===== */
@media(min-width:769px){
    .step-connector{display:block}
}

@media(max-width:1024px){
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .grid-4{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2xl)}
    .contact-grid{grid-template-columns:1fr}
    .contact-split{grid-template-columns:1fr;gap:var(--space-2xl)}
    .contact-split-visual{order:-1}
    .founder-layout{grid-template-columns:1fr;text-align:center}
    .founder-story{order:2}
    .founder-photo-wrap{order:1;justify-content:center;margin-bottom:var(--space-lg)}
    .founder-story .about-eyebrow{padding-left:0}
    .founder-story .about-eyebrow::before{display:none}
    .founder-badges{justify-content:center}
    .community-channels{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:768px){
    :root{--header-h:64px;--sidebar-w:100%}
    .container,.container-wide{padding:0 var(--space-md)}
    .section{padding:var(--space-3xl) 0}
    .section-title{font-size:var(--text-3xl)}

    /* Nav */
    .nav-links{
        position:fixed;top:0;right:-100%;width:280px;height:100vh;
        background:var(--bg-secondary);border-left:1px solid var(--border);
        flex-direction:column;padding:var(--space-5xl) var(--space-xl) var(--space-xl);
        transition:right .3s var(--ease);gap:var(--space-md);z-index:1050;
    }
    .nav-links.open{right:0}
    .nav-dropdown-menu{
        position:static;opacity:0;pointer-events:none;max-height:0;overflow:hidden;
        transform:none;background:transparent;border:none;
        box-shadow:none;padding:0 0 0 var(--space-md);min-width:auto;
        transition:max-height .3s ease,opacity .3s ease;
    }
    .nav-dropdown.mobile-open .nav-dropdown-menu{
        opacity:1;pointer-events:auto;max-height:300px;
    }
    .nav-dropdown-trigger{width:100%}
    .nav-dropdown-trigger::after{content:'+';margin-left:auto;font-size:0.9rem;color:var(--text-tertiary);transition:transform .2s ease}
    .nav-dropdown.mobile-open .nav-dropdown-trigger::after{content:'\2212'}
    .nav-dropdown-item{padding:var(--space-xs) var(--space-md)}
    .dropdown-arrow{display:none}
    .nav-right{flex-direction:column;gap:var(--space-sm);width:100%}
    .nav-right .btn{width:100%}
    .nav-avatar-dropdown{
        position:static;opacity:1;pointer-events:auto;
        transform:none;background:transparent;border:none;
        box-shadow:none;padding:0 0 0 var(--space-md);min-width:auto;
    }
    .mobile-toggle{display:flex}

    /* Grids */
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    .pain-grid{grid-template-columns:1fr}
    .community-channels{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr;gap:var(--space-xl)}

    /* About page — mobile */
    .about-mission-block{flex-direction:column;gap:0}
    .about-mission-accent{width:40px;height:3px;margin-bottom:var(--space-md)}
    .founder-photo{width:180px;height:180px}
    .founder-photo-glow{width:220px;height:220px}

    /* Hero */
    .hero{padding-top:calc(var(--header-h) + var(--space-2xl));text-align:center}
    .hero-split{grid-template-columns:1fr;gap:var(--space-2xl)}
    .hero-text{align-items:center}
    .hero-title{font-size:var(--text-hero);max-width:100%}
    .hero-subtitle{max-width:100%;margin:0 auto}
    .hero-preview-card{max-width:300px;margin:0 auto}
    .hero-prompt-box{margin:0 auto var(--space-2xl)}
    .hero-cta{flex-direction:column;width:100%}
    .hero-cta .btn{width:100%}

    /* Dashboard */
    .sidebar{
        transform:translateX(-100%);width:280px;
        transition:transform .3s var(--ease);
    }
    .sidebar.open{transform:translateX(0)}
    .main-content{margin-left:0}

    /* Voice grid */
    .voice-grid{grid-template-columns:1fr}

    /* Blog */
    .blog-content{padding:var(--space-xl) var(--space-md)}

    /* Contact page */
    .contact-split-form{padding:var(--space-xl)}
    .contact-cards-row{grid-template-columns:1fr}

    /* Advanced controls */
    .form-row{flex-direction:column;gap:var(--space-md)}
    .voice-cta-row{flex-direction:column;align-items:flex-start}
    .voice-cta-tone{width:100%}
    .duration-value{font-size:var(--text-3xl)}
}

@media(max-width:480px){
    .section-title{font-size:var(--text-2xl)}
    .hero-title{font-size:var(--text-3xl)}
    .pricing-card{padding:var(--space-2xl) var(--space-lg)}
    .auth-card{padding:var(--space-2xl) var(--space-lg)}
}

/* ====================================================================
   REVIEW PAGE — Scene Editor + Player
   ==================================================================== */

/* Layout */
.review-layout{
    display:flex;gap:var(--space-xl);
    height:calc(100vh - 80px);padding:0;
}
.scene-list{
    width:40%;overflow-y:auto;
    padding:var(--space-xl) var(--space-md) var(--space-xl) var(--space-xl);
}
.scene-list::-webkit-scrollbar{width:6px}
.scene-list::-webkit-scrollbar-track{background:transparent}
.scene-list::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:3px}
.player-panel{
    width:60%;display:flex;flex-direction:column;
    gap:var(--space-lg);padding:var(--space-xl) var(--space-xl) var(--space-xl) 0;
    position:sticky;top:0;max-height:calc(100vh - 80px);
    overflow-y:auto;
}

/* Generation progress bar */
.gen-progress{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-md) var(--space-lg);
    display:flex;align-items:center;gap:var(--space-md);
}
.gen-progress-text{
    font-size:var(--text-sm);color:var(--text-secondary);
    white-space:nowrap;font-weight:500;
}
.gen-progress-bar{
    flex:1;height:6px;background:var(--bg-input);
    border-radius:var(--radius-full);overflow:hidden;
}
.gen-progress-fill{
    height:100%;background:var(--accent-gradient);
    border-radius:var(--radius-full);
    transition:width 0.4s var(--ease);
}

/* Scene Cards */
.scene-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-md);
    display:flex;gap:var(--space-md);align-items:flex-start;
    transition:all 0.2s ease;cursor:pointer;position:relative;
    animation:fadeSlideIn 0.35s var(--ease) both;
}
.scene-card:hover{
    border-color:var(--color-black-border);
    background:var(--bg-elevated);
}
.scene-card.editing{
    border-color:var(--color-gold-dim);
    background:var(--bg-elevated);
}
.scene-card.active{
    border-left:3px solid var(--color-ivory);
    border-color:var(--neutral-border-hover);
}
.scene-card.failed{
    border-left:3px solid var(--error);
    border-color:rgba(248,113,113,0.3);
}
.scene-card.reprocessing .scene-thumbnail::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
}

/* Scene number */
.scene-number{
    position:absolute;top:var(--space-sm);left:var(--space-sm);
    width:22px;height:22px;border-radius:50%;
    background:var(--bg-elevated);border:1px solid var(--border);
    font-size:10px;font-weight:500;color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;
    z-index:2;
}
.scene-card.active .scene-number{
    background:var(--neutral);color:var(--bg-primary);border-color:var(--neutral);
}

/* Scene thumbnail */
.scene-thumbnail{
    width:96px;height:68px;border-radius:var(--radius-sm);
    overflow:hidden;cursor:pointer;position:relative;
    flex-shrink:0;background:var(--bg-elevated);
}
.scene-thumbnail img{
    width:100%;height:100%;object-fit:cover;
    display:block;
}
.scene-thumbnail-placeholder{
    width:100%;height:100%;display:flex;
    align-items:center;justify-content:center;
    color:var(--text-muted);font-size:var(--text-xl);
}
.scene-thumbnail:hover{
    border:2px solid var(--neutral-border-hover);
}
.scene-thumbnail:hover img{
    transform:scale(1.05);
    transition:transform 0.2s ease;
}
/* Replace media tooltip on thumbnail hover */
.scene-thumbnail::before{
    content:'Replace media';
    position:absolute;bottom:calc(100% + 6px);left:50%;
    transform:translateX(-50%);
    padding:4px 10px;border-radius:var(--radius-sm);
    background:var(--bg-elevated);border:1px solid var(--border);
    color:var(--text-secondary);font-size:10px;font-weight:500;
    white-space:nowrap;opacity:0;pointer-events:none;
    transition:opacity 0.15s;z-index:10;
}
.scene-thumbnail::after{
    content:'';position:absolute;bottom:calc(100% + 2px);left:50%;
    transform:translateX(-50%);
    border:4px solid transparent;border-top-color:var(--bg-elevated);
    opacity:0;pointer-events:none;transition:opacity 0.15s;z-index:10;
}
.scene-thumbnail:hover::before,
.scene-thumbnail:hover::after{opacity:1}
.scene-refresh-overlay{
    position:absolute;inset:0;
    background:rgba(0,0,0,0.5);
    display:none;align-items:center;justify-content:center;
    color:var(--color-ivory);font-size:var(--text-lg);
    border-radius:var(--radius-sm);
}
.scene-card:hover .scene-refresh-overlay{display:flex}

/* Scene content (text area) */
.scene-content{flex:1;min-width:0;position:relative}
.scene-text{
    font-size:var(--text-sm);color:var(--text-secondary);
    line-height:1.5;display:-webkit-box;
    -webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;word-break:break-word;
    cursor:text;position:relative;
    padding:var(--space-xs) var(--space-sm);
    border-radius:var(--radius-sm);
    transition:background 0.15s, color 0.15s;
}
.scene-text:hover{
    background:rgba(255,255,255,0.03);
}
/* Pencil icon on hover */
.scene-text::after{
    content:'\270E';
    position:absolute;top:4px;right:4px;
    font-size:11px;color:var(--text-muted);
    opacity:0;transition:opacity 0.15s;
    pointer-events:none;
}
.scene-card:hover .scene-text::after{opacity:0.6}
/* Inline editing mode */
.scene-text.editing{
    -webkit-line-clamp:unset;
    display:block;overflow:visible;
    color:var(--text-primary);
    background:rgba(255,255,255,0.04);
    outline:none;
    border:1px solid var(--neutral-border-hover);
    padding:var(--space-sm);
}
.scene-text.editing::after{display:none}
/* Legacy textarea fallback — kept but hidden */
.scene-text-edit{
    width:100%;font-size:var(--text-sm);color:var(--text-primary);
    background:var(--bg-input);border:1px solid var(--neutral-border-active);
    border-radius:var(--radius-sm);padding:var(--space-sm);
    resize:vertical;min-height:50px;line-height:1.5;
    font-family:var(--font);outline:none;
}
.scene-meta{
    display:flex;align-items:center;gap:var(--space-sm);
    margin-top:var(--space-xs);
}
.scene-duration{
    font-size:var(--text-xs);color:var(--text-muted);
}
.scene-status-badge{
    font-size:10px;font-weight:500;padding:2px 6px;
    border-radius:var(--radius-sm);
}
.scene-status-badge.updating{
    background:rgba(212,136,42,0.1);color:var(--gold);
}
.scene-status-badge.failed{
    background:rgba(248,113,113,0.1);color:var(--error);
}

/* Scene actions */
.scene-actions{
    display:flex;flex-direction:column;gap:var(--space-xs);
    flex-shrink:0;
}
.scene-action-btn{
    width:28px;height:28px;border-radius:var(--radius-sm);
    background:transparent;border:1px solid transparent;
    color:var(--text-muted);font-size:var(--text-sm);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.15s;opacity:0;
}
.scene-card:hover .scene-action-btn{opacity:1}
.scene-action-btn:hover{
    background:rgba(255,255,255,0.05);
    border-color:var(--border);color:var(--text-primary);
}
.scene-action-btn.delete:hover{
    background:rgba(248,113,113,0.1);
    border-color:rgba(248,113,113,0.3);color:var(--error);
}
.scene-action-btn.retry{
    opacity:1;background:var(--neutral-hover-bg);
    border-color:var(--neutral-border);color:var(--neutral);
}

/* Skeleton scene card */
.scene-card.skeleton{
    pointer-events:none;
}
.scene-card.skeleton .scene-thumbnail,
.scene-card.skeleton .scene-text{
    background:linear-gradient(90deg,var(--bg-elevated) 25%,var(--bg-card) 50%,var(--bg-elevated) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    border-radius:var(--radius-sm);
    color:transparent;
}
.scene-card.skeleton .scene-thumbnail{
    background-color:var(--bg-elevated);
}
.scene-card.skeleton .scene-text{
    min-height:40px;
}

/* Scene add zone (between cards) */
.scene-add-zone{
    height:12px;position:relative;margin:2px 0;
    transition:height 0.2s ease;
    display:flex;align-items:center;justify-content:center;
}
.scene-add-zone:hover{height:28px}
.scene-add-btn{
    width:20px;height:20px;border-radius:50%;
    background:var(--bg-elevated);color:var(--text-muted);
    font-size:12px;font-weight:500;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.2s ease;
    border:1px solid var(--border);
    opacity:0.35;
}
.scene-add-zone:hover .scene-add-btn{
    opacity:1;width:24px;height:24px;font-size:14px;
    background:var(--neutral);color:var(--bg-primary);border-color:var(--neutral);
}
.scene-add-btn:hover{transform:scale(1.15)}

/* Player container */
.player-container{
    background:#000;border-radius:var(--radius-lg);
    overflow:hidden;position:relative;
    aspect-ratio:16/9;
}
.player-container.portrait{aspect-ratio:9/16;max-height:60vh}
.player-container.square{aspect-ratio:1/1}
.player-container video{
    width:100%;height:100%;object-fit:contain;
    display:block;
}
.player-container .hidden-video{
    position:absolute;top:0;left:0;
    width:100%;height:100%;
    opacity:0;pointer-events:none;
}
.player-empty{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    color:var(--text-muted);gap:var(--space-md);
}
.player-empty-icon{font-size:3rem;opacity:0.3}
.player-empty-text{font-size:var(--text-sm)}

/* Player controls */
.player-controls{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-sm) var(--space-md);background:var(--bg-card);
    border:1px solid var(--border);border-radius:var(--radius-lg);
    margin-top:var(--space-sm);
}
.play-pause-btn{
    width:40px;height:40px;border-radius:50%;
    background:var(--color-gold);color:var(--color-black-deep);border:none;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all 0.15s;font-size:14px;
    flex-shrink:0;
}
.play-pause-btn:hover{background:var(--color-gold-soft);transform:scale(1.08)}
.player-time{
    font-size:var(--text-xs);color:var(--text-muted);
    white-space:nowrap;font-variant-numeric:tabular-nums;
    min-width:75px;
}
.progress-wrap{flex:1;position:relative;cursor:pointer;padding:8px 0}
.progress-track{
    width:100%;height:4px;background:rgba(255,255,255,0.08);
    border-radius:var(--radius-full);position:relative;
    overflow:visible;transition:height 0.15s;
}
.progress-wrap:hover .progress-track{height:6px}
.progress-fill{
    height:100%;background:var(--neutral);
    border-radius:var(--radius-full);
    position:relative;
    will-change:width;
}
.progress-fill::after{
    content:'';position:absolute;right:-6px;top:50%;
    transform:translateY(-50%);width:14px;height:14px;
    background:var(--neutral);border:2px solid var(--bg-card);
    border-radius:50%;opacity:0;transition:opacity 0.15s;
}
.progress-wrap:hover .progress-fill::after{opacity:1}
.progress-wrap.seeking .progress-fill{transition:none}
.progress-wrap.seeking .progress-fill::after{opacity:1}
.scene-tick{
    position:absolute;top:-1px;width:2px;height:calc(100% + 2px);
    background:rgba(255,255,255,0.15);border-radius:1px;
    pointer-events:none;z-index:1;
}

/* Music bar */
.music-bar{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-top:var(--space-xs);
}
.music-icon{
    color:var(--text-muted);font-size:var(--text-base);flex-shrink:0;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.04);border-radius:var(--radius-sm);
}
.music-select{
    flex:1;padding:var(--space-xs) var(--space-md);
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--text-primary);
    font-size:var(--text-sm);font-family:var(--font);
    cursor:pointer;height:34px;
}
.music-select:focus{outline:none;border-color:var(--neutral-border-active)}
.music-select optgroup{
    font-weight:500;color:var(--text-muted);font-size:var(--text-xs);
    text-transform:uppercase;letter-spacing:0.05em;padding:var(--space-xs) 0;
}
.music-select optgroup[label="Recommended for your video"]{
    color:var(--neutral);
}
.music-select option{
    font-weight:400;color:var(--text-primary);padding:var(--space-xs) var(--space-sm);
    font-size:var(--text-sm);
}
.music-volume-wrap{
    display:flex;align-items:center;gap:var(--space-sm);
    flex-shrink:0;
    padding:var(--space-xs) var(--space-sm);
    background:rgba(255,255,255,0.03);
    border-radius:var(--radius-md);
}
.music-volume-icon{
    color:var(--text-muted);font-size:var(--text-sm);cursor:pointer;
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    border-radius:var(--radius-sm);transition:all 0.15s;
}
.music-volume-icon:hover{color:var(--text-primary);background:rgba(255,255,255,0.06)}
.music-volume-icon.muted{color:var(--error);opacity:0.7}
.music-volume-slider{
    -webkit-appearance:none;width:110px;height:4px;
    background:rgba(255,255,255,0.1);border-radius:var(--radius-full);
    outline:none;cursor:pointer;
    background-image:linear-gradient(var(--neutral), var(--neutral));
    background-repeat:no-repeat;
    background-size:0% 100%;
}
.music-volume-slider::-webkit-slider-thumb{
    -webkit-appearance:none;width:14px;height:14px;
    background:var(--text-primary);border-radius:50%;cursor:grab;
    transition:transform 0.1s;
}
.music-volume-slider::-webkit-slider-thumb:hover{
    background:var(--neutral);transform:scale(1.15);
}
.music-volume-slider::-webkit-slider-thumb:active{cursor:grabbing}

/* Text overlay bar (subtitle + keyword toggles) */
.overlay-bar{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-top:var(--space-xs);
}
.overlay-label{
    font-size:var(--text-sm);color:var(--text-secondary);
    user-select:none;
}
.overlay-divider{
    width:1px;height:20px;background:var(--border);flex-shrink:0;
}
.toggle-sm{width:36px;height:20px}
.toggle-sm .toggle-slider::before{height:14px;width:14px;left:2px;bottom:2px}
.toggle-sm input:checked + .toggle-slider::before{transform:translateX(16px)}

/* Subtitle overlay on video player */
.subtitle-overlay{
    position:absolute;bottom:40px;left:50%;
    transform:translateX(-50%);
    max-width:85%;text-align:center;
    font-family:'Inter',-apple-system,sans-serif;
    font-size:clamp(13px,2.4vw,24px);
    font-weight:500;color:var(--color-ivory);
    text-shadow:0 0 4px rgba(0,0,0,0.9),2px 2px 2px rgba(0,0,0,0.7);
    pointer-events:none;z-index:5;
    line-height:1.4;
    display:none;
}
.subtitle-overlay .highlight{color:var(--color-ivory)}

/* Keyword overlay on video player */
.keyword-overlay{
    position:absolute;top:15%;left:50%;
    transform:translateX(-50%);
    font-family:'Inter',-apple-system,sans-serif;
    font-size:clamp(11px,1.8vw,18px);
    font-weight:500;color:var(--color-ivory);
    background:rgba(0,0,0,0.6);
    padding:5px 14px;border-radius:6px;
    pointer-events:none;z-index:5;
    opacity:0;transition:opacity 0.3s ease;
    display:none;white-space:nowrap;
}
.keyword-overlay.visible{opacity:1}

/* Finalize button */
.finalize-btn{
    width:100%;padding:var(--space-md);
    background:var(--color-gold);color:var(--color-black-deep);
    border:none;border-radius:var(--radius-md);
    font-size:var(--text-base);font-weight:500;
    cursor:pointer;transition:all 0.2s;
    font-family:var(--font);
    display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
}
.finalize-btn:hover{opacity:0.9}
.finalize-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Replace media modal */
.media-modal-overlay{
    position:fixed;inset:0;background:var(--bg-overlay);
    display:flex;align-items:center;justify-content:center;
    z-index:2000;animation:fadeIn 0.2s ease;
}
.media-modal{
    max-width:780px;width:92%;max-height:80vh;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-lg);
    display:flex;flex-direction:column;
}
.media-modal-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-lg) var(--space-xl);
    border-bottom:1px solid var(--border);
}
.media-modal-header h3{font-size:var(--text-lg);font-weight:500}
.media-modal-close{
    width:32px;height:32px;border-radius:var(--radius-md);
    background:transparent;border:none;color:var(--text-muted);
    cursor:pointer;font-size:var(--text-lg);
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
}
.media-modal-close:hover{background:rgba(255,255,255,0.05);color:var(--text-primary)}

/* Media modal sidebar + tabs */
.media-modal-content{
    display:flex;flex:1;overflow:hidden;
}
.media-sidebar{
    width:180px;flex-shrink:0;
    border-right:1px solid var(--border);
    padding:var(--space-md);
    display:flex;flex-direction:column;gap:var(--space-xs);
}
.media-tab{
    display:flex;align-items:center;gap:var(--space-sm);
    padding:var(--space-sm) var(--space-md);
    background:transparent;border:1px solid transparent;
    border-radius:var(--radius-md);color:var(--text-secondary);
    font-size:var(--text-sm);font-weight:500;
    cursor:pointer;transition:all 0.15s;
    font-family:var(--font);text-align:left;
}
.media-tab:hover{background:rgba(255,255,255,0.04);color:var(--text-primary)}
.media-tab.active{
    background:var(--neutral-hover-bg);
    border-color:var(--neutral-border);
    color:var(--neutral);
}
.media-tab svg{flex-shrink:0}
.media-main{
    flex:1;overflow-y:auto;padding:var(--space-lg) var(--space-xl);
}
.media-pane{height:100%}

/* Upload dropzone */
.upload-dropzone{
    border:2px dashed var(--border);
    border-radius:var(--radius-lg);
    padding:var(--space-3xl) var(--space-xl);
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;gap:var(--space-md);
    min-height:300px;
    transition:border-color 0.2s, background 0.2s;
    color:var(--text-muted);
}
.upload-dropzone.dragover{
    border-color:var(--neutral-border-hover);
    background:var(--neutral-hover-bg);
}
.upload-title{
    font-size:var(--text-base);font-weight:500;
    color:var(--text-secondary);margin:0;
}
.upload-sub{
    font-size:var(--text-sm);color:var(--text-muted);margin:0;
}
.upload-link{
    color:var(--neutral);cursor:pointer;text-decoration:underline;
}
.upload-link:hover{color:var(--neutral-dim)}

.media-search{
    display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);
}
.media-search input{
    flex:1;padding:var(--space-sm) var(--space-md);
    background:var(--bg-input);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--text-primary);
    font-size:var(--text-sm);font-family:var(--font);
}
.media-search input:focus{outline:none;border-color:var(--neutral-border-active)}
.media-search button{
    padding:var(--space-sm) var(--space-lg);
    background:var(--color-gold);color:var(--color-black-deep);border:none;
    border-radius:var(--radius-md);font-weight:500;
    font-size:var(--text-sm);cursor:pointer;
    font-family:var(--font);transition:background 0.15s;
}
.media-search button:hover{background:var(--accent-hover)}
.pexels-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:var(--space-sm);max-height:400px;overflow-y:auto;
}
.pexels-thumb{
    position:relative;border-radius:var(--radius-sm);
    overflow:hidden;cursor:pointer;aspect-ratio:16/9;
    border:2px solid transparent;transition:all 0.15s;
}
.pexels-thumb:hover{border-color:var(--neutral-border-hover);transform:scale(1.02)}
.pexels-thumb.selected{border-color:var(--color-gold-dim)}
.pexels-thumb video,.pexels-thumb img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.pexels-thumb-duration{
    position:absolute;bottom:4px;left:4px;
    padding:2px 6px;background:rgba(0,0,0,0.7);
    border-radius:var(--radius-sm);font-size:10px;
    color:var(--color-ivory);font-weight:500;
}
.pexels-empty{
    grid-column:1/-1;
    text-align:center;padding:var(--space-2xl);
    color:var(--text-muted);font-size:var(--text-sm);
}
.media-modal-footer{
    display:flex;justify-content:flex-end;gap:var(--space-sm);
    padding:var(--space-md) var(--space-xl);
    border-top:1px solid var(--border);
}

/* Thumbnail context menu */
.thumb-context-menu{
    position:fixed;z-index:1500;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-xs);
    min-width:160px;animation:fadeIn 0.12s ease;
}
.thumb-menu-item{
    display:flex;align-items:center;gap:var(--space-sm);
    width:100%;padding:var(--space-sm) var(--space-md);
    background:transparent;border:none;
    border-radius:var(--radius-sm);
    color:var(--text-secondary);font-size:var(--text-sm);
    font-family:var(--font);cursor:pointer;
    transition:all 0.12s;text-align:left;
}
.thumb-menu-item:hover{
    background:rgba(255,255,255,0.06);color:var(--text-primary);
}
.thumb-menu-item svg{flex-shrink:0}

/* Confirm dialog */
.confirm-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:3000;animation:fadeIn 0.2s ease;
}
.confirm-dialog{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-2xl) var(--space-xl);
    max-width:400px;width:90%;text-align:center;
    animation:fadeSlideIn 0.25s ease;
}
.confirm-icon{
    width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    margin:0 auto var(--space-lg);font-size:24px;
}
.confirm-icon.danger{
    background:rgba(248,113,113,0.12);color:var(--error);
}
.confirm-icon.accent{
    background:var(--neutral-hover-bg);color:var(--neutral);
}
.confirm-title{
    font-size:var(--text-lg);font-weight:500;
    margin-bottom:var(--space-sm);color:var(--text-primary);
}
.confirm-desc{
    font-size:var(--text-sm);color:var(--text-secondary);
    margin-bottom:var(--space-xl);line-height:1.5;
}
.confirm-actions{
    display:flex;gap:var(--space-sm);justify-content:center;
}
.confirm-actions .btn{
    flex:1;padding:var(--space-sm) var(--space-lg);
    font-size:var(--text-sm);font-weight:500;
    border-radius:var(--radius-md);cursor:pointer;
    font-family:var(--font);transition:all 0.15s;
}
.confirm-actions .btn-outline{
    background:transparent;border:1px solid var(--border);
    color:var(--text-secondary);
}
.confirm-actions .btn-outline:hover{
    background:rgba(255,255,255,0.04);color:var(--text-primary);
}
.confirm-actions .btn-danger{
    background:var(--error);color:var(--color-ivory);border:none;
}
.confirm-actions .btn-danger:hover{
    background:#ef4444;
}
.confirm-actions .btn-accent{
    background:var(--color-gold);color:var(--color-black-deep);border:none;
}
.confirm-actions .btn-accent:hover{
    background:var(--accent-hover);
}

/* Finalize overlay */
.finalize-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    z-index:2000;animation:fadeIn 0.3s ease;
}
.finalize-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-3xl);
    max-width:480px;width:90%;text-align:center;
}
.finalize-card .spinner{margin:0 auto var(--space-xl);width:48px;height:48px}
.finalize-title{font-size:var(--text-2xl);font-weight:500;margin-bottom:var(--space-md)}
.finalize-stage{color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-xl)}
.finalize-progress{
    width:100%;height:8px;background:var(--bg-input);
    border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-lg);
}
.finalize-progress-fill{
    height:100%;background:var(--neutral);
    border-radius:var(--radius-full);
    transition:width 0.5s var(--ease);
}
.finalize-complete{text-align:center}
.finalize-check{
    width:64px;height:64px;border-radius:50%;
    background:rgba(52,211,153,0.15);color:var(--success);
    font-size:28px;line-height:64px;font-weight:500;
    margin:0 auto var(--space-lg);
}
.finalize-actions{
    display:flex;gap:var(--space-md);justify-content:center;
    margin-top:var(--space-xl);
}

/* Animations for review page */
@keyframes fadeSlideIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes fadeSlideOut{
    from{opacity:1;transform:translateY(0)}
    to{opacity:0;transform:translateY(-12px)}
}

/* Review page responsive */
@media(max-width:1024px){
    .review-layout{flex-direction:column;height:auto}
    .scene-list{width:100%;max-height:50vh;padding:var(--space-md)}
    .player-panel{width:100%;position:static;padding:var(--space-md)}
}
@media(max-width:768px){
    .pexels-grid{grid-template-columns:repeat(2,1fr)}
    .scene-thumbnail{width:72px;height:52px}
    .media-sidebar{width:120px}
    .media-tab{font-size:12px;padding:var(--space-xs) var(--space-sm)}
}

/* ====================================================================
   AI TOOLS — SEO Generator, Thumbnail Maker, Repurpose Content
   ==================================================================== */

/* Shared tool styles */
.seo-tool,.thumb-tool,.repurpose-tool{max-width:750px;margin:0 auto}
.tool-input-section{margin-bottom:var(--space-2xl)}
.tool-description{
    color:var(--text-secondary);font-size:var(--text-base);
    line-height:1.6;margin-bottom:var(--space-xl);
}
.tool-free-note{
    font-size:var(--text-sm);color:var(--text-muted);
    margin-top:var(--space-sm);
}
.btn-generate{
    width:100%;padding:var(--space-md);
    font-size:var(--text-base);font-weight:500;
    display:flex;align-items:center;justify-content:center;gap:var(--space-sm);
}
.btn-generate:disabled{opacity:0.5;cursor:not-allowed}
.btn-loader{
    width:16px;height:16px;border:2px solid rgba(255,255,255,0.3);
    border-top-color:var(--color-ivory);border-radius:50%;
    animation:spin 0.6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.form-hint-inline{
    font-size:var(--text-sm);color:var(--text-muted);
    font-weight:400;
}

/* Login required card */
.tool-login-required{
    text-align:center;padding:var(--space-3xl);
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);
}
.tool-login-required h3{
    font-size:var(--text-xl);margin-bottom:var(--space-md);
}
.tool-login-required p{
    color:var(--text-secondary);margin-bottom:var(--space-xl);
}
.tool-login-required .btn{margin:0 var(--space-sm)}

/* SEO Results */
.tool-results{margin-top:var(--space-2xl)}
.result-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-bottom:var(--space-lg);
    overflow:hidden;
}
.result-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-md) var(--space-lg);
    border-bottom:1px solid var(--border);
}
.result-header h3{font-size:var(--text-base);font-weight:500}
.result-hint{font-size:var(--text-xs);color:var(--text-muted)}
.result-body{padding:var(--space-lg)}
.result-text{
    color:var(--text-secondary);font-size:var(--text-sm);
    line-height:1.7;white-space:pre-wrap;word-break:break-word;
    font-family:var(--font);background:none;border:none;margin:0;
}

/* Title options */
.title-option{
    display:flex;align-items:center;gap:var(--space-md);
    padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-md);
    transition:background 0.15s;
}
.title-option:hover{background:rgba(255,255,255,0.03)}
.title-option + .title-option{margin-top:var(--space-xs)}
.title-number{
    width:24px;height:24px;border-radius:50%;
    background:var(--bg-elevated);border:1px solid var(--border);
    font-size:var(--text-xs);font-weight:500;color:var(--text-muted);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.title-text{flex:1;font-size:var(--text-sm);color:var(--text-primary)}

/* Copy buttons */
.btn-copy,.btn-copy-sm{
    padding:var(--space-xs) var(--space-md);
    background:rgba(255,255,255,0.05);border:1px solid var(--border);
    border-radius:var(--radius-md);color:var(--text-secondary);
    font-size:var(--text-xs);font-weight:500;cursor:pointer;
    transition:all 0.15s;font-family:var(--font);
}
.btn-copy:hover,.btn-copy-sm:hover{
    background:var(--neutral-hover-bg);border-color:var(--neutral-border);
    color:var(--neutral);
}
.btn-copy.copied,.btn-copy-sm.copied{
    background:rgba(52,211,153,0.1);border-color:rgba(52,211,153,0.3);
    color:var(--success);
}
.btn-copy-sm{padding:2px var(--space-sm);font-size:10px}

/* Tags container */
.tags-container{display:flex;flex-wrap:wrap;gap:var(--space-sm)}

/* SEO CTA */
.seo-cta{
    text-align:center;padding:var(--space-2xl);
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);margin-top:var(--space-xl);
}
.seo-cta p{color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:var(--text-lg)}
/* btn-large defined in buttons section above */

/* Signup modal */
.modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    z-index:3000;
}
.modal-box{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-xl);padding:var(--space-2xl);
    max-width:420px;width:90%;text-align:center;
}
.modal-box h3{font-size:var(--text-xl);margin-bottom:var(--space-md)}
.modal-box p{color:var(--text-secondary);margin-bottom:var(--space-xl);line-height:1.6}
.modal-actions{display:flex;gap:var(--space-md);justify-content:center}

/* ===== Thumbnail Maker ===== */
.thumb-loading{text-align:center;padding:var(--space-2xl) 0}
.thumb-loading-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);
    max-width:600px;margin:0 auto var(--space-lg);
}
.thumb-skeleton{
    aspect-ratio:16/9;border-radius:var(--radius-md);
    background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elevated) 50%,var(--bg-card) 75%);
    background-size:200% 100%;animation:shimmer 1.5s infinite;
}
@keyframes shimmer{
    from{background-position:200% 0}
    to{background-position:-200% 0}
}
.thumb-loading-text{color:var(--text-secondary);font-size:var(--text-sm)}

.thumb-results-title{
    font-size:var(--text-xl);font-weight:500;
    margin-bottom:var(--space-lg);
}
.thumb-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg);
    margin-bottom:var(--space-xl);
}
.thumb-card{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;
    transition:all 0.2s;
}
.thumb-card:hover{
    border-color:var(--border-hover);transform:translateY(-2px);
}
.thumb-preview{aspect-ratio:16/9;overflow:hidden}
.thumb-preview img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-card-footer{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--space-sm) var(--space-md);
}
.thumb-layout-name{font-size:var(--text-xs);color:var(--text-muted)}
.btn-sm{
    padding:var(--space-xs) var(--space-md);font-size:var(--text-xs);
    font-weight:500;border-radius:var(--radius-md);
}
.btn-accent{
    background:var(--color-gold);color:var(--color-black-deep);border:none;
    cursor:pointer;transition:all 0.15s;font-family:var(--font);
}
.btn-accent:hover{background:var(--accent-hover)}

/* ===== Repurpose Content ===== */
.repurpose-tabs{
    display:flex;gap:var(--space-xs);
    border-bottom:1px solid var(--border);
    margin-bottom:var(--space-lg);
    overflow-x:auto;
}
.repurpose-tab{
    padding:var(--space-sm) var(--space-lg);
    background:transparent;border:none;border-bottom:2px solid transparent;
    color:var(--text-muted);font-size:var(--text-sm);font-weight:500;
    cursor:pointer;transition:all 0.15s;
    font-family:var(--font);white-space:nowrap;
}
.repurpose-tab:hover{color:var(--text-secondary)}
.repurpose-tab.active{
    color:var(--neutral);border-bottom-color:var(--neutral);
}
.tab-panel{display:none}
.tab-panel.active{display:block}
.panel-header{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:var(--space-md);
}
.panel-header h3{font-size:var(--text-lg);font-weight:500}
.panel-text{
    background:var(--bg-card);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:var(--space-lg);
    color:var(--text-secondary);font-size:var(--text-sm);
    line-height:1.8;white-space:pre-wrap;word-break:break-word;
    font-family:var(--font);max-height:500px;overflow-y:auto;
}
.repurpose-results{margin-top:var(--space-2xl)}

/* ===== Nav dropdown (Free AI Tools) ===== */
.nav-dropdown{position:relative}
.nav-dropdown-trigger{display:flex;align-items:center;gap:4px}
.dropdown-arrow{font-size:10px;transition:transform 0.2s}
.nav-dropdown:hover .dropdown-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{
    position:absolute;top:100%;left:0;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-xs);
    min-width:200px;opacity:0;pointer-events:none;
    transform:translateY(8px);
    transition:all 0.2s ease;z-index:1000;
}
.nav-dropdown:hover .nav-dropdown-menu{
    opacity:1;pointer-events:auto;transform:translateY(0);
}
.nav-dropdown-item{
    display:block;padding:var(--space-sm) var(--space-md);
    border-radius:var(--radius-sm);font-size:var(--text-sm);
    color:var(--text-secondary);transition:all 0.15s;
}
.nav-dropdown-item:hover{
    background:var(--neutral-hover-bg);color:var(--neutral);
}

/* ===== Nav avatar (logged-in user) ===== */
.nav-avatar-wrapper{position:relative}
.nav-avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--neutral-hover-bg);color:var(--neutral);border:1px solid var(--neutral-border);
    display:flex;align-items:center;justify-content:center;
    font-weight:500;font-size:var(--text-sm);flex-shrink:0;
    cursor:pointer;transition:border-color 0.2s;
}
.nav-avatar:hover{border-color:var(--color-gold)}
.nav-avatar-dropdown{
    position:absolute;top:calc(100% + 8px);right:0;
    background:var(--bg-elevated);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:var(--space-xs);
    min-width:180px;opacity:0;pointer-events:none;
    transform:translateY(8px);
    transition:all 0.2s ease;z-index:1000;
}
.nav-avatar-dropdown.open{
    opacity:1;pointer-events:auto;transform:translateY(0);
}
.nav-dropdown-divider{
    height:1px;background:var(--border);margin:var(--space-xs) 0;
}
.nav-dropdown-upgrade{
    color:var(--color-gold) !important;font-weight:600;
}

/* ===== AI Tools responsive ===== */
@media(max-width:768px){
    .thumb-grid{grid-template-columns:1fr}
    .thumb-loading-grid{grid-template-columns:1fr}
    .repurpose-tabs{gap:0}
    .repurpose-tab{padding:var(--space-sm) var(--space-md);font-size:var(--text-xs)}
    .title-option{flex-wrap:wrap}
    .modal-actions{flex-direction:column}
}

/* ===========================================================================
   CRO REDESIGN — New Sections (Pipeline, Persona, Trust, Tools, Pricing Hint)
   =========================================================================== */

/* ===== PIPELINE VISUALIZER ===== */
.pipeline-section {
    padding: var(--space-4xl) 0;
    overflow: hidden;
}

.pipeline-header {
    text-align: left !important;
    margin-bottom: var(--space-2xl) !important;
}

.pipeline-header p {
    max-width: none;
}

.pipeline-headline-main {
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    letter-spacing: 0.02em;
}

.pipeline-header .pipeline-headline-sub {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #c8b078 !important;
    margin: 0 0 var(--space-lg) 0;
    font-weight: 400;
    line-height: 1.5;
}

.pipeline-header .pipeline-headline-accent {
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    color: #b89a4a !important;
    font-style: italic;
    border-left: 3px solid #b89a4a;
    padding-left: var(--space-sm);
    margin: 0;
}

.pipeline {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    max-width: 1100px;
    margin: 0 auto;
}

.pipeline-input,
.pipeline-output {
    flex: 0 0 200px;
}

.pipeline-input-label,
.pipeline-output-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.pipeline-typing-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-height: 80px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.pipeline-typing-text {
    color: var(--text-primary);
}

.pipeline-cursor {
    color: var(--neutral);
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Pipeline Flow — the connecting stages */
.pipeline-flow {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
}

.pipeline-connector {
    flex: 0 0 30px;
    height: 2px;
    background: var(--border);
    position: relative;
    overflow: hidden;
}

.pipeline-pulse {
    position: absolute;
    top: -1px;
    left: -20px;
    width: 20px;
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    animation: pipelinePulse 3s linear infinite;
}

@keyframes pipelinePulse {
    0% { left: -20px; }
    100% { left: 100%; }
}

.pipeline-stages {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-sm);
}

.pipeline-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all 0.3s;
}

.pipeline-stage.active {
    background: rgba(212, 136, 42, 0.1);
}

.pipeline-stage-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    transition: all 0.3s;
}

.pipeline-stage.active .pipeline-stage-icon {
    background: rgba(212, 136, 42, 0.15);
    color: var(--accent);
}

.pipeline-stage span {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    transition: color 0.3s;
}

.pipeline-stage.active span {
    color: var(--accent);
}

/* Pipeline Output — Video Player Mock */
.pipeline-player {
    width: 200px;
}

.pipeline-player-frame {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s;
}

.pipeline-player-gradient {
    position: absolute;
    inset: 0;
    background: var(--color-black-card);
    transition: background 1s;
}

.pipeline-player-title {
    position: absolute;
    bottom: 28px;
    left: 8px;
    right: 8px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    transition: opacity 0.5s;
}

.pipeline-player-meta {
    position: absolute;
    bottom: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
}

.pipeline-player-duration,
.pipeline-player-quality {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.6);
    color: white;
}

.pipeline-play-btn {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
    opacity: 0.9;
}

/* Pipeline responsive */
@media (max-width: 1024px) {
    .pipeline {
        flex-direction: column;
        gap: var(--space-xl);
    }
    .pipeline-input,
    .pipeline-output {
        flex: none;
        width: 100%;
        max-width: 400px;
    }
    .pipeline-flow {
        flex-direction: column;
        width: 100%;
        max-width: 400px;
    }
    .pipeline-connector {
        width: 2px;
        height: 30px;
        flex: 0 0 30px;
    }
    .pipeline-pulse {
        top: -20px;
        left: -1px;
        width: 4px;
        height: 20px;
        animation: pipelinePulseV 3s linear infinite;
    }
    @keyframes pipelinePulseV {
        0% { top: -20px; }
        100% { top: 100%; }
    }
    .pipeline-stages {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .pipeline-player {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .pipeline-stages {
        gap: 0;
    }
    .pipeline-stage {
        flex: 0 0 calc(33.33% - 4px);
    }
}

/* Bento grid styles consolidated into cinematic section below */

/* Small cards — compact, icon + text */
.bento-sm {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.bento-sm h3 {
    font-size: var(--text-base);
    font-weight: 500;
}
.bento-sm p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* YouTube Creator mock */
.bento-yt-mock { width: 100%; }
.bento-yt-mock .bento-yt-thumb {
    height: 12px;
    background: var(--color-black-border);
    border-radius: 3px;
    margin-bottom: 6px;
}
.bento-yt-mock .bento-yt-thumb:nth-child(2) { width: 80%; }
.bento-yt-mock .bento-yt-thumb:nth-child(3) { width: 60%; }
.bento-yt-stats {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-sm);
    font-size: 10px;
    color: var(--text-muted);
}
.bento-yt-growth { color: var(--success); font-weight: 500; }

/* Agency mock */
.bento-agency-mock { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.bento-client {
    display: flex;
    justify-content: space-between;
    padding: .4rem .7rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-secondary);
}
.bento-client span {
    color: var(--neutral);
    font-weight: 500;
    font-size: 10px;
}

/* Bento responsive rules consolidated into cinematic section below */

/* Legacy persona-card (kept for other pages) */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.persona-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.3s;
}

.persona-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.persona-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--neutral-hover-bg);
    color: var(--neutral);
}

.persona-card h3 {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.persona-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

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

/* ===== TRUST CARDS — "What Sets Helios Apart" ===== */
.trust-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.trust-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-gold-dim);
    opacity: 0;
    transition: opacity 0.3s;
}

.trust-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

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

.trust-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--neutral-hover-bg);
    color: var(--neutral);
    margin-bottom: var(--space-lg);
}

.trust-card h3 {
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.trust-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

/* ===== FREE TOOLS SHOWCASE ===== */
.tool-showcase {
    display: flex;
    align-items: center;
    gap: var(--space-3xl);
    margin-bottom: var(--space-3xl);
}

.tool-showcase:last-child {
    margin-bottom: 0;
}

.tool-showcase.reverse {
    flex-direction: row-reverse;
}

.tool-showcase-info {
    flex: 1;
    min-width: 280px;
}

.tool-showcase-info h3 {
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.tool-showcase-info p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.tool-showcase-visual {
    flex: 1;
    min-width: 320px;
}

/* SEO Mock — looks like YouTube Studio output */
.seo-mock {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.seo-mock-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
}

.seo-mock-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.seo-mock-row:last-child {
    border-bottom: none;
}

.seo-mock-label {
    flex: 0 0 70px;
    font-size: var(--text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding-top: 2px;
}

.seo-mock-value {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.5;
}

.seo-mock-value.accent {
    color: var(--neutral);
}

.seo-mock-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seo-tag {
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--neutral-hover-bg);
    border: 1px solid var(--neutral-border);
    font-size: 11px;
    font-weight: 500;
    color: var(--neutral-dim);
}

/* Thumbnail Mock Grid */
.thumb-mock-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.thumb-mock {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    transition: all 0.3s;
    background-color: #1a1a1a;
}

.thumb-mock img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-mock:hover {
    transform: scale(1.03);
    border-color: var(--neutral-border-hover);
}

.thumb-label {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0,0,0,0.7);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-ivory);
}

@media (max-width: 768px) {
    .tool-showcase,
    .tool-showcase.reverse {
        flex-direction: column;
    }
    .tool-showcase-info,
    .tool-showcase-visual {
        min-width: 0;
        width: 100%;
    }
}

/* ===== PRICING HINT ===== */
.pricing-hint-inline {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-top: var(--space-md);
}
.pricing-hint-inline strong { color: var(--text-primary); }

.transform-callout{
    max-width:520px;
    margin:var(--space-xl) auto 0 calc(50% - 400px);
    padding:var(--space-md) var(--space-lg);
    border-left:2px solid var(--accent);
    text-align:left;
}
.transform-callout p{
    font-size:var(--text-base);
    color:var(--text-secondary);
    line-height:1.7;
    margin:0;
}
.transform-callout strong{color:var(--text-primary)}
@media(max-width:768px){
    .transform-callout{margin-left:auto;margin-right:auto;text-align:center;border-left:none;border-top:2px solid var(--accent);padding-top:var(--space-md)}
}

.footer-email-capture {
    margin-top: var(--space-xl);
}
.footer-email-capture .email-capture-text {
    display: block;
    margin-bottom: var(--space-sm);
}

.pricing-hint-section {
    padding: var(--space-2xl) 0;
}

.pricing-hint {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
}

.pricing-hint-text {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.pricing-hint-text strong {
    color: var(--text-primary);
}

/* ===== EXIT INTENT POPUP ===== */
.exit-intent-popup {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 360px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid var(--color-black-border);
    z-index: 1000;
    transform: translateY(120%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.exit-intent-popup.visible {
    transform: translateY(0);
}

.exit-intent-popup h4 {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.exit-intent-popup p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
    line-height: 1.5;
}

.exit-intent-actions {
    display: flex;
    gap: var(--space-sm);
}

.exit-intent-close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-lg);
    padding: 4px;
}

@media (max-width: 480px) {
    .exit-intent-popup {
        left: var(--space-md);
        right: var(--space-md);
        width: auto;
        bottom: var(--space-md);
    }
}

/* ===== EMAIL CAPTURE BAR ===== */
.email-capture-section {
    padding: var(--space-2xl) 0;
    border-top: 1px solid var(--border);
}

.email-capture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.email-capture-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    font-weight: 500;
}

.email-capture-form {
    display: flex;
    gap: var(--space-sm);
}

.email-capture-form input {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    width: 240px;
    font-family: var(--font);
}

.email-capture-form input:focus {
    outline: none;
    border-color: var(--neutral-border-active);
}

.email-capture-form button {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .email-capture {
        flex-direction: column;
        text-align: center;
    }
    .email-capture-form {
        width: 100%;
    }
    .email-capture-form input {
        flex: 1;
        width: auto;
    }
}

/* ===== WELCOME TOAST ===== */
.welcome-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: var(--bg-card);
    border: 1px solid var(--neutral-border-hover);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-sm);
    color: var(--text-primary);
    z-index: 100;
    opacity: 0;
    transition: all 0.4s;
    max-width: 90vw;
}

.welcome-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ===== FORGOT PASSWORD LINK ===== */
.forgot-password {
    display: block;
    text-align: right;
    margin-top: -0.5rem;
    margin-bottom: var(--space-md);
    font-size: var(--text-sm);
    color: var(--text-muted);
    transition: color 0.2s;
}

.forgot-password:hover {
    color: var(--text-primary);
}

/* ===== AUTH TRUST SIGNALS ===== */
.auth-trust {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.auth-trust p {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
    line-height: 1.6;
}

.auth-trust a {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-trust a:hover {
    color: var(--text-primary);
}

.auth-micro-proof {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-bottom: var(--space-lg);
    text-align: center;
}

/* ===== CREATE PAGE — Progress Steps ===== */
.production-steps {
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.production-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-muted);
    transition: all 0.3s;
}

.production-step.done {
    color: var(--success);
}

.production-step.active {
    color: var(--text-primary);
    background: var(--neutral-hover-bg);
}

.production-step-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.production-step.active .production-step-icon {
    color: var(--accent);
    animation: pulse 1.5s ease-in-out infinite;
}

.production-step-label {
    flex: 1;
}

.production-step-detail {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ====================================================================
   BRAND OVERHAUL — New Animation Keyframes
   ==================================================================== */
@keyframes helion-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes gold-pulse {
    0%,100%   { opacity: 0.8; }
    50%  { opacity: 1; }
}
@keyframes svg-gold-pulse {
    0%,100%   { opacity: 0.8; }
    50%  { opacity: 1; }
}
@keyframes fade-rise {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shine-sweep {
    0%   { left: -60%; }
    100% { left: 120%; }
}
@keyframes pipeline-travel {
    0%   { left: 0%;   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes stage-activate {
    0%   { border-color: var(--border); opacity: 0.6; }
    60%  { border-color: var(--accent); opacity: 1; }
    100% { border-color: var(--accent); opacity: 1; }
}
@keyframes draw-check {
    from { stroke-dashoffset: 60; }
    to   { stroke-dashoffset: 0;  }
}
@keyframes ripple-out {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0;   }
}
@keyframes step-activate {
    from { opacity: 0.4; transform: translateX(-6px); }
    to   { opacity: 1;   transform: translateX(0); }
}
@keyframes float-drift {
    0%   { transform: translateY(0px)   translateX(0px);  opacity: 0.3; }
    33%  { transform: translateY(-12px) translateX(6px);  opacity: 0.5; }
    66%  { transform: translateY(-6px)  translateX(-4px); opacity: 0.25; }
    100% { transform: translateY(0px)   translateX(0px);  opacity: 0.3; }
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes underline-slide {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:       0.01ms !important;
        animation-iteration-count: 1    !important;
        transition-duration:       0.01ms !important;
    }
}

/* ====================================================================
   BRAND OVERHAUL — New Shared Components
   ==================================================================== */

/* ── HELION BADGE ── */
.helion-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(212,136,42,0.45);
    background: rgba(212,136,42,0.06);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--accent);
    animation: gold-pulse 2.4s ease-in-out infinite;
}
.helion-badge .badge-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--success);
}

/* ── LOGO ── */
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon { flex-shrink: 0; }
.logo-wordmark { display: flex; align-items: baseline; gap: 0; }
.logo-helios  { font-weight: 500; color: var(--text-primary);
                letter-spacing: 0.02em; font-size: 1rem; }
.logo-ai      { font-weight: 500;
                color: var(--color-gold);
                -webkit-font-smoothing: antialiased;
                margin: 0 3px; font-size: 1rem; }
.logo-studios { font-weight: 400; color: var(--text-secondary);
                letter-spacing: 0.15em; font-size: 0.85em; }

/* ── BADGE / PLAN PILLS ── */
.badge-plan {
    background: var(--neutral-hover-bg);
    border: 1px solid var(--neutral-border);
    color: var(--neutral);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.05em;
}

/* ── SECTION HEADERS ── */
.section-header h2 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.section-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* ── HERO PARTICLES ── */
.hero-particle {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--accent);
    animation: float-drift linear infinite;
    pointer-events: none;
}

/* Proof bar + platform strip consolidated into cinematic section below */

/* ── HELION SPINNER ── */
.helion-spinner-wrap {
    display: flex; justify-content: center;
    margin-bottom: 1.5rem;
}
.helion-spinner {
    filter: drop-shadow(0 0 12px rgba(212,136,42,0.35));
}

/* ── VIDEO READY CHECKMARK ── */
.video-ready-checkmark {
    position: relative; width: 72px; height: 72px;
    margin: 0 auto 1.5rem;
}
.ripple-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid rgba(76,175,80,0.4);
    animation: ripple-out 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
}
.ripple-ring-2 {
    animation-delay: 0.3s;
    border-color: rgba(76,175,80,0.25);
}

/* ── PRODUCTION STEP STATES ── */
.production-step[data-state="pending"] .production-step-icon {
    color: var(--text-muted);
}
.production-step[data-state="pending"] .production-step-label {
    color: var(--text-muted); opacity: 0.5;
}
.production-step[data-state="active"] {
    animation: step-activate 0.4s ease forwards;
}
.production-step[data-state="active"] .production-step-icon {
    color: var(--accent);
    animation: gold-pulse 1.5s ease-in-out infinite; border-radius: 50%;
}
.production-step[data-state="active"] .production-step-label {
    color: var(--text-primary); font-weight: 500;
}
.production-step[data-state="done"] .production-step-icon::before {
    content: "\2713"; color: var(--accent); opacity: 0.7;
}
.production-step[data-state="done"] .production-step-label {
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: var(--border);
}

/* ── NAV ITEM UNDERLINE ── */
.nav-item {
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.18s ease;
}
.nav-item::after {
    content: "";
    position: absolute;
    bottom: -3px; left: 0;
    width: 100%; height: 1.5px;
    background: var(--neutral);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s cubic-bezier(0.25,0.1,0.25,1);
}
.nav-item:hover { color: var(--text-primary); }
.nav-item:hover::after { transform: scaleX(1); }

/* ── GRADIENT TEXT (now flat ivory) ── */
.gradient-text {
    color: var(--color-ivory);
}

/* ── HERO STAGGER ANIMATIONS ── */
.hero-title .line-1 { animation: fade-rise 0.7s ease 0.1s both; }
.hero-title .line-2 { animation: fade-rise 0.7s ease 0.25s both; }
.hero-subtitle      { animation: fade-rise 0.7s ease 0.4s both; }
.hero-prompt-box    { animation: fade-rise 0.7s ease 0.55s both; }

/* ── PIPELINE CONNECTOR ANIMATION ── */
.pipeline-connector { position: relative; overflow: visible; }
.pipeline-connector::after {
    content: ""; position: absolute;
    top: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    animation: pipeline-travel 2.5s ease-in-out infinite;
}
.pipeline-connector:nth-child(2)::after { animation-delay: 0.5s; }
.pipeline-connector:nth-child(3)::after { animation-delay: 1s; }

/* ── AUTH PAGE CINEMATIC ── */
.auth-sun-bg {
    position: absolute;
    opacity: 0.06;
    transform: scale(3);
    pointer-events: none;
    z-index: 0;
}

/* ── LEGAL HEADINGS ── */
.legal-content h2,
.legal-content h3 {
    border-left: 3px solid var(--neutral-border-hover);
    padding-left: 1rem;
}

/* ====================================================================
   CINEMATIC ANIMATION OVERHAUL — "The Sun That Creates"
   ==================================================================== */

/* ── GOLDEN PARTICLE CANVAS ── */
.golden-particles-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* ── GOLDEN SECTION DIVIDERS ── */
.golden-divider {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(184,151,46,0.35) 0%, transparent 70%);
    position: relative;
}
.golden-divider::after {
    content: "";
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
    box-shadow: 0 0 12px rgba(184,151,46,0.5);
}

/* ============================================================
   SECTION 1 — Demo Showcase: The Helion Engine Room
   ============================================================ */
.demo-showcase {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}
.demo-glow-halo {
    position: absolute;
    inset: -30px;
    border-radius: 24px;
    background: radial-gradient(ellipse at center, rgba(184,151,46,0.08) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: halo-breathe 4s ease-in-out infinite;
}
@keyframes halo-breathe {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}
.demo-window {
    position: relative;
    z-index: 1;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.demo-window-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
}
.demo-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}
.demo-dot:first-child { background: rgba(255,82,82,0.6); }
.demo-dot:nth-child(2) { background: rgba(255,189,46,0.6); }
.demo-dot:nth-child(3) { background: rgba(50,205,50,0.6); }
.demo-window-title {
    margin-left: 12px;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    letter-spacing: 0.03em;
}
.demo-window-body {
    position: relative;
    min-height: 440px;
    overflow: hidden;
}
.demo-phase {
    position: absolute;
    inset: 0;
    padding: 24px 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    display: flex;
    flex-direction: column;
}
.demo-phase.active {
    opacity: 1;
    visibility: visible;
}

/* Phase 1: Describe */
.demo-form-mock { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.demo-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
}
.demo-input-mock {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--text-primary);
    min-height: 44px;
    display: flex;
    align-items: flex-start;
}
.demo-typing { color: var(--text-primary); }
.demo-cursor {
    animation: blink 1s step-end infinite;
    color: var(--accent);
    margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }
.demo-settings {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid var(--border);
    overflow: hidden;
}
.demo-setting-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 7px 12px;
    background: rgba(255,255,255,0.02);
}
.demo-setting-icon { font-size: 1rem; flex-shrink: 0; }
.demo-setting-label {
    min-width: 62px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.demo-setting-values { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.demo-pill {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.demo-pill.accent {
    border-color: rgba(184,151,46,0.3);
    color: var(--accent);
    background: rgba(184,151,46,0.08);
}
.demo-toggle-mock {
    width: 28px; height: 16px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
}
.demo-toggle-mock::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transition: transform 0.3s;
}
.demo-toggle-mock.on {
    background: rgba(184,151,46,0.3);
}
.demo-toggle-mock.on::after {
    transform: translateX(12px);
    background: var(--accent);
}
.demo-btn-mock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    background: var(--accent);
    color: #0c0c0c;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: default;
    transition: box-shadow 0.3s, transform 0.3s;
    margin-top: 2px;
    position: relative;
    overflow: hidden;
    align-self: flex-start;
}

/* Phase 2: Produce — Pipeline fuse */
.demo-engine-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 14px;
}
.demo-pipeline-fuse {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.demo-fuse-track {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.demo-fuse-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #D4882A);
    border-radius: 2px;
    transition: width 0.5s ease;
    box-shadow: 0 0 12px rgba(184,151,46,0.5);
}
.demo-fuse-stages {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}
.demo-fuse-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.demo-fuse-stage.active {
    opacity: 1;
    transform: translateY(-2px);
}
.demo-fuse-stage.active .demo-fuse-icon {
    filter: drop-shadow(0 0 8px rgba(184,151,46,0.6));
    stroke: var(--accent);
}
.demo-fuse-icon {
    stroke: var(--text-tertiary);
    transition: stroke 0.4s ease, filter 0.4s ease;
}
.demo-fuse-stage span {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}
.demo-fuse-stage.active span {
    color: var(--accent);
}

/* Phase 3: Review — Video player result */
.demo-result-player {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}
.demo-result-frame {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #1a0e08 0%, #2a1a0a 50%, #0d0d1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}
.demo-result-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
}
.demo-film-grain {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}
.demo-result-title {
    position: absolute;
    bottom: 40px; left: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.demo-result-meta {
    position: absolute;
    bottom: 16px; left: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.demo-result-badge {
    padding: 2px 8px;
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.8);
    backdrop-filter: blur(4px);
}
.demo-result-play {
    z-index: 2;
    opacity: 0.9;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.5));
    transition: transform 0.3s;
}
.demo-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.demo-result-action {
    padding: 6px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: default;
}
.demo-result-action-primary {
    padding: 6px 18px;
    background: var(--accent);
    color: #0c0c0c;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: default;
    margin-left: auto;
}

/* Demo Timeline */
.demo-timeline {
    margin-top: 24px;
    position: relative;
}
.demo-timeline-track {
    height: 2px;
    background: rgba(255,255,255,0.08);
    border-radius: 1px;
    position: relative;
}
.demo-timeline-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 1px;
    transition: width 0.6s ease;
    box-shadow: 0 0 8px rgba(184,151,46,0.4);
}
.demo-timeline-waypoints {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}
.demo-waypoint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}
.demo-waypoint-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    transition: background 0.3s, box-shadow 0.3s;
}
.demo-waypoint.active .demo-waypoint-dot {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(184,151,46,0.6);
}
.demo-waypoint-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    transition: color 0.3s;
}
.demo-waypoint.active .demo-waypoint-label {
    color: var(--accent);
}

/* ============================================================
   ENHANCED DEMO — Phase 1, 2, 3 Animation Overhaul
   ============================================================ */

/* --- Phase 1: Animated settings selection --- */
.demo-s-anim {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.demo-s-anim.revealed {
    opacity: 1;
    transform: translateY(0);
}
.demo-pill-opt {
    transition: all 0.35s ease;
    cursor: default;
}
.demo-pill-opt.picked {
    border-color: rgba(184,151,46,0.5);
    color: var(--accent);
    background: rgba(184,151,46,0.12);
    box-shadow: 0 0 12px rgba(184,151,46,0.2);
}
.demo-btn-ring {
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    border: 2px solid var(--accent);
    opacity: 0;
    pointer-events: none;
}
.demo-btn-mock.pulsing .demo-btn-ring {
    animation: demo-ring-pulse 0.8s ease-out forwards;
}
.demo-btn-mock.clicked {
    transform: scale(0.95);
    transition: transform 0.12s ease;
}
@keyframes demo-ring-pulse {
    0% { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.12); }
}

/* Duration slider mock */
.demo-slider-mock {
    display: flex; align-items: center; gap: 10px; width: 100%;
}
.demo-slider-track {
    flex: 1; height: 4px; background: rgba(255,255,255,0.15);
    border-radius: 2px; position: relative; min-width: 80px;
}
.demo-slider-fill {
    position: absolute; left: 0; top: 0; height: 100%;
    width: 0%; background: var(--accent); border-radius: 2px;
    transition: width 1s ease-out;
}
.demo-slider-thumb {
    position: absolute; top: 50%; width: 12px; height: 12px;
    border-radius: 50%; background: var(--accent);
    transform: translate(-50%, -50%); left: 0%;
    transition: left 1s ease-out;
    box-shadow: 0 0 8px rgba(184,151,46,0.5);
}
.demo-slider-mock.slid .demo-slider-fill { width: 30%; }
.demo-slider-mock.slid .demo-slider-thumb { left: 30%; }
.demo-slider-val {
    font-size: 0.72rem; color: var(--accent); font-weight: 600;
    min-width: 36px; text-align: right;
}
/* Toggle spacer for combined row */
.demo-toggle-spacer { width: 16px; }
/* Second toggle in a combined row shouldn't auto-margin */
.demo-setting-row .demo-toggle-mock ~ .demo-setting-icon ~ .demo-setting-label ~ .demo-toggle-mock {
    margin-left: 0;
}

/* --- Phase 2: Engine progress dots --- */
.demo-engine-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.demo-ep-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.demo-ep-step .demo-ep-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: all 0.4s ease;
}
.demo-ep-step.active .demo-ep-dot {
    background: var(--accent);
    box-shadow: 0 0 12px rgba(184,151,46,0.6);
}
.demo-ep-step.done .demo-ep-dot {
    background: var(--accent);
    opacity: 0.4;
}
.demo-ep-step span {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    transition: color 0.4s;
}
.demo-ep-step.active span { color: var(--accent); }
.demo-ep-step.done span { color: var(--text-secondary); }

/* --- Phase 2: Live output area --- */
.demo-engine-live {
    position: relative;
    min-height: 180px;
    flex: 1;
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    overflow: hidden;
}
.demo-eout {
    position: absolute;
    inset: 0;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.demo-eout.active { opacity: 1; visibility: visible; }

/* Script lines */
.demo-script-lines { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.demo-sline {
    display: flex; gap: 10px; padding: 6px 10px;
    border-radius: 4px; background: rgba(255,255,255,0.03);
    border-left: 2px solid transparent;
    opacity: 0; transform: translateX(-8px);
    transition: all 0.4s ease;
}
.demo-sline.visible { opacity: 1; transform: translateX(0); border-left-color: var(--accent); }
.demo-sline-num { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent); opacity: 0.6; min-width: 18px; padding-top: 2px; }
.demo-sline-txt { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.5; }

/* Voice waveform */
.demo-voice-out { display: flex; flex-direction: column; gap: 12px; width: 100%; align-items: center; }
.demo-vo-label { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--accent); }
.demo-vo-time { font-size: 0.65rem; color: var(--text-tertiary); }
.demo-waveform-bars { display: flex; align-items: center; gap: 2px; height: 60px; width: 100%; justify-content: center; }
.demo-waveform-bars span { width: 3px; background: var(--accent); border-radius: 2px; height: 4px; opacity: 0.2; }
.demo-waveform-bars.playing span { opacity: 0.9; animation: wf-md 1s ease-in-out infinite; }
.demo-waveform-bars.playing span:nth-child(odd) { animation-delay: 0.15s; }
.demo-waveform-bars.playing span:nth-child(3n) { animation-delay: 0.3s; animation-name: wf-lg; }
.demo-waveform-bars.playing span:nth-child(5n) { animation-delay: 0.45s; animation-name: wf-sm; }
.demo-waveform-bars.playing span:nth-child(7n) { animation-delay: 0.6s; }
@keyframes wf-sm { 0%,100%{height:5px} 50%{height:18px} }
@keyframes wf-md { 0%,100%{height:5px} 50%{height:36px} }
@keyframes wf-lg { 0%,100%{height:5px} 50%{height:50px} }

/* Scene grid */
.demo-scene-grid-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; height: 100%; align-content: center; }
.demo-sg-card {
    aspect-ratio: 16/9; border-radius: 6px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    opacity: 0; transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative; overflow: hidden;
}
.demo-sg-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%); pointer-events: none; }
.demo-sg-card.visible { opacity: 1; transform: scale(1); }
.demo-sg-num { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.9); z-index: 1; }
.demo-sg-name { font-size: 0.55rem; color: rgba(255,255,255,0.6); z-index: 1; text-transform: uppercase; letter-spacing: 0.04em; }

/* Music EQ */
.demo-music-out { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: center; }
.demo-mo-label { font-size: 0.8rem; color: var(--accent); }
.demo-mo-status { font-size: 0.65rem; color: var(--text-tertiary); }
.demo-eq-bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; justify-content: center; }
.demo-eq-bars span { width: 6px; background: var(--accent); border-radius: 2px 2px 0 0; height: 4px; opacity: 0.3; }
.demo-eq-bars.playing span { opacity: 1; animation: eq-bounce 0.8s ease-in-out infinite alternate; }
.demo-eq-bars.playing span:nth-child(odd) { animation-delay: 0.1s; }
.demo-eq-bars.playing span:nth-child(3n) { animation-delay: 0.2s; }
.demo-eq-bars.playing span:nth-child(5n) { animation-delay: 0.35s; }
.demo-eq-bars.playing span:nth-child(7n) { animation-delay: 0.45s; }
.demo-eq-bars.playing span:nth-child(1) { height: 15px; } .demo-eq-bars.playing span:nth-child(2) { height: 28px; }
.demo-eq-bars.playing span:nth-child(3) { height: 42px; } .demo-eq-bars.playing span:nth-child(4) { height: 55px; }
.demo-eq-bars.playing span:nth-child(5) { height: 45px; } .demo-eq-bars.playing span:nth-child(6) { height: 32px; }
.demo-eq-bars.playing span:nth-child(7) { height: 50px; } .demo-eq-bars.playing span:nth-child(8) { height: 38px; }
.demo-eq-bars.playing span:nth-child(9) { height: 55px; } .demo-eq-bars.playing span:nth-child(10) { height: 42px; }
.demo-eq-bars.playing span:nth-child(11) { height: 22px; } .demo-eq-bars.playing span:nth-child(12) { height: 48px; }
.demo-eq-bars.playing span:nth-child(13) { height: 55px; } .demo-eq-bars.playing span:nth-child(14) { height: 35px; }
.demo-eq-bars.playing span:nth-child(15) { height: 50px; } .demo-eq-bars.playing span:nth-child(16) { height: 28px; }
.demo-eq-bars.playing span:nth-child(17) { height: 42px; } .demo-eq-bars.playing span:nth-child(18) { height: 55px; }
.demo-eq-bars.playing span:nth-child(19) { height: 32px; } .demo-eq-bars.playing span:nth-child(20) { height: 18px; }
@keyframes eq-bounce { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }

/* Captions */
.demo-caption-out { display: flex; flex-direction: column; gap: 10px; width: 100%; align-items: center; }
.demo-cap-frame {
    width: 100%; aspect-ratio: 16/9; border-radius: 6px;
    display: flex; align-items: flex-end; justify-content: center;
    position: relative; overflow: hidden; max-height: 120px;
}
.demo-cap-frame::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
    pointer-events: none;
}
.demo-cap-sub {
    background: rgba(0,0,0,0.75); color: white; padding: 6px 14px;
    border-radius: 4px; font-size: 0.72rem; margin-bottom: 10px;
    backdrop-filter: blur(4px); z-index: 1;
    opacity: 0; transform: translateY(8px);
    transition: all 0.5s ease;
}
.demo-cap-sub.visible { opacity: 1; transform: translateY(0); }
.demo-cap-info { display: flex; gap: 16px; font-size: 0.65rem; color: var(--text-tertiary); }

/* Assembly merge */
.demo-assembly-out { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.demo-asm-items { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.demo-asm-item {
    padding: 5px 10px; background: rgba(255,255,255,0.06);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.65rem; color: var(--text-secondary);
    opacity: 0; transform: translateY(8px);
    transition: all 0.4s ease;
}
.demo-asm-item.merged { opacity: 1; transform: translateY(0); border-color: rgba(184,151,46,0.3); color: var(--accent); }
.demo-asm-center {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0; transform: scale(0.5);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.demo-asm-center.visible { opacity: 1; transform: scale(1); }
.demo-asm-check { filter: drop-shadow(0 0 12px rgba(184,151,46,0.5)); }
.demo-asm-ready { font-size: 0.85rem; font-weight: 600; color: var(--accent); letter-spacing: 0.06em; }

/* --- Phase 3: Scene-by-scene editor --- */
.demo-review-main { margin-bottom: 10px; flex: 1; display: flex; flex-direction: column; }
.demo-review-frame {
    position: relative; border-radius: 8px; overflow: hidden;
    flex: 1; min-height: 120px;
    display: flex; align-items: center; justify-content: center;
}
.demo-review-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 8px; background: rgba(184,151,46,0.2);
    border: 1px solid rgba(184,151,46,0.3); border-radius: 4px;
    font-size: 0.58rem; color: var(--accent); letter-spacing: 0.04em;
    z-index: 2; backdrop-filter: blur(4px);
}
.demo-review-sub {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.7); color: white; padding: 4px 10px;
    border-radius: 4px; font-size: 0.65rem; z-index: 2;
    white-space: nowrap; backdrop-filter: blur(4px);
    max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.demo-review-play {
    z-index: 2; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); opacity: 0.7;
}

/* Scene timeline cards */
.demo-review-tl { display: flex; gap: 6px; margin-bottom: 8px; overflow: hidden; }
.demo-rtl-card {
    flex: 1; display: flex; flex-direction: column; gap: 3px; align-items: center;
    opacity: 0; transform: translateY(8px);
    transition: all 0.4s ease; cursor: default;
}
.demo-rtl-card.visible { opacity: 1; transform: translateY(0); }
.demo-rtl-thumb {
    width: 100%; aspect-ratio: 4/3; border-radius: 4px;
    border: 2px solid transparent; transition: all 0.3s ease;
}
.demo-rtl-card.active .demo-rtl-thumb { border-color: var(--accent); box-shadow: 0 0 10px rgba(184,151,46,0.3); }
.demo-rtl-card span { font-size: 0.5rem; color: var(--text-tertiary); }
.demo-rtl-card.active span { color: var(--accent); }
.demo-rtl-card.dragging { transform: translateY(-6px) scale(1.08); z-index: 10; opacity: 0.8; transition: all 0.3s ease; }

/* Edit toolbar */
.demo-review-tools {
    display: flex; gap: 6px;
    opacity: 0; transform: translateY(6px);
    transition: all 0.4s ease; flex-wrap: wrap;
}
.demo-review-tools.visible { opacity: 1; transform: translateY(0); }
.demo-rtool {
    padding: 4px 8px; background: rgba(255,255,255,0.06);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: 0.6rem; color: var(--text-secondary); cursor: default;
}
.demo-rtool-pub {
    padding: 4px 12px; background: var(--accent); color: #0c0c0c;
    border-radius: 6px; font-size: 0.6rem; font-weight: 600;
    cursor: default; margin-left: auto; opacity: 0.4;
    transition: all 0.4s ease;
}
.demo-rtool-pub.glow { opacity: 1; box-shadow: 0 0 20px rgba(184,151,46,0.4); }

/* ============================================================
   SECTION 2 — Feature Cards: Cinematic Vignettes
   ============================================================ */
.feature-grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.demo-mini-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25,0.1,0.25,1);
}
.demo-mini-card:hover {
    transform: none !important;
    border-color: var(--border) !important;
}
.demo-mini-card:hover .mini-scene {
    transform: none !important;
}
.demo-mini-card {
    cursor: default;
}
.demo-mini-visual {
    padding: 24px;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.demo-mini-title {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0 20px;
    margin: 0;
    color: var(--text-primary);
}
.demo-mini-desc {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    padding: 6px 20px 20px;
    margin: 0;
    line-height: 1.4;
}

/* Vignette: Script */
.vignette-script {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.vignette-script-input {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 0.8rem;
    color: var(--text-primary);
    min-height: 20px;
    display: flex;
    align-items: center;
}
.vignette-cursor-char {
    animation: blink 1s step-end infinite;
    color: var(--accent);
}
.vignette-typed-text { color: var(--text-primary); }
.vignette-script-output {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.8s ease;
}
.vignette-script-output.revealed { opacity: 1; }
.vignette-script-line {
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.vignette-script-line:nth-child(1) { width: 100%; }
.vignette-script-line:nth-child(2) { width: 85%; }
.vignette-script-line:nth-child(3) { width: 60%; }
.vignette-line-glow {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(184,151,46,0.4), transparent);
    transform: translateX(-100%);
}
.vignette-script-line.sweep .vignette-line-glow {
    animation: golden-sweep 0.8s ease forwards;
}
@keyframes golden-sweep {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* Vignette: Cinema */
.vignette-cinema {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #1a0e08 0%, #2a1a0a 50%, #0d0d1a 100%);
}
.vignette-cinema-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.2) brightness(0.4);
    transition: filter 1.5s ease;
}
.vignette-cinema.sweep .vignette-cinema-img {
    filter: saturate(1) brightness(1);
}
.vignette-cinema-reveal {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(184,151,46,0.2), rgba(212,136,42,0.15), transparent);
    transform: translateX(-100%);
    opacity: 0;
}
.vignette-cinema.sweep .vignette-cinema-reveal {
    animation: cinema-light-sweep 1.5s ease forwards;
}
@keyframes cinema-light-sweep {
    0% { transform: translateX(-100%); opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* Vignette: Voice */
.vignette-voice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    position: relative;
}
.vignette-voice-speaker {
    flex-shrink: 0;
    animation: speaker-breathe 2s ease-in-out infinite;
}
@keyframes speaker-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
.vignette-sound-wave {
    opacity: 0.3;
    transform-origin: center;
}
.vignette-sw-1 { animation: voice-wave 1.5s ease-in-out infinite; }
.vignette-sw-2 { animation: voice-wave 1.5s ease-in-out infinite 0.3s; }
@keyframes voice-wave {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.7; }
}
.vignette-wave-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    height: 40px;
}
.vignette-wave-bars span {
    flex: 1;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.6;
    min-height: 4px;
    animation: voice-bar 1.2s ease-in-out infinite;
}
.vignette-wave-bars span:nth-child(1) { animation-delay: 0s; height: 30%; }
.vignette-wave-bars span:nth-child(2) { animation-delay: 0.1s; height: 50%; }
.vignette-wave-bars span:nth-child(3) { animation-delay: 0.2s; height: 70%; }
.vignette-wave-bars span:nth-child(4) { animation-delay: 0.15s; height: 90%; }
.vignette-wave-bars span:nth-child(5) { animation-delay: 0.05s; height: 60%; }
.vignette-wave-bars span:nth-child(6) { animation-delay: 0.25s; height: 80%; }
.vignette-wave-bars span:nth-child(7) { animation-delay: 0.1s; height: 45%; }
.vignette-wave-bars span:nth-child(8) { animation-delay: 0.3s; height: 95%; }
.vignette-wave-bars span:nth-child(9) { animation-delay: 0.18s; height: 55%; }
.vignette-wave-bars span:nth-child(10) { animation-delay: 0.08s; height: 75%; }
.vignette-wave-bars span:nth-child(11) { animation-delay: 0.22s; height: 40%; }
.vignette-wave-bars span:nth-child(12) { animation-delay: 0.12s; height: 65%; }
.vignette-wave-bars span:nth-child(13) { animation-delay: 0.28s; height: 50%; }
.vignette-wave-bars span:nth-child(14) { animation-delay: 0.06s; height: 85%; }
.vignette-wave-bars span:nth-child(15) { animation-delay: 0.2s; height: 35%; }
.vignette-wave-bars span:nth-child(16) { animation-delay: 0.14s; height: 60%; }
@keyframes voice-bar {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}
.vignette-voice-glow {
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 30px;
    background: radial-gradient(ellipse at left center, rgba(184,151,46,0.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Vignette: Music */
.vignette-music {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 100px;
}
.vignette-music-notes {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.vignette-note {
    position: absolute;
    opacity: 0;
}
.vignette-note.n1 { left: 20%; bottom: 10%; animation: note-float 3s ease-out infinite; }
.vignette-note.n2 { left: 55%; bottom: 5%; animation: note-float 3.5s ease-out infinite 0.5s; }
.vignette-note.n3 { left: 75%; bottom: 15%; animation: note-float 4s ease-out infinite 1s; }
@keyframes note-float {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    20% { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-80px) rotate(15deg); }
}
.vignette-music-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 50px;
    z-index: 1;
}
.vignette-music-eq span {
    width: 6px;
    background: var(--accent);
    border-radius: 2px;
    opacity: 0.7;
    animation: music-crescendo 2s ease-in-out infinite;
}
.vignette-music-eq span:nth-child(1) { height: 15%; animation-delay: 0s; }
.vignette-music-eq span:nth-child(2) { height: 25%; animation-delay: 0.1s; }
.vignette-music-eq span:nth-child(3) { height: 35%; animation-delay: 0.2s; }
.vignette-music-eq span:nth-child(4) { height: 50%; animation-delay: 0.3s; }
.vignette-music-eq span:nth-child(5) { height: 65%; animation-delay: 0.4s; }
.vignette-music-eq span:nth-child(6) { height: 80%; animation-delay: 0.5s; }
.vignette-music-eq span:nth-child(7) { height: 95%; animation-delay: 0.6s; }
.vignette-music-eq span:nth-child(8) { height: 80%; animation-delay: 0.7s; }
.vignette-music-eq span:nth-child(9) { height: 60%; animation-delay: 0.8s; }
.vignette-music-eq span:nth-child(10) { height: 40%; animation-delay: 0.9s; }
.vignette-music-eq span:nth-child(11) { height: 25%; animation-delay: 1s; }
.vignette-music-eq span:nth-child(12) { height: 15%; animation-delay: 1.1s; }
@keyframes music-crescendo {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

/* Vignette: Control */
.vignette-control {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    perspective: 600px;
}
.vignette-scene-card {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    transition: transform 0.8s cubic-bezier(0.25,0.1,0.25,1);
}
.vc-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(184,151,46,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: var(--accent);
    font-weight: 600;
}

/* Vignette: Platform */
.vignette-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}
.vignette-ratio-frame {
    border: 2px solid var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: all 1.2s cubic-bezier(0.25,0.1,0.25,1);
    width: 120px;
    height: 68px;
    position: relative;
}
.vignette-ratio-inner {
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg, rgba(184,151,46,0.1), rgba(184,151,46,0.05));
    border-radius: 4px;
}
.vignette-platform-name {
    font-size: 0.72rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: opacity 0.4s;
}

/* ============================================================
   SECTION 3 — Transformation: The Light Switch
   ============================================================ */
.transform-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: start;
    max-width: 800px;
    margin: 0 auto;
}
.transform-col {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 24px;
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.transform-col.visible {
    opacity: 1;
    transform: translateX(0);
}
.transform-after {
    transform: translateX(40px);
}
.transform-after.visible {
    transform: translateX(0);
}
.transform-before {
    border-color: rgba(255,82,82,0.15);
}
.transform-after {
    border-color: rgba(184,151,46,0.2);
}
.transform-label {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,82,82,0.7);
    margin-bottom: 20px;
}
.after-label {
    color: var(--accent);
}
.transform-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.transform-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-primary);
}
.transform-list li strong {
    display: block;
    font-weight: 500;
}
.transform-icon-wrap {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.before-icon-wrap {
    background: rgba(255,82,82,0.08);
    color: rgba(255,82,82,0.6);
}
.before-icon-wrap .transform-svg-icon {
    stroke: rgba(255,82,82,0.6);
}
.after-icon-wrap {
    background: rgba(184,151,46,0.1);
    color: var(--accent);
}
.after-icon-wrap .transform-svg-icon {
    stroke: var(--accent);
}

/* Animated SVG icons */
.before-icon-wrap .transform-svg-icon {
    animation: icon-stress 1.5s ease-in-out infinite;
}
@keyframes icon-stress {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    75% { transform: rotate(-8deg); }
}
.after-icon-wrap .transform-svg-icon {
    animation: icon-calm 2s ease-in-out infinite;
}
@keyframes icon-calm {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 4px rgba(184,151,46,0.4)); }
}

/* Transform beam divider */
.transform-beam {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: relative;
}
.transform-beam-line {
    width: 2px;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(to bottom, transparent, var(--accent), transparent);
    opacity: 0.3;
}
.transform-beam-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,151,46,0.4), transparent);
    animation: beam-pulse 2s ease-in-out infinite;
}
@keyframes beam-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0.8; }
}

/* Pull quote — word-by-word reveal */
.pull-quote {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-primary);
    margin-top: 48px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.pull-quote .word {
    display: inline-block;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.4s ease, filter 0.4s ease;
    margin-right: 0.3em;
}
.pull-quote .word.visible {
    opacity: 1;
    filter: blur(0);
}
.pull-quote .word.glow {
    background: linear-gradient(135deg, var(--accent), #D4882A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================
   SECTION 4 — Social Proof: The Constellation
   ============================================================ */
.proof-constellation {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.3;
}
.constellation-line {
    stroke: rgba(184,151,46,0.15);
    stroke-width: 1;
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1.5s ease;
}
.constellation-line.drawn {
    stroke-dashoffset: 0;
}
.proof-bar {
    position: relative;
    padding: var(--space-4xl) 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.proof-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.proof-stat {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    gap: 8px;
    position: relative;
}

/* Split-flap counter */
.proof-counter {
    display: flex;
    align-items: center;
    gap: 2px;
}
.flip-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 40px;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    position: relative;
    overflow: hidden;
}
.flip-digit.flipping {
    animation: digit-flip 0.3s ease;
}
@keyframes digit-flip {
    0% { transform: rotateX(0); }
    50% { transform: rotateX(-90deg); }
    100% { transform: rotateX(0); }
}
.flip-comma {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-tertiary);
    padding: 0 1px;
}
.flip-suffix {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    margin-left: 2px;
}

/* Proof ring */
.proof-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proof-ring {
    position: absolute;
    inset: 0;
}
.proof-ring-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
}
.proof-ring-pct {
    font-size: 0.8rem;
    color: var(--accent);
}

.proof-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-top: var(--space-xs);
}
.proof-divider {
    width: 1px;
    height: 50px;
    background: var(--border);
}
.proof-glow-burst {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,151,46,0.3), transparent);
    opacity: 0;
    pointer-events: none;
}
.proof-glow-burst.burst {
    animation: glow-flash 0.6s ease forwards;
}
@keyframes glow-flash {
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Platform marquee with icons */
.platform-strip-label {
    text-align: center;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    margin-top: 36px;
    margin-bottom: 12px;
}
.platform-strip {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
}
.platform-marquee {
    display: flex;
    gap: 32px;
    width: max-content;
    animation: marquee-scroll 25s linear infinite;
    white-space: nowrap;
}
.platform-marquee span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}
.platform-icon {
    opacity: 0.5;
    color: var(--accent);
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================================
   SECTION 5 — Bento Grid: Living Portraits
   ============================================================ */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.bento-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.bento-grid.js-animated .bento-card {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}
.bento-grid.js-animated .bento-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.bento-card:hover {
    transform: translateY(-3px);
}
.bento-lg {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
}
.bento-visual {
    padding: 20px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bento-content .persona-icon { margin-bottom: var(--space-xs); }
.bento-content {
    padding: 0 20px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}
.bento-content h3 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 8px 0 4px;
    color: var(--text-primary);
}
.bento-content p {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.4;
}
.persona-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(184,151,46,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.persona-icon svg { stroke: var(--accent); }

/* YouTube Dashboard */
.bento-yt-dashboard { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.byt-channel { display: flex; align-items: center; gap: 8px; }
.byt-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: #0c0c0c; }
.byt-channel-info { flex: 1; display: flex; flex-direction: column; }
.byt-channel-name { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
.byt-subs { font-size: 0.6rem; color: var(--text-tertiary); }
.byt-sub-count { font-variant-numeric: tabular-nums; }
.byt-sub-btn { padding: 3px 10px; border-radius: 100px; background: rgba(255,255,255,0.1); font-size: 0.6rem; color: var(--text-secondary); transition: all 0.5s ease; cursor: default; }
.byt-sub-btn.subscribed { background: var(--accent); color: #0c0c0c; }

.byt-uploads { display: flex; gap: 8px; }
.byt-upload-card { flex: 1; border-radius: 6px; overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.byt-upload-card.cascaded { opacity: 1; transform: translateY(0); }
.bu-1 { transition-delay: 0s; }
.bu-2 { transition-delay: 0.15s; }
.bu-3 { transition-delay: 0.3s; }
.bu-thumb { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 4px; overflow: hidden; background-color: #1a1a1a; }
.bu-dur { position: absolute; bottom: 2px; right: 3px; background: rgba(0,0,0,0.7); padding: 1px 4px; border-radius: 2px; font-size: 0.5rem; color: white; }
.bu-meta { padding: 3px 0; }
.bu-title { display: block; font-size: 0.58rem; font-weight: 500; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bu-views { font-size: 0.52rem; color: var(--text-tertiary); }
.byc-count { font-variant-numeric: tabular-nums; }

.byt-growth-row { display: flex; align-items: flex-end; gap: 10px; margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--border); }
.byt-sparkline { flex: 1; height: 24px; }
.byt-spark-line { stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 2s ease; }
.byt-spark-line.drawn { stroke-dashoffset: 0; }
.byt-growth-badge { display: flex; align-items: center; gap: 3px; font-size: 0.62rem; color: #50C878; font-weight: 600; flex-shrink: 0; }
.byt-growth-arrow { font-size: 0.7rem; }

/* Agency Dashboard */
.bento-agency-dash { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.bad-header { display: flex; justify-content: space-between; align-items: center; }
.bad-title { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.bad-live { display: flex; align-items: center; gap: 4px; font-size: 0.6rem; color: #50C878; }
.bad-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #50C878; animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.bad-clients { display: flex; flex-direction: column; gap: 8px; }
.bad-client-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.bad-client-row.slid { opacity: 1; transform: translateX(0); }
.bcr-1 { transition-delay: 0s; }
.bcr-2 { transition-delay: 0.2s; }
.bcr-3 { transition-delay: 0.4s; }
.bad-client-avatar { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 700; color: #0c0c0c; flex-shrink: 0; }
.bad-client-info { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bad-client-name { font-size: 0.65rem; color: var(--text-secondary); }
.bcr-bar { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.bcr-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), #D4882A); border-radius: 2px; transition: width 1s ease; }
.bad-client-count { font-size: 0.6rem; color: var(--text-tertiary); white-space: nowrap; }
.bad-status { font-size: 0.52rem; padding: 2px 6px; border-radius: 100px; font-weight: 500; white-space: nowrap; }
.bad-status.done { background: rgba(80,200,120,0.1); color: #50C878; }
.bad-status.active { background: rgba(184,151,46,0.1); color: var(--accent); }

.bad-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px solid var(--border); }
.bad-total { font-size: 0.7rem; color: var(--text-tertiary); }
.bento-total-num { font-weight: 700; color: var(--accent); }
.bad-revenue { font-size: 0.65rem; color: #50C878; font-weight: 600; opacity: 0; transition: opacity 0.6s ease 1s; }
.bad-revenue.revealed { opacity: 1; }

/* Small card mini-scenes */
.bento-mini-scene { padding: 20px; min-height: 80px; display: flex; align-items: center; justify-content: center; }
.bento-sm h3 { font-size: 0.88rem; font-weight: 600; padding: 0 16px; margin: 0; color: var(--text-primary); }
.bento-sm p { font-size: 0.72rem; color: var(--text-tertiary); padding: 4px 16px 16px; margin: 0; }

/* Marketing — Platform broadcast */
.bms-marketing { position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; }
.bms-platform-fan { position: relative; width: 60px; height: 60px; }
.bms-pcard { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.6s cubic-bezier(0.25,0.1,0.25,1); }
.bms-p1 { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.bms-p2 { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.bms-p3 { top: 50%; left: 50%; transform: translate(-50%,-50%); }
.bms-pcard.fanned { opacity: 1; }
.bms-p1.fanned { top: 0; left: 50%; transform: translate(-50%, 0); }
.bms-p2.fanned { bottom: 0; top: auto; left: 0; transform: none; }
.bms-p3.fanned { bottom: 0; top: auto; right: 0; left: auto; transform: none; }
.bms-broadcast-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; }
.bms-broadcast-ring.pulsing { animation: broadcast-out 1.5s ease-out infinite; }
@keyframes broadcast-out { 0% { width: 10px; height: 10px; opacity: 0.8; } 100% { width: 70px; height: 70px; opacity: 0; } }

/* ── Educator LARGE card — PDF to Cinematic Video Pipeline ── */
.bento-edu-pipeline {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

/* Upload zone */
.bed-upload-zone {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.bed-upload-items {
    display: flex;
    gap: 8px;
}
.bed-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.bed-item.visible { opacity: 1; transform: translateY(0); }
.bed-pdf { transition-delay: 0s; }
.bed-photo { transition-delay: 0.2s; }
.bed-photo2 { transition-delay: 0.4s; }
.bed-item-label {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bed-upload-text {
    font-size: 0.55rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    transition: opacity 0.4s ease 0.6s;
}
.bed-upload-zone.active .bed-upload-text { opacity: 1; }

/* Processing zone */
.bed-process {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.bed-helion-orb {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bed-orb-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    transition: border-color 0.4s ease;
}
.bed-process.active .bed-orb-ring {
    border-color: rgba(184,151,46,0.4);
    animation: bed-spin 2s linear infinite;
}
@keyframes bed-spin { to { transform: rotate(360deg); } }
.bed-stages {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bed-stage {
    font-size: 0.5rem;
    color: var(--text-tertiary);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease, color 0.3s ease;
}
.bed-stage.active { opacity: 1; color: var(--accent); font-weight: 600; }
.bed-stage.done { opacity: 0.5; color: var(--text-tertiary); }

/* Output zone */
.bed-output {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.bed-output.visible {
    opacity: 1;
    transform: translateX(0);
}
.bed-video-player {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.bed-player-thumb {
    width: 44px;
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    justify-content: center;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.bed-player-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.bed-player-title { font-size: 0.58rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bed-player-meta { font-size: 0.48rem; color: var(--text-tertiary); }
.bed-output-badge {
    font-size: 0.52rem;
    color: #50C878;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}
.bed-output.visible .bed-output-badge { opacity: 1; }

/* ── Agency SMALL card (mini version) ── */
.bms-agency-mini {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 80%;
}
.bam-row {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6rem;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.bam-row.slid { opacity: 1; transform: translateX(0); }
.bam-1 { transition-delay: 0s; }
.bam-2 { transition-delay: 0.15s; }
.bam-3 { transition-delay: 0.3s; }
.bam-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.45rem; font-weight: 700; color: #0c0c0c;
    flex-shrink: 0;
}
.bam-bar {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.bam-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), #D4882A);
    border-radius: 2px;
    transition: width 0.8s ease;
}
.bam-ct { color: var(--text-tertiary); font-size: 0.5rem; }

/* Old educator small card — keep for backwards compat */
.bms-educator { display: flex; align-items: center; gap: 8px; }
.bms-book { width: 28px; height: 32px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 2px 4px 4px 2px; position: relative; display: flex; flex-direction: column; padding: 4px; gap: 2px; }
.bms-book-page { height: 3px; background: rgba(255,255,255,0.15); border-radius: 1px; }
.bms-transform-arrow { opacity: 0; transform: translateX(-4px); transition: all 0.6s ease; }
.bms-transform-arrow.visible { opacity: 1; transform: translateX(0); }
.bms-video-frame { width: 36px; height: 26px; border-radius: 4px; border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7); transition: all 0.5s ease; }
.bms-video-frame.visible { opacity: 1; transform: scale(1); }

/* Course — Module completion */
.bms-course { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.bms-module { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: rgba(255,255,255,0.04); border-radius: 4px; font-size: 0.6rem; color: var(--text-tertiary); position: relative; overflow: hidden; }
.bms-mod-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: rgba(184,151,46,0.1); transition: width 0.8s ease; border-radius: 4px; }
.bms-mod-fill.filled { width: 100%; }
.bms-check { opacity: 0; margin-left: auto; transition: opacity 0.3s ease; flex-shrink: 0; }
.bms-check.checked { opacity: 1; }
.bms-module span { position: relative; z-index: 1; }

/* Business — Org training */
.bms-business { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.bms-org-row { display: flex; justify-content: center; gap: 12px; }
.bms-org-node { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1.5px solid var(--border); transition: all 0.5s ease; }
.bms-org-node.trained { background: rgba(184,151,46,0.2); border-color: var(--accent); box-shadow: 0 0 8px rgba(184,151,46,0.3); }
.bms-org-line { width: 1px; height: 8px; background: var(--border); }
.bms-org-bottom-row { gap: 8px; }
.bms-train-badge { font-size: 0.6rem; color: var(--accent); font-weight: 600; margin-top: 4px; opacity: 0; transition: opacity 0.5s ease; }
.bms-train-badge.revealed { opacity: 1; }
.bms-train-count { font-variant-numeric: tabular-nums; }

/* ============================================================
   BENTO HOVER — Storytelling Animations
   Each card tells a visual story when hovered.
   ============================================================ */

/* Kill the generic "clickable" hover (uplift + white border) */
.bento-card:hover {
    border-color: var(--border) !important;
    transform: translateY(0) scale(1) !important;
}

/* Base modifications for hover effects */
.bms-course { position: relative; overflow: hidden; }
.bms-org-node { position: relative; overflow: visible; }
.bed-helion-orb { transition: transform 0.5s ease, filter 0.5s ease; }
.bam-fill { transform-origin: left; }
.byt-growth-row { position: relative; }
.byt-upload-card { transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.4s ease; }

/* ────────────────────────────────────────────────────────────
   YOUTUBE — Living analytics dashboard.
   Cards rise in a wave with depth. Screens shimmer like
   live video previews. Play buttons pulse. Chart scans.
   View counts tick up via JS.
   ──────────────────────────────────────────────────────────── */
[data-bento="youtube"]:hover .byt-upload-card {
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
[data-bento="youtube"]:hover .bu-1 { transform: translateY(-4px); transition-delay: 0s; }
[data-bento="youtube"]:hover .bu-2 { transform: translateY(-8px); transition-delay: 0.08s; }
[data-bento="youtube"]:hover .bu-3 { transform: translateY(-12px); transition-delay: 0.16s; }

/* Light reflection sweeps across thumbnails — live screens */
[data-bento="youtube"]:hover .bu-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
        transparent 35%, rgba(255,255,255,0.08) 42%,
        rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.08) 58%,
        transparent 65%);
    animation: bh-screen-sweep 2s ease-in-out infinite;
}
[data-bento="youtube"]:hover .bu-2 .bu-thumb::after { animation-delay: 0.3s; }
[data-bento="youtube"]:hover .bu-3 .bu-thumb::after { animation-delay: 0.6s; }

/* Play buttons pulse — videos are being watched */
[data-bento="youtube"]:hover .bu-thumb svg {
    animation: bh-play-pulse 1.5s ease-in-out infinite;
}
[data-bento="youtube"]:hover .bu-2 .bu-thumb svg { animation-delay: 0.2s; }
[data-bento="youtube"]:hover .bu-3 .bu-thumb svg { animation-delay: 0.4s; }

/* Golden scan band sweeps across growth chart */
[data-bento="youtube"]:hover .byt-growth-row::before {
    content: '';
    position: absolute; top: 0; left: -40%;
    width: 30%; height: 100%;
    background: linear-gradient(90deg,
        transparent, rgba(184,151,46,0.1),
        rgba(184,151,46,0.25), rgba(184,151,46,0.1),
        transparent);
    animation: bh-chart-scan 2.5s ease-in-out infinite;
    pointer-events: none; z-index: 1;
}

/* Growth badge kicks */
[data-bento="youtube"]:hover .byt-growth-badge {
    animation: bh-growth-kick 1.2s ease-in-out infinite alternate;
}

/* ────────────────────────────────────────────────────────────
   EDUCATORS — Transformation machine. Files vacuum into orb,
   orb swells and emits sparks, video ejects out the side.
   ──────────────────────────────────────────────────────────── */
[data-bento="educators"] .bento-visual { flex: 1; }
[data-bento="educators"] .bento-edu-pipeline { gap: 16px; }

[data-bento="educators"]:hover .bed-item {
    transition: transform 0.7s cubic-bezier(0.55, 0, 0.1, 1),
                opacity 0.7s ease, filter 0.7s ease;
}
[data-bento="educators"]:hover .bed-pdf {
    transform: translateX(70px) scale(0.15);
    opacity: 0; filter: blur(3px);
}
[data-bento="educators"]:hover .bed-photo {
    transform: translateX(40px) scale(0.15);
    opacity: 0; filter: blur(3px); transition-delay: 0.1s;
}
[data-bento="educators"]:hover .bed-photo2 {
    transform: translateX(10px) scale(0.15);
    opacity: 0; filter: blur(3px); transition-delay: 0.2s;
}
[data-bento="educators"]:hover .bed-upload-text {
    opacity: 0; transition: opacity 0.3s ease;
}

/* Orb SWELLS after consuming files */
[data-bento="educators"]:hover .bed-helion-orb {
    transform: scale(1.5);
    filter: drop-shadow(0 0 28px rgba(184,151,46,0.9))
            drop-shadow(0 0 56px rgba(184,151,46,0.4));
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s,
                filter 0.6s ease 0.4s;
}
/* Sparks fly off the orb while processing */
[data-bento="educators"]:hover .bed-helion-orb::before {
    content: '';
    position: absolute;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent);
    top: -2px; left: 50%;
    animation: bh-spark-up 0.8s ease-out 0.5s infinite;
}
[data-bento="educators"]:hover .bed-helion-orb::after {
    content: '';
    position: absolute;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 4px var(--accent);
    bottom: -2px; right: 0;
    animation: bh-spark-down 0.8s ease-out 0.9s infinite;
}
/* Ring spins FAST */
[data-bento="educators"]:hover .bed-orb-ring {
    border-color: var(--accent);
    animation: bed-spin 0.3s linear infinite;
}
/* Stages blitz */
[data-bento="educators"]:hover .bed-stage {
    animation: bh-stage-blitz 1.2s ease-in-out infinite; opacity: 1;
}
[data-bento="educators"]:hover .bs-2 { animation-delay: 0.4s; }
[data-bento="educators"]:hover .bs-3 { animation-delay: 0.8s; }
/* Video EJECTS with bounce */
[data-bento="educators"]:hover .bed-output {
    transform: translateX(6px) scale(1.04);
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.7s, opacity 0.6s ease;
}
[data-bento="educators"]:hover .bed-video-player {
    box-shadow: 0 0 16px rgba(184,151,46,0.25), 0 0 32px rgba(184,151,46,0.08);
    transition: box-shadow 0.5s ease 0.8s;
}
[data-bento="educators"]:hover .bed-video-player:nth-child(2) {
    transition-delay: 0.95s;
}
[data-bento="educators"]:hover .bed-video-player:nth-child(3) {
    transition-delay: 1.1s;
}

/* ────────────────────────────────────────────────────────────
   MARKETING — Videos "deliver" to each platform in sequence.
   Icons bounce like notifications landing. Rings broadcast.
   ──────────────────────────────────────────────────────────── */
[data-bento="marketing"]:hover .bms-p1 svg {
    animation: bh-icon-deliver 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}
[data-bento="marketing"]:hover .bms-p2 svg {
    animation: bh-icon-deliver 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s infinite;
}
[data-bento="marketing"]:hover .bms-p3 svg {
    animation: bh-icon-deliver 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s infinite;
}
/* "Received" ring pulse on each platform */
[data-bento="marketing"]:hover .bms-pcard {
    animation: bh-received-ring 1.8s ease-in-out infinite;
}
[data-bento="marketing"]:hover .bms-p2 { animation-delay: 0.4s; }
[data-bento="marketing"]:hover .bms-p3 { animation-delay: 0.8s; }
/* Multi-ring broadcast */
[data-bento="marketing"]:hover .bms-broadcast-ring {
    animation: broadcast-out 0.7s ease-out infinite;
}
[data-bento="marketing"]:hover .bms-marketing::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid var(--accent);
    animation: broadcast-out 0.7s ease-out 0.35s infinite;
}

/* ────────────────────────────────────────────────────────────
   AGENCY — Bars surge one after another like a production
   pipeline. Dots ring. Dashboard feels live.
   ──────────────────────────────────────────────────────────── */
[data-bento="agency"]:hover .bam-fill {
    animation: bh-bar-surge 2s ease-in-out infinite;
}
[data-bento="agency"]:hover .bam-1 .bam-fill { animation-delay: 0s; }
[data-bento="agency"]:hover .bam-2 .bam-fill { animation-delay: 0.5s; }
[data-bento="agency"]:hover .bam-3 .bam-fill { animation-delay: 1s; }
[data-bento="agency"]:hover .bam-dot {
    animation: bh-dot-ring 2s ease-in-out infinite;
}
[data-bento="agency"]:hover .bam-1 .bam-dot { animation-delay: 0s; }
[data-bento="agency"]:hover .bam-2 .bam-dot { animation-delay: 0.5s; }
[data-bento="agency"]:hover .bam-3 .bam-dot { animation-delay: 1s; }
[data-bento="agency"]:hover .bam-row {
    animation: bh-dashboard-tick 3s ease-in-out infinite;
}
[data-bento="agency"]:hover .bam-2 { animation-delay: 0.3s; }
[data-bento="agency"]:hover .bam-3 { animation-delay: 0.6s; }

/* ────────────────────────────────────────────────────────────
   COURSES — Laser scanner speed-runs through all modules.
   Each module activates + check bounces as beam passes.
   ──────────────────────────────────────────────────────────── */
[data-bento="courses"]:hover .bms-course::before {
    content: '';
    position: absolute; top: -5%; left: 0;
    width: 100%; height: 3px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(184,151,46,0.5),
                0 2px 30px rgba(184,151,46,0.3);
    animation: bh-speed-scan 1s ease-in-out infinite;
    z-index: 2;
}
[data-bento="courses"]:hover .bms-module {
    animation: bh-module-activate 1s ease-in-out infinite;
}
[data-bento="courses"]:hover .bms-m1 { animation-delay: 0s; }
[data-bento="courses"]:hover .bms-m2 { animation-delay: 0.22s; }
[data-bento="courses"]:hover .bms-m3 { animation-delay: 0.44s; }
[data-bento="courses"]:hover .bms-m4 { animation-delay: 0.66s; }
[data-bento="courses"]:hover .bms-check {
    animation: bh-check-bounce 1s ease-in-out infinite;
}
[data-bento="courses"]:hover .bms-m1 .bms-check { animation-delay: 0.1s; }
[data-bento="courses"]:hover .bms-m2 .bms-check { animation-delay: 0.32s; }
[data-bento="courses"]:hover .bms-m3 .bms-check { animation-delay: 0.54s; }
[data-bento="courses"]:hover .bms-m4 .bms-check { animation-delay: 0.76s; }

/* ────────────────────────────────────────────────────────────
   BUSINESS — Shockwave from HQ cascades through org.
   Double ripple, energy down connection, nodes ignite.
   ──────────────────────────────────────────────────────────── */
[data-bento="business"]:hover .bms-org-top::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--accent);
    animation: bh-shockwave 2s ease-out infinite;
    pointer-events: none;
}
[data-bento="business"]:hover .bms-org-top::before {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px; border-radius: 50%;
    border: 1.5px solid rgba(184,151,46,0.5);
    animation: bh-shockwave 2s ease-out 0.5s infinite;
    pointer-events: none;
}
/* Energy travels down connection */
[data-bento="business"]:hover .bms-org-line {
    width: 2px;
    background: linear-gradient(to bottom, var(--accent), transparent, var(--accent));
    background-size: 100% 300%;
    box-shadow: 0 0 8px rgba(184,151,46,0.4);
    animation: bh-energy-travel 1s linear infinite;
}
/* Nodes ignite in cascade */
[data-bento="business"]:hover .bms-org-node {
    animation: bh-node-ignite 2s ease-in-out infinite;
}
[data-bento="business"]:hover .bms-org-top { animation-delay: 0s; }
[data-bento="business"]:hover .bms-org-b1 { animation-delay: 0.5s; }
[data-bento="business"]:hover .bms-org-b2 { animation-delay: 0.7s; }
[data-bento="business"]:hover .bms-org-b3 { animation-delay: 0.9s; }
[data-bento="business"]:hover .bms-train-badge {
    animation: bh-badge-kick 2s ease-in-out infinite;
}

/* ============================================================
   BENTO HOVER — Keyframes
   ============================================================ */

/* YouTube */
@keyframes bh-screen-sweep {
    0%   { transform: translateX(-200%); }
    100% { transform: translateX(200%); }
}
@keyframes bh-play-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50%      { transform: scale(1.35); opacity: 1; }
}
@keyframes bh-chart-scan {
    0%   { left: -40%; }
    100% { left: 110%; }
}
@keyframes bh-growth-kick {
    0%   { transform: scale(1) translateX(0); }
    100% { transform: scale(1.15) translateX(3px); }
}

/* Educators */
@keyframes bh-stage-blitz {
    0%, 100% { color: var(--text-tertiary); opacity: 0.4; transform: scale(1); }
    35%, 65% { color: var(--accent); opacity: 1; transform: scale(1.15); }
}
@keyframes bh-spark-up {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-18px) scale(0); opacity: 0; }
}
@keyframes bh-spark-down {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(18px) translateX(8px) scale(0); opacity: 0; }
}

/* Marketing */
@keyframes bh-icon-deliver {
    0%, 100% { transform: scale(1) rotate(0deg); }
    15%      { transform: scale(1.5) rotate(-8deg); }
    30%      { transform: scale(0.85); }
    45%      { transform: scale(1.1) rotate(3deg); }
    60%      { transform: scale(1); }
}
@keyframes bh-received-ring {
    0%, 100%  { box-shadow: 0 0 0 0 rgba(184,151,46,0); }
    25%, 45% { box-shadow: 0 0 0 4px rgba(184,151,46,0.4), 0 0 12px rgba(184,151,46,0.15); }
}

/* Agency */
@keyframes bh-bar-surge {
    0%, 100% { transform: scaleX(1); filter: brightness(1); }
    50%      { transform: scaleX(1.3); filter: brightness(1.6); }
}
@keyframes bh-dot-ring {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      { box-shadow: 0 0 0 3px rgba(184,151,46,0.35); }
}
@keyframes bh-dashboard-tick {
    0%, 100% { transform: translateX(0); }
    30%      { transform: translateX(3px); }
    60%      { transform: translateX(-2px); }
}

/* Courses */
@keyframes bh-speed-scan {
    0%   { top: -5%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 105%; opacity: 0; }
}
@keyframes bh-module-activate {
    0%, 100% { background: rgba(255,255,255,0.04); box-shadow: none; }
    20%, 45% { background: rgba(184,151,46,0.2);
               box-shadow: 0 0 14px rgba(184,151,46,0.2), inset 0 0 6px rgba(184,151,46,0.08); }
}
@keyframes bh-check-bounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25%      { transform: scale(1.4) rotate(10deg); }
    50%      { transform: scale(1); }
}

/* Business */
@keyframes bh-shockwave {
    0%   { width: 10px; height: 10px; opacity: 1; border-width: 2px; }
    100% { width: 70px; height: 70px; opacity: 0; border-width: 1px; }
}
@keyframes bh-energy-travel {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 100%; }
}
@keyframes bh-node-ignite {
    0%, 100% { box-shadow: none; transform: scale(1);
               background: rgba(255,255,255,0.08); border-color: var(--border); }
    30%, 50% { box-shadow: 0 0 20px rgba(184,151,46,0.7); transform: scale(1.25);
               background: rgba(184,151,46,0.3); border-color: var(--accent); }
}
@keyframes bh-badge-kick {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/* ============================================================
   RESPONSIVE OVERRIDES — Cinematic Sections
   ============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-lg {
        grid-column: span 2;
    }
}
@media (max-width: 768px) {
    .feature-grid-6 { grid-template-columns: repeat(2, 1fr); }
    .transform-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .transform-beam { display: none; }
    .transform-col {
        transform: translateY(20px);
    }
    .transform-col.visible {
        transform: translateY(0);
    }
    .transform-after {
        transform: translateY(20px);
    }
    .proof-stats {
        flex-direction: column;
        gap: 24px;
    }
    .proof-divider {
        width: 50px;
        height: 1px;
    }
    .bento-grid {
        grid-template-columns: 1fr 1fr;
    }
    .bento-lg {
        grid-column: span 2;
    }
    .demo-window-body { min-height: 300px; }
    .demo-scene-grid-out { grid-template-columns: repeat(2, 1fr); }
    .demo-ep-step span { font-size: 0.5rem; }
    .demo-asm-items { gap: 6px; }
    .demo-asm-item { font-size: 0.6rem; padding: 4px 8px; }
}
@media (max-width: 480px) {
    .feature-grid-6 { grid-template-columns: 1fr; }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-lg { grid-column: span 1; }
    .demo-scene-grid-out { grid-template-columns: repeat(2, 1fr); }
    .demo-ep-step span { font-size: 0; width: 0; overflow: hidden; }
    .demo-review-sub { font-size: 0.55rem; }
    .demo-sline-txt { font-size: 0.65rem; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .golden-particles-canvas { display: none; }
    .demo-glow-halo { animation: none; }
    .vignette-wave-bars span,
    .vignette-music-eq span,
    .vignette-note,
    .vignette-voice-speaker,
    .before-icon-wrap .transform-svg-icon,
    .after-icon-wrap .transform-svg-icon {
        animation: none;
    }
    .vignette-wave-bars span { transform: scaleY(0.7); }
    .vignette-music-eq span { transform: scaleY(0.7); }
    .platform-marquee { animation: none; }
    .demo-cursor, .vignette-cursor-char { animation: none; }
    .flip-digit.flipping { animation: none; }
    .transform-col { opacity: 1; transform: none; }
    .bento-card { opacity: 1; transform: none; }
    .bento-yt-thumb-card { opacity: 1; transform: none; }
    .bento-client-row { opacity: 1; transform: none; }
    .pull-quote .word { opacity: 1; filter: none; }
    .demo-s-anim { opacity: 1; transform: none; }
    .demo-sline { opacity: 1; transform: none; }
    .demo-sg-card { opacity: 1; transform: none; }
    .demo-rtl-card { opacity: 1; transform: none; }
    .demo-review-tools { opacity: 1; transform: none; }
    .demo-asm-item { opacity: 1; transform: none; }
    .demo-asm-center { opacity: 1; transform: none; }
    .demo-waveform-bars span, .demo-eq-bars span { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   GLOBAL CINEMATIC ANIMATION SYSTEM — All Pages
   ═══════════════════════════════════════════════════════ */

/* ── Universal Scroll Reveal ── */
.cin-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-reveal.cin-visible {
    opacity: 1;
    transform: translateY(0);
}
.cin-reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-reveal-left.cin-visible {
    opacity: 1;
    transform: translateX(0);
}
.cin-reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-reveal-right.cin-visible {
    opacity: 1;
    transform: translateX(0);
}
.cin-reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-reveal-scale.cin-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delays */
.cin-stagger-1 { transition-delay: 0.1s; }
.cin-stagger-2 { transition-delay: 0.2s; }
.cin-stagger-3 { transition-delay: 0.3s; }
.cin-stagger-4 { transition-delay: 0.4s; }
.cin-stagger-5 { transition-delay: 0.5s; }
.cin-stagger-6 { transition-delay: 0.6s; }
.cin-stagger-7 { transition-delay: 0.7s; }
.cin-stagger-8 { transition-delay: 0.8s; }

/* ── Page-Level Golden Glow Background ── */
.page-golden-glow {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(184,135,46,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Golden Section Dividers (all pages) ── */
.cin-divider {
    width: 100%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(212,136,42,0.3) 0%, transparent 70%);
    border: none;
    margin: 0;
}

/* ── Page Hero Cinematic ── */
.page-hero {
    position: relative;
    overflow: hidden;
}
.page-hero h1 {
    opacity: 0;
    transform: translateY(30px);
    animation: cin-hero-title 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.page-hero p,
.page-hero .subtitle {
    opacity: 0;
    transform: translateY(20px);
    animation: cin-hero-subtitle 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}
@keyframes cin-hero-title {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes cin-hero-subtitle {
    to { opacity: 1; transform: translateY(0); }
}

/* ── Universal Card Hover (subtle lift, NO glow/border) ── */
.cin-card-hover {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}
.cin-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════
   PRICING PAGE — Cinematic Enhancements
   ══════════════════════════════════════ */

/* Pricing card entrance */
.pricing-card {
    opacity: 0;
    transform: translateY(30px);
}
.pricing-card.cin-visible {
    opacity: 1;
    transform: translateY(0);
}
.pricing-card.cin-visible:hover {
    transform: translateY(-4px);
}

/* Pricing toggle animation */
.pricing-toggle {
    position: relative;
}
.pricing-toggle .toggle-slider {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ══════════════════════════════════════
   AUTH PAGES — Login/Signup Enhancements
   ══════════════════════════════════════ */

/* Auth card animated golden border sweep */
.auth-card {
    position: relative;
    overflow: hidden;
}
.auth-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #B8972E, #D4882A, transparent);
    animation: cin-auth-border-sweep 3s ease-in-out infinite;
}
@keyframes cin-auth-border-sweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: -100%; }
}

/* Auth card entrance */
.auth-card {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
@keyframes cin-auth-entrance {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Form input golden focus glow */
.auth-card input:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: #B8972E !important;
    box-shadow: 0 0 0 3px rgba(184,135,46,0.15), 0 0 20px rgba(184,135,46,0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ══════════════════════════════════════
   AUTH PAGES — Split-Screen Layout
   ══════════════════════════════════════ */
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: stretch;
    padding: 0;
}

/* Left panel — form */
.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl) var(--space-xl);
    background: var(--bg-primary);
}

/* Right panel — visual content */
.auth-visual-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    background: var(--bg-card);
    min-height: 100vh;
    overflow: hidden;
}

/* Headline on visual panel */
.auth-visual-headline {
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-ivory);
    text-align: center;
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}
.auth-visual-sub {
    font-size: var(--text-base);
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: var(--space-2xl);
    line-height: 1.6;
}

/* Image in visual panel */
.auth-visual-img {
    width: 90%;
    max-width: 560px;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(184,135,46,0.08);
    object-fit: cover;
    aspect-ratio: 16/9;
}

/* Subtle golden glow behind image */
.auth-visual-panel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(184,135,46,0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.auth-visual-headline,
.auth-visual-sub,
.auth-visual-img {
    position: relative;
    z-index: 1;
}

/* Override card styles in split layout */
.auth-split .auth-card {
    max-width: 400px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    animation: none;
    opacity: 1;
    transform: none;
}
.auth-split .auth-sun-bg {
    display: none;
}
.auth-split .auth-card::after {
    display: none;
}

/* Balanced spacing inside split auth */
.auth-split .auth-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.auth-split .auth-header .logo {
    margin-bottom: var(--space-sm);
}
.auth-split .auth-header h1 {
    font-size: var(--text-2xl);
    margin-bottom: 2px;
}
.auth-split .auth-header p {
    font-size: var(--text-xs);
}
.auth-split .form-group {
    margin-bottom: var(--space-lg);
}
.auth-split .form-input {
    padding: 0.85rem var(--space-md);
    font-size: var(--text-sm);
}
.auth-split .form-label {
    margin-bottom: 4px;
}
.auth-split .form-divider {
    margin: var(--space-lg) 0;
}
.auth-split .auth-footer {
    margin-top: var(--space-lg);
}
.auth-split .auth-trust {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
}
.auth-split .auth-trust p {
    font-size: 11px;
    margin-bottom: 2px;
}
.auth-split .forgot-password {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: var(--text-xs);
}
.auth-split .btn-block {
    padding: 0.85rem;
}
.auth-split .btn-google {
    padding: 0.8rem;
    font-size: var(--text-sm);
}

/* Stagger entrance for form elements */
.auth-split .auth-header {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.auth-split .btn-google {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.auth-split .form-divider {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.auth-split .form-group:nth-child(1) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.auth-split .form-group:nth-child(2) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
.auth-split .form-group:nth-child(3) {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.auth-split .btn-block {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}
.auth-split .auth-footer,
.auth-split .auth-trust {
    animation: cin-auth-entrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}

/* Visual panel entrance */
.auth-visual-headline {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.auth-visual-sub {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.auth-visual-img {
    animation: cin-auth-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Enhanced form inputs in split layout */
.auth-split .form-input {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(245,240,232,0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.auth-split .form-input:focus {
    background: rgba(255,255,255,0.05);
}
.auth-split .form-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

/* Responsive — split auth */
@media (max-width: 768px) {
    .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-visual-panel {
        order: -1;
        padding: var(--space-2xl) var(--space-xl);
    }
    .auth-visual-headline {
        font-size: var(--text-xl);
    }
    .auth-visual-img {
        width: 100%;
    }
    .auth-form-panel {
        padding: var(--space-xl) var(--space-lg);
    }
    .auth-split .auth-card {
        padding: var(--space-xl) 0;
    }
}

/* Reduced motion — split auth */
@media (prefers-reduced-motion: reduce) {
    .auth-split .auth-header,
    .auth-split .btn-google,
    .auth-split .form-divider,
    .auth-split .form-group,
    .auth-split .btn-block,
    .auth-split .auth-footer,
    .auth-split .auth-trust,
    .auth-visual-headline,
    .auth-visual-sub,
    .auth-visual-img {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ══════════════════════════════════════
   EXAMPLES PAGE — Enhancements
   ══════════════════════════════════════ */

/* Example card play overlay */
.example-card {
    position: relative;
    overflow: hidden;
}
.example-card .card-visual,
.example-card .example-card-video {
    position: relative;
    overflow: hidden;
}
.example-card .card-visual::after,
.example-card .example-card-video::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    transform: translate(-50%, -50%) scale(0.8);
    background: rgba(184,135,46,0.9);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
    z-index: 2;
}
.example-card:hover .card-visual::after,
.example-card:hover .example-card-video::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.example-card .card-visual img,
.example-card .example-card-video img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.example-card:hover .card-visual img,
.example-card:hover .example-card-video img {
    transform: scale(1.08);
}

/* ══════════════════════════════════════
   BLOG PAGE — Enhancements
   ══════════════════════════════════════ */

/* Blog card image hover zoom */
.blog-card {
    overflow: hidden;
}
.blog-card img,
.blog-card .blog-card-image {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover img,
.blog-card:hover .blog-card-image {
    transform: scale(1.06);
}

/* Blog card golden date accent */
.blog-card .blog-date,
.blog-card .date {
    color: #B8972E;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ══════════════════════════════════════
   RESOURCES PAGE — Enhancements
   ══════════════════════════════════════ */

/* Resource card golden accent line on hover */
.resource-card {
    position: relative;
    overflow: hidden;
}
.resource-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px; height: 0;
    background: linear-gradient(180deg, #B8972E, #D4882A);
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.resource-card:hover::before {
    height: 100%;
}

/* ══════════════════════════════════════
   COMMUNITY PAGE — Enhancements
   ══════════════════════════════════════ */

/* Channel card transitions */
.channel-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}
.channel-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

/* Testimonial card golden quote accent */
.testimonial-card {
    position: relative;
    overflow: hidden;
}
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -10px; left: 16px;
    font-size: 80px;
    font-family: Georgia, serif;
    color: rgba(184,135,46,0.15);
    line-height: 1;
    pointer-events: none;
}

/* ══════════════════════════════════════
   ABOUT PAGE — Enhancements
   ══════════════════════════════════════ */

/* About stat counter animation */
.about-stat-number,
.stat-number {
    background: linear-gradient(135deg, #B8972E, #D4882A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ══════════════════════════════════════
   CONTACT PAGE — Redesign
   ══════════════════════════════════════ */

/* Split Layout */
.contact-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Left: Form side */
.contact-split-form {
    padding: var(--space-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    position: relative;
    overflow: hidden;
}
.contact-split-form::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, #B8972E, #D4882A, transparent);
    animation: cin-auth-border-sweep 3s ease-in-out infinite;
}

.contact-form-heading {
    font-size: var(--text-2xl);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.contact-form-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

/* Right: Visual side */
.contact-split-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
}
.contact-visual-img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(184,135,46,0.08);
    object-fit: cover;
    aspect-ratio: 4/3;
}
.contact-visual-info {
    display: flex;
    justify-content: center;
}
.contact-response-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: rgba(184,135,46,0.06);
    border: 1px solid rgba(184,135,46,0.12);
    border-radius: 100px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* Contact Method Cards */
.contact-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    text-align: center;
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.contact-card:hover {
    border-color: rgba(184,135,46,0.25);
    transform: translateY(-4px);
}
.contact-card-icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-lg);
    display: flex; align-items: center; justify-content: center;
    background: rgba(184,135,46,0.08);
    border: 1px solid rgba(184,135,46,0.15);
    border-radius: var(--radius-lg);
}
.contact-card h3 {
    font-size: var(--text-lg);
    font-weight: 500;
    margin-bottom: var(--space-sm);
}
.contact-card-link {
    color: var(--accent);
    font-weight: 500;
    font-size: var(--text-base);
    display: block;
    margin-bottom: var(--space-sm);
    transition: color 0.2s;
}
.contact-card-link:hover {
    color: #d4a73a;
}
.contact-card-desc {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.6;
}
.contact-card-highlight {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-lg);
    display: block;
    margin-bottom: var(--space-sm);
}

/* Image Divider */
.contact-image-divider {
    position: relative;
    width: 100%;
    max-height: 280px;
    overflow: hidden;
}
.contact-divider-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    filter: brightness(0.5);
}
.contact-divider-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, rgba(11,11,15,0.4), rgba(11,11,15,0.7));
}
.contact-divider-quote {
    font-size: var(--text-xl);
    font-weight: 300;
    font-style: italic;
    color: rgba(245,240,232,0.7);
    letter-spacing: 0.03em;
    text-align: center;
    max-width: 500px;
    padding: 0 var(--space-xl);
}

/* Success State */
.contact-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    gap: var(--space-lg);
}
.contact-success-icon svg {
    animation: cin-success-pulse 2s ease-in-out infinite;
}
.contact-success-check {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: cin-success-draw 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}
@keyframes cin-success-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes cin-success-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(184,135,46,0)); }
    50% { filter: drop-shadow(0 0 12px rgba(184,135,46,0.3)); }
}
.contact-success-title {
    font-size: var(--text-2xl);
    font-weight: 600;
}
.contact-success-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    max-width: 320px;
}

/* Input overflow */
.contact-split-form .form-input {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Two-column contact cards */
.contact-cards-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    max-width: 800px;
    margin: 0 auto;
}

/* Inline error */
.contact-form-error {
    color: var(--error);
    font-size: var(--text-sm);
    text-align: center;
    margin-top: var(--space-md);
    display: none;
}

/* ══════════════════════════════════════
   SECTION TITLE — Golden Underline
   ══════════════════════════════════════ */
.cin-section-title {
    position: relative;
    display: inline-block;
}
.cin-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #B8972E, #D4882A, #B8972E, transparent);
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cin-section-title.cin-visible::after {
    width: 80px;
}

/* ══════════════════════════════════════
   FLOATING SUN ORBS — ambient background
   ══════════════════════════════════════ */
.cin-sun-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,135,46,0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: cin-orb-drift 12s ease-in-out infinite alternate;
}
.cin-sun-orb-1 {
    width: 300px; height: 300px;
    top: 10%; right: -80px;
    animation-duration: 14s;
}
.cin-sun-orb-2 {
    width: 200px; height: 200px;
    bottom: 20%; left: -60px;
    animation-duration: 10s;
    animation-delay: -4s;
}
@keyframes cin-orb-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(20px, -30px); }
}

/* ══════════════════════════════════════
   RESPONSIVE — Global Cinematic
   ══════════════════════════════════════ */
@media (max-width: 768px) {
    .page-golden-glow {
        width: 400px;
        height: 400px;
    }
    .cin-sun-orb-1 { width: 150px; height: 150px; }
    .cin-sun-orb-2 { width: 100px; height: 100px; }
    .cin-section-title.cin-visible::after { width: 50px; }
}

/* ══════════════════════════════════════
   REDUCED MOTION — Global Cinematic
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .cin-reveal,
    .cin-reveal-left,
    .cin-reveal-right,
    .cin-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cin-sun-orb { animation: none; }
    .page-hero h1,
    .page-hero p,
    .page-hero .subtitle { animation: none; opacity: 1; transform: none; }
    .auth-card::after { animation: none; }
    .pricing-card { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════
   DASHBOARD — Cinematic Card System
   ═══════════════════════════════════════════════════════ */

/* Ambient glow behind dashboard content */
.dash-ambient-glow {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-30%);
    width: 900px;
    height: 600px;
    background: radial-gradient(ellipse at center, rgba(184,135,46,0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Welcome entrance */
.dash-cin-entrance {
    animation: dash-entrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes dash-entrance {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Card Grid — 2 cols for hero, 3 cols for rest ── */
.dash-grid-cin {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.dcard-create {
    grid-column: span 2;
}

/* ── Base Card ── */
.dcard {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: dcard-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dcard:nth-child(1) { animation-delay: 0.15s; }
.dcard:nth-child(2) { animation-delay: 0.25s; }
.dcard:nth-child(3) { animation-delay: 0.3s; }
.dcard:nth-child(4) { animation-delay: 0.35s; }
.dcard:nth-child(5) { animation-delay: 0.4s; }
.dcard:nth-child(6) { animation-delay: 0.45s; }
.dcard:nth-child(7) { animation-delay: 0.5s; }
.dcard:nth-child(8) { animation-delay: 0.55s; }

@keyframes dcard-enter {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.dcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(184,151,46,0.15);
    border-color: rgba(184,151,46,0.25);
}

.dcard-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
}

.dcard-info h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.dcard-info p {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* ══════════════════════════════════════
   CREATE CARD — Helion Orb + Prompt
   ══════════════════════════════════════ */
.dcard-create {
    background: linear-gradient(135deg, rgba(184,135,46,0.06) 0%, var(--bg-card) 40%, var(--bg-card) 100%);
}
.dcard-create .dcard-visual {
    flex-direction: row;
    gap: 16px;
    height: auto;
    min-height: 60px;
    overflow: visible;
    justify-content: flex-start;
    padding: 0 4px;
}

/* Helion orb with glow + ring */
.dc-orb {
    position: relative;
    flex-shrink: 0;
}
.dc-orb svg {
    display: block;
    filter: drop-shadow(0 0 12px rgba(184,135,46,0.4));
}
.dc-orb-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(184,151,46,0.25);
    animation: dc-ring-spin 8s linear infinite;
}
@keyframes dc-ring-spin {
    to { transform: rotate(360deg); }
}
.dc-orb-glow {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184,135,46,0.15) 0%, transparent 70%);
    animation: dc-orb-pulse 3s ease-in-out infinite;
}
@keyframes dc-orb-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Typing prompt */
.dc-prompt {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dc-prompt-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dc-prompt-bar {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    min-height: 38px;
    display: flex;
    align-items: center;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.dc-prompt-bar:has(.dc-typed-text:not(:empty)),
.dc-prompt-bar.typing {
    border-color: rgba(184,135,46,0.2);
    box-shadow: 0 0 16px rgba(184,135,46,0.06);
}
.dc-typed-text {
    color: rgba(255,255,255,0.7);
}
.dc-cursor {
    color: var(--accent);
    animation: dc-blink 1s step-end infinite;
    font-weight: 300;
}
@keyframes dc-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ══════════════════════════════════════
   VIDEOS CARD — Mini Video Stack
   ══════════════════════════════════════ */
.dcard-videos .dcard-visual {
    flex-direction: column;
    gap: 6px;
}
.dc-vid-stack {
    display: flex;
    gap: 5px;
    align-items: center;
}
.dc-vid {
    width: 56px;
    height: 34px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dc-vid.shown {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dc-vid-thumb {
    position: absolute;
    inset: 0;
    border-radius: 4px;
}
.dc-vid-1 .dc-vid-thumb {
    background: linear-gradient(135deg, #2a1a10 0%, #3a2818 50%, #1a1510 100%);
}
.dc-vid-2 .dc-vid-thumb {
    background: linear-gradient(135deg, #0d1828 0%, #1a2a3a 50%, #0d2030 100%);
}
.dc-vid-3 .dc-vid-thumb {
    background: linear-gradient(135deg, #0d2818 0%, #1a3828 50%, #0d2018 100%);
}
.dc-vid-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
}
.dc-vid.shown .dc-vid-play { opacity: 0.8; }
.dc-vid-play svg { margin-left: 1px; }
.dc-vid-dur {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-size: 0.45rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 0 3px;
    border-radius: 2px;
    line-height: 1.4;
    opacity: 0;
    transition: opacity 0.3s ease 0.4s;
}
.dc-vid.shown .dc-vid-dur { opacity: 1; }
.dc-video-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.dc-count-num {
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #B8972E, #D4882A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-variant-numeric: tabular-nums;
}
.dc-count-label {
    font-size: 0.6rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════
   SEO CARD — Search Bar + Tags
   ══════════════════════════════════════ */
.dcard-seo .dcard-visual {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.dc-search-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 5px 8px;
    font-size: 0.68rem;
    color: rgba(255,255,255,0.4);
    overflow: hidden;
}
.dc-search-text {
    opacity: 0;
    animation: dc-search-type 0.6s ease 1s forwards;
}
@keyframes dc-search-type {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}
/* Subtle scan line on search bar */
.dc-search-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(184,135,46,0.06), transparent);
    animation: dc-scan 3s ease-in-out 1.5s 1 forwards;
}
@keyframes dc-scan {
    from { left: -100%; }
    to { left: 100%; }
}
.dc-search-bar {
    position: relative;
    overflow: hidden;
}
.dc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.dc-tag {
    font-size: 0.55rem;
    padding: 2px 6px;
    border-radius: 20px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px) scale(0.9);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-tag.pop {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dc-tag-1 { background: rgba(184,135,46,0.15); color: #B8972E; transition-delay: 1.2s; }
.dc-tag-2 { background: rgba(100,140,200,0.15); color: #8AB4F8; transition-delay: 1.4s; }
.dc-tag-3 { background: rgba(80,200,120,0.15); color: #50C878; transition-delay: 1.6s; }
.dc-tag-4 { background: rgba(200,100,150,0.15); color: #E8829B; transition-delay: 1.8s; }

/* ══════════════════════════════════════
   THUMBNAIL CARD — Real Image Grid
   ══════════════════════════════════════ */
.dcard-thumb .dcard-visual {
    flex-direction: column;
    gap: 4px;
}
.dc-thumb-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 75%;
    max-height: 85px;
}
.dc-thumb {
    aspect-ratio: 16/9;
    border-radius: 3px;
    overflow: hidden;
    opacity: 0;
    transform: scale(0.85);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}
.dc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.dc-thumb.drawn {
    opacity: 1;
    transform: scale(1);
}
.dc-thumb-1 { transition-delay: 0.4s; }
.dc-thumb-2 { transition-delay: 0.55s; }
.dc-thumb-3 { transition-delay: 0.7s; }
.dc-thumb-4 { transition-delay: 0.85s; }

.dc-thumb-badge {
    font-size: 0.55rem;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0;
    transition: opacity 0.5s ease 1.1s;
}
.dc-thumb-badge.shown { opacity: 1; }

/* ══════════════════════════════════════
   REPURPOSE CARD — Morphing Frame
   ══════════════════════════════════════ */
.dcard-repurpose .dcard-visual {
    flex-direction: column;
    gap: 6px;
}
.dc-morph-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.dc-morph-frame {
    width: 56px;
    height: 34px;
    border: 2px solid var(--accent);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 16px rgba(184,135,46,0.15);
}
.dc-morph-frame.square {
    width: 40px;
    height: 40px;
    border-radius: 4px;
}
.dc-morph-frame.portrait {
    width: 28px;
    height: 50px;
    border-radius: 4px;
}
.dc-platforms {
    display: flex;
    gap: 12px;
}
.dc-plat {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-tertiary);
    transition: color 0.4s ease, transform 0.4s ease;
    letter-spacing: 0.05em;
}
.dc-plat.active {
    color: var(--accent);
    transform: scale(1.15);
}

/* ══════════════════════════════════════
   SCRIPT GENERATOR CARD — Writing Lines
   ══════════════════════════════════════ */
.dcard-script .dcard-visual {
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    padding: 4px 8px;
}
.dc-script-lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.dc-sline {
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateX(-12px);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.dc-sline.written {
    opacity: 1;
    transform: translateX(0);
}
.dc-sline-marker {
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}
.dc-sline.written .dc-sline-marker { opacity: 1; }
.dc-sline-text {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background: rgba(255,255,255,0.1);
}
.dc-sline.written .dc-sline-text {
    background: rgba(255,255,255,0.15);
}
.dc-sline-short { width: 60%; }
.dc-sline-med { width: 80%; }

/* Alternate marker colors for variety */
.dc-sline-2 .dc-sline-marker { background: #8AB4F8; }
.dc-sline-3 .dc-sline-marker { background: #50C878; }
.dc-sline-4 .dc-sline-marker { background: #E8829B; }

/* ══════════════════════════════════════
   HOOK GENERATOR CARD — Attention Bar
   ══════════════════════════════════════ */
.dcard-hook .dcard-visual {
    flex-direction: column;
    gap: 8px;
}
.dc-hook-anim {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    position: relative;
}
.dc-hook-bar {
    width: 85%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}
.dc-hook-zone {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30%;
    background: rgba(184,135,46,0.15);
    border-radius: 3px;
    transition: background 0.4s ease;
}
.dc-hook-zone.lit {
    background: rgba(184,135,46,0.35);
    box-shadow: 0 0 12px rgba(184,135,46,0.2);
}
.dc-hook-playhead {
    position: absolute;
    top: -2px;
    left: 0;
    width: 3px;
    height: 10px;
    background: var(--accent);
    border-radius: 2px;
    transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 6px rgba(184,135,46,0.5);
}
.dc-hook-playhead.sweep {
    left: 28%;
}
.dc-hook-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translateY(4px);
    transition: all 0.4s ease;
}
.dc-hook-label.shown {
    opacity: 1;
    transform: translateY(0);
}
.dc-hook-sparks {
    position: absolute;
    top: -4px;
    left: 14%;
    width: 20px;
    height: 20px;
}
.dc-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: all 0.5s ease;
}
.dc-spark.fire { opacity: 1; }
.dc-spark-1 { top: 0; left: 4px; }
.dc-spark-1.fire { transform: translate(-4px, -8px); opacity: 0; transition: all 0.6s ease; }
.dc-spark-2 { top: 2px; left: 10px; }
.dc-spark-2.fire { transform: translate(6px, -10px); opacity: 0; transition: all 0.7s ease 0.1s; }
.dc-spark-3 { top: 0; left: 16px; }
.dc-spark-3.fire { transform: translate(2px, -12px); opacity: 0; transition: all 0.5s ease 0.15s; }

/* ══════════════════════════════════════
   IDEAS GENERATOR CARD — Constellation
   ══════════════════════════════════════ */
.dcard-ideas .dcard-visual {
    /* uses base height: 76px */
}
.dc-ideas-constellation {
    position: relative;
    width: 85px;
    height: 60px;
}
.dc-idea-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.dc-idea-lines line {
    transition: opacity 0.6s ease;
}
.dc-idea-node {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(184,135,46,0.3);
    border: 1px solid rgba(184,135,46,0.2);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-idea-node.lit {
    opacity: 1;
    transform: scale(1);
    background: rgba(184,135,46,0.5);
    border-color: rgba(184,135,46,0.4);
    box-shadow: 0 0 8px rgba(184,135,46,0.3);
}
.dc-idea-1 { top: 6px; left: 46px; }     /* top center */
.dc-idea-2 { top: 28px; left: 14px; }     /* left */
.dc-idea-3 { top: 28px; left: 76px; }     /* right */
.dc-idea-4 { top: 52px; left: 30px; }     /* bottom-left */
.dc-idea-5 { top: 52px; left: 60px; }     /* bottom-right */

.dc-idea-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dc-idea-center.glow {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 0 6px rgba(184,135,46,0.4));
}

/* ══════════════════════════════════════
   PLAN STATUS CARD — Cinematic
   ══════════════════════════════════════ */
.dash-plan-cin {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}
.dash-plan-orb {
    flex-shrink: 0;
    animation: dc-orb-pulse 4s ease-in-out infinite;
}
.dash-plan-orb svg {
    display: block;
}
.dash-plan-bar {
    margin-top: 8px;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}
.dash-plan-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #B8972E, #D4882A);
    border-radius: 2px;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Dashboard Responsive ── */
@media (max-width: 768px) {
    .dash-grid-cin {
        grid-template-columns: 1fr 1fr;
    }
    .dcard-create {
        grid-column: span 2;
    }
    .dcard-create .dcard-visual {
        flex-direction: column;
        gap: 12px;
    }
}
@media (max-width: 480px) {
    .dash-grid-cin {
        grid-template-columns: 1fr;
    }
    .dcard-create {
        grid-column: span 1;
    }
}

/* ── Dashboard Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
    .dcard { animation: none; opacity: 1; transform: none; }
    .dash-cin-entrance { animation: none; opacity: 1; transform: none; }
    .dc-orb-ring { animation: none; }
    .dc-orb-glow { animation: none; }
    .dc-cursor { animation: none; }
    .dc-vid { opacity: 1; transform: none; }
    .dc-vid-play { opacity: 0.8; }
    .dc-vid-dur { opacity: 1; }
    .dc-tag { opacity: 1; transform: none; }
    .dc-thumb { opacity: 1; transform: none; }
    .dc-search-text { opacity: 1; animation: none; }
    .dc-thumb-badge { opacity: 1; }
    .dc-sline { opacity: 1; transform: none; }
    .dc-sline-marker { opacity: 1; }
    .dc-hook-zone { background: rgba(184,135,46,0.35); }
    .dc-hook-playhead { left: 28%; }
    .dc-hook-label { opacity: 1; transform: none; }
    .dc-idea-node { opacity: 1; transform: none; }
    .dc-idea-center { opacity: 1; transform: translate(-50%,-50%) scale(1); }
    .dc-idea-lines line { opacity: 0.4 !important; }
}

/* ====================================================================
   ACCOUNT SETTINGS PAGE
   ==================================================================== */

/* Section Nav */
.acct-nav {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--color-black-border);
    margin-bottom: var(--space-lg);
    padding-bottom: 0;
}
.acct-nav-item {
    padding: var(--space-sm) var(--space-md);
    color: var(--color-ivory-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    margin-bottom: -1px;
}
.acct-nav-item:hover { color: var(--color-ivory); }
.acct-nav-item.active {
    color: var(--color-gold);
    border-bottom-color: var(--color-gold);
}

/* Sections */
.acct-section { max-width: 720px; }
.acct-section.hidden { display: none; }

/* Cards */
.acct-card {
    background: var(--color-black-card);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}
.acct-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ivory);
    margin: 0 0 var(--space-md) 0;
}
.acct-card-desc {
    color: var(--color-ivory-muted);
    font-size: 0.85rem;
    margin: 0 0 var(--space-md) 0;
    line-height: 1.5;
}

/* Fields */
.acct-field {
    margin-bottom: var(--space-md);
}
.acct-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-ivory-muted);
    margin-bottom: var(--space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.acct-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-black-deep);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--color-ivory);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.acct-input:focus {
    outline: none;
    border-color: var(--color-gold);
}
.acct-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.acct-field-row {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}
.acct-field-row .acct-input { flex: 1; }
.acct-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-ivory-faint);
    margin-top: 4px;
}
.acct-value {
    color: var(--color-ivory);
    font-size: 0.9rem;
}

/* Messages */
.acct-msg {
    display: inline-block;
    font-size: 0.8rem;
    margin-top: var(--space-xs);
    margin-left: var(--space-sm);
}
.acct-msg.success { color: #4ade80; }
.acct-msg.error { color: #f87171; }

/* Selects */
.acct-select {
    width: 100%;
    padding: 10px 14px;
    background: var(--color-black-deep);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-sm, 8px);
    color: var(--color-ivory);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F5F0E8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.acct-select:focus {
    outline: none;
    border-color: var(--color-gold);
}

/* Defaults Grid */
.acct-defaults-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.acct-group-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-gold);
    margin: var(--space-lg) 0 var(--space-sm) 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.acct-group-title:first-of-type { margin-top: 0; }

/* Plan Overview */
.acct-plan-badge-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.acct-plan-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--color-gold);
    color: var(--color-black-deep);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
}
.acct-plan-cycle {
    font-size: 0.8rem;
    color: var(--color-ivory-muted);
}
.acct-plan-limits {
    color: var(--color-ivory-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-md);
}
.acct-plan-renewal {
    color: var(--color-ivory-muted);
    font-size: 0.85rem;
    margin-top: var(--space-sm);
}
.acct-plan-notice {
    color: var(--color-gold);
    font-size: 0.85rem;
    margin-top: var(--space-xs);
    padding: 8px 12px;
    background: var(--color-gold-faint);
    border-radius: var(--radius-sm, 8px);
}
.acct-plan-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* Usage Bar */
.acct-usage { margin-bottom: var(--space-sm); }
.acct-usage-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-ivory-muted);
    margin-bottom: 6px;
}
.acct-usage-bar {
    height: 8px;
    background: var(--color-black-deep);
    border-radius: 100px;
    overflow: hidden;
}
.acct-usage-fill {
    height: 100%;
    background: var(--color-gold);
    border-radius: 100px;
    transition: width 0.8s ease;
}

/* Plan Grid */
.acct-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.acct-plan-card-option {
    background: var(--color-black-deep);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-md);
    transition: border-color 0.2s;
}
.acct-plan-card-option.current {
    border-color: var(--color-gold);
}
.acct-plan-card-option:hover { border-color: var(--color-gold-dim); }
.acct-plan-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-sm);
}
.acct-plan-card-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ivory);
    margin: 0;
}
.acct-plan-price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-gold);
}
.acct-plan-price small {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-ivory-muted);
}
.acct-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-md) 0;
}
.acct-plan-features li {
    font-size: 0.8rem;
    color: var(--color-ivory-muted);
    padding: 4px 0;
}
.acct-plan-features li::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--color-gold);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}

/* Credit FAQ */
.acct-credit-faq {
    background: var(--color-black-deep);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-sm, 8px);
    padding: var(--space-md);
}
.acct-credit-faq h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-ivory);
    margin: 0 0 var(--space-sm) 0;
}
.acct-faq-item {
    font-size: 0.8rem;
    color: var(--color-ivory-muted);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}
.acct-faq-item:last-child { margin-bottom: 0; }
.acct-faq-item strong { color: var(--color-ivory); }

/* Danger Zone */
.acct-card-danger { border-color: #dc2626; }
.acct-card-danger .acct-card-title { color: #f87171; }
.acct-danger-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
}
.acct-danger-action p {
    font-size: 0.8rem;
    color: var(--color-ivory-muted);
    margin: 4px 0 0;
}
.btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
}
.btn-danger:hover { background: #b91c1c; }
.btn-muted {
    opacity: 0.6;
}
.btn-muted:hover { opacity: 1; }

/* Modal */
.acct-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(4px);
}
.acct-modal {
    background: var(--color-black-card);
    border: 1px solid var(--color-black-border);
    border-radius: var(--radius-md, 12px);
    padding: var(--space-lg);
    max-width: 480px;
    width: 90%;
}
.acct-modal h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ivory);
    margin: 0 0 var(--space-sm) 0;
}
.acct-modal p {
    font-size: 0.85rem;
    color: var(--color-ivory-muted);
    line-height: 1.5;
    margin: 0 0 var(--space-sm) 0;
}
.acct-modal-note {
    font-size: 0.8rem !important;
    color: var(--color-gold) !important;
    font-style: italic;
}
.acct-modal-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-top: var(--space-md);
}

/* Responsive */
@media (max-width: 600px) {
    .acct-nav { overflow-x: auto; white-space: nowrap; }
    .acct-defaults-grid { grid-template-columns: 1fr; }
    .acct-plan-grid { grid-template-columns: 1fr; }
    .acct-danger-action { flex-direction: column; align-items: flex-start; }
    .acct-field-row { flex-direction: column; }
}