/* ============================================
   短剧创作网站 - 独特深紫金配色方案
   Unique Design: Deep Purple + Gold Accent
   ============================================ */

/* CSS Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;color:#e8e0f0;background:#0d0a1a;line-height:1.8;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:#d4a853;text-decoration:none;transition:color .3s ease}
a:hover{color:#f0c96e}
ul,ol{list-style:none}
h1,h2,h3,h4,h5,h6{line-height:1.4;font-weight:700}
h1{font-size:2.2rem}
h2{font-size:1.8rem}
h3{font-size:1.4rem}
h4{font-size:1.2rem}
p{margin-bottom:1rem}

/* Layout Container */
.site-container{max-width:1280px;margin:0 auto;padding:0 1rem}

/* ============ HEADER ============ */
.site-header{background:linear-gradient(135deg,#12091f 0%,#1a0e2e 100%);border-bottom:2px solid #d4a85333;padding:.8rem 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.site-logo img{height:48px;width:auto}
.site-logo{display:flex;align-items:center;gap:.6rem}
.site-logo-text{font-size:1.3rem;font-weight:700;color:#d4a853;white-space:nowrap}

/* Navigation */
.main-nav{display:flex;align-items:center}
.nav-list{display:flex;gap:.2rem;flex-wrap:wrap}
.nav-list li a{display:block;padding:.5rem .8rem;border-radius:6px;font-size:.9rem;color:#c8bdd8;transition:all .3s}
.nav-list li a:hover,.nav-list li a.active{background:#d4a85322;color:#d4a853}
.nav-toggle{display:none;background:none;border:2px solid #d4a853;color:#d4a853;padding:.4rem .6rem;border-radius:6px;font-size:1.2rem;cursor:pointer}

/* ============ HERO ============ */
.hero-section{position:relative;overflow:hidden;min-height:420px;display:flex;align-items:center;justify-content:center;text-align:center}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.5)}
.hero-content{position:relative;z-index:2;padding:2rem 1rem}
.hero-content h1{font-size:2.4rem;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.6);margin-bottom:.8rem}
.hero-content p{font-size:1.1rem;color:#e0d8f0;max-width:700px;margin:0 auto 1.5rem}
.hero-cta{display:inline-block;padding:.8rem 2rem;background:linear-gradient(135deg,#d4a853,#b8862e);color:#0d0a1a;font-weight:700;border-radius:50px;font-size:1.05rem;transition:transform .3s,box-shadow .3s}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(212,168,83,.4);color:#0d0a1a}

/* ============ SECTIONS ============ */
.section-block{padding:3rem 0}
.section-block:nth-child(even){background:#110d20}
.section-title{text-align:center;margin-bottom:2rem;position:relative;padding-bottom:.8rem}
.section-title::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg,#d4a853,#b8862e);border-radius:2px}
.section-title h2{color:#f0e6d0;font-size:1.8rem}
.section-title p{color:#a89bc0;margin-top:.5rem;font-size:.95rem}

/* ============ CARDS GRID ============ */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}
.drama-card{background:#1a1230;border-radius:12px;overflow:hidden;transition:transform .3s,box-shadow .3s;border:1px solid #2a1f45}
.drama-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(100,60,180,.2)}
.drama-card figure{position:relative;overflow:hidden;aspect-ratio:4/3}
.drama-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.drama-card:hover figure img{transform:scale(1.05)}
.drama-card .play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);opacity:0;transition:opacity .3s}
.drama-card:hover .play-overlay{opacity:1}
.play-btn-icon{width:50px;height:50px;background:rgba(212,168,83,.9);border-radius:50%;display:flex;align-items:center;justify-content:center}
.play-btn-icon::after{content:"";border-left:18px solid #0d0a1a;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.drama-card .card-body{padding:1rem}
.drama-card .card-body h3{font-size:1.05rem;color:#e8ddf5;margin-bottom:.4rem}
.drama-card .card-body p{font-size:.85rem;color:#9a8cb5;margin-bottom:.5rem}
.card-rating{display:flex;gap:2px;color:#d4a853;font-size:.9rem}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#7a6c95}

/* ============ VIDEO PLAYER ============ */
.video-player-wrap{position:relative;width:100%;max-width:800px;margin:0 auto;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;border:2px solid #2a1f45}
.video-player-wrap video{width:100%;height:100%;object-fit:cover}
.video-player-wrap .video-poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.4)}
.video-player-wrap .video-poster .play-circle{width:70px;height:70px;background:rgba(212,168,83,.85);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s}
.video-player-wrap .video-poster:hover .play-circle{transform:scale(1.1)}
.video-player-wrap .video-poster .play-circle::after{content:"";border-left:24px solid #0d0a1a;border-top:14px solid transparent;border-bottom:14px solid transparent;margin-left:5px}

/* ============ STAR COLLABORATION ============ */
.star-collab{position:relative;overflow:hidden;border-radius:16px;margin:1rem 0}
.star-collab img{width:100%;height:auto;display:block}
.star-collab-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,26,.9) 0%,transparent 60%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}
.star-collab-overlay h3{color:#d4a853;font-size:1.6rem;margin-bottom:.5rem}
.star-collab-overlay p{color:#e0d8f0;font-size:.95rem;max-width:600px}

/* ============ SERVICES GRID ============ */
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.2rem}
.service-item{background:linear-gradient(145deg,#1a1230,#201640);border:1px solid #2a1f45;border-radius:12px;padding:1.5rem;text-align:center;transition:border-color .3s,transform .3s}
.service-item:hover{border-color:#d4a853;transform:translateY(-3px)}
.service-icon{font-size:2.5rem;margin-bottom:.8rem;display:block}
.service-item h3{color:#e8ddf5;font-size:1.1rem;margin-bottom:.5rem}
.service-item p{color:#9a8cb5;font-size:.88rem}

/* ============ CONSULTATION CTA ============ */
.cta-block{background:linear-gradient(135deg,#2a1040,#3d1860);border-radius:16px;padding:2.5rem;text-align:center;margin:1rem 0;border:1px solid #5a3090}
.cta-block h2{color:#d4a853;margin-bottom:.8rem}
.cta-block p{color:#c8bdd8;margin-bottom:1.5rem;max-width:600px;margin-left:auto;margin-right:auto}
.cta-btn{display:inline-block;padding:.8rem 2.5rem;background:linear-gradient(135deg,#d4a853,#b8862e);color:#0d0a1a;font-weight:700;border-radius:50px;font-size:1rem;transition:all .3s;border:none;cursor:pointer}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px rgba(212,168,83,.4);color:#0d0a1a}
.cta-btn-outline{display:inline-block;padding:.7rem 2rem;border:2px solid #d4a853;color:#d4a853;font-weight:600;border-radius:50px;font-size:.95rem;transition:all .3s;margin-left:.8rem}
.cta-btn-outline:hover{background:#d4a85322;color:#f0c96e}

/* ============ REVIEWS ============ */
.reviews-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.review-card{background:#1a1230;border:1px solid #2a1f45;border-radius:12px;padding:1.3rem}
.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.review-author{font-weight:600;color:#e8ddf5}
.review-city{font-size:.82rem;color:#9a8cb5}
.review-stars{color:#d4a853;font-size:.95rem;letter-spacing:2px}
.review-text{color:#b8aad0;font-size:.9rem;line-height:1.7;margin-bottom:.5rem}
.review-date{font-size:.78rem;color:#6a5c85;text-align:right}

/* ============ FAQ ============ */
.faq-list{max-width:800px;margin:0 auto}
.faq-item{border:1px solid #2a1f45;border-radius:10px;margin-bottom:.8rem;overflow:hidden;background:#1a1230}
.faq-question{padding:1rem 1.2rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;color:#e8ddf5;transition:background .3s}
.faq-question:hover{background:#201640}
.faq-question::after{content:"+";font-size:1.4rem;color:#d4a853;transition:transform .3s}
.faq-item.open .faq-question::after{transform:rotate(45deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s;padding:0 1.2rem}
.faq-item.open .faq-answer{max-height:500px;padding:0 1.2rem 1rem}
.faq-answer p{color:#a89bc0;font-size:.9rem;line-height:1.8}

/* ============ PAYMENT ============ */
.payment-section{text-align:center}
.payment-icons{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}
.payment-icon-item{background:#1a1230;border:1px solid #2a1f45;border-radius:10px;padding:.8rem 1.5rem;min-width:100px;text-align:center}
.payment-icon-item span{display:block;font-size:.85rem;color:#9a8cb5;margin-top:.3rem}
.payment-highlight{border-color:#d4a853!important;background:#1f1535!important}
.payment-highlight::before{content:"推荐";display:block;font-size:.7rem;color:#d4a853;font-weight:600;margin-bottom:.2rem}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:.8rem 0;font-size:.85rem}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:.3rem}
.breadcrumb li{color:#9a8cb5}
.breadcrumb li+li::before{content:"›";margin-right:.3rem;color:#6a5c85}
.breadcrumb li a{color:#d4a853}

/* ============ ABOUT SECTION ============ */
.about-content{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.about-text{color:#b8aad0;font-size:.95rem}
.about-text h3{color:#d4a853;margin-bottom:.8rem;font-size:1.3rem}

/* ============ LICENSE ============ */
.license-section{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:center}
.license-badge{max-width:200px}
.license-info{max-width:500px}
.license-info h3{color:#d4a853;margin-bottom:.5rem}
.license-info p{color:#a89bc0;font-size:.9rem}

/* ============ SUPPORT ============ */
.support-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.support-card{background:#1a1230;border:1px solid #2a1f45;border-radius:10px;padding:1.2rem;text-align:center}
.support-card .support-icon{font-size:2rem;margin-bottom:.5rem;display:block}
.support-card h4{color:#e8ddf5;margin-bottom:.3rem}
.support-card p{color:#9a8cb5;font-size:.85rem}

/* ============ FOOTER ============ */
.site-footer{background:#08051a;border-top:2px solid #1a1230;padding:2.5rem 0 1rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:2rem;margin-bottom:2rem}
.footer-col h4{color:#d4a853;margin-bottom:.8rem;font-size:1rem}
.footer-col ul li{margin-bottom:.4rem}
.footer-col ul li a{color:#9a8cb5;font-size:.88rem;transition:color .3s}
.footer-col ul li a:hover{color:#d4a853}
.footer-col p{color:#9a8cb5;font-size:.85rem;line-height:1.7}
.footer-social{display:flex;gap:.8rem;margin-top:.5rem}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:#1a1230;color:#d4a853;font-size:.9rem;transition:all .3s;border:1px solid #2a1f45}
.footer-social a:hover{background:#d4a853;color:#0d0a1a}
.footer-bottom{border-top:1px solid #1a1230;padding-top:1rem;text-align:center;color:#6a5c85;font-size:.8rem}
.footer-bottom a{color:#9a8cb5}
.footer-payment{display:flex;justify-content:center;gap:1rem;margin:.8rem 0;flex-wrap:wrap}
.footer-payment span{background:#1a1230;padding:.3rem .8rem;border-radius:6px;font-size:.78rem;color:#9a8cb5}

/* ============ INNER PAGE ============ */
.inner-hero{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.inner-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.4)}
.inner-hero-content{position:relative;z-index:2;padding:2rem 1rem}
.inner-hero-content h1{color:#fff;font-size:2rem;text-shadow:0 2px 15px rgba(0,0,0,.5)}
.inner-hero-content p{color:#d0c8e0;margin-top:.5rem}

.content-article{max-width:800px;margin:0 auto;padding:2rem 1rem}
.content-article h2{color:#d4a853;margin:1.5rem 0 .8rem;font-size:1.5rem}
.content-article h3{color:#e8ddf5;margin:1.2rem 0 .6rem;font-size:1.2rem}
.content-article p{color:#b8aad0;font-size:.95rem;line-height:1.9;margin-bottom:1rem}
.content-article figure{margin:1.5rem 0;border-radius:10px;overflow:hidden}
.content-article figure img{width:100%;height:auto}
.content-article figure figcaption{background:#1a1230;padding:.5rem;text-align:center;font-size:.82rem;color:#9a8cb5}
.content-article blockquote{border-left:3px solid #d4a853;padding:.8rem 1.2rem;margin:1rem 0;background:#1a1230;border-radius:0 8px 8px 0;color:#c8bdd8;font-style:italic}

/* ============ APP DOWNLOAD ============ */
.app-hero{background:linear-gradient(135deg,#1a0e2e,#2d1550);text-align:center;padding:3rem 1rem}
.app-hero h1{color:#d4a853;margin-bottom:1rem}
.app-screenshot{max-width:300px;margin:1.5rem auto;border-radius:20px;overflow:hidden;box-shadow:0 10px 40px rgba(100,50,180,.3)}
.app-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:2rem 0}
.app-feature-card{background:#1a1230;border:1px solid #2a1f45;border-radius:12px;padding:1.3rem;text-align:center}
.app-feature-card .feat-icon{font-size:2rem;margin-bottom:.5rem;display:block}
.app-feature-card h3{color:#e8ddf5;font-size:1rem;margin-bottom:.3rem}
.app-feature-card p{color:#9a8cb5;font-size:.85rem}
.download-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.download-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.8rem;border-radius:50px;font-weight:600;font-size:.95rem;transition:all .3s}
.download-btn-primary{background:linear-gradient(135deg,#d4a853,#b8862e);color:#0d0a1a}
.download-btn-secondary{border:2px solid #d4a853;color:#d4a853;background:transparent}
.download-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,168,83,.3)}

/* ============ RESPONSIVE ============ */
@media(max-width:768px){
    .nav-toggle{display:block}
    .nav-list{display:none;flex-direction:column;width:100%;background:#12091f;padding:.5rem;border-radius:8px;position:absolute;top:100%;left:0;right:0;z-index:100;border:1px solid #2a1f45}
    .nav-list.open{display:flex}
    .main-nav{position:relative}
    .header-inner{position:relative}
    .hero-content h1{font-size:1.6rem}
    .hero-content p{font-size:.9rem}
    .about-content{grid-template-columns:1fr}
    .cards-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .section-block{padding:2rem 0}
    h1{font-size:1.7rem}
    h2{font-size:1.4rem}
    .footer-grid{grid-template-columns:1fr 1fr}
    .inner-hero{min-height:200px}
    .star-collab-overlay h3{font-size:1.2rem}
}
@media(max-width:480px){
    .cards-grid{grid-template-columns:1fr}
    .footer-grid{grid-template-columns:1fr}
    .services-grid{grid-template-columns:1fr}
    .reviews-list{grid-template-columns:1fr}
    .support-grid{grid-template-columns:1fr 1fr}
    .hero-content h1{font-size:1.3rem}
    .site-logo-text{font-size:1rem}
}

/* ============ ANIMATIONS ============ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.fade-in{animation:fadeInUp .6s ease forwards;opacity:0}
.delay-1{animation-delay:.1s}
.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}

/* ============ UTILITY ============ */
.text-center{text-align:center}
.text-gold{color:#d4a853}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mb-1{margin-bottom:1rem}
.mb-2{margin-bottom:2rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}