:root{
  --bg:#0b1020;
  --bg2:#11182c;
  --panel:rgba(18,24,42,.94);
  --panel2:rgba(28,35,58,.92);
  --text:#f7f2e8;
  --muted:#b9bfd0;
  --line:rgba(255,255,255,.09);
  --orange:#ff7a2f;
  --red:#ff4d4d;
  --cream:#fff1d4;
  --gold:#ffcb6f;
  --shadow:0 24px 60px rgba(0,0,0,.36);
  --radius:22px;
  --container:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 10% 5%, rgba(255,122,47,.20), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(255,77,77,.16), transparent 20%),
    linear-gradient(180deg, #080d1a 0%, #0c1223 42%, #0f1528 100%);
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  line-height:1.75;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:54px 54px;
  opacity:.25;
  z-index:0;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.site-wrap,.site-header,.section,.site-footer{position:relative;z-index:1}
.container{width:min(100% - 32px, var(--container));margin:0 auto}
.site-header{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(16px);
  background:rgba(8,12,24,.72);
  border-bottom:1px solid var(--line);
}
.header-inner{
  min-height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:54px;height:54px;border-radius:16px;box-shadow:0 14px 30px rgba(255,122,47,.18)}
.brand-copy{display:flex;flex-direction:column;line-height:1.1}
.brand-copy strong{font-size:1.08rem;letter-spacing:.06em}
.brand-copy small{margin-top:4px;color:var(--muted)}
.site-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.site-nav a{
  padding:11px 15px;border-radius:999px;border:1px solid transparent;
  color:var(--muted);transition:.22s ease
}
.site-nav a:hover,.site-nav a.active{
  color:var(--text);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)
}
.menu-toggle{
  display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.04);color:var(--text)
}
.menu-toggle span{display:block;width:20px;height:2px;margin:4px auto;background:currentColor;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.section{padding:86px 0}
.hero{padding-top:56px}
.hero-grid,.page-hero-inner,.two-col,.three-col{display:grid;gap:28px}
.hero-grid,.page-hero-inner{grid-template-columns:1.08fr .92fr;align-items:center}
.hero-copy h1,.page-hero h1{
  margin:14px 0 18px;line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(2.05rem, 4.1vw, 4.55rem)
}
.lead{color:#d7dce9;font-size:1.03rem;max-width:66ch}
.eyebrow,.section-kicker{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem
}
.hero-actions,.download-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;
  border-radius:999px;border:1px solid var(--line);font-weight:700;transition:.24s ease
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:#241400;background:linear-gradient(135deg, #ffe39a 0%, #ff9a39 48%, #ff5648 100%);
  box-shadow:0 16px 34px rgba(255,110,55,.3)
}
.btn-secondary{background:rgba(255,255,255,.04)}
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.trust-row div{
  padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)
}
.trust-row strong{display:block;font-size:1.48rem;color:var(--gold)}
.trust-row span{color:var(--muted);font-size:.92rem}
.hero-panel,.page-hero-card,.info-card,.feature-card,.content-card,.guide-step,.review-card,.shot-card,.faq-item,.download-panel,.topic-card,.timeline-item{
  background:linear-gradient(180deg, rgba(21,29,51,.96), rgba(14,20,38,.96));
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
.device-card{
  padding:20px;border-radius:calc(var(--radius) - 2px);
  background:
    radial-gradient(circle at 8% 8%, rgba(255,122,47,.14), transparent 26%),
    radial-gradient(circle at 92% 0%, rgba(255,203,111,.12), transparent 24%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06)
}
.device-top{display:flex;align-items:center;gap:10px;color:var(--muted);margin-bottom:18px}
.status-dot{width:10px;height:10px;border-radius:50%;background:#39d46a;box-shadow:0 0 0 5px rgba(57,212,106,.16)}
.panel-banners{display:grid;gap:12px}
.banner-card,.mini-stat{
  padding:16px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)
}
.banner-card span,.mini-stat em,.card-tag,.guide-step span,.shot-card figcaption,.timeline-item span,.topic-card span{color:var(--muted);font-style:normal;font-size:.86rem}
.banner-card strong,.mini-stat strong{display:block;margin-top:8px;font-size:1.04rem}
.banner-card.warm{background:linear-gradient(180deg, rgba(255,122,47,.14), rgba(255,255,255,.03))}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.section-heading{display:grid;gap:10px;max-width:850px;margin:0 auto 24px}
.section-heading h2,.content-card h2,.guide-step h2,.download-panel h2,.page-hero-card strong,.topic-card h2,.timeline-item h2{
  margin:0;line-height:1.16;font-size:clamp(1.5rem, 2.6vw, 2.42rem)
}
.section-heading p{margin:0;color:var(--muted)}
.stats-grid,.feature-grid,.shot-grid,.content-links,.review-grid,.faq-grid,.guide-grid,.categories-grid,.timeline{
  display:grid;gap:20px
}
.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.shot-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.content-links{grid-template-columns:repeat(3,minmax(0,1fr))}
.review-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.faq-grid,.faq-accordion{display:grid;gap:16px}
.guide-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.categories-grid,.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}
.two-col{grid-template-columns:1.2fr .8fr}
.three-col{grid-template-columns:repeat(3,minmax(0,1fr))}
.info-card,.feature-card,.guide-step,.review-card,.page-hero-card,.content-card,.topic-card,.timeline-item{padding:24px}
.info-card p,.feature-card p,.content-card p,.guide-step p,.review-card p,.faq-item p,.page-hero-card p,.download-panel p,.topic-card p,.timeline-item p{color:#d2d7e4}
.feature-icon{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:16px;
  border-radius:16px;border:1px solid rgba(255,122,47,.18);
  background:linear-gradient(180deg, rgba(255,122,47,.16), rgba(255,255,255,.04));color:#ffd396;font-weight:800
}
.shot-card{padding:14px;overflow:hidden}
.shot-card img{border-radius:18px;border:1px solid rgba(255,255,255,.08)}
.shot-card figcaption{margin-top:12px}
.content-link,.topic-card,.timeline-item{
  display:grid;gap:10px;
  background:
    radial-gradient(circle at top right, rgba(255,77,77,.13), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  padding:24px;border-radius:var(--radius);border:1px solid var(--line)
}
.content-link span,.topic-card span,.timeline-item span{color:var(--gold);letter-spacing:.08em;text-transform:uppercase}
.review-card{margin:0}
.review-card footer{color:var(--gold);font-weight:700}
.review-list{display:grid;gap:10px}
.review-list blockquote{
  margin:0;padding:14px 16px;border-left:3px solid var(--orange);background:rgba(255,255,255,.03);border-radius:0 14px 14px 0;color:#dbe0ea
}
.faq-item{padding:0;overflow:hidden}
.faq-item summary{
  cursor:pointer;list-style:none;padding:20px 22px;font-weight:700;position:relative
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:22px;top:18px;color:var(--gold);font-size:1.2rem}
.faq-item[open] summary::after{content:"–"}
.faq-item p{margin:0;padding:0 22px 22px}
.page-hero-card{display:grid;gap:14px;align-content:center}
.highlight-card{border-color:rgba(255,122,47,.2)}
.check-list{margin:0 0 22px;padding-left:18px;color:#dfe3eb}
.download-panel{padding:28px;display:flex;justify-content:space-between;gap:24px;align-items:center}
.timeline-item span{font-weight:700}
.site-footer{
  padding:30px 0 38px;border-top:1px solid var(--line);background:rgba(2,4,9,.32)
}
.footer-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:start
}
.footer-grid strong{display:inline-block;margin-bottom:8px}
.footer-grid a{display:block;color:var(--muted);margin:6px 0}
.footer-grid p{margin:0;color:var(--muted)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1;transform:translateY(0)}
@media (max-width: 1080px){
  .hero-grid,.page-hero-inner,.two-col,.stats-grid,.feature-grid,.shot-grid,.content-links,.review-grid,.categories-grid,.timeline,.footer-grid{grid-template-columns:1fr 1fr}
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
  .menu-toggle{display:inline-flex;flex-direction:column;justify-content:center}
  .site-nav{
    position:absolute;left:16px;right:16px;top:calc(100% + 1px);
    padding:12px;background:rgba(8,12,24,.98);border:1px solid var(--line);
    border-radius:18px;box-shadow:var(--shadow);display:grid;gap:6px;
    opacity:0;pointer-events:none;transform:translateY(-10px);transition:.22s ease
  }
  .site-nav.open{opacity:1;pointer-events:auto;transform:translateY(0)}
  .header-inner{position:relative}
  .section{padding:68px 0}
  .hero-grid,.page-hero-inner,.two-col,.three-col,.stats-grid,.feature-grid,.shot-grid,.content-links,.review-grid,.categories-grid,.timeline,.footer-grid,.trust-row,.mini-stats,.guide-grid{grid-template-columns:1fr}
  .download-panel,.hero-actions,.download-actions{flex-direction:column;align-items:stretch}
  .btn{width:100%}
}