:root{
  --brand-gradient: linear-gradient(90deg, #3558F2 0%, #7B4EF1 50%, #B84DDA 100%);
  --blue:#2980FE;
  --blue-dark:#1768E8;
  --text:#1f2937;
  --muted:#667085;
  --light:#f5f7fb;
  --line:#e5eaf3;
  --card:#ffffff;
  --radius:28px;
  --shadow:0 18px 50px rgba(45, 73, 142, .10);
}
*{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:#f7f9fd;
  line-height:1.72;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1120px, calc(100% - 32px));margin:0 auto}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(229,234,243,.85);
}
.header-inner{
  width:min(1180px, calc(100% - 28px));
  margin:0 auto;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#152238}
.logo img{width:38px;height:38px;border-radius:12px;object-fit:cover}
.nav-toggle{
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:9px 14px;
  color:#26344d;
  font-weight:700;
}
.site-nav{
  display:none;
  position:absolute;
  left:14px;
  right:14px;
  top:74px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--shadow);
}
.site-nav.is-open{display:grid;gap:4px}
.site-nav a{padding:11px 12px;border-radius:14px;color:#344054;font-size:15px}
.site-nav a:hover{background:#f0f5ff;color:var(--blue)}
.section{padding:64px 0}
.section-soft{background:#eef4ff}
.section-head{margin:0 0 26px}
.kicker,.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:#edf4ff;
  color:var(--blue);
  font-weight:800;
  font-size:13px;
}
h1,h2,h3{line-height:1.18;margin:0 0 14px;color:#111827}
h1{font-size:clamp(34px,8vw,64px);letter-spacing:-.04em}
h2{font-size:clamp(26px,4.8vw,42px);letter-spacing:-.03em}
h3{font-size:21px}
p{margin:0 0 14px;color:var(--muted)}
.lead{font-size:18px;color:#eef4ff}
.download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:13px 24px;
  border-radius:999px;
  background:#2980FE;
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 28px rgba(41,128,254,.24);
  transition:.2s ease;
}
.download-btn:hover{background:#1768E8;transform:translateY(-1px)}
.text-link{display:inline-flex;margin-top:6px;color:var(--blue);font-weight:800}
.text-link:hover{color:var(--blue-dark)}
.network-manager-hero{padding:26px 0 54px}
.hero-panel{
  overflow:hidden;
  position:relative;
  border-radius:34px;
  background:var(--brand-gradient);
  padding:30px;
  color:#fff;
  box-shadow:0 28px 80px rgba(62,75,210,.22);
}
.hero-panel:before,.hero-panel:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
  filter:blur(8px);
}
.hero-panel:before{right:-80px;top:-90px}
.hero-panel:after{left:36%;bottom:-160px}
.hero-content,.hero-visual{position:relative;z-index:1}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.hero-tags span,.floating-label{
  border:1px solid rgba(255,255,255,.36);
  color:#fff;
  background:rgba(255,255,255,.14);
  padding:8px 11px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
}
.hero-visual{
  margin-top:28px;
  padding:16px;
  border-radius:30px;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
}
.hero-visual img{margin:auto;max-height:460px;object-fit:contain}
.float-stack{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.daily-scenes,.simple-grid,.risk-grid,.faq-grid,.info-grid{
  display:grid;
  gap:16px;
}
.scene-card,.bento-card,.white-card,.risk-card,.faq-item,.step-card,.note-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px;
  box-shadow:0 10px 34px rgba(20,50,100,.06);
}
.scene-card .tag,.bento-card .tag,.risk-card .tag{
  display:inline-block;
  margin-bottom:12px;
  color:var(--blue);
  font-weight:800;
  font-size:13px;
}
.bento-feature-center{display:grid;gap:16px}
.bento-card.large{
  background:linear-gradient(135deg,#fff 0%,#eef5ff 100%);
}
.image-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:18px;
  box-shadow:var(--shadow);
}
.split-section,.module-panel{
  display:grid;
  gap:26px;
  align-items:center;
}
.module-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:24px;
  box-shadow:var(--shadow);
}
.feature-list,.check-list,.ordered-list{
  display:grid;
  gap:12px;
  margin:18px 0;
  padding:0;
  list-style:none;
}
.feature-list li,.check-list li,.ordered-list li{
  padding:12px 14px;
  border-radius:16px;
  background:#f6f8fc;
  color:#3a465c;
}
.public-wifi-section .wifi-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:32px;
  padding:24px;
  box-shadow:var(--shadow);
}
.wifi-cards{display:grid;gap:14px;margin-top:20px}
.privacy-strip{display:grid;gap:14px}
.device-stack{display:grid;gap:14px}
.device-pill{
  padding:16px;
  border-radius:20px;
  border:1px solid var(--line);
  background:#fff;
}
.process-steps{
  display:grid;
  gap:16px;
  counter-reset:step;
}
.step-card{position:relative;padding-top:54px}
.step-card:before{
  counter-increment:step;
  content:counter(step);
  position:absolute;
  left:20px;
  top:18px;
  width:28px;height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  font-weight:800;
}
.risk-card{border-left:4px solid var(--blue)}
.cta-section{
  margin:40px auto 70px;
  width:min(1120px, calc(100% - 32px));
  border-radius:34px;
  background:var(--brand-gradient);
  padding:38px 24px;
  color:#fff;
  text-align:center;
  box-shadow:0 24px 70px rgba(62,75,210,.20);
}
.cta-section h2,.cta-section p{color:#fff}
.page-hero{
  padding:44px 0 24px;
}
.page-hero-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:34px;
  padding:28px;
  box-shadow:var(--shadow);
}
.content-layout{display:grid;gap:22px;padding:28px 0 68px}
.article-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  padding:24px;
  box-shadow:var(--shadow);
}
.side-panel{
  display:grid;
  gap:14px;
}
.tip-box{
  border-radius:24px;
  background:#eef5ff;
  border:1px solid #d9e7ff;
  padding:20px;
}
.download-card{
  margin-top:22px;
  padding:22px;
  border-radius:26px;
  background:#f6f9ff;
  border:1px solid var(--line);
}
.faq-item h3{font-size:18px}
.site-footer{
  background:#111827;
  color:#cfd6e5;
  padding:48px 0 0;
}
.site-footer p,.site-footer a{color:#cfd6e5}
.site-footer a{display:block;margin:8px 0}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:24px}
.footer-brand{font-size:20px;font-weight:900;color:#fff;margin-bottom:10px}
.site-footer h3{color:#fff;font-size:16px;margin-bottom:10px}
.footer-bottom{
  margin-top:34px;
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px;
  text-align:center;
  color:#9ca3af;
  font-size:14px;
}
@media (min-width:700px){
  .daily-scenes{grid-template-columns:repeat(2,1fr)}
  .simple-grid,.risk-grid,.faq-grid,.info-grid,.wifi-cards,.privacy-strip,.device-stack{grid-template-columns:repeat(2,1fr)}
  .process-steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
}
@media (min-width:980px){
  .nav-toggle{display:none}
  .site-nav{
    position:static;
    display:flex;
    align-items:center;
    gap:4px;
    padding:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .site-nav a{font-size:14px}
  .hero-panel{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:34px;
    align-items:center;
    padding:54px;
  }
  .hero-visual{margin-top:0}
  .daily-scenes{grid-template-columns:repeat(3,1fr)}
  .bento-feature-center{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:minmax(170px,auto);
  }
  .bento-card.large{grid-column:span 2;grid-row:span 2}
  .bento-card.wide{grid-column:span 2}
  .split-section,.module-panel{grid-template-columns:1fr 1fr}
  .public-wifi-section .wifi-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
  .privacy-strip{grid-template-columns:repeat(3,1fr)}
  .device-stack{grid-template-columns:repeat(3,1fr)}
  .risk-grid{grid-template-columns:repeat(4,1fr)}
  .process-steps{grid-template-columns:repeat(3,1fr)}
  .content-layout{grid-template-columns:minmax(0,1fr) 330px}
  .article-panel{padding:34px}
}
@media (min-width:1180px){
  .section{padding:84px 0}
  .page-hero-card{padding:38px}
}