/* Переход между страницами делает нативный View Transitions API
   (@view-transition в css/tokens.css). Старый белый JS-оверлей удалён. */

/* ——— Утилита: доступный, но визуально скрытый контент ———
   Для семантического <h1> на страницах, где заглавие несёт canvas/логотип-картинка:
   элемент остаётся в DOM и доступен поисковикам и скринридерам, но не занимает
   места и не виден — визуал страницы не меняется. */
.iw-sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; border:0;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%);
  white-space:nowrap;
}

/* ——— Nav ——— */
/* ВЫСОТА ШАПКИ ПОСТОЯННАЯ — 62px, и менять её нельзя.
   Раньше было 78px в покое и 62px на скролле. Содержимое выровнено по центру бокса,
   поэтому каждая смена высоты сдвигала логотип и кнопку «Обсудить проект» на 8px —
   при возврате наверх это читалось как отскок и дважды приходило багрепортом.
   Арифметика тут безвыходная: кнопка высотой 52px не может стоять по центру
   и в боксе 78px, и в боксе 62px, не сместившись. Поэтому бокс один.
   На скролле меняется ТОЛЬКО окраска (.is-scrolled) — она содержимое не двигает.
   Константы стыковки завязаны на те же 62px: --nav-h в home.css (парковка блока
   кейсов) и --iw-nav-h-min в tokens.css (верх липкого слота услуг). */
[data-nav]{
  position:fixed; top:0; left:0; right:0; z-index:100; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,4vw,56px);
  background:transparent; border-bottom:1px solid transparent;
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease;
}
[data-nav].is-scrolled{
  background:rgba(233,236,240,0.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom-color:rgba(40,62,78,0.1);
}
/* Бренд крупнее ссылок (18px против 14.5px), и из-за большего кегля его базовая
   линия при центрировании по боксу оказывается ниже линии пунктов меню — логотип
   «съезжал вниз». Приподнимаем на 2px ВЕСЬ локап целиком, а не один только текст:
   при align-items:center центр иконки и оптический центр надписи (по высоте
   прописных) расходятся всего на 0.27px, то есть иконка и название сидят на одной
   оси сами по себе — и разъезжались ровно на те 2px, на которые раньше
   приподнимался только текст. */
[data-brand]{ display:flex; align-items:center; gap:11px; transform:translateY(-2px); }
[data-brand] img{ height:21px; width:31px; }
[data-brand-text]{ display:flex; align-items:baseline; gap:3.6px; }
[data-brand-text] .wordmark{ font-weight:800; font-size:18px; letter-spacing:-0.01em; color:var(--iw-ink); }
[data-brand-text] .studio{ font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.01em; color:var(--iw-ink); }

[data-navlinks][data-navtext]{ display:flex; gap:30px; font-weight:500; font-size:14.5px; color:#2A3845; }
[data-navtext] > a{ position:relative; padding-bottom:2px; transition:color .3s ease; }
[data-navtext] > a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:#2C74C0; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--iw-ease);
}
[data-navtext] > a:hover{ color:var(--iw-ink); }
[data-navtext] > a:hover::after{ transform:scaleX(1); }
[data-navtext] > a[aria-current="page"]{ color:var(--iw-ink); }
[data-navtext] > a[aria-current="page"]::after{ background:var(--iw-accent); transform:scaleX(1); }
/* Гасим «залипший» hover неактивных ссылок сразу после возврата из bfcache
   (класс .iw-no-hover ставит/снимает shared.js), чтобы не подсвечивались две
   вкладки. Активную (aria-current) не трогаем. */
html.iw-no-hover [data-navtext] > a:not([aria-current="page"]):hover{ color:#2A3845; }
html.iw-no-hover [data-navtext] > a:not([aria-current="page"]):hover::after{ transform:scaleX(0); }

.nav-right{ display:flex; align-items:center; gap:18px; }

[data-menu-toggle]{
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  width:42px; height:42px; background:none; border:1px solid #C7D0D8; cursor:pointer;
}
[data-menu-toggle] span{ width:18px; height:1.5px; background:var(--iw-ink); }

[data-menu-panel]{
  position:fixed; inset:0; z-index:99; display:none;
  flex-direction:column; justify-content:center; gap:8px;
  padding:0 clamp(24px,8vw,56px);
  background:rgba(233,236,240,0.97);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
[data-menu-link]{ font-weight:800; font-size:34px; letter-spacing:-0.02em; padding:10px 0; color:var(--iw-ink); }
[data-menu-link].is-accent{ color:var(--iw-accent); }

@media (max-width:880px){
  [data-navlinks]{ display:none !important; }
  [data-menu-toggle]{ display:flex; }
}

/* ——— Buttons ——— */
[data-btn="primary"]{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px; background:var(--iw-ink); color:#EDF3F7;
  font-weight:600; font-size:15.5px;
  /* Прозрачная рамка держит размер бокса: на тёмном герое услуг .nav-on-dark
     добавляет кнопке видимую border:1px, и без этой заглушки кнопка становилась
     на 2px выше, а в шапке (выравнивание по центру) съезжала на 1px вверх. */
  border:1px solid transparent;
  box-shadow:var(--iw-shadow-soft);
  transition:background .3s, gap .4s var(--iw-ease);
}
[data-btn="primary"] .arrow{ font-family:'IBM Plex Mono',monospace; font-size:13px; opacity:.8; }
[data-btn="primary"]:hover{ background:var(--iw-accent) !important; gap:20px !important; }
[data-btn="primary"]:active{ transform:translateY(1px); }

[data-hero-cta]:hover{ gap:10px !important; }
[data-hero-cta] > span{ transition:transform .4s var(--iw-ease); }
[data-hero-cta]:hover > span{ transform:translateX(10px); }

[data-btn="ghost"]{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 24px; border:1px solid rgba(40,62,78,0.22); color:#1F2E3A;
  font-weight:500; font-size:15px; background:transparent;
  transition:border-color .3s, color .3s, gap .4s var(--iw-ease);
}
[data-btn="ghost"]:hover{ border-color:var(--iw-accent) !important; color:var(--iw-accent) !important; gap:13px !important; }
[data-btn="ghost"]:active{ transform:translateY(1px); }

[data-btn="submit"]{
  width:100%; padding:16px; border:none; background:var(--iw-accent); color:#fff;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px; cursor:pointer;
  transition:background .3s;
}
[data-btn="submit"]:hover{ background:var(--iw-accent-hover) !important; }
[data-btn="submit"]:active{ transform:translateY(1px); }
[data-btn="submit"]:disabled{ opacity:.7; cursor:default; }

/* ——— CTA popup (форма «Обсудить проект», общая для всех страниц) ——— */
[data-cta-modal]{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,48px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .32s var(--iw-ease), visibility .32s var(--iw-ease);
}
[data-cta-modal].is-open{ opacity:1; visibility:visible; pointer-events:auto; }

.iw-modal-overlay{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--iw-darkest) 66%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

.iw-modal-dialog{
  position:relative; z-index:1;
  width:min(560px,100%);
  max-height:calc(100dvh - clamp(32px,8vw,96px));
  overflow-y:auto;
  background:var(--iw-surface);
  padding:clamp(28px,3.6vw,52px);
  box-shadow:var(--iw-shadow-cta);
  transform:translateY(18px) scale(.98);
  transition:transform .38s var(--iw-ease);
}
[data-cta-modal].is-open .iw-modal-dialog{ transform:none; }

.iw-modal-x{
  position:absolute; top:14px; right:14px;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer;
  font-size:26px; line-height:1; color:var(--iw-label);
  transition:color .3s ease, transform .3s var(--iw-ease);
}
.iw-modal-x:hover{ color:var(--iw-ink); transform:rotate(90deg); }

.iw-mform-title{
  font-weight:800; font-size:clamp(24px,3vw,34px);
  letter-spacing:-0.02em; color:var(--iw-ink);
  margin-bottom:clamp(24px,3vw,34px); padding-right:32px;
}
.iw-mform-fields{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,26px); }
.iw-mform-field > span{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label);
  text-transform:uppercase; margin-bottom:9px;
}
.iw-mform-field textarea,
.iw-mform-field input{
  width:100%; background:var(--iw-white); border:1px solid var(--iw-border);
  padding:14px 15px; color:var(--iw-ink);
  font-family:'Manrope',sans-serif; font-size:15px; line-height:1.5;
  transition:border-color .3s ease;
}
.iw-mform-field textarea{ resize:vertical; min-height:132px; }
.iw-mform-field textarea:focus,
.iw-mform-field input:focus{ border-color:var(--iw-accent); outline:none; }
.iw-mform-field textarea::placeholder,
.iw-mform-field input::placeholder{ color:var(--iw-line); }
.iw-mform-field[data-invalid] textarea,
.iw-mform-field[data-invalid] input{ border-color:var(--iw-error); }
.iw-mform-err{ display:none; font-size:13.5px; line-height:1.4; color:var(--iw-error); }
.iw-mform [data-btn="submit"]{ margin-top:4px; }

.iw-mform-success{ display:none; text-align:center; padding:20px 0; }
.iw-mform-badge{
  width:54px; height:54px; margin:0 auto 18px;
  background:var(--iw-accent); color:var(--iw-white); font-size:26px;
  display:flex; align-items:center; justify-content:center;
}
.iw-mform-success h3{ font-weight:800; font-size:22px; color:var(--iw-ink); }
.iw-mform-success p{
  font-size:15px; color:var(--iw-body); line-height:1.55;
  max-width:300px; margin:10px auto 0;
}

/* The invisible-reCAPTCHA badge (used by this popup on every page) is a fixed,
   third-party element that Google parks off the right edge and expands on error;
   in the popup it overhangs the viewport and its error bubble runs off-screen.
   Google's terms allow hiding the badge as long as the reCAPTCHA branding text
   below is shown, so we hide it site-wide (must be display:none — visibility:hidden
   still keeps its box in the layout) and show the note instead. */
.grecaptcha-badge{ display:none !important; }
.iw-mform-note{
  margin-top:14px; font-size:12px; line-height:1.5; color:var(--iw-label);
}
.iw-mform-note a{ color:var(--iw-accent); border-bottom:1px solid rgba(5,178,216,0.4); }

@media (prefers-reduced-motion: reduce){
  [data-cta-modal],
  .iw-modal-dialog,
  .iw-modal-x{ transition:opacity .2s ease, visibility .2s ease; }
  .iw-modal-dialog{ transform:none; }
}

/* Карточки-ссылки: гасим нативный drag ссылки и press-hold callout, чтобы лонгтап
   на Windows-тач не запускал зависающее перетаскивание, блокирующее клики (JS-гард
   initCardDragGuard дублирует это отменой dragstart). touch-action:manipulation
   убирает double-tap-zoom и лишние жесты, оставляя тап/скролл. */
a[data-row], a[data-proj], a.blog-media, a[data-post]{
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
}

/* ——— cursor-following glow (blog cards) ——— */
[data-glow]{ --gx:50%; --gy:50%; position:relative; isolation:isolate; }
[data-glow]::before{
  content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .4s ease;
  background:radial-gradient(260px 260px at var(--gx) var(--gy), hsl(202 96% 58% / 0.22), hsl(218 92% 56% / 0.10) 42%, transparent 72%);
}
[data-glow]::after{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none; opacity:0;
  transition:opacity .4s ease; border:1.5px solid transparent;
  background:radial-gradient(230px 230px at var(--gx) var(--gy), hsl(190 100% 66% / 0.95), hsl(214 100% 60% / 0.55) 40%, transparent 70%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
[data-glow]:hover::before, [data-glow]:hover::after{ opacity:1; }
@media (prefers-reduced-motion: reduce){ [data-glow]::before, [data-glow]::after{ transition:none; } }

/* ——— hero mesh-shader canvas mask ——— */
[data-hero-shader]{ position:absolute; inset:0; z-index:0; }
[data-hero-shader] canvas{ width:100%; height:100%; will-change:transform; }
@media (max-width:720px){
  [data-hero-shader]{ opacity:.9; }
  [data-hero-shader] canvas{ filter:blur(12px) !important; }
}

/* ——— CTA + contact form (shared across pages) ——— */
.cta{ background:var(--iw-ink); color:var(--iw-on-dark-bright); padding:clamp(72px,11vh,132px) clamp(18px,5vw,72px); }
.cta-grid{ max-width:var(--iw-container); margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:clamp(40px,6vw,90px); align-items:start; }
.cta-left h2{ font-weight:800; font-size:clamp(30px,4.4vw,58px); line-height:1.04; letter-spacing:-0.03em; }
.cta-left p{ font-size:16px; color:var(--iw-on-dark); max-width:420px; margin-top:20px; line-height:1.6; }
.cta-contact{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.cta-contact a{ display:flex; align-items:center; gap:14px; font-size:15px; }
.cta-contact .label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:#6F94A8; width:64px; flex-shrink:0; }

[data-form]{ background:var(--iw-surface-dark); border:1px solid #2C3D49; padding:clamp(26px,3vw,40px); }
[data-fields]{ display:flex; flex-direction:column; gap:20px; }
.field label{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:var(--iw-eyebrow-track); color:#6F94A8; margin-bottom:9px;
}
.field > span{ display:block; margin-bottom:7px; }
.field textarea, .field input{
  width:100%; background:var(--iw-input-dark); border:1px solid #34485699; padding:13px 14px;
  color:var(--iw-on-dark-bright); font-family:'Manrope',sans-serif; font-size:15px; line-height:1.5;
}
.field textarea{ resize:vertical; }
.field textarea:focus, .field input:focus{ border-color:var(--iw-accent); outline:none; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
[data-err]{ display:none; font-size:13.5px; color:var(--iw-error); }
.legal{ font-size:12.5px; color:#6F8696; }
[data-success]{ display:none; text-align:center; }
.success-badge{ width:54px; height:54px; margin:0 auto 18px; background:var(--iw-accent); color:#fff; font-size:26px; display:flex; align-items:center; justify-content:center; }
[data-success] h3{ font-weight:800; font-size:24px; }
[data-success] p{ font-size:15px; color:var(--iw-on-dark); max-width:300px; margin:10px auto 0; }

/* ——— footer ——— */
footer{
  background:var(--iw-darkest); color:var(--iw-on-dark);
  padding:clamp(48px,6vw,72px) clamp(18px,5vw,72px) 40px;
}
.footer-inner{ max-width:var(--iw-container); margin:0 auto; }
.footer-top{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:36px;
  padding-bottom:44px; border-bottom:1px solid #233642;
}
.footer-brand{ max-width:300px; }
.footer-brand .wordmark{ font-weight:800; font-size:18px; color:#EDF3F7; }
.footer-brand .studio{ font-family:'Manrope',sans-serif; font-weight:800; font-size:18px; letter-spacing:-0.01em; color:#EDF3F7; }
.footer-brand p{ margin-top:14px; font-size:14px; line-height:1.6; }
.footer-cols{ display:flex; gap:clamp(36px,6vw,80px); flex-wrap:wrap; }
.footer-col h4{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label);
  margin-bottom:16px; font-weight:500;
}
.footer-col a{ display:block; font-size:14.5px; color:#C2D2DC; margin-bottom:12px; transition:color .3s ease; }
.footer-col a:hover{ color:var(--iw-accent); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
  padding-top:26px;
  font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label);
}
.footer-legal{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-bottom a{
  color:var(--iw-label); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(154,168,180,0.45); transition:color .3s ease, text-decoration-color .3s ease;
}
.footer-bottom a:hover{ color:var(--iw-accent); text-decoration-color:var(--iw-accent); }

/* ——— scroll reveal ——— */
[data-reveal][data-rv]{
  transition:opacity .85s var(--iw-ease), transform .85s var(--iw-ease);
}
@media (prefers-reduced-motion: reduce){
  [data-cover],[data-wash],[data-arrow],[data-ph],[data-pname],
  [data-preview],[data-row],[data-gimg],[data-gname],[data-garrow]{ transition:none !important; }
}

/* ——— Intro-оркестрация появления при загрузке (общая для всех страниц) ———————
   Контент «собирается» по шагам на чистом CSS (animation + delay, без JS):
   подложка → заголовок (строки выезжают из-под маски, как в Bauns) → текст →
   первые блоки снизу. Разметка на странице:
     data-intro="shader" — фоновый холст/градиент (лёгкий зум-фейд);
     data-intro="title"  — заголовок; текст оборачивается в
                           <span class="intro-lines"><span class="ln"><span>строка</span></span>…</span>;
     data-intro          — любой блок (fade-up), порядок задаётся data-i="1..7".
   ДЛИТЕЛЬНОСТЬ У ВСЕХ БЛОКОВ ОДНА (.5s) — хореографию рисуют только задержки.
   Не заводите per-page override длительности: крупный блок первого экрана при
   долгом фейде читается как «страница подгружается», а не как анимация, и это
   уже приводило к багам от тестировщиков. Если блок появляется слишком поздно —
   двигайте его data-i, а не длительность.
   Ниже фолда контент по-прежнему проявляется на скролле (data-reveal в shared.js).
   Всё в no-preference: при reduced-motion контент показывается сразу. */
/* Разбиение заголовка на строки — всегда (чтобы переносы сохранялись и при reduced-motion) */
.intro-lines{ display:block; }
.intro-lines .ln{ display:block; }

@media (prefers-reduced-motion: no-preference){
  [data-intro]{ opacity:0; animation:introUp .5s var(--iw-ease) both; }
  [data-intro="shader"]{ animation-name:introShader; animation-duration:.85s; }
  /* Только прозрачность, без сдвига — для sticky-элементов, которым transform ломает липкость */
  [data-intro="fade"]{ animation-name:introFade; }

  /* Заголовок: контейнер виден сразу, строки анимируются внутри масок */
  [data-intro="title"]{ opacity:1; animation:none; }
  .intro-lines .ln{ overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
  .intro-lines .ln > span{ display:block; transform:translateY(115%); animation:introLine .7s var(--iw-ease) both; }
  .intro-lines .ln:nth-child(1) > span{ animation-delay:.10s; }
  .intro-lines .ln:nth-child(2) > span{ animation-delay:.20s; }
  .intro-lines .ln:nth-child(3) > span{ animation-delay:.30s; }

  /* Порядок появления блоков */
  [data-i="1"]{ animation-delay:.10s; }
  [data-i="2"]{ animation-delay:.20s; }
  [data-i="3"]{ animation-delay:.30s; }
  [data-i="4"]{ animation-delay:.40s; }
  [data-i="5"]{ animation-delay:.50s; }
  [data-i="6"]{ animation-delay:.60s; }
  [data-i="7"]{ animation-delay:.70s; }
}
@keyframes introFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes introUp{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes introShader{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:none; } }
@keyframes introLine{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }

/* ——— Согласие на использование cookie (общее для всех страниц) ———————————————
   Тонкая полоса на всю ширину внизу экрана. Появляется с задержкой (после intro-
   анимации hero, ~2.6 c — задаётся в js/shared.js), чтобы не мешать первому экрану.
   Светлая тема на токенах Iron Water: фон — самый светлый серый, текст тёмно-серый,
   кнопка с голубой обводкой. Квадрат, как весь UI. Скрывается после «СОГЛАСЕН»
   (localStorage + cookie), логика — shared.js. */
.iw-cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  transform:translateY(100%);             /* прячем ниже экрана */
  transition:transform .55s var(--iw-ease);
}
.iw-cookies.is-in{ transform:none; }
.iw-cookies.is-out{ transform:translateY(100%); }
@media (prefers-reduced-motion: reduce){
  .iw-cookies{ transition:none; }
}
/* Полоса на всю ширину: фон — самый светлый серый (почти белый) */
.iw-cookies-inner{
  padding:11px 24px;
  background:var(--iw-surface);
}
/* Контент ограничен по ширине контейнера и центрирован — фон при этом на всю ширину */
.iw-cookies-row{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 28px;
  max-width:var(--iw-container); margin:0 auto; width:100%;
}
.iw-cookies-text{
  flex:1 1 0; min-width:0;                /* базис 0 → текст и кнопка в одной строке, текст тянется в остаток */
  font-family:'Manrope',sans-serif; font-size:13.5px; line-height:1.5; color:var(--iw-body);
}
.iw-cookies-text a{
  color:var(--iw-ink); font-weight:500;
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(5,178,216,0.55);
  transition:color .3s, text-decoration-color .3s;
}
.iw-cookies-text a:hover{ color:var(--iw-accent-press); text-decoration-color:var(--iw-accent); }
/* Кнопка с голубой обводкой, в духе data-btn системы: квадрат, Manrope, заливка на hover */
.iw-cookies-btn{
  flex:0 0 auto;
  padding:9px 24px;
  font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600; letter-spacing:0.01em;
  color:var(--iw-accent); background:transparent;
  border:1px solid var(--iw-accent);
  cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.iw-cookies-btn:hover{ background:var(--iw-accent); color:var(--iw-white); border-color:var(--iw-accent); }
.iw-cookies-btn:active{ background:var(--iw-accent-press); border-color:var(--iw-accent-press); color:var(--iw-white); transform:translateY(1px); }

@media (max-width:640px){
  .iw-cookies-inner{ padding:12px 16px; }
  .iw-cookies-row{ gap:12px; }
  .iw-cookies-btn{ width:100%; }
}