:root{
    --primary:#d6a94a;
    --primary-soft:rgba(214,169,74,.16);
    --primary-mid:rgba(214,169,74,.48);
    --bg:#090b13;
    --bg-deep:#05070d;
    --surface:#111622;
    --surface-2:#171d2a;
    --card:#fbf8ef;
    --text:#f8f3e7;
    --muted:#b9b1a1;
    --dark-text:#171716;
    --line:rgba(255,255,255,.12);
    --shadow:0 20px 60px rgba(0,0,0,.25);
    --radius:18px;
    --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(circle at 16% 0%, rgba(214,169,74,.18), transparent 34rem),
        radial-gradient(circle at 90% 12%, rgba(255,255,255,.06), transparent 24rem),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 32%, #0d111b);
    line-height:1.75;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.skip-link{
    position:absolute;
    left:-999px;
    top:0;
    background:var(--primary);
    color:#111;
    padding:10px 14px;
    z-index:1000;
}
.skip-link:focus{left:12px;top:12px}

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(7,9,16,.86);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
}

.mobile-header{
    height:64px;
    display:grid;
    grid-template-columns:52px 1fr auto;
    align-items:center;
    gap:10px;
    padding:0 14px;
    position:relative;
}
.desktop-header{display:none}

.logo img{
    width:auto;
    object-fit:contain;
}
.mobile-logo{
    justify-self:center;
    display:flex;
    align-items:center;
}
.mobile-logo img{height:38px;max-width:168px}
.desktop-logo img{height:46px;max-width:196px}

.menu-toggle{position:absolute;opacity:0;pointer-events:none}
.menu-button{
    width:42px;
    height:42px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.04);
    cursor:pointer;
}
.menu-button span{
    width:20px;
    height:2px;
    background:var(--text);
    border-radius:99px;
    transition:.25s ease;
}
.mobile-action,.desktop-action,.top-action-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:var(--primary);
    color:#111318;
    font-weight:800;
    box-shadow:0 12px 30px rgba(214,169,74,.28);
    white-space:nowrap;
}
.top-action-button:hover,.main-button:hover{filter:brightness(.85)}
.mobile-action{font-size:14px;padding:0 14px}

.nav a{
    position:relative;
    font-weight:700;
    color:rgba(248,243,231,.86);
    transition:.2s ease;
}
.nav a:hover,.nav a.active{color:var(--primary)}
.mobile-nav{
    position:fixed;
    inset:0 auto 0 0;
    width:min(84vw,340px);
    background:#0c101a;
    border-right:1px solid var(--line);
    box-shadow:var(--shadow);
    transform:translateX(-105%);
    transition:.3s ease;
    padding:24px 22px;
    display:flex;
    flex-direction:column;
    gap:8px;
    z-index:130;
}
.mobile-nav a{
    padding:12px 10px;
    border-radius:14px;
}
.mobile-nav a.active,.mobile-nav a:hover{background:var(--primary-soft)}
.mobile-nav-brand img{height:46px;margin-bottom:8px}
.mobile-nav-close{
    position:absolute;
    right:16px;
    top:12px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    cursor:pointer;
    font-size:26px;
}
.mobile-nav-mask{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.56);
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
    z-index:120;
}
.menu-toggle:checked ~ .mobile-nav{transform:translateX(0)}
.menu-toggle:checked ~ .mobile-nav-mask{opacity:1;pointer-events:auto}
.search-icon{
    width:34px;
    height:34px;
    border:2px solid rgba(248,243,231,.78);
    border-radius:50%;
    display:inline-block;
    position:relative;
    flex:0 0 auto;
}
.search-icon:after{
    content:"";
    position:absolute;
    width:11px;
    height:2px;
    background:rgba(248,243,231,.78);
    transform:rotate(45deg);
    right:-8px;
    bottom:2px;
    border-radius:4px;
}

.site-main{min-height:60vh}
.section,.page-hero,.movie-hero,.footer-cta{
    width:min(var(--max), calc(100% - 32px));
    margin-left:auto;
    margin-right:auto;
}
.section{padding:58px 0}
.section-head{
    max-width:760px;
    margin-bottom:28px;
}
.section-kicker,.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    padding:7px 12px;
    color:var(--primary);
    background:var(--primary-soft);
    border:1px solid rgba(214,169,74,.28);
    font-size:13px;
    font-weight:900;
    letter-spacing:.08em;
}
h1,h2,h3{line-height:1.18;margin:0 0 14px}
h1{font-size:clamp(34px, 8vw, 78px);letter-spacing:-.05em}
h2{font-size:clamp(26px, 5vw, 44px);letter-spacing:-.035em}
h3{font-size:20px}
p{margin:0 0 16px;color:var(--muted)}
strong{color:var(--text)}

.movie-hero{
    min-height:calc(100svh - 64px);
    display:grid;
    align-items:center;
    padding:42px 0 56px;
    gap:28px;
}
.hero-media{
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    isolation:isolate;
}
.hero-media img{
    width:100%;
    min-height:300px;
    object-fit:cover;
}
.hero-content{
    max-width:790px;
}
.hero-content p{
    font-size:17px;
    color:#dfd6c4;
}
.main-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:0 22px;
    border-radius:999px;
    background:var(--primary);
    color:#111318;
    font-weight:900;
    box-shadow:0 15px 36px rgba(214,169,74,.28);
}
.hero-button{margin-top:10px}
.outline-link{
    display:inline-flex;
    border:1px solid var(--primary-mid);
    color:var(--primary);
    border-radius:999px;
    padding:12px 18px;
    font-weight:900;
}
.outline-link:hover{background:var(--primary-soft)}
.single-inline-button{margin-top:10px}

.category-grid,.service-grid,.notice-grid{
    display:grid;
    gap:16px;
}
.category-grid{grid-template-columns:1fr}
.movie-card,.service-card,.side-card,.faq-item,.notice-grid article{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    padding:22px;
    box-shadow:0 10px 36px rgba(0,0,0,.16);
}
.movie-card{
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}
.movie-card a{
    margin-top:auto;
    color:var(--primary);
    font-weight:900;
}
.movie-card a:after{content:" →"}
.service-card{
    background:linear-gradient(180deg, rgba(251,248,239,.96), rgba(236,229,214,.94));
    color:var(--dark-text);
}
.service-card p{color:#5f5749}
.service-card h3:before{
    content:"";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:8px;
    border-radius:50%;
    background:var(--primary);
}

.split-section{
    display:grid;
    gap:28px;
    align-items:center;
}
.split-image{
    border-radius:28px;
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.split-content{
    max-width:620px;
}
.data-chart-panel{
    display:grid;
    gap:12px;
    margin-top:20px;
    padding:18px;
    border-radius:22px;
    background:rgba(255,255,255,.07);
    border:1px solid var(--line);
}
.data-chart-panel div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.data-chart-panel div:last-child{border-bottom:0}
.data-chart-panel span{
    color:#111318;
    background:var(--primary);
    border-radius:999px;
    padding:5px 10px;
    font-size:12px;
    font-weight:900;
}

.device-showcase{
    display:grid;
    gap:28px;
    align-items:center;
    background:linear-gradient(135deg, rgba(251,248,239,.08), rgba(214,169,74,.12));
    border:1px solid var(--line);
    border-radius:30px;
    padding:26px;
    box-shadow:var(--shadow);
}
.device-showcase img{
    border-radius:24px;
    border:1px solid rgba(214,169,74,.25);
}

.security-section,.parental-guidance-section{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}
.parental-guidance-section{
    background:linear-gradient(135deg, rgba(214,169,74,.16), rgba(255,255,255,.04));
    border-radius:28px;
    padding:28px;
    border:1px solid rgba(214,169,74,.22);
}

.faq-list{
    display:grid;
    gap:14px;
}
.faq-list.large{gap:18px}
.faq-item h2,.faq-item h3{margin-bottom:8px}
.faq-item p{margin-bottom:0}

.page-hero{
    padding:56px 0 36px;
}
.page-hero p{
    max-width:860px;
    font-size:18px;
    color:#d9cfbd;
}
.article-layout{
    display:grid;
    gap:28px;
    align-items:start;
}
.article-main{
    border:1px solid var(--line);
    border-radius:30px;
    padding:24px;
    background:rgba(255,255,255,.055);
}
.article-main h2{
    font-size:clamp(22px,4vw,34px);
    margin-top:22px;
}
.article-main h2:first-child{margin-top:0}
.article-main p{color:#d7cfbf}
.article-side{
    display:grid;
    gap:16px;
}
.side-card{
    background:rgba(255,255,255,.075);
}
.side-card p{margin-bottom:0}
.step-list{
    margin:0 0 24px;
    padding:0;
    list-style:none;
    display:grid;
    gap:14px;
}
.step-list li{
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    background:rgba(255,255,255,.055);
}
.step-list strong{display:block;margin-bottom:6px}
.step-list span{color:var(--muted)}

.site-footer{
    margin-top:40px;
    padding:0 0 30px;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18));
}
.footer-cta{
    margin-top:48px;
    padding:28px;
    border-radius:30px;
    border:1px solid rgba(214,169,74,.28);
    background:
        radial-gradient(circle at 95% 0%, rgba(214,169,74,.28), transparent 24rem),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    display:grid;
    gap:18px;
    align-items:center;
}
.footer-cta p{margin-bottom:0}
.footer-grid{
    width:min(var(--max), calc(100% - 32px));
    margin:34px auto 0;
    display:grid;
    gap:22px;
}
.footer-grid h3{font-size:16px;color:var(--primary)}
.footer-grid a{
    display:block;
    color:var(--muted);
    margin:9px 0;
}
.footer-grid a:hover{color:var(--primary)}
.footer-brand img{height:50px;margin-bottom:12px}
.footer-bottom{
    width:min(var(--max), calc(100% - 32px));
    margin:28px auto 0;
    padding-top:20px;
    border-top:1px solid var(--line);
}
.footer-bottom p{
    font-size:13px;
    margin-bottom:8px;
    color:#a99f91;
}

@media (min-width:640px){
    .category-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .service-grid,.notice-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    .footer-cta{grid-template-columns:1fr auto}
}

@media (min-width:900px){
    .movie-hero{
        min-height:650px;
        grid-template-columns:1.05fr .95fr;
        padding:70px 0;
    }
    .hero-media{order:2}
    .hero-content{order:1}
    .split-section{grid-template-columns:1fr 1fr}
    .split-section.reverse .split-image{order:2}
    .device-showcase{grid-template-columns:.9fr 1.1fr;padding:34px}
    .article-layout{grid-template-columns:minmax(0,1fr) 320px}
    .footer-grid{grid-template-columns:1.7fr 1fr 1fr 1fr}
}

@media (min-width:1024px){
    .mobile-header{display:none}
    .desktop-header{
        height:82px;
        width:min(1280px, calc(100% - 36px));
        margin:0 auto;
        display:flex;
        align-items:center;
        gap:26px;
    }
    .desktop-logo{flex:0 0 auto}
    .desktop-nav{
        flex:1;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:20px;
    }
    .desktop-nav a{
        font-size:14px;
        padding:30px 0;
    }
    .desktop-nav a:after{
        content:"";
        position:absolute;
        left:0;
        right:0;
        bottom:20px;
        height:3px;
        border-radius:99px;
        background:var(--primary);
        transform:scaleX(0);
        transform-origin:center;
        transition:.2s ease;
    }
    .desktop-nav a:hover:after,.desktop-nav a.active:after{transform:scaleX(1)}
    .desktop-action{min-width:96px}
    .category-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .service-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .notice-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
    .page-hero{padding:76px 0 44px}
    .article-main{padding:36px}
}

@media (min-width:1220px){
    .category-grid{grid-template-columns:repeat(6, minmax(0, 1fr))}
    .movie-card{min-height:245px}
}

@media (prefers-reduced-motion:reduce){
    *{scroll-behavior:auto!important;transition:none!important}
}