/* Стили сайта: лендинг, блог, политика. Один файл на все страницы —
   шапка и подвал общие, значит и оформление должно быть общим. */
/* ── Токены ─────────────────────────────────────────────────────────────── */
:root{
  --blue:#1866E0;        /* основная кнопка: белый текст 5.2:1 */
  --blue-dark:#1552C7;
  --ink:#0B2A63;         /* заголовки: 12.8:1 на белом */
  --body:#3A4A66;        /* текст: 8.9:1 на белом */
  --orange:#F97316;      /* декоративные плашки, тёмный текст сверху */
  --orange-deep:#EA580C; /* ценник: белый крупный текст 3.6:1 */
  --orange-soft:#FFEDD5;
  --sky:#F2F7FF;
  --sky-2:#E3EFFF;
  --line:#D6E4FA;
  --white:#fff;
  --ok:#0F7B4F;
  --err:#C02626;
  --r:18px;
  --r-lg:28px;
  --shadow:0 2px 6px rgba(11,42,99,.06), 0 12px 32px rgba(11,42,99,.09);
  --shadow-lg:0 8px 20px rgba(11,42,99,.08), 0 32px 64px rgba(11,42,99,.14);
  --ease:cubic-bezier(.2,.7,.3,1);
  --wrap:1160px;
}

/* ── База ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--white); color:var(--body);
  font:400 17px/1.6 Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{
  font-family:Nunito,Manrope,sans-serif; color:var(--ink);
  margin:0 0 .5em; line-height:1.08; letter-spacing:-.02em; font-weight:900;
}
h1{font-size:clamp(2.05rem,1.25rem + 3.6vw,4rem); font-weight:1000; line-height:1.02}
h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.75rem)}
h3{font-size:clamp(1.1rem,1rem + .5vw,1.35rem); line-height:1.25}
p{margin:0 0 1em}
a{color:var(--blue); text-decoration-thickness:.08em; text-underline-offset:.18em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.section{padding:clamp(56px,7vw,104px) 0}
.section--sky{background:var(--sky)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--white); color:var(--ink);
  padding:12px 18px; border-radius:12px; font-weight:700; transition:top .18s var(--ease)}
.skip:focus{top:12px}
.lead{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem); max-width:62ch}
.center{text-align:center; margin-inline:auto}
.eyebrow{
  font-family:Nunito,sans-serif; font-weight:900; font-size:.82rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--blue); margin:0 0 .7em;
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:52px; padding:14px 26px; border:0; border-radius:14px; cursor:pointer;
  font:800 1.02rem/1.15 Nunito,sans-serif; text-decoration:none; text-align:center;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--blue); color:#fff; box-shadow:0 6px 18px rgba(24,102,224,.32)}
.btn--primary:hover{background:var(--blue-dark); transform:translateY(-2px); box-shadow:0 12px 26px rgba(24,102,224,.38)}
.btn--ghost{background:var(--white); color:var(--ink); box-shadow:inset 0 0 0 2px var(--line)}
.btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--blue); transform:translateY(-2px)}
.btn--big{min-height:60px; padding:18px 34px; font-size:1.12rem; border-radius:16px}
.btn svg{width:20px; height:20px; flex:none}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.header{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid transparent;
  transition:box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.header.is-stuck{box-shadow:0 6px 24px rgba(11,42,99,.08); border-bottom-color:var(--line)}
.header__inner{display:flex; align-items:center; gap:16px; min-height:70px}
.brand{display:flex; align-items:center; gap:10px; font:900 1.08rem/1 Nunito,sans-serif;
  color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.brand__mark{width:38px; height:38px; border-radius:11px; background:var(--blue); flex:none;
  display:grid; place-items:center; color:#fff}
/* Логотип белый на прозрачном фоне, поэтому лежит на синей плитке —
   без неё в светлой шапке его бы просто не было видно. */
.brand__mark img{width:26px; height:26px; object-fit:contain; display:block}
.nav{display:flex; align-items:center; gap:26px; margin-left:auto}
.nav a{color:var(--body); text-decoration:none; font-weight:600; font-size:.97rem;
  transition:color .18s var(--ease)}
.nav a:hover{color:var(--blue)}
.header .btn{min-height:46px; padding:11px 20px; font-size:.97rem}
.burger{display:none; margin-left:auto; width:46px; height:46px; border:0; border-radius:12px;
  background:var(--sky-2); color:var(--ink); cursor:pointer; align-items:center; justify-content:center}
.burger svg{width:24px; height:24px}
@media (max-width:900px){
  .nav{
    position:absolute; inset:100% 0 auto; flex-direction:column; align-items:stretch; gap:0;
    background:var(--white); border-bottom:1px solid var(--line); padding:8px 20px 18px;
    box-shadow:0 18px 34px rgba(11,42,99,.1);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open{opacity:1; visibility:visible; transform:none}
  .nav a{padding:14px 4px; border-bottom:1px solid var(--sky-2)}
  .burger{display:flex}
  .header__cta{display:none}
}

/* ── Первый экран ───────────────────────────────────────────────────────── */
/* Фотография тёмная, поэтому весь первый экран светлый по тёмному:
   заголовок цвета --ink на ней не читался бы. */
.hero{position:relative; overflow:hidden; isolation:isolate; background:#061229}
.hero__bg,.hero__veil,.hero__glow,.hero__sheen{position:absolute; inset:0; pointer-events:none}

/* Снимок. Увеличен заранее: зум ходит вокруг этого масштаба, и края
   не должны обнажаться в крайних положениях. */
.hero__bg{
  background:url("hero.jpg") center right/cover no-repeat;
  transform:scale(1.08); will-change:transform;
}
/* Затемнение слева направо: текст лежит слева, персонаж справа остаётся видимым. */
.hero__veil{background:linear-gradient(100deg,
  rgba(4,16,40,.95) 0%, rgba(4,16,40,.9) 34%, rgba(4,16,40,.62) 56%,
  rgba(4,16,40,.25) 78%, rgba(4,16,40,.1) 100%)}
/* Тёплое свечение — подхватывает оранжевый ореол на самой фотографии. */
.hero__glow{background:radial-gradient(38rem 30rem at 72% 42%,
  rgba(249,150,60,.3) 0%, rgba(249,115,22,.12) 42%, rgba(249,115,22,0) 70%)}
/* Блик: узкая косая полоса света, изредка проходящая по экрану. */
.hero__sheen{overflow:hidden}
.hero__sheen::before{
  content:""; position:absolute; top:-60%; left:-40%; width:26%; height:220%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%,
    rgba(255,255,255,.16) 45%, rgba(255,255,255,.26) 50%,
    rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 100%);
  transform:translateX(-40vw) rotate(18deg); opacity:0;
}
@media (prefers-reduced-motion:no-preference){
  /* Очень медленно: за полминуты кадр едва заметно наезжает и отходит. */
  .hero__bg{animation:heroZoom 34s var(--ease) infinite}
  .hero__glow{animation:heroGlow 21s ease-in-out infinite}
  .hero__sheen::before{animation:heroSheen 13s ease-in-out infinite 3s}
}
@keyframes heroZoom{
  0%,100%{transform:scale(1.08)}
  50%    {transform:scale(1.19)}
}
@keyframes heroGlow{
  0%,100%{opacity:.75; transform:translate3d(0,0,0) scale(1)}
  50%    {opacity:1;   transform:translate3d(-2%,1.5%,0) scale(1.08)}
}
/* Большую часть времени блик за кадром — иначе он мельтешит. */
@keyframes heroSheen{
  0%,  100%{transform:translateX(-40vw) rotate(18deg); opacity:0}
  8%       {opacity:.55}
  38%      {transform:translateX(150vw) rotate(18deg); opacity:0}
}

.hero__grid{display:grid; grid-template-columns:minmax(0,640px); gap:clamp(28px,4vw,64px);
  align-items:center; min-height:clamp(34rem,78vh,46rem);
  padding-block:clamp(48px,7vw,92px) clamp(56px,7vw,96px)}
.hero__body{position:relative; z-index:1}
.hero h1{color:#fff; text-shadow:0 2px 24px rgba(2,10,28,.45)}
.hero h1 .accent{color:#8FC2FF}
.hero .lead{color:rgba(255,255,255,.86)}
.badge{
  display:inline-flex; align-items:center; gap:.5em; background:var(--white); color:var(--ink);
  box-shadow:inset 0 0 0 2px var(--sky-2); border-radius:999px; padding:8px 16px 8px 12px;
  font:800 .86rem/1 Nunito,sans-serif; margin-bottom:20px;
}
.badge svg{width:17px; height:17px; color:var(--blue)}
.hero__price{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:26px 0 22px}
.tag{
  position:relative; display:inline-flex; align-items:baseline; gap:.14em;
  background:var(--orange-deep); color:#fff; border-radius:14px 20px 20px 14px;
  padding:12px 26px 12px 40px; font-family:Nunito,sans-serif; font-weight:1000;
  box-shadow:0 10px 30px rgba(234,88,12,.45); letter-spacing:-.03em;
}
.tag::before{content:""; position:absolute; left:16px; top:50%; width:11px; height:11px;
  margin-top:-5.5px; border-radius:50%; background:#fff; opacity:.92}
.tag__num{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.4rem); line-height:1}
.tag__cur{font-size:clamp(1.3rem,1rem + 1.2vw,2rem); line-height:1}
.hero__once{font-weight:700; color:#fff; max-width:16ch}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:30px}
.hero__cta .btn{flex:0 1 auto}
.facts{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; max-width:520px}
.fact{display:flex; gap:11px; align-items:flex-start; font-weight:600; color:#fff; font-size:.97rem}
.fact svg{width:22px; height:22px; flex:none; color:var(--orange); margin-top:1px}

@media (max-width:900px){
  /* Текст ложится поверх всей фотографии — затемняем её равномернее. */
  .hero__bg{background-position:68% center}
  .hero__veil{background:linear-gradient(178deg,
    rgba(4,16,40,.9) 0%, rgba(4,16,40,.84) 45%, rgba(4,16,40,.92) 100%)}
  .hero__grid{min-height:0}
  .facts{max-width:none}
}
@media (max-width:480px){
  .facts{grid-template-columns:1fr}
  .hero__cta .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .hero__bg,.hero__glow,.hero__sheen::before{animation:none}
  .hero__sheen::before{opacity:0}
}

/* ── Карточки, сетки ────────────────────────────────────────────────────── */
.grid{display:grid; gap:20px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){ .grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .grid--3,.grid--4,.grid--2{grid-template-columns:1fr} }
.card{
  background:var(--white); border-radius:var(--r); padding:26px; box-shadow:var(--shadow);
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.card h3{margin-bottom:.45em}
.card p{margin:0; font-size:1rem}
.card__ico{width:52px; height:52px; border-radius:15px; background:var(--sky-2); color:var(--blue);
  display:grid; place-items:center; margin-bottom:16px}
.card__ico svg{width:27px; height:27px}
.card--pain .card__ico{background:var(--orange-soft); color:#B8430A}
.section--sky .card{box-shadow:0 1px 3px rgba(11,42,99,.05), 0 10px 26px rgba(11,42,99,.07)}

/* Шаги */
.steps{counter-reset:s; display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.step{position:relative; background:var(--white); border-radius:var(--r); padding:30px 26px 26px; box-shadow:var(--shadow)}
.step__n{
  counter-increment:s; width:46px; height:46px; border-radius:14px; background:var(--blue); color:#fff;
  display:grid; place-items:center; font:1000 1.3rem/1 Nunito,sans-serif; margin-bottom:16px;
}
.step__n::before{content:counter(s)}
.step:nth-child(2) .step__n{background:#2E7BEE}
.step:nth-child(3) .step__n{background:var(--orange-deep)}

/* Что входит */
.checks{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 26px}
@media (max-width:900px){ .checks{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .checks{grid-template-columns:1fr} }
.check{display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink); font-weight:600}
.check svg{width:23px; height:23px; flex:none; color:#0F7B4F; margin-top:1px}

/* Цена */
.price{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:stretch}
@media (max-width:860px){ .price{grid-template-columns:1fr} }
.price__main{
  background:linear-gradient(140deg,#0B2A63 0%,#123E8F 55%,#1552C7 100%); color:#fff;
  border-radius:var(--r-lg); padding:clamp(28px,4vw,44px); position:relative; overflow:hidden;
}
.price__main h3{color:#fff; font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem)}
.price__main p{color:#CFE0FA}
.price__big{display:flex; align-items:baseline; gap:.15em; font:1000 clamp(3rem,2rem + 5vw,5.2rem)/1 Nunito,sans-serif;
  letter-spacing:-.04em; margin:6px 0 4px}
.price__once{display:inline-block; background:var(--orange-deep); color:#fff; border-radius:999px;
  padding:7px 16px; font:900 .88rem/1 Nunito,sans-serif; letter-spacing:.04em; margin-bottom:20px}
.price__main .btn{width:100%; max-width:340px}
.price__side{background:var(--white); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow)}
.price__side h3{margin-bottom:.7em}
.price__list li{display:flex; gap:11px; padding:11px 0; border-bottom:1px solid var(--sky-2); font-size:.99rem}
.price__list li:last-child{border-bottom:0}
.price__list svg{width:20px; height:20px; flex:none; color:#8CA3C4; margin-top:3px}
.price__list b{color:var(--ink); font-weight:700}

/* Работы */
.work{display:block; text-decoration:none; color:inherit; background:var(--white); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .24s var(--ease), box-shadow .24s var(--ease)}
.work:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.work__prev{aspect-ratio:16/10; padding:14px; display:flex; flex-direction:column; gap:8px}
.work__prev .t{height:26%; border-radius:10px; display:flex; align-items:flex-end; padding:9px}
.work__prev .t span{display:block; height:7px; width:52%; border-radius:999px; background:rgba(255,255,255,.85)}
.work__prev .r{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; flex:1}
.work__prev .r i{border-radius:8px; background:rgba(255,255,255,.72)}
.work__meta{padding:16px 18px 20px}
.work__meta strong{display:block; font:900 1.05rem/1.2 Nunito,sans-serif; color:var(--ink)}
.work__meta span{font-size:.92rem; color:var(--body)}

/* Почему дёшево */
.why{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
@media (max-width:760px){ .why{grid-template-columns:1fr} }
.why__item{display:flex; gap:16px; background:var(--white); border-radius:var(--r); padding:24px; box-shadow:var(--shadow)}
.why__item svg{width:26px; height:26px; flex:none; color:var(--blue); margin-top:2px}
.why__item h3{font-size:1.08rem; margin-bottom:.35em}
.why__item p{margin:0; font-size:.99rem}

/* FAQ */
.faq{max-width:820px; margin-inline:auto; display:grid; gap:12px}
.faq details{background:var(--white); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.faq summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font:800 1.04rem/1.35 Nunito,sans-serif; color:var(--ink); min-height:60px;
  display:flex; align-items:center; transition:background-color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--sky)}
.faq summary::after{
  content:""; position:absolute; right:24px; top:50%; width:11px; height:11px; margin-top:-7px;
  border-right:2.5px solid var(--blue); border-bottom:2.5px solid var(--blue);
  transform:rotate(45deg); transition:transform .22s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px}
.faq__a{padding:0 24px 22px}
.faq__a p:last-child{margin:0}

/* Финальный блок с формой */
.final{background:linear-gradient(150deg,#0B2A63 0%,#12408F 60%,#1552C7 100%); color:#fff; position:relative; overflow:hidden}
.final::before{content:""; position:absolute; width:38rem; height:38rem; right:-12rem; top:-14rem;
  border-radius:50%; background:radial-gradient(circle,rgba(249,115,22,.35) 0%,rgba(249,115,22,0) 65%)}
.final__grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:center}
@media (max-width:880px){ .final__grid{grid-template-columns:1fr} }
.final h2{color:#fff}
.final p{color:#CFE0FA}
.final .facts .fact{color:#fff}
.final .facts svg{color:var(--orange)}
.final .form p,.final .form label,.final .form span{color:var(--body)}
.final .form .field label{color:var(--ink)}
.form{background:var(--white); border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); box-shadow:var(--shadow-lg)}
.form h3{margin-bottom:.3em}
.form__hint{font-size:.95rem; margin-bottom:20px}
.field{margin-bottom:16px}
.field label{display:block; font-weight:700; color:var(--ink); font-size:.94rem; margin-bottom:7px}
.field input,.field textarea{
  width:100%; min-height:52px; padding:14px 16px; border-radius:13px; background:var(--sky);
  border:2px solid transparent; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink);
  font:400 1rem/1.4 Manrope,sans-serif; transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.field textarea{min-height:96px; resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#8697B4}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--blue); background:var(--white)}
.field input:focus-visible,.field textarea:focus-visible{outline:none}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--body); margin:18px 0}
.consent input{width:22px; height:22px; flex:none; margin:1px 0 0; accent-color:var(--blue); cursor:pointer}
.form .btn{width:100%}
.form__status{margin-top:14px; font-weight:700; font-size:.97rem; min-height:1.2em}
.form__status.is-ok{color:var(--ok)}
.form__status.is-err{color:var(--err)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

/* Подвал */
.footer{background:#08203F; color:#A9BEDD; padding:44px 0 32px; font-size:.95rem}
.footer a{color:#DCE8FA}
.footer__top{display:flex; flex-wrap:wrap; gap:22px 40px; align-items:flex-start; justify-content:space-between}
.footer .brand{color:#fff}
.footer__links{display:flex; flex-wrap:wrap; gap:10px 26px}
.footer__bottom{margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; font-size:.88rem}

/* Липкая кнопка на мобильных */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:35; display:none; gap:10px; padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line);
}
.sticky-cta .btn{flex:1}
@media (max-width:720px){
  .sticky-cta{display:flex}
  body{padding-bottom:82px}
}

/* Появление при скролле */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .card,.work,.btn,.faq summary::after{transition:none}
  .chip--gis,.chip--ya,.chip--tag{animation:none}
  .btn:hover,.work:hover{transform:none}
}

/* ── страницы блога ────────────────────────────────────────────────────── */
/* Только то, чего нет на лендинге: шапка, подвал, кнопки и переменные
   общие — они описаны выше и подключаются на всех страницах. */
.crumbs{font-size:.92rem; margin-bottom:18px}
.crumbs a{color:var(--body)}
.post{max-width:44rem; margin-inline:auto}
.post__meta{display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--body); font-size:.93rem; margin-bottom:22px}
.post__cover{border-radius:var(--r-lg); box-shadow:var(--shadow); margin:0 0 32px; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--sky)}
.post__intro{font-size:1.12rem; color:var(--ink); font-weight:500; margin-bottom:1.6em}
.post h2{padding-top:.2em}
.table-wrap{overflow-x:auto; margin:0 0 1.6em; border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line)}
table{border-collapse:collapse; width:100%; min-width:32rem; font-size:.97rem}
th,td{padding:12px 16px; text-align:left; border-bottom:1px solid var(--line)}
th{background:var(--sky); color:var(--ink); font-family:Nunito,sans-serif; font-weight:800; white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
@media (max-width:600px){
  table,thead,tbody,tr,td{display:block; min-width:0}
  thead{display:none}
  tr{border-bottom:1px solid var(--line); padding:6px 0}
  tbody tr:last-child{border-bottom:0}
  td{border:0; padding:6px 16px; display:flex; gap:12px; justify-content:space-between}
  td::before{content:attr(data-label); font-weight:700; color:var(--ink); flex:none}
}
.post__cta{background:var(--sky); border-radius:var(--r-lg); padding:clamp(24px,3vw,36px); margin-top:48px; text-align:center}
.post__cta h2{margin:0 0 .4em}
.post__cta p{max-width:44ch; margin-inline:auto}

.blog-head{background:var(--sky); padding:clamp(40px,5vw,72px) 0}
.blog-head p{max-width:60ch}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:36px}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .cards{grid-template-columns:1fr} }
.card{display:flex; flex-direction:column; background:var(--white); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); text-decoration:none; color:inherit;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.card img,.card__ph{width:100%; aspect-ratio:16/9; object-fit:cover; background:linear-gradient(125deg,var(--blue),#3B8AF5)}
.card__body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1}
.card__body strong{font:900 1.08rem/1.25 Nunito,sans-serif; color:var(--ink)}
.card__body p{margin:0; font-size:.96rem}
.card__date{margin-top:auto; padding-top:10px; font-size:.88rem; color:#6B7C99}
.empty{background:var(--sky); border-radius:var(--r-lg); padding:44px 24px; text-align:center; margin-top:32px}

@media (prefers-reduced-motion:reduce){
  .card,.btn{transition:none}
  .card:hover,.btn:hover{transform:none}
}