:root {
  --primary: #8EA33B;
  --primary-dark: #5F7026;
  --primary-soft: #242B17;
  --accent: #D9B75F;
  --bg: #0E1110;
  --surface: #171B17;
  --surface-strong: #20261F;
  --text: #F4F1E8;
  --muted: #B8B9AD;
  --border: rgba(255,255,255,.12);
  --shadow: rgba(0,0,0,.24);
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
header, .site-header { position:sticky; top:0; z-index:50; background:rgba(14,17,16,.92); backdrop-filter: blur(14px); border-bottom:1px solid var(--border); }
.mobile-header { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; }
.desktop-header { display:none; max-width:1220px; margin:0 auto; height:78px; padding:0 28px; align-items:center; gap:24px; }
.logo img { width:132px; max-height:42px; object-fit:contain; }
.mobile-logo { position:absolute; left:50%; transform:translateX(-50%); }
.mobile-logo img { width:116px; max-height:36px; }
.menu-button { width:42px; height:42px; display:grid; place-content:center; gap:5px; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); cursor:pointer; }
.menu-button span { display:block; width:18px; height:2px; background:var(--text); border-radius:4px; }
nav, .primary-nav { display:flex; align-items:center; }
.primary-nav { flex:1; justify-content:center; gap:6px; }
.primary-nav a, .mobile-drawer a { color:var(--muted); font-size:15px; padding:10px 12px; border-radius:12px; transition:.2s ease; }
.primary-nav a:hover, .primary-nav a.active, .mobile-drawer a:hover, .mobile-drawer a.active { color:var(--text); background:var(--primary-soft); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.header-tools { display:flex; align-items:center; gap:16px; }
.search-icon { width:22px; height:22px; position:relative; display:inline-block; border:2px solid var(--muted); border-radius:50%; }
.search-icon:after { content:""; width:9px; height:2px; background:var(--muted); position:absolute; right:-7px; bottom:0px; transform:rotate(45deg); border-radius:2px; }
.top-action-button, .main-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:0 18px; border-radius:999px; background:var(--primary); color:#fff; font-weight:800; letter-spacing:.02em; box-shadow:0 12px 26px var(--shadow); }
.top-action-button:hover, .main-button:hover, .link-button:hover { filter: brightness(0.85); }
.mobile-drawer { position:fixed; top:64px; left:0; right:0; transform:translateY(-120%); opacity:0; pointer-events:none; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:16px; background:rgba(14,17,16,.98); border-bottom:1px solid var(--border); transition:.22s ease; }
.mobile-drawer.open { transform:translateY(0); opacity:1; pointer-events:auto; }
main { min-height:60vh; }
.movie-hero, .banner-section { position:relative; overflow:hidden; }
.movie-hero { min-height:680px; display:grid; align-items:center; background:linear-gradient(110deg, rgba(7,9,10,.93), rgba(7,9,10,.58)), url('/banner.webp') center/cover no-repeat; }
.movie-hero:after { content:""; position:absolute; inset:auto 8% 6% auto; width:260px; height:260px; background:radial-gradient(circle,var(--primary),transparent 68%); opacity:.22; filter:blur(12px); }
.hero-inner, .section-inner, .page-inner { width:min(1180px, calc(100% - 32px)); margin:0 auto; }
.hero-content { max-width:720px; padding:96px 0 72px; position:relative; z-index:1; }
.eyebrow, .data-badge { display:inline-flex; align-items:center; gap:8px; color:var(--accent); background:rgba(255,255,255,.07); border:1px solid var(--border); border-radius:999px; padding:7px 12px; font-size:13px; font-weight:800; }
h1 { font-size:clamp(34px,7vw,72px); line-height:1.05; margin:18px 0; letter-spacing:-.055em; }
h2 { font-size:clamp(25px,4vw,42px); line-height:1.18; margin:0 0 16px; letter-spacing:-.035em; }
h3 { margin:0 0 10px; font-size:20px; }
p { color:var(--muted); margin:0 0 16px; }
.hero-lead { font-size:18px; max-width:680px; color:#E6E3D7; }
.content-section { padding:72px 0; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:24px; }
.section-head p { max-width:660px; }
.responsive-grid, .category-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.category-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
.info-card, .movie-card, .service-card, .data-chart-panel, .faq-item, .alert-box { background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 16px 40px var(--shadow); }
.info-card, .movie-card, .service-card, .faq-item { padding:22px; }
.info-card strong, .movie-card strong, .service-card strong { color:var(--text); display:block; font-size:18px; margin-bottom:8px; }
.card-kicker { color:var(--primary); font-weight:900; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.link-button { display:inline-flex; margin-top:10px; color:#fff; background:var(--primary-dark); border-radius:12px; padding:9px 12px; font-weight:800; }
.movie-card.poster { min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(180deg, rgba(10,10,10,.18), rgba(10,10,10,.82)), url('/movies.webp') center/cover no-repeat; }
.movie-card.poster p, .movie-card.poster strong { color:#fff; }
.data-chart-panel { padding:24px; position:relative; overflow:hidden; }
.data-chart-panel:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.04) 10% 11%, transparent 11% 30%, rgba(255,255,255,.04) 30% 31%, transparent 31% 50%, rgba(255,255,255,.04) 50% 51%, transparent 51% 70%, rgba(255,255,255,.04) 70% 71%, transparent 71%); opacity:.7; }
.chart-bars { position:relative; z-index:1; display:grid; gap:12px; margin-top:20px; }
.chart-bars span { height:12px; border-radius:99px; background:linear-gradient(90deg, var(--primary), var(--accent)); display:block; }
.trend-list { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.trend-list li { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); color:var(--muted); }
.trend-list b { color:var(--text); }
.trend-list em { color:var(--accent); font-style:normal; font-weight:800; }
.device-showcase { display:grid; gap:24px; align-items:center; background:linear-gradient(135deg, var(--surface), var(--surface-strong)); border:1px solid var(--border); border-radius:24px; padding:24px; overflow:hidden; }
.device-showcase img { border-radius:18px; box-shadow:0 20px 50px var(--shadow); }
.security-section, .parental-guidance-section { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.alert-box { padding:20px; border-left:4px solid var(--primary); background:linear-gradient(90deg, var(--primary-soft), rgba(255,255,255,.025)); }
.page-hero { padding:70px 0 38px; background:radial-gradient(circle at 20% 0%, var(--primary-soft), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.035), transparent); border-bottom:1px solid var(--border); }
.page-hero h1 { font-size:clamp(32px,5.8vw,58px); }
.page-layout { display:grid; gap:20px; }
.article-flow { display:grid; gap:18px; }
.timeline { position:relative; padding-left:20px; display:grid; gap:16px; }
.timeline:before { content:""; position:absolute; left:5px; top:0; bottom:0; width:2px; background:var(--border); }
.timeline .info-card { position:relative; }
.timeline .info-card:before { content:""; position:absolute; left:-23px; top:24px; width:11px; height:11px; border-radius:50%; background:var(--primary); }
.cta-section { padding:76px 0; background:radial-gradient(circle at 70% 20%, var(--primary-soft), transparent 36%); }
.cta-box { background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border:1px solid var(--border); border-radius:26px; padding:34px; display:grid; gap:18px; align-items:center; }
.faq-list { display:grid; gap:14px; }
.faq-item summary { cursor:pointer; color:var(--text); font-weight:900; }
.faq-item p { margin-top:12px; }
.site-footer, footer { background:#080B0A; border-top:1px solid var(--border); }
.footer-inner { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:54px 0 28px; display:grid; gap:24px; }
.footer-brand h2 { margin:0 0 10px; }
.footer-links { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.footer-links a { color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:8px 12px; }
.footer-links a:hover { color:#fff; background:var(--primary-soft); }
.copyright { width:min(1180px, calc(100% - 32px)); margin:0 auto; padding:18px 0 30px; color:var(--muted); font-size:14px; border-top:1px solid var(--border); }
.split-feature { display:grid; gap:22px; align-items:center; }
.split-feature img { border-radius:24px; border:1px solid var(--border); }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.metric { padding:18px; border-radius:18px; background:var(--surface-strong); border:1px solid var(--border); }
.metric b { display:block; color:var(--text); font-size:26px; }
@media (min-width: 720px) {
  .responsive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .device-showcase, .split-feature, .cta-box { grid-template-columns:1fr 1fr; }
  .page-layout { grid-template-columns:1.45fr .75fr; align-items:start; }
}
@media (min-width: 1040px) {
  .mobile-header, .mobile-drawer { display:none; }
  .desktop-header { display:flex; }
  .responsive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .footer-inner { grid-template-columns:1.2fr 1fr 1fr; }
  .footer-links { grid-column:1 / -1; }
  .hero-content { padding-top:130px; }
}
@media (max-width: 520px) {
  .top-action-button { min-height:38px; padding:0 14px; font-size:14px; }
  .movie-hero { min-height:620px; background-position:center top; }
  .section-head { display:block; }
  .category-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr; }
}