/* ===== 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:500px;margin:0 0 0;line-height:1.7;
    max-height:4.8em;overflow:hidden;position:relative;
    transition:max-height 0.5s ease;
}
.hero-subtitle.expanded{max-height:600px}
.hero-subtitle::after{
    content:'';position:absolute;bottom:0;left:0;right:0;height:2em;
    background:linear-gradient(transparent,var(--bg));
    pointer-events:none;transition:opacity 0.3s ease;
}
.hero-subtitle.expanded::after{opacity:0}
.hero-read-more{
    display:inline-block;margin:var(--space-xs) 0 var(--space-md);
    font-size:var(--text-sm);color:var(--accent);cursor:pointer;
    border:none;background:none;padding:0;font-family:inherit;
    opacity:0.8;transition:opacity 0.2s ease;
}
.hero-read-more:hover{opacity:1}
/* 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 */

/* ===== 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}


/* ===== 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)}
}


/* ====================================================================
   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);
}