/* Новая главная rumbapp.site (24.10.2026). Всё своё: шрифты, библиотеки,
 * картинки — со страницы не уходит ни одного запроса на чужой адрес. */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/jetbrainsmono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/static/fonts/jetbrainsmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Компактная продающая версия: первый экран продаёт (скачать / купить),
   дальше две закреплённые сцены со смартфоном и сразу тарифы.
   Приоритет — конверсия, удобство, скорость, и только потом эффект.
   Румб — 1/32 картушки компаса: картушка вокруг телефона в первом экране. */
:root {
  color-scheme: dark;
  --ink: #0F1720; --ink-deep: #0A1118; --panel: #131D29; --panel-2: #182433;
  --line: #22303F; --line-soft: rgba(244,246,248,.07);
  --paper: #F4F6F8; --muted: #9AA8B7; --faint: #6B7B8C;
  --amber: #E0A458; --amber-hi: #F2BE7A; --amber-glow: rgba(224,164,88,.22);
  --ok: #4FC3A1; --bad: #D57878;
  --display: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 18px; --edge: max(20px, calc((100vw - 1180px) / 2 + 24px));
}
* { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 17px/1.6 var(--display);
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 600px) { .wrap { padding-inline: 18px; } body { font-size: 16px; } }
.label { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lead { color: var(--muted); font-size: 1.1em; max-width: 52ch; }
.tnum { font-variant-numeric: tabular-nums; }


/* шапка: «Тарифы» и «Скачать» видны всегда */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgba(15,23,32,.6); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--display); }
.logo svg { width: 28px; height: 28px; }
nav.menu { display: flex; gap: 24px; margin-left: auto; }
nav.menu a { text-decoration: none; color: var(--muted); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s; }
nav.menu a:hover, nav.menu a.on { color: var(--amber); }
.top .actions { display: flex; gap: 10px; }
@media (max-width: 900px) { nav.menu { display: none; } .top .actions { margin-left: auto; } }
@media (max-width: 400px) { .top .actions .ghost { display: none; } }

.btn { --b: var(--amber); display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px; border-radius: 999px; border: 1px solid var(--b); background: var(--b);
  color: var(--ink-deep); text-decoration: none; font: 700 16px/1 var(--display); cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .7s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -10px var(--amber-glow), 0 0 0 4px var(--amber-glow); }
.btn:hover::after { transform: translateX(120%); }
.btn.ghost { background: rgba(15,23,32,.45); color: var(--paper); --b: #3A4C60; }
.btn.ghost:hover { --b: var(--amber); box-shadow: none; }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn small { font: 500 12px/1 var(--mono); opacity: .75; }
:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 3px; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 1; pointer-events: none; display: block; opacity: 0; transition: opacity .9s; }
#gl.ready { opacity: 1; }
#lines { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 3; pointer-events: none; }

/* Сцены. Задний слой (z 0) под телефоном, передний (z 2) над ним:
   sticky всегда создаёт свой контекст наложения, поэтому слоя два. */
.scene { position: relative; }
.layer { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.layer.back { z-index: 0; }
.layer.front { z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.layer.front a, .layer.front .live { pointer-events: auto; }

/* ---- 1. Первый экран ---- */
.wordmark { position: absolute; right: -2vw; bottom: -4vw; white-space: nowrap;
  font: 800 clamp(140px, 30vw, 460px)/.8 var(--display); letter-spacing: -.06em;
  background: linear-gradient(180deg, #2C3A4A 0%, #141E29 80%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-grid { position: absolute; inset: 0; display: flex; align-items: center; }
.hero-copy { width: min(560px, 50vw); margin-left: var(--edge); display: grid; gap: 22px; }
.hero h1 { font: 800 clamp(44px, 5.6vw, 82px)/.98 var(--display); letter-spacing: -.04em; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 12.5px/1.4 var(--mono); color: var(--muted); }
.facts span { display: inline-flex; align-items: center; gap: 8px; }
.facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.scroll-cue { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; font: 500 10.5px/1 var(--mono); letter-spacing: .2em;
  color: var(--faint); text-transform: uppercase; display: grid; justify-items: center; gap: 8px; }
.scroll-cue i { width: 1px; height: 30px; background: linear-gradient(var(--amber), transparent); animation: cue 2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero-copy > * { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-copy > :nth-child(2) { animation-delay: .06s; } .hero-copy > :nth-child(3) { animation-delay: .12s; }
.hero-copy > :nth-child(4) { animation-delay: .18s; } .hero-copy > :nth-child(5) { animation-delay: .24s; }
@keyframes rise { from { transform: translateY(16px); opacity: .001; } }
@media (max-width: 900px) {
  /* на телефоне текст и кнопки — наверху, сам телефон выглядывает снизу */
  .hero-grid { align-items: flex-start; padding-top: clamp(20px, 5vh, 48px); }
  .hero-copy { width: auto; margin-inline: 18px; gap: 16px; }
  .hero h1 { font-size: clamp(38px, 11vw, 54px); }
  .hero .lead { font-size: 15.5px; }
  .hero .buttons .btn { flex: 1 1 100%; }
  .wordmark { font-size: 44vw; bottom: 0; right: -6vw; }
  .scroll-cue { display: none; }
}

/* ---- 2. Подключение ---- */
.conn-top { position: absolute; left: 0; right: 0; top: clamp(70px, 11vh, 120px); text-align: center; display: grid; justify-items: center; gap: 12px; padding-inline: 18px; }
.conn-top h2 { font: 800 clamp(30px, 4.2vw, 58px)/1.02 var(--display); letter-spacing: -.035em; }
.term { position: absolute; left: var(--edge); top: 50%; translate: 0 -50%; width: 300px; font: 500 13px/1.75 var(--mono); color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 14px; }
.term .ttl { display: block; font-size: 10.5px; letter-spacing: .16em; color: var(--faint); text-transform: uppercase; margin-bottom: 6px; }
.term b { color: var(--amber); font-weight: 500; }
.term .ok { color: var(--ok); } .term .bad { color: var(--bad); }
.term .cur { display: inline-block; width: .6em; height: 1.05em; background: var(--amber); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.conn-side { position: absolute; right: var(--edge); top: 50%; translate: 0 -50%; width: 280px; display: grid; gap: 14px; }
.conn-side p { color: var(--muted); font-size: 15.5px; }
.conn-side b { color: var(--paper); }
.status-stack { position: absolute; left: 0; right: 0; bottom: clamp(30px, 8vh, 80px); display: grid; justify-items: center; padding-inline: 18px; }
.status { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(19,29,41,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 13px/1.3 var(--mono); letter-spacing: .03em; opacity: 0; }
.status i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.s0 { opacity: 1; } .status.s0 i { background: var(--faint); }
.status.s1 i { background: var(--bad); box-shadow: 0 0 0 4px rgba(213,120,120,.18); }
.status.s2 i { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.status.s3 i { background: var(--ok); box-shadow: 0 0 0 4px rgba(79,195,161,.18); }
@media (max-width: 1080px) { .term, .conn-side { display: none; } }
/* на телефоне вместо боковых колонок — одна строка под заголовком */
.conn-sub { display: none; }
@media (max-width: 900px) {
  .conn-sub { display: block; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 34ch; }
  .conn-sub b { color: var(--paper); }
  .conn-top { gap: 10px; }
  .conn-top h2, .feat-head h2 { font-size: clamp(26px, 7.4vw, 34px); }
}

/* ---- 3. Возможности ---- */
.feat-head { position: absolute; left: 0; right: 0; top: clamp(70px, 11vh, 120px); text-align: center; display: grid; justify-items: center; gap: 12px; padding-inline: 18px; }
.feat-head h2 { font: 800 clamp(28px, 3.6vw, 50px)/1.05 var(--display); letter-spacing: -.03em; }
.callout { position: absolute; width: min(260px, 22vw); display: grid; gap: 5px; opacity: 0; }
.callout b { font: 700 18px/1.25 var(--display); }
.callout span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.callout small { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.callout small.paid { color: var(--amber); }
.callout.L { left: var(--edge); text-align: right; }
.callout.R { right: var(--edge); }
.feat-cta { position: absolute; left: 0; right: 0; bottom: clamp(26px, 6vh, 60px); display: flex; justify-content: center; }
.mob-tabs { display: none; }
@media (max-width: 900px) {
  .callout { display: none; }
  .mob-tabs { display: grid; position: absolute; left: 18px; right: 18px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); gap: 6px; }
  .mob-tabs div { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(19,29,41,.9); display: none; }
  .mob-tabs div.on { display: grid; gap: 2px; }
  .mob-tabs span { display: none; } /* одна строка: не закрывает низ телефона */
  .mob-tabs b { font-size: 16px; } .mob-tabs span { color: var(--muted); font-size: 14px; }
  .feat-cta { display: none; }
}

/* ---- обычные секции ---- */
.solid { position: relative; z-index: 2; background: var(--ink); }
section.block { padding-block: 100px; position: relative; }
section.block + section.block { border-top: 1px solid var(--line-soft); }
.head { display: grid; gap: 16px; margin-bottom: 44px; max-width: 760px; }
.head h2 { font: 800 clamp(32px, 4.4vw, 56px)/1.04 var(--display); letter-spacing: -.03em; }
@media (max-width: 600px) { section.block { padding-block: 64px; } .head { margin-bottom: 30px; } }

/* тарифы: одинаковые строки в каждой карточке — сравнение глазами по горизонтали */
#tariffs { scroll-margin-top: 62px; }
.tariffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tariff { position: relative; border: 1px solid var(--line); border-radius: 22px; padding: 28px 24px 24px; background: var(--panel);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  transition: border-color .3s, transform .3s cubic-bezier(.2,.8,.2,1), translate .8s cubic-bezier(.2,.8,.2,1); }
/* подъём при появлении — отдельное свойство translate, а не transform:
   transform остаётся за наведением, и два эффекта не спорят (25.10) */
.tariffs.pending .tariff { translate: 0 30px; transition: none; }
.tariffs .tariff:nth-child(2) { transition-delay: 0s, 0s, .07s; }
.tariffs .tariff:nth-child(3) { transition-delay: 0s, 0s, .14s; }
.tariffs .tariff:nth-child(4) { transition-delay: 0s, 0s, .21s; }
.tariff:hover { border-color: #3A4C60; transform: translateY(-4px); }
.tariff h3 { font: 800 22px/1.2 var(--display); }
.tariff .who { font-size: 13.5px; color: var(--muted); margin-top: -12px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price b { font: 800 48px/1 var(--display); letter-spacing: -.04em; }
.price span { color: var(--muted); font-size: 15px; }
.perday { font: 500 12.5px/1 var(--mono); color: var(--faint); margin-top: -8px; min-height: 12.5px; }
.spec { margin: 0; display: grid; border-block: 1px solid var(--line); }
.spec div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; }
.spec div + div { border-top: 1px dashed var(--line); }
.spec dt { color: var(--muted); font-size: 14px; }
.spec dd { margin: 0; font: 700 15px/1.3 var(--display); }
.tariff ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; }
.tariff li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.tariff li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(-45deg); margin-top: 6px; }
.tariff .btn { width: 100%; }
.tariff.pick { background: linear-gradient(180deg, #1C2A3A, var(--panel)); border-color: transparent; box-shadow: 0 40px 70px -40px rgba(224,164,88,.35); }
.tariff.pick::before { content: ""; position: absolute; inset: -1px; border-radius: 23px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), var(--amber), transparent 30%, var(--amber-hi) 50%, transparent 70%, var(--amber));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: turn 6s linear infinite; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes turn { to { --a: 360deg; } }
.ribbon { position: absolute; top: -12px; left: 24px; background: var(--amber); color: var(--ink-deep); font: 500 11px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 6px; }
.tariff.free { background: transparent; }
.always { margin-top: 22px; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; color: var(--muted); font-size: 14.5px; }
.always b { color: var(--paper); }
.note { margin-top: 16px; color: var(--faint); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.note a { color: var(--muted); }
@media (max-width: 1080px) { .tariffs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tariffs { grid-template-columns: 1fr; gap: 22px; } .tariff.pick { order: -1; } .tariff:hover { transform: none; } }

.reviews { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.review { margin: 0; padding: 26px; border-radius: var(--r); border: 1px solid var(--line); background: var(--panel); display: grid; gap: 14px; align-content: start; }
.review blockquote { margin: 0; font-size: 16.5px; line-height: 1.6; }
.review figcaption { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; }
.review .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); font-weight: 700; color: var(--amber); flex: none; }
.review .stars { color: var(--amber); letter-spacing: 2px; margin-left: auto; font-size: 14px; }
.review .stars i { color: var(--line); font-style: normal; }
@media (max-width: 760px) { .reviews { grid-template-columns: 1fr; } }

.faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font: 700 17.5px/1.4 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; margin-top: -8px;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber); transform: rotate(45deg); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .a { padding: 0 0 20px; color: var(--muted); max-width: 62ch; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; gap: 22px; } }

.final { position: relative; overflow: hidden; border-radius: 28px; padding: 76px 40px; text-align: center; color: var(--ink-deep);
  background: radial-gradient(ellipse 70% 90% at 50% 130%, #F6C989, transparent 60%), var(--amber); }
.final .label { color: var(--ink-deep); }
.final h2 { font: 800 clamp(34px, 5.4vw, 72px)/1 var(--display); letter-spacing: -.04em; margin-top: 16px; }
.final p { margin: 18px auto 30px; max-width: 46ch; color: #3B2A14; }
.final .buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.final .btn { --b: var(--ink-deep); color: var(--paper); }
.final .btn.ghost { background: transparent; color: var(--ink-deep); --b: rgba(10,17,24,.35); }
.final .grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background-image: linear-gradient(rgba(10,17,24,.25) 1px, transparent 1px), linear-gradient(90deg, rgba(10,17,24,.25) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 70%); }
@media (max-width: 600px) { .final { padding: 56px 20px; } }

footer { position: relative; z-index: 2; background: var(--ink); padding-block: 44px 40px; color: var(--faint); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-left: auto; }
footer a { color: var(--muted); text-decoration: none; }

/* мобильная панель покупки: всегда под пальцем */
.cta-bar { display: none; }
@media (max-width: 900px) {
  .cta-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10,17,24,.88);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
  .cta-bar.show { transform: none; }
  .cta-bar .btn { flex: 1; min-height: 48px; padding: 0 12px; font-size: 15px; }
  footer { padding-bottom: 110px; }
}

/* запасной телефон: без WebGL, на слабых устройствах и до загрузки 3D */
.flat-phone { position: absolute; z-index: 1; width: min(300px, 26vw); right: calc(var(--edge) + 4vw); top: 50%; translate: 0 -50%;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); transform: perspective(1200px) rotateY(-16deg) rotateX(4deg); transition: opacity .6s; }
.gl-on .flat-phone { opacity: 0; }
@media (max-width: 900px) { .flat-phone { width: 58vw; right: auto; left: 50%; top: auto; bottom: -22vw; translate: -50% 0; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i, .tariff.pick::before, .term .cur, .hero-copy > * { animation: none !important; }
}

/* подвал: документы, помощь и оговорка про товарные знаки */
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; width: 100%; }
footer .cols p { color: var(--muted); }
footer .cols .head { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
footer .cols nav { display: grid; gap: 9px; margin: 0; }
footer .brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--display); color: var(--paper); text-decoration: none; }
.tm { width: 100%; margin-top: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel);
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: start; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.tm b { font: 500 10.5px/1.9 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.copy-line { width: 100%; color: var(--faint); font-size: 13px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .cols > :first-child { grid-column: 1 / -1; } .tm { grid-template-columns: 1fr; } }

#cookie[hidden] { display: none; }
#cookie { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 45; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 15px 19px; background: rgba(26,36,49,.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 14px; font-size: 14px; color: var(--muted); }
#cookie p { margin: 0; flex: 1 1 320px; }
#cookie button { padding: 11px 22px; font: 700 15px/1 var(--display); border-radius: 999px; border: 0; background: var(--amber); color: var(--ink-deep); cursor: pointer; }
@media (min-width: 640px) { #cookie { left: auto; right: 20px; max-width: 560px; } }
@media (max-width: 900px) { #cookie { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }