.bl-hero{ position:relative; padding:104px 0 30px; overflow:hidden; }
.bl-hero::before{
  content:""; position:absolute; right:-140px; top:-150px; width:840px; height:680px;
  background:radial-gradient(circle, rgba(255,45,28,.26), transparent 62%);
  pointer-events:none;
}
.bhero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.76fr 1fr; gap:30px; align-items:center;
}
.bhero-copy h1{
  font-size:clamp(29px,3.1vw,42px); font-weight:700;
  letter-spacing:-.02em; margin:14px 0 15px;
}
.bhero-copy .lead{ max-width:390px; font-size:13.5px; }

.bhero-stats{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.bbox{
  display:flex; align-items:center; gap:11px;
  padding:13px 18px; border-radius:13px;
  background:var(--glass-bg); border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease;
}
.bbox:hover{ border-color:rgba(255,255,255,.21); transform:translateY(-3px); }
.bbox-ico{
  width:32px; height:32px; border-radius:10px; flex:none;
  background:rgba(255,45,28,.15); border:1px solid var(--glass-border);
  display:grid; place-items:center; color:var(--purple-light);
}
.bbox-ico svg{ width:17px; height:17px; }
.bbox strong{ display:block; font-family:var(--f-display); font-size:16px; font-weight:600; line-height:1.2; }
.bbox span{ font-size:10.5px; color:var(--muted-2); }

.bl-art{ position:relative; height:290px; }
.bl-laptop{
  position:absolute; left:12%; right:8%; top:6%;
  border-radius:10px 10px 3px 3px; overflow:hidden;
  background:var(--glass-bg);
  border:1px solid var(--glass-border); border-bottom:none;
  backdrop-filter:blur(30px) saturate(130%); -webkit-backdrop-filter:blur(30px) saturate(130%);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 20px 50px var(--glass-shadow);
}
.bl-top{
  display:flex; align-items:center; gap:7px;
  padding:7px 10px; border-bottom:1px solid var(--line-soft);
}
.bl-top .logo-mark{ width:15px; height:15px; border-radius:5px; }
.bl-top .logo-mark svg{ width:10px; height:10px; }
.bl-top b{ font-family:var(--f-display); font-size:9px; font-weight:600; }
.bl-top i{ margin-left:auto; width:5px; height:5px; border-radius:50%; background:var(--glass-bg-strong); }
.bl-panes{ display:flex; min-height:168px; }
.bl-side{
  width:22%; padding:8px 7px; display:flex; flex-direction:column; gap:6px;
  border-right:1px solid var(--line-soft); background:var(--glass-bg);
}
.bl-side span{ height:6px; border-radius:3px; background:var(--glass-bg-strong); }
.bl-side span:first-child{ background:rgba(255,107,95,.42); }
.bl-feed{ flex:1; padding:9px 10px; }
.bl-cover{
  height:74px; border-radius:8px; margin-bottom:8px;
  background:
    radial-gradient(circle at 50% 78%, rgba(255,170,160,.55), transparent 46%),
    linear-gradient(170deg,var(--glass-bg-strong),var(--glass-bg));
  position:relative; overflow:hidden;
}
.bl-cover::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:44%;
  background:linear-gradient(180deg,transparent,var(--glass-shadow));
  clip-path:polygon(0 100%,18% 46%,34% 74%,52% 30%,72% 66%,88% 40%,100% 100%);
}
.bl-line{ height:6px; border-radius:3px; background:var(--glass-bg-strong); margin-bottom:6px; }
.bl-line.w70{ width:70%; }
.bl-line.w45{ width:45%; }
.bl-cta{ width:64px; height:14px; border-radius:5px; margin-top:8px;
  background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.bl-base{
  position:absolute; left:4%; right:4%; bottom:0; height:9px;
  border-radius:0 0 9px 9px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border); border-top:none;
}
.float{
  position:absolute; width:52px; height:52px; border-radius:16px;
  background:var(--glass-bg-strong); border:1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(130%); -webkit-backdrop-filter:blur(30px) saturate(130%);
  display:grid; place-items:center; color:var(--purple-light);
  box-shadow:0 16px 34px -14px rgba(0,0,0,.85);
}
.float svg{ width:25px; height:25px; }
.fl1{ left:0;   top:26%; }
.fl2{ right:0;  top:34%; }
.fl3{ right:2%; top:62%; }

.bfilter{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; padding-bottom:22px; }

.blog-layout{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }

.featured{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1fr .92fr; gap:20px; align-items:center;
  padding:26px 26px; border-radius:var(--radius-lg); margin-bottom:18px;
  background:
    radial-gradient(circle at 78% 40%, rgba(255,45,28,.24), transparent 58%),
    var(--glass-bg);
  border:1px solid var(--line);
  transition:border-color .25s ease;
}
.featured:hover{ border-color:rgba(255,255,255,.21); }
.flag{
  display:inline-block; padding:4px 11px; border-radius:7px; margin-bottom:13px;
  background:rgba(255,45,28,.2); border:1px solid var(--glass-border);
  font-family:var(--f-display); font-size:10px; font-weight:600;
  letter-spacing:.09em; color:var(--text-body);
}
.featured h2{ font-size:clamp(19px,2vw,25px); font-weight:600; line-height:1.34; margin-bottom:11px; }
.featured h2 a:hover{ color:var(--purple-light); }
.featured > div > p{ color:var(--muted); font-size:12.5px; line-height:1.72; margin-bottom:18px; max-width:400px; }
.fmeta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }

.phones{ position:relative; height:200px; }
.ph{
  position:absolute; top:0; width:96px; height:190px;
  border-radius:16px; padding:9px 7px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(30px) saturate(130%); -webkit-backdrop-filter:blur(30px) saturate(130%);
  box-shadow:inset 0 1px 0 var(--glass-highlight), 0 20px 50px var(--glass-shadow);
}
.ph-a{ left:26%; transform:rotate(-7deg); }
.ph-b{ left:52%; top:12px; transform:rotate(5deg); }
.ph i.bar{ display:block; height:6px; border-radius:3px; background:var(--glass-bg-strong); margin-bottom:7px; }
.ph .av{ width:15px; height:15px; border-radius:50%; }
.ph .rowx{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.ph .rowx i{ flex:1; height:5px; border-radius:3px; background:var(--glass-bg-strong); }
.ph .bubble{ height:22px; border-radius:8px; margin-bottom:6px; background:rgba(255,45,28,.35); }
.ph .bubble.alt{ background:var(--glass-bg-strong); margin-left:16px; }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.post{
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius);
  background:var(--glass-bg); border:1px solid var(--line);
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.post:hover{
  transform:translateY(-5px); border-color:rgba(255,255,255,.21);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.40);
}
.post[hidden]{ display:none; }

.thumb{
  position:relative; height:132px;
  display:grid; place-items:center; overflow:hidden;
}
.thumb svg.wm{ width:56px; height:56px; color:var(--text-body); }
.thumb::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 26px);
}
.th-product { background:linear-gradient(150deg,rgba(255,45,28,.34),transparent 78%), var(--glass-bg-strong); }
.th-company { background:linear-gradient(150deg,rgba(255,45,28,.30),transparent 78%), var(--glass-bg-strong); }
.th-ai      { background:linear-gradient(150deg,rgba(255,170,160,.28),transparent 78%), var(--glass-bg-strong); }
.th-tech    { background:linear-gradient(150deg,rgba(220,51,40,.30),transparent 78%), var(--glass-bg-strong); }
.th-guides  { background:linear-gradient(150deg,rgba(255,120,104,.26),transparent 78%), var(--glass-bg-strong); }
.th-community{ background:linear-gradient(150deg,rgba(224,38,23,.28),transparent 78%), var(--glass-bg-strong); }

.cat{
  position:absolute; z-index:2; left:12px; top:12px;
  padding:4px 10px; border-radius:7px;
  font-family:var(--f-display); font-size:9.5px; font-weight:600;
  letter-spacing:.07em; color:#fff;
}
.c-product { background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.c-company { background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.c-ai      { background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.c-tech    { background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.c-guides  { background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }
.c-community{ background:linear-gradient(95deg,var(--accent),var(--accent-strong)); }

.post-body{ display:flex; flex-direction:column; flex:1; padding:16px 16px 15px; }
.post-body h3{ font-size:14.5px; font-weight:600; line-height:1.4; margin-bottom:8px; }
.post-body h3 a:hover{ color:var(--purple-light); }
.post-body > p{ color:var(--muted-2); font-size:11.5px; line-height:1.65; margin-bottom:14px; }

.meta{ display:flex; align-items:center; gap:9px; margin-top:auto; }
.avatar{
  width:26px; height:26px; border-radius:50%; flex:none;
  background:linear-gradient(145deg,var(--accent),var(--accent-strong)); color:#fff;
  display:grid; place-items:center;
  font-family:var(--f-display); font-size:10px; font-weight:600;
}
.avatar.lg{ width:34px; height:34px; font-size:12px; }
.meta-text{ min-width:0; }
.meta-text b{ display:block; font-family:var(--f-display); font-size:11px; font-weight:500; }
.meta-text span{ font-size:10px; color:var(--muted-2); }
.meta .link{ margin-left:auto; font-size:11px; white-space:nowrap; }

.no-posts{ padding:40px 0; text-align:center; color:var(--muted-2); font-size:13px; }

.pager{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:24px; }
.pager button{
  min-width:36px; padding:8px 13px; border-radius:9px; cursor:pointer;
  background:var(--glass-bg); border:1px solid var(--line);
  font-family:var(--f-display); font-size:12.5px; color:var(--text-body);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.pager button:hover:not(:disabled){ border-color:rgba(255,255,255,.21); color:var(--text-main); }
.pager button.on{
  background:linear-gradient(95deg,var(--purple),var(--purple-2));
  border-color:transparent; color:#fff;
}
.pager button:disabled{ opacity:.4; cursor:default; }
.pager .gap{ color:var(--muted-2); padding:0 4px; }

.side{ display:flex; flex-direction:column; gap:16px; position:sticky; top:88px; }
.card-box{
  padding:20px; border-radius:var(--radius);
  background:var(--glass-bg); border:1px solid var(--line);
}
.card-box h3{ font-size:16px; font-weight:600; margin-bottom:15px; }

.recent a{ display:flex; gap:11px; padding:9px 0; }
.recent a + a{ border-top:1px solid var(--line-soft); }
.rthumb{
  width:54px; height:44px; border-radius:8px; flex:none;
  display:grid; place-items:center; overflow:hidden;
}
.rthumb svg{ width:20px; height:20px; color:var(--text-body); }
.recent b{ display:block; font-family:var(--f-display); font-size:11.5px; font-weight:500; line-height:1.45; }
.recent span{ font-size:10px; color:var(--muted-2); }
.recent a:hover b{ color:var(--purple-light); }
.view-all{ display:inline-flex; gap:6px; margin-top:12px; font-size:11.5px; color:var(--purple-light); }

.cats button{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:9px 0; cursor:pointer; text-align:left;
  background:none; border:none; border-bottom:1px solid var(--line-soft);
  font-size:12px; color:var(--muted);
  transition:color .2s ease;
}
.cats button:last-child{ border-bottom:none; }
.cats button:hover{ color:var(--purple-light); }
.count{
  min-width:24px; padding:2px 7px; border-radius:6px; text-align:center;
  background:rgba(255,45,28,.16); border:1px solid var(--glass-border);
  font-size:10.5px; color:var(--accent-soft);
}

.sub-box p{ color:var(--muted-2); font-size:11.5px; line-height:1.65; margin-bottom:14px; }
.sub-box input{
  width:100%; padding:10px 13px; border-radius:9px; margin-bottom:10px;
  background:var(--glass-bg); border:1px solid var(--line);
  font-size:12px; color:var(--text-main); outline:none;
}
.sub-box input::placeholder{ color:#909099; }
.sub-box input:focus{ border-color:var(--glass-border); }
.sub-box .btn{ width:100%; justify-content:center; }

.tags-wrap{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-pill{
  padding:6px 12px; border-radius:8px; cursor:pointer;
  background:var(--glass-bg); border:1px solid var(--line);
  font-size:11px; color:var(--text-body);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.tag-pill:hover{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.21); color:var(--text-main); }

.art-head{ padding:96px 0 0; }
.art-head .crumb{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted-2); margin-bottom:20px; }
.art-head .crumb a{ color:var(--muted); }
.art-head .crumb a:hover{ color:var(--purple-light); }

.art-wrap{ max-width:800px; margin-inline:auto; }
.art-title{ font-size:clamp(26px,3vw,38px); font-weight:700; line-height:1.24; letter-spacing:-.02em; margin:14px 0 16px; }
.art-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); }
.art-meta .dot-sep{ color:var(--muted-2); }

.art-cover{
  position:relative; height:250px; margin:24px 0 28px;
  border-radius:var(--radius-lg); overflow:hidden;
  display:grid; place-items:center;
}
.art-cover svg.wm{ width:86px; height:86px; color:var(--text-body); }
.art-cover::after{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 34px);
}

.art-body{ font-size:14.5px; line-height:1.85; color:var(--text-body); }
.art-body p{ margin-bottom:20px; }
.art-body h2{
  font-size:22px; font-weight:600; color:var(--text-main);
  margin:34px 0 14px; letter-spacing:-.01em;
}
.art-body h3{ font-size:17px; font-weight:600; color:var(--text-main); margin:26px 0 11px; }
.art-body ul,
.art-body ol{ margin:0 0 20px 0; padding-left:0; }
.art-body li{ position:relative; padding-left:22px; margin-bottom:9px; }
.art-body ul li::before{
  content:""; position:absolute; left:2px; top:11px;
  width:6px; height:6px; border-radius:2px; background:var(--purple-light);
  transform:rotate(45deg);
}
.art-body ol{ counter-reset:n; }
.art-body ol li{ counter-increment:n; }
.art-body ol li::before{
  content:counter(n) "."; position:absolute; left:0; top:0;
  color:var(--purple-light); font-family:var(--f-display); font-weight:600; font-size:13px;
}
.art-body a{ color:var(--purple-light); text-decoration:underline; text-underline-offset:3px; }
.art-body a:hover{ color:var(--pink); }
.art-body strong{ color:var(--text-main); font-weight:600; }
.art-body blockquote{
  margin:26px 0; padding:18px 22px;
  border-left:3px solid var(--purple);
  border-radius:0 12px 12px 0;
  background:rgba(255,45,28,.08);
  font-family:var(--f-display); font-size:15px; line-height:1.7; color:var(--text-body);
}
.art-note{
  margin:26px 0; padding:18px 20px; border-radius:var(--radius);
  background:var(--glass-bg); border:1px solid var(--line);
  font-size:13px; line-height:1.75;
}
.art-note b{ color:var(--text-main); }

.art-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:30px 0 0; padding-top:24px; border-top:1px solid var(--line); }
.art-tags a{
  padding:6px 12px; border-radius:8px;
  background:var(--glass-bg); border:1px solid var(--line);
  font-size:11px; color:var(--text-body);
}
.art-tags a:hover{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.21); color:var(--text-main); }

.art-nav{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:26px; }
.art-nav a{
  padding:16px 18px; border-radius:var(--radius);
  background:var(--glass-bg); border:1px solid var(--line);
  transition:border-color .25s ease, transform .25s ease;
}
.art-nav a:hover{ border-color:rgba(255,255,255,.21); transform:translateY(-3px); }
.art-nav span{ display:block; font-size:10.5px; color:var(--muted-2); margin-bottom:5px; }
.art-nav b{ font-family:var(--f-display); font-size:13px; font-weight:600; line-height:1.45; }
.art-nav .next{ text-align:right; }
.art-nav .empty{ opacity:.35; pointer-events:none; }

.related{ margin-top:44px; }
.related h2{ font-size:20px; font-weight:600; margin-bottom:18px; }
.related .posts{ grid-template-columns:repeat(3,1fr); }

@media (max-width:1080px){
  .bhero-grid{ grid-template-columns:1fr; gap:28px; }
  .blog-layout{ grid-template-columns:1fr; }
  .side{ position:static; }
  .posts{ grid-template-columns:repeat(2,1fr); }
  .featured{ grid-template-columns:1fr; }
  .phones{ height:210px; }
}

@media (max-width:820px){
  .bl-hero{ padding-top:92px; }
  .bl-art{ height:240px; }
  .art-head{ padding-top:88px; }
  .art-cover{ height:190px; }
  .related .posts{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .posts,
  .related .posts{ grid-template-columns:1fr; }
  .bbox{ flex:1 1 44%; padding:11px 12px; }
  .art-title{ font-size:25px; }
  .art-body{ font-size:14px; }
  .art-nav{ grid-template-columns:1fr; }
  .art-nav .next{ text-align:left; }
  .bl-art{ height:200px; }
  .float{ width:42px; height:42px; border-radius:13px; }
  .float svg{ width:20px; height:20px; }
}

.thumb.has-img img,
.art-cover.has-img img,
.ico.has-img img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.thumb.has-img{ background:var(--glass-bg-strong); }
.art-cover.has-img{
  background:var(--glass-bg-strong); overflow:hidden;
  border:1px solid var(--line);
}
.ico.has-img{ overflow:hidden; padding:0; background:var(--glass-bg-strong); }
.ico.has-img img{ border-radius:inherit; }