/* =========================
   DEVON CSS v2 — safe merge
   ========================= */

/* ===== Design System ===== */
:root{
  --bg:#fcfcfd; --bg-soft:#f6f7fb; --surface:#ffffff;
  --text:#0f172a; --muted:#4b5563; --border:#e5e7eb;
  --brand:#2563eb; --brand-ink:#1d4ed8;
  --ok:#059669; --warn:#d97706; --ring:rgba(37,99,235,.35);
  --container:1128px; --radius:16px; --shadow:0 8px 30px rgba(2,8,23,.06);

  /* Чуть крупнее типографика */
  --step--1: clamp(.98rem,.94rem + .2vw,1.05rem);
  --step-0:  clamp(1.125rem,1.02rem + .5vw,1.25rem);
  --step-1:  clamp(1.35rem,1.2rem + .9vw,1.7rem);
  --step-2:  clamp(1.6rem,1.32rem + 1.4vw,2.1rem);
  --step-3:  clamp(2rem,1.7rem + 2vw,2.6rem);
  --step-4:  clamp(2.4rem,2.1rem + 2.6vw,3.2rem);

  /* соц‑цвета */
  --vk:#1d6fda; --okc:#d66f00;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220; --bg-soft:#101827; --surface:#0f172a;
    --text:#f8fafc; --muted:#94a3b8; --border:#1f2937;
    --brand:#60a5fa; --brand-ink:#93c5fd; --ring:rgba(96,165,250,.4);
    --shadow:0 8px 30px rgba(0,0,0,.4);
  }
}

/* РУЧНОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (сохраняем совместимость) */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#fcfcfd;--bg-soft:#f6f7fb;--surface:#fff;--text:#0f172a;
  --muted:#4b5563;--border:#e5e7eb;--brand:#2563eb;--brand-ink:#1d4ed8;
  --ring:rgba(37,99,235,.35);--shadow:0 8px 30px rgba(2,8,23,.06);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b1220;--bg-soft:#101827;--surface:#0f172a;--text:#f8fafc;
  --muted:#94a3b8;--border:#1f2937;--brand:#60a5fa;--brand-ink:#93c5fd;
  --ring:rgba(96,165,250,.4);--shadow:0 8px 30px rgba(0,0,0,.4);
}

/* ===== Base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0; color:var(--text); background:var(--bg);
  min-height:100vh;
  overflow-x:hidden;
  font: 500 16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; } /* не трогаем svg глобально */
.container{ max-width:var(--container); margin-inline:auto; padding:20px; }
.visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px); padding:0;border:0;height:1px;width:1px; overflow:hidden; }
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:8px; }

/* ===== Header / Nav ===== */
.skip{ position:absolute; left:-9999px; top:auto; }
.skip:focus{ left:16px; top:16px; z-index:10000; background:var(--surface); padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); }

header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(160%) blur(8px);
  background: color-mix(in oklab, var(--surface), transparent 15%);
  border-bottom:1px solid var(--border);
}
.nav{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:16px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:800; }
.brand .logo{ height:94px; width:auto; display:inline-block; }
@media (max-width: 960px){ .brand .logo{ height:48px; } }

.linkbar{ display:grid; grid-auto-flow:column; gap:26px; justify-content:center; }
.linkbar a{ padding:10px; border-radius:10px; }
.linkbar a[aria-current="page"]{ background: color-mix(in oklab, var(--brand), transparent 86%); text-decoration:none; }

.nav-actions{ display:flex; gap:12px; justify-content:flex-end; align-items:center; }

/* Buttons */
.btn,.cta{
  display:inline-flex; align-items:center; gap:10px; padding:10px 16px;
  border-radius:12px; border:1px solid var(--border); background:var(--surface);
  cursor:pointer; font-weight:700; text-decoration:none; color:var(--text);
}
.cta--primary{ background:var(--brand); color:#fff; border-color: color-mix(in oklab, var(--brand), black 12%); }
.cta--primary:hover{ filter:brightness(1.05); text-decoration:none; }
.cta--ghost{ background:color-mix(in oklab, var(--surface), var(--brand) 6%); }
.btn--disabled,.cta--disabled,.soc--disabled{
  opacity:.6; cursor:not-allowed; pointer-events:none;
}
.btn-icon{ display:inline-grid; place-items:center; width:40px; height:40px; }

.mobile-toggle{ display:none; }
@media (max-width: 960px){
  .linkbar{ display:none; }
  .mobile-toggle{ display:inline-grid; }
  .nav{ grid-template-columns: auto 1fr auto; }
}

/* ===== Mobile Drawer ===== */
.drawer{ position:fixed; inset:0; pointer-events:none; }
.drawer .backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:.2s; }
.drawer .panel{
  position:absolute; right:0; top:0; height:100%; width:min(86vw,380px); background:var(--surface);
  border-left:1px solid var(--border); transform:translateX(100%); transition:.24s; display:flex; flex-direction:column;
}
.drawer[aria-hidden="false"]{ pointer-events:auto; }
.drawer[aria-hidden="false"] .backdrop{ opacity:1; visibility:visible; }
.drawer[aria-hidden="false"] .panel{ transform:translateX(0); }
.mnav{ padding:18px; display:grid; gap:6px; }
.mnav a{ padding:12px 10px; border-radius:10px; }
.mfooter{ margin-top:auto; padding:18px; border-top:1px solid var(--border); display:grid; gap:10px; }

/* ===== Theme Toggle (кнопка) ===== */
.themeBtn{
  position:relative; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:999px;
  border:1px dashed color-mix(in oklab, var(--brand), transparent 40%);
  background: color-mix(in oklab, var(--surface), var(--brand) 6%);
  box-shadow:0 4px 14px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.6);
}
.themeBtn .sun{
  width:18px; height:18px; border-radius:999px; display:inline-block;
  background: radial-gradient(circle at center, #fcd34d 45%, #f59e0b 46% 100%);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15), 0 0 0 6px rgba(245,158,11,.08);
}
html[data-theme="dark"] .themeBtn .sun{
  background: radial-gradient(circle at center, #93c5fd 45%, #60a5fa 46% 100%);
  box-shadow: 0 0 0 3px rgba(147,197,253,.15), 0 0 0 6px rgba(147,197,253,.08);
}

/* ===== Hero ===== */
.hero{ position:relative; z-index:0; overflow:hidden; min-height:clamp(420px,36vw,560px); color:#fff; background:#0b1220; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,23,42,.70) 0%, rgba(15,23,42,.45) 40%, rgba(15,23,42,.20) 70%, rgba(15,23,42,0) 100%);
}
.hero .inner{
  position:absolute; left:50%; z-index:2; transform:translateX(-50%); bottom: clamp(24px, 6vw, 72px);
  text-align:center; max-width:980px; padding:0 4px;
}
.hero h1{ font-size:var(--step-4); line-height:1.1; margin:0 0 12px; letter-spacing:-.01em; }
.hero .lead{ font-size:var(--step-1); color:#eef2ff; margin:0 auto; max-width:1000px; }
.hero .btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:16px; }

@media (min-width: 721px){
  .hero .inner{
    bottom:clamp(14px, 2.2vw, 34px);
    max-width:min(1180px, calc(100vw - 48px));
  }
  .hero h1{
    white-space:nowrap;
    margin-bottom:10px;
  }
  .hero h1 br{
    display:none;
  }
  .hero .lead{
    max-width:980px;
  }
  .hero .btns{
    margin-top:12px;
  }
}

@media (max-width: 720px){
  .hero{ min-height:unset; color:var(--text); }
  .hero__bg{ position:relative; inset:auto; z-index:0; display:block; height:min(80vh,120vw); }
  .hero__img{ object-position:50% 45%; }
  .hero::after{ display:none; }
  .hero .inner{ position:static; transform:none; text-align:center; padding:16px 20px 0; }
  .hero .lead{ color:var(--muted); }
}

/* ===== Sections / Typography ===== */
section{ scroll-margin-top:84px; }
.section{ padding:clamp(28px,3vw,48px) 0; }
h1{ font-size:var(--step-4); line-height:1.1; margin:.2em 0 .4em; letter-spacing:-.01em; }
h2{ font-size:var(--step-3); line-height:1.15; margin:0 0 18px; letter-spacing:-.01em; text-align:center; }
h3{ font-size:var(--step-1); margin:12px 0 6px; }
.lead{ font-size:var(--step-0); color:var(--muted); }
.muted{ color:var(--muted); }
.prose{ max-width:70ch; }
.prose p{ text-align:left; text-indent:1.35em; margin:.6em 0; hyphens:auto; }
.prose p:first-child{ text-indent:0; }

/* ===== Grid / Cards ===== */
.grid{ display:grid; gap:18px; }
.cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 960px){ .cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px){ .cols-2,.cols-3{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); }
.card.center{ text-align:center; }
.card--wide{ grid-column:1 / -1; } /* единый, без дублей */

/* Икон‑кружки */
.icon{ display:grid; place-items:center; width:84px; height:84px; margin:0 auto 12px; border-radius:999px;
  background: color-mix(in oklab, var(--brand), transparent 88%); }
.icon svg{ width:56px; height:56px; stroke:var(--brand); }

/* Фичер‑картинки с анимацией появления */
.feature-img{ display:grid; place-items:center; aspect-ratio:1/1; border-radius:var(--radius);
  background: color-mix(in oklab, var(--brand), transparent 92%); box-shadow:0 0 25px color-mix(in oklab, var(--brand), transparent 65%);
  overflow:clip; opacity:0; transform:translateY(10px) scale(.98); transition: transform .6s ease, opacity .6s ease;
}
.feature-img.show{ opacity:1; transform:translateY(0) scale(1); }
.feature-img img{ width:100%; height:100%; object-fit:cover; }

/* ===== About us ===== */
.about-wrap{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.about-photo{ border-radius:var(--radius); overflow:clip; box-shadow:var(--shadow); }
.about-text{ font-size:var(--step-0); }
@media (max-width: 960px){ .about-wrap{ grid-template-columns:1fr; } }

/* ===== Docs / Price / Badges ===== */
.price-note{ display:grid; gap:10px; align-items:center; grid-template-columns:1fr auto; margin-bottom:12px; }
.badge{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:8px 12px; border-radius:999px;
  background: color-mix(in oklab, var(--ok), transparent 85%); border:1px solid color-mix(in oklab, var(--ok), white 75%);
}
.price-card{ text-align:center; }
.price-card .muted{ margin:10px 0; }
.price-badge-wrap{ margin-top:16px; display:flex; justify-content:center; }

/* ===== Socials ===== */
.socials{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.soc{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  aspect-ratio:1;
  flex:0 0 auto;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(2,8,23,.14), inset 0 1px 0 rgba(255,255,255,.5);
  text-decoration:none;
  user-select:none;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.soc:hover{
  text-decoration:none;
  filter:saturate(1.08) brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(2,8,23,.18), inset 0 1px 0 rgba(255,255,255,.55);
}
.soc:active{ transform:translateY(0); }
.soc__logo{
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  object-fit:cover;
}
.soc--max{ position:relative; }
.soc--max::after{
  content:"Открыть MAX-канал";
  position:absolute;
  left:50%;
  top:calc(100% + 8px);
  z-index:20;
  width:max-content;
  max-width:190px;
  padding:6px 9px;
  border:1px solid color-mix(in oklab, #7c3cff, white 20%);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(10,16,32,.96), rgba(42,26,87,.96));
  color:#fff;
  box-shadow:0 12px 28px rgba(2,8,23,.26);
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  line-height:1;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%, -4px);
  transition:opacity .16s ease, transform .16s ease;
}
.soc--max:hover::after,
.soc--max:focus-visible::after{
  opacity:1;
  transform:translate(-50%, 0);
}
.soc--theme{ position:relative; border:1px dashed color-mix(in oklab, var(--brand), transparent 40%); }

@media (min-width: 641px){
  .socials{
    gap:8px;
    flex-wrap:nowrap;
  }
  .soc{
    width:38px;
    height:38px;
    box-shadow:0 8px 18px rgba(2,8,23,.12), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .soc:hover{
    box-shadow:0 12px 24px rgba(2,8,23,.16), inset 0 1px 0 rgba(255,255,255,.5);
  }
  header .socials{
    justify-content:flex-end;
    min-width:max-content;
  }
}

@media (min-width: 961px){
  header .nav{
    grid-template-columns:auto minmax(0, 1fr) auto;
  }
  header .socials{
    gap:6px;
    flex-wrap:nowrap;
    min-width:max-content;
  }
  header .socials .soc{
    width:36px;
    height:36px;
  }
  header .soc--theme.themeBtn{
    border:1px solid color-mix(in oklab, var(--brand), transparent 35%);
    background:color-mix(in oklab, var(--surface), var(--brand) 10%);
    box-shadow:0 8px 18px rgba(2,8,23,.12), inset 0 1px 0 rgba(255,255,255,.52);
  }
  header .themeBtn .sun{
    width:15px;
    height:15px;
  }
}

@media (min-width: 961px) and (max-width: 1120px){
  .nav{ gap:12px; }
  .linkbar{ gap:14px; }
  .linkbar a{
    padding-inline:6px;
    font-size:.95rem;
  }
}

@media (max-width: 640px){
  .socials{ gap:8px; }
  .soc{
    width:42px;
    height:42px;
  }
}

/* ===== Reviews ===== */
.reviews{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
@media (max-width: 860px){ .reviews{ grid-template-columns:1fr; } }
.review{ display:grid; grid-template-columns:48px 1fr; gap:12px; padding:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); }
.avatar{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:linear-gradient(135deg,#60a5fa,#2563eb); }
.rhead{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.rhead time{ color:var(--muted); font-size:var(--step--1); }
.stars{ color:#f59e0b; letter-spacing:1px; }
.stars i{ font-style:normal; }
.stars .off{ color:#d1d5db; }
.rtxt{ margin:6px 0 0; color:var(--text); line-height:1.6; max-height: calc(1.6em * 4); overflow:hidden; }
.review.expanded .rtxt{ max-height:none; }
.more{
  display:inline-flex; align-items:center; justify-content:center; margin-top:10px;
  padding:8px 12px; border-radius:10px; border:1px solid var(--border);
  background:var(--surface); color:var(--text); cursor:pointer; font-weight:700;
}
.more:hover{ text-decoration:none; filter:brightness(1.03); }

/* ===== FAQ ===== */
.faq{ max-width:900px; margin:0 auto; display:grid; gap:10px; }
.faq details{ border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow); }
.faq summary{ cursor:pointer; font-weight:700; }
.faq p{ margin:8px 0 0; color:var(--muted); }

/* ===== Delivery ===== */
.delivery-grid{ grid-template-columns: repeat(3, 1fr); align-items:stretch; }
.delivery-grid .card h3{ font-size:var(--step-2); margin-top:0; }
.bigpara{ font-size:clamp(1.05rem,0.9rem + .5vw,1.3rem); line-height:1.65; }
.ticks{ list-style:none; margin:10px 0 0; padding:0; font-size:clamp(1rem,0.9rem + .3vw,1.2rem); }
.ticks li{ position:relative; padding-left:1.5em; margin:.35em 0; }
.ticks li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1; color:var(--ok); font-weight:900; }

@media (max-width: 960px){
  .delivery-grid{ grid-template-columns:1fr; }
}

/* ===== Contacts ===== */
.contacts-grid .center-desktop{ text-align:center; }
.contacts-grid .center-desktop .socials{ justify-content:center; }
.x4{ font-size:var(--step-0); line-height:1.6; }

/* ===== Footer ===== */
footer{ color:var(--muted); border-top:1px dashed var(--border); margin-top:8px; }
.footer-row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; }

/* ===== Narrow cards (например «Цены и условия») ===== */
.card--narrow{ max-width:720px; margin:0 auto; }

/* ===== Mobile tweaks for contacts & footer ===== */
@media (max-width: 720px){
  #contacts .card:first-child{ text-align:center; }
  #contacts .card:first-child p{ margin-left:auto; margin-right:auto; }
  #contacts .card:first-child .socials{ justify-content:center; }
  #contacts .container{ padding-left:16px; padding-right:16px; }
  footer .footer-row{ flex-direction:column; align-items:center; text-align:center; gap:10px; }
  footer .footer-row .socials{ justify-content:center; }
  footer .footer-row > div{ width:100%; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
}

/* =======================================================
   Блок стилей для новых страниц котят (безопасный namespace)
   ======================================================= */

/* Листинг котят */
.klist-grid{ display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width: 960px){ .klist-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px){ .klist-grid{ grid-template-columns:1fr; } }

.klist-card{ display:grid; gap:12px; }
.klist-media{
  aspect-ratio:4/3; border-radius: calc(var(--radius) - 6px); overflow:hidden;
  background:#eef2ff; border:1px solid var(--border);
}
.klist-media img{ width:100%; height:100%; object-fit:cover; }
.klist-title{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.klist-desc{ color:var(--muted); }
.clamp-4{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

/* Персональная страница котёнка (галерея + лайтбокс) */
.kdetail-gallery{ display:grid; gap:10px; grid-template-columns:repeat(4,1fr); }
@media (max-width: 960px){ .kdetail-gallery{ grid-template-columns:repeat(3,1fr); } }
@media (max-width: 640px){ .kdetail-gallery{ grid-template-columns:repeat(2,1fr); } }
.kdetail-item{ aspect-ratio:1/1; border-radius:12px; overflow:hidden; border:1px solid var(--border); cursor:zoom-in; background:#eef2ff; }
.kdetail-item img{ width:100%; height:100%; object-fit:cover; }

/* Лайтбокс */
.kdetail-lightbox{
  position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.75);
  z-index:1000; padding:20px;
}
.kdetail-lightbox[aria-hidden="false"]{ display:grid; }
.kdetail-lightbox__inner{ position:relative; width:min(96vw,1100px); height:min(92vh,90vw); display:grid; place-items:center; }
.kdetail-lightbox__img{ width:100%; height:100%; object-fit:contain; border-radius:12px; background:#000; }
.kdetail-lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(255,255,255,.88); color:#111; width:44px; height:44px; border-radius:999px; cursor:pointer; font-weight:900; }
.kdetail-lightbox__btn--prev{ left:6px; } .kdetail-lightbox__btn--next{ right:6px; }
.kdetail-lightbox__close{ position:absolute; top:8px; right:8px; border:0; background:rgba(255,255,255,.88); width:40px; height:40px; border-radius:999px; cursor:pointer; font-weight:900; }
/* Кнопка "Актуальные котята" */
.btn-kittens {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 20px;
  border-radius:12px;
  font-weight:700;
  font-size:clamp(1rem, .9rem + .4vw, 1.2rem);
  background: var(--brand);
  color:#fff;
  border:1px solid color-mix(in oklab, var(--brand), black 12%);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  cursor:pointer;
  text-decoration:none;
  transition:.2s;
}
.center-box {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin:32px 0;
}
.city-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:14px;
}
.city-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in oklab, var(--surface), var(--brand) 5%);
  color:var(--text);
  font-weight:700;
}
.city-chip:hover{ text-decoration:none; background:color-mix(in oklab, var(--surface), var(--brand) 10%); }
i[data-lucide]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.15em;
  min-width:1.15em;
  height:1.15em;
  font-style:normal;
  line-height:1;
  vertical-align:-0.125em;
}
i[data-lucide]::before{ content:"+"; }
i[data-lucide="award"]::before{ content:"\1F3C5"; }
i[data-lucide="shield-check"]::before{ content:"\1F6E1"; }
i[data-lucide="smile"]::before{ content:"\263A"; }
i[data-lucide="wallet"]::before{ content:"\1F4B3"; }
i[data-lucide="truck"]::before{ content:"\1F69A"; }
i[data-lucide="heart-handshake"]::before{ content:"\1F91D"; }
i[data-lucide="clock"]::before{ content:"\23F0"; }
i[data-lucide="camera"]::before{ content:"\1F4F8"; }
i[data-lucide="shield"]::before{ content:"\1F6E1"; }
i[data-lucide="file-text"]::before{ content:"\1F4C4"; }
i[data-lucide="dna"]::before{ content:"\1F9EC"; }
i[data-lucide="message-circle"]::before{ content:"\1F4AC"; }
.icon i[data-lucide]{
  width:auto;
  min-width:0;
  height:auto;
  font-size:2rem;
}
/* ===== Header / Drawer polish ===== */

@media (max-width: 960px){
  .brand{ display:none; }
  .nav{ grid-template-columns:auto 1fr; }
  .nav-actions{ justify-self:end; gap:10px; }
  .socials{ gap:8px; }
}

#navBtn[aria-expanded="true"]{
  background:color-mix(in oklab, var(--brand), var(--surface) 86%);
  border-color:color-mix(in oklab, var(--brand), var(--border) 40%);
}

.drawer{
  position:fixed; inset:0; z-index:9999; pointer-events:none; visibility:hidden;
}
.drawer .backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0;
  transition:opacity .22s ease; backdrop-filter:blur(2px);
}
.drawer .panel{
  position:absolute; right:0; top:0; width:min(94vw,520px); height:100dvh; max-height:100dvh;
  display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border);
  transform:translate3d(105%,0,0); transition:transform .28s cubic-bezier(.2,.9,.2,1);
  overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  border-top-left-radius:18px; border-bottom-left-radius:18px; box-shadow:0 18px 60px rgba(2,8,23,.28);
}
.drawer[aria-hidden="false"]{ pointer-events:auto; visibility:visible; }
.drawer[aria-hidden="false"] .backdrop{ opacity:1; }
.drawer[aria-hidden="false"] .panel{ transform:translate3d(0,0,0); }

.mnav-head{ display:flex; align-items:center; justify-content:space-between; }
.mnav{ padding:22px; gap:10px; }
.mnav a{ padding:14px 12px; font-size:1.05rem; border-radius:12px; }
.mnav a:hover{ background:color-mix(in oklab, var(--brand), transparent 90%); text-decoration:none; }
.mnav a:active{ transform:translateY(1px); }
.mfooter{ padding:22px; gap:12px; }

body.drawer-open{ overflow:hidden; }
html{ scrollbar-gutter:stable; }

@media (max-width: 420px){
  .drawer .panel{ width:96vw; }
  .mnav a{ padding:16px 12px; font-size:1.1rem; }
}

@media (min-width: 961px){
  .drawer{ display:none; }
}

.socials .soc{
  display:inline-grid;
  align-items:center;
  justify-content:center;
}

.socials .soc__logo{
  width:100%;
  height:100%;
}

@media (min-width: 641px){
  .socials{
    gap:8px;
    flex-wrap:nowrap;
  }
  .socials .soc{
    width:38px;
    height:38px;
    box-shadow:0 8px 18px rgba(2,8,23,.12), inset 0 1px 0 rgba(255,255,255,.45);
  }
  .socials .soc:hover{
    box-shadow:0 12px 24px rgba(2,8,23,.16), inset 0 1px 0 rgba(255,255,255,.5);
  }
  header .socials{
    justify-content:flex-end;
    min-width:max-content;
  }
}