:root{
    --primary:#22d3a6;
    --primary-soft:rgba(34,211,166,.14);
    --primary-line:rgba(34,211,166,.34);
    --bg:#07121f;
    --bg-2:#0d1d2f;
    --panel:#111f32;
    --panel-2:#13263d;
    --paper:#f6f8f7;
    --ink:#f5fbff;
    --muted:#a9b7c6;
    --dark-text:#111827;
    --soft-text:#d7e0e8;
    --line:rgba(255,255,255,.12);
    --shadow:0 24px 70px rgba(0,0,0,.28);
    --radius:18px;
    --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--ink);
    background:
        radial-gradient(circle at 12% 8%, rgba(34,211,166,.18), transparent 26rem),
        radial-gradient(circle at 92% 12%, rgba(245,199,107,.11), transparent 24rem),
        linear-gradient(180deg,#07121f 0%,#091827 42%,#07121f 100%);
    line-height:1.75;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.site-main{min-height:58vh}
.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(7,18,31,.88);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}
.mobile-header{
    height:64px;
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:10px;
    padding:0 14px;
}
.logo img{height:34px;width:auto;object-fit:contain}
.mobile-logo{justify-self:center}
.menu-button{
    width:42px;height:42px;border:0;background:transparent;
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    padding:0 9px;cursor:pointer;border-radius:12px;
}
.menu-button span{display:block;height:2px;background:var(--ink);border-radius:99px}
.menu-button:hover{background:rgba(255,255,255,.06)}
.top-action,.main-button,.text-button,.device-button{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:42px;padding:0 18px;border-radius:999px;
    background:var(--primary);color:#06120f;font-weight:800;
    letter-spacing:.02em;box-shadow:0 14px 32px rgba(34,211,166,.23);
    transition:.22s ease;
}
.top-action:hover,.main-button:hover,.device-button:hover{filter:brightness(.85);transform:translateY(-1px)}
.mobile-action{min-width:68px}
.mobile-nav-panel{
    display:none;
    border-top:1px solid var(--line);
    background:rgba(7,18,31,.97);
    box-shadow:var(--shadow);
}
.mobile-nav-panel.open{display:block}
.mobile-nav{display:grid;padding:12px 16px 18px;gap:4px}
.nav-link{
    position:relative;
    display:flex;align-items:center;
    padding:11px 8px;
    color:var(--soft-text);
    font-size:15px;
}
.nav-link.active,.nav-link:hover{color:var(--primary)}
.nav-link.active:after,.desktop-nav .nav-link:hover:after{
    content:"";position:absolute;left:8px;right:8px;bottom:3px;height:2px;
    background:var(--primary);border-radius:99px;
}
.desktop-header{display:none}
.search-icon{
    width:22px;height:22px;border:2px solid var(--muted);
    border-radius:50%;position:relative;flex:0 0 auto;opacity:.9;
}
.search-icon:after{
    content:"";position:absolute;width:8px;height:2px;background:var(--muted);
    right:-6px;bottom:1px;transform:rotate(45deg);border-radius:99px;
}
.section{padding:58px 18px}
.container{width:min(var(--max),calc(100% - 36px));margin:0 auto}
.movie-hero{
    min-height:680px;
    display:flex;
    align-items:center;
    padding:72px 18px 54px;
    background:
      linear-gradient(90deg,rgba(7,18,31,.94) 0%,rgba(7,18,31,.74) 45%,rgba(7,18,31,.2) 100%),
      url("/banner.webp") center/cover no-repeat;
}
.hero-content{width:min(760px,100%);margin:0 auto 0 max(18px,calc((100vw - var(--max))/2))}
.eyebrow,.badge{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--primary);background:var(--primary-soft);
    border:1px solid var(--primary-line);
    padding:6px 12px;border-radius:999px;font-size:13px;font-weight:800;
}
.movie-hero h1,.page-hero h1{
    margin:18px 0 16px;
    font-size:clamp(34px,8vw,72px);
    line-height:1.04;
    letter-spacing:-.06em;
}
.movie-hero p,.page-hero p,.section-lead{
    color:var(--soft-text);
    font-size:clamp(16px,2.4vw,20px);
    max-width:760px;
}
.hero-actions{display:flex;gap:12px;align-items:center;margin-top:28px;flex-wrap:wrap}
.hero-note{font-size:13px;color:var(--muted)}
.category-grid,.service-grid,.mini-grid,.faq-grid,.data-grid{
    display:grid;grid-template-columns:1fr;gap:16px;margin-top:28px;
}
.movie-card,.service-card,.info-card,.faq-item,.data-chart-panel,.review-card,.timeline-card{
    background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035));
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:0 18px 44px rgba(0,0,0,.16);
}
.movie-card{min-height:218px}
.card-badge{
    display:inline-grid;place-items:center;width:42px;height:42px;border-radius:14px;
    background:var(--primary-soft);color:var(--primary);font-weight:900;margin-bottom:18px;
}
.movie-card h3,.service-card h3,.info-card h3,.faq-item h3{margin:0 0 10px;font-size:21px}
.movie-card p,.service-card p,.info-card p,.faq-item p,.review-card p,.timeline-card p{margin:0;color:var(--muted)}
.card-link{
    display:inline-flex;margin-top:18px;color:var(--primary);font-weight:800;
}
.card-link:after{content:"›";margin-left:8px}
.split,.device-showcase,.security-section,.parental-guidance-section{
    display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}
.image-panel{
    border-radius:24px;overflow:hidden;border:1px solid var(--line);
    box-shadow:var(--shadow);background:var(--panel);
}
.image-panel img{width:100%;height:auto}
.section h2{font-size:clamp(28px,5vw,46px);line-height:1.12;margin:0 0 14px;letter-spacing:-.04em}
.section p{color:var(--soft-text)}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.kpi{
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    border-radius:16px;padding:16px;
}
.kpi strong{font-size:28px;color:var(--primary);display:block;line-height:1}
.kpi span{color:var(--muted);font-size:13px}
.data-chart-panel{padding:24px}
.chart-lines{display:grid;gap:12px;margin:20px 0}
.chart-line{display:grid;grid-template-columns:90px 1fr 50px;gap:12px;align-items:center;color:var(--soft-text)}
.bar{height:10px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:99px}
.star-score{color:#f5c76b;letter-spacing:2px}
.notice-box{
    margin-top:22px;padding:18px;border:1px solid var(--primary-line);
    background:var(--primary-soft);border-radius:var(--radius);
    color:var(--soft-text);
}
.notice-box strong{color:var(--primary)}
.device-showcase,.security-section,.parental-guidance-section{
    background:linear-gradient(135deg,rgba(34,211,166,.12),rgba(255,255,255,.035));
    border:1px solid var(--line);
    border-radius:26px;
    padding:24px;
}
.check-list{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.check-list li{position:relative;padding-left:24px;color:var(--soft-text)}
.check-list li:before{content:"";position:absolute;left:0;top:.72em;width:9px;height:9px;background:var(--primary);border-radius:99px}
.cta-section{
    margin:40px auto 20px;width:min(var(--max),calc(100% - 36px));
    background:linear-gradient(135deg,var(--primary),#f5c76b);
    color:#06120f;border-radius:28px;padding:34px 24px;text-align:center;
    box-shadow:0 24px 70px rgba(34,211,166,.24);
}
.cta-section h2{margin:0 0 10px;font-size:clamp(28px,6vw,48px);line-height:1.08}
.cta-section p{color:#11201d;margin:0 auto 20px;max-width:760px}
.cta-section .main-button{background:#07121f;color:var(--ink);box-shadow:none}
.page-hero{
    padding:82px 18px 46px;
    border-bottom:1px solid var(--line);
    background:
      radial-gradient(circle at 86% 20%,rgba(34,211,166,.18),transparent 24rem),
      linear-gradient(180deg,rgba(255,255,255,.045),transparent);
}
.content-layout{width:min(980px,calc(100% - 36px));margin:0 auto;padding:44px 0 64px}
.content-layout h2{font-size:clamp(24px,4vw,36px);margin:34px 0 12px}
.content-layout p{color:var(--soft-text)}
.step-list{counter-reset:step;display:grid;gap:14px;padding:0;margin:22px 0;list-style:none}
.step-list li{
    counter-increment:step;
    background:rgba(255,255,255,.055);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px 18px 18px 62px;
    position:relative;color:var(--soft-text);
}
.step-list li:before{
    content:counter(step);
    position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:10px;
    display:grid;place-items:center;background:var(--primary);color:#06120f;font-weight:900;
}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;margin:22px 0;background:rgba(255,255,255,.04)}
.data-table{width:100%;border-collapse:collapse;min-width:640px}
.data-table th,.data-table td{padding:15px;border-bottom:1px solid var(--line);text-align:left}
.data-table th{color:var(--primary);font-size:14px}
.data-table td{color:var(--soft-text)}
.site-footer{border-top:1px solid var(--line);background:#06101c;margin-top:20px}
.footer-inner{width:min(var(--max),calc(100% - 36px));margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px;padding:38px 0}
.footer-brand img{height:38px;margin-bottom:12px}
.footer-brand p,.footer-compliance p{color:var(--muted);margin:6px 0}
.footer-links{display:grid;gap:10px}
.footer-links a{color:var(--soft-text)}
.footer-links a:hover{color:var(--primary)}
.footer-bottom{text-align:center;color:var(--muted);font-size:13px;padding:18px;border-top:1px solid var(--line)}
@media (min-width:640px){
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .service-grid,.faq-grid,.mini-grid{grid-template-columns:repeat(2,1fr)}
    .data-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
    .mobile-header,.mobile-nav-panel{display:none}
    .desktop-header{
        display:grid;
        grid-template-columns:auto minmax(0,1fr) 28px auto;
        gap:24px;align-items:center;
        width:min(var(--max),calc(100% - 40px));
        margin:0 auto;height:78px;
    }
    .desktop-logo img{height:42px}
    .desktop-nav{display:flex;align-items:center;gap:18px;white-space:nowrap}
    .desktop-nav .nav-link{padding:25px 0;font-size:14px}
    .desktop-nav .nav-link.active:after,.desktop-nav .nav-link:hover:after{left:0;right:0;bottom:17px}
    .movie-hero{min-height:760px}
    .category-grid{grid-template-columns:repeat(3,1fr)}
    .service-grid{grid-template-columns:repeat(3,1fr)}
    .mini-grid{grid-template-columns:repeat(3,1fr)}
    .faq-grid{grid-template-columns:repeat(2,1fr)}
    .split,.device-showcase,.security-section,.parental-guidance-section{grid-template-columns:1.05fr .95fr}
    .security-section{grid-template-columns:.9fr 1.1fr}
    .footer-inner{grid-template-columns:1.2fr .7fr 1.3fr}
}
@media (min-width:1180px){
    .category-grid{grid-template-columns:repeat(6,1fr)}
    .movie-card{min-height:250px}
}