*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter','SF Pro Display',sans-serif;background:#0c0f1e;color:#e0e4f0;overflow-x:hidden}
a{text-decoration:none;color:inherit}img{max-width:100%;height:auto}

.nv{display:flex;align-items:center;justify-content:space-between;padding:18px 6%;background:rgba(12,15,30,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(255,255,255,.04)}
.nv-l{display:flex;align-items:center;gap:12px}
.nv-i{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;font-family:'JetBrains Mono',monospace;letter-spacing:0;box-shadow:0 4px 20px rgba(102,126,234,.4);border:1px solid rgba(255,255,255,.08)}
.nv-t{font-weight:700;font-size:16px;color:#f0ece8}
.nv-ln{display:flex;gap:24px}.nv-ln a{color:rgba(255,255,255,.3);font-size:11px;text-decoration:none;font-weight:500}.nv-ln a:hover,.nv-ln a.act{color:#fff}
.nv-r{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:10px;padding:8px 20px;font-size:11px;font-weight:600;text-decoration:none;display:inline-block;box-shadow:0 4px 15px rgba(102,126,234,.3)}

.hero{text-align:center;padding:60px 6% 50px;background:radial-gradient(ellipse at 50% 0,rgba(102,126,234,.08),transparent)}
.hero .bd{display:inline-flex;padding:4px 16px;border-radius:20px;background:rgba(102,126,234,.1);color:#667eea;font-size:10px;font-weight:500;margin-bottom:14px;letter-spacing:1px}
.hero h1{font-size:40px;font-weight:800;margin-bottom:8px;letter-spacing:-1px;color:#f0ece8}
.hero h1 em{font-style:normal;background:linear-gradient(135deg,#667eea,#a29bfe);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:13px;color:rgba(255,255,255,.25);margin-bottom:22px;max-width:500px;margin:0 auto 22px;line-height:1.6}
.hero .bt{display:flex;gap:12px;justify-content:center}
.hero .bt a{padding:10px 28px;border-radius:10px;font-size:12px;font-weight:600;text-decoration:none;display:inline-block}
.hero .b1{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 20px rgba(102,126,234,.3)}
.hero .b2{background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.06)}

.wp{max-width:1000px;margin:0 auto;padding:0 6%}
.s-tt{font-size:10px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;font-weight:600}

.glass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px}
.glass-i{padding:24px 16px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);text-align:center}
.glass-i .v{font-size:22px;font-weight:700;color:#f0ece8;margin-bottom:4px}
.glass-i .l{font-size:9px;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:1px}
.glass-i .sym{font-size:9px;color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.glass-i .pr{font-size:18px;font-weight:700;color:#f0ece8;margin:4px 0 2px}
.glass-i .ch{font-size:11px;font-weight:600}
.glass-i .up{color:#00b894}.glass-i .dn{color:#ff6b6b}

.glass-2{display:grid;grid-template-columns:2fr 1fr;gap:14px;margin-bottom:40px}
.glass-2 .c{padding:20px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(10px)}
.glass-2 .tt{font-size:9px;color:#667eea;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px;font-weight:600}
.rw{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:11px}
.rw:last-child{border:none}

.news-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:40px}
.news-i{display:block;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);text-decoration:none;color:inherit;backdrop-filter:blur(10px)}
.news-i:hover{border-color:rgba(102,126,234,.2)}
.news-i .t{font-size:13px;font-weight:600;color:#f0ece8;margin-bottom:3px;display:flex;justify-content:space-between}
.news-i .tg{font-size:8px;color:#667eea}
.news-i .s{font-size:10px;color:rgba(255,255,255,.2)}

.ft{padding:20px 6%;text-align:center;font-size:8px;color:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.03)}

/* Article */
.artp{max-width:700px;margin:0 auto;padding:40px 20px 50px}
.art-b{font-size:10px;color:#667eea;display:inline-block;margin-bottom:14px;text-decoration:none}
.art-b::before{content:"← "}
.art-h1{font-size:24px;font-weight:700;color:#f0ece8;margin-bottom:4px;line-height:1.3}
.art-m{font-size:9px;color:rgba(255,255,255,.1);margin-bottom:16px}
.ab{font-size:13px;color:rgba(255,255,255,.55);line-height:1.9}
.ab p{margin-bottom:14px}
.ab .disc{border:1px solid rgba(102,126,234,.1);border-radius:12px;padding:14px 18px;margin:20px 0;background:rgba(102,126,234,.03)}
.art-cta{text-align:center;padding:20px}
.art-cta a{display:inline-flex;padding:10px 32px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-size:12px;font-weight:600;text-decoration:none}
.art-rec{max-width:700px;margin:14px auto;padding:14px 20px;border:1px solid rgba(255,255,255,.04);border-radius:12px;text-align:center;font-size:11px;color:rgba(255,255,255,.2)}
.art-rec a{color:#667eea}

/* Category */
.ls{max-width:1000px;margin:0 auto;padding:40px 20px;display:grid;grid-template-columns:2fr 1fr;gap:24px}
.ls-h1{font-size:22px;font-weight:700;margin-bottom:16px;color:#f0ece8}
.ls-lnk{display:block;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;color:rgba(255,255,255,.5)}
.ls-lnk:hover{color:#fff}
.ls-sd{padding:16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);align-self:start}
.ls-sd .tt{font-size:9px;color:#667eea;font-weight:600;margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}
.ls-sd .s{font-size:11px;color:rgba(255,255,255,.2)}
.pg{display:flex;justify-content:center;gap:6px;padding:16px}
.pg a,.pg s{display:inline-block;padding:5px 12px;border-radius:6px;font-size:12px;color:rgba(255,255,255,.15)}
.pg a{border:1px solid rgba(255,255,255,.06)}
.pg .cur{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none}

.seo-h2{font-size:10px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;font-weight:600;border:none;background:none;padding:0}

@media(max-width:900px){
  .ls{grid-template-columns:1fr}
}
@media(max-width:768px){
  .glass-grid{grid-template-columns:repeat(2,1fr)}
  .glass-2,.news-2{grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .hero{padding:40px 6% 30px}
  .hero .bd{font-size:9px}
  .hero p{font-size:12px}
  .nv{padding:14px 4%}
  .nv-t{font-size:14px}
  .nv-ln{gap:14px}
  .nv-ln a{font-size:10px}
  .nv-r{padding:6px 14px;font-size:10px}
  .art-h1{font-size:20px}
  .artp{padding:24px 16px 30px}
  .art-cta a{padding:8px 24px;font-size:11px}
}
@media(max-width:480px){
  .glass-grid{grid-template-columns:1fr}
  .hero h1{font-size:22px}
  .hero{padding:30px 4% 24px}
  .nv{padding:10px 4%}
  .nv-l{gap:8px}
  .nv-i{width:28px;height:28px;font-size:12px}
  .nv-t{font-size:12px;letter-spacing:1px}
  .nv-ln{gap:8px}
  .nv-ln a{font-size:9px}
  .nv-r{padding:5px 10px;font-size:9px}
  .glass-i{padding:16px 10px}
  .glass-i .pr{font-size:15px}
  .glass-i .v{font-size:18px}
  .glass-2 .c{padding:14px}
  .rw{font-size:10px;padding:5px 0}
  .news-i{padding:10px 12px}
  .news-i .t{font-size:11px}
  .art-h1{font-size:17px}
  .ab{font-size:12px}
  .ab p{margin-bottom:10px}
}
@media(max-width:360px){
  .nv-ln{gap:4px}
  .nv-ln a{font-size:8px;letter-spacing:0}
  .nv-r{font-size:8px;padding:4px 8px}
  .hero h1{font-size:18px}
}