:root{--brand:#0a5cff;--brand2:#1bc7ff;--accent:#7c3aed;--text:#0f172a;--muted:#6b7280;--border:#e5e7eb;--bg:#f7f9fc;--surface:#fff;--shadow:0 8px 22px rgba(15,23,42,.08)}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Roboto,Arial,sans-serif;line-height:1.6}
button,a{font:inherit}
.container{width:min(1200px,calc(100% - 32px));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 6px 20px rgba(0,0,0,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.brand{color:#fff;text-decoration:none;font-size:22px;font-weight:800;letter-spacing:.2px}
.nav{display:flex;gap:6px}
.nav a{padding:8px 12px;border-radius:999px;color:#fff;text-decoration:none;white-space:nowrap;transition:.2s}
.nav a:hover,.nav a.active{background:rgba(255,255,255,.24);transform:translateY(-1px)}
main.container{padding-top:24px}
.hero{position:relative;overflow:hidden;margin-bottom:32px;padding:58px 24px;border-radius:16px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);text-align:center;box-shadow:0 16px 36px rgba(15,23,42,.08)}
.hero:before{content:"";position:absolute;inset:-50%;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.9),transparent 32%);pointer-events:none}
.hero>*{position:relative}
.hero h1{margin:0 0 12px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);background-clip:text;color:transparent;font-size:40px;line-height:1.25}
.hero>p{margin:0 auto 28px;color:#6b7280;font-size:18px}
.hero-stats{display:flex;justify-content:center;gap:48px;margin:18px auto 30px}
.hero-stats div{display:grid;gap:2px;min-width:110px}
.hero-stats strong{font-size:30px;line-height:1.25}
.hero-stats span{color:#6b7280;font-size:14px}
.blue{color:#1d4ed8}
.green{color:#059669}
.red{color:#dc2626}
.purple{color:#7c3aed}
.hero-actions{display:flex;justify-content:center;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 28px;border-radius:12px;border:0;text-decoration:none;font-weight:700;font-size:16px;cursor:pointer;transition:.25s}
.btn-primary,.btn-gradient{border:0;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.3)}
.btn-secondary{border:2px solid #3b82f6;background:#fff;color:#2563eb;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.btn:hover,.btn-gradient:hover,.featured-cta:hover{transform:translateY(-2px);box-shadow:0 9px 22px rgba(37,99,235,.25)}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}
.hero-tags span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.86);font-size:13px;box-shadow:0 3px 10px rgba(15,23,42,.04)}
.hero-tags .success{color:#059669}
.hero-tags .primary{color:#3b82f6}
.hero-tags .warning{color:#8b5cf6}
.hero-tags .danger{color:#d97706}
.section-card{margin-bottom:24px;padding:24px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.section-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-card h2{margin:0 0 8px;font-size:24px;color:#1f2937}
.section-header p,.section-subtitle{margin:0;color:var(--muted);font-size:16px}
.center{text-align:center}
.section-subtitle.center{max-width:640px;margin:0 auto 24px}
.seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-grid article{padding:20px;border:1px solid #dbeafe;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#fff)}
.seo-grid h3{margin:0 0 8px;font-size:18px;color:#1d4ed8}
.seo-grid p{margin:0 0 12px;color:var(--muted);font-size:14px}
.seo-grid a{color:#2563eb;font-size:14px;font-weight:700;text-decoration:none}
.seo-grid a:hover{text-decoration:underline}
.btn-gradient{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.btn-large{padding:15px 28px;font-size:16px}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding-top:4px}
.product-card{overflow:hidden;padding:0;border:1px solid var(--border);border-radius:14px;background:#fff;color:inherit;text-align:left;box-shadow:0 5px 16px rgba(15,23,42,.07);cursor:pointer;transition:.25s}
.product-card:hover{transform:translateY(-3px);border-color:#93c5fd;box-shadow:0 14px 28px rgba(59,130,246,.16)}
.product-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#fff}
.product-body{display:flex;align-items:flex-start;flex-direction:column;gap:10px;padding:16px}
.product-body strong{font-size:16px;line-height:1.45}
.product-body em,.info-card em{padding:4px 8px;border:1px solid #fde68a;border-radius:12px;background:#fffbeb;color:#92400e;font-size:12px;font-style:normal}
.table-wrap{overflow-x:auto;margin-bottom:24px;border-radius:8px;box-shadow:0 1px 4px rgba(15,23,42,.1)}
table{width:100%;min-width:680px;border-collapse:collapse;background:#fff}
th,td{padding:16px;text-align:center;border-bottom:1px solid var(--border)}
th{background:#f3f4f6;color:#374151;font-weight:700}
tbody tr:last-child td{border-bottom:0}
.yes{color:#10b981;font-weight:700}
.no{color:#d1d5db}
.level{font-weight:700}
.level.normal{color:#6b7280}
.level.bronze{color:#d97706}
.level.silver{color:#1d4ed8}
.level.gold{color:#dc2626}
.row-bronze{background:#fffbeb}
.row-silver{background:#eff6ff}
.row-gold{background:#f0fdf4}
.agent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.agent-card{padding:24px 16px;border:2px solid #d1d5db;border-radius:14px;background:#f9fafb;text-align:center}
.agent-card.bronze{border-color:#d97706;background:linear-gradient(135deg,#fef3c7,#fff)}
.agent-card.silver{border-color:#1d4ed8;background:linear-gradient(135deg,#dbeafe,#fff)}
.agent-card.gold{border-color:#dc2626;background:linear-gradient(135deg,#fee2e2,#fff)}
.agent-card>span{display:grid;place-items:center;width:50px;height:50px;margin:0 auto 14px;border-radius:50%;background:#6b7280;font-size:22px}
.agent-card.bronze>span{background:#d97706}
.agent-card.silver>span{background:#1d4ed8}
.agent-card.gold>span{background:#dc2626}
.agent-card h3{margin:0 0 6px;font-size:18px}
.agent-card p{margin:0 0 8px;font-size:14px}
.agent-card small{color:#9ca3af}
.upgrade{display:grid;width:100%;gap:5px;margin-top:24px;padding:16px;border:1px solid #86efac;border-radius:8px;background:#f0fdf4;color:#166534;text-align:center;cursor:pointer}
.upgrade span{color:#16a34a;font-size:14px}
.tool-grid,.reasons-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.info-card,.reason-card{padding:18px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(135deg,#f9fafb,#fff);text-align:center;transition:.25s}
.info-card:hover,.reason-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.09)}
.info-card h3,.reason-card h3{margin:0 0 10px;font-size:18px}
.info-card p,.reason-card p{margin:0 0 15px;color:var(--muted);font-size:14px;line-height:1.6}
.info-card div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.info-card em{border-color:#dbeafe;background:#eff6ff;color:#1d4ed8}
.info-card em.green-tag{border-color:#a7f3d0;background:#d1fae5;color:#059669}
.info-card em.purple-tag{border-color:#ddd6fe;background:#ede9fe;color:#7c3aed}
.icon{display:grid;place-items:center;width:70px;height:70px;margin:0 auto 18px;border-radius:16px;color:#fff;font-size:28px}
.blue-bg{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.green-bg{background:linear-gradient(135deg,#10b981,#059669)}
.purple-bg{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.orange-bg{background:linear-gradient(135deg,#f59e0b,#d97706)}
.red-bg{background:linear-gradient(135deg,#ef4444,#dc2626)}
.cyan-bg{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.lime-bg{background:linear-gradient(135deg,#84cc16,#65a30d)}
.orange-red-bg{background:linear-gradient(135deg,#f97316,#ea580c)}
.pink-bg{background:linear-gradient(135deg,#ec4899,#db2777)}
.extra-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.extra-card{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--border);border-radius:12px}
.extra-icon{display:grid;flex:0 0 50px;place-items:center;width:50px;height:50px;border-radius:12px;color:#fff;font-size:20px}
.extra-card h3{margin:0;font-size:16px}
.extra-card p{margin:2px 0;color:var(--muted);font-size:13px}
.extra-card small{color:#9ca3af}
.update-box,.partner-box{display:grid;gap:4px;margin-top:16px;padding:12px;border-radius:8px;background:#f3f4f6;text-align:center}
.update-box span,.partner-box span{color:var(--muted);font-size:14px}
.cta-row{margin-top:30px}
.operator-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.operator-card{padding:20px 12px;border:2px solid;border-radius:14px;text-align:center}
.operator-card.mobile{border-color:#dc2626;background:linear-gradient(135deg,#fef2f2,#fff)}
.operator-card.unicom{border-color:#ea580c;background:linear-gradient(135deg,#fff7ed,#fff)}
.operator-card.telecom{border-color:#1d4ed8;background:linear-gradient(135deg,#eff6ff,#fff)}
.operator-card.broadnet{border-color:#7c2d12;background:linear-gradient(135deg,#fffbeb,#fff)}
.operator-card>div{display:flex;align-items:center;justify-content:center;width:120px;height:60px;margin:0 auto 14px;padding:8px;border:1px solid var(--border);border-radius:12px;background:#fff}
.operator-card img{max-width:100%;max-height:100%;object-fit:contain}
.operator-card h3{margin:0 0 6px}
.operator-card.mobile h3{color:#dc2626}
.operator-card.unicom h3{color:#ea580c}
.operator-card.telecom h3{color:#1d4ed8}
.operator-card.broadnet h3{color:#7c2d12}
.operator-card p{margin:0 0 8px;color:var(--muted);font-size:14px}
.operator-card small{color:#9ca3af}
.featured{padding:32px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;text-align:center}
.featured h2{color:#fff;font-size:28px}
.featured>p{max-width:660px;margin:0 auto 24px;color:rgba(255,255,255,.9)}
.featured>div{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-bottom:20px}
.featured>div span{padding:10px 18px;border-radius:8px;background:rgba(255,255,255,.18)}
.featured-cta{padding:15px 28px;border:0;border-radius:12px;background:#fff;color:#667eea;font-weight:700;cursor:pointer;transition:.25s}
.faq-list{display:grid;max-width:860px;margin:20px auto 0;gap:12px}
.faq-list details{padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:#f8fafc}
.faq-list summary{color:#1f2937;font-weight:700;cursor:pointer}
.faq-list p{margin:10px 0 0;color:var(--muted);font-size:14px}
.friendly-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:20px}
.friendly-links a{padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:#f8fafc;color:#374151;text-decoration:none;font-size:14px;transition:.2s}
.friendly-links a:hover{border-color:#3b82f6;background:#3b82f6;color:#fff}
.site-footer{margin-top:60px;padding:40px 0 20px;border-top:1px solid var(--border);background:linear-gradient(135deg,#f8fafc,#e2e8f0)}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.footer-grid h3{margin:0 0 14px;font-size:16px}
.footer-grid a,.footer-button{display:block;margin-bottom:9px;padding:0;border:0;background:none;color:var(--muted);text-decoration:none;font-size:14px;text-align:left;cursor:pointer}
.footer-grid a:hover,.footer-button:hover{color:var(--brand)}
.footer-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding-block:24px;border-top:1px solid rgba(148,163,184,.35);border-bottom:1px solid rgba(148,163,184,.35)}
.footer-tags span{width:100%;color:var(--muted);font-size:14px}
.footer-tags a{padding:5px 12px;border:1px solid var(--border);border-radius:20px;background:#fff;color:#475569;text-decoration:none;font-size:13px}
.copyright{padding-top:20px;color:var(--muted);font-size:14px;text-align:center}
.service-float{position:fixed;right:24px;bottom:24px;z-index:45;display:flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-radius:999px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 12px 30px rgba(37,99,235,.35);cursor:pointer}
.service-float span{font-size:22px}
.service-dialog{width:min(400px,calc(100% - 32px));padding:32px;border:0;border-radius:20px;text-align:center;box-shadow:0 30px 80px rgba(15,23,42,.3)}
.service-dialog::backdrop{background:rgba(15,23,42,.58);backdrop-filter:blur(3px)}
.service-dialog h2{margin:12px 0 4px;font-size:24px}
.service-dialog p{margin:0 0 18px;color:var(--muted)}
.service-dialog img{display:block;width:min(260px,100%);height:auto;margin:0 auto 14px;border:1px solid var(--border);border-radius:14px}
.service-dialog small{color:var(--muted)}
.dialog-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:#dbeafe;color:#1d4ed8;font-size:13px;font-weight:700}
.dialog-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:26px;line-height:1;cursor:pointer}

@media(max-width:960px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.agent-grid,.operator-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-stats{gap:22px}
.hero-stats div{min-width:90px}
}

@media(max-width:768px){html{scroll-padding-top:122px}
.container{width:min(100% - 24px,1200px)}
.header-inner{align-items:stretch;flex-direction:column;gap:8px;padding:12px 0}
.brand{font-size:20px}
.nav{overflow-x:auto;padding-bottom:2px}
.nav a{background:rgba(255,255,255,.14);font-size:14px}
.hero{padding:38px 16px}
.hero h1{font-size:30px}
.hero>p{font-size:16px}
.hero-stats{align-items:center;flex-direction:column;gap:22px}
.hero-stats strong{font-size:26px}
.hero-actions{align-items:center;flex-direction:column}
.hero-actions .btn{width:min(100%,310px)}
.section-card{padding:16px}
.section-header{align-items:flex-start;flex-direction:column}
.seo-grid,.tool-grid,.reasons-grid{grid-template-columns:1fr}
.extra-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.service-float{right:14px;bottom:14px}
.service-float strong{display:none}
}

@media(max-width:520px){.product-grid,.agent-grid,.operator-grid{grid-template-columns:1fr}
.product-card img{height:auto;aspect-ratio:16/10}
.footer-grid{gap:20px 14px}
.featured{padding:28px 16px}
.featured h2{font-size:24px}
.btn-large{width:100%}
}

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