/* ---------- Блог ---------- */
html{ scroll-behavior:smooth; }
body{
  background:radial-gradient(ellipse 120% 70% at 50% -10%, #14151d 0%, var(--bg-0) 55%);
}

.orb{ filter:blur(90px); opacity:.35; }
.orb.a{ width:44vw; height:44vw; left:-10%; top:-18%; background:radial-gradient(circle, var(--accent), transparent 70%); animation:float1 32s ease-in-out infinite; }
.orb.b{ width:36vw; height:36vw; right:-10%; top:30%; background:radial-gradient(circle, var(--accent-2), transparent 70%); animation:float2 36s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding:16px 32px;
  background:rgba(10,10,14,.5);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--stroke);
}
.brand{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:600; letter-spacing:-.005em; }
.brand .dot{ width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 0 10px var(--accent); }
.brand .sub{ color:var(--ink-faint); font-weight:400; font-size:13px; }

nav.top{ margin-left:auto; display:flex; align-items:center; gap:6px; }
nav.top a{
  color:var(--ink-dim); text-decoration:none; font-size:13.5px;
  padding:9px 14px; border-radius:20px; transition:.25s var(--ease);
}
nav.top a:hover{ color:var(--ink); background:var(--glass); }
nav.top a.cta{
  color:#fff; background:linear-gradient(150deg, var(--accent), #1f5fd6);
  box-shadow:0 8px 18px -8px rgba(58,141,255,.6);
}

@media (max-width:720px){
  nav.top a:not(.cta){ display:none; }
  header{ padding:14px 18px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:2;
  padding:96px 32px 70px; max-width:840px; margin:0 auto; text-align:center;
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
  padding:6px 14px; border:1px solid var(--stroke); border-radius:20px; background:var(--glass);
  margin-bottom:22px;
  opacity:0; animation:rise .7s var(--ease) .05s forwards;
}
.hero .pulse-dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-3); box-shadow:0 0 8px var(--accent-3); }
h1.title{
  font-size:clamp(34px,6vw,58px); font-weight:650; letter-spacing:-.02em; line-height:1.05;
  margin:0 0 18px;
  opacity:0; animation:rise .8s var(--ease) .12s forwards;
  background:linear-gradient(180deg, #ffffff, #c7cbd6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{
  font-size:16.5px; color:var(--ink-dim); max-width:520px; margin:0 auto; line-height:1.65;
  opacity:0; animation:rise .8s var(--ease) .2s forwards;
}

/* ---------- Filter row ---------- */
.filters{
  position:relative; z-index:2;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  max-width:900px; margin:0 auto 50px; padding:0 24px;
  opacity:0; animation:rise .7s var(--ease) .28s forwards;
}
.tag{
  font-size:13px; padding:8px 16px; border-radius:20px;
  border:1px solid var(--stroke); color:var(--ink-dim); cursor:pointer;
  background:var(--glass); transition:.25s var(--ease);
}
.tag.active, .tag:hover{ color:var(--ink); border-color:var(--stroke-strong); background:var(--glass-strong); }

/* ---------- Featured post ---------- */
.container{ position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:0 32px 100px; }

.featured{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--stroke);
  background:var(--glass);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  margin-bottom:56px;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 40px 90px -30px rgba(0,0,0,.6);
  cursor:pointer;
  transition:transform .4s var(--ease), border-color .4s var(--ease);
}
.featured:hover{ transform:translateY(-3px); border-color:var(--stroke-strong); }
.featured .visual{
  position:relative; min-height:280px;
  background:
    radial-gradient(circle at 30% 30%, rgba(58,141,255,.35), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(124,92,255,.3), transparent 55%),
    linear-gradient(160deg, #1a1b24, #0d0e13);
  display:flex; align-items:center; justify-content:center;
}
.featured .visual svg{ width:64px; height:64px; opacity:.9; }
.featured .body{ padding:38px 40px; display:flex; flex-direction:column; justify-content:center; }
.kicker{ font-size:12px; color:var(--accent-3); letter-spacing:.05em; text-transform:uppercase; margin-bottom:12px; font-weight:600; }
.featured h2{ font-size:26px; font-weight:650; letter-spacing:-.015em; margin:0 0 12px; line-height:1.2; }
.featured p{ font-size:14.5px; color:var(--ink-dim); line-height:1.6; margin:0 0 20px; }
.post-meta{ display:flex; align-items:center; gap:14px; font-size:12.5px; color:var(--ink-faint); }
.post-meta .avatar{
  width:24px; height:24px; border-radius:50%; background:linear-gradient(150deg,var(--accent-2),var(--accent));
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff;
}
@media (max-width:720px){ .featured{ grid-template-columns:1fr; } .featured .visual{ min-height:180px; } .featured .body{ padding:28px 26px; } }

/* ---------- Post grid ---------- */
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.section-head h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; margin:0; }
.section-head span{ font-size:13px; color:var(--ink-faint); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.post{
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--stroke); background:var(--glass);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  cursor:pointer;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  opacity:0; animation:rise .6s var(--ease) forwards;
}
.post:nth-child(1){ animation-delay:.32s; }
.post:nth-child(2){ animation-delay:.36s; }
.post:nth-child(3){ animation-delay:.4s; }
.post:nth-child(4){ animation-delay:.44s; }
.post:nth-child(5){ animation-delay:.48s; }
.post:nth-child(6){ animation-delay:.52s; }
.post:hover{ transform:translateY(-4px); border-color:var(--stroke-strong); background:var(--glass-strong); }
.post .thumb{
  height:130px;
  background:linear-gradient(160deg, var(--c1,#1a1b24), var(--c2,#0d0e13));
  position:relative;
}
.post .thumb::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.12), transparent 60%);
}
.post .pbody{ padding:20px; }
.post .kicker{ margin-bottom:9px; font-size:11px; }
.post h4{ font-size:15.5px; font-weight:600; margin:0 0 8px; letter-spacing:-.005em; line-height:1.35; }
.post p{ font-size:13px; color:var(--ink-dim); line-height:1.55; margin:0 0 14px; }
.post .post-meta{ font-size:11.5px; }

.filters-empty{
  text-align:center; color:var(--ink-faint); font-size:13.5px; padding:30px 0;
}

/* ---------- Newsletter / footer ---------- */
.subscribe{
  margin-top:70px; padding:48px 40px; text-align:center;
  border-radius:var(--radius-xl); border:1px solid var(--stroke);
  background:linear-gradient(160deg, rgba(58,141,255,.08), rgba(124,92,255,.05));
  backdrop-filter:blur(20px);
}
.subscribe h3{ font-size:22px; font-weight:650; margin:0 0 10px; letter-spacing:-.01em; }
.subscribe p{ color:var(--ink-dim); font-size:14px; margin:0 0 24px; }
.sub-form{ display:flex; gap:10px; max-width:380px; margin:0 auto; }
.sub-form input{
  flex:1; font-family:inherit; font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--stroke); border-radius:12px;
  padding:12px 14px; outline:none; transition:.3s var(--ease);
}
.sub-form input:focus{ border-color:rgba(58,141,255,.55); box-shadow:0 0 0 4px rgba(58,141,255,.14); }
.sub-form button{
  font-family:inherit; font-size:13.5px; font-weight:600; color:#fff; cursor:pointer;
  padding:12px 20px; border:none; border-radius:12px;
  background:linear-gradient(150deg, var(--accent), #1f5fd6);
  transition:transform .2s var(--ease);
}
.sub-form button:hover{ transform:translateY(-1px); }
@media (max-width:480px){ .sub-form{ flex-direction:column; } }

footer.site{
  position:relative; z-index:2; text-align:center;
  padding:40px 24px; color:var(--ink-faint); font-size:12.5px;
  border-top:1px solid var(--stroke);
}
footer.site a{ color:var(--ink-dim); text-decoration:none; }

@media (prefers-reduced-motion:reduce){
  .hero .eyebrow, h1.title, .hero p.lead, .filters, .post{ animation:none !important; opacity:1; }
}