*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:#0b0b0d;color:#f5f5f5}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.nav{position:sticky;top:0;z-index:100;background:rgba(11,11,13,.9);backdrop-filter:blur(10px);border-bottom:1px solid #202026}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:70px}
.brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700}
.logo{width:24px;height:24px;border-radius:6px;background:#fff;display:inline-block;position:relative}
.logo:after{content:"";position:absolute;inset:6px;background:#000;border-radius:3px}
.nav-links{display:flex;gap:18px;flex-wrap:wrap;color:#d0d0d6;font-weight:600}
.nav-links a:hover,.footer-links a:hover,.post-card h3:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:999px;font-weight:700}
.btn-primary{background:#fff;color:#000}.btn-primary:hover{background:#e9e9e9}
.hero{padding:90px 0 68px;background:radial-gradient(circle at top,#17171d 0,#0b0b0d 60%)}
.hero h1{font-size:clamp(42px,7vw,86px);line-height:1.02;letter-spacing:-.05em;margin:0 0 18px}
.hero p{max-width:760px;font-size:clamp(18px,2.4vw,24px);color:#b0b0b8;line-height:1.65;margin:0 0 28px}
.section{padding:72px 0}.section-head{max-width:800px;margin:0 auto 34px;text-align:center}
.section-head h2{font-size:clamp(32px,4vw,54px);margin:0 0 12px;letter-spacing:-.04em}.section-head p{margin:0;color:#a2a2aa;line-height:1.7}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:#121216;border:1px solid #23232a;border-radius:24px;padding:26px}
.feature-card h3{margin:0 0 12px;font-size:24px}.feature-card p{margin:0;color:#a8a8b0;line-height:1.75}
.icon{width:52px;height:52px;border-radius:16px;background:#1a1a20;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:18px}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card{background:#121216;border:1px solid #23232a;border-radius:24px;overflow:hidden}
.post-thumb{aspect-ratio:16/9;background:#18181f}
.post-body{padding:20px 20px 24px}
.post-body .meta{display:inline-block;font-size:12px;font-weight:700;color:#bdbdc8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.post-card h3{margin:0 0 10px;font-size:24px;letter-spacing:-.03em}
.post-card p{margin:0;color:#a7a7b1;line-height:1.7}
.footer{padding:42px 0;border-top:1px solid #1e1e25;color:#8e8e98}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.article-wrap{max-width:860px;margin:0 auto;padding:48px 24px 72px}
.article-hero{padding:56px 0 22px}
.article-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#b6b6c0;font-weight:800}
.article-wrap h1{font-size:clamp(36px,5vw,62px);line-height:1.05;letter-spacing:-.05em;margin:12px 0 16px}
.article-wrap .lead{font-size:21px;color:#b0b0ba;line-height:1.7;margin-bottom:22px}
.article-wrap h2{font-size:32px;margin:34px 0 12px;letter-spacing:-.03em}
.article-wrap p,.article-wrap li{color:#c5c5cf;line-height:1.85;font-size:18px}
.article-wrap ul{padding-left:22px}
.article-thumb{border-radius:24px;overflow:hidden;border:1px solid #262631;margin:24px 0 26px}
.cta-box{background:#121216;border:1px solid #24242c;border-radius:24px;padding:28px;margin-top:34px}
.small-note{font-size:14px;color:#91919b}
@media (max-width:960px){.grid,.blog-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.grid,.blog-grid{grid-template-columns:1fr}.nav-inner{flex-direction:column;align-items:flex-start;padding:14px 0}.hero{padding-top:64px}}


.footer 

.brand{display:inline-flex;align-items:center;gap:12px;font-size:22px;font-weight:700}
.brand-logo-img{
  width:28px;
  height:28px;
  min-width:28px;
  max-width:28px;
  object-fit:contain;
  display:block;
  border-radius:6px;
  flex:0 0 28px;
}
.footer-brand .brand-logo-img{
  width:22px;
  height:22px;
  min-width:22px;
  max-width:22px;
  flex:0 0 22px;
  border-radius:5px;
}
.post-thumb{
  width:100%;
  height:auto;
  object-fit:cover;
}