:root {
  color-scheme: dark;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.28, 0.11, 0.32, 1);
  --hair: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  --grad-blue: linear-gradient(135deg, #142a52 0%, #0071e3 55%, #5ac8fa 100%);
  --grad-blue-text: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%);
  --blue: #0071e3;
  --blue-rgb: 0, 113, 227;
  /* ta sama barwa w składni ze spacjami - pozwala domnażać alfę w calc() */
  --blue-c: 0 113 227;

  /* ── Motyw ────────────────────────────────────────────────────────────
     Wartości poniżej to motyw ciemny i są dokładnie takie, jak były przed
     wprowadzeniem przełącznika - wszystkie mnożniki wynoszą 1, więc ciemna
     strona wygląda bit w bit tak samo jak wcześniej.

     --wash    nakładki budujące hierarchię (włosowe ramki, subtelne tła).
               Na ciemnym to rozjaśnienie, na jasnym przyciemnienie, dlatego
               zmienia się i barwa, i siła: ciemny ślad na bieli czyta się
               mocniej niż jasny na czerni, stąd --wash-k < 1.
     --gloss   błysk na górnej krawędzi kart. Udaje światło padające z góry
               na ciemną bryłę; na białej stronie nie ma czego rozjaśniać,
               więc gaśnie do zera.
     --shadow  cienie. Na bieli czerń przy 0.9 alfy robi brudną obwódkę,
               więc na jasnym motywie są wyraźnie lżejsze i lekko chłodne.
     --glow    poświaty firmowego błękitu pod sekcjami.
     --line    obrysy rysunków SVG. Kreska piksela na bieli gubi się szybciej
               niż na czerni, więc tu mnożnik idzie w górę, nie w dół.
     ──────────────────────────────────────────────────────────────────── */
  --wash: 245 245 247;
  --wash-k: 1;
  --gloss: 255 255 255;
  --gloss-k: 1;
  --shadow: 0 0 0;
  --shadow-k: 1;
  --glow-k: 1;
  --line-k: 1;

  /* Nazwy, którymi posługuje się konfiguracja Tailwinda (bg-black, text-ink,
     bg-sur2…). Wskazują na tokeny niżej, więc podmiana motywu działa dla nich
     sama - nie trzeba ich powtarzać w bloku jasnym. */
  --c-black: var(--n-000000);
  --c-sur: var(--n-0d0d0f);
  --c-sur2: var(--n-141418);
  --c-sur3: var(--n-1c1c21);
  --c-ink: var(--n-f5f5f7);
  --c-ink2: var(--n-86868b);
  --c-ink3: var(--n-5e5e63);
  --n-000000: #000000;
  --n-000000-rgb: 0 0 0;
  --n-07131f: #07131f;
  --n-07131f-rgb: 7 19 31;
  --n-08080a: #08080a;
  --n-08080a-rgb: 8 8 10;
  --n-08080b: #08080b;
  --n-08080b-rgb: 8 8 11;
  --n-0a0a0d: #0a0a0d;
  --n-0a0a0d-rgb: 10 10 13;
  --n-0a0a0e: #0a0a0e;
  --n-0a0a0e-rgb: 10 10 14;
  --n-0b0b0e: #0b0b0e;
  --n-0b0b0e-rgb: 11 11 14;
  --n-0b0b0f: #0b0b0f;
  --n-0b0b0f-rgb: 11 11 15;
  --n-0b0d13: #0b0d13;
  --n-0b0d13-rgb: 11 13 19;
  --n-0c0c0e: #0c0c0e;
  --n-0c0c0e-rgb: 12 12 14;
  --n-0c0c0f: #0c0c0f;
  --n-0c0c0f-rgb: 12 12 15;
  --n-0c0c10: #0c0c10;
  --n-0c0c10-rgb: 12 12 16;
  --n-0c0c11: #0c0c11;
  --n-0c0c11-rgb: 12 12 17;
  --n-0d0d0f: #0d0d0f;
  --n-0d0d0f-rgb: 13 13 15;
  --n-0d0d10: #0d0d10;
  --n-0d0d10-rgb: 13 13 16;
  --n-0d0d11: #0d0d11;
  --n-0d0d11-rgb: 13 13 17;
  --n-0d0d12: #0d0d12;
  --n-0d0d12-rgb: 13 13 18;
  --n-0e0e12: #0e0e12;
  --n-0e0e12-rgb: 14 14 18;
  --n-101013: #101013;
  --n-101013-rgb: 16 16 19;
  --n-101014: #101014;
  --n-101014-rgb: 16 16 20;
  --n-101015: #101015;
  --n-101015-rgb: 16 16 21;
  --n-101522: #101522;
  --n-101522-rgb: 16 21 34;
  --n-111116: #111116;
  --n-111116-rgb: 17 17 22;
  --n-121218: #121218;
  --n-121218-rgb: 18 18 24;
  --n-131315: #131315;
  --n-131315-rgb: 19 19 21;
  --n-131317: #131317;
  --n-131317-rgb: 19 19 23;
  --n-131318: #131318;
  --n-131318-rgb: 19 19 24;
  --n-141418: #141418;
  --n-141418-rgb: 20 20 24;
  --n-15151a: #15151a;
  --n-15151a-rgb: 21 21 26;
  --n-16161b: #16161b;
  --n-16161b-rgb: 22 22 27;
  --n-17171b: #17171b;
  --n-17171b-rgb: 23 23 27;
  --n-17171c: #17171c;
  --n-17171c-rgb: 23 23 28;
  --n-18181e: #18181e;
  --n-18181e-rgb: 24 24 30;
  --n-191920: #191920;
  --n-191920-rgb: 25 25 32;
  --n-1c1c21: #1c1c21;
  --n-1c1c21-rgb: 28 28 33;
  --n-1c1c22: #1c1c22;
  --n-1c1c22-rgb: 28 28 34;
  --n-1c1c23: #1c1c23;
  --n-1c1c23-rgb: 28 28 35;
  --n-2e2e34: #2e2e34;
  --n-2e2e34-rgb: 46 46 52;
  --n-3a3a40: #3a3a40;
  --n-3a3a40-rgb: 58 58 64;
  --n-4a4a50: #4a4a50;
  --n-4a4a50-rgb: 74 74 80;
  --n-4e4e55: #4e4e55;
  --n-4e4e55-rgb: 78 78 85;
  --n-5e5e63: #5e5e63;
  --n-5e5e63-rgb: 94 94 99;
  --n-6b6b73: #6b6b73;
  --n-6b6b73-rgb: 107 107 115;
  --n-6e6e75: #6e6e75;
  --n-6e6e75-rgb: 110 110 117;
  --n-86868b: #86868b;
  --n-86868b-rgb: 134 134 139;
  --n-8a8a8e: #8a8a8e;
  --n-8a8a8e-rgb: 138 138 142;
  --n-8b949e: #8b949e;
  --n-8b949e-rgb: 139 148 158;
  --n-9a9a9e: #9a9a9e;
  --n-9a9a9e-rgb: 154 154 158;
  --n-9a9aa0: #9a9aa0;
  --n-9a9aa0-rgb: 154 154 160;
  --n-9c9ca5: #9c9ca5;
  --n-9c9ca5-rgb: 156 156 165;
  --n-a1a1a8: #a1a1a8;
  --n-a1a1a8-rgb: 161 161 168;
  --n-a6a6ad: #a6a6ad;
  --n-a6a6ad-rgb: 166 166 173;
  --n-b6b6bc: #b6b6bc;
  --n-b6b6bc-rgb: 182 182 188;
  --n-bfbfc6: #bfbfc6;
  --n-bfbfc6-rgb: 191 191 198;
  --n-c9c9cf: #c9c9cf;
  --n-c9c9cf-rgb: 201 201 207;
  --n-c9d1d9: #c9d1d9;
  --n-c9d1d9-rgb: 201 209 217;
  --n-d5d5d8: #d5d5d8;
  --n-d5d5d8-rgb: 213 213 216;
  --n-eaeaec: #eaeaec;
  --n-eaeaec-rgb: 234 234 236;
  --n-f2f2f5: #f2f2f5;
  --n-f2f2f5-rgb: 242 242 245;
  --n-f5f2ef: #f5f2ef;
  --n-f5f2ef-rgb: 245 242 239;
  --n-f5f5f7: #f5f5f7;
  --n-f5f5f7-rgb: 245 245 247;
  --n-ffffff: #ffffff;
  --n-ffffff-rgb: 255 255 255;
}

:root[data-theme="light"] {
  color-scheme: light;
  --hair: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  --wash: 17 17 20;
  --wash-k: 0.55;
  --gloss-k: 0;
  --shadow: 18 20 31;
  --shadow-k: 0.26;
  --glow-k: 0.45;
  --line-k: 1.9;
  --n-000000: #ffffff;
  --n-000000-rgb: 255 255 255;
  --n-07131f: #f2f7fc;
  --n-07131f-rgb: 242 247 252;
  --n-08080a: #fbfbfc;
  --n-08080a-rgb: 251 251 252;
  --n-08080b: #fbfbfc;
  --n-08080b-rgb: 251 251 252;
  --n-0a0a0d: #fafafb;
  --n-0a0a0d-rgb: 250 250 251;
  --n-0a0a0e: #f9f9fb;
  --n-0a0a0e-rgb: 249 249 251;
  --n-0b0b0e: #f9f9fb;
  --n-0b0b0e-rgb: 249 249 251;
  --n-0b0b0f: #f9f9fb;
  --n-0b0b0f-rgb: 249 249 251;
  --n-0b0d13: #f7f8fb;
  --n-0b0d13-rgb: 247 248 251;
  --n-0c0c0e: #f9f9fa;
  --n-0c0c0e-rgb: 249 249 250;
  --n-0c0c0f: #f9f9fa;
  --n-0c0c0f-rgb: 249 249 250;
  --n-0c0c10: #f9f9fa;
  --n-0c0c10-rgb: 249 249 250;
  --n-0c0c11: #f8f8fa;
  --n-0c0c11-rgb: 248 248 250;
  --n-0d0d0f: #f9f9fa;
  --n-0d0d0f-rgb: 249 249 250;
  --n-0d0d10: #f9f9fa;
  --n-0d0d10-rgb: 249 249 250;
  --n-0d0d11: #f8f8fa;
  --n-0d0d11-rgb: 248 248 250;
  --n-0d0d12: #f8f8fa;
  --n-0d0d12-rgb: 248 248 250;
  --n-0e0e12: #f8f8f9;
  --n-0e0e12-rgb: 248 248 249;
  --n-101013: #f7f7f9;
  --n-101013-rgb: 247 247 249;
  --n-101014: #f7f7f9;
  --n-101014-rgb: 247 247 249;
  --n-101015: #f7f7f9;
  --n-101015-rgb: 247 247 249;
  --n-101522: #f0f3f8;
  --n-101522-rgb: 240 243 248;
  --n-111116: #f6f6f8;
  --n-111116-rgb: 246 246 248;
  --n-121218: #f5f5f8;
  --n-121218-rgb: 245 245 248;
  --n-131315: #f6f6f7;
  --n-131315-rgb: 246 246 247;
  --n-131317: #f5f5f7;
  --n-131317-rgb: 245 245 247;
  --n-131318: #f5f5f7;
  --n-131318-rgb: 245 245 247;
  --n-141418: #f5f5f7;
  --n-141418-rgb: 245 245 247;
  --n-15151a: #f4f4f6;
  --n-15151a-rgb: 244 244 246;
  --n-16161b: #f3f3f6;
  --n-16161b-rgb: 243 243 246;
  --n-17171b: #f3f3f5;
  --n-17171b-rgb: 243 243 245;
  --n-17171c: #f3f3f5;
  --n-17171c-rgb: 243 243 245;
  --n-18181e: #f2f2f4;
  --n-18181e-rgb: 242 242 244;
  --n-191920: #f1f1f4;
  --n-191920-rgb: 241 241 244;
  --n-1c1c21: #f0f0f2;
  --n-1c1c21-rgb: 240 240 242;
  --n-1c1c22: #f0f0f2;
  --n-1c1c22-rgb: 240 240 242;
  --n-1c1c23: #efeff2;
  --n-1c1c23-rgb: 239 239 242;
  --n-2e2e34: #e4e4e7;
  --n-2e2e34-rgb: 228 228 231;
  --n-3a3a40: #d9d9dd;
  --n-3a3a40-rgb: 217 217 221;
  --n-4a4a50: #c2c2c6;
  --n-4a4a50-rgb: 194 194 198;
  --n-4e4e55: #babac0;
  --n-4e4e55-rgb: 186 186 192;
  --n-5e5e63: #88888e;
  --n-5e5e63-rgb: 136 136 142;
  --n-6b6b73: #7d7d86;
  --n-6b6b73-rgb: 125 125 134;
  --n-6e6e75: #7c7c84;
  --n-6e6e75-rgb: 124 124 132;
  --n-86868b: #6c6c71;
  --n-86868b-rgb: 108 108 113;
  --n-8a8a8e: #6a6a6e;
  --n-8a8a8e-rgb: 106 106 110;
  --n-8b949e: #5d656f;
  --n-8b949e-rgb: 93 101 111;
  --n-9a9a9e: #5e5e62;
  --n-9a9a9e-rgb: 94 94 98;
  --n-9a9aa0: #5d5d63;
  --n-9a9aa0-rgb: 93 93 99;
  --n-9c9ca5: #595961;
  --n-9c9ca5-rgb: 89 89 97;
  --n-a1a1a8: #57575e;
  --n-a1a1a8-rgb: 87 87 94;
  --n-a6a6ad: #53535a;
  --n-a6a6ad-rgb: 83 83 90;
  --n-b6b6bc: #47474d;
  --n-b6b6bc-rgb: 71 71 77;
  --n-bfbfc6: #3e3e46;
  --n-bfbfc6-rgb: 62 62 70;
  --n-c9c9cf: #37373e;
  --n-c9c9cf-rgb: 55 55 62;
  --n-c9d1d9: #2d3740;
  --n-c9d1d9-rgb: 45 55 64;
  --n-d5d5d8: #313135;
  --n-d5d5d8-rgb: 49 49 53;
  --n-eaeaec: #232326;
  --n-eaeaec-rgb: 35 35 38;
  --n-f2f2f5: #1b1b24;
  --n-f2f2f5-rgb: 27 27 36;
  --n-f5f2ef: #282019;
  --n-f5f2ef-rgb: 40 32 25;
  --n-f5f5f7: #1b1b21;
  --n-f5f5f7-rgb: 27 27 33;
  --n-ffffff: #1a1a1a;
  --n-ffffff-rgb: 26 26 26;
}
/* Przełączenie motywu ma być zmianą światła w pomieszczeniu, a nie przeskokiem
   slajdu - stąd wspólny czas dla płaszczyzn, które widać na całym ekranie.
   Świadomie nie animujemy wszystkiego (transition na `*` dławi przewijanie). */
html,
body,
#nav,
.tile,
.mnav-panel {
  transition:
    background-color 0.45s var(--ease),
    border-color 0.45s var(--ease),
    color 0.45s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html,
  body,
  #nav,
  .tile,
  .mnav-panel {
    transition: none;
  }
}

/* Znak Tadamart jest dwukolorowy: „tadam" i pole sygnetu są białe, ale same
   litery „art" mają czarne wypełnienie. Dlatego potrzebuje inwersji, a nie
   dociśnięcia do czerni - brightness(0) zlałby pole z literami w jedną plamę.
   invert() zamienia oba kolory miejscami i znak zachowuje czytelność. */
:root[data-theme="light"] .tm-logo {
  filter: invert(1);
}
/* Logotypy produktów to z kolei pliki jednokolorowe, rozjaśniane filtrem do
   bieli pod ciemny interfejs - tu wystarczy dociśnięcie w drugą stronę.

   Świadomie nie dotykamy logotypu na kafelku realizacji: tam znak leży na
   przyciemnionym zdjęciu i ma zostać biały niezależnie od motywu strony. */
:root[data-theme="light"] .uv-logo,
:root[data-theme="light"] .rep-logo {
  filter: brightness(0);
}
/* veoimg ma dwa osobne pliki, bo jest dwukolorowy: człon „veo" jest pełną
   bielą albo pełną czernią, a „img" niesie limonkowo-fioletowy gradient,
   którego żaden filtr nie odtworzy (invert wywraca limonkę w granat).
   Zamiast dociskać znak filtrem podmieniamy więc źródło obrazka - dzięki temu
   marka zachowuje swoje kolory w obu motywach.

   Ścieżka jest względna wobec tego arkusza, nie wobec katalogu strony, więc
   działa niezależnie od tego, w jakim podkatalogu stoi serwis (BASE). */
:root[data-theme="light"] .vi-logo {
  content: url("../img/logo-veo2.png");
}

/* Kable łączące źródła ruchu z makietą w hero. Rysuje je main.js, ale wygląd
   trzyma tutaj, żeby jechał z motywem. Kreska jest cienka i wolnostojąca na tle
   sekcji, więc idzie przez --line-k: na czerni 0.14 wystarcza, na bieli ta sama
   wartość dawała ledwie widoczny ślad i zostawały same niebieskie impulsy. */
.hero-kable {
  fill: none;
  stroke: rgb(var(--wash) / calc(0.14 * var(--line-k)));
  stroke-width: 1.25;
}

/* Kafle kanałów w silniku hero noszą znaki marek zamiast liter. Znak dostaje
   podkładkę w kolorze wymaganym przez markę (biel pod Google, czerń pod
   TikTokiem), nadawaną przy samym elemencie - dlatego tutaj zostaje wyłącznie
   geometria: przycięcie do zaokrąglenia i rozmiar znaku w środku. */
.src .mark--znak {
  overflow: hidden;
  padding: 0;
}
.src .mark--znak > svg {
  width: 68%;
  height: 68%;
}
/* Meta to dwa znaki obok siebie, każdy z własnym tłem - kafelek nie ma tu
   żadnego. Selektor celowo wymienia obie klasy: samo `.src .mark--duo` ma tę
   samą wagę co `.src .mark` i przegrywało z jego `display: grid`, przez co
   znaki ustawiały się jeden pod drugim zamiast w rzędzie. */
.src .mark.mark--duo {
  display: flex;
  background: none;
}

/* Napis leżący na firmowym gradiencie musi zostać biały - błękit jest zbyt
   nasycony, żeby czytał się na nim ciemny atrament. Dwa elementy brały kolor
   z motywu i w wersji jasnej robiły się ciemne: aktywna pozycja przełącznika
   „jak to zwykle wygląda / jak wygląda u nas" oraz wybrany typ biznesu
   w macierzy dopasowania na /reklama.
   Korekta dotyczy tylko motywu jasnego, bo w ciemnym te tokeny i tak dają
   niemal biel - dzięki temu ciemna wersja zostaje nietknięta co do wartości.
   Pozostałe elementy na gradiencie trzymają dosłowne #fff i są bezpieczne. */
:root[data-theme="light"] .sw[data-side="1"] .sw-tab[aria-pressed="true"],
:root[data-theme="light"] .fit-type.is-on,
:root[data-theme="light"] .fit-type.is-on:hover {
  color: #fff;
}

/* Szuflada mobilna to matowe szkło. Na ciemnym tle 55% krycia wystarcza, bo
   treść pod spodem i tak jest ciemna. Na jasnym prześwitujący tekst strony
   robi się szarym nalotem pod pozycjami menu - dlatego tafla jest tu gęstsza. */
:root[data-theme="light"] .mnav-panel {
  background: rgb(var(--n-0a0a0d-rgb) / 0.86);
}

/* ── Ciemne moduły z animacjami ───────────────────────────────────────── */
:root[data-theme="light"] :is(#engine, .stage, .sw-card, .build, .dash, .wall-screen, .serp, .dr, .dr-scena, .hub, .sd, .auc, .rep, .anat-mock, .pv-phone, #zespol) {
  --n-000000: #000000;
  --n-000000-rgb: 0 0 0;
  --n-07131f: #07131f;
  --n-07131f-rgb: 7 19 31;
  --n-08080a: #08080a;
  --n-08080a-rgb: 8 8 10;
  --n-08080b: #08080b;
  --n-08080b-rgb: 8 8 11;
  --n-0a0a0d: #0a0a0d;
  --n-0a0a0d-rgb: 10 10 13;
  --n-0a0a0e: #0a0a0e;
  --n-0a0a0e-rgb: 10 10 14;
  --n-0b0b0e: #0b0b0e;
  --n-0b0b0e-rgb: 11 11 14;
  --n-0b0b0f: #0b0b0f;
  --n-0b0b0f-rgb: 11 11 15;
  --n-0b0d13: #0b0d13;
  --n-0b0d13-rgb: 11 13 19;
  --n-0c0c0e: #0c0c0e;
  --n-0c0c0e-rgb: 12 12 14;
  --n-0c0c0f: #0c0c0f;
  --n-0c0c0f-rgb: 12 12 15;
  --n-0c0c10: #0c0c10;
  --n-0c0c10-rgb: 12 12 16;
  --n-0c0c11: #0c0c11;
  --n-0c0c11-rgb: 12 12 17;
  --n-0d0d0f: #0d0d0f;
  --n-0d0d0f-rgb: 13 13 15;
  --n-0d0d10: #0d0d10;
  --n-0d0d10-rgb: 13 13 16;
  --n-0d0d11: #0d0d11;
  --n-0d0d11-rgb: 13 13 17;
  --n-0d0d12: #0d0d12;
  --n-0d0d12-rgb: 13 13 18;
  --n-0e0e12: #0e0e12;
  --n-0e0e12-rgb: 14 14 18;
  --n-101013: #101013;
  --n-101013-rgb: 16 16 19;
  --n-101014: #101014;
  --n-101014-rgb: 16 16 20;
  --n-101015: #101015;
  --n-101015-rgb: 16 16 21;
  --n-101522: #101522;
  --n-101522-rgb: 16 21 34;
  --n-111116: #111116;
  --n-111116-rgb: 17 17 22;
  --n-121218: #121218;
  --n-121218-rgb: 18 18 24;
  --n-131315: #131315;
  --n-131315-rgb: 19 19 21;
  --n-131317: #131317;
  --n-131317-rgb: 19 19 23;
  --n-131318: #131318;
  --n-131318-rgb: 19 19 24;
  --n-141418: #141418;
  --n-141418-rgb: 20 20 24;
  --n-15151a: #15151a;
  --n-15151a-rgb: 21 21 26;
  --n-16161b: #16161b;
  --n-16161b-rgb: 22 22 27;
  --n-17171b: #17171b;
  --n-17171b-rgb: 23 23 27;
  --n-17171c: #17171c;
  --n-17171c-rgb: 23 23 28;
  --n-18181e: #18181e;
  --n-18181e-rgb: 24 24 30;
  --n-191920: #191920;
  --n-191920-rgb: 25 25 32;
  --n-1c1c21: #1c1c21;
  --n-1c1c21-rgb: 28 28 33;
  --n-1c1c22: #1c1c22;
  --n-1c1c22-rgb: 28 28 34;
  --n-1c1c23: #1c1c23;
  --n-1c1c23-rgb: 28 28 35;
  --n-2e2e34: #2e2e34;
  --n-2e2e34-rgb: 46 46 52;
  --n-3a3a40: #3a3a40;
  --n-3a3a40-rgb: 58 58 64;
  --n-4a4a50: #4a4a50;
  --n-4a4a50-rgb: 74 74 80;
  --n-4e4e55: #4e4e55;
  --n-4e4e55-rgb: 78 78 85;
  --n-5e5e63: #5e5e63;
  --n-5e5e63-rgb: 94 94 99;
  --n-6b6b73: #6b6b73;
  --n-6b6b73-rgb: 107 107 115;
  --n-6e6e75: #6e6e75;
  --n-6e6e75-rgb: 110 110 117;
  --n-86868b: #86868b;
  --n-86868b-rgb: 134 134 139;
  --n-8a8a8e: #8a8a8e;
  --n-8a8a8e-rgb: 138 138 142;
  --n-8b949e: #8b949e;
  --n-8b949e-rgb: 139 148 158;
  --n-9a9a9e: #9a9a9e;
  --n-9a9a9e-rgb: 154 154 158;
  --n-9a9aa0: #9a9aa0;
  --n-9a9aa0-rgb: 154 154 160;
  --n-9c9ca5: #9c9ca5;
  --n-9c9ca5-rgb: 156 156 165;
  --n-a1a1a8: #a1a1a8;
  --n-a1a1a8-rgb: 161 161 168;
  --n-a6a6ad: #a6a6ad;
  --n-a6a6ad-rgb: 166 166 173;
  --n-b6b6bc: #b6b6bc;
  --n-b6b6bc-rgb: 182 182 188;
  --n-bfbfc6: #bfbfc6;
  --n-bfbfc6-rgb: 191 191 198;
  --n-c9c9cf: #c9c9cf;
  --n-c9c9cf-rgb: 201 201 207;
  --n-c9d1d9: #c9d1d9;
  --n-c9d1d9-rgb: 201 209 217;
  --n-d5d5d8: #d5d5d8;
  --n-d5d5d8-rgb: 213 213 216;
  --n-eaeaec: #eaeaec;
  --n-eaeaec-rgb: 234 234 236;
  --n-f2f2f5: #f2f2f5;
  --n-f2f2f5-rgb: 242 242 245;
  --n-f5f2ef: #f5f2ef;
  --n-f5f2ef-rgb: 245 242 239;
  --n-f5f5f7: #f5f5f7;
  --n-f5f5f7-rgb: 245 245 247;
  --n-ffffff: #ffffff;
  --n-ffffff-rgb: 255 255 255;
  --wash: 245 245 247;
  --wash-k: 1;
  --gloss: 255 255 255;
  --gloss-k: 1;
  --shadow: 0 0 0;
  --shadow-k: 1;
  --glow-k: 1;
  --line-k: 1;
  /* Aliasy Tailwinda muszą zostać powtórzone. Własność niestandardowa jest
     rozwijana tam, GDZIE ją zadeklarowano - `--c-ink: var(--n-f5f5f7)` z :root
     policzyło się już na jasnych tokenach i potomkowie dziedziczyli gotową,
     ciemną barwę. Bez tego `text-ink` wewnątrz ciemnego modułu zostawał
     czarny na czarnym. */
  --c-black: var(--n-000000);
  --c-sur: var(--n-0d0d0f);
  --c-sur2: var(--n-141418);
  --c-sur3: var(--n-1c1c21);
  --c-ink: var(--n-f5f5f7);
  --c-ink2: var(--n-86868b);
  --c-ink3: var(--n-5e5e63);
  /* --hair z tego samego powodu: to gotowa barwa policzona na :root, a nie
     przepis przeliczany u potomka. Bez powtórzenia włosowe ramki wewnątrz
     ciemnego modułu zostawały ciemne i przez to znikały. */
  --hair: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  color: var(--n-f5f5f7);
}

/* Sekcja zespołu jest pełnej szerokości, więc tło kładziemy wprost na niej -
   pseudoelement z zapasem, jak przy silniku w hero, nie jest tu potrzebny.
   Świadomie NIE używamy tu podniesionej płyty co w kadrach makiet: w motywie
   ciemnym ta sekcja nie ma własnego tła, tylko pokazuje czerń strony. Kadr
   makiety jest bryłą leżącą na stronie i podniesienie mu służy, a tu chodzi
   o wierne przeniesienie sekcji - więc czerń zostaje czernią. */
:root[data-theme="light"] #zespol {
  background: var(--n-000000);
}

/* Podkład pod silnikiem w hero. Kadry makiet i scenki mają własne tło
   z projektu, ale silnik jest „rozsypany" po siatce - kafle źródeł, makieta
   i wyniki leżą luzem na tle sekcji. Płyta wjeżdża więc pseudoelementem,
   z zapasem poza obrys i miękką krawędzią, żeby nie wyglądała jak doklejony
   prostokąt. Ujemny odstęp mieści się w px-6 rodzica, więc nic nie wychodzi
   poza kolumnę. */
:root[data-theme="light"] #engine::before {
  content: "";
  position: absolute;
  inset: -2rem -1.25rem;
  border-radius: 32px;
  background:
    radial-gradient(72% 62% at 50% 38%, rgb(var(--blue-c) / 0.10), transparent 70%),
    linear-gradient(180deg, #20202a 0%, #15151c 100%);
}

html {
  background: var(--n-000000);
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--sans);
}

.t-hero {
  font-size: clamp(2.75rem, 7.6vw, 6.25rem);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
}
.t-h2 {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.t-h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.1;
}
.t-lead {
  font-size: clamp(1.125rem, 1.9vw, 1.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.t-eyebrow {
  font-size: clamp(1.0625rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.t-body {
  font-size: 1.0625rem;
  line-height: 1.6;
}
.t-tiny {
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.silver {
  background: linear-gradient(180deg, var(--n-ffffff) 0%, var(--n-f2f2f5) 38%, var(--n-bfbfc6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-gradient {
  background: var(--grad-blue);
  box-shadow: 0 8px 28px -10px rgba(90, 200, 250, 0.4);
  transition:
    filter 0.3s var(--ease),
    box-shadow 0.35s var(--ease),
    transform 0.2s var(--ease);
}
.btn-gradient:hover {
  filter: brightness(1.12) saturate(1.15);
  box-shadow: 0 10px 34px -8px rgba(90, 200, 250, 0.65);
}
.btn-gradient:active {
  transform: scale(0.97);
}

.btn-outline {
  border: 1px solid var(--hair);
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.btn-outline:hover {
  border-color: rgba(var(--blue-rgb), 0.5);
  background: rgba(var(--blue-rgb), 0.08);
  color: var(--n-f5f5f7);
}

.text-gradient {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.icon-hover-gradient {
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.icon-hover-gradient:hover {
  background-image: var(--grad-blue);
  color: #fff;
}

.group:hover .text-gradient-hover {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link:focus {
  background-image: var(--grad-blue);
}

::selection {
  background: var(--blue);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 6px;
}

#nav {
  transition:
    background-color 0.5s var(--ease),
    backdrop-filter 0.5s var(--ease),
    border-color 0.5s var(--ease);
}
#nav.solid {
  background: rgb(var(--n-000000-rgb) / 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: var(--hair);
}

.nav-drop-btn svg {
  transition: transform 0.3s var(--ease);
}
.nav-drop.open .nav-drop-btn svg {
  transform: rotate(180deg);
}
.nav-drop-panel {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -6px);
  padding-top: 14px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.22s var(--ease),
    transform 0.22s var(--ease),
    visibility 0.22s;
}
.nav-drop.open .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop-card {
  width: max-content;
  min-width: 280px;
  background: var(--n-131317);
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 28px 60px -20px rgb(var(--shadow) / calc(0.85 * var(--shadow-k)));
}
.nav-drop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background-color 0.25s var(--ease);
}
.nav-drop-item:hover,
.nav-drop-item:focus-visible {
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.nav-drop-item-icon {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 1px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.14 * var(--wash-k)));
  color: var(--n-86868b);
  transition: color 0.25s var(--ease);
}
.nav-drop-item:hover .nav-drop-item-icon,
.nav-drop-item:focus-visible .nav-drop-item-icon {
  color: var(--blue);
}
.nav-drop-item-icon.nav-duo {
  display: flex;
  background: none;
}
.nav-drop-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-drop-item-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n-f5f5f7);
}
.nav-drop-item-desc {
  font-size: 12px;
  color: var(--n-86868b);
}
.nav-drop-panel--end {
  left: auto;
  right: 0;
  transform: translate(0, -6px);
}
.nav-drop.open .nav-drop-panel--end {
  transform: translate(0, 0);
}
.nav-drop-cap {
  padding: 4px 10px 8px;
}
.nav-drop-logo {
  align-self: flex-start;
  width: auto;
  margin-bottom: 3px;
}
.nav-drop-logo--uv {
  height: 15px;
}
.nav-drop-logo--vi {
  height: 24px;
  margin: -4px 0 0;
}

.mnav-sub .mnav-prod {
  display: block;
  padding: 0.5rem 0;
}
.mnav-prod-logo {
  display: block;
  width: auto;
}
.mnav-prod-logo--uv {
  height: 17px;
}
.mnav-prod-logo--vi {
  height: 27px;
  margin: -5px 0 -4px;
}
.mnav-prod-d {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78125rem;
  line-height: 1.35;
  color: var(--n-86868b);
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 99px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
/* Jedno pole 29x21 dla obu pigułek - języka i motywu - żeby stojąc obok
   siebie w headerze miały dokładnie ten sam rozmiar. To wymiar ikony motywu
   (13x13) z jej oddechem 8/4 px; skróty PL/EN są węższe niż 29 px, więc
   mieszczą się w tym polu wyśrodkowane i nie potrzebują własnego paddingu. */
.lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  height: 21px;
  padding: 0;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--n-86868b);
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.lang-opt.is-on {
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
a.lang-opt:not(.is-on):hover {
  color: var(--n-f5f5f7);
}
/* Przełącznik motywu jest zbudowany z tych samych klas co przełącznik języka
   obok - stoją ramię w ramię, więc mają czytać się jako jedna para ustawień,
   a nie dwa osobne widżety. Różnica jest jedna: w środku siedzi ikona zamiast
   skrótu językowego, i to ona wymaga poniższych korekt. */
/* Rozmiar pigułki siedzi już na wspólnym `.lang-opt` powyżej - tutaj zostaje
   tylko to, co wynika z tego, że motyw to <button>, a język to <a>. */
button.lang-opt {
  background: none;
  border: 0;
  cursor: pointer;
}
button.lang-opt svg {
  display: block;
}
button.lang-opt:not(.is-on):hover {
  color: var(--n-f5f5f7);
}
/* W stopce menu mobilnego oba przełączniki siedzą w wierszu z numerem NIP,
   który potrafi się rozepchać - bez tego pigułka motywu zwężałaby się pierwsza
   i ikony zaczęłyby się zlewać z krawędzią. */
.lang--motyw {
  flex: none;
}
.mnav-sw {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.lang-note {
  position: fixed;
  z-index: 45;
  top: 52px;
  left: 0;
  right: 0;
  padding: 0.45rem 1.5rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--n-a1a1a8);
  background: rgba(0, 113, 227, 0.14);
  border-bottom: 1px solid rgba(var(--blue-rgb), 0.28);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

.burger {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -10px;
}
.burger-box {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}
.burger-box span {
  position: absolute;
  right: 0;
  height: 1.5px;
  border-radius: 99px;
  background: var(--n-f5f5f7);
  transition:
    width 0.4s var(--ease),
    transform 0.4s var(--ease),
    opacity 0.25s var(--ease);
}
.burger-box span:nth-child(1) {
  top: 0;
  width: 20px;
}
.burger-box span:nth-child(2) {
  top: 50%;
  margin-top: -0.75px;
  width: 12px;
}
.burger-box span:nth-child(3) {
  bottom: 0;
  width: 16px;
}
.burger[aria-expanded="false"]:active .burger-box span {
  width: 13px;
}
.burger[aria-expanded="true"] .burger-box span:nth-child(1) {
  transform: translateY(6.25px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger-box span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.burger[aria-expanded="true"] .burger-box span:nth-child(3) {
  width: 20px;
  transform: translateY(-6.25px) rotate(-45deg);
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
  transition: visibility 0.5s;
}
.mnav.open {
  visibility: visible;
}
.mnav-scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.mnav.open .mnav-scrim {
  opacity: 1;
}
.mnav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: rgb(var(--n-0a0a0d-rgb) / 0.55);
  backdrop-filter: saturate(180%) blur(34px);
  -webkit-backdrop-filter: saturate(180%) blur(34px);
  transform: translateX(100%);
  transition: transform 0.55s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mnav.open .mnav-panel {
  transform: none;
}
.mnav-top {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 1rem 0 1.35rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  background: rgb(var(--n-0c0c0f-rgb) / 0.82);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.mnav-x {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 99px;
  color: var(--n-86868b);
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.mnav-x:hover {
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}

.mnav-body {
  flex: none;
  padding: 0.35rem 1.35rem 0.25rem;
}
.mnav-item,
.mnav-link {
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mnav-body > :last-child {
  border-bottom: 0;
}
.mnav-acc,
.mnav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.72rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
  text-align: left;
  transition: color 0.25s var(--ease);
}
.mnav-link.is-accent {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mnav-acc .sign {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--n-5e5e63);
}
.mnav-sub {
  padding-bottom: 0.5rem;
}
.mnav-sub a {
  display: block;
  padding: 0.38rem 0;
  font-size: 0.9375rem;
  color: var(--n-86868b);
  transition: color 0.25s var(--ease);
}
.mnav-sub a:hover {
  color: var(--n-f5f5f7);
}

.mnav-foot {
  flex: none;
  margin-top: auto;
  padding: 1rem 1.35rem calc(1.15rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  background: rgb(var(--wash) / calc(0.025 * var(--wash-k)));
}
.mnav-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.38rem 0;
  color: var(--n-f5f5f7);
}
.mnav-row:first-of-type {
  margin-top: 0.55rem;
}
.mnav-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9px;
  color: #5ac8fa;
  background: rgba(var(--blue-rgb), 0.14);
}
.mnav-row-txt {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  word-break: break-word;
}
.mnav-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.9rem;
  padding: 0.68rem 1rem;
  border-radius: 99px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
}
.mnav-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mnav-nip {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--n-5e5e63);
}

[data-r] {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-r].in {
  opacity: 1;
  transform: none;
}

.glow-blue {
  background: radial-gradient(50% 50% at 50% 42%, rgb(var(--blue-c) / calc(0.28 * var(--glow-k))), rgb(var(--blue-c) / calc(0.06 * var(--glow-k))) 45%, transparent 72%);
}
.pane {
  background: linear-gradient(180deg, var(--n-191920) 0%, var(--n-0e0e12) 100%);
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  box-shadow:
    0 40px 90px -30px rgb(var(--shadow) / calc(0.9 * var(--shadow-k))),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.05 * var(--gloss-k)));
}
.pane-front {
  box-shadow:
    0 34px 70px -18px rgb(var(--shadow) / calc(0.95 * var(--shadow-k))),
    0 0 0 5px rgb(var(--shadow) / var(--shadow-k)),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.06 * var(--gloss-k)));
}
.bar {
  background: rgb(var(--wash) / calc(0.13 * var(--wash-k)));
  border-radius: 99px;
}
.bar-b {
  background: var(--grad-blue);
  border-radius: 99px;
}

.cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-86868b);
}
.dotgrid {
  background-image: radial-gradient(rgb(var(--wash) / calc(0.075 * var(--wash-k))) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 60% at 50% 50%, #000 30%, transparent 100%);
}
.src,
.out {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--n-101014);
  border: 1px solid rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  border-radius: 12px;
  padding: 0.5rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--n-c9c9cf);
  line-height: 1.2;
}
.src .mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 6px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-9c9ca5);
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.out {
  justify-content: flex-start;
}
.out .tick {
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 99px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.85);
}
@media (max-width: 1023px) {
  .out {
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
    padding: 0.6rem 0.5rem;
  }
}
.panel-dim {
  background: var(--n-0a0a0d);
  border: 1px solid rgb(var(--wash) / calc(0.055 * var(--wash-k)));
}
.panel-hi {
  background: linear-gradient(180deg, var(--n-121218) 0%, var(--n-0d0d12) 100%);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  box-shadow:
    0 0 80px -26px rgba(var(--blue-rgb), 0.42),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.05 * var(--gloss-k)));
}
.badge-x,
.badge-v {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.1rem;
  border-radius: 99px;
  display: grid;
  place-items: center;
}
.badge-x {
  background: rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  color: var(--n-5e5e63);
}
.badge-v {
  background: rgba(var(--blue-rgb), 0.16);
  color: var(--blue);
}
.badge-x svg,
.badge-v svg {
  width: 0.75rem;
  height: 0.75rem;
}

.sw-seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 430px);
  margin-inline: auto;
  padding: 4px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
  border: 1px solid var(--hair);
}
.sw-thumb {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  transition:
    transform 0.45s var(--ease),
    background 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.sw[data-side="1"] .sw-thumb {
  transform: translateX(100%);
  background: var(--grad-blue);
  box-shadow: 0 8px 26px -10px rgba(90, 200, 250, 0.6);
}
.sw-tab {
  position: relative;
  z-index: 1;
  padding: 0.6rem 0.4rem;
  border-radius: 99px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--n-86868b);
  transition: color 0.35s var(--ease);
}
.sw-tab[aria-pressed="true"] {
  color: var(--n-f5f5f7);
}

.sw-card {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-111116) 0%, var(--n-0a0a0d) 100%);
  box-shadow: 0 40px 90px -50px rgb(var(--shadow) / var(--shadow-k));
  transition:
    border-color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.sw[data-side="1"] .sw-card {
  border-color: rgba(var(--blue-rgb), 0.34);
  box-shadow:
    0 40px 90px -46px rgb(var(--shadow) / var(--shadow-k)),
    0 0 90px -28px rgba(var(--blue-rgb), 0.5);
}
.sw-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgb(var(--blue-c) / calc(0.16 * var(--glow-k))), transparent 70%);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.sw[data-side="1"] .sw-aura {
  opacity: 1;
}
.sw-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgb(var(--gloss) / calc(0.075 * var(--gloss-k))) 50%, transparent 58%);
}
.sw.flip .sw-sheen {
  animation: swSheen 0.85s var(--ease);
}
@keyframes swSheen {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(110%);
  }
}

.sw-card::before,
.sw-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  z-index: 2;
}
.sw-card::before {
  background: linear-gradient(90deg, transparent, rgb(var(--wash) / calc(0.16 * var(--wash-k))) 24%, rgb(var(--wash) / calc(0.16 * var(--wash-k))) 76%, transparent);
}
.sw-card::after {
  background: linear-gradient(90deg, transparent, rgba(90, 200, 250, 0.8) 28%, rgba(90, 200, 250, 0.8) 72%, transparent);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.sw[data-side="1"] .sw-card::after {
  opacity: 1;
}

.sw-row {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 0.4rem;
  padding: 1.15rem 1.4rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.065 * var(--wash-k)));
}
.sw-row:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  .sw-row {
    grid-template-columns: 124px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.35rem 2rem;
  }
}
.sw-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgb(var(--blue-c) / calc(0.13 * var(--glow-k))), rgb(var(--blue-c) / calc(0.03 * var(--glow-k))) 38%, transparent 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  transition-delay: calc(var(--i) * 60ms);
}
.sw[data-side="1"] .sw-row::before {
  opacity: 1;
}

.sw-key {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
  transition: color 0.4s var(--ease);
}
@media (min-width: 768px) {
  .sw-key {
    padding-top: 0.4rem;
  }
}
.sw[data-side="1"] .sw-key {
  color: var(--n-86868b);
}

.sw-states {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
}
.sw-state {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(5px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease),
    filter 0.45s var(--ease);
  transition-delay: calc(var(--i) * 55ms);
}
.sw[data-side="0"] .sw-state[data-state="0"],
.sw[data-side="1"] .sw-state[data-state="1"] {
  opacity: 1;
  transform: none;
  filter: none;
}
.sw-txt {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--n-86868b);
}
@media (min-width: 768px) {
  .sw-txt {
    font-size: 1.1875rem;
  }
}
.sw-state[data-state="1"] .sw-txt {
  color: var(--n-f5f5f7);
  font-weight: 500;
}
.sw .badge-x,
.sw .badge-v {
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.1rem;
}
.sw .badge-x svg,
.sw .badge-v svg {
  width: 0.9rem;
  height: 0.9rem;
}

.sw-foot {
  background: rgb(var(--wash) / calc(0.02 * var(--wash-k)));
}
.sw-punch {
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}
.sw-hint {
  transition: opacity 0.4s var(--ease);
}
.sw-hint.gone {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sw-state,
  .sw-row::before {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
  .sw-state {
    filter: none;
  }
}

.tk-ask {
  max-width: 620px;
  margin-inline: auto;
  padding: 1.35rem 1.6rem 1.5rem;
  border-radius: 22px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-131318) 0%, var(--n-0b0b0f) 100%);
  box-shadow: 0 30px 70px -50px rgb(var(--shadow) / var(--shadow-k));
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.tk.in .tk-ask {
  opacity: 1;
  transform: none;
}
.tk-who {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.tk-say {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--n-f5f5f7);
}
@media (min-width: 768px) {
  .tk-say {
    font-size: 1.1875rem;
  }
}

.tk-stem {
  width: 1px;
  height: 34px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgb(var(--wash) / calc(0.22 * var(--wash-k))), rgb(var(--wash) / calc(0.05 * var(--wash-k))));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.5s var(--ease) 0.25s;
}
.tk.in .tk-stem {
  transform: none;
}
.tk-fork {
  display: none;
  width: 100%;
  height: 64px;
}
@media (min-width: 768px) {
  .tk-stem {
    display: none;
  }
  .tk-fork {
    display: block;
  }
}
.tk-wire {
  stroke: rgb(var(--wash) / calc(0.16 * var(--line-k)));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.85s var(--ease) 0.2s;
}
.tk-wire-on {
  stroke: rgba(90, 200, 250, 0.75);
  filter: drop-shadow(0 0 6px rgba(var(--blue-rgb), 0.5));
  transition-delay: 0.34s;
}
.tk.in .tk-wire {
  stroke-dashoffset: 0;
}

.tk-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .tk-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}
.tk-a {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: 24px;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.tk.in .tk-a {
  opacity: 1;
  transform: none;
}
.tk.in .panel-dim {
  transition-delay: 0.5s;
}
.tk.in .panel-hi {
  transition-delay: 0.68s;
}
.tk-cap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.panel-hi .tk-cap {
  color: var(--n-86868b);
}
.tk-cap .badge-x,
.tk-cap .badge-v {
  margin-top: 0;
}
.tk-quote {
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--n-86868b);
}
.panel-hi .tk-quote {
  color: var(--n-f5f5f7);
}
@media (min-width: 768px) {
  .tk-quote {
    font-size: 1.1875rem;
  }
}
.tk-note {
  margin-top: auto;
  padding-top: 0.15rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--n-5e5e63);
}
.panel-hi .tk-note {
  color: var(--n-86868b);
}
.tk-foot {
  margin-top: 1.75rem;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--n-86868b);
}

@media (prefers-reduced-motion: reduce) {
  .tk-ask,
  .tk-a {
    transition-duration: 0.01ms;
    transition-delay: 0ms;
  }
  .tk-stem,
  .tk-wire {
    transition: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}

.core-card {
  background: linear-gradient(180deg, var(--n-191920) 0%, var(--n-0b0b0f) 100%);
  border: 1px solid rgb(var(--wash) / calc(0.13 * var(--wash-k)));
  box-shadow:
    0 40px 90px -30px rgb(var(--shadow) / var(--shadow-k)),
    0 0 70px -14px rgba(var(--blue-rgb), 0.3),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.06 * var(--gloss-k)));
}

.wire-run {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 7 93;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.9));
  animation: wire var(--dur, 3.5s) linear var(--delay, 0s) infinite;
}
.wire-run.out {
  stroke-width: 2.4;
}
@keyframes wire {
  to {
    stroke-dashoffset: -100;
  }
}

.core-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: coreBreathe 4s ease-in-out infinite;
}
@keyframes coreBreathe {
  0%,
  100% {
    opacity: 0.16;
    transform: scale(0.985);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.025);
  }
}
.out-nodes circle {
  animation: nodeGlow 2.6s ease-in-out infinite;
}
.out-nodes circle:nth-child(2) {
  animation-delay: 0.7s;
}
.out-nodes circle:nth-child(3) {
  animation-delay: 1.4s;
}
@keyframes nodeGlow {
  0%,
  100% {
    opacity: 0.45;
    filter: none;
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 7px rgba(var(--blue-rgb), 0.95));
  }
}

@property --spot {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.tile {
  position: relative;
  background-color: var(--n-101014);
  background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--blue-rgb), var(--spot, 0)), transparent 68%);
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  border-radius: 28px;
  transition:
    transform 0.6s var(--ease),
    background-color 0.6s var(--ease),
    border-color 0.6s var(--ease),
    --spot 0.45s var(--ease);
}
.tile:hover {
  transform: translateY(-6px);
  background-color: var(--n-15151a);
  border-color: rgb(var(--wash) / calc(0.13 * var(--wash-k)));
  --spot: 0.13;
}

.tile-b {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 2rem 2rem;
}
.tile-body .btn-outline {
  align-self: flex-start;
}
@media (min-width: 1024px) {
  .tile-body {
    padding: 2rem 2.75rem 2.75rem;
  }
}
.stage {
  position: relative;
  height: 205px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  background: radial-gradient(90% 130% at 50% 0%, rgb(var(--blue-c) / calc(0.13 * var(--glow-k))), transparent 62%), linear-gradient(180deg, rgb(var(--n-18181e-rgb) / 0.92) 0%, rgb(var(--n-0c0c10-rgb) / 0.92) 100%);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(var(--wash) / calc(0.07 * var(--wash-k))) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 20%, transparent 100%);
}
@media (max-width: 400px) {
  .stage {
    height: 168px;
  }
}
.tile-b:hover .mk-win,
.tile-b:hover .mk-phones {
  transform: translateY(-3px) scale(1.02);
}

.mk-win,
.mk-phones {
  position: relative;
  z-index: 1;
  transition: transform 0.6s var(--ease);
}
.mk-win {
  border-radius: 12px;
  border: 1px solid rgb(var(--wash) / calc(0.14 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-1c1c23) 0%, var(--n-101015) 100%);
  box-shadow:
    0 26px 50px -20px rgb(var(--shadow) / var(--shadow-k)),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.06 * var(--gloss-k)));
  overflow: hidden;
}
.mk-top {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 17px;
  padding: 0 8px;
  background: rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mk-top i {
  width: 4px;
  height: 4px;
  border-radius: 99px;
  background: var(--n-3a3a40);
}
.mk-in {
  padding: 10px;
}
.mk-l {
  height: 4px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.15 * var(--wash-k)));
}
.mk-l + .mk-l {
  margin-top: 5px;
}

.mk-hero {
  height: 32px;
  border-radius: 6px;
  margin-bottom: 9px;
  background: linear-gradient(120deg, rgb(var(--blue-c) / calc(0.55 * var(--glow-k))), rgba(90, 200, 250, 0.28) 60%, rgb(var(--wash) / calc(0.05 * var(--wash-k))));
}
.mk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 9px;
}
.mk-cards span {
  height: 18px;
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.mk-p {
  animation: mkPaint 5.6s var(--ease) var(--s, 0s) infinite;
}
@keyframes mkPaint {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  9%,
  86% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
    transform: translateY(7px);
  }
}

.mk-shop {
  display: flex;
  gap: 9px;
}
.mk-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 7px;
  background: linear-gradient(140deg, rgb(var(--blue-c) / calc(0.4 * var(--glow-k))), rgb(var(--wash) / calc(0.06 * var(--wash-k))));
}
.mk-price {
  width: 34px;
  height: 7px;
  border-radius: 99px;
  margin-top: 7px;
  background: rgb(var(--wash) / calc(0.28 * var(--wash-k)));
}
.mk-btn {
  margin-top: 8px;
  padding: 4px 0;
  border-radius: 99px;
  text-align: center;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--grad-blue);
  animation: mkPress 4.4s var(--ease) infinite;
}
@keyframes mkPress {
  0%,
  16% {
    transform: none;
    filter: none;
  }
  21% {
    transform: scale(0.92);
    filter: brightness(1.3);
  }
  28%,
  100% {
    transform: none;
    filter: none;
  }
}
.mk-fly {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -60px;
  border-radius: 4px;
  background: linear-gradient(140deg, #5ac8fa, var(--blue));
  box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.8);
  opacity: 0;
  animation: mkFly 4.4s var(--ease) infinite;
}
@keyframes mkFly {
  0%,
  21% {
    opacity: 0;
    transform: none;
  }
  26% {
    opacity: 1;
    transform: translate(6px, -6px) scale(1);
  }
  44% {
    opacity: 1;
    transform: translate(112px, -74px) scale(0.45);
  }
  48%,
  100% {
    opacity: 0;
    transform: translate(112px, -74px) scale(0.3);
  }
}
.mk-cart {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  backdrop-filter: blur(6px);
  animation: mkCart 4.4s var(--ease) infinite;
}
.mk-cart svg {
  width: 14px;
  height: 14px;
}
.mk-cart b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: var(--blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  box-shadow: 0 0 12px rgba(var(--blue-rgb), 0.7);
}
@keyframes mkCart {
  0%,
  44% {
    transform: none;
    border-color: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  }
  50% {
    transform: scale(1.16);
    border-color: rgba(var(--blue-rgb), 0.6);
  }
  60%,
  100% {
    transform: none;
    border-color: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  }
}

.mk-app {
  display: flex;
  height: 96px;
}
.mk-side {
  flex: none;
  width: 28px;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-right: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mk-side i {
  height: 5px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.13 * var(--wash-k)));
}
.mk-side i.on {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.8);
}
.mk-main {
  flex: 1;
  padding: 8px;
}
.mk-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.mk-kpis span {
  height: 16px;
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mk-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
  margin-top: 8px;
}
.mk-chart b {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, rgba(90, 200, 250, 0.85), rgb(var(--blue-c) / calc(0.6 * var(--glow-k))));
  transform-origin: bottom;
  animation: mkGrow 4.8s var(--ease) var(--s, 0s) infinite;
}
@keyframes mkGrow {
  0% {
    transform: scaleY(0.05);
    opacity: 0.35;
  }
  16%,
  84% {
    transform: scaleY(1);
    opacity: 1;
  }
  96%,
  100% {
    transform: scaleY(0.05);
    opacity: 0.35;
  }
}

.mk-phones {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.mk-phone {
  border-radius: 13px;
  border: 1px solid rgb(var(--wash) / calc(0.14 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-1c1c23) 0%, var(--n-101015) 100%);
  box-shadow:
    0 26px 50px -20px rgb(var(--shadow) / var(--shadow-k)),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.06 * var(--gloss-k)));
  padding: 9px 7px 7px;
}
.mk-phone.front {
  position: relative;
  width: 84px;
  height: 152px;
  overflow: hidden;
}
.mk-phone.back {
  width: 64px;
  height: 120px;
  opacity: 0.6;
  transform: rotate(-5deg);
  transform-origin: bottom right;
}
.mk-hero-s {
  height: 30px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(140deg, rgb(var(--blue-c) / calc(0.5 * var(--glow-k))), rgba(90, 200, 250, 0.22) 65%, rgb(var(--wash) / calc(0.05 * var(--wash-k))));
}
.mk-rows {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.mk-rows i {
  height: 13px;
  border-radius: 4px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.mk-notch {
  display: block;
  width: 20px;
  height: 3px;
  margin: 0 auto 9px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.18 * var(--wash-k)));
}
.mk-toast {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  background: rgb(var(--n-1c1c23-rgb) / 0.92);
  border: 1px solid rgba(var(--blue-rgb), 0.45);
  box-shadow: 0 10px 24px -8px rgb(var(--shadow) / var(--shadow-k));
  backdrop-filter: blur(4px);
  animation: mkToast 5s var(--ease) infinite;
}
.mk-toast span {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--grad-blue);
}
.mk-toast i {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.3 * var(--wash-k)));
}
@keyframes mkToast {
  0%,
  8% {
    opacity: 0;
    transform: translateY(-22px);
  }
  18%,
  62% {
    opacity: 1;
    transform: none;
  }
  74%,
  100% {
    opacity: 0;
    transform: translateY(-22px);
  }
}
.mk-tabs {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 7px;
  display: flex;
  gap: 5px;
}
.mk-tabs i {
  flex: 1;
  height: 4px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.mk-tabs i.on {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.7);
}

.stage * {
  animation-play-state: paused;
}
.tile-b.in .stage * {
  animation-play-state: running;
}

.stage-crv {
  display: block;
  place-items: normal;
  text-align: left;
  padding: 1.1rem 1.4rem;
}
.crv {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.5rem;
  width: 100%;
  height: calc(100% - 4.8rem);
}
.crv-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 6px rgba(var(--blue-rgb), 0.55));
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.crv-line.seo {
  stroke: #5ac8fa;
}
.crv-area {
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.7s;
}
.tile.in .crv-line {
  animation: crvDraw var(--dur, 3.6s) linear 0.25s infinite;
}
.tile.in .crv-area {
  opacity: 1;
}
@keyframes crvDraw {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: -100;
  }
}
.crv-tag,
.crv-foot {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-86868b);
}
.crv-foot {
  position: absolute;
  left: 1.4rem;
  bottom: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.8125rem;
  color: var(--n-c9c9cf);
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--n-a1a1a8);
}
.fact svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--blue);
}
.chip {
  border-radius: 99px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: var(--n-86868b);
}

.base {
  display: grid;
  gap: 1.75rem;
  padding: 2rem;
  background-image: linear-gradient(180deg, rgb(var(--blue-c) / calc(0.07 * var(--glow-k))), transparent 60%), radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(var(--blue-rgb), var(--spot, 0)), transparent 68%);
}
@media (min-width: 1024px) {
  .base {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 2.75rem;
  }
  .base-side {
    text-align: right;
    max-width: 320px;
  }
}

.arw {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.tile:hover .arw {
  transform: translateX(3px);
}
.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .stage * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.stage-sm {
  height: 158px;
}
.sc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.sc-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--n-f5f5f7);
}
.sc-desc {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--n-86868b);
}
.tile-sc .tile-body {
  padding: 1.5rem 1.6rem 1.8rem;
}

.sc-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.sc-phone {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 10px 26px -8px rgba(var(--blue-rgb), 0.9);
}
.sc-phone svg {
  width: 19px;
  height: 19px;
}
.sc-phone::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: #34c759;
  border: 2.5px solid var(--n-101014);
  animation: scLive 2.4s var(--ease) infinite;
}
@keyframes scLive {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  }
  55% {
    box-shadow: 0 0 0 6px rgba(52, 199, 89, 0);
  }
}
.sc-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
}
.sc-wave b {
  width: 3px;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(180deg, #5ac8fa, #0071e3);
  transform: scaleY(0.16);
  animation: scWave 1.3s var(--ease) infinite;
  animation-delay: var(--s, 0s);
}
@keyframes scWave {
  0%,
  100% {
    transform: scaleY(0.16);
  }
  50% {
    transform: scaleY(var(--p, 1));
  }
}

.sc-tm {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
  width: 100%;
  padding: 0 1.5rem;
}
.sc-tm-cap {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.sc-tm-cap.on {
  color: var(--n-86868b);
}
.sc-tm-track {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.sc-tm-track::after {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  bottom: -4px;
  border-right: 1.5px dashed rgb(var(--wash) / calc(0.22 * var(--wash-k)));
}
.sc-tm-track i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 99px;
}
.sc-tm-track i.slow {
  background: rgb(var(--wash) / calc(0.22 * var(--wash-k)));
  animation: scTmSlow 5.4s linear infinite;
}
.sc-tm-track i.fast {
  background: var(--grad-blue);
  box-shadow: 0 0 16px rgba(var(--blue-rgb), 0.75);
  animation: scTmFast 5.4s var(--ease) infinite;
}
.sc-tm-ok {
  position: absolute;
  right: -11px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 99px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 6px 18px -6px rgba(var(--blue-rgb), 0.95);
  opacity: 0;
  animation: scTmOk 5.4s var(--ease) infinite;
}
.sc-tm-ok svg {
  width: 12px;
  height: 12px;
}
.sc-tm-ok::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 99px;
  border: 1px solid rgba(var(--blue-rgb), 0.8);
  opacity: 0;
  animation: scTmRing 5.4s var(--ease) infinite;
}
@keyframes scTmSlow {
  0% {
    width: 0;
  }
  88%,
  100% {
    width: 31%;
  }
}
@keyframes scTmFast {
  0%,
  4% {
    width: 0;
  }
  20%,
  90% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}
@keyframes scTmOk {
  0%,
  18% {
    opacity: 0;
    transform: scale(0.4);
  }
  27%,
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}
@keyframes scTmRing {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.85);
  }
  28% {
    opacity: 0.9;
  }
  48%,
  100% {
    opacity: 0;
    transform: scale(1.7);
  }
}

.sc-shield {
  place-items: center;
}
.sc-sh-box {
  position: relative;
  display: grid;
  place-items: center;
}
.sc-sh-box::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 99px;
  background: radial-gradient(circle, rgb(var(--blue-c) / calc(0.45 * var(--glow-k))), transparent 68%);
  opacity: 0;
  animation: scShGlow 5.4s var(--ease) infinite;
}
.sc-sh-svg {
  position: relative;
  display: block;
  width: 70px;
  height: 83px;
  overflow: visible;
}
.sc-sh-fill {
  opacity: 0;
  animation: scShFill 5.4s var(--ease) infinite;
}
.sc-sh-line {
  stroke: url(#shGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(90, 200, 250, 0.5));
  animation: scShLine 5.4s var(--ease) infinite;
}
.sc-sh-ok {
  stroke: #fff;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: scShOk 5.4s var(--ease) infinite;
}
@keyframes scShLine {
  0%,
  4% {
    stroke-dashoffset: 100;
  }
  42%,
  90% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 100;
  }
}
@keyframes scShOk {
  0%,
  46% {
    stroke-dashoffset: 100;
  }
  62%,
  90% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 100;
  }
}
@keyframes scShFill {
  0%,
  44% {
    opacity: 0;
  }
  58%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scShGlow {
  0%,
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  68%,
  100% {
    opacity: 0.35;
  }
}

.sc-ahead {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 0 1.5rem;
}
.sc-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 11px;
  height: 72px;
}
.sc-bars b {
  position: relative;
  width: 16px;
  height: var(--h);
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.15 * var(--wash-k)));
  transform-origin: bottom;
  animation: scRise 5.4s var(--ease) infinite;
  animation-delay: var(--s, 0s);
}
.sc-bars b.next {
  background: transparent;
  border: 1.5px dashed rgba(var(--blue-rgb), 0.8);
  box-shadow: 0 0 20px rgba(var(--blue-rgb), 0.3);
}
.sc-badge {
  position: absolute;
  left: 50%;
  top: -12px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 99px;
  color: #fff;
  background: var(--grad-blue);
  box-shadow: 0 6px 16px -6px rgba(var(--blue-rgb), 0.95);
  animation: scBadge 5.4s var(--ease) infinite;
}
.sc-badge svg {
  width: 11px;
  height: 11px;
}
.sc-note {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
@keyframes scRise {
  0% {
    transform: scaleY(0.06);
    opacity: 0.2;
  }
  14%,
  88% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0.06);
    opacity: 0.2;
  }
}
@keyframes scBadge {
  0%,
  46% {
    opacity: 0;
    transform: translate(-50%, 7px) scale(0.6);
  }
  56%,
  88% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 7px) scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc *,
  .sc {
    animation: none !important;
  }
  .sc-wave b {
    transform: scaleY(var(--p, 1));
  }
  .sc-tm-track i.slow {
    width: 31%;
  }
  .sc-tm-track i.fast {
    width: 100%;
  }
  .sc-tm-ok,
  .sc-badge,
  .sc-sh-fill {
    opacity: 1;
  }
  .sc-tm-ok {
    transform: scale(1);
  }
  .sc-tm-ok::after {
    opacity: 0;
  }
  .sc-badge {
    transform: translate(-50%, 0);
  }
  .sc-sh-line,
  .sc-sh-ok {
    stroke-dashoffset: 0;
  }
  .sc-sh-box::before {
    opacity: 0.35;
  }
}

.cost {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 1.75rem 1.5rem 1.5rem;
}
@media (min-width: 640px) {
  .cost {
    gap: 3rem;
    padding: 2.25rem 2.5rem 2rem;
  }
}
.cost-side {
  min-width: 0;
}
.cost-cap {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.cost-cap.on {
  color: var(--n-86868b);
}
.cost-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  height: 232px;
  margin-top: 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.cost-b {
  flex: none;
  display: grid;
  place-items: center;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--n-86868b);
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  opacity: 0;
  animation: costGrow 7s var(--ease) calc(var(--s) * 0.6s) infinite;
}
.cost-b.main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0 1.1rem;
  white-space: normal;
  color: #fff;
  background: linear-gradient(150deg, #0071e3 0%, #0a55b4 100%);
  border-color: transparent;
  box-shadow:
    0 16px 36px -16px rgba(var(--blue-rgb), 0.85),
    inset 0 1px 0 rgb(var(--gloss) / calc(0.16 * var(--gloss-k)));
}
.cost-b.main b {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cost-b.main i {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.72);
}
.cost-gap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 0.6rem;
  border: 1px dashed rgb(var(--wash) / calc(0.14 * var(--wash-k)));
  border-radius: 8px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
  color: var(--n-4a4a50);
  opacity: 0;
  animation: costGapIn 7s var(--ease) 1.9s infinite;
}
@keyframes costGapIn {
  0%,
  10% {
    opacity: 0;
  }
  22%,
  86% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes costGrow {
  0% {
    height: 0;
    opacity: 0;
  }
  7%,
  86% {
    height: var(--h);
    opacity: 1;
  }
  95%,
  100% {
    height: 0;
    opacity: 0;
  }
}
.cost-foot {
  margin-top: 0.8rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--n-5e5e63);
}
.cost-foot.on {
  color: var(--n-a1a1a8);
}
.cost * {
  animation-play-state: paused;
}
[data-r].in .cost * {
  animation-play-state: running;
}

.pay {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.9rem;
}
.pay-ico {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: 2px;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.14);
  color: #5ac8fa;
}
.pay-ico svg {
  width: 15px;
  height: 15px;
}
.pay-t {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--n-f5f5f7);
}
.pay-d {
  margin-top: 0.3rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--n-86868b);
}

@media (prefers-reduced-motion: reduce) {
  .cost-b,
  .cost-gap {
    animation: none;
    opacity: 1;
  }
  .cost-b {
    height: var(--h);
  }
}

.step {
  border-top: 1px solid var(--hair);
}

.dz-ok {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin-inline: auto;
}
.dz-ok-glow {
  position: absolute;
  inset: -20px;
  border-radius: 999px;
  background: radial-gradient(circle, rgb(var(--blue-c) / calc(0.42 * var(--glow-k))), transparent 68%);
  opacity: 0;
  transition: opacity 0.8s var(--ease) 0.75s;
}
.dz-ok.in .dz-ok-glow {
  opacity: 1;
}
.dz-ok-svg {
  width: 84px;
  height: 84px;
  overflow: visible;
}
.dz-ok-ring {
  stroke: url(#dzGrad);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 8px rgba(var(--blue-rgb), 0.5));
  transition: stroke-dashoffset 0.9s var(--ease);
}
.dz-ok.in .dz-ok-ring {
  stroke-dashoffset: 0;
}
.dz-ok-check {
  stroke: #fff;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.5s var(--ease) 0.65s;
}
.dz-ok.in .dz-ok-check {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .dz-ok-glow,
  .dz-ok-ring,
  .dz-ok-check {
    transition: none;
  }
}

.pill {
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  transition:
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    color 0.4s var(--ease);
}
.pill:hover {
  background: rgba(var(--blue-rgb), 0.14);
  border-color: rgba(var(--blue-rgb), 0.45);
  color: var(--n-f5f5f7);
}

.slot {
  background: radial-gradient(120% 120% at 50% 0%, rgb(var(--wash) / calc(0.045 * var(--wash-k))), transparent 70%), var(--n-0c0c0f);
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  transition:
    border-color 0.5s var(--ease),
    transform 0.6s var(--ease);
}
.slot:hover {
  border-color: rgba(var(--blue-rgb), 0.4);
  transform: translateY(-4px);
}

.wk {
  --wk-gap: 0.5rem;
  --wk-pad: calc(max(0px, (100vw - 1240px) / 2) + 1.5rem);
}
@media (min-width: 640px) {
  .wk {
    --wk-gap: 1rem;
  }
}
@media (min-width: 1024px) {
  .wk {
    --wk-gap: 1.5rem;
    --wk-pad: calc(max(0px, (100vw - 1240px) / 2) + 2.5rem);
  }
}
.wk-rail {
  display: flex;
  gap: var(--wk-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: var(--wk-pad);
  padding-inline: var(--wk-pad);
  padding-block: 5px 1.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
  --f-w: 0px;
  --f-l: 0px;
  --f-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l), #000 calc(100% - var(--f-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--f-l), #000 calc(100% - var(--f-r)), transparent 100%);
}
@media (min-width: 640px) {
  .wk-rail {
    --f-w: 64px;
  }
}
.wk-rail::-webkit-scrollbar {
  display: none;
}
.wk-rail.is-drag {
  cursor: grabbing;
  scroll-snap-type: none;
}
.wk-rail.is-drag .wk-link {
  transition: none;
}
.wk-card {
  flex: 0 0 auto;
  width: clamp(272px, calc(100vw - var(--wk-pad) * 2), 424px);
  scroll-snap-align: start;
}
.wk-rail [data-r] {
  transform: none;
}
.wk-link:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.9);
  outline-offset: 3px;
}
.shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--n-0c0c0f);
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
.shot-dots {
  display: flex;
  gap: 0.25rem;
  flex: none;
}
.shot-dots i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.18 * var(--wash-k)));
}
.shot-url {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
  font-size: 11px;
  color: var(--n-9a9aa0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.5s var(--ease);
}
.wk-card:hover .shot-url {
  color: var(--n-f5f5f7);
}
.shot-url svg {
  flex: none;
  opacity: 0.7;
}
.shot-fav {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  object-fit: contain;
}
.shot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--n-0c0c0f);
}


.rz-tor.jest-lepki {
  height: 250vh;
}
@media (min-width: 1024px) {
  .rz-tor.jest-lepki {
    height: 330vh;
  }
}
.rz-tor.jest-lepki .rz-lepki {
  position: sticky;
  top: clamp(84px, 11vh, 132px);
}
.rz-ekran {
  border-radius: 20px;
}
@media (min-width: 768px) {
  .rz-ekran {
    border-radius: 26px;
  }
}
.rz-kadr {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--n-0c0c0f);
}
/* Zrzut/film wypełnia .rz-kadr od krawędzi do krawędzi, więc box-shadow na
   .shot (rodzicu) ginie pod nim po bokach i na dole - widać go tylko nad
   paskiem adresu, gdzie nic go nie zasłania. Pseudoelement maluje się NAD
   dziećmi (obrazem/filmem), więc ta sama ramka jest tam już zawsze widoczna,
   niezależnie jak ciemny jest sam zrzut. */
.rz-kadr::after {
  content: "";
  position: absolute;
  inset: 0;
  /* .rz-kadr to tylko dolna część .rz-ekran (pod paskiem adresu), więc
     tylko jej dwa dolne rogi pokrywają się z zewnętrznym zaokrągleniem -
     góra jest prostą krawędzią pod shot-bar. Bez tego promień ramki byłby
     kwadratowy i wystawałby poza zaokrąglenie rodzica tuż przed przycięciem. */
  border-radius: 0 0 20px 20px;
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  pointer-events: none;
}
@media (min-width: 768px) {
  .rz-kadr::after {
    border-radius: 0 0 26px 26px;
  }
}
@media (min-width: 1024px) {
  .rz-kadr {
    aspect-ratio: 16 / 9;
  }
}
.rz-kadr video,
.rz-zrzut {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rz-zrzut {
  --rz: 0%;
  object-position: 50% var(--rz);
}

.wk-nav {
  display: inline-flex;
  gap: 0.6rem;
}
.wk-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
  border: 1px solid var(--hair);
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    opacity 0.35s var(--ease);
}
.wk-btn:hover:not(:disabled) {
  background: rgba(var(--blue-rgb), 0.14);
  border-color: rgba(var(--blue-rgb), 0.5);
}
.wk-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.wk-prog {
  position: relative;
  height: 2px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  overflow: hidden;
}
.wk-prog i {
  position: absolute;
  inset-block: 0;
  left: var(--x, 0%);
  width: var(--w, 30%);
  border-radius: 999px;
  background-image: var(--grad-blue);
}

@media (max-width: 400px) {
  .wl-res {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.inp {
  width: 100%;
  background: var(--n-141418);
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  color: var(--n-f5f5f7);
  font-size: 1.0625rem;
  font-family: var(--sans);
  transition:
    border-color 0.35s var(--ease),
    background-color 0.35s var(--ease);
}
.inp::placeholder {
  color: var(--n-5e5e63);
}
.inp:focus {
  outline: none;
  border-color: var(--blue);
  background: var(--n-17171c);
}
select.inp {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2.2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}
select.inp option {
  background: var(--n-141418);
  color: var(--n-f5f5f7);
}
.cbx {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  position: relative;
  cursor: pointer;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid rgb(var(--wash) / calc(0.22 * var(--wash-k)));
  border-radius: 6px;
  background: var(--n-141418);
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.cbx:checked {
  background: var(--grad-blue);
  border-color: var(--blue);
}
.cbx:checked::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid var(--n-ffffff);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"].chipbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
input[type="checkbox"].chipbox:checked + .pill {
  background-image: var(--grad-blue);
  border-color: var(--blue);
  color: #fff;
}
input[type="checkbox"].chipbox:focus-visible + .pill {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.channel-card {
  position: relative;
  background: linear-gradient(180deg, var(--n-17171b) 0%, var(--n-101013) 100%);
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  border-radius: 28px;
  padding: 2rem;
  overflow: hidden;
  box-shadow: 0 30px 70px -40px rgb(var(--shadow) / calc(0.8 * var(--shadow-k)));
}
@media (min-width: 1024px) {
  .channel-card {
    padding: 2.75rem;
  }
}
.channel-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 260px;
  height: 260px;
  pointer-events: none;
  filter: blur(10px);
}
.channel-badge {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px -10px rgb(var(--shadow) / calc(0.65 * var(--shadow-k)));
}
.channel-tagline {
  margin-top: 3px;
  font-size: 13px;
  color: var(--n-86868b);
}
.format-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--n-c9c9cf);
  background: rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
}

.feat-icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(var(--blue-rgb), 0.13);
  border: 1px solid rgba(var(--blue-rgb), 0.24);
  color: #5ac8fa;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1.9rem;
}
.trust-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 13px;
  color: var(--n-86868b);
}
.trust-strip svg {
  flex: none;
  width: 14px;
  height: 14px;
  color: #0071e3;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 13px;
  color: var(--n-86868b);
  transition: color 0.3s var(--ease);
}
.trust-badge:hover {
  color: var(--n-f5f5f7);
}
.trust-badge-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  display: grid;
  place-items: center;
}
.trust-badge img {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
}

.cert {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.03 * var(--wash-k)));
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.cert:hover {
  border-color: rgba(var(--blue-rgb), 0.4);
  background: rgba(var(--blue-rgb), 0.07);
}
.cert img {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  object-fit: cover;
}
.cert-t {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--n-f5f5f7);
}
.cert-d {
  display: block;
  margin-top: 1px;
  font-size: 0.8125rem;
  color: var(--n-86868b);
}

.doc {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--n-86868b);
}
.doc h2 {
  margin: 3rem 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
  scroll-margin-top: 7rem;
}
.doc h2:first-child {
  margin-top: 0;
}
.doc p + p,
.doc ul + p,
.doc ol + p,
.doc ul,
.doc ol {
  margin-top: 1rem;
}
.doc ul,
.doc ol {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.35rem;
}
.doc ul {
  list-style: disc;
}
.doc ol {
  list-style: decimal;
}
.doc li::marker {
  color: var(--n-5e5e63);
}
.doc-link {
  color: var(--n-b6b6bc);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgb(var(--wash) / calc(0.25 * var(--wash-k)));
  overflow-wrap: anywhere;
  transition:
    color 0.3s var(--ease),
    text-decoration-color 0.3s var(--ease);
}
.doc-link:hover {
  color: var(--n-f5f5f7);
  text-decoration-color: rgb(var(--wash) / calc(0.6 * var(--wash-k)));
}

.step-card {
  position: relative;
  overflow: hidden;
}
.step-card .ghost-num {
  position: absolute;
  top: -0.5rem;
  right: 0.75rem;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--wash) / calc(0.045 * var(--wash-k)));
  pointer-events: none;
}

.build {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -40px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
.build-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
}
@media (max-width: 900px) {
  .build-grid {
    grid-template-columns: 1fr;
  }
}
.build-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.7rem;
  padding: 0 1.1rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  font-size: 11.5px;
  color: var(--n-6b6b73);
  letter-spacing: 0.02em;
}
.build-bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.16 * var(--wash-k)));
}
.build-bar .url {
  margin-left: 0.7rem;
  padding: 0.15rem 0.7rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  color: var(--n-86868b);
}

.build-code {
  background: var(--n-0e0e12);
  border-right: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  min-width: 0;
}
@media (max-width: 900px) {
  .build-code {
    border-right: 0;
    border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  }
}
.build-code pre {
  margin: 0;
  padding: 1.4rem 1.2rem 1.6rem;
  overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.85;
  color: var(--n-c9d1d9);
}
@media (max-width: 480px) {
  .build-code pre {
    font-size: 10px;
  }
}
.cl {
  display: block;
  white-space: pre;
  opacity: 0;
  transform: translateY(3px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.cl.in {
  opacity: 1;
  transform: none;
}
.cl.active::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 0.12em;
  vertical-align: -0.19em;
  background: #79c0ff;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.build-code .t {
  color: #79c0ff;
}
.build-code .a {
  color: #d2a8ff;
}
.build-code .s {
  color: #a5d6ff;
}
.build-code .c {
  color: var(--n-8b949e);
}

.build-preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prev {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 82% 0%, rgba(230, 46, 63, 0.16), transparent 60%), var(--n-131315);
  padding: 1.1rem 1.6rem 1.5rem;
  font-family: var(--sans);
}
@media (max-width: 480px) {
  .prev {
    padding: 1rem 1.1rem 1.3rem;
  }
}
.prev [data-prev] {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.prev [data-prev].in {
  opacity: 1;
  transform: none;
}

.prev-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.prev-logo {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--n-f5f2ef);
}
.prev-nav nav {
  display: flex;
  gap: 0.9rem;
  margin-left: auto;
  font-size: 11.5px;
  color: var(--n-9a9a9e);
}
.prev-navbtn {
  padding: 0.32rem 0.72rem;
  border-radius: 999px;
  background: #e62e3f;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.prev-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 1.4rem;
  align-items: center;
  padding: 1.3rem 0 1.4rem;
}
@media (max-width: 560px) {
  .prev-hero {
    grid-template-columns: 1fr;
  }
}
.prev-eyebrow {
  margin: 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #ff5a68;
}
.prev-h {
  margin: 0.55rem 0 0;
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.85vw, 1.48rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--n-f5f2ef);
  text-wrap: balance;
}
.prev-lead {
  margin: 0.6rem 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--n-9a9a9e);
}
.prev-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1rem;
}
.prev-btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 7px;
  background: #e62e3f;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(230, 46, 63, 0.6);
}
.prev-link {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--n-f5f2ef);
}

.prev-figure {
  position: relative;
  margin: 0;
}
.prev-img {
  height: 9rem;
  border-radius: 11px;
  overflow: hidden;
  position: relative;
  background: var(--n-0c0c0e);
  box-shadow:
    0 14px 30px -14px rgb(var(--shadow) / calc(0.65 * var(--shadow-k))),
    inset 0 0 0 1px rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.prev-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 45%;
}
.prev-badge {
  position: absolute;
  left: -0.7rem;
  bottom: -0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6);
}
.prev-stars {
  color: #e6a13a;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1;
}
.prev-badge-txt {
  font-size: 10.5px;
  color: #8a8a8e;
  white-space: nowrap;
}
.prev-badge-txt b {
  font-size: 12px;
  font-weight: 700;
  color: #17171a;
  letter-spacing: -0.01em;
}

.prev-facts {
  display: flex;
  gap: 1.9rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.prev-facts div b {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  color: var(--n-f5f2ef);
}
.prev-facts div span {
  display: block;
  margin-top: 0.1rem;
  font-size: 10.5px;
  color: var(--n-8a8a8e);
}

.build-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem 1.4rem;
  margin-top: 1.1rem;
}
.build-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  font-size: 13px;
  font-weight: 500;
  color: var(--n-86868b);
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.build-replay:hover {
  color: var(--n-f5f5f7);
  border-color: rgba(var(--blue-rgb), 0.5);
  background: rgba(var(--blue-rgb), 0.08);
}
.build-replay svg {
  transition: transform 0.5s var(--ease);
}
.build-replay:hover svg {
  transform: rotate(-180deg);
}

@media (prefers-reduced-motion: reduce) {
  .cl,
  .prev [data-prev] {
    opacity: 1 !important;
    transform: none !important;
  }
  .cl.active::after {
    animation: none;
  }
}

.dash {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -40px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
.dash .build-bar {
  justify-content: space-between;
}
.dash-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--n-86868b);
}
.dash-live-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: #34c759;
  box-shadow: 0 0 7px rgba(52, 199, 89, 0.85);
  animation: dashLive 1.8s ease-in-out infinite;
}
@keyframes dashLive {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
.dash-body {
  display: grid;
  grid-template-columns: 200px 1fr;
}
@media (max-width: 780px) {
  .dash-body {
    grid-template-columns: 1fr;
  }
  .dash-side {
    display: none;
  }
}
.dash-side {
  padding: 1.4rem 1rem;
  border-right: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  background: var(--n-0e0e12);
}
.dash-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0 0.5rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--n-d5d5d8);
}
.dash-brand-mark {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.dash-nav {
  margin-top: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dash-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.6rem;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--n-6b6b73);
}
.dash-nav-item svg {
  flex: none;
  width: 15px;
  height: 15px;
}
.dash-nav-item.is-active {
  background: rgba(var(--blue-rgb), 0.14);
  color: var(--n-eaeaec);
}
.dash-nav-item.is-active svg {
  color: #5ac8fa;
}
.dash-main {
  padding: 1.4rem 1.2rem 1.6rem;
  min-width: 0;
}
@media (min-width: 640px) {
  .dash-main {
    padding: 1.7rem 1.8rem 2rem;
  }
}
.dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.dash-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--n-eaeaec);
}
.dash-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.dash-role {
  font-size: 11px;
  font-weight: 600;
  color: var(--n-86868b);
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
}
.dash-avatar {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}
.dash-kpis {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
@media (min-width: 640px) {
  .dash-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dash-kpi {
  padding: 0.9rem 1rem 1rem;
  border-radius: 14px;
  background: var(--n-101014);
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.dash-kpi-label {
  font-size: 11px;
  color: var(--n-86868b);
}
.dash-kpi-num {
  margin-top: 0.35rem;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
}
.dash-kpi-trend {
  margin-top: 0.3rem;
  font-size: 11px;
  font-weight: 600;
}
.dash-kpi-trend.is-up {
  color: #34c759;
}
.dash-kpi-trend.is-steady {
  color: #5ac8fa;
}
.dash-panels {
  margin-top: 0.7rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 900px) {
  .dash-panels {
    grid-template-columns: 1.55fr 1fr;
  }
}
.dash-chart-card,
.dash-int-card {
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 14px;
  background: var(--n-101014);
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.dash-card-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--n-c9c9cf);
}
.dash-chart {
  display: block;
  width: 100%;
  height: 130px;
  margin-top: 0.8rem;
  overflow: visible;
}
.dash-chart-area {
  opacity: 0;
  transition: opacity 1.2s var(--ease) 0.5s;
}
.dash-chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.75));
  transition: stroke-dashoffset 1.7s var(--ease);
}
.dash-chart-dot {
  fill: #5ac8fa;
  opacity: 0;
  transition: opacity 0.4s var(--ease) 1.9s;
  animation: nodeGlow 2.6s ease-in-out infinite 1.9s;
}
.dash[data-r].in .dash-chart-line {
  stroke-dashoffset: 0;
}
.dash[data-r].in .dash-chart-area {
  opacity: 1;
}
.dash[data-r].in .dash-chart-dot {
  opacity: 1;
}
.dash-int-list {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.dash-int-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  font-size: 12.5px;
  color: var(--n-c9c9cf);
}
.dash-int-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.dash-status-dot {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
}
.dash-status-dot.is-ok {
  background: #34c759;
  box-shadow: 0 0 6px rgba(52, 199, 89, 0.7);
}
.dash-status-dot.is-sync {
  background: #f5a623;
  animation: dashLive 1.4s ease-in-out infinite;
}
.dash-status-pill {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
}
.dash-status-pill.is-ok {
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
}
.dash-status-pill.is-sync {
  color: #f5a623;
  background: rgba(245, 166, 35, 0.12);
}
@media (prefers-reduced-motion: reduce) {
  .dash-chart-line,
  .dash-chart-area,
  .dash-chart-dot {
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}

.pv {
  display: grid;
  justify-items: center;
  gap: 2.6rem;
}
@media (min-width: 1024px) {
  .pv {
    grid-template-columns: auto minmax(0, 34rem);
    justify-content: center;
    align-items: center;
    justify-items: start;
    gap: 4.5rem;
  }
}
.pv-phone {
  position: relative;
  width: 264px;
  max-width: 78vw;
  aspect-ratio: 9 / 19.4;
  background: var(--n-000000);
  border: 2px solid rgb(var(--wash) / calc(0.16 * var(--wash-k)));
  border-radius: 52px;
  overflow: hidden;
  box-shadow:
    0 60px 110px -34px rgb(var(--shadow) / calc(0.95 * var(--shadow-k))),
    0 0 90px -30px rgba(var(--blue-rgb), 0.45),
    inset 0 0 0 5px rgb(var(--shadow) / var(--shadow-k));
}
.pv-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 25px;
  border-radius: 20px;
  background: var(--n-000000);
  z-index: 3;
}
.pv-home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.55 * var(--wash-k)));
  z-index: 3;
}
.pv-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--n-17171c) 0%, var(--n-0b0b0e) 100%);
}
.pv-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.05rem 1.2rem 0.2rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
}
.pv-status svg {
  width: 14px;
  height: 14px;
}

.pv-views {
  position: relative;
  flex: 1;
  min-height: 0;
}
.pv-view {
  position: absolute;
  inset: 0;
  padding: 1.1rem 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  animation: pvView 12s var(--ease) infinite;
  animation-delay: calc(var(--i) * 3s - 12s);
}
@keyframes pvView {
  0% {
    opacity: 0;
    transform: translateX(26px);
  }
  2.5%,
  22% {
    opacity: 1;
    transform: translateX(0);
  }
  25% {
    opacity: 0;
    transform: translateX(-26px);
  }
  25.01%,
  100% {
    opacity: 0;
    transform: translateX(26px);
  }
}
.pv-hi {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--n-f5f5f7);
}

.pv-ring {
  position: relative;
  width: 166px;
  margin: 0.9rem auto 0.2rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.pv-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.pv-ring circle {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.pv-ring-bg {
  stroke: rgb(var(--wash) / calc(0.09 * var(--line-k)));
}
.pv-ring-fill {
  stroke: var(--blue);
  stroke-dasharray: 327;
  stroke-dashoffset: 84;
  filter: drop-shadow(0 0 7px rgba(var(--blue-rgb), 0.6));
  animation: pvRing 12s var(--ease) infinite;
}
@keyframes pvRing {
  0%,
  1% {
    stroke-dashoffset: 327;
  }
  14%,
  100% {
    stroke-dashoffset: 84;
  }
}
.pv-ring-mid {
  position: relative;
  text-align: center;
}
.pv-ring-num {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pv-ring-lab {
  margin-top: 0.25rem;
  font-size: 10.5px;
  color: var(--n-6e6e75);
}
.pv-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.75rem;
}
.pv-tile {
  padding: 0.55rem 0.6rem 0.65rem;
  border-radius: 14px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.pv-tile-k {
  font-size: 9.5px;
  color: var(--n-6e6e75);
}
.pv-tile-v {
  margin-top: 0.15rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
}

.pv-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 0.32rem;
  height: 190px;
  margin-top: 1rem;
}
.pv-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.32rem;
  margin-top: 0.4rem;
  text-align: center;
  font-size: 9px;
  color: var(--n-6e6e75);
}
.pv-chart span {
  height: var(--h);
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.14 * var(--wash-k)));
  transform-origin: bottom;
  animation: pvBar 12s var(--ease) infinite;
}
.pv-chart span.is-now {
  background: var(--grad-blue);
}
.pv-chart span:nth-child(2) {
  animation-delay: 0.05s;
}
.pv-chart span:nth-child(3) {
  animation-delay: 0.1s;
}
.pv-chart span:nth-child(4) {
  animation-delay: 0.15s;
}
.pv-chart span:nth-child(5) {
  animation-delay: 0.2s;
}
.pv-chart span:nth-child(6) {
  animation-delay: 0.25s;
}
.pv-chart span:nth-child(7) {
  animation-delay: 0.3s;
}
@keyframes pvBar {
  0%,
  25% {
    transform: scaleY(0);
  }
  32%,
  100% {
    transform: scaleY(1);
  }
}

.pv-rows {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.75rem;
}
.pv-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 13px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.pv-row.is-top {
  background: rgba(var(--blue-rgb), 0.14);
  box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.3);
}
.pv-row > div {
  flex: 1;
  min-width: 0;
}
.pv-av {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.pv-row-t {
  font-size: 12px;
  font-weight: 600;
  color: var(--n-f5f5f7);
}
.pv-row-s {
  font-size: 9.5px;
  color: var(--n-6e6e75);
}
.pv-medal {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--n-6e6e75);
  font-variant-numeric: tabular-nums;
}
.pv-row.is-top .pv-medal {
  color: var(--n-f5f5f7);
}
.pv-ico {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
}
.pv-ico svg {
  width: 13px;
  height: 13px;
}
.pv-cta {
  margin-top: auto;
  padding: 0.6rem;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--grad-blue);
}
.pv-lab {
  margin-top: 0.9rem;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-6e6e75);
}

.pv-me {
  text-align: center;
  padding-top: 0.4rem;
}
.pv-me-av {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.pv-me-n {
  margin-top: 0.6rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
}
.pv-me-s {
  margin-top: 0.15rem;
  font-size: 10px;
  color: var(--n-6e6e75);
}
.pv-goal {
  margin-top: 0.9rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border-radius: 15px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.pv-goal-k {
  font-size: 9.5px;
  color: var(--n-6e6e75);
}
.pv-goal-v {
  margin-top: 0.15rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n-f5f5f7);
}
.pv-goal-bar {
  display: block;
  margin-top: 0.55rem;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.pv-goal-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad-blue);
  animation: pvGoal 12s var(--ease) infinite;
}
@keyframes pvGoal {
  0%,
  76% {
    width: 0;
  }
  88%,
  100% {
    width: 72%;
  }
}
.pv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.pv-chip {
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--n-c9c9cf);
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}

.pv-tabbar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.6rem 0.55rem 1.35rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.pv-ind {
  position: absolute;
  top: 0.3rem;
  left: 0.55rem;
  width: calc((100% - 1.1rem) / 4);
  height: 2px;
  border-radius: 999px;
  background: var(--grad-blue);
  animation: pvInd 12s var(--ease) infinite;
}
@keyframes pvInd {
  0%,
  22% {
    transform: translateX(0);
  }
  25%,
  47% {
    transform: translateX(100%);
  }
  50%,
  72% {
    transform: translateX(200%);
  }
  75%,
  97% {
    transform: translateX(300%);
  }
  100% {
    transform: translateX(0);
  }
}
.pv-tab {
  display: grid;
  place-items: center;
  color: var(--n-5e5e63);
  animation: pvTab 12s var(--ease) infinite;
  animation-delay: calc(var(--i) * 3s - 12s);
}
.pv-tab svg {
  width: 17px;
  height: 17px;
}
@keyframes pvTab {
  0%,
  24.9% {
    color: var(--blue);
  }
  25%,
  100% {
    color: var(--n-5e5e63);
  }
}

.pv-side {
  max-width: 34rem;
}
@media (max-width: 1023px) {
  .pv-side {
    text-align: center;
  }
  .pv-side p {
    margin-left: auto;
    margin-right: auto;
  }
  .pv-badges {
    margin-inline: auto;
  }
}
.pv-pts {
  display: grid;
  gap: 0.85rem;
  margin-top: 1.6rem;
}
.pv-pts li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--n-86868b);
  text-align: left;
}
.pv-pts b {
  font-weight: 600;
  color: var(--n-f5f5f7);
}
.pv-pt-ico {
  flex: none;
  width: 1.65rem;
  height: 1.65rem;
  margin-top: 1px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
}
.pv-pt-ico svg {
  width: 13px;
  height: 13px;
}

.pv-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
  max-width: 25rem;
  margin-top: 1.8rem;
}
.pv-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.pv-badge-ico {
  flex: none;
  width: 21px;
  height: 21px;
}
.pv-badge-tx {
  display: grid;
  min-width: 0;
}
.pv-badge-tx small {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-6e6e75);
}
.pv-badge-tx b {
  margin-top: 1px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
  white-space: nowrap;
}
.pv-note {
  margin-top: 1.1rem;
  font-size: 12px;
  line-height: 1.55;
  color: var(--n-6e6e75);
  max-width: 42ch;
}

@media (max-width: 480px) {
  .pv-phone {
    width: 236px;
  }
  .pv-badges {
    grid-template-columns: minmax(0, 1fr);
    max-width: 17rem;
    margin-inline: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pv-view,
  .pv-ind,
  .pv-tab,
  .pv-ring-fill,
  .pv-chart span,
  .pv-goal-bar i {
    animation: none;
  }
  .pv-view {
    opacity: 0;
  }
  .pv-view[style*="--i: 0"] {
    opacity: 1;
  }
  .pv-tab:first-of-type {
    color: var(--blue);
  }
  .pv-goal-bar i {
    width: 72%;
  }
}

.uv-logo {
  filter: brightness(0) invert(1);
}
.demo {
  --dm-bg: linear-gradient(180deg, #15151b 0%, #0b0b0f 100%);
  --dm-hair: var(--hair);
  --dm-ink: #f5f5f7;
  --dm-muted: #86868b;
  --dm-accent: var(--grad-blue);
  --dm-accent-t: #0071e3;
  --dm-live: #5ac8fa;
  --dm-ok: #30d158;
  --dm-paper: linear-gradient(180deg, #fff 0%, #f1f1f4 100%);
  --dm-paper-ink: #1d1d1f;
  --dm-paper-shadow: 0 24px 55px -24px rgba(0, 0, 0, 0.9);

  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--dm-bg);
  border: 1px solid var(--dm-hair);
  box-shadow:
    0 44px 100px -34px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.demo--vi {
  --dm-bg: linear-gradient(180deg, #0a0c11 0%, #06070a 100%);
  --dm-hair: rgba(255, 255, 255, 0.08);
  --dm-ink: #f2f5f8;
  --dm-muted: #9aa4b2;
  --dm-accent: linear-gradient(135deg, #c7f73e 0%, #9b83ff 100%);
  --dm-accent-t: #d9ff5c;
  --dm-live: #c7f73e;
  --dm-ok: #c7f73e;
  --dm-paper: rgba(255, 255, 255, 0.04);
  --dm-paper-ink: #f2f5f8;
  --dm-paper-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--dm-hair);
  background: rgba(245, 245, 247, 0.02);
}
.demo-dots {
  display: flex;
  gap: 0.32rem;
  flex: none;
}
.demo-dots i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(245, 245, 247, 0.16);
}
.demo-file {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  min-width: 0;
  font-size: 12.5px;
  color: var(--dm-muted);
}
.demo-file svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.demo-chip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
  font-size: 12.5px;
  color: var(--dm-muted);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--ease);
}
.demo-chip svg {
  width: 12.5px;
  height: 12.5px;
}
.demo-chip b {
  color: var(--dm-ink);
  font-weight: 600;
  transition: color 0.5s var(--ease);
}
.demo-chip.is-on,
.demo-chip.is-on b {
  color: var(--dm-ok);
}
.demo-live {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--dm-live);
  animation: demo-blink 1.4s var(--ease) infinite;
}
.demo.is-done .demo-live {
  background: var(--dm-ok);
  animation: none;
}
@keyframes demo-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.demo-body {
  display: grid;
  gap: 1.6rem;
  padding: 1.15rem;
}
@media (min-width: 1024px) {
  .demo-body {
    grid-template-columns: 0.84fr 1fr;
    gap: 2.4rem;
    padding: 1.9rem;
    align-items: center;
  }
}

.demo-step {
  display: flex;
  gap: 0.85rem;
  padding: 0.85rem 0;
  opacity: 0.3;
  transition: opacity 0.5s var(--ease);
}
.demo-step.is-on {
  opacity: 1;
}
.demo-step + .demo-step {
  border-top: 1px solid var(--dm-hair);
}
.demo-num {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--dm-muted);
  box-shadow: inset 0 0 0 1px var(--dm-hair);
  transition:
    background-color 0.5s var(--ease),
    color 0.5s var(--ease),
    box-shadow 0.5s var(--ease);
}
.demo-num svg {
  width: 15px;
  height: 15px;
}
.demo-step.is-on .demo-num {
  background-image: var(--dm-accent);
  color: #fff;
  box-shadow: none;
}
.demo--vi .demo-num {
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.demo--vi .demo-num svg {
  width: 20px;
  height: 20px;
}
.demo--vi .demo-step.is-on .demo-num {
  background-image: none;
  color: #d9ff5c;
}
.demo-step-t {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--dm-ink);
  letter-spacing: -0.01em;
}
.demo-step p {
  margin-top: 0.22rem;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--dm-muted);
}
.demo-srcs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.65rem;
}
.demo-src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--dm-hair);
  font-size: 11.5px;
  color: #c9c9cf;
}
.demo--vi .demo-src {
  color: var(--dm-muted);
}
.demo-src-meta {
  color: #0866ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.demo-paper {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem 1.05rem 1.1rem;
  border-radius: 16px;
  background: var(--dm-paper);
  color: var(--dm-paper-ink);
  box-shadow: var(--dm-paper-shadow);
}
@media (min-width: 1024px) {
  .demo-paper {
    min-height: 320px;
  }
}
.demo-part {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.demo-part.is-on {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .demo-part,
  .demo-step,
  .uvb-cols > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .demo-live {
    animation: none;
  }
}

.uvb-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.uvb-brand {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 8px;
  background-image: var(--grad-blue);
}
.uvb-tit b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.uvb-tit span {
  display: block;
  margin-top: 0.05rem;
  font-size: 11px;
  color: #6e6e73;
}
.uvb-tag {
  margin-left: auto;
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.1);
  color: #0071e3;
  font-size: 10.5px;
  font-weight: 600;
}
.uvb-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.uvb-kpis > div {
  padding: 0.6rem 0.65rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.045);
}
.uvb-kpi-l {
  display: block;
  font-size: 10.5px;
  color: #6e6e73;
  line-height: 1.3;
}
.uvb-kpis b {
  display: block;
  margin-top: 0.2rem;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.uvb-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 10.5px;
  color: #6e6e73;
}
.uvb-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.uvb-legend i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 2px;
}
.uvb-legend i + i {
  margin-left: 0.45rem;
}
.uvb-legend i.g {
  background: #0071e3;
}
.uvb-legend i.m {
  background: rgba(0, 0, 0, 0.22);
}
.uvb-cols {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  height: 76px;
  margin-top: 0.55rem;
}
.uvb-cols > span {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: var(--h);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.uvb-chart.is-on .uvb-cols > span {
  transform: none;
}
.uvb-cols i {
  display: block;
}
.uvb-cols i.m {
  background: rgba(0, 0, 0, 0.16);
  border-radius: 3px 3px 0 0;
}
.uvb-cols i.g {
  background-image: linear-gradient(180deg, #0071e3 0%, #5ac8fa 100%);
  border-radius: 0 0 3px 3px;
}
.uvb-ai {
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.07);
  border: 1px solid rgba(var(--blue-rgb), 0.16);
}
.uvb-ai-ic {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background-image: var(--grad-blue);
  color: #fff;
}
.uvb-ai-ic svg {
  width: 13px;
  height: 13px;
}
.uvb-ai b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #0071e3;
}
.uvb-type {
  display: block;
  margin-top: 0.15rem;
  min-height: 2.4em;
  font-size: 12.5px;
  line-height: 1.45;
  color: #3a3a3c;
}
.uvb-type.is-typing::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 1px;
  vertical-align: -0.12em;
  background: #0071e3;
  animation: demo-blink 0.9s steps(1) infinite;
}
.uvb-done {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  font-size: 11.5px;
  font-weight: 500;
  color: #1c8c3c;
}
.uvb-done svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.6;
}

.vi-fmt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.vi-chip {
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 500;
  color: #9aa4b2;
  transition:
    background-color 0.45s var(--ease),
    color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
.vi-chip.is-on {
  background: #c7f73e;
  box-shadow: none;
  color: #06070a;
  font-weight: 600;
}
.vi-px {
  margin-left: auto;
  font-size: 10.5px;
  color: #626b7a;
}
.vi-rows {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.vi-row {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}
.vi-thumb {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #d9ff5c;
  background-color: rgba(255, 255, 255, 0.05);
  background-image:
    linear-gradient(45deg, #1a1f2a 25%, transparent 0), linear-gradient(-45deg, #1a1f2a 25%, transparent 0), linear-gradient(45deg, transparent 75%, #1a1f2a 0), linear-gradient(-45deg, transparent 75%, #1a1f2a 0);
  background-size: 10px 10px;
  background-position:
    0 0,
    0 5px,
    5px -5px,
    -5px 0;
}
.vi-thumb svg {
  width: 14px;
  height: 14px;
}
.vi-meta {
  display: block;
  min-width: 0;
}
.vi-name {
  display: block;
  font-size: 11.5px;
  color: #f2f5f8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vi-bar {
  display: block;
  margin-top: 0.34rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}
.vi-bar i {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background-image: linear-gradient(90deg, #c7f73e 0%, #9b83ff 100%);
  transition: width 1.1s var(--ease);
}
.vi-row.is-run .vi-bar i {
  width: var(--w);
}
.vi-size {
  text-align: right;
  min-width: 4.6rem;
}
.vi-size b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f2f5f8;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vi-cut {
  display: block;
  margin-top: 0.1rem;
  font-size: 10px;
  font-weight: 700;
  color: #c7f73e;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.vi-row.is-done .vi-cut {
  opacity: 1;
}
.vi-total {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vi-total-l {
  font-size: 10.5px;
  color: #626b7a;
}
.vi-total-l b {
  display: block;
  margin-top: 0.1rem;
  font-size: 14px;
  font-weight: 600;
  color: #f2f5f8;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vi-total-cut {
  flex: none;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(199, 247, 62, 0.14);
  color: #d9ff5c;
  font-size: 11px;
  font-weight: 700;
}
.vi-zip {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #c7f73e;
  color: #06070a;
  font-size: 11.5px;
  font-weight: 600;
}
.vi-zip svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

@media (prefers-reduced-motion: reduce) {
  .vi-bar i,
  .vi-cut {
    transition: none;
  }
}

.hub {
  position: relative;
  width: min(560px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto;
}
.hub-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hub-cable {
  stroke: rgb(var(--wash) / calc(0.14 * var(--line-k)));
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.hub-pulse {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 8 92;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.9));
  animation: hubPulse 3.4s linear infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes hubPulse {
  to {
    stroke-dashoffset: -100;
  }
}
.hub-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 21%;
  aspect-ratio: 1;
  border-radius: 28%;
  background: var(--grad-blue);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px rgb(var(--wash) / calc(0.12 * var(--wash-k))),
    0 25px 60px -18px rgba(var(--blue-rgb), 0.7);
  animation: hubBreathe 4s ease-in-out infinite;
}
@keyframes hubBreathe {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgb(var(--wash) / calc(0.12 * var(--wash-k))),
      0 25px 60px -18px rgba(var(--blue-rgb), 0.7);
  }
  50% {
    box-shadow:
      0 0 0 1px rgb(var(--wash) / calc(0.12 * var(--wash-k))),
      0 30px 70px -14px rgba(var(--blue-rgb), 0.95);
  }
}
.hub-node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 44px;
  height: 44px;
}
.hub-icon {
  width: 100%;
  height: 100%;
  border-radius: 13px;
  background: var(--n-131317);
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  display: grid;
  place-items: center;
  color: var(--n-9c9ca5);
}
.hub-icon.is-mark {
  font-size: 13px;
  font-weight: 700;
  color: var(--n-c9c9cf);
}
.hub-pill {
  position: absolute;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--n-131317);
  border: 1px solid var(--hair);
  font-size: 11px;
  font-weight: 600;
  color: var(--n-d5d5d8);
  white-space: nowrap;
}
.hub-pill--above {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -0.6rem);
}
.hub-pill--below {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.6rem);
}
.hub-pill--left {
  right: 100%;
  top: 50%;
  transform: translate(-0.6rem, -50%);
}
.hub-pill--right {
  left: 100%;
  top: 50%;
  transform: translate(0.6rem, -50%);
}
@media (max-width: 640px) {
  .hub {
    width: min(560px, 78vw);
  }
  .hub-node {
    width: 34px;
    height: 34px;
  }
  .hub-icon {
    border-radius: 10px;
  }
  .hub-pill {
    font-size: 9.5px;
    padding: 0.24rem 0.55rem;
  }
  .hub-pill--left,
  .hub-pill--right {
    left: 50%;
    right: auto;
    top: 100%;
    bottom: auto;
    transform: translate(-50%, 0.5rem);
  }
}

.faq-p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--ease);
}
.faq-b[aria-expanded="true"] + .faq-p {
  grid-template-rows: 1fr;
}
.faq-p > div {
  overflow: hidden;
}
.faq-b .sign {
  transition: transform 0.4s var(--ease);
}
.faq-b[aria-expanded="true"] .sign {
  transform: rotate(45deg);
}

.ul-hover:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  [data-r] {
    opacity: 1 !important;
    transform: none !important;
  }
  .loop-run {
    animation: none;
    stroke-dasharray: none;
    opacity: 0.9;
  }
  .wire-run {
    display: none;
  }
  .core-ring {
    animation: none;
    opacity: 0.3;
  }
  .out-nodes circle {
    animation: none;
    opacity: 0.9;
  }
}

.serp {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -40px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
.serp-grid {
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
}
@media (max-width: 940px) {
  .serp-grid {
    grid-template-columns: 1fr;
  }
}
.serp-main {
  min-width: 0;
  border-right: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
@media (max-width: 940px) {
  .serp-main {
    border-right: 0;
    border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  }
}

.serp-search {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 1.3rem 1.4rem 0.9rem;
  padding: 0.68rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
@media (max-width: 480px) {
  .serp-search {
    margin: 1rem 1rem 0.7rem;
    padding: 0.6rem 0.9rem;
  }
}
.serp-search > svg {
  flex: none;
  color: var(--n-6b6b73);
}
.serp-q {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--n-f5f5f7);
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 480px) {
  .serp-q {
    font-size: 12.5px;
  }
}
.serp-caret {
  width: 1.5px;
  height: 15px;
  border-radius: 2px;
  background: #5ac8fa;
  animation: serp-blink 1.05s steps(1, end) infinite;
}
.serp-caret.off {
  opacity: 0;
  animation: none;
}
@keyframes serp-blink {
  50% {
    opacity: 0;
  }
}
.serp-count {
  margin: 0 1.6rem;
  font-size: 11px;
  color: var(--n-5e5e63);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.serp-main.is-on .serp-count {
  opacity: 1;
}

.serp-list {
  --row: 4.3rem;
  position: relative;
  height: calc(8 * var(--row));
  margin: 0.6rem 1rem 1.3rem;
  list-style: none;
}
@media (max-width: 480px) {
  .serp-list {
    --row: 4.6rem;
    margin: 0.5rem 0.6rem 1rem;
  }
}
.serp-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 0.8rem;
  border-radius: 14px;
  opacity: 0;
  transform: translateY(calc(var(--p, 0) * var(--row)));
  transition:
    transform 0.85s var(--ease),
    opacity 0.5s var(--ease),
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease);
  border: 1px solid transparent;
}
.serp-list.is-on .serp-row {
  opacity: 1;
  transition-delay: 0s, calc(var(--i) * 55ms), 0s, 0s;
}
.serp-rank {
  flex: none;
  width: 1.35rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--n-5e5e63);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.serp-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-86868b);
  font-size: 12px;
  font-weight: 700;
}
.serp-body {
  flex: 1;
  min-width: 0;
}
.serp-title {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #9fb6d6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.serp-url {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  color: var(--n-5e5e63);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .serp-title {
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.35;
  }
}

.serp-row.is-you {
  background: rgba(var(--blue-rgb), 0.1);
  border-color: rgba(var(--blue-rgb), 0.32);
}
.serp-row.is-you .serp-rank {
  color: #5ac8fa;
}
.serp-row.is-you .serp-title {
  color: var(--n-f5f5f7);
}
.serp-row.is-you .serp-url {
  color: var(--n-86868b);
}
.serp-row.is-you .serp-mark {
  background: var(--grad-blue);
  color: #fff;
}
.serp-you-tag {
  margin-left: auto;
  flex: none;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.18);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5ac8fa;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .serp-you-tag {
    display: none;
  }
}

.serp-fold {
  position: absolute;
  left: 0.2rem;
  right: 0.2rem;
  top: calc(3 * var(--row));
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transform: translateY(-1px);
  pointer-events: none;
}
.serp-fold::before,
.serp-fold::after {
  content: "";
  height: 1px;
  flex: 1;
  background: repeating-linear-gradient(90deg, rgb(var(--wash) / calc(0.16 * var(--wash-k))) 0 5px, transparent 5px 10px);
}
.serp-fold span {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .serp-fold span {
    font-size: 9px;
  }
}

.serp-side {
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.5rem 1.5rem;
  background: radial-gradient(120% 80% at 85% 0%, rgb(var(--blue-c) / calc(0.14 * var(--glow-k))), transparent 62%);
}
@media (max-width: 480px) {
  .serp-side {
    padding: 1.2rem 1.1rem 1.3rem;
  }
}
.serp-stages {
  position: relative;
  min-height: 9.5rem;
}
@media (max-width: 940px) {
  .serp-stages {
    min-height: 8rem;
  }
}
.serp-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.45s var(--ease),
    transform 0.45s var(--ease);
  pointer-events: none;
}
.serp-stage.is-on {
  opacity: 1;
  transform: none;
}
.serp-stage h3 {
  margin-top: 0.55rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.serp-stage p {
  margin-top: 0.6rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--n-86868b);
}
.serp-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.serp-kpi {
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.03 * var(--wash-k)));
}
.serp-kpi-l {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.serp-kpi-v {
  display: block;
  margin-top: 0.3rem;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.serp-kpi-v.bump {
  animation: serp-bump 0.5s var(--ease);
}
@keyframes serp-bump {
  0% {
    transform: translateY(5px);
    opacity: 0.35;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.serp-kpi-s {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  color: var(--n-5e5e63);
}
.serp-track {
  margin-top: auto;
  padding-top: 1.6rem;
}
.serp-line {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  overflow: hidden;
}
.serp-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w, 0%);
  border-radius: 2px;
  background: var(--grad-blue);
  transition: width 0.8s var(--ease);
}
.serp-ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
  margin-top: 0.7rem;
}
.serp-tick {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--n-5e5e63);
  padding: 0.2rem 0.35rem;
  border-radius: 8px;
  transition:
    color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.serp-tick:hover {
  color: var(--n-86868b);
}
.serp-tick.is-on {
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}

@media (prefers-reduced-motion: reduce) {
  .serp-row,
  .serp-stage,
  .serp-line i,
  .serp-count {
    transition: none !important;
  }
  .serp-caret {
    display: none;
  }
  .serp-kpi-v.bump {
    animation: none;
  }
}

.bill-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 1rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .bill-grid {
    gap: 2.5rem;
  }
}
@media (max-width: 900px) {
  .bill-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.bill-paper {
  padding: 1.9rem 1.9rem 1.7rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: linear-gradient(180deg, rgb(var(--wash) / calc(0.055 * var(--wash-k))), rgb(var(--wash) / calc(0.018 * var(--wash-k))));
  box-shadow: 0 40px 90px -50px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
@media (max-width: 480px) {
  .bill-paper {
    padding: 1.5rem 1.3rem 1.3rem;
  }
}
.bill-head {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bill-head span {
  display: block;
  margin-top: 0.35rem;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.bill-rows {
  margin-top: 1.6rem;
}
.bill-row {
  display: flex;
  align-items: baseline;
  padding: 0.62rem 0;
  font-size: 14px;
}
.bill-row span {
  color: var(--n-86868b);
}
.bill-row i {
  flex: 1;
  min-width: 1.2rem;
  height: 1px;
  margin: 0 0.55rem 0.32rem;
  align-self: flex-end;
  background: repeating-linear-gradient(90deg, rgb(var(--wash) / calc(0.22 * var(--wash-k))) 0 2px, transparent 2px 6px);
}
.bill-row b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bill-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
}
.bill-total span {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.bill-total b {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 480px) {
  .bill-total b {
    font-size: 28px;
  }
}
.bill-note {
  margin-top: 1.1rem;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--n-5e5e63);
}

.cal {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.4rem 1.8rem;
}
.cal::before {
  content: "";
  position: absolute;
  top: 0.6rem;
  left: 0.7rem;
  right: 0.7rem;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgb(var(--wash) / calc(0.2 * var(--wash-k))) 0 5px, transparent 5px 11px);
}
@media (max-width: 940px) {
  .cal {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.6rem 2rem;
  }
  .cal::before {
    display: none;
  }
}
@media (max-width: 540px) {
  .cal {
    grid-template-columns: 1fr;
  }
}
.cal-col {
  position: relative;
}
.cal-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.45);
  background: var(--n-000000);
}
.cal-dot i {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--grad-blue);
}
.cal-when {
  margin-top: 1.1rem;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.cal-t {
  margin-top: 0.45rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.cal-list {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.75rem;
}
.cal-list li {
  position: relative;
  padding-left: 1.05rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--n-86868b);
}
.cal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(var(--blue-rgb), 0.55);
}
.cal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding: 1.7rem 1.9rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: radial-gradient(120% 160% at 88% 50%, rgb(var(--blue-c) / calc(0.13 * var(--glow-k))), transparent 62%);
}
.cal-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .cal-foot {
    padding: 1.4rem 1.3rem;
  }
  .cal-foot > a {
    margin-left: 0;
  }
}

.anat-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 1.6rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .anat-grid {
    gap: 2.6rem;
  }
}
@media (max-width: 940px) {
  .anat-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
.anat-mock {
  position: sticky;
  top: 84px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -45px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
@media (max-width: 940px) {
  .anat-mock {
    position: static;
  }
}
.anat-page {
  display: grid;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--n-0e0e12);
}
.anat-layer {
  padding: 0.85rem 0.95rem;
  border-radius: 13px;
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  background: rgb(var(--wash) / calc(0.025 * var(--wash-k)));
  transition:
    opacity 0.45s var(--ease),
    border-color 0.45s var(--ease),
    background-color 0.45s var(--ease);
}
.anat-grid[data-on] .anat-layer {
  opacity: 0.26;
}
.anat-grid[data-on] .anat-layer.is-on {
  opacity: 1;
  border-color: rgba(var(--blue-rgb), 0.45);
  background: rgba(var(--blue-rgb), 0.07);
}
.anat-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.8rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.anat-logo {
  width: 2.6rem;
  height: 0.55rem;
  border-radius: 3px;
  background: rgb(var(--wash) / calc(0.55 * var(--wash-k)));
}
.anat-navbtn {
  margin-left: auto;
  width: 3.2rem;
  height: 1.05rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.anat-t {
  height: 0.78rem;
  width: 88%;
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.5 * var(--wash-k)));
}
.anat-t.short {
  width: 56%;
  margin-top: 0.4rem;
}
.anat-l {
  display: block;
  height: 0.4rem;
  border-radius: 4px;
  background: rgb(var(--wash) / calc(0.13 * var(--wash-k)));
}
.anat-l + .anat-l {
  margin-top: 0.32rem;
}
.anat-cta {
  display: block;
  width: 5.6rem;
  height: 1.5rem;
  margin-top: 0.9rem;
  border-radius: 999px;
  background: var(--grad-blue);
}
.anat-cta.sm {
  width: 4.4rem;
  height: 1.25rem;
  margin: 0;
}
.anat-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 10.5px;
  color: var(--n-86868b);
}
.anat-row {
  display: flex;
  gap: 0.5rem;
}
.anat-box {
  flex: 1;
  height: 3rem;
  border-radius: 9px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.anat-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.anat-price b {
  font-size: 12px;
  font-weight: 600;
  color: var(--n-f5f5f7);
}
.anat-price .anat-l {
  flex: none;
}
.anat-faq {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0;
}
.anat-faq + .anat-faq {
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.anat-faq i {
  font-size: 11px;
  font-style: normal;
  color: var(--n-5e5e63);
}
.anat-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.anat-list {
  display: grid;
  gap: 0.3rem;
  counter-reset: none;
}
.anat-item {
  display: flex;
  gap: 0.95rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  border: 1px solid transparent;
  transition:
    background-color 0.35s var(--ease),
    border-color 0.35s var(--ease);
}
.anat-item:hover {
  background: rgb(var(--wash) / calc(0.035 * var(--wash-k)));
}
.anat-item.is-on {
  background: rgba(var(--blue-rgb), 0.08);
  border-color: rgba(var(--blue-rgb), 0.26);
}
.anat-n {
  flex: none;
  padding-top: 0.15rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--n-5e5e63);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.anat-item.is-on .anat-n {
  color: #5ac8fa;
}
.anat-it {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.anat-id {
  display: block;
  margin-top: 0.3rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--n-86868b);
}

.spd-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2.2rem 2.4rem;
  border-radius: 28px;
  border: 1px solid var(--hair);
  background: radial-gradient(110% 130% at 92% 50%, rgb(var(--blue-c) / calc(0.12 * var(--glow-k))), transparent 60%);
}
@media (max-width: 900px) {
  .spd-wrap {
    grid-template-columns: 1fr;
    padding: 1.7rem 1.4rem 2rem;
  }
}
.spd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  align-items: end;
  justify-items: center;
}
.spd-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.spd-val {
  margin-bottom: 0.7rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--n-86868b);
  font-variant-numeric: tabular-nums;
}
.spd-val.hi {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.spd-bar {
  width: 100%;
  max-width: 5.5rem;
  height: var(--h);
  border-radius: 14px 14px 4px 4px;
  background: linear-gradient(180deg, rgb(var(--wash) / calc(0.16 * var(--wash-k))), rgb(var(--wash) / calc(0.04 * var(--wash-k))));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.9s var(--ease) var(--d, 0ms);
}
.spd-bar.hi {
  background: var(--grad-blue);
}
.spd-wrap.in .spd-bar {
  transform: none;
}
.spd-lab {
  margin-top: 0.7rem;
  font-size: 12px;
  color: var(--n-5e5e63);
  font-variant-numeric: tabular-nums;
}

.spec {
  border-top: 1px solid var(--hair);
}
.spec-row {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 1.5rem 2.5rem;
  padding: 2.2rem 0;
  border-bottom: 1px solid var(--hair);
}
@media (max-width: 860px) {
  .spec-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    padding: 1.8rem 0;
  }
}
.spec-when {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.09);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5ac8fa;
  font-variant-numeric: tabular-nums;
}
.spec-t {
  margin-top: 0.9rem;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.spec-for {
  margin-top: 0.5rem;
  font-size: 14px;
  line-height: 1.55;
  color: var(--n-86868b);
}
.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 2rem;
  align-content: start;
}
@media (max-width: 620px) {
  .spec-list {
    grid-template-columns: 1fr;
  }
}
.spec-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--n-86868b);
}
.spec-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52rem;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.6px solid rgba(var(--blue-rgb), 0.85);
  border-bottom: 1.6px solid rgba(var(--blue-rgb), 0.85);
  transform: rotate(-45deg);
}
.spec-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.4rem;
}
.spec-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .spec-foot > a {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spd-bar {
    transform: none;
    transition: none;
  }
  .anat-layer {
    transition: none;
  }
}

.fun {
  display: grid;
  gap: 0.5rem;
}
.fun-step {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
  align-items: center;
  padding: 0.9rem 0;
}
@media (max-width: 860px) {
  .fun-step {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    padding: 0.7rem 0;
  }
}
.fun-side {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.55rem;
  min-width: 0;
}
.fun-bar {
  width: var(--w);
  height: 2.7rem;
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(var(--blue-c) / calc(0.5 * var(--glow-k))), rgba(90, 200, 250, 0.16));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s var(--ease) var(--d, 0ms);
}
.fun-step.in .fun-bar {
  transform: none;
}
.fun-step.is-end .fun-bar {
  background: var(--grad-blue);
}
.fun-num {
  font-size: 13.5px;
  color: var(--n-86868b);
  white-space: nowrap;
}
.fun-num b {
  margin-right: 0.45rem;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
}
.fun-step.is-end .fun-num b {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fun-note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--n-86868b);
}
.fun-note span {
  color: var(--n-f5f5f7);
  font-weight: 500;
}
.fun-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.6rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--hair);
}
.fun-foot > a {
  margin-left: auto;
}
@media (max-width: 640px) {
  .fun-foot > a {
    margin-left: 0;
  }
}

.dr {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--n-0b0b0e);
  transition: border-color 0.45s var(--ease);
}
.dr:hover {
  border-color: rgba(var(--blue-rgb), 0.32);
}
.dr--woo:hover {
  border-color: rgba(127, 84, 179, 0.45);
}
.dr-scena {
  position: relative;
  display: grid;
  place-items: center;
  height: 208px;
  padding: 1.5rem;
  background: radial-gradient(70% 90% at 50% 0%, rgb(var(--blue-c) / calc(0.1 * var(--glow-k))), transparent 70%), var(--n-08080b);
  border-bottom: 1px solid var(--hair);
}

.woo-poswiata {
  position: absolute;
  width: min(78%, 280px);
  height: 116px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(127, 84, 179, 0.5), transparent);
  filter: blur(30px);
  pointer-events: none;
}
.dr-scena--woo {
  background: radial-gradient(68% 88% at 50% 46%, rgba(127, 84, 179, 0.14), transparent 72%), var(--n-08080b);
}
.dr-woo {
  position: relative;
  height: clamp(34px, 6.6vw, 50px);
  width: auto;
}

.wrs {
  position: relative;
  width: 100%;
  max-width: 320px;
}
.wrs-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.wrs-cien {
  fill: var(--n-000000);
}
.wrs-gora {
  fill: url(#wrsPlyta);
  stroke: rgb(var(--wash) / calc(0.16 * var(--line-k)));
  stroke-width: 1;
}
.wrs-bok {
  fill: var(--n-0a0a0e);
  stroke: rgb(var(--wash) / calc(0.08 * var(--line-k)));
  stroke-width: 1;
}
/* Rozświetlenie górnej krawędzi bryły - imituje światło ślizgające się po
   ciemnej płycie. Na białym rysunku nie ma czego rozświetlać, więc gaśnie
   razem z pozostałymi błyskami. */
.wrs-blask {
  fill: none;
  stroke: rgb(var(--gloss) / calc(0.13 * var(--gloss-k)));
  stroke-width: 1;
}
.wrs-blask--akcent {
  stroke: rgb(var(--gloss) / calc(0.34 * var(--gloss-k)));
}
.wrs-akcent {
  fill: url(#wrsAkcent);
  stroke: url(#wrsObrys);
  filter: drop-shadow(0 0 12px rgba(var(--blue-rgb), 0.3));
  transition: filter 0.45s var(--ease);
}
.wrs-bok--akcent {
  fill: var(--n-07131f);
  stroke: rgba(90, 200, 250, 0.22);
}
.dr:hover .wrs-akcent {
  filter: drop-shadow(0 0 18px rgba(var(--blue-rgb), 0.5));
}
.wrs-wodz {
  stroke: rgb(var(--wash) / calc(0.14 * var(--line-k)));
  stroke-width: 1;
}
.wrs-opis {
  font-size: 9.5px;
  letter-spacing: -0.01em;
  fill: var(--n-5e5e63);
}
.wrs-opis--mocny {
  fill: var(--n-86868b);
}
.dr-scena--wrs {
  overflow: hidden;
  background: radial-gradient(62% 82% at 50% 42%, rgb(var(--blue-c) / calc(0.11 * var(--glow-k))), transparent 72%), var(--n-08080b);
}
.dr-tresc {
  flex: 1;
  padding: 1.75rem;
}
@media (min-width: 640px) {
  .dr-tresc {
    padding: 2rem;
  }
}
.dr-h {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--n-f5f5f7);
}
.dr-p {
  margin-top: 1.1rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--n-86868b);
}
.dr-lista {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.4rem;
}
.dr-lista li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--n-b6b6bc);
}
.dr-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-image: var(--grad-blue);
}
.dr-kiedy {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--n-5e5e63);
}

@media (max-width: 1023px) {
  .shp-view {
    display: none;
  }
  .shp[data-on="0"] .shp-view[data-v="0"],
  .shp[data-on="1"] .shp-view[data-v="1"],
  .shp[data-on="2"] .shp-view[data-v="2"] {
    display: grid;
  }
}
@media (max-width: 520px) {
  .shp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shp-search {
    display: none;
  }
  .shp-opt {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shp-prod,
  .shp-opt,
  .shp-opt .is-pick,
  .shp-sys,
  .shp-sys b,
  .shp-sum-v b,
  .shp-count b,
  .shp-vend,
  .shp-bar i,
  .shp-cart b,
  .shp-toast,
  .shp-tab-bar i {
    animation: none !important;
  }
  .shp-opt .is-pick {
    color: #fff;
    background: var(--blue);
  }
}

.run {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -50px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
.run-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  background: rgb(var(--wash) / calc(0.025 * var(--wash-k)));
}
.run-doc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 12.5px;
  color: var(--n-86868b);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.run-tag {
  margin-left: auto;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.1);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #5ac8fa;
}
.run-list {
  padding: 0.6rem 1.6rem 1.6rem;
}
@media (max-width: 560px) {
  .run-list {
    padding: 0.4rem 1.1rem 1.2rem;
  }
}
.run-list li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.06 * var(--wash-k)));
}
.run-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0.4rem;
}
@media (max-width: 700px) {
  .run-list li {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}
.run-when {
  padding-top: 0.2rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #5ac8fa;
  white-space: nowrap;
}
.run-body h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.run-body p {
  margin-top: 0.5rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--n-86868b);
}

@media (prefers-reduced-motion: reduce) {
  .fun-bar {
    transform: none;
    transition: none;
  }
}

.wall {
  display: grid;
  gap: 1.1rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.wall-row {
  overflow: hidden;
}
.wall-track {
  display: flex;
  gap: 1.1rem;
  width: max-content;
  animation: wallRun 56s linear infinite;
}
.wall-row--back .wall-track {
  animation-direction: reverse;
  animation-duration: 68s;
}
@keyframes wallRun {
  to {
    transform: translateX(-50%);
  }
}
.wall-card {
  flex: none;
  width: 296px;
}
@media (max-width: 640px) {
  .wall-card {
    width: 236px;
  }
}
.wall-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hair);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--n-17171c);
}
.wall-chrome i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.22 * var(--wash-k)));
}
.wall-url {
  margin-left: 0.5rem;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 8.5px;
  color: var(--n-6e6e75);
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wall-screen {
  height: 152px;
  padding: 0.8rem;
  border: 1px solid var(--hair);
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, var(--n-101014) 0%, var(--n-0a0a0d) 100%);
  overflow: hidden;
}
@media (max-width: 640px) {
  .wall-screen {
    height: 128px;
  }
}
.wall-name {
  margin-top: 0.7rem;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--n-86868b);
  text-align: center;
}

.wall-screen > div {
  height: 100%;
}
.w-cal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 5px;
}
.w-cal span {
  border-radius: 4px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.w-cal span.is-on {
  background: var(--grad-blue);
  opacity: calc(0.45 + var(--n) * 0.03);
}
.w-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 7px;
}
.w-grid span {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 4px;
}
.w-grid i {
  border-radius: 6px;
  background: rgb(var(--wash) / calc(0.09 * var(--wash-k)));
}
.w-grid span:nth-child(2) i,
.w-grid span:nth-child(4) i {
  background: linear-gradient(180deg, rgb(var(--blue-c) / calc(0.5 * var(--glow-k))), rgb(var(--blue-c) / calc(0.14 * var(--glow-k))));
}
.w-grid b {
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.13 * var(--wash-k)));
}
.w-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  align-items: stretch;
}
.w-plans span {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 8px 7px;
  border-radius: 8px;
  border: 1px solid var(--hair);
}
.w-plans span.is-on {
  border-color: transparent;
  background: var(--grad-blue);
}
.w-plans i {
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.2 * var(--wash-k)));
}
.w-plans b {
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.w-plans span.is-on i,
.w-plans span.is-on b {
  background: rgb(var(--gloss) / calc(0.42 * var(--gloss-k)));
}
.w-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 6px;
}
.w-chart span {
  height: var(--h);
  border-radius: 4px;
  background: rgb(var(--wash) / calc(0.11 * var(--wash-k)));
}
.w-chart span:nth-child(6),
.w-chart span:nth-child(7) {
  background: var(--grad-blue);
}
.w-kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.w-kanban span {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 6px;
  border-radius: 8px;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
.w-kanban i {
  height: 17px;
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.w-kanban span:nth-child(2) i:first-child {
  background: var(--grad-blue);
}
.w-chat {
  display: grid;
  align-content: center;
  gap: 8px;
}
.w-chat span {
  height: 20px;
  border-radius: 9px;
}
.w-chat .l {
  width: 62%;
  background: rgb(var(--wash) / calc(0.09 * var(--wash-k)));
}
.w-chat .r {
  width: 52%;
  margin-left: auto;
  background: var(--grad-blue);
  opacity: 0.85;
}
.w-rows {
  display: grid;
  gap: 6px;
  align-content: center;
}
.w-rows span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border-radius: 7px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.w-rows i {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.14 * var(--wash-k)));
}
.w-rows b {
  flex: none;
  width: 24px;
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.w-rows b.ok {
  background: var(--grad-blue);
}
.w-map {
  position: relative;
  border-radius: 8px;
  background:
    linear-gradient(rgb(var(--wash) / calc(0.05 * var(--wash-k))) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgb(var(--wash) / calc(0.05 * var(--wash-k))) 1px, transparent 1px) 0 0 / 26px 100%,
    rgb(var(--wash) / calc(0.03 * var(--wash-k)));
}
.w-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.w-map-road {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(var(--blue-rgb), 0.7));
}
.w-map i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.45);
}
.w-conf {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 8px;
}
.w-conf-opts {
  display: grid;
  align-content: start;
  gap: 6px;
}
.w-conf-opts i {
  height: 15px;
  border-radius: 5px;
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.w-conf-opts i.is-on {
  background: var(--grad-blue);
}
.w-conf-view {
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
.w-conf-view b {
  width: 58%;
  height: 56%;
  border-radius: 10px;
  background: linear-gradient(150deg, rgb(var(--blue-c) / calc(0.55 * var(--glow-k))), rgb(var(--blue-c) / calc(0.12 * var(--glow-k))));
}
.w-course {
  display: grid;
  gap: 8px;
  align-content: center;
}
.w-course span {
  display: grid;
  gap: 5px;
}
.w-course i {
  height: 5px;
  width: 64%;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.14 * var(--wash-k)));
}
.w-course b {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.w-course b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p);
  border-radius: 999px;
  background: var(--grad-blue);
}

@media (prefers-reduced-motion: reduce) {
  .wall-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
  }
  .wall-card[aria-hidden="true"] {
    display: none;
  }
  .wall {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.ask {
  margin-top: 2.6rem;
  display: flex;
  justify-content: center;
}
.ask-box {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  width: min(100%, 46rem);
  min-height: 5.6rem;
  padding: 1.25rem 1.6rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.32);
  background: radial-gradient(120% 200% at 0% 0%, rgb(var(--blue-c) / calc(0.14 * var(--glow-k))), transparent 60%), var(--n-0b0b0e);
  box-shadow:
    0 30px 70px -34px rgb(var(--shadow) / calc(0.95 * var(--shadow-k))),
    0 0 70px -30px rgba(var(--blue-rgb), 0.55);
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.35;
}
@media (max-width: 560px) {
  .ask-box {
    min-height: 7.4rem;
    padding: 1.1rem 1.2rem;
  }
}
.ask-pre {
  flex: none;
  color: var(--n-5e5e63);
}
.ask-txt {
  color: var(--n-f5f5f7);
}
.ask-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  border-radius: 1px;
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.9);
  transform: translateY(0.12em);
  animation: askCaret 1.05s steps(1) infinite;
}
@keyframes askCaret {
  50% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ask-caret {
    animation: none;
  }
}

.sla {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .sla {
    gap: 3rem;
  }
}
@media (max-width: 900px) {
  .sla {
    grid-template-columns: 1fr;
  }
}
.sla-panel {
  border-radius: 22px;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.sla-row {
  display: grid;
  grid-template-columns: auto 10rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.sla-row:last-child {
  border-bottom: 0;
}
@media (max-width: 620px) {
  .sla-row {
    grid-template-columns: auto 1fr;
    gap: 0.5rem 0.8rem;
    padding: 0.95rem 1.1rem;
  }
  .sla-row .sla-v {
    grid-column: 2;
  }
}
.sla-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #5ac8fa;
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.16);
  transform: translateY(-2px);
}
.sla-k {
  font-size: 14px;
  font-weight: 600;
}
.sla-v {
  font-size: 14px;
  line-height: 1.5;
  color: var(--n-86868b);
}

.sd {
  border: 1px solid var(--hair);
  border-radius: 28px;
  overflow: hidden;
  background: var(--n-0b0b0e);
}

.sd-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
}
@media (max-width: 520px) {
  .sd-rail {
    gap: 0.4rem;
  }
}
.sd-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  text-align: left;
}
.sd-step-bar {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--wash) / calc(0.11 * var(--wash-k)));
}
.sd-step-bar i {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--grad-blue);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
}
.sd-step.is-done .sd-step-bar i,
.sd-step.is-on .sd-step-bar i {
  transform: scaleX(1);
}
.sd-step-n {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  color: var(--n-5e5e63);
  font-variant-numeric: tabular-nums;
  transition: color 0.35s var(--ease);
}
.sd-step-t {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--n-86868b);
  transition: color 0.35s var(--ease);
}
@media (max-width: 520px) {
  .sd-step-t {
    font-size: 12px;
  }
}
.sd-step:hover .sd-step-t,
.sd-step.is-on .sd-step-t {
  color: var(--n-f5f5f7);
}
.sd-step.is-on .sd-step-n {
  color: var(--n-86868b);
}

.sd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 940px) {
  .sd-body {
    grid-template-columns: 1fr;
  }
}
.sd-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.9rem 1.2rem 2rem;
}
.sd-tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12px;
  font-weight: 600;
  color: var(--n-86868b);
  letter-spacing: 0.01em;
}
.sd-tool-in[hidden] {
  display: none;
}
.sd-tool::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.28 * var(--wash-k)));
  transition: background-color 0.4s var(--ease);
}
.sd[data-stage="4"] .sd-tool::before {
  background: var(--blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.85);
  animation: sdLive 2s var(--ease) infinite;
}
@keyframes sdLive {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.sd-phone {
  position: relative;
  width: 202px;
  max-width: 100%;
  aspect-ratio: 9 / 19.4;
  background: var(--n-000000);
  border: 2px solid rgb(var(--wash) / calc(0.16 * var(--wash-k)));
  border-radius: 38px;
  overflow: hidden;
  box-shadow:
    0 45px 90px -30px rgb(var(--shadow) / calc(0.95 * var(--shadow-k))),
    inset 0 0 0 5px rgb(var(--shadow) / var(--shadow-k));
}
.sd-notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 22px;
  border-radius: 20px;
  background: var(--n-000000);
  z-index: 3;
}
.sd-home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.55 * var(--wash-k)));
  z-index: 3;
}
.sd-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--n-17171c) 0%, var(--n-0b0b0e) 100%);
  transition: background 0.6s var(--ease);
}
.sd[data-stage="1"] .sd-screen,
.sd[data-stage="2"] .sd-screen {
  background: var(--n-0d0d11);
}

.sd-paper {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.sd[data-stage="1"] .sd-paper {
  opacity: 1;
  background-image: linear-gradient(rgb(var(--wash) / calc(0.05 * var(--wash-k))) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--wash) / calc(0.05 * var(--wash-k))) 1px, transparent 1px);
  background-size: 14px 14px;
}
.sd[data-stage="2"] .sd-paper {
  opacity: 1;
  background-image: repeating-linear-gradient(90deg, rgb(var(--blue-c) / calc(0.14 * var(--glow-k))) 0 1px, transparent 1px 25%);
  background-position: 0.85rem 0;
}
.sd-status {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.05rem 0.2rem;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.5s var(--ease);
}
.sd-status svg {
  width: 13px;
  height: 13px;
}
.sd[data-stage="1"] .sd-status {
  opacity: 0.3;
}
.sd-app {
  position: relative;
  z-index: 2;
  flex: 1;
  min-height: 0;
  padding: 0.9rem 0.85rem 1rem;
  overflow: hidden;
}
.sd-hi {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sd-bell {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--n-c9c9cf);
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  transition:
    background-color 0.5s var(--ease),
    border-radius 0.5s var(--ease);
}
.sd-bell svg {
  width: 12px;
  height: 12px;
}
.sd-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.sd-stat {
  padding: 0.6rem 0.55rem 0.7rem;
  border-radius: 14px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-num {
  position: relative;
  margin-top: 0.25rem;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--n-f5f5f7);
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
.sd-list {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.sd-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 12px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-item-tx {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.15rem;
}
.sd-ico {
  position: relative;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);
  transition:
    background 0.5s var(--ease),
    border-radius 0.5s var(--ease);
}
.sd-ico svg {
  width: 11px;
  height: 11px;
}
.sd-btn {
  margin-top: 0.75rem;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-blue);

  transition:
    background 0.5s var(--ease),
    border-color 0.5s var(--ease),
    border-radius 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd-btn .sd-tx {
  color: #fff;
  font-weight: 600;
}
.sd[data-stage="1"] .sd-btn .sd-tx,
.sd[data-stage="2"] .sd-btn .sd-tx {
  color: transparent;
}
.sd-tabbar {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.55rem 0.5rem 1.15rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.08 * var(--wash-k)));
}
.sd-tab {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--n-5e5e63);
  transition: color 0.4s var(--ease);
}
.sd-tab svg {
  width: 14px;
  height: 14px;
}
.sd-tab.is-active {
  color: var(--n-f5f5f7);
}
.sd[data-stage="4"] .sd-tab.is-active {
  color: var(--blue);
}

.sd-tx {
  position: relative;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--n-f5f5f7);
  transition: color 0.4s var(--ease);
}
.sd-tx--lg {
  font-size: 13px;
  font-weight: 700;
}
.sd-tx--sm {
  font-size: 9.5px;
  color: var(--n-86868b);
}
.sd-tx::after,
.sd-num::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--w, 70%);
  height: 44%;
  max-height: 8px;
  min-height: 4px;
  border-radius: 3px;
  background: rgb(var(--wash) / calc(0.17 * var(--wash-k)));
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.sd[data-stage="1"] .sd-tx,
.sd[data-stage="2"] .sd-tx,
.sd[data-stage="1"] .sd-num,
.sd[data-stage="2"] .sd-num {
  color: transparent;
}
.sd[data-stage="1"] .sd-tx::after,
.sd[data-stage="2"] .sd-tx::after,
.sd[data-stage="1"] .sd-num::after,
.sd[data-stage="2"] .sd-num::after {
  opacity: 1;
}
.sd[data-stage="1"] .sd-tx::after,
.sd[data-stage="1"] .sd-num::after {
  border-radius: 1px;
  background: rgb(var(--wash) / calc(0.26 * var(--wash-k)));
  transform: translateY(-50%) rotate(-0.5deg);
}
.sd[data-stage="1"] .sd-tx--sm::after {
  transform: translateY(-50%) rotate(0.6deg);
}

.sd[data-stage="1"] .sd-stat,
.sd[data-stage="1"] .sd-item,
.sd[data-stage="1"] .sd-btn {
  background: none;
  border-color: rgb(var(--wash) / calc(0.3 * var(--wash-k)));
  border-width: 1.5px;
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
}
.sd[data-stage="1"] .sd-stat:nth-child(2),
.sd[data-stage="1"] .sd-item:nth-child(2) {
  border-radius: 15px 225px 15px 255px / 255px 12px 225px 15px;
}
.sd[data-stage="1"] .sd-item {
  transform: rotate(-0.35deg);
}
.sd[data-stage="1"] .sd-item:nth-child(2) {
  transform: rotate(0.3deg);
}
.sd[data-stage="1"] .sd-btn {
  transform: rotate(-0.4deg);
}
.sd[data-stage="1"] .sd-ico,
.sd[data-stage="1"] .sd-bell {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgb(var(--wash) / calc(0.3 * var(--wash-k)));
  border-radius: 255px 12px 225px 15px / 15px 225px 15px 255px;
}
.sd[data-stage="1"] .sd-tabbar {
  border-top-style: dashed;
  border-top-color: rgb(var(--wash) / calc(0.22 * var(--wash-k)));
}

.sd[data-stage="2"] .sd-stat,
.sd[data-stage="2"] .sd-item,
.sd[data-stage="2"] .sd-btn {
  background: none;
  border-color: var(--hair);
  border-radius: 10px;
}
.sd[data-stage="2"] .sd-btn {
  border-radius: 999px;
}
.sd[data-stage="2"] .sd-ico,
.sd[data-stage="2"] .sd-bell {
  background: none;
  box-shadow: inset 0 0 0 1px var(--hair);
  border-radius: 6px;
}

.sd[data-stage="1"] .sd-ico svg,
.sd[data-stage="2"] .sd-ico svg,
.sd[data-stage="1"] .sd-bell svg,
.sd[data-stage="2"] .sd-bell svg,
.sd[data-stage="1"] .sd-tab svg,
.sd[data-stage="2"] .sd-tab svg {
  opacity: 0;
}
.sd-ico svg,
.sd-bell svg,
.sd-tab svg {
  transition: opacity 0.35s var(--ease);
}
.sd-ico::after,
.sd-tab::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: rgb(var(--wash) / calc(0.22 * var(--wash-k)));
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.sd[data-stage="1"] .sd-ico::after,
.sd[data-stage="2"] .sd-ico::after,
.sd[data-stage="1"] .sd-tab::after,
.sd[data-stage="2"] .sd-tab::after {
  opacity: 1;
}

.sd-push {
  position: absolute;
  z-index: 4;
  top: 2.4rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border-radius: 14px;
  border: 1px solid rgb(var(--wash) / calc(0.12 * var(--wash-k)));
  background: rgb(var(--n-1c1c22-rgb) / 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -18px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.sd[data-stage="4"] .sd-push {
  animation: sdPush 6s var(--ease) 0.6s infinite;
}
@keyframes sdPush {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  8%,
  55% {
    opacity: 1;
    transform: translateY(0);
  }
  66%,
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}
.sd-push-mark {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-blue);
}
.sd-push-t {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--n-f5f5f7);
}
.sd-push-s {
  margin-top: 1px;
  font-size: 9px;
  line-height: 1.3;
  color: var(--n-a6a6ad);
}
.sd-push-time {
  flex: none;
  align-self: flex-start;
  font-size: 8.5px;
  color: var(--n-5e5e63);
}
.sd[data-stage="4"] .sd-stat {
  border-color: rgba(var(--blue-rgb), 0.28);
  background: rgba(var(--blue-rgb), 0.1);
}

.sd-panel {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.9rem 2rem 2rem;
  border-left: 1px solid var(--hair);
  background: radial-gradient(120% 110% at 85% 0%, rgb(var(--blue-c) / calc(0.16 * var(--glow-k))), transparent 62%);
}
@media (max-width: 940px) {
  .sd-panel {
    border-left: 0;
    border-top: 1px solid var(--hair);
  }
}
@media (max-width: 520px) {
  .sd-panel {
    padding: 1.5rem 1.2rem 1.7rem;
  }
}
.sd-cards {
  min-height: 168px;
}
@media (max-width: 620px) {
  .sd-cards {
    min-height: 0;
  }
}
.sd-card[hidden] {
  display: none;
}
.sd-card {
  animation: sdCard 0.4s var(--ease) both;
}
@keyframes sdCard {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.sd-card-when {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.sd-card-t {
  margin-top: 0.4rem;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.sd-card-d {
  margin-top: 0.6rem;
  max-width: 52ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--n-86868b);
}
.sd-card-get {
  margin-top: 0.6rem;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--n-c9c9cf);
}
.sd-ready {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.95rem;
}
.sd-ready-k {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.sd-ready-v {
  flex: none;
  min-width: 3.2ch;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.sd-ready-bar {
  flex: 1;
  min-width: 40px;
  max-width: 200px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.sd-ready-bar i {
  display: block;
  height: 100%;
  width: var(--f, 0%);
  border-radius: 999px;
  background: var(--grad-blue);
  animation: sdReady 0.7s var(--ease) both;
}
@keyframes sdReady {
  from {
    width: 0;
  }
}

.sd-qr {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: auto;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  text-decoration: none;
  color: inherit;
}
@media (max-width: 620px) {
  .sd-qr {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
}
.sd-qr-card {
  flex: none;
  padding: 9px;
  border-radius: 12px;
  background: #fff;
  line-height: 0;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease);
}
.sd-qr-card img {
  display: block;
  width: 104px;
  height: 104px;
}
.sd-qr:hover .sd-qr-card {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(var(--blue-rgb), 0.75);
}
.sd-qr-tx {
  display: block;
}
.sd-qr-t {
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.sd-qr-d {
  display: block;
  margin-top: 0.35rem;
  max-width: 50ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--n-86868b);
}
.sd-qr-a {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 12.5px;
  color: transparent;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
}
.sd-qr-tap {
  display: none;
}
@media (max-width: 620px) {
  .sd-qr-card {
    display: none;
  }
  .sd-qr-scan {
    display: none;
  }
  .sd-qr-tap {
    display: inline;
  }
  .sd-qr-a {
    margin-top: 0.85rem;
    padding: 0.6rem 1.3rem;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background: var(--grad-blue);
    -webkit-background-clip: border-box;
    background-clip: border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-card,
  .sd-ready-bar i {
    animation: none;
  }
  .sd[data-stage="4"] .sd-push {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .sd[data-stage="4"] .sd-tool::before {
    animation: none;
  }
}

.store-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (min-width: 1024px) {
  .store-grid {
    gap: 1.5rem;
  }
}
@media (max-width: 860px) {
  .store-grid {
    grid-template-columns: 1fr;
  }
}
.store {
  padding: 1.9rem 1.9rem 1.7rem;
  border-radius: 24px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.022 * var(--wash-k)));
}
@media (max-width: 520px) {
  .store {
    padding: 1.5rem 1.3rem;
  }
}
.store-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hair);
}
.store-mark {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-f5f5f7);
}
.store-name {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.store-when {
  margin-top: 0.15rem;
  font-size: 12.5px;
  color: var(--n-5e5e63);
}
.store-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.3rem;
}
.store-list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 14px;
  line-height: 1.6;
  color: var(--n-86868b);
}
.store-list li b {
  color: var(--n-f5f5f7);
  font-weight: 500;
}
.store-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.62rem;
  height: 0.34rem;
  border-left: 1.6px solid rgba(var(--blue-rgb), 0.85);
  border-bottom: 1.6px solid rgba(var(--blue-rgb), 0.85);
  transform: rotate(-45deg);
}
.store-note {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.4rem 1.6rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.06);
}
.store-note-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 10px;
  background: rgba(var(--blue-rgb), 0.16);
  color: #5ac8fa;
}

.cost2 {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 1024px) {
  .cost2 {
    gap: 3rem;
  }
}
@media (max-width: 900px) {
  .cost2 {
    grid-template-columns: 1fr;
  }
}
.cost2-list {
  border-radius: 22px;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.cost2-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 1.05rem 1.4rem;
  border-bottom: 1px solid var(--hair);
}
.cost2-row:last-child {
  border-bottom: 0;
}
@media (max-width: 620px) {
  .cost2-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.95rem 1.1rem;
  }
}
.cost2-k {
  font-size: 14px;
  font-weight: 500;
}
.cost2-v {
  font-size: 14px;
  line-height: 1.5;
  color: var(--n-86868b);
  font-variant-numeric: tabular-nums;
}
.cost2-row.is-us {
  background: rgba(var(--blue-rgb), 0.07);
}
.cost2-row.is-us .cost2-v {
  color: #5ac8fa;
}

.auc {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hair);
  background: var(--n-0b0b0e);
  box-shadow: 0 40px 90px -50px rgb(var(--shadow) / calc(0.9 * var(--shadow-k)));
}
.auc-head,
.auc-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.25fr 1fr 1.15fr;
  gap: 1rem;
  align-items: center;
  padding: 1.05rem 1.5rem;
}
.auc-head {
  padding-top: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.auc-row + .auc-row {
  border-top: 1px solid rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.auc-name {
  font-size: 15px;
  font-weight: 500;
}
.auc-row.is-you .auc-name {
  color: var(--n-f5f5f7);
}
.auc-row.is-you {
  background: rgba(var(--blue-rgb), 0.07);
}
.auc-cell {
  font-size: 14px;
  color: var(--n-86868b);
  font-variant-numeric: tabular-nums;
}
.auc-cell b {
  font-weight: 600;
  color: var(--n-f5f5f7);
}
.auc-row.is-you .auc-cell b {
  color: #5ac8fa;
}
.auc-c {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.auc-c.is-on {
  opacity: 1;
  transform: none;
}
.auc-q {
  display: inline-flex;
  gap: 2px;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.auc-q i {
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: rgb(var(--wash) / calc(0.14 * var(--wash-k)));
}
.auc-q i.on {
  background: rgb(var(--wash) / calc(0.45 * var(--wash-k)));
}
.auc-row.is-you .auc-q i.on {
  background: var(--grad-blue);
}
.auc-pos {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  font-style: normal;
  color: var(--n-5e5e63);
}
.auc-row.is-you .auc-pos {
  color: #5ac8fa;
}
@media (max-width: 860px) {
  .auc-head {
    display: none;
  }
  .auc-row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1.2rem 1.2rem;
  }
  .auc-cell {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
  }
  .auc-cell::before {
    content: attr(data-label);
    font-size: 11px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--n-5e5e63);
  }
  .auc-cell b {
    margin-left: auto;
  }
  .auc-pos {
    display: inline;
    margin-left: 0.5rem;
  }
}
.auc-sum {
  margin-top: 1.6rem;
  padding: 1.5rem 1.7rem;
  border-radius: 20px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.06);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.auc-sum.is-on {
  opacity: 1;
  transform: none;
}

.fit-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}
.fit-type {
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13.5px;
  color: var(--n-86868b);
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
.fit-type:hover {
  color: var(--n-f5f5f7);
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.24 * var(--wash-k)));
}
.fit-type:focus {
  outline: none;
}
.fit-type:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 3px;
}
.fit-type.is-on,
.fit-type.is-on:hover {
  color: var(--n-ffffff);
  background: var(--grad-blue);
  box-shadow: none;
}
.fit {
  border-top: 1px solid var(--hair);
}
.fit-row {
  display: grid;
  grid-template-columns: 1.9fr repeat(4, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--hair);
}
.fit-head {
  padding: 0.9rem 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.fit-ch {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.fit-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.14 * var(--wash-k)));
}
.fit-duo {
  display: flex;
  background: none;
}
.duo-mark {
  display: grid;
  place-items: center;
  width: 50%;
  height: 100%;
}
.duo-mark svg {
  width: 76%;
  height: 76%;
}
.duo-mark.is-fb {
  background: #1877f2;
}
.duo-mark.is-ig {
  background: linear-gradient(160deg, #feda75 0%, #fa7e1e 22%, #d62976 55%, #962fbf 78%, #4f5bd5 100%);
}
.duo-inline {
  display: flex;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  overflow: hidden;
}
.fit-name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.fit-lead {
  margin-top: 0.4rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--n-86868b);
  max-width: 44ch;
}
.fit-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.fit-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s var(--ease);
}
.fit-dots {
  display: inline-flex;
  gap: 4px;
}
.fit-dots i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.fit-dots[data-v="1"] i:nth-child(-n + 1),
.fit-dots[data-v="2"] i:nth-child(-n + 2),
.fit-dots[data-v="3"] i:nth-child(-n + 3) {
  background: var(--grad-blue);
}
.fit-wrap[data-type] .fit-cell {
  opacity: 0.22;
}
.fit-wrap[data-type="sklep"] .fit-cell[data-type="sklep"],
.fit-wrap[data-type="lokal"] .fit-cell[data-type="lokal"],
.fit-wrap[data-type="b2b"] .fit-cell[data-type="b2b"],
.fit-wrap[data-type="app"] .fit-cell[data-type="app"] {
  opacity: 1;
}
.fit-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  margin-top: 1.5rem;
  font-size: 12.5px;
  color: var(--n-5e5e63);
}
.fit-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
@media (max-width: 900px) {
  .fit-head {
    display: none;
  }
  .fit-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.6rem 0;
  }
  .fit-cell {
    justify-content: space-between;
    font-size: 13px;
    color: var(--n-86868b);
  }
  .fit-cell::before {
    content: attr(data-label);
  }
  .fit-row > .fit-cell + .fit-cell {
    margin-top: -0.55rem;
  }
}

.rep {
  border-radius: 24px;
  border: 1px solid var(--hair);
  overflow: hidden;
  background: var(--n-0b0b0e);
}
.rep-bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.035 * var(--wash-k)));
}
.rep-logo {
  height: 15px;
  width: auto;
  flex: none;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.rep-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 12px;
  color: var(--n-86868b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rep-file svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.rep-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  flex: none;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--n-5e5e63);
}
@media (max-width: 420px) {
  .rep-auto {
    display: none;
  }
}
.rep-live {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #34c759;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5);
  animation: rep-pulse 2.4s var(--ease) infinite;
}
@keyframes rep-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .rep-live {
    animation: none;
  }
}
.rep-body {
  padding: 1.7rem 1.8rem 1.6rem;
  background: radial-gradient(120% 90% at 80% 0%, rgb(var(--blue-c) / calc(0.16 * var(--glow-k))), transparent 60%);
}
@media (max-width: 520px) {
  .rep-body {
    padding: 1.4rem 1.2rem 1.3rem;
  }
}
.rep-srcs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.rep-srcs-lab {
  margin-right: 0.35rem;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.rep-src {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
  font-size: 11.5px;
  color: var(--n-c9c9cf);
}
.rep-lab {
  font-size: 13.5px;
  color: var(--n-86868b);
}
.rep-big {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-top: 0.2rem;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 520px) {
  .rep-big {
    font-size: 44px;
  }
}
.rep-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #34c759;
  background: rgba(52, 199, 89, 0.12);
}
.rep-delta svg {
  width: 13px;
  height: 13px;
}
.rep-sub {
  margin-top: 0.5rem;
  font-size: 13px;
  color: var(--n-5e5e63);
}
.rep-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 96px;
  margin-top: 1.7rem;
}
.rep-col {
  position: relative;
  flex: 1;
  height: var(--h);
  min-width: 0;
  border-radius: 5px;
  overflow: hidden;
  background: var(--grad-blue);
}
.rep-col i {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--m);
  background: rgb(var(--wash) / calc(0.28 * var(--wash-k)));
}
.rep-axis {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  margin-top: 0.8rem;
  font-size: 11px;
  color: var(--n-5e5e63);
}
.rep-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rep-legend b {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}
.rep-legend b.is-g {
  background: rgba(var(--blue-rgb), 0.9);
}
.rep-legend b.is-m {
  margin-left: 0.5rem;
  background: rgb(var(--wash) / calc(0.4 * var(--wash-k)));
}
.rep-rest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
.rep-rest span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--n-5e5e63);
}
.rep-rest b {
  display: block;
  margin-top: 0.25rem;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rep-ai {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.3rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(var(--blue-rgb), 0.22);
  background: rgba(var(--blue-rgb), 0.07);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--n-86868b);
}
.rep-ai svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.1rem;
  color: rgba(var(--blue-rgb), 0.95);
}
.rep-ai b {
  color: var(--n-f5f5f7);
  font-weight: 600;
}

.cadence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}
@media (max-width: 900px) {
  .cadence {
    grid-template-columns: 1fr;
  }
}
.cadence-item {
  display: flex;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.022 * var(--wash-k)));
}
.cadence-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  background: rgba(var(--blue-rgb), 0.1);
}
.cadence-ico svg {
  width: 17px;
  height: 17px;
  color: rgba(var(--blue-rgb), 0.95);
}
.cadence-t {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.cadence-p {
  margin-top: 0.4rem;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--n-86868b);
}

.tailor {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px) {
  .tailor {
    grid-template-columns: 1fr;
  }
}
.tailor-step {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.9rem 1.8rem;
  border-radius: 24px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.022 * var(--wash-k)));
}
.tailor-num {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--blue-rgb), 0.35);
  background: rgba(var(--blue-rgb), 0.1);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background-clip: padding-box;
  color: var(--n-f5f5f7);
}
.tailor-h {
  margin-top: 1.3rem;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tailor-p {
  margin-top: 0.75rem;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--n-86868b);
}
.tailor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
}
.tailor-link {
  margin-top: 1rem;
  font-size: 13.5px;
  color: rgba(var(--blue-rgb), 0.95);
  transition: opacity 0.3s var(--ease);
}
.tailor-link:hover {
  opacity: 0.75;
}

.uplift {
  margin-top: 1.1rem;
  padding: 2.1rem 2.3rem 1.9rem;
  border-radius: 28px;
  border: 1px solid var(--hair);
  background: radial-gradient(90% 140% at 92% 0%, rgb(var(--blue-c) / calc(0.13 * var(--glow-k))), transparent 60%), rgb(var(--wash) / calc(0.022 * var(--wash-k)));
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1.6rem 2.6rem;
  align-items: center;
}
@media (max-width: 900px) {
  .uplift {
    grid-template-columns: 1fr;
    padding: 1.8rem 1.4rem 1.6rem;
  }
}
.uplift-calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 560px) {
  .uplift-calc {
    grid-template-columns: 1fr;
  }
}
.uplift-col {
  padding: 1.4rem 1.4rem 1.2rem;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: var(--n-0b0b0e);
}
.uplift-col.is-after {
  border-color: rgba(var(--blue-rgb), 0.4);
  background: linear-gradient(180deg, rgb(var(--blue-c) / calc(0.12 * var(--glow-k))), rgb(var(--blue-c) / calc(0.03 * var(--glow-k)))), var(--n-0b0b0e);
}
.uplift-cap {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.uplift-col.is-after .uplift-cap {
  color: rgba(var(--blue-rgb), 0.95);
}
.uplift-line {
  margin-top: 0.7rem;
  font-size: 13px;
  line-height: 1.5;
  color: var(--n-86868b);
  font-variant-numeric: tabular-nums;
}
.uplift-line b {
  color: var(--n-f5f5f7);
  font-weight: 600;
}
.uplift-line span {
  padding: 0 0.15rem;
  color: var(--n-5e5e63);
}
.uplift-big {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.uplift-col.is-after .uplift-big {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.uplift-big small {
  display: block;
  margin-top: 0.45rem;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--n-5e5e63);
}
.uplift-note {
  grid-column: 1 / -1;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-size: 12px;
  line-height: 1.5;
  color: var(--n-5e5e63);
}

.cross {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 1.9rem;
  border-radius: 22px;
  border: 1px solid var(--hair);
  background: radial-gradient(110% 150% at 90% 50%, rgb(var(--blue-c) / calc(0.12 * var(--glow-k))), transparent 62%);
}
.cross > a {
  margin-left: auto;
}
@media (max-width: 700px) {
  .cross {
    padding: 1.4rem 1.3rem;
  }
  .cross > a {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auc-c,
  .auc-sum {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

.hero-chans {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.hero-chan {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem 0.4rem 0.4rem;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px var(--hair);
  font-size: 13.5px;
  color: var(--n-86868b);
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
.hero-chan:hover {
  color: var(--n-f5f5f7);
  box-shadow: inset 0 0 0 1px rgba(var(--blue-rgb), 0.45);
}
.hero-chan .fit-badge {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 9px;
}
.hero-chan .fit-badge svg {
  width: 16px;
  height: 16px;
}
.hero-chan .fit-duo svg {
  width: 76%;
  height: 76%;
}

.ui-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.1rem;
  padding: 0 0.8rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.ui-dots {
  display: flex;
  gap: 0.3rem;
}
.ui-dots i {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--n-2e2e34);
}
.ui-urls {
  position: relative;
  flex: 0 1 13rem;
  height: 1.05rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.05 * var(--wash-k)));
}
.ui-url {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9.5px;
  color: var(--n-6b6b73);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.ui-url.is-on {
  opacity: 1;
}
.ui-stage {
  position: relative;
  height: 19rem;
}
@media (max-width: 640px) {
  .ui-stage {
    height: 17rem;
  }
}
.ui-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0.9rem 1.05rem 1rem;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition:
    opacity 0.55s var(--ease),
    transform 0.55s var(--ease);
}
.ui-view.is-on {
  opacity: 1;
  transform: none;
}

.ui-site-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  font-size: 9px;
  color: var(--n-86868b);
}
.ui-site-nav b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--n-f5f5f7);
}
.ui-site-nav em {
  margin-left: auto;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  font-style: normal;
  color: var(--n-f5f5f7);
}
.ui-site-hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 0;
}
.ui-eyebrow {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ui-site-txt h4 {
  margin-top: 0.35rem;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.032em;
}
@media (max-width: 640px) {
  .ui-site-txt h4 {
    font-size: 16px;
  }
}
.ui-lead {
  margin-top: 0.4rem;
  font-size: 9px;
  line-height: 1.5;
  color: var(--n-86868b);
}
.ui-btn {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: var(--grad-blue);
  font-size: 9px;
  font-weight: 500;
  color: #fff;
}
.ui-btn.sm {
  margin: 0;
  padding: 0.32rem 0.75rem;
}
.ui-site-photo {
  position: relative;
  align-self: stretch;
  min-height: 6.2rem;
  border-radius: 11px;
  overflow: hidden;
  background: linear-gradient(155deg, #1b2740 0%, var(--n-101522) 55%, var(--n-0b0d13) 100%);
}
.ui-site-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 55% at 50% 0%, rgba(90, 200, 250, 0.22), transparent 72%);
}
.ui-facade {
  position: absolute;
  inset: 0;
}
.ui-facade i {
  position: absolute;
  bottom: 0;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.ui-facade i:nth-child(1) {
  left: 9%;
  width: 28%;
  height: 58%;
}
.ui-facade i:nth-child(2) {
  left: 39%;
  width: 25%;
  height: 80%;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.ui-facade i:nth-child(3) {
  left: 66%;
  width: 23%;
  height: 44%;
}
.ui-facade i:nth-child(4) {
  left: 0;
  width: 100%;
  height: 12%;
  background: rgba(var(--blue-rgb), 0.22);
  box-shadow: none;
}
.ui-site-badge {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  z-index: 2;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  background: rgb(var(--n-08080a-rgb) / 0.72);
  font-size: 8px;
  color: var(--n-f5f5f7);
}
.ui-site-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.ui-site-facts b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.ui-site-facts span {
  font-size: 8px;
  color: var(--n-5e5e63);
}

.ui-shop-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
}
.ui-shop-top b {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.ui-search {
  flex: 1;
  padding: 0.26rem 0.65rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  font-size: 8.5px;
  color: var(--n-5e5e63);
}
.ui-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 8px;
  background: rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-f5f5f7);
}
.ui-cart em {
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  display: grid;
  place-items: center;
  min-width: 0.95rem;
  height: 0.95rem;
  border-radius: 999px;
  background: var(--grad-blue);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 600;
  color: #fff;
}
.ui-chips {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.ui-chips span {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  font-size: 8.5px;
  color: var(--n-86868b);
}
.ui-chips .is-on {
  background: var(--grad-blue);
  box-shadow: none;
  color: #fff;
}
.ui-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-top: 0.7rem;
}
.ui-grid article {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ui-thumb {
  position: relative;
  flex: 1;
  min-height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: rgb(var(--wash) / calc(0.6 * var(--wash-k)));
}
.ui-thumb.t1 {
  background: linear-gradient(150deg, rgb(var(--blue-c) / calc(0.42 * var(--glow-k))), rgba(90, 200, 250, 0.14) 62%, rgb(var(--wash) / calc(0.04 * var(--wash-k))));
}
.ui-thumb.t2 {
  background: linear-gradient(150deg, rgba(120, 95, 225, 0.36), rgb(var(--wash) / calc(0.05 * var(--wash-k))));
}
.ui-thumb.t3 {
  background: linear-gradient(150deg, rgba(90, 200, 250, 0.3), rgb(var(--wash) / calc(0.04 * var(--wash-k))));
}
.ui-tag {
  position: absolute;
  top: 0.32rem;
  left: 0.32rem;
  padding: 0.08rem 0.35rem;
  border-radius: 5px;
  background: var(--n-f5f5f7);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  color: var(--n-0b0b0e);
}
.ui-grid p {
  margin-top: 0.4rem;
  font-size: 9px;
  color: var(--n-f5f5f7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-grid b {
  margin-top: 0.1rem;
  font-size: 10px;
  font-weight: 600;
}
.ui-grid s {
  margin-left: 0.25rem;
  font-size: 8px;
  color: var(--n-5e5e63);
}
.ui-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  font-size: 8.5px;
  color: var(--n-5e5e63);
}

.ui-app {
  flex-direction: row;
  padding: 0;
}
.ui-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 2.5rem;
  padding: 0.85rem 0;
  border-right: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-4e4e55);
}
.ui-side-mark {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 6px;
  background: var(--grad-blue);
}
.ui-side .on {
  color: #5ac8fa;
}
.ui-app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1rem 0.95rem;
}
.ui-app-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ui-app-top b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ui-live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 8px;
  color: #5ac8fa;
}
.ui-live i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 999px;
  background: #5ac8fa;
  animation: ui-pulse 2.2s var(--ease) infinite;
}
@keyframes ui-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
.ui-av {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: rgb(var(--wash) / calc(0.1 * var(--wash-k)));
  font-size: 7.5px;
  font-weight: 600;
}
.ui-av.sm {
  margin: 0;
  width: 1.2rem;
  height: 1.2rem;
  font-size: 7px;
}
.ui-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.ui-kpis div {
  padding: 0.45rem 0.55rem;
  border-radius: 9px;
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
  min-width: 0;
}
.ui-kpis span {
  display: block;
  font-size: 7px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.ui-kpis b {
  display: block;
  margin-top: 0.15rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.ui-kpis em {
  font-size: 7.5px;
  font-style: normal;
  color: var(--n-5e5e63);
}
.ui-kpis .up {
  color: #5ac8fa;
}
.ui-chart {
  flex: 1;
  min-height: 3rem;
  margin-top: 0.6rem;
}
.ui-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ui-chart-line {
  stroke: #5ac8fa;
  stroke-width: 2;
  stroke-linecap: round;
}
.ui-chart-dot {
  fill: #5ac8fa;
}
.ui-rows {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.ui-rows div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  background: rgb(var(--wash) / calc(0.035 * var(--wash-k)));
  font-size: 9px;
}
.ui-rows b {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-rows em {
  margin-left: auto;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 7.5px;
  font-style: normal;
  white-space: nowrap;
}
.ui-rows .ok {
  background: rgba(var(--blue-rgb), 0.2);
  color: #5ac8fa;
}
.ui-rows .wait {
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  color: var(--n-86868b);
}

.ui-mob {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.9rem 1.05rem;
}
.ui-phone {
  position: relative;
  flex: none;
  width: 8.6rem;
  height: 100%;
  padding: 0.28rem;
  border-radius: 20px;
  background: var(--n-16161b);
  box-shadow:
    inset 0 0 0 1px rgb(var(--wash) / calc(0.14 * var(--wash-k))),
    0 24px 50px -24px rgb(var(--shadow) / var(--shadow-k));
}
.ui-notch {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--n-0a0a0d);
}
.ui-phone-in {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.2rem 0.6rem 0.5rem;
  border-radius: 17px;
  overflow: hidden;
  background: radial-gradient(120% 60% at 50% 0%, rgb(var(--blue-c) / calc(0.22 * var(--glow-k))), transparent 60%), var(--n-0c0c11);
}
.ui-mob-top span {
  font-size: 8px;
  color: var(--n-5e5e63);
}
.ui-mob-top b {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.ui-mob-card {
  position: relative;
  margin-top: 0.55rem;
  padding: 0.5rem 0.6rem 0.4rem;
  border-radius: 11px;
  background: linear-gradient(140deg, rgb(var(--blue-c) / calc(0.55 * var(--glow-k))), rgba(90, 200, 250, 0.18));
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.1 * var(--wash-k)));
}
.ui-mob-card span {
  font-size: 7.5px;
  color: rgb(var(--wash) / calc(0.75 * var(--wash-k)));
}
.ui-mob-card b {
  display: block;
  margin-top: 0.1rem;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.ui-mob-card svg {
  display: block;
  width: 100%;
  height: 1.3rem;
  margin-top: 0.2rem;
}
.ui-mob-card path {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.ui-mob-list {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.55rem;
}
.ui-mob-list div {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 8px;
  color: var(--n-f5f5f7);
}
.ui-mob-ico {
  display: grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 6px;
  background: rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  color: var(--n-86868b);
}
.ui-mob-list b {
  flex: 1;
  min-width: 0;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-mob-list em {
  flex: none;
  margin-left: auto;
  font-style: normal;
  color: var(--n-86868b);
  font-variant-numeric: tabular-nums;
}
.ui-mob-list .in {
  color: #5ac8fa;
}
.ui-tabbar {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding: 0.5rem 0.35rem 0.15rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  color: var(--n-4e4e55);
}
.ui-tabbar .on {
  color: #5ac8fa;
}
.ui-mob-side {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
@media (max-width: 420px) {
  .ui-mob-side {
    display: none;
  }
}
.ui-mob-push {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.6rem;
  border-radius: 10px;
  background: rgb(var(--wash) / calc(0.06 * var(--wash-k)));
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.08 * var(--wash-k)));
  font-size: 8.5px;
  color: var(--n-f5f5f7);
}
.ui-mob-push i {
  color: #5ac8fa;
}
.ui-mob-push em {
  font-style: normal;
}
.ui-mob-stars {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #5ac8fa;
}
.ui-mob-stars em {
  font-size: 8.5px;
  font-style: normal;
  letter-spacing: 0;
  color: var(--n-5e5e63);
}
.ui-mob-os {
  font-size: 8.5px;
  color: var(--n-5e5e63);
}

.ui-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-top: 0.85rem;
}
.ui-tab {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--n-000000);
  font-size: 11.5px;
  color: var(--n-5e5e63);
  transition:
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}
@media (min-width: 1024px) {
  .ui-tab {
    background: transparent;
  }
}
.ui-tab:hover {
  color: var(--n-86868b);
}
.ui-tab.is-on {
  color: var(--n-f5f5f7);
  box-shadow: inset 0 0 0 1px rgb(var(--wash) / calc(0.14 * var(--wash-k)));
}
.ui-tab:focus {
  outline: none;
}
.ui-tab:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ui-view,
  .ui-url {
    transition: none;
  }
  .ui-live i {
    animation: none;
  }
}

/* ═══════════════════════════ Podstrona „O nas" ═══════════════════════════
   Wszystkie klasy zaczynają się od .on-, żeby nie kolidowały z resztą
   serwisu. Animacje sterowane są klasą .in, którą główny obserwator
   z main.js dokłada elementom z atrybutem data-r - dzięki temu ta strona
   nie potrzebuje ani linijki własnego JS-u. Rodzic dostaje data-r, dzieci
   zapalają się po nim kaskadowo przez zmienną --i (numer w kolejce).       */

/* ── Hero: zdjęcie założycieli z wizytówkami po bokach ──
   Do 1180 px wizytówki stoją pod zdjęciem (obok siebie od 560 px), wyżej
   przechodzą na boki. Szerokości są dobrane tak, żeby przy 1100 px kadru
   karty nie nachodziły na sylwetki: 220 + 600 + 220 + dwie przerwy.        */
.on-art {
  position: relative;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(0, 1fr);
  max-width: 560px;
  margin-inline: auto;
}
.on-art-grid {
  position: absolute;
  inset: 4% 0 26%;
  opacity: 0.5;
}
.on-art-img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 72%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, rgba(0, 0, 0, 0.45) 72%, transparent 90%);
}
.on-person {
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: 20px;
}
.on-person-name {
  margin-top: 0.55rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--n-f5f5f7);
}
.on-person-role {
  margin-top: 0.15rem;
  font-size: 0.8125rem;
}
.on-person-tel {
  margin-top: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 0.8125rem;
  color: var(--n-86868b);
  transition: color 0.3s var(--ease);
}
.on-person-tel:hover {
  color: var(--n-f5f5f7);
}
.on-art-foot {
  margin-top: 1.5rem;
  margin-inline: auto;
  max-width: 46ch;
  text-align: center;
}
@media (min-width: 560px) {
  .on-art {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 660px;
  }
  .on-art-img {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1180px) {
  .on-art {
    display: block;
    max-width: 1100px;
  }
  .on-art-img {
    max-width: 600px;
  }
  .on-person {
    position: absolute;
    top: 27%;
    width: 220px;
  }
  /* Kreska od karty w stronę sylwetki - dosuwa podpis do osoby, której
     dotyczy, bez rysowania czegokolwiek na samym zdjęciu. */
  .on-person::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--wash) / calc(0.28 * var(--wash-k))), transparent);
  }
  .on-person--l {
    left: 0;
  }
  .on-person--l::after {
    left: 100%;
  }
  .on-person--r {
    right: 0;
  }
  .on-person--r::after {
    right: 100%;
    background: linear-gradient(270deg, rgb(var(--wash) / calc(0.28 * var(--wash-k))), transparent);
  }
  .on-art-foot {
    margin-top: -1rem;
  }
}

/* ── Pytania zadawane przed projektem ──
   Pionowa szyna z węzłami: linia „rośnie" w dół, a kolejne pytania
   wsuwają się z lewej. Odsunięcia trzymam w pikselach, bo węzeł musi
   trafić dokładnie na środek jednopikselowej linii.                        */
.on-qs-cap {
  padding-left: 40px;
  margin-bottom: 1.3rem;
}
.on-qs-list {
  position: relative;
  padding-left: 40px;
}
.on-qs-list::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0.7rem;
  bottom: 0.9rem;
  width: 1px;
  background: linear-gradient(180deg, rgb(var(--blue-c) / calc(0.75 * var(--glow-k))), rgb(var(--wash) / calc(0.08 * var(--wash-k))));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.8s var(--ease) 0.15s;
}
.on-qs.in .on-qs-list::before {
  transform: scaleY(1);
}
.on-q {
  position: relative;
  margin-bottom: 0.6rem;
  padding: 0.95rem 1.15rem;
  border-radius: 16px;
  background: var(--n-0a0a0d);
  border: 1px solid rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  opacity: 0;
  transform: translateX(-14px);
  transition:
    opacity 0.75s var(--ease),
    transform 0.75s var(--ease),
    border-color 0.4s var(--ease);
  transition-delay: calc(300ms + var(--i) * 165ms);
}
.on-qs.in .on-q {
  opacity: 1;
  transform: none;
}
.on-q:hover {
  border-color: rgb(var(--wash) / calc(0.12 * var(--wash-k)));
}
.on-q::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 1.25rem;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(var(--blue-rgb), 0.13);
  opacity: 0;
  transform: scale(0.3);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
  transition-delay: calc(300ms + var(--i) * 165ms);
}
.on-qs.in .on-q::before {
  opacity: 1;
  transform: none;
}
.on-q p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--n-c9c9cf);
}
.on-q p::before {
  content: "„";
}
.on-q p::after {
  content: "”";
}
.on-q-end {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.2rem;
  margin-left: 40px;
  padding: 1.15rem 1.3rem;
  border-radius: 18px;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: calc(420ms + var(--i) * 165ms);
}
.on-qs.in .on-q-end {
  opacity: 1;
  transform: none;
}
.on-q-end p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--n-f5f5f7);
}

/* ── Co się dzieje po publikacji ──
   Wykres jest ilustracją, nie danymi: linia rysuje się od lewej, znacznik
   „dzień publikacji" stoi w 29,2 % szerokości kadru (x = 210 z 720),
   a podpisy siedzą pod kadrem, żeby nie wchodziły na krzywą.               */
.on-growth-plot {
  position: relative;
  padding-bottom: 1.9rem;
}
.on-growth-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.on-growth-base {
  fill: none;
  stroke: rgb(var(--wash) / calc(0.09 * var(--line-k)));
  stroke-width: 1;
}
.on-growth-mark {
  fill: none;
  stroke: rgb(var(--wash) / calc(0.2 * var(--line-k)));
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.on-growth-area {
  opacity: 0;
  transition: opacity 1s var(--ease) 1s;
}
.on-growth.in .on-growth-area {
  opacity: 1;
}
.on-growth-line {
  fill: none;
  stroke: url(#onGrowthLine);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s var(--ease) 0.25s;
}
.on-growth.in .on-growth-line {
  stroke-dashoffset: 0;
}
.on-growth-dot {
  fill: var(--n-0a0a0d);
  stroke: rgb(var(--wash) / calc(0.55 * var(--line-k)));
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.95s;
}
.on-growth-tip {
  fill: #5ac8fa;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 2.2s;
}
.on-growth.in .on-growth-dot,
.on-growth.in .on-growth-tip {
  opacity: 1;
}
.on-growth.in .on-growth-tip {
  animation: onTipPulse 2.8s ease-in-out 2.5s infinite;
}
@keyframes onTipPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(90, 200, 250, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 13px rgba(90, 200, 250, 1));
  }
}
.on-growth-tag {
  position: absolute;
  bottom: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--n-86868b);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
}
.on-growth.in .on-growth-tag {
  opacity: 1;
}
.on-growth-tag--start {
  left: 29.2%;
  transform: translateX(-50%);
  transition-delay: 1.05s;
}
.on-growth-tag--end {
  right: 0;
  font-weight: 600;
  color: var(--n-f5f5f7);
  transition-delay: 2.35s;
}
.on-facts {
  margin-top: 2.6rem;
  display: grid;
  gap: 1.6rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .on-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .on-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.on-fact {
  padding-top: 1.3rem;
  border-top: 1px solid var(--hair);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
  transition-delay: calc(1.5s + var(--i) * 140ms);
}
.on-growth.in .on-fact {
  opacity: 1;
  transform: none;
}
.on-fact-ic {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--hair);
  background: rgb(var(--wash) / calc(0.03 * var(--wash-k)));
  color: #5ac8fa;
}
.on-fact-t {
  margin-top: 0.95rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--n-f5f5f7);
}
.on-fact-d {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--n-86868b);
}

/* ── Liczby ── */
.on-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: 26px;
  overflow: hidden;
}
@media (min-width: 900px) {
  .on-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.on-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 2rem 1.3rem;
  text-align: center;
  background: var(--n-0a0a0d);
}
.on-stat-n {
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background-image: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.on-stat-n--logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
  background-image: none;
  -webkit-text-fill-color: var(--n-f5f5f7);
  color: var(--n-f5f5f7);
}
.on-stat-suf {
  font-size: 0.68em;
}
.on-stat-l {
  max-width: 20ch;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--n-86868b);
}

/* ── Obawy klienta, rozbrojone po kolei ──
   Układ rozmowy: zdanie klienta po prawej, nasza odpowiedź po lewej.
   Między nimi przez chwilę pulsują trzy kropki „pisania" - stoją
   absolutnie nad odpowiedzią, która ma już swoje miejsce w układzie,
   więc nic nie przeskakuje, kiedy kropki znikają.                          */
.on-conv {
  display: grid;
  gap: 3rem;
}
@media (min-width: 768px) {
  .on-conv {
    gap: 3.75rem;
  }
}
.on-obj-ask {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.on-obj-ask .cap {
  margin-right: 0.35rem;
  margin-bottom: 0.6rem;
}
.on-obj-say {
  max-width: min(100%, 30rem);
  padding: 0.95rem 1.25rem;
  border-radius: 20px 20px 6px 20px;
  background: rgb(var(--wash) / calc(0.055 * var(--wash-k)));
  border: 1px solid rgb(var(--wash) / calc(0.07 * var(--wash-k)));
  font-size: 1rem;
  line-height: 1.5;
  color: var(--n-c9c9cf);
}
.on-obj-say::before {
  content: "„";
}
.on-obj-say::after {
  content: "”";
}
.on-obj-reply {
  position: relative;
  margin-top: 1.15rem;
}
.on-obj-typing {
  position: absolute;
  left: 0;
  top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.75rem 0.95rem;
  border-radius: 16px 16px 16px 6px;
  background: rgba(var(--blue-rgb), 0.12);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  opacity: 0;
}
.on-obj.in .on-obj-typing {
  animation: onTypingIn 1.55s var(--ease) 0.4s both;
}
@keyframes onTypingIn {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  14% {
    opacity: 1;
    transform: none;
  }
  80% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-5px);
  }
}
.on-obj-typing i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #5ac8fa;
  animation: onTypingDot 1.05s ease-in-out infinite;
}
.on-obj-typing i:nth-child(2) {
  animation-delay: 0.16s;
}
.on-obj-typing i:nth-child(3) {
  animation-delay: 0.32s;
}
@keyframes onTypingDot {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.on-obj-body {
  max-width: min(100%, 36rem);
  padding: 1.45rem 1.5rem 1.5rem;
  border-radius: 6px 22px 22px 22px;
  opacity: 0;
  transform: translateY(11px);
  transition:
    opacity 0.85s var(--ease) 1.8s,
    transform 0.85s var(--ease) 1.8s;
}
.on-obj.in .on-obj-body {
  opacity: 1;
  transform: none;
}
.on-obj-who {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5ac8fa;
}
.on-obj-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-image: var(--grad-blue);
  box-shadow: 0 0 8px rgba(var(--blue-rgb), 0.9);
}
.on-obj-t {
  margin-top: 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--n-f5f5f7);
}
.on-obj-d {
  margin-top: 0.7rem;
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--n-c9c9cf);
}
.on-obj-proof {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--n-86868b);
}
.on-obj-proof b {
  flex: none;
  font-weight: 600;
  color: #5ac8fa;
}

@media (prefers-reduced-motion: reduce) {
  .on-q,
  .on-q::before,
  .on-q-end,
  .on-fact,
  .on-obj-body,
  .on-growth-area,
  .on-growth-dot,
  .on-growth-tip,
  .on-growth-tag {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .on-qs-list::before {
    transform: scaleY(1);
    transition: none;
  }
  .on-growth-line {
    stroke-dashoffset: 0;
    transition: none;
  }
  .on-growth.in .on-growth-tip {
    animation: none;
  }
  /* Kropki „pisania" nie mają sensu bez ruchu - odpowiedź i tak jest
     od razu widoczna, a migający element tylko by rozpraszał. */
  .on-obj-typing,
  .on-obj.in .on-obj-typing {
    display: none;
  }
}

/* ══════════════════════════ Podstrona „Branding" ══════════════════════════
   Wszystkie klasy zaczynają się od .br-, żeby nie kolidowały z resztą
   serwisu. Dwa mechanizmy sterują tą stroną:

   1. Kierunek kreatywny - atrybut [data-k] na .br-live przestawia komplet
      zmiennych marki (kolory, krój, światło międzyliterowe, promień rogów).
      Makieta jest jedna; przełącznik nie podmienia żadnego HTML-a, tylko
      literę w atrybucie. Dzięki temu dołożenie czwartego kierunku to jeden
      blok zmiennych, a nie kopia sześciu makiet.

   2. Rozdział księgi znaku - klasa .is-on na .br-karta. Bez JS-a widać
      pierwszy rozdział, co wystarcza, żeby sekcja miała sens.              */

/* ── Hero: znak budowany na siatce konstrukcyjnej ──
   Rysowanie liniami: każda ścieżka ma pathLength="1", więc dasharray i
   dashoffset można podać ułamkiem, nie licząc rzeczywistej długości.
   Animacja stoi zatrzymana do chwili, gdy obserwator z main.js doda .in
   rodzicowi z data-r - inaczej odtworzyłaby się poza ekranem.             */
.br-kons {
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(245, 245, 247, 0.09);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(245, 245, 247, 0.05), transparent 70%),
    linear-gradient(180deg, #131318 0%, #0b0b0e 100%);
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.75rem 1.25rem 1.25rem;
  overflow: hidden;
}
.br-kons-svg {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  height: auto;
}
.br-kons-siatka path {
  stroke: rgb(var(--wash) / calc(0.07 * var(--line-k)));
  stroke-width: 1;
}
.br-kons-prow circle,
.br-kons-prow path {
  fill: none;
  stroke: rgb(var(--wash) / calc(0.26 * var(--line-k)));
  stroke-width: 1;
  stroke-dasharray: 0.006 0.01;
}
/* Znak wchodzi spokojnie - lekkie powiększenie i pojawienie się, bez kreślenia
   po linii. Skalowanie dostaje osobna, zewnętrzna grupa: wewnętrzna niesie
   własny transform w atrybucie, a transform z CSS-a by go nadpisał i znak
   wylądowałby w narożniku rysunku. */
.br-kons-znak {
  transform-box: fill-box;
  transform-origin: center;
}
/* Wersja podstawowa znaku jest kreską, nie bryłą - gradient idzie więc na
   obrys, a wypełnienia nie ruszamy (zostaje „none" z atrybutu). */
.br-kons-znak g,
.br-kons-znak path {
  stroke: url(#br-akc);
}
.br-kons-opis path {
  stroke: rgb(var(--wash) / calc(0.3 * var(--line-k)));
  stroke-width: 1;
  fill: none;
}
.br-kons-opis text {
  fill: var(--n-5e5e63);
  font-size: 9px;
  font-family: var(--sans);
  letter-spacing: 0.08em;
}
[data-r] .br-kons-prow circle,
[data-r] .br-kons-prow path,
[data-r] .br-kons-znak,
[data-r] .br-kons-opis {
  opacity: 0;
}
[data-r].in .br-kons-prow circle,
[data-r].in .br-kons-prow path {
  animation: br-pojaw 0.7s var(--ease) forwards;
}
[data-r].in .br-kons-prow circle:nth-child(2) {
  animation-delay: 0.12s;
}
[data-r].in .br-kons-prow path {
  animation-delay: 0.24s;
}
[data-r].in .br-kons-znak {
  animation: br-znak-wejscie 0.9s var(--ease) 0.35s forwards;
}
[data-r].in .br-kons-opis {
  animation: br-pojaw 0.8s var(--ease) 1s forwards;
}
@keyframes br-znak-wejscie {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes br-pojaw {
  to {
    opacity: 1;
  }
}
.br-kons-legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin-top: 0.75rem;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}
.br-kons-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.br-kons-legenda i {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--wash) / calc(0.16 * var(--wash-k)));
}
.br-kons-legenda i.p {
  background: rgb(var(--wash) / calc(0.4 * var(--wash-k)));
}
.br-kons-legenda i.z {
  background: var(--grad-blue-text);
}
.br-kons-idea {

  margin: 0.85rem auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--n-86868b);
}
.br-kons-idea b {
  font-weight: 600;
  color: var(--n-f5f5f7);
}

/* ── Kierunki kreatywne: komplet zmiennych na jeden atrybut ──
   --b-bg/--b-bg2 to powierzchnie, --b-ink tekst, --b-acc kolor wiodący,
   --b-na-acc tekst leżący NA kolorze wiodącym (inaczej limonka pod białym
   napisem byłaby nieczytelna), --b-track światło międzyliterowe znaku
   słownego - i to ono, bardziej niż kolor, buduje różnicę charakteru.      */
.br-live {
  --b-bg: #f3ede4;
  --b-bg2: #e7ded0;
  --b-ink: #2a2018;
  --b-acc: #b4623a;
  --b-na-acc: #f3ede4;
  --b-mut: #8c9a72;
  --b-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --b-track: 0.06em;
  --b-weight: 600;
  --b-radius: 5px;
}
.br-live[data-k="b"] {
  --b-bg: #0f1115;
  --b-bg2: #171a21;
  --b-ink: #f2f4f7;
  --b-acc: #c6ff3d;
  --b-na-acc: #0f1115;
  --b-mut: #5b6474;
  --b-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --b-track: 0.24em;
  --b-weight: 700;
  --b-radius: 2px;
}
.br-live[data-k="c"] {
  --b-bg: #ffffff;
  --b-bg2: #f2f2f2;
  --b-ink: #111111;
  --b-acc: #111111;
  --b-na-acc: #ffffff;
  --b-mut: #b8b8b8;
  --b-font: var(--sans);
  --b-track: 0.42em;
  --b-weight: 300;
  --b-radius: 0px;
}

.br-switch {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.br-switch-b {
  position: relative;
  display: grid;
  gap: 0.3rem;
  text-align: left;
  padding: 1rem 1.15rem 1.1rem;
  border-radius: 18px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: rgb(var(--wash) / calc(0.03 * var(--wash-k)));
  transition:
    border-color 0.45s var(--ease),
    background-color 0.45s var(--ease),
    transform 0.45s var(--ease);
}
.br-switch-b:hover {
  border-color: rgba(var(--blue-rgb), 0.4);
  background: rgba(var(--blue-rgb), 0.07);
}
.br-switch-b.is-on {
  border-color: rgba(var(--blue-rgb), 0.55);
  background: rgba(var(--blue-rgb), 0.12);
}
.br-switch-b:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.9);
  outline-offset: 3px;
}
.br-switch-n {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
}
.br-switch-d {
  font-size: 0.8125rem;
  color: var(--n-86868b);
}
.br-switch-p {
  display: flex;
  gap: 5px;
  margin-top: 0.45rem;
}
.br-switch-p i {
  width: 22px;
  height: 6px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / calc(0.35 * var(--shadow-k)));
}

/* ── Makiety ── */
/* Sztywne trzy kolumny, nie auto-fit: sześć kafli ma stanąć w dwóch równych
   rzędach. Przy auto-fit szerokie okno mieściło cztery i drugi rząd zostawał
   z dziurą po prawej. */
.br-mk {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.4rem;
}
.br-tile {
  margin: 0;
  padding: 0.7rem;
  border-radius: 22px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-17171c) 0%, var(--n-0d0d10) 100%);
}
.br-tile > div {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 15px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--b-bg2);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.07);
  transition: background-color 0.55s var(--ease);
  /* Kontener zapytań: wszystkie napisy w makietach liczą się od szerokości
     kafla (jednostka cqw), nie od rozmiaru bazowego strony. Na telefonie
     kafel jest szerszy niż na desktopie, więc przy stałych rem-ach napisy
     robiły się nieproporcjonalnie małe, a kolumna tekstu na rewersie
     wizytówki - za ciasna, przez co numer telefonu się łamał. */
  container-type: inline-size;
}
.br-tile figcaption {
  padding: 0.6rem 0.35rem 0.1rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--n-5e5e63);
}

/* Znak: wszystkie trzy warianty siedzą w HTML-u, widać ten od kierunku. */
.br-znak {
  display: block;
  width: 7.4cqw;
  color: var(--b-acc);
  transition: color 0.55s var(--ease);
}
.br-znak-lg {
  width: 10.8cqw;
}
.br-z {
  display: none;
  width: 100%;
  height: auto;
}
.br-live[data-k="a"] .br-z-a,
.br-live[data-k="b"] .br-z-b,
.br-live[data-k="c"] .br-z-c {
  display: block;
}
.br-word {
  font-family: var(--b-font);
  font-weight: var(--b-weight);
  letter-spacing: var(--b-track);
  text-indent: var(--b-track);
  color: var(--b-ink);
  font-size: 0.9rem;
  line-height: 1;
  transition:
    color 0.55s var(--ease),
    letter-spacing 0.55s var(--ease);
}
.br-word-sub {
  font-family: var(--b-font);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-mut);
  transition: color 0.55s var(--ease);
}

/* Wizytówka - dwie strony leżące jedna na drugiej. */
.br-wiz-f,
.br-wiz-b {
  position: absolute;
  width: 63%;
  aspect-ratio: 85 / 55;
  border-radius: var(--b-radius);
  transition:
    background-color 0.55s var(--ease),
    border-radius 0.55s var(--ease);
}
.br-wiz-f {
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.3rem;
  overflow: hidden;
  background: var(--b-bg);
  left: 4%;
  top: 12%;
  transform: rotate(-4deg);
  box-shadow:
    0 16px 26px -12px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(140, 140, 150, 0.22);
}
/* Rewers leży pod awersem, więc treść trzyma się prawej krawędzi - lewa
   połowa i tak jest zasłonięta. Bez tego dane kontaktowe wychodziły spod
   spodu i wyglądały jak błąd składu. */
.br-wiz-b {
  display: grid;
  align-content: center;
  justify-items: end;
  gap: 0.18rem;
  /* UWAGA: procenty w padding liczą się od szerokości SCENKI, nie karty.
     Awers zajmuje 4-67% scenki, rewers 30-93%, więc tekst musi zaczynać się
     za 67% scenki - czyli 39% od lewej krawędzi rewersu. Przy 46% zostawało
     35 px na kolumnę i tekst wychodził pod awers. */
  padding: 0 3% 0 39%;
  overflow: hidden;
  text-align: right;
  background: var(--b-bg);
  filter: brightness(0.94);
  left: 30%;
  top: 30%;
  transform: rotate(3deg);
  box-shadow:
    0 16px 26px -14px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(140, 140, 150, 0.18);
}
.br-wiz-imie {
  font-family: var(--b-font);
  font-size: 2.7cqw;
  font-weight: 600;
  color: var(--b-ink);
}
.br-wiz-rola,
.br-wiz-kontakt {
  font-family: var(--b-font);
  font-size: 2cqw;
  line-height: 1.5;
  color: var(--b-mut);
}
.br-wiz-linia {
  width: 26px;
  height: 2px;
  margin: 0.2rem 0;
  background: var(--b-acc);
  transition: background-color 0.55s var(--ease);
}

/* Szyld - tablica w kolorze wiodącym nad witryną. */
.br-szyld {
  align-content: center;
  gap: 0.5rem;
  padding: 1.2rem;
}
.br-szyld-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 78%;
  margin: 0 auto;
  padding: 0.7rem 0.5rem;
  border-radius: var(--b-radius);
  background: var(--b-acc);
  box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.6);
  transition: background-color 0.55s var(--ease);
}
.br-szyld-board .br-znak {
  width: 18px;
  color: var(--b-na-acc);
}
.br-szyld-board .br-word {
  color: var(--b-na-acc);
  font-size: 0.8rem;
}
/* Wysokość z proporcji, nie w procentach: rodzic jest gridem o wierszach
   dobieranych do treści, więc height:% nie miało się do czego odnieść
   i witryna schodziła do zera. */
.br-szyld-okno {
  display: flex;
  gap: 0.4rem;
  width: 78%;
  aspect-ratio: 4 / 1;
  margin: 0 auto;
}
/* Witryna pod szyldem: kolor tekstu z przezroczystością, bo musi być widoczna
   i na jasnym, i na ciemnym kierunku - stała szarość działałaby tylko w jednym. */
.br-szyld-okno i {
  flex: 1;
  border-radius: var(--b-radius);
  background: var(--b-ink);
  opacity: 0.16;
  transition: background-color 0.55s var(--ease);
}

/* Opakowanie - papierowa torba z uchwytem. */
.br-torba {
  padding: 1.1rem;
}
.br-torba-uchwyt {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 26%;
  height: 12%;
  transform: translateX(-50%);
  border: 2px solid var(--b-mut);
  border-bottom: 0;
  border-radius: 99px 99px 0 0;
  transition: border-color 0.55s var(--ease);
}
.br-torba-body {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.4rem;
  width: 58%;
  height: 62%;
  margin-top: 12%;
  border-radius: var(--b-radius);
  background: var(--b-bg);
  box-shadow:
    0 18px 30px -14px rgba(0, 0, 0, 0.6),
    inset -14px 0 18px -14px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(140, 140, 150, 0.2);
  transition: background-color 0.55s var(--ease);
}

/* Ikona aplikacji, awatar i favicon - znak w trzech wielkościach. */
.br-ikony {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}
.br-ikona,
.br-awatar,
.br-fav {
  display: grid;
  place-items: center;
  transition:
    background-color 0.55s var(--ease),
    border-radius 0.55s var(--ease);
}
.br-ikona {
  width: 33%;
  aspect-ratio: 1;
  border-radius: 24%;
  background: var(--b-acc);
  box-shadow: 0 14px 24px -12px rgba(0, 0, 0, 0.65);
}
.br-ikona .br-znak {
  width: 52%;
  color: var(--b-na-acc);
}
.br-awatar {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 99px;
  background: var(--b-ink);
}
.br-awatar .br-znak {
  width: 52%;
  color: var(--b-bg);
}
.br-fav {
  width: 13%;
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--b-bg);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.br-fav .br-znak {
  width: 62%;
}

/* Paleta - kafel trzyma się tej samej zasady co pozostałe: powierzchnia w
   kolorze marki, treść w typografii marki. Wartość HEX stoi POD próbką, a nie
   na niej: podpis wrzucony na kolor wymaga plakietki pod spodem, żeby był
   czytelny na jasnym i ciemnym odcieniu - i to właśnie ta plakietka wybijała
   kafel z rytmu całego rzędu.
   display:block zamiast odziedziczonego gridu, bo dopiero wtedy próbki mają
   od czego liczyć wysokość. */
/* Kafel zostaje gridem jak pozostałe - tylko zamiast centrowania rozciąga
   zawartość. Wcześniej stało tu display:block i przez to aspect-ratio
   przestawało trzymać wysokość: pudełko rosło od treści, robiło się o 28 px
   wyższe od sąsiadów i wypychało podpis poza kartę. min-height: 0 pozwala
   próbkom zjechać poniżej swojej treści, więc nic nie rozpycha kafla. */
/* Uwaga na strukturę: .br-palety JEST scenką kafla (to bezpośrednie dziecko
   .br-tile), a nie owijką w środku. Miała tu wcześniej height:100% - procent
   nie miał się do czego odnieść, wysokość spadała na treść i kafel rósł
   o 28 px nad sąsiadów, wypychając podpis poza kartę.

   Teraz scenka rozciąga zawartość (place-items: stretch), więc widoczna
   paleta dostaje wysokość z wiersza gridu - a ten wynika z aspect-ratio.
   Żadnych procentów w środku. */
.br-tile-kolor > div {
  place-items: stretch;
  padding: 1.1rem 0.9rem;
}
.br-paleta {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  min-height: 0;
}
.br-live[data-k="a"] .br-paleta[data-paleta="a"],
.br-live[data-k="b"] .br-paleta[data-paleta="b"],
.br-live[data-k="c"] .br-paleta[data-paleta="c"] {
  display: grid;
}
.br-swatch {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0.45rem;
  min-width: 0;
}
.br-swatch i {
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(128, 128, 140, 0.28);
}
.br-swatch b {
  font-family: var(--b-font);
  font-size: 0.4375rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--b-ink);
  opacity: 0.62;
  transition: color 0.55s var(--ease);
}

/* Typografia - wielkie „Aa" w kroju kierunku plus krótki wykaz znaków. */
.br-typo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--b-bg) !important;
}
.br-typo-aa {
  font-family: var(--b-font);
  font-weight: var(--b-weight);
  font-size: clamp(2.4rem, 7vw, 3.4rem);
  line-height: 0.9;
  color: var(--b-ink);
  transition: color 0.55s var(--ease);
}
.br-typo-info {
  display: grid;
  gap: 0.35rem;
}
.br-typo-n {
  display: none;
  font-family: var(--b-font);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b-acc);
}
.br-live[data-k="a"] .br-typo-n[data-typo="a"],
.br-live[data-k="b"] .br-typo-n[data-typo="b"],
.br-live[data-k="c"] .br-typo-n[data-typo="c"] {
  display: block;
}
.br-typo-spec {
  font-family: var(--b-font);
  font-size: 0.5rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--b-mut);
}

/* ── Księga znaku ──
   Karta rozdziału udaje kartkę: jasne tło w ciemnym serwisie czyta się
   jak wydruk, a o to w tej sekcji chodzi.                                  */
.br-book {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}
.br-book-nav {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.br-book-b {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1.1rem;
  border-radius: 15px;
  border: 1px solid transparent;
  font-size: 1rem;
  color: var(--n-86868b);
  transition:
    color 0.4s var(--ease),
    background-color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
.br-book-b:hover {
  color: var(--n-f5f5f7);
  background: rgb(var(--wash) / calc(0.04 * var(--wash-k)));
}
.br-book-b.is-on {
  color: var(--n-f5f5f7);
  background: rgba(var(--blue-rgb), 0.12);
  border-color: rgba(var(--blue-rgb), 0.45);
}
.br-book-b:focus-visible {
  outline: 2px solid rgba(var(--blue-rgb), 0.9);
  outline-offset: 3px;
}
.br-book-n {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--n-5e5e63);
  transition: color 0.4s var(--ease);
}
.br-book-b.is-on .br-book-n {
  background: var(--grad-blue-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.br-book-scena {
  position: relative;
  border-radius: 24px;
  padding: 0.75rem;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-17171c) 0%, var(--n-0d0d10) 100%);
}
.br-karta {
  display: none;
  background: #f7f7f5;
  border-radius: 17px;
  padding: 1.4rem 1.5rem 1.5rem;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9);
}
.br-karta.is-on {
  display: block;
  animation: br-karta-wejscie 0.5s var(--ease) both;
}
@keyframes br-karta-wejscie {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.br-karta-t {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #8a8a86;
}
.br-karta-w {
  margin: 0.9rem 0 1.1rem;
  min-height: 168px;
  display: grid;
  place-items: center;
}
.br-karta-w svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}
.br-karta-d {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #55554f;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  padding-top: 0.9rem;
}
.br-k-siatka path {
  stroke: rgba(17, 17, 17, 0.12);
  stroke-width: 1;
  fill: none;
}
.br-k-prow {
  fill: none;
  stroke: rgba(17, 17, 17, 0.28);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
/* Znak w księdze to ta sama grupa ścieżek co w makietach - wystarczy podać
   kolor, bo pierścień rysuje się currentColor-em, a bryły wypełnieniem. */
.br-k-znak {
  fill: #111;
  color: #111;
}
.br-k-mia path {
  stroke: rgba(17, 17, 17, 0.45);
  stroke-width: 1;
  fill: none;
}
.br-k-mia text {
  fill: #55554f;
  font-size: 9px;
  font-family: var(--sans);
  letter-spacing: 0.08em;
}
.br-k-pole {
  fill: none;
  stroke: #d64545;
  stroke-width: 1;
  stroke-dasharray: 4 3;
}
.br-k-pole2 {
  fill: rgba(17, 17, 17, 0.04);
  stroke: rgba(17, 17, 17, 0.18);
  stroke-width: 1;
}
.br-k-wersje {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  width: 100%;
  display: grid !important;
}
.br-k-w {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  padding: 0.8rem 0.5rem 0.6rem;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.09);
  color: #111;
}
.br-k-w.is-inv {
  background: #111;
  color: #f7f7f5;
}
.br-k-w svg {
  width: 100%;
  max-width: 118px;
  color: currentColor;
}
.br-k-w svg text {
  fill: currentColor;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.br-k-w i {
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a8a86;
}
.br-k-w.is-inv i {
  color: #a5a5a0;
}
.br-k-kolory {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  width: 100%;
}
/* Pasek koloru rysowany tłem, nie obramowaniem: obramowanie leży POZA
   padding-boxem, więc włosowa ramka chipa go nie obejmowała i próbka bieli
   znikała na jasnej kartce. Jako tło mieści się w środku i ramka domyka ją
   z każdej strony. */
.br-k-kolor {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.8rem 0.7rem 2.3rem;
  border-radius: 10px;
  background-color: #fff;
  /* Druga warstwa to włosowa kreska na prawej krawędzi paska - bez niej
     biała próbka zlewa się z białym chipem i nie widać, gdzie się kończy. */
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.12), rgba(17, 17, 17, 0.12)),
    linear-gradient(var(--c), var(--c));
  background-size:
    1px 100%,
    22px 100%;
  background-position:
    22px 0,
    0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.09);
}
.br-k-kolor b {
  font-size: 0.8125rem;
  color: #111;
}
.br-k-kolor i {
  font-style: normal;
  font-size: 0.5625rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #8a8a86;
}
.br-k-typo {
  display: grid !important;
  gap: 0.55rem;
  width: 100%;
  color: #111;
}
.br-k-typo span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  padding-bottom: 0.5rem;
}
.br-k-typo i {
  font-style: normal;
  font-size: 0.5625rem;
  letter-spacing: 0.08em;
  color: #8a8a86;
  white-space: nowrap;
}
.br-k-t1 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.br-k-t2 {
  font-size: 1.05rem;
  font-weight: 500;
}
.br-k-t3 {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #3d3d39;
}
.br-k-t4 {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
}
.br-k-nie {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  width: 100%;
}
.br-k-n {
  display: grid;
  gap: 0.45rem;
  justify-items: center;
}
.br-k-nz {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.09);
  color: #111;
  overflow: hidden;
}
.br-k-nz svg {
  width: 54%;
}
.br-k-nz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top right, transparent 47.6%, #d64545 47.6%, #d64545 52.4%, transparent 52.4%);
}
.br-k-nz1 svg {
  transform: scaleX(1.75);
}
.br-k-nz2 svg {
  transform: rotate(-24deg);
}
.br-k-nz3 {
  color: #d43dd6;
}
.br-k-nz4 {
  background: repeating-linear-gradient(45deg, #e6e6e2 0 6px, #fff 6px 12px);
}
.br-k-n i {
  font-style: normal;
  font-size: 0.5625rem;
  line-height: 1.3;
  text-align: center;
  letter-spacing: 0.06em;
  color: #8a8a86;
}

/* ── Proces ── */
.br-proces {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.br-proces li {
  position: relative;
  display: grid;
  gap: 0.55rem;
  align-content: start;
  padding: 1.5rem 1.4rem 1.6rem;
  border-radius: 22px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background: linear-gradient(180deg, var(--n-17171c) 0%, var(--n-0d0d10) 100%);
  transition: border-color 0.45s var(--ease);
}
.br-proces li:hover {
  border-color: rgba(var(--blue-rgb), 0.35);
}
.br-proces-n {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--n-3a3a40);
}
.br-proces-i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgba(var(--blue-rgb), 0.12);
  border: 1px solid rgba(var(--blue-rgb), 0.3);
  color: #5ac8fa;
  margin-bottom: 0.25rem;
}
.br-proces-i svg {
  width: 18px;
  height: 18px;
}
.br-proces-t {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--n-f5f5f7);
}
.br-proces-d {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--n-86868b);
}

/* ── Zawężenia ── */
@media (max-width: 900px) {
  .br-book {
    grid-template-columns: 1fr;
  }
  .br-book-nav {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .br-book-b {
    padding: 0.75rem 0.85rem;
    font-size: 0.875rem;
  }
}
@media (max-width: 1000px) {
  .br-mk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .br-mk {
    grid-template-columns: minmax(0, 1fr);
  }
  .br-kons {
    padding: 1.25rem 0.75rem 1rem;
  }
  .br-karta {
    padding: 1.1rem 1rem 1.2rem;
  }
  .br-k-nie {
    grid-template-columns: repeat(2, 1fr);
  }
  .br-k-wersje,
  .br-k-kolory {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-r] .br-kons-prow circle,
  [data-r] .br-kons-prow path,
  [data-r] .br-kons-znak,
  [data-r] .br-kons-opis {
    opacity: 1;
  }
  .br-karta.is-on {
    animation: none;
  }
  [data-r].in .br-kons-znak {
    animation: none;
  }
}

/* ── Logotyp: podstawowa postać znaku ──
   Napis jest tu znakiem, więc krój, waga i światło międzyliterowe biorą się
   z tych samych zmiennych co reszta kierunku - przełącznik zmienia logo
   dokładnie tak, jak zmienia kolory. */
.br-logo {
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  color: var(--b-ink);
  transition: color 0.55s var(--ease);
}
.br-logo-nazwa {
  font-family: var(--b-font);
  font-weight: var(--b-weight);
  letter-spacing: var(--b-track);
  text-indent: var(--b-track);
  font-size: 4.3cqw;
  line-height: 1;
  transition: letter-spacing 0.55s var(--ease);
}
.br-logo-pod {
  font-family: var(--b-font);
  font-size: 2cqw;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  color: var(--b-mut);
  transition: color 0.55s var(--ease);
}
.br-logo-szyld .br-logo-nazwa {
  color: var(--b-na-acc);
  font-size: 3.8cqw;
}
.br-logo-szyld {
  color: var(--b-na-acc);
}

/* ── Arkusz w hero: szkic ołówkiem obok gotowego znaku ── */
.br-ark-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  border: 1px solid rgb(var(--wash) / calc(0.09 * var(--wash-k)));
  background:
    radial-gradient(120% 120% at 50% 0%, rgb(var(--wash) / calc(0.05 * var(--wash-k))), transparent 70%),
    linear-gradient(180deg, var(--n-131318) 0%, var(--n-0b0b0e) 100%);
}
/* Kartka: ciepła biel z lekkim cieniem pod krawędzią - papier, nie pole. */
.br-ark-papier {
  fill: #efebe3;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.br-ark-konstr path {
  fill: none;
  stroke: rgba(30, 28, 24, 0.22);
  stroke-width: 0.8;
  stroke-dasharray: 4 4;
}
.br-ark-linia path {
  fill: none;
  stroke: #4a4740;
  stroke-width: 3.4;
  stroke-linecap: round;
  opacity: 0.62;
}
.br-ark-lekka path {
  fill: none;
  stroke: #4a4740;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.3;
}
.br-ark-wym path {
  fill: none;
  stroke: rgba(30, 28, 24, 0.55);
  stroke-width: 1.1;
}
.br-ark-wym text {
  fill: #6b675e;
  font-size: 10px;
  font-family: var(--sans);
  letter-spacing: 0.07em;
}
.br-ark-etykieta {
  fill: var(--n-5e5e63);
  font-size: 9px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.18em;
}
.br-ark-strzalka {
  fill: none;
  stroke: rgb(var(--wash) / calc(0.28 * var(--line-k)));
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.br-ark-znak {
  fill: var(--n-f5f5f7);
}
.br-ark-nazwa {
  fill: var(--n-f5f5f7);
  font-size: 17px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 5.8px;
}
.br-ark-pod {
  fill: var(--n-86868b);
  font-size: 7.5px;
  font-family: var(--sans);
  letter-spacing: 2.2px;
}
}