:root{
    --bg:#071027;
    --card:#062333;
    --accent:#ff6b35;
    --accent-2:#ffd9c8;
    --muted:#9aa4b2;
    --glass: rgba(255,255,255,0.06);
    --max-width:1100px;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    background:linear-gradient(180deg,#071027 0%, #021428 100%);
    color:#e6eef6;
    -webkit-font-smoothing:antialiased;
}

h1{font-size:2.25rem;margin:0}
h2{font-size:1.125rem;margin:.25rem 0 1rem}

.container{max-width:var(--max-width);margin:0 auto;padding:0 18px}

/* Header */
.site-header{position:fixed;left:0;right:0;top:0;height:64px;background:linear-gradient(180deg, rgba(2,8,18,0.6), rgba(2,8,18,0.4));backdrop-filter:blur(6px);z-index:1100;display:flex;align-items:center}
.site-header .header-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.site-header .brand{color:#fff;font-weight:700}
.header-actions{display:flex;gap:10px;align-items:center}
body{padding-top:0} /* reset if previously added */

/* Utility buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--accent);color:#0b1220;font-weight:700}
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff}
.btn.large{padding:12px 20px;font-size:1rem}

.content{max-width:900px;margin:36px auto;padding:0 18px;color:#cfe3f4;text-align:center}


.video-container{display:flex;justify-content:center;margin:20px 0}

/* Force vertical 9:16 aspect ratio for hero video and make it responsive */
.video-container{display:flex;justify-content:center;margin:20px 0}
.video-container .hero-video,
.video-container video{ /* apply to class or generic video */
        aspect-ratio: 9 / 16;
        width: auto;
        height: min(80vh, 840px); /* tall but constrained */
        max-width: calc(min(80vh, 840px) * (9/16));
        border-radius: 10px;
        object-fit: cover;
}

@media (max-width:720px){
    .video-container .hero-video,
    .video-container video{
        height: min(70vh, 720px);
        max-width: calc(min(70vh, 720px) * (9/16));
    }
}

.cta-container {
    text-align: center;
    margin: 20px 0;
}

.cta-button {
    background-color: #28a745;
    color: white;
    padding: 15px 30px;
    font-size: 1.2em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.cta-button:hover {
    background-color: #218838;
}

/* Hero / top-seller styles */
.hero{position:relative;background:linear-gradient(180deg,#071027 0%, #071b2a 100%);padding:28px 0}
.video-wrapper{max-width:900px;margin:0 auto;position:relative;border-radius:14px;overflow:hidden}
.hero-video{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:9/16}
.hero-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:20px;background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));}
.hero-title{font-size:2rem;margin:0 0 8px;font-weight:800}
.hero-sub{color:#e6edf3;margin:0 0 16px}
.hero-actions{display:flex;gap:12px;align-items:center}
.btn.large{padding:14px 20px;font-size:1.05rem;border-radius:10px}
.play-btn{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.18);color:#fff;font-size:28px;display:inline-flex;align-items:center;justify-content:center}

/* Volume toggle styles */
.btn.secondary{background:transparent;border:1px solid rgba(255,255,255,0.08);color:#fff;padding:8px 10px;border-radius:10px}
.btn.secondary i{font-size:18px}
.btn.secondary[aria-pressed="true"]{background:rgba(255,255,255,0.06)}

/* Featured testimonial */
.testimonial-featured{background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));padding:20px;border-radius:12px;border-left:6px solid var(--accent);box-shadow:0 8px 24px rgba(2,6,23,0.6);color:#eaf6ff}
.testimonial-featured blockquote{margin:0;padding:0}
.testimonial-featured blockquote p{font-size:1.05rem;line-height:1.5;margin:0}
.testimonial-featured footer{color:var(--muted);font-size:.9rem;margin-top:8px}
.play-hint .btn{font-weight:600}
.play-hint-header{font-size:0.9rem;padding:8px 10px}
.play-hint-header{display:inline-flex;align-items:center}
.play-hint-header{white-space:nowrap}

/* Author / bio styles */
.author-bio{margin-top:40px}
.author-inner{display:flex;align-items:center;gap:18px}

.author-photo{border-radius:12px;object-fit:cover;box-shadow:0 12px 30px rgba(2,6,23,0.6);border:4px solid rgba(255,255,255,0.03);width:var(--author-photo-size,170px);height:var(--author-photo-size,170px)}
.author-bio .social-link{color:var(--accent);font-weight:600;margin:0 6px;display:inline-flex;align-items:center;gap:8px}
.author-bio .social-link img{width:calc(var(--author-photo-size,170px) * 0.16);height:calc(var(--author-photo-size,170px) * 0.16);display:block}

/* Player card */
.player-card{max-width:920px;margin:0 auto;border-radius:12px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 14px 60px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
.player-card .hero-video{width:100%;height:auto;display:block}
.player-meta{padding:18px 20px;text-align:center}
.player-meta .hero-title{font-size:1.6rem;margin-bottom:6px}
.player-meta .hero-sub{margin-bottom:12px;color:var(--muted)}

/* utility for screen-reader-only text */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

@media (max-width:720px){
    .author-inner{flex-direction:column;text-align:center}
    :root{--author-photo-size:140px}
    .author-photo{width:var(--author-photo-size);height:var(--author-photo-size)}
}

/* Sticky seller bar */
.sticky-seller{position:fixed;left:0;right:0;bottom:18px;display:flex;justify-content:center;z-index:999;opacity:0;transform:translateY(20px);transition:all .28s ease-in-out}
.sticky-seller.visible{opacity:1;transform:translateY(0)}
.seller-inner{background:linear-gradient(90deg,#0b2033,#062333);padding:12px 18px;border-radius:999px;display:flex;align-items:center;gap:18px;box-shadow:0 12px 40px rgba(2,6,23,.6);color:#fff}
.seller-left{font-size:0.95rem}
.seller-sub{color:#9aa4b2;font-size:.85rem}
.seller-right{display:flex;gap:12px;align-items:center}
.price{color:#ffd9c8}

@media (max-width:720px){
    .hero-title{font-size:1.25rem}
    .play-btn{width:56px;height:56px}
    .seller-inner{padding:10px}
}

.footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}