:root{
  --background:hsl(230 35% 6%);
  --foreground:hsl(210 40% 98%);
  --card:hsl(230 30% 10%);
  --primary:hsl(260 90% 65%);
  --secondary:hsl(230 25% 15%);
  --muted:hsl(230 20% 18%);
  --muted-foreground:hsl(215 20% 65%);
  --accent:hsl(195 90% 60%);
  --success:hsl(150 60% 50%);
  --border:hsl(230 25% 20%);
  --violet:hsl(260 90% 65%);
  --purple:hsl(275 90% 60%);
  --indigo:hsl(245 90% 60%);
  --cyan:hsl(195 90% 60%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--background);color:var(--foreground);
  font-family:'PingFang SC','Microsoft YaHei',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1280px;margin:0 auto;padding-left:24px;padding-right:24px}
@media(min-width:768px){.container{padding-left:32px;padding-right:32px}}
@media(min-width:1024px){.container{padding-left:48px;padding-right:48px}}

/* gradient text */
.grad{background:linear-gradient(135deg,var(--violet),var(--purple),var(--indigo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.grad-cyan{background:linear-gradient(135deg,var(--violet),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:all .3s}
.nav.scrolled{background:hsla(230 30% 10% / .9);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);box-shadow:0 10px 30px hsla(230 50% 5%/.6)}
.nav-inner{max-width:1280px;margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 24px}
@media(min-width:768px){.nav-inner{height:80px;padding:0 32px}}
@media(min-width:1024px){.nav-inner{padding:0 48px}}
.logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:700}
.logo-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--violet),var(--purple),var(--indigo));display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px hsla(260 90% 65%/.3)}
.nav-links{display:none;align-items:center;gap:32px;list-style:none}
@media(min-width:768px){.nav-links{display:flex}}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted-foreground);transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--primary)}
.btn{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:600;border-radius:12px;transition:all .3s}
.btn-primary{background:linear-gradient(to right,var(--violet),var(--purple),var(--indigo));color:#fff;box-shadow:0 0 30px hsla(260 90% 65%/.3)}
.btn-primary:hover{box-shadow:0 0 30px hsla(195 90% 60%/.3);transform:scale(1.05)}
.btn-ghost{background:hsla(230 30% 10%/.5);border:1px solid var(--border);color:var(--foreground);backdrop-filter:blur(4px)}
.btn-ghost:hover{background:var(--card);border-color:hsla(260 90% 65%/.5)}
.nav-cta{display:none;align-items:center;gap:16px}
@media(min-width:768px){.nav-cta{display:flex}}
.burger{display:block;background:none;border:none;color:var(--foreground);cursor:pointer;padding:8px;border-radius:8px}
@media(min-width:768px){.burger{display:none}}
.mnav{display:none;background:hsla(230 30% 10%/.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.mnav.open{display:block}
.mnav a{display:block;padding:14px 24px;font-weight:500;color:var(--muted-foreground)}
.mnav a.active{background:hsla(260 90% 65%/.1);color:var(--primary)}

main{flex:1;padding-top:64px}
@media(min-width:768px){main{padding-top:80px}}

/* ===== generic section ===== */
section{position:relative;overflow:hidden}
.sec-pad{padding:80px 0}
@media(min-width:768px){.sec-pad{padding:112px 0}}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:9999px;border:1px solid var(--border);background:hsla(230 30% 10%/.6);backdrop-filter:blur(4px);font-size:14px;color:var(--muted-foreground)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
h2.title{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:16px}
@media(min-width:768px){h2.title{font-size:42px}}
.sub{color:var(--muted-foreground);font-size:18px;max-width:672px;margin:0 auto}
.center{text-align:center}
.mb16{margin-bottom:64px}
.grid-grad{background-image:linear-gradient(hsla(260 40% 60% / .07) 1px,transparent 1px),linear-gradient(90deg,hsla(260 40% 60% / .07) 1px,transparent 1px);background-size:60px 60px}

/* card */
.card{border:1px solid var(--border);background:hsla(230 30% 10%/.4);backdrop-filter:blur(4px);border-radius:16px;transition:all .5s}
.card:hover{border-color:hsla(260 90% 65%/.4)}
.glass{background:hsla(230 30% 10%/.7);backdrop-filter:blur(12px);border:1px solid hsla(230 25% 20%/.5)}

/* ===== FOOTER ===== */
footer{border-top:1px solid var(--border);background:hsla(230 30% 10%/.5)}
.foot{max-width:1280px;margin:0 auto;padding:48px 24px}
@media(min-width:768px){.foot{padding:48px 32px}}
.f-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-bottom:32px}
@media(min-width:768px){.f-grid{grid-template-columns:2fr 1fr 1fr}}
.f-grid h4{font-weight:600;margin-bottom:16px}
.f-grid ul{list-style:none}
.f-grid li{margin-bottom:8px;font-size:14px;color:var(--muted-foreground)}
.f-grid a:hover{color:var(--primary)}
.f-bottom{border-top:1px solid var(--border);padding-top:32px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted-foreground)}
@media(min-width:768px){.f-bottom{flex-direction:row;align-items:center}}

/* icon box */
.ic-box{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,hsla(260 90% 65%/.2),hsla(245 90% 60%/.2));display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.ic-box svg{width:20px;height:20px;color:var(--primary)}
.big-btn{padding:16px 32px;font-size:16px;border-radius:12px}
.sect-hr{width:96px;height:4px;margin:24px auto 0;border-radius:9999px;background:linear-gradient(to right,var(--violet),var(--purple),var(--indigo))}
.page-h1{font-size:36px;font-weight:700;margin-bottom:16px}
.hero-glow{background:radial-gradient(ellipse at top,hsla(260 60% 30%/.3),transparent 60%)}

/* ===== RESPONSIVE (>=768) ===== */
@media(min-width:768px){
  .cta-row{flex-direction:row!important}
  .hero-grid{grid-template-columns:repeat(4,1fr)!important}
  .battle-grid{grid-template-columns:1fr 1fr!important}
  .b-metrics{grid-template-columns:repeat(4,1fr)!important}
  .gmv-grid{grid-template-columns:repeat(3,1fr)!important}
  .feat-grid{grid-template-columns:repeat(3,1fr)!important}
  .scene-grid{grid-template-columns:repeat(4,1fr)!important}
  .shot-grid{grid-template-columns:repeat(3,1fr)!important}
  .sys-grid{grid-template-columns:repeat(4,1fr)!important}
  .plan-grid{grid-template-columns:repeat(3,1fr)!important}
  .tut-2{grid-template-columns:1fr 1fr!important}
}
@media(min-width:1024px){
  .ct-grid{grid-template-columns:3fr 2fr!important}
}