*{margin:0;padding:0;box-sizing:border-box}
body{background:#00060f;color:#cde4f5;font-family:'Segoe UI',Arial,sans-serif;font-size:16px;line-height:1.8}
a{color:#00c8ff;text-decoration:none}a:hover{text-decoration:underline}
.site-nav{background:rgba(0,6,15,.95);border-bottom:1px solid rgba(0,200,255,.15);padding:14px 0;position:sticky;top:0;z-index:99}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.nav-logo{font-size:22px;font-weight:900;color:#fff;letter-spacing:-1px}
.nav-logo span{color:#00c8ff}
.nav-links{display:flex;gap:20px;flex-wrap:wrap}
.nav-links a{font-size:14px;color:rgba(205,228,245,.7)}
.nav-links a:hover{color:#00c8ff}
.hero-blog{background:linear-gradient(135deg,#000d1a 0%,#001a30 100%);padding:60px 20px 40px;text-align:center;border-bottom:1px solid rgba(0,200,255,.1)}
.hero-blog .stag{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:#00c8ff;margin-bottom:14px}
.hero-blog h1{font-size:clamp(24px,4vw,42px);font-weight:900;color:#fff;line-height:1.2;max-width:860px;margin:0 auto 18px}
.hero-blog .meta{font-size:13px;color:rgba(205,228,245,.5)}
.article-wrap{max-width:860px;margin:0 auto;padding:48px 20px 80px}
h2{font-size:clamp(18px,2.5vw,26px);font-weight:800;color:#fff;margin:40px 0 16px;line-height:1.3}
h3{font-size:18px;font-weight:700;color:#7de3ff;margin:28px 0 12px}
p{margin-bottom:18px;color:rgba(205,228,245,.85)}
ul,ol{margin:0 0 20px 24px}
ul li,ol li{margin-bottom:8px;color:rgba(205,228,245,.8)}
.highlight-box{background:rgba(0,200,255,.07);border:1px solid rgba(0,200,255,.2);border-radius:12px;padding:24px 28px;margin:28px 0}
.highlight-box h3{margin-top:0}
table{width:100%;border-collapse:collapse;margin:24px 0;background:rgba(0,20,40,.4);border-radius:10px;overflow:hidden}
th{background:rgba(0,200,255,.15);color:#00c8ff;padding:12px 16px;text-align:left;font-size:13px;letter-spacing:.5px;text-transform:uppercase}
td{padding:12px 16px;border-bottom:1px solid rgba(0,200,255,.08);font-size:14px}
tr:last-child td{border-bottom:none}
.faq-section{margin:48px 0}
.faq-item{background:rgba(0,20,40,.6);border:1px solid rgba(0,180,255,.15);border-radius:12px;padding:0;margin-bottom:12px;overflow:hidden}
.faq-item summary{padding:18px 22px;cursor:pointer;font-weight:700;font-size:15px;color:#cde4f5;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary span.arrow{color:#00c8ff;font-size:20px;flex-shrink:0}
.faq-item .ans{padding:0 22px 18px;color:rgba(205,228,245,.8);font-size:14px}
.cta-box{background:linear-gradient(135deg,#001a30 0%,#00264d 100%);border:1px solid rgba(0,200,255,.25);border-radius:16px;padding:40px;text-align:center;margin:48px 0}
.cta-box h2{margin:0 0 12px;font-size:26px}
.cta-box p{color:rgba(205,228,245,.7);margin-bottom:24px}
.btn{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#0090cc,#00c8ff);color:#00060f;font-weight:800;border-radius:8px;font-size:15px;letter-spacing:.5px}
.btn:hover{opacity:.9;text-decoration:none}
.blog-footer{background:#000d1a;border-top:1px solid rgba(0,200,255,.1);padding:40px 20px;text-align:center}
.blog-footer p{font-size:13px;color:rgba(205,228,245,.4)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:32px 0}
.related-card{background:rgba(0,20,40,.6);border:1px solid rgba(0,200,255,.12);border-radius:10px;padding:18px}
.related-card a{font-size:14px;font-weight:700;color:#00c8ff}
.related-card p{font-size:12px;color:rgba(205,228,245,.5);margin:6px 0 0}
.breadcrumb{font-size:12px;color:rgba(205,228,245,.4);margin-bottom:24px}
.breadcrumb a{color:rgba(0,200,255,.6)}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:24px 0}
.spec-card{background:rgba(0,200,255,.05);border:1px solid rgba(0,200,255,.15);border-radius:10px;padding:16px;text-align:center}
.spec-card .val{font-size:22px;font-weight:900;color:#00c8ff}
.spec-card .lbl{font-size:11px;color:rgba(205,228,245,.5);letter-spacing:.8px;text-transform:uppercase;margin-top:4px}

.blog-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.blog-card{background:rgba(0,20,40,.6);border:1px solid rgba(0,200,255,.12);border-radius:12px;padding:24px}
.blog-card h3{font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;line-height:1.4}
.blog-card p{font-size:13px;color:rgba(205,228,245,.6);margin-bottom:14px}
.read-more{font-size:13px;color:#00c8ff}

/* ─── Breadcrumb bar ──────────────────────────────── */
.breadcrumb-bar{
  background:rgba(0,20,40,.7);
  border-bottom:1px solid rgba(0,200,255,.1);
  padding:10px 24px;
  font-size:13px;
  color:rgba(205,228,245,.5);
}
.breadcrumb-bar a{
  color:#00c8ff;
  text-decoration:none;
}
.breadcrumb-bar a:hover{text-decoration:underline;}
.breadcrumb-bar span{color:rgba(205,228,245,.7);}