/* ===== GSO multipage shared stylesheet (blog + product pages) ===== */
:root{
  --bg:#05080f;--bg2:#0a0f1e;--panel:rgba(255,255,255,.045);--line:rgba(255,255,255,.09);
  --cyan:#22d3ee;--blue:#3b82f6;--violet:#818cf8;--red:#e2262b;
  --txt:#e9edf8;--mut:#8b95b5;--card:#0b1120;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--txt);line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:14px}
.kicker::before{content:'';width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,8,15,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1180px;margin:0 auto;padding:0 24px;height:76px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo img{height:40px;display:block}
.menu{display:flex;gap:4px;align-items:center}
.menu a{padding:9px 14px;font-size:.87rem;font-weight:600;color:var(--mut);border-radius:10px;transition:.22s;cursor:pointer;white-space:nowrap}
.menu a:hover{color:#fff;background:rgba(255,255,255,.06)}
.menu a.active{color:#fff}
.menu a.cta{margin-left:8px;border-radius:100px;padding:11px 22px;color:#fff;background:linear-gradient(135deg,var(--red),#ff5a5e);box-shadow:0 6px 22px rgba(226,38,43,.35)}
.menu a.cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(226,38,43,.5)}
.menu .mode{cursor:pointer;padding:8px 12px;border:1px solid var(--line);border-radius:100px;font-size:.9rem}
/* dropdown */
.menu-item{position:relative}
.drop-toggle{display:inline-flex;align-items:center;gap:6px}
.drop-caret{font-size:.7rem}
.drop-panel{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#0a0f1e;border:1px solid var(--line);border-radius:14px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.menu-item:hover .drop-panel{opacity:1;visibility:visible;transform:none}
.drop-panel a{display:block;padding:10px 12px;border-radius:10px}
.drop-panel a b{display:block;color:#fff;font-size:.9rem}
.drop-panel a small{color:var(--mut);font-size:.76rem}
.navburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.navburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.25s}

/* ===== ARTICLE ===== */
main{min-height:60vh}
.pg-hero{padding:132px 0 22px}
.crumb{font-size:.8rem;color:var(--mut);margin-bottom:16px}
.crumb a:hover{color:var(--cyan)}
.crumb span{color:var(--txt)}
.art{max-width:800px;margin:0 auto;padding:126px 24px 40px}
.art .art-cat{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25);padding:5px 12px;border-radius:100px;margin-bottom:16px}
.art h1{font-size:clamp(1.7rem,4vw,2.6rem);font-weight:800;line-height:1.18;letter-spacing:-.02em;margin-bottom:16px}
.art-meta{color:var(--mut);font-size:.86rem;margin-bottom:26px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.art-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--mut)}
.art-cover{width:100%;border-radius:18px;border:1px solid var(--line);margin-bottom:34px;aspect-ratio:16/9;object-fit:cover;background:var(--bg2)}
.art-body{font-size:1.06rem}
.art-body p{margin:0 0 20px;color:#d7dcec}
.art-body h3{font-size:1.28rem;font-weight:800;margin:34px 0 12px;color:#fff;letter-spacing:-.01em}
.art-body b{color:#fff}
.art-body blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--cyan);background:var(--panel);border-radius:0 12px 12px 0;color:#eef2ff;font-size:1.08rem}
.art-body i{color:var(--cyan);font-style:normal}
.art-body ul,.art-body ol{margin:0 0 20px 22px;color:#d7dcec}
.art-body li{margin-bottom:8px}

/* CTA band */
.cta-band{max-width:800px;margin:44px auto 0;padding:30px 32px;border-radius:20px;background:linear-gradient(120deg,rgba(34,211,238,.12),rgba(129,140,248,.1));border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta-band h4{font-size:1.22rem;font-weight:800;color:#fff;margin-bottom:4px}
.cta-band p{color:var(--mut);font-size:.92rem}
.btn-red{background:linear-gradient(135deg,var(--red),#ff5a5e);color:#fff;padding:13px 26px;border-radius:100px;font-weight:700;font-size:.92rem;white-space:nowrap;box-shadow:0 8px 24px rgba(226,38,43,.35)}
.btn-red:hover{transform:translateY(-1px)}

/* related */
.related{max-width:800px;margin:50px auto 0;padding:0 24px}
.related h4{font-size:1.1rem;font-weight:800;margin-bottom:18px;color:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rel-card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.22s}
.rel-card:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.4)}
.rel-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.rel-card .rc-b{padding:14px}
.rel-card .rc-cat{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:6px}
.rel-card h5{font-size:.92rem;font-weight:700;line-height:1.35;color:#eef2ff}

/* ===== BLOG INDEX ===== */
.blog-head{padding:130px 0 8px;text-align:center}
.blog-head h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.blog-head h1 em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-head p{color:var(--mut);max-width:600px;margin:0 auto;font-size:1.02rem}
.chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:30px auto 0;max-width:900px}
.chip{padding:8px 16px;border-radius:100px;border:1px solid var(--line);background:var(--panel);color:var(--mut);font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s}
.chip:hover,.chip.on{color:#04121a;background:linear-gradient(135deg,var(--cyan),#67e8f9);border-color:transparent}
.feat{max-width:1180px;margin:36px auto 0;padding:0 24px}
.feat-card{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden}
.feat-card img{width:100%;height:100%;min-height:280px;object-fit:cover}
.feat-card .fc-b{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.feat-card .rc-cat{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin-bottom:12px}
.feat-card h2{font-size:1.7rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-bottom:14px}
.feat-card p{color:var(--mut);margin-bottom:18px}
.feat-card .fmeta{color:var(--mut);font-size:.82rem}
.grid{max-width:1180px;margin:26px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bcard{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.22s;display:flex;flex-direction:column}
.bcard:hover{transform:translateY(-4px);border-color:rgba(34,211,238,.4);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.bcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.bcard .bc-b{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.bcard .rc-cat{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.bcard h3{font-size:1.04rem;font-weight:700;line-height:1.35;color:#eef2ff;margin-bottom:8px}
.bcard p{color:var(--mut);font-size:.86rem;flex:1}
.bcard .bmeta{color:var(--mut);font-size:.76rem;margin-top:12px}

/* ===== FOOTER ===== */
footer{background:#05080f;border-top:1px solid var(--line);padding:60px 0 30px;margin-top:70px}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:34px}
footer p{color:var(--mut);font-size:.88rem;margin-top:6px}
footer h5{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:14px}
footer .fl{display:block;color:var(--mut);font-size:.88rem;margin-bottom:9px;cursor:pointer}
footer .fl:hover{color:var(--cyan)}
.f-bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:22px;color:var(--mut);font-size:.8rem;text-align:center}

/* ===== LIGHT THEME ===== */
body.light{--bg:#f6f8fd;--bg2:#eef2fb;--panel:#ffffff;--line:#e3e8f5;--txt:#0f1836;--mut:#5b6788;--card:#ffffff}
body.light{background:var(--bg);color:var(--txt)}
body.light nav{background:rgba(246,248,253,.82);border-bottom:1px solid var(--line)}
body.light .menu a{color:#5b6788}
body.light .menu a:hover,body.light .menu a.active{color:#0f1836;background:rgba(0,0,0,.05)}
body.light .drop-panel{background:#fff}
body.light .drop-panel a b{color:#0f1836}
body.light .navburger span{background:#0f1836}
body.light .art-body p,body.light .art-body ul,body.light .art-body ol{color:#33406b}
body.light .art-body h3,body.light .art-body b{color:#0f1836}
body.light .art-body blockquote{color:#1b2547}
body.light .bcard h3,body.light .feat-card h2,body.light .rel-card h5{color:#0f1836}
body.light footer{background:#eef2fb}
body.light .logo img.lg-d,body.light img.lg-d{display:none}
body.light .logo img.lg-l,body.light img.lg-l{display:block}
.lg-l{display:none}

/* ===== RESPONSIVE ===== */
@media(max-width:940px){
  .navburger{display:flex}
  .menu{position:absolute;top:76px;right:0;left:0;flex-direction:column;align-items:stretch;gap:2px;background:#0a0f1e;border-bottom:1px solid var(--line);padding:12px 16px 18px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:.22s}
  body.light .menu{background:#f6f8fd}
  .menu.open{transform:none;opacity:1;visibility:visible}
  .menu a{padding:12px 14px;font-size:.95rem}
  .menu a.cta{margin:8px 0 0;text-align:center}
  .menu-item{width:100%}
  .drop-panel{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:transparent;border:0;padding:4px 0 4px 12px;min-width:0}
  .feat-card{grid-template-columns:1fr}
  .feat-card img{min-height:200px}
  .grid,.rel-grid{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .grid,.rel-grid,.f-grid{grid-template-columns:1fr}
  .art{padding-top:104px}
  .cta-band{flex-direction:column;text-align:center;align-items:stretch}
}