/* Spinka — web
   Barvy podle Části 9 zadání. Poplachová červená (--poplach) se používá
   výhradně ve vyobrazení alarmu v sekci Noc, nikde jinde jako dekorace. */

/* Písma hostujeme sami. Stránka o sobě tvrdí, že nikam neposílá data
   uživatelů; načítat přitom fonty z cizí CDN by bylo to samé jako lhát.
   Fraunces je instancovaný na SOFT 100 / WONK 1 (proměnné zůstaly opsz
   a wght), proto je o polovinu menší než plná varianta. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --pulnoc: #0F1522;
  --soumrak: #1B2436;
  --mlecna: #F7F4EE;
  --pisek: #ECE3D3;
  --jantar: #E8A13D;
  --tep: #3DDC97;
  --poplach: #E5484D;

  --ink: var(--pulnoc);
  --ink-soft: #4C5563;
  --ink-line: rgba(15, 21, 34, .14);
  --pale: var(--mlecna);
  --pale-soft: #A3ACBB;
  --pale-line: rgba(247, 244, 238, .14);

  --display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gap: clamp(16px, 2vw, 26px);
  --r-card: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--mlecna);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height: 1.62;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--jantar);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 99;
  background: var(--pulnoc);
  color: var(--mlecna);
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
}
.skip:focus { left: 16px; }

.shell {
  width: min(1180px, 100% - 2 * clamp(20px, 5vw, 48px));
  margin-inline: auto;
}

/* ---------- pruhy ---------- */

.band { padding-block: clamp(64px, 7.4vw, 108px); }
.band--cream { background: var(--mlecna); color: var(--ink); }
.band--sand { background: var(--pisek); color: var(--ink); }
.band--dusk { background: var(--soumrak); color: var(--pale); }
.band--night {
  color: var(--pale);
  background-color: var(--pulnoc);
  /* noční obloha: pár hvězd, nic víc */
  background-image:
    radial-gradient(1.5px 1.5px at 11% 14%, rgba(247, 244, 238, .5), transparent),
    radial-gradient(1.2px 1.2px at 82% 9%, rgba(247, 244, 238, .38), transparent),
    radial-gradient(1.1px 1.1px at 34% 6%, rgba(247, 244, 238, .3), transparent),
    radial-gradient(1.4px 1.4px at 68% 22%, rgba(232, 161, 61, .4), transparent),
    radial-gradient(1.1px 1.1px at 92% 34%, rgba(247, 244, 238, .26), transparent),
    radial-gradient(1.2px 1.2px at 6% 40%, rgba(247, 244, 238, .22), transparent);
}
.band.band--tight { padding-top: 0; }

section[id] { scroll-margin-top: 104px; }

/* ---------- vlna mezi pruhy ---------- */

.wave {
  display: block;
  width: 100%;
  height: clamp(46px, 7vw, 104px);
  background: var(--from);
}
.wave__fill { fill: var(--to); }
.wave__line {
  fill: none;
  stroke: var(--jantar);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- hlavička ---------- */

.topbar {
  position: sticky;
  top: clamp(10px, 1.5vw, 18px);
  z-index: 50;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 22px);
  padding: 7px 8px 7px 24px;
  border-radius: 999px;
  border: 1px solid rgba(15, 21, 34, .08);
  background: rgba(247, 244, 238, .84);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 16px 40px -26px rgba(15, 21, 34, .8);
}

.nav__group { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.nav__group--left { flex: 1; }
.nav__group--right { flex: 1; justify-content: flex-end; }
.nav__links { display: flex; gap: clamp(10px, 1.6vw, 22px); }

.nav a {
  text-decoration: none;
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav__group a:hover { color: var(--ink); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand__badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pulnoc);
  color: var(--jantar);
}
.brand__badge .mark { width: 30px; height: 22px; }
.brand__badge--lg { width: 64px; height: 64px; }
.brand__badge--lg .mark { width: 42px; height: 30px; }
.brand__name {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 24;
  font-size: 1.34rem;
  letter-spacing: -.015em;
  color: var(--ink);
}

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  overflow: hidden;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
}
.lang__on,
.lang__off { padding: 6px 10px; }
.lang__on { background: var(--pulnoc); color: var(--mlecna); }
.nav .lang__off { color: var(--ink-soft); text-decoration: none; }
.nav .lang__off:hover { color: var(--ink); }

.nav .pill--ink { color: var(--mlecna); }
.nav__cta { padding: 11px 18px; font-size: .92rem; }

/* ---------- tlačítka ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 13px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.pill:hover { transform: translateY(-2px); }
.pill--ink { background: var(--pulnoc); color: var(--mlecna); }
.pill--amber { background: var(--jantar); color: var(--pulnoc); }
.pill--ghost { color: var(--ink); border-color: rgba(15, 21, 34, .22); padding-right: 22px; }
.pill--ghost:hover { border-color: var(--ink); }

.pill__arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(247, 244, 238, .16);
  font-size: 1.05rem;
  line-height: 1;
}
.pill--amber .pill__arrow { background: rgba(15, 21, 34, .14); }

/* ---------- popisky ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--ink-line);
  background: rgba(255, 255, 255, .55);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.band--night .eyebrow,
.band--dusk .eyebrow {
  border-color: var(--pale-line);
  background: rgba(247, 244, 238, .05);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.dot--live { background: var(--tep); animation: beat 1s ease-in-out infinite; }
.dot--amber { background: var(--jantar); }

/* ---------- hero ---------- */

.band.hero {
  padding-top: clamp(108px, 12vw, 168px);
  padding-bottom: clamp(40px, 5vw, 72px);
  text-align: center;
}

.hero__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 36;
  font-weight: 600;
  font-size: clamp(2.7rem, 7.4vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  margin: 22px 0 0;
}
.hero__title em { font-style: normal; color: var(--jantar); }

.hero__lede {
  max-width: 58ch;
  margin: 20px auto 0;
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  color: var(--ink-soft);
}

.hero__price {
  display: inline-block;
  margin-top: 26px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px dashed rgba(232, 161, 61, .55);
  background: rgba(232, 161, 61, .1);
  font-size: .92rem;
  font-weight: 500;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.hero__note {
  max-width: 44ch;
  margin: 18px auto 0;
  font-size: .87rem;
  color: var(--ink-soft);
}

/* ---------- dva telefony a vlna mezi nimi ---------- */

.link { margin: clamp(44px, 6vw, 76px) 0 0; }

.link__row {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 1.05fr) 1fr;
  align-items: center;
  gap: clamp(6px, 1.4vw, 20px);
}

.blob {
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 34px);
  border-radius: 52% 48% 44% 56% / 46% 54% 46% 54%;
}
.blob--sand { background: var(--pisek); }
.blob--amber { background: rgba(232, 161, 61, .3); }

.link__wire { position: relative; display: grid; place-items: center; }
.link__wave { width: 100%; height: clamp(70px, 9vw, 118px); }
.link__wave path {
  stroke: var(--jantar);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  animation: flow 7s linear infinite;
}
.link__chip {
  position: absolute;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--mlecna);
  border: 1px solid var(--ink-line);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.link__label {
  position: absolute;
  bottom: -6px;
  font-size: .82rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 22ch;
}
.link__caption {
  margin-top: 22px;
  font-size: .82rem;
  color: var(--ink-soft);
}

/* ---------- maketa telefonu ---------- */

.device {
  width: min(100%, 210px);
  padding: 7px;
  border-radius: 30px;
  background: var(--pulnoc);
  box-shadow: 0 34px 60px -34px rgba(15, 21, 34, .75);
}
.device__screen {
  display: flex;
  flex-direction: column;
  gap: .6em;
  min-height: 16.5em;
  padding: 1.3em 1.15em;
  border-radius: 24px;
  background: linear-gradient(180deg, #182134, #0F1522);
  color: var(--pale);
  text-align: left;
  font-size: clamp(9.5px, 2.4vw, 12px);
  line-height: 1.45;
}
.device__role {
  font-size: .78em;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pale-soft);
}
.device__name {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.75em;
  line-height: 1.1;
}
.device__state {
  display: flex;
  align-items: center;
  gap: .55em;
  font-weight: 600;
  font-size: 1.05em;
}
.device__state--live { color: var(--tep); }
.device__micro,
.device__quiet { font-size: .84em; color: var(--pale-soft); }
.device__quiet { color: var(--jantar); }

.ring {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  border: 2px solid var(--tep);
  animation: ring 1s ease-out infinite;
}

.meter {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 3.6em;
  margin-top: auto;
}
.meter--small { height: 2.4em; }
.meter i {
  flex: 1;
  border-radius: 2px;
  background: var(--jantar);
  transform-origin: bottom;
  animation: breathe 2.6s ease-in-out infinite;
}
.meter i:nth-child(1) { height: 22%; animation-delay: -.1s; }
.meter i:nth-child(2) { height: 38%; animation-delay: -.5s; }
.meter i:nth-child(3) { height: 28%; animation-delay: -.9s; }
.meter i:nth-child(4) { height: 55%; animation-delay: -1.4s; }
.meter i:nth-child(5) { height: 34%; animation-delay: -.3s; }
.meter i:nth-child(6) { height: 70%; animation-delay: -1.8s; }
.meter i:nth-child(7) { height: 44%; animation-delay: -.7s; }
.meter i:nth-child(8) { height: 30%; animation-delay: -2.2s; }
.meter i:nth-child(9) { height: 62%; animation-delay: -1.1s; }
.meter i:nth-child(10) { height: 36%; animation-delay: -.2s; }
.meter i:nth-child(11) { height: 26%; animation-delay: -1.6s; }
.meter i:nth-child(12) { height: 48%; animation-delay: -.8s; }
.meter i:nth-child(13) { height: 33%; animation-delay: -2s; }
.meter i:nth-child(14) { height: 58%; animation-delay: -.4s; }
.meter i:nth-child(15) { height: 27%; animation-delay: -1.3s; }
.meter i:nth-child(16) { height: 40%; animation-delay: -.6s; }

/* ---------- čísla pod hero ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(40px, 5vw, 66px);
  padding-top: 28px;
  border-top: 1px solid var(--ink-line);
}
.stats__value {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "opsz" 28;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.1;
}
.stats__label {
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  color: var(--ink-soft);
}

/* ---------- hlavička sekce ---------- */

.lead { max-width: 66ch; margin-bottom: clamp(34px, 5vw, 58px); }
.lead__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 32;
  font-size: clamp(1.95rem, 4.3vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 16px 0 16px;
}
.lead__body { max-width: 56ch; color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.14rem); }
.band--night .lead__body,
.band--dusk .lead__body { color: var(--pale-soft); }

/* ---------- oblouková karta ---------- */

.arches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.arch {
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  background: var(--pisek);
  padding-bottom: 30px;
}
.arch__top {
  display: grid;
  place-items: center;
  min-height: clamp(132px, 15vw, 178px);
  background: rgba(232, 161, 61, .3);
}
.arch__top svg { width: 48px; height: 48px; stroke: var(--pulnoc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.arch__body { padding: 26px clamp(20px, 2vw, 28px) 0; }
.arch__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.28rem;
  margin-bottom: 10px;
}
.arch p { color: var(--ink-soft); font-size: .97rem; }

/* ---------- kroky ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 42px);
}
.step { position: relative; padding-top: 22px; border-top: 1px solid rgba(15, 21, 34, .2); }
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 38px;
  height: 3px;
  background: var(--jantar);
}
.step__num {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--jantar);
}
.step__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.42rem;
  margin: 8px 0 10px;
}
.step p { color: var(--ink-soft); font-size: .97rem; }

/* ---------- karty v noci ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 20px);
}
.card {
  padding: 26px 24px 28px;
  border-radius: var(--r-card);
  background: var(--soumrak);
  border: 1px solid var(--pale-line);
}
.card__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: rgba(232, 161, 61, .14);
  color: var(--jantar);
}
.card__icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.card__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: 1.22rem;
  margin-bottom: 9px;
}
.card p { color: var(--pale-soft); font-size: .96rem; }

/* ---------- poplach ---------- */

.alarm {
  margin-top: clamp(46px, 6vw, 78px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: 30px;
  border: 1px solid rgba(229, 72, 77, .3);
  background: linear-gradient(180deg, rgba(229, 72, 77, .1), rgba(229, 72, 77, .015));
  text-align: center;
}
.flatline { position: relative; max-width: 720px; margin: 0 auto 22px; }
.flatline svg { display: block; width: 100%; height: clamp(56px, 7vw, 78px); }
.flatline path { stroke: var(--jantar); stroke-width: 2.4; stroke-linecap: round; }
.flatline__dead { stroke: var(--poplach); }
.flatline__chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(229, 72, 77, .45);
  background: var(--pulnoc);
  color: var(--poplach);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
}
.alarm__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 32;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.alarm__body { max-width: 62ch; margin: 16px auto 0; color: var(--pale-soft); }
.alarm__quote {
  max-width: 58ch;
  margin: 26px auto 0;
  padding: 16px 22px;
  border-radius: 18px;
  border: 1px solid var(--pale-line);
  background: rgba(15, 21, 34, .5);
  font-size: .95rem;
}

/* ---------- dvousloupec ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.split__body { font-size: clamp(1rem, 1.25vw, 1.12rem); }
.band--dusk .split__body { color: var(--pale-soft); }
.band--cream .split__body { color: var(--ink-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.chips li {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--pale-line);
  font-size: .88rem;
  color: var(--pale);
}

/* ---------- platformy ---------- */

.platforms {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(26px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(46px, 6vw, 78px);
  padding: clamp(26px, 3.4vw, 44px);
  border-radius: 32px;
  background: var(--pisek);
}
.platforms__title {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  margin-bottom: 12px;
}
.platforms__lead p { color: var(--ink-soft); font-size: .98rem; }
.platforms__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plat {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 20px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  text-align: center;
}
.plat__icon svg { width: 26px; height: 26px; stroke: var(--pulnoc); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plat__icon svg .fill { fill: var(--pulnoc); stroke: none; }
.plat__name { font-weight: 600; font-size: .92rem; }
.plat__note { font-size: .8rem; color: var(--ink-soft); }

/* ---------- cena ---------- */

.price {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: clamp(24px, 3.4vw, 50px);
  align-items: start;
}
.price__card {
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 32px;
  background: var(--pulnoc);
  color: var(--pale);
}
.price__free {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(232, 161, 61, .16);
  color: var(--jantar);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.price__amount {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "opsz" 34;
  font-size: clamp(2.6rem, 5.2vw, 3.9rem);
  line-height: 1;
  margin-top: 20px;
}
.price__amount span {
  display: block;
  margin-top: 8px;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--pale-soft);
}
.price__body { margin-top: 18px; color: var(--pale-soft); font-size: .98rem; }
.price__cta { margin-top: 26px; }
.price__note { margin-top: 16px; font-size: .84rem; color: var(--pale-soft); }

.price__points li {
  padding: 20px 0 20px 34px;
  border-top: 1px solid var(--ink-line);
  position: relative;
  color: var(--ink-soft);
  font-size: .99rem;
}
.price__points li:last-child { border-bottom: 1px solid var(--ink-line); }
.price__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 32px;
  width: 18px;
  height: 2px;
  background: var(--jantar);
}

/* ---------- otázky ---------- */

.faq { max-width: 900px; border-top: 1px solid var(--ink-line); }
.qa { border-bottom: 1px solid var(--ink-line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__q {
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  font-size: clamp(1.05rem, 1.7vw, 1.28rem);
  font-weight: 500;
}
.qa__mark {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(15, 21, 34, .22);
}
.qa__mark::before,
.qa__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, transform .25s ease;
}
.qa__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__mark { background: var(--jantar); border-color: var(--jantar); }
.qa[open] .qa__mark::after { opacity: 0; }
.qa__a { padding: 0 60px 26px 0; max-width: 72ch; color: var(--ink-soft); }

/* ---------- patička ---------- */

.band--night.footer { padding-block: clamp(54px, 7vw, 88px); }
.footer__top {
  display: grid;
  grid-template-columns: 1.1fr .7fr 1.2fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: 38px;
  border-bottom: 1px solid var(--pale-line);
}
.footer .brand__badge { background: transparent; }
.footer__tagline {
  margin-top: 18px;
  font-family: var(--display);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 26;
  font-size: 1.75rem;
}
.footer__navtitle,
.footer__note { color: var(--pale-soft); font-size: .88rem; }
.footer__navtitle { letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.footer__nav ul { display: grid; gap: 9px; }
.footer__nav a { text-decoration: none; font-size: .96rem; }
.footer__nav a:hover { color: var(--jantar); }
.footer__note { max-width: 46ch; }
.footer__contact { margin-top: 16px; }
.footer__contact a { color: var(--jantar); }
.lang--footer { margin-top: 20px; border-color: var(--pale-line); }
.lang--footer .lang__off { color: var(--pale-soft); text-decoration: none; }
.footer__legal { padding-top: 24px; font-size: .84rem; color: var(--pale-soft); }

/* ---------- pohyb (dechový, 400–600 ms nahoru) ---------- */

@keyframes beat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(.72); opacity: .6; }
}
@keyframes ring {
  0% { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes breathe {
  0%, 100% { transform: scaleY(.55); }
  50% { transform: scaleY(1); }
}
@keyframes flow {
  to { stroke-dashoffset: -56; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- responzivita ---------- */

@media (max-width: 1000px) {
  .arches, .steps, .cards { grid-template-columns: repeat(2, 1fr); }
  .split, .platforms, .price { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .nav__group--left { display: none; }
  .brand { margin-right: auto; }
}

@media (max-width: 720px) {
  .arches, .steps, .cards, .platforms__list { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .arch { border-radius: 999px 999px 22px 22px; }
  .link__row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .link__wire { grid-column: 1 / -1; grid-row: 2; min-height: 84px; }
  .link__wave { height: 62px; }
  .link__label { bottom: -2px; max-width: none; }
  .platforms__list { grid-template-columns: repeat(2, 1fr); }
  .qa__a { padding-right: 0; }
  .footer__top { grid-template-columns: 1fr; }
  .nav { padding-left: 14px; }
  .brand__name { display: none; }
  .nav__cta { display: none; }
}