:root {
  --fmn-ink: #1a1d21;
  --fmn-coal: #14171c;
  --fmn-coal-lift: #232830;
  --fmn-slate: #5a6a78;
  --fmn-haze: #edf2f6;
  --fmn-paper: #ffffff;
  --fmn-line: #d5dee6;
  --fmn-volt: #1f66e0;
  --fmn-volt-press: #1852b8;
  --fmn-volt-ink: #1a56c4;
  --fmn-ink-on-dark: #e8edf3;
  --fmn-slate-on-dark: #a3b2c0;
  --fmn-line-on-dark: #333b46;
  --fmn-link-on-dark: #8ab8ff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Heebo', sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--fmn-ink);
  background: var(--fmn-paper);
}
h1, h2, h3, h4 {
  font-family: 'Tomorrow', sans-serif;
  line-height: 1.18;
  margin: 0 0 0.55em;
  letter-spacing: 0.005em;
}
h1 { font-size: clamp(1.9rem, 4.2vw, 3.05rem); font-weight: 700; }
h2 { font-size: clamp(1.45rem, 2.8vw, 2.1rem); font-weight: 600; }
h3 { font-size: 1.13rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--fmn-volt-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--fmn-volt); outline-offset: 2px; }

.airspan { width: min(1150px, 100% - 44px); margin-inline: auto; }

.draftskip {
  position: absolute; left: -999px; top: 8px; z-index: 40;
  background: var(--fmn-volt); color: #fff; padding: 9px 18px; border-radius: 4px;
}
.draftskip:focus { left: 8px; }

.stormside {
  --fmn-ink: var(--fmn-ink-on-dark);
  --fmn-slate: var(--fmn-slate-on-dark);
  --fmn-line: var(--fmn-line-on-dark);
  --fmn-volt-ink: var(--fmn-link-on-dark);
  --fmn-paper: var(--fmn-coal-lift);
  background: var(--fmn-coal);
  color: var(--fmn-ink);
}
.clearside { background: var(--fmn-haze); }

.stormcrest {
  border-bottom: 1px solid var(--fmn-line);
  background: var(--fmn-paper);
}
.stormcrest .airspan {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 13px 0;
}
.stormcrest .brandmark { display: flex; align-items: center; }
.stormcrest .brandmark img { display: block; height: 30px; width: auto; }
.stormcrest nav { margin-left: auto; }
.stormcrest nav ul {
  display: flex; gap: 4px 20px; flex-wrap: wrap;
  margin: 0; padding: 0; list-style: none;
}
.stormcrest nav a {
  color: var(--fmn-ink); text-decoration: none;
  font-weight: 500; font-size: 0.95rem;
}
.stormcrest nav a:hover { color: var(--fmn-volt-ink); }

.windtrail { font-size: 0.83rem; color: var(--fmn-slate); padding: 13px 0 0; }
.windtrail ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.windtrail li + li::before { content: '\203A'; margin-right: 6px; color: var(--fmn-slate); }
.windtrail a { color: var(--fmn-slate); }

.topgust {
  display: block; font-family: 'Tomorrow', sans-serif; font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fmn-volt-ink); margin: 0 0 10px;
}

.surgebtn {
  display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
  line-height: 0;
}
.surgebtn img { border-radius: 6px; display: block; }
.surgebtn:hover img { filter: brightness(1.06); }

.twinjolts { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.twinjolts a {
  display: inline-block; padding: 12px 26px; border-radius: 6px;
  font-family: 'Tomorrow', sans-serif; font-weight: 600; font-size: 0.98rem;
  text-decoration: none;
}
.twinjolts a:first-child { background: var(--fmn-volt); color: #fff; }
.twinjolts a:first-child:hover { background: var(--fmn-volt-press); }
.twinjolts a + a { border: 1.5px solid var(--fmn-line); color: var(--fmn-ink); }
.twinjolts a + a:hover { border-color: var(--fmn-volt); color: var(--fmn-volt-ink); }

/* ---- hero ---- */
.firstbreath { padding: 58px 0 54px; }
.firstbreath .airspan {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 44px; align-items: center;
}
.firstbreath .lead { font-size: 1.09rem; color: var(--fmn-slate); max-width: 34em; }
.firstbreath figure { margin: 0; }
.firstbreath figure img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  background: #fff;
}

.ionstrip { padding: 0; border-bottom: 1px solid var(--fmn-line); }
/* полоса фактов переносится, а не скроллится: горизонтальной прокрутки
   на сайте нет ни на одной ширине (запрет 17.10.2026) */
.ionstrip ul {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0; margin: 0; padding: 0; list-style: none;
}
.ionstrip li {
  padding: 15px 22px; text-align: center;
  font-size: 0.88rem; color: var(--fmn-slate);
  border-left: 1px solid var(--fmn-line);
}
.ionstrip li:first-child { border-left: 0; }
.ionstrip b { display: block; font-family: 'Tomorrow', sans-serif; font-size: 1.05rem; color: var(--fmn-ink); }

main section { padding: 52px 0; }
main .sechead { max-width: 46em; margin-bottom: 26px; }
main .sechead p { color: var(--fmn-slate); margin: 0; }

.roomsplit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.roomsplit a {
  position: relative; display: block; border: 1px solid var(--fmn-line);
  border-radius: 10px; overflow: hidden; text-decoration: none; color: var(--fmn-ink);
  background: var(--fmn-paper); padding: 20px 20px 16px; min-height: 0;
}
.roomsplit a:hover { border-color: var(--fmn-volt); }
.roomsplit .tilepic { display: block; aspect-ratio: 4 / 3; position: relative; margin-bottom: 14px; }
.roomsplit .tilepic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.roomsplit h3 { margin: 0 0 2px; }
.roomsplit .count { font-size: 0.85rem; color: var(--fmn-slate); }

.unitgrid, .shelfwind {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
}
.unitcard {
  display: flex; flex-direction: column; min-height: 0;
  border: 1px solid var(--fmn-line); border-radius: 10px;
  background: var(--fmn-paper); padding: 14px; text-decoration: none; color: var(--fmn-ink);
}
a.unitcard:hover { border-color: var(--fmn-volt); }
.unitcard .unitpic { position: relative; aspect-ratio: 1 / 1; margin-bottom: 12px; }
.unitcard .unitpic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; border-radius: 6px;
}
.unitcard .unitname { font-weight: 600; font-size: 0.96rem; line-height: 1.35; margin: 0 0 6px; }
.packtag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--fmn-coal); color: var(--fmn-ink-on-dark);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 99px;
}
.flickrow { display: flex; align-items: center; gap: 6px; font-size: 0.83rem; color: var(--fmn-slate); }
.flickrow svg { display: block; }

.quietsum { margin-top: auto; padding-top: 10px; }
.quietsum .figure { font-family: 'Tomorrow', sans-serif; font-weight: 700; font-size: 1.22rem; color: inherit; }
.quietsum .aside { font-size: 0.78rem; color: var(--fmn-slate); display: block; margin-top: 2px; }

.threelayers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: layer; }
.threelayers article {
  border: 1px solid var(--fmn-line); border-radius: 10px; padding: 22px;
  background: var(--fmn-paper); counter-increment: layer;
}
.threelayers article::before {
  content: '0' counter(layer);
  font-family: 'Tomorrow', sans-serif; font-weight: 700; font-size: 0.9rem;
  color: var(--fmn-volt-ink); letter-spacing: 0.1em;
}
.threelayers h3 { margin: 8px 0 6px; }
.threelayers p { margin: 0; font-size: 0.93rem; color: var(--fmn-slate); }

.whyrooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.whyrooms article { border-radius: 10px; padding: 22px; background: var(--fmn-paper); border: 1px solid var(--fmn-line); }
.whyrooms h3 { margin-bottom: 6px; }
.whyrooms p { margin: 0; font-size: 0.92rem; color: var(--fmn-slate); }
.whyrooms a { font-size: 0.9rem; display: inline-block; margin-top: 10px; }

.meterband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; text-align: center; }
.meterband b {
  display: block; font-family: 'Tomorrow', sans-serif; font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.3rem); color: inherit;
}
.meterband span { font-size: 0.88rem; color: var(--fmn-slate); }

.voltbench {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 44px; align-items: center;
}
.voltbench figure { margin: 0; }
.voltbench figure img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--fmn-line); border-radius: 10px;
}
.voltbench h2 { margin: 6px 0 12px; }
.voltbench > div > p:last-of-type { color: var(--fmn-slate); }
.voltbench .quietsum { margin: 14px 0 0; padding: 0; }
.voltbench .quietsum .figure { font-size: 1.5rem; }
.benchfoot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.benchfoot a { font-weight: 600; color: var(--fmn-volt-ink); }

.whichroom {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 34px; align-items: center;
  border: 1px solid var(--fmn-line); border-radius: 12px; padding: 34px 38px;
  background: var(--fmn-paper);
}
.whichroom p { color: var(--fmn-slate); margin: 0; }
.whichroom .twinjolts { margin-top: 0; justify-self: end; }

.echowall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.echowall figure {
  margin: 0; border: 1px solid var(--fmn-line); border-radius: 10px;
  padding: 22px; background: var(--fmn-paper);
}
.echowall blockquote { margin: 0 0 12px; font-size: 0.95rem; }
.echowall figcaption { font-size: 0.85rem; color: var(--fmn-slate); }

.airnotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.airnotes a {
  display: block; border: 1px solid var(--fmn-line); border-radius: 10px;
  padding: 22px; text-decoration: none; color: var(--fmn-ink); background: var(--fmn-paper);
}
.airnotes a:hover { border-color: var(--fmn-volt); }
.airnotes h3 { margin-bottom: 6px; }
.airnotes p { margin: 0; font-size: 0.92rem; color: var(--fmn-slate); }

.lastvolt { text-align: center; }
.lastvolt .airspan > p { color: var(--fmn-slate); max-width: 40em; margin-inline: auto; }
.lastvolt .twinjolts { justify-content: center; }

.unitintro {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 44px; align-items: start; padding: 34px 0 10px;
}
.unitintro .heropic { position: relative; }
.unitintro .heropic img {
  display: block; width: 100%; height: auto; background: #fff;
  border: 1px solid var(--fmn-line); border-radius: 10px;
}
.unitintro .quietsum { margin: 18px 0 4px; padding: 0; }
.unitintro .quietsum .figure { font-size: 1.65rem; }

.specchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; }
.specchips li {
  border: 1px solid var(--fmn-line); border-radius: 99px;
  font-size: 0.83rem; color: var(--fmn-slate); padding: 5px 13px;
}

.airfacts { margin: 0; padding: 0; list-style: none; }
.airfacts li { position: relative; padding: 0 0 10px 24px; font-size: 0.97rem; }
.airfacts li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--fmn-volt); transform: rotate(45deg);
}

.setupsteps { margin: 0; padding: 0 0 0 1.3em; }
.setupsteps li { padding: 0 0 10px 6px; }
.setupsteps li::marker { font-family: 'Tomorrow', sans-serif; font-weight: 700; color: var(--fmn-volt-ink); }

.shadeswap { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.shadeswap a {
  display: inline-block; border: 1.5px solid var(--fmn-line); border-radius: 8px;
  padding: 7px 14px; font-size: 0.88rem; text-decoration: none; color: var(--fmn-ink);
}
.shadeswap a:hover, .shadeswap a[aria-current] { border-color: var(--fmn-volt); color: var(--fmn-volt-ink); }

.filtermate { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }

.finalstrike .airspan {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.finalstrike .quietsum { margin: 0; padding: 0; }
.finalstrike h2 { margin: 0 0 4px; font-size: 1.3rem; }

.deskpaper, .lognotes { max-width: 720px; padding: 40px 0 56px; }
.deskpaper h1, .lognotes h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.deskpaper h2, .lognotes h2 { font-size: 1.35rem; margin-top: 1.6em; }
.deskpaper table, .lognotes table { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: 0.94rem; }
.deskpaper th, .lognotes th { text-align: left; border-bottom: 2px solid var(--fmn-ink); padding: 8px 12px 8px 0; }
.deskpaper td, .lognotes td { border-bottom: 1px solid var(--fmn-line); padding: 8px 12px 8px 0; vertical-align: top; }
.deskpaper address { font-style: normal; }
.lognotes .undernote { font-size: 0.85rem; color: var(--fmn-slate); }

.roomtuner fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.roomtuner legend {
  font-family: 'Tomorrow', sans-serif; font-weight: 600; font-size: 1.05rem;
  padding: 0; margin-bottom: 12px;
}
.roomtuner .picks { display: flex; flex-wrap: wrap; gap: 10px; }
.roomtuner .picks button {
  font: inherit; font-size: 0.92rem; cursor: pointer;
  border: 1.5px solid var(--fmn-line); border-radius: 99px;
  background: var(--fmn-paper); color: var(--fmn-ink); padding: 9px 18px;
}
.roomtuner .picks button:hover { border-color: var(--fmn-volt); }
.roomtuner .picks button[aria-pressed="true"] {
  background: var(--fmn-volt); border-color: var(--fmn-volt); color: #fff;
}
.tunerread { margin-top: 10px; }
.tunerread .verdict { color: var(--fmn-slate); margin-bottom: 18px; }

.groundfloor { padding: 46px 0 0; }
.groundfloor .airspan {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: 34px; padding-bottom: 34px;
}
.groundfloor h4 { font-size: 0.88rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
.groundfloor ul { margin: 0; padding: 0; list-style: none; }
.groundfloor li { padding: 0 0 7px; }
.groundfloor a { color: var(--fmn-slate); text-decoration: none; font-size: 0.93rem; }
.groundfloor a:hover { color: var(--fmn-ink); }
.groundfloor p { font-size: 0.93rem; color: var(--fmn-slate); }
.groundfloor address { font-style: normal; font-size: 0.93rem; color: var(--fmn-slate); }
.groundfloor .brandcol img { height: 26px; width: auto; margin-bottom: 12px; }
.quietline {
  border-top: 1px solid var(--fmn-line); padding: 16px 0;
  font-size: 0.82rem; color: var(--fmn-slate);
}
.quietline .airspan { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 920px) {
  .firstbreath .airspan, .unitintro { grid-template-columns: 1fr; gap: 26px; }
  .roomsplit, .threelayers, .airnotes, .echowall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whyrooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meterband { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .whichroom { grid-template-columns: 1fr; }
  .whichroom .twinjolts { justify-self: start; }
  .voltbench { grid-template-columns: 1fr; gap: 26px; }
  .voltbench figure { max-width: 420px; }
  .groundfloor .airspan { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  main section { padding: 38px 0; }
  .roomsplit, .threelayers, .airnotes, .echowall, .whyrooms { grid-template-columns: 1fr; }
  .unitgrid, .shelfwind, .filtermate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .unitcard { padding: 10px; }
  .groundfloor .airspan { grid-template-columns: 1fr; }
  .finalstrike .airspan { flex-direction: column; align-items: flex-start; }
}