:root {
  --bg: #f4f6f9;
  --sheet: #ffffff;
  --sheet2: #eaeff4;
  --sheet3: #dde5ec;
  --ink: #12161b;
  --ink2: #37424e;
  --muted: #667280;
  --line: #d3dbe3;
  --steel: #5d6b73;
  --steel-d: #3e4a52;
  --navy: #1d3557;
  --navy2: #2b4a78;
  --sky: #cfe0f1;
  --red: #b3261e;
  --red-soft: #f8e7e6;
  --night: #0e1217;
  --night2: #171d24;
  --f-head: 'Oswald', 'Bebas Neue', Impact, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --f-pix: 'Press Start 2P', 'VT323', monospace;
  --f-type: 'Special Elite', 'IBM Plex Mono', monospace;
  --shadow: 0 1px 0 rgba(20, 30, 40, .05), 0 18px 44px -22px rgba(20, 35, 55, .35);
  --shadow-s: 0 8px 22px -14px rgba(20, 35, 55, .4);
  --grain: repeating-linear-gradient(0deg, rgba(20, 35, 55, .022) 0 1px, transparent 1px 3px), radial-gradient(rgba(20, 35, 55, .055) 1px, transparent 1.3px);
  --pad: clamp(56px, 9vw, 120px);
}

html { scroll-behavior: smooth; }
.site-body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.site-body *, .site-body *::before, .site-body *::after { box-sizing: border-box; }
.site-body ::selection { background: var(--navy); color: #fff; }
:where(.site-body a) { color: inherit; text-decoration: none; }
.site-body img { max-width: 100%; height: auto; display: block; }
.site-body :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
main a.link, main p a, main li a.link { color: var(--navy); border-bottom: 1px solid rgba(29, 53, 87, .35); transition: border-color .2s, color .2s; }
main a.link:hover, main p a:hover { color: var(--red); border-color: var(--red); }

.g-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .g-container { padding-inline: 32px; } }

/* ---------- header ---------- */
.g-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.g-topbar { display: none; background: var(--night); color: #c9d3dd; font: 500 12px/1 var(--f-mono); letter-spacing: .02em; }
.g-topbar__in { display: flex; gap: 28px; align-items: center; min-height: 38px; }
.g-topbar__item { display: inline-flex; align-items: center; gap: 8px; color: #c9d3dd; }
.g-topbar__item i { color: #9fb6d1; }
.g-topbar a.g-topbar__item:hover { color: #fff; }
.g-topbar__stamp { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; color: #8fa1b3; }
@media (min-width: 1024px) { .g-topbar { display: block; } }
.g-navbar { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.g-logo img { width: 56px; height: 56px; object-fit: contain; }
.g-nav { display: none; }
.g-nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; font: 500 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.g-nav__list a { display: block; padding: 14px 10px; position: relative; color: var(--ink2); }
.g-nav__list a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 8px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.g-nav__list a:hover { color: var(--ink); }
.g-nav__list a:hover::after { transform: scaleX(1); }
@media (min-width: 1180px) { .g-nav { display: block; } .g-burger { display: none !important; } }
.g-burger { width: 46px; height: 46px; display: inline-grid; place-items: center; border: 1px solid var(--ink); background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; transition: background .2s, color .2s; }
.g-burger[aria-expanded="true"] { background: var(--ink); color: #fff; }
.g-mobile { border-top: 1px solid var(--line); background: #fff; max-height: calc(100vh - 70px); overflow-y: auto; padding: 8px 16px 24px; }
.g-mobile ul { list-style: none; margin: 0; padding: 0; }
.g-mobile__nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px dashed var(--line); font: 500 14px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; }
.g-mobile__contacts { display: grid; gap: 12px; padding: 18px 0 0; font: 400 14px/1.4 var(--f-mono); font-style: normal; color: var(--ink2); }
.g-mobile__contacts .g-topbar__item { color: var(--ink2); align-items: flex-start; }
.g-mobile__contacts i { color: var(--red); margin-top: 3px; }
@media (min-width: 1180px) { .g-mobile { display: none !important; } }

/* ---------- footer ---------- */
.g-footer { background-color: var(--night); background-size: cover; background-position: center; color: #c5cfda; position: relative; }
.g-footer a:hover { color: #fff; }
.g-footer__top { display: grid; gap: 36px; padding-block: 64px 28px; }
.g-footer__logo { display: inline-block; background: #fff; padding: 8px; border-radius: 4px; }
.g-footer__logo img { width: 84px; height: 84px; object-fit: contain; }
.g-footer__brand p { max-width: 42ch; margin: 18px 0; font-size: 15px; color: #aab7c4; }
.g-footer__social { display: flex; gap: 10px; }
.g-footer__social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .25); color: #fff; transition: background .2s, border-color .2s; }
.g-footer__social a:hover { background: var(--red); border-color: var(--red); }
.g-footer__cols { display: grid; gap: 0; }
.g-fold { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.g-fold summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font: 500 13px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.g-fold summary::-webkit-details-marker { display: none; }
.g-fold summary::after { content: '+'; font-size: 20px; color: #8fa8c4; }
.g-fold[open] summary::after { content: '-'; }
.g-fold ul { list-style: none; margin: 0; padding: 0 0 16px; display: grid; gap: 4px; }
.g-fold li a { display: inline-block; padding: 8px 0; font-size: 15px; }
.g-footer__contacts { font-style: normal; display: grid; gap: 4px; padding-bottom: 16px; font-size: 15px; }
.g-footer__contacts > span, .g-footer__contacts > a { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.g-footer__contacts i { color: #8fa8c4; margin-top: 5px; width: 16px; }
.g-footer__legal { padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .14); }
.g-footer__reg { display: grid; gap: 12px 28px; grid-template-columns: repeat(2, 1fr); margin: 0; font-size: 13px; }
.g-footer__reg dt { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: #8fa1b3; margin-bottom: 4px; }
.g-footer__reg dd { margin: 0; color: #e5ebf2; }
.g-footer__bar { border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); }
.g-footer__bar-in { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; padding-block: 18px; font-size: 13px; color: #96a5b5; }
.g-footer__bar p { margin: 0; }
.g-footer__stamp { font: 400 11px/1 var(--f-pix); color: #e07a74; border: 2px solid #e07a74; padding: 8px 10px; transform: rotate(-3deg); text-transform: uppercase; }
@media (min-width: 768px) {
  .g-footer__top { grid-template-columns: 1.1fr 2fr; gap: 56px; }
  .g-footer__cols { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .g-fold { border: 0; }
  .g-fold summary { pointer-events: none; min-height: 0; margin-bottom: 14px; }
  .g-fold summary::after { display: none; }
  .g-footer__reg { grid-template-columns: repeat(6, auto); justify-content: space-between; }
}
@media (min-width: 768px) and (max-width: 1100px) { .g-footer__cols { grid-template-columns: repeat(2, 1fr); } .g-footer__reg { grid-template-columns: repeat(3, auto); } }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: 12px; max-width: 760px; display: none; gap: 16px; align-items: center; flex-wrap: wrap; padding: 18px 20px; background: rgba(14, 18, 23, .96); color: #e8eef4; border: 1px solid rgba(255, 255, 255, .14); border-left: 4px solid var(--red); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); backdrop-filter: blur(10px); }
.cookie.is-open { display: flex; animation: cookie-in .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cookie-in { from { transform: translateY(30px); opacity: 0; } }
.cookie__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 18px; flex: none; }
.cookie__text { flex: 1 1 260px; margin: 0; font-size: 14px; line-height: 1.55; color: #cbd5df; }
.cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.cookie__btn { flex: 1 1 140px; min-height: 44px; padding: 10px 18px; font: 600 12px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; cursor: pointer; border: 1px solid rgba(255, 255, 255, .4); background: transparent; color: #fff; transition: background .2s, color .2s; }
.cookie__btn:hover { background: rgba(255, 255, 255, .12); }
.cookie__btn--ok { background: #fff; color: var(--ink); border-color: #fff; }
.cookie__btn--ok:hover { background: var(--sky); }
@media (min-width: 640px) { .cookie { left: 24px; bottom: 24px; flex-wrap: nowrap; } .cookie__actions { width: auto; flex-wrap: nowrap; } .cookie__btn { flex: none; } }

/* ---------- typography ---------- */
main h1, main h2, main h3, main h4 { font-family: var(--f-head); text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; color: inherit; font-weight: 600; }
main h1 { font-size: clamp(2.4rem, 7.2vw, 5.2rem); }
main h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); }
main h3 { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.1; }
main h4 { font-size: 1.05rem; letter-spacing: .06em; }
main p { margin: 0; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink2); max-width: 62ch; }
.on-dark .lead, .on-dark p, .sec--img .lead { color: rgba(255, 255, 255, .82); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--red); margin-bottom: 18px; }
.kicker::before { content: ''; width: 10px; height: 10px; background: var(--red); }
.on-dark .kicker { color: #ff8e87; }
.on-dark .kicker::before { background: #ff8e87; }
.mono { font-family: var(--f-mono); }
.pix { font-family: var(--f-pix); line-height: 1.6; }
.type { font-family: var(--f-type); }
.muted { color: var(--muted); }
.text-red { color: var(--red); }
.sr-only-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 28px; }
.mt-s { margin-top: 12px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }
.center { text-align: center; margin-inline: auto; }
.center .lead { margin-inline: auto; }

/* ---------- sections ---------- */
.sec { position: relative; padding-block: var(--pad); overflow: hidden; overflow: clip; }
.sec--sm { padding-block: clamp(40px, 6vw, 72px); }
.sec--paper { background: var(--sheet); background-image: var(--grain); background-size: auto, 5px 5px; }
.sec--soft { background: var(--sheet2); background-image: var(--grain); background-size: auto, 5px 5px; }
.sec--dark { background: var(--night); color: #e9eff5; }
.sec--navy { background: var(--navy); color: #eaf1f9; background-image: var(--grain); background-size: auto, 6px 6px; }
.sec--red { background: var(--red); color: #fff; }
.sec--img, .sec--vid { background-size: cover; background-position: center; background-color: var(--night); color: #fff; isolation: isolate; }
.sec--img .sec__in, .sec--vid .sec__in { position: relative; z-index: 2; }
.on-dark, .sec--dark, .sec--navy, .sec--img, .sec--vid, .sec--red { color: #eef3f8; }
.sec--navy .lead, .sec--red .lead { color: rgba(255, 255, 255, .85); }
.vid-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--night); }
.vid-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(8, 12, 18, .62), rgba(8, 12, 18, .72)); }
.sec__head { max-width: 820px; margin-bottom: clamp(28px, 5vw, 56px); }
.sec__head--c { margin-inline: auto; text-align: center; }
.sec__head--c .lead { margin-inline: auto; }
.sec__head p.lead { margin-top: 18px; }
.sec::before { pointer-events: none; }
.edge-perf { position: relative; }
.edge-perf::before, .edge-perf::after { content: ''; position: absolute; left: 0; right: 0; height: 14px; background: radial-gradient(circle at 10px 7px, var(--bg) 5px, transparent 5.5px) 0 0/20px 14px repeat-x; z-index: 3; }
.edge-perf::before { top: -7px; }
.edge-perf::after { bottom: -7px; transform: rotate(180deg); }
.ink-blot { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(29, 53, 87, .1), transparent 66%); pointer-events: none; }
.rule-dash { border: 0; border-top: 2px dashed var(--line); margin: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 14px 26px; border: 2px solid var(--ink); background: var(--ink); color: #fff; font: 600 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; position: relative; transition: transform .18s, background .2s, color .2s, border-color .2s, box-shadow .2s; box-shadow: 4px 4px 0 var(--red); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--red); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--red); }
.btn--red { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 4px 4px 0 var(--ink); }
.btn--red:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn--line { background: transparent; color: var(--ink); box-shadow: none; }
.btn--line:hover { background: var(--ink); color: #fff; box-shadow: none; transform: none; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; box-shadow: 4px 4px 0 var(--red); }
.btn--ghost-l { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); box-shadow: none; }
.btn--ghost-l:hover { background: #fff; color: var(--ink); transform: none; box-shadow: none; }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 12px; }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 520px) { .btn-row .btn { width: 100%; } }

/* ---------- tags, stamps, chips ---------- */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid currentColor; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.tag--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.tag--red { color: var(--red); }
.tag--navy { color: var(--navy); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.stamp { display: inline-block; padding: 8px 18px; border: 4px double var(--red); color: var(--red); font: 600 clamp(1rem, 2.4vw, 1.6rem)/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); mix-blend-mode: multiply; opacity: .92; user-select: none; }
.stamp--navy { border-color: var(--navy); color: var(--navy); }
.stamp--lg { font-size: clamp(1.6rem, 5vw, 3rem); padding: 12px 28px; border-width: 6px; }
.stamp--round { border-radius: 50%; width: 132px; height: 132px; padding: 0; display: grid; place-items: center; text-align: center; font-size: 15px; line-height: 1.15; border-width: 5px; }
.stamp--light { border-color: #fff; color: #fff; mix-blend-mode: normal; opacity: .85; }
.stamp.is-hit, [data-stamp-in].is-in .stamp { animation: stamp-hit .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes stamp-hit { 0% { transform: rotate(-8deg) scale(1.9); opacity: 0; } 55% { transform: rotate(-8deg) scale(.94); opacity: 1; } 70% { transform: rotate(-7deg) translate(2px, 1px) scale(1); } 85% { transform: rotate(-9deg) translate(-2px, 0) scale(1); } 100% { transform: rotate(-8deg) scale(1); opacity: .92; } }
.pin { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--steel) 55%, var(--steel-d)); box-shadow: 0 3px 5px rgba(0, 0, 0, .35); z-index: 4; }
.clip { position: absolute; width: 56px; height: 18px; background: linear-gradient(180deg, #c3ccd5, #8f9ba6); border-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, .3); z-index: 4; }

/* ---------- paper / docs ---------- */
.paper { position: relative; background: var(--sheet); background-image: var(--grain), linear-gradient(90deg, transparent 49.6%, rgba(20, 35, 55, .07) 50%, transparent 50.4%); background-size: auto, 5px 5px, 100% 100%; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 36px); }
.paper--fold::after { content: ''; position: absolute; right: 0; top: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--bg) 50%, var(--sheet3) 50%); box-shadow: -3px 3px 6px rgba(0, 0, 0, .1); }
.card { background: var(--sheet); border: 1px solid var(--line); padding: clamp(18px, 2.4vw, 28px); position: relative; transition: transform .3s, box-shadow .3s, border-color .3s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--navy); }
.card--dark { background: var(--night2); border-color: rgba(255, 255, 255, .12); color: #e7edf3; }
.card--dark:hover { border-color: #fff; }
.card__ico { width: 52px; height: 52px; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 20px; margin-bottom: 18px; }
.card h3 + p, .card h4 + p { margin-top: 10px; }
.card p { color: var(--ink2); font-size: 15px; }
.card--dark p { color: #b5c1cd; }
.frame { position: relative; border: 1px solid var(--line); background: var(--sheet); padding: 8px; box-shadow: var(--shadow); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.ph { position: relative; overflow: hidden; background: var(--sheet3); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ar-1 { aspect-ratio: 1/1; } .ar-43 { aspect-ratio: 4/3; } .ar-34 { aspect-ratio: 3/4; } .ar-169 { aspect-ratio: 16/9; } .ar-32 { aspect-ratio: 3/2; } .ar-23 { aspect-ratio: 2/3; }
.cols { display: grid; gap: clamp(18px, 3vw, 36px); }
@media (min-width: 640px) { .cols--2, .cols--3, .cols--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } .cols--4 { grid-template-columns: repeat(4, 1fr); } }
.split { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--wide-l { grid-template-columns: 1.3fr 1fr; } .split--wide-r { grid-template-columns: 1fr 1.3fr; } }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; font-size: 15.5px; color: var(--ink2); }
.ticks li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--navy); font-size: 14px; }
.ticks--red li::before { content: '\f071'; color: var(--red); }
.on-dark .ticks li, .sec--navy .ticks li, .sec--dark .ticks li, .sec--img .ticks li, .sec--vid .ticks li, .sec--red .ticks li { color: #d5deea; }
.on-dark .ticks li::before, .sec--navy .ticks li::before, .sec--dark .ticks li::before, .sec--img .ticks li::before, .sec--vid .ticks li::before, .sec--red .ticks li::before { color: #9fc0e6; }
.nums { counter-reset: n; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nums li { counter-increment: n; position: relative; padding-left: 52px; }
.nums li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: -2px; font: 600 22px/1 var(--f-head); color: var(--red); }

/* ---------- marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; position: relative; }
.marquee__track { display: inline-flex; min-width: 100%; animation: marquee 38s linear infinite; will-change: transform; }
.marquee--rev .marquee__track { animation-direction: reverse; }
.marquee__grp { display: inline-flex; align-items: center; flex: none; }
.marquee__item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 600 clamp(.9rem, 2vw, 1.2rem)/1 var(--f-head); text-transform: uppercase; letter-spacing: .14em; }
.marquee__item i { color: var(--red); font-size: .8em; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (max-width: 768px) { .marquee__track { animation-duration: 60s; } }

/* ---------- forms ---------- */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; position: relative; }
.field label, .field__label { font: 600 11px/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; font: 400 16px/1.4 var(--f-body); color: var(--ink); background: #fff; border: 1px solid #b9c5d1; border-radius: 0; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; }
.field textarea { min-height: 130px; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(29, 53, 87, .18); }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: var(--red); background: var(--red-soft); }
.field__err { display: none; font-size: 13px; color: var(--red); font-family: var(--f-mono); }
.field.is-bad .field__err { display: block; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink2); line-height: 1.5; }
.check input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; border: 2px solid var(--ink); background: #fff; cursor: pointer; display: grid; place-items: center; margin-top: 1px; }
.check input::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 13px; color: #fff; transform: scale(0); transition: transform .15s; }
.check input:checked { background: var(--navy); border-color: var(--navy); }
.check input:checked::after { transform: scale(1); }
.check.is-bad input { border-color: var(--red); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.spin { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.is-loading .spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-note { display: none; padding: 14px 16px; border-left: 4px solid var(--navy); background: var(--sky); color: var(--navy); font-size: 14px; }
.form-note.is-on { display: block; animation: cookie-in .4s both; }
.form-note.is-err { border-color: var(--red); background: var(--red-soft); color: var(--red); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; max-width: min(92vw, 440px); padding: 14px 20px; background: var(--ink); color: #fff; border-left: 4px solid #8fb4e3; font-size: 14px; transition: transform .35s, opacity .35s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast.is-err { border-color: var(--red); }
.steps-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.steps-bar span { flex: 1; height: 6px; background: var(--sheet3); transition: background .3s; }
.steps-bar span.is-done { background: var(--navy); }
.fstep { display: none; }
.fstep.is-on { display: grid; gap: 18px; animation: cookie-in .4s both; }

/* ---------- tabs / accordion / slider primitives ---------- */
.tab-panel { display: none; }
.tab-panel.is-on { display: block; animation: fade-up .45s both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
.fold { border-top: 1px solid var(--line); background: var(--sheet); }
.fold:last-child { border-bottom: 1px solid var(--line); }
.fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 18px; padding: 20px 8px; min-height: 64px; font: 500 clamp(1rem, 1.6vw, 1.2rem)/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .03em; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: '+'; margin-left: auto; font: 400 28px/1 var(--f-mono); color: var(--red); transition: transform .25s; }
.fold[open] summary::after { transform: rotate(45deg); }
.fold__n { font: 600 clamp(1.4rem, 3vw, 2.2rem)/1 var(--f-head); color: var(--sheet3); min-width: 2.2ch; -webkit-text-stroke: 1px var(--steel); color: transparent; }
.fold__body { padding: 0 8px 24px 8px; color: var(--ink2); max-width: 72ch; }
.fold[open] .fold__body { animation: fade-up .4s both; }
@media (min-width: 640px) { .fold__body { padding-left: 76px; } }
.slider { position: relative; }
.slider__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; }
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; flex: none; }
.slider__nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.slider__btn { width: 48px; height: 48px; border: 2px solid currentColor; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.slider__btn:hover { background: var(--ink); color: #fff; }
.on-dark .slider__btn:hover { background: #fff; color: var(--ink); }
.slider__count { font: 500 14px/1 var(--f-mono); letter-spacing: .12em; margin-left: 10px; }
.dots { display: flex; gap: 8px; }
.dots button { width: 12px; height: 12px; border: 2px solid currentColor; background: transparent; padding: 0; cursor: pointer; min-width: 12px; }
.dots button.is-on { background: var(--red); border-color: var(--red); }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 130; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 12, 18, .78); }
.modal.is-open { display: flex; animation: fade-up .3s both; }
.modal__box { width: 100%; max-width: 520px; background: var(--sheet); padding: clamp(22px, 4vw, 40px); position: relative; border-top: 6px solid var(--red); max-height: 90vh; overflow: auto; }
.modal__x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 20px; cursor: pointer; color: var(--ink); }

/* ---------- misc ---------- */
.cursor-stamp { position: fixed; z-index: 200; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--red); border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .2s, transform .12s; mix-blend-mode: multiply; }
.cursor-stamp.is-on { opacity: .8; }
.cursor-stamp.is-down { transform: scale(.7); background: rgba(179, 38, 30, .2); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
.clip-line { display: block; overflow: hidden; }
.clip-line > span { display: block; transform: translateY(105%); transition: transform .9s cubic-bezier(.2, .9, .2, 1); }
.is-in .clip-line > span, .clip-line.is-in > span { transform: none; }
.clip-line:nth-child(2) > span { transition-delay: .12s; }
.clip-line:nth-child(3) > span { transition-delay: .24s; }
.caret::after { content: '_'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.glitch::before { color: #ff5a52; transform: translate(-3px, 0); clip-path: inset(0 0 58% 0); animation: glitch-a 3.2s infinite steps(1); }
.glitch::after { color: #8fc2ff; transform: translate(3px, 0); clip-path: inset(55% 0 0 0); animation: glitch-b 2.7s infinite steps(1); }
@keyframes glitch-a { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-4px, 1px); } 96% { transform: translate(3px, -1px); } }
@keyframes glitch-b { 0%, 86%, 100% { transform: translate(0); } 88% { transform: translate(4px, -1px); } 94% { transform: translate(-3px, 1px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track, .glitch::before, .glitch::after, .caret::after { animation: none; }
  .reveal, .clip-line > span { opacity: 1; transform: none; transition: none; }
  .stamp.is-hit, [data-stamp-in].is-in .stamp { animation: none; }
}
@media (max-width: 767px) { .glitch::before, .glitch::after { display: none; } }
/* ================= HOME ================= */
.hero { padding: 0; background: var(--sheet); background-image: var(--grain); background-size: auto, 5px 5px; position: relative; }
.hero__rail { display: none; position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 500 11px/1 var(--f-mono); letter-spacing: .3em; color: var(--muted); text-transform: uppercase; z-index: 2; }
@media (min-width: 1360px) { .hero__rail { display: block; } }
.hero__slide { flex: 0 0 100%; width: 100%; display: grid; gap: 24px; padding-block: clamp(20px, 3.5vw, 44px); }
.hero__text { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hero__title { font-size: clamp(2.1rem, 5.2vw, 4.2rem); line-height: .95; }
.hero__title em { font-style: normal; color: var(--red); display: block; }
.hero__lead { max-width: 52ch; }
.hero__visual { position: relative; min-height: clamp(260px, 56vw, 440px); background-size: cover; background-position: center; background-color: var(--night); border: 10px solid #fff; box-shadow: var(--shadow); outline: 1px solid var(--line); }
.hero__visual .stamp { position: absolute; left: -6px; bottom: 26px; background: rgba(255, 255, 255, .92); border-color: var(--red); mix-blend-mode: normal; }
.hero__corner { position: absolute; right: 14px; top: 14px; font: 400 10px/1.6 var(--f-pix); color: #fff; background: var(--red); padding: 8px 10px; }
.hero__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; }
.hero__bar { background: var(--ink); color: #e9eff5; padding-block: 16px; }
.hero__bar .marquee__item { font-size: 1rem; }
@media (max-width: 768px) {
  .hero__bar .marquee { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hero__bar .marquee__track { animation: none; }
  .hero__bar .marquee__item { scroll-snap-align: start; }
  .hero__bar .marquee__grp + .marquee__grp { display: none; }
}
@media (min-width: 900px) { .hero__slide { grid-template-columns: 1.05fr .95fr; gap: 44px; } .hero__visual { min-height: 420px; } }

.mani { min-height: min(100svh, 880px); display: flex; align-items: center; }
.mani__in { display: grid; gap: 36px; width: 100%; }
.mani__word { font: 700 clamp(2.4rem, 12.5vw, 11.5rem)/.9 var(--f-head); text-transform: uppercase; letter-spacing: -.01em; }

.mani__cols { display: grid; gap: 28px; }
.mani__cols p { color: rgba(255, 255, 255, .85); max-width: 52ch; }
.mani__dir { display: grid; gap: 14px; font: 400 14px/1.55 var(--f-mono); color: #d8e2ee; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 22px; }
.mani__side { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mani__seal { font: 500 12px/1 var(--f-mono); letter-spacing: .28em; text-transform: uppercase; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, .5); }
@media (min-width: 768px) { .mani__cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 1100px) {
  .mani__in { grid-template-columns: 64px 1fr; gap: 48px; }
  .mani__side { flex-direction: column; justify-content: space-between; align-items: center; }
  .mani__seal { writing-mode: vertical-rl; transform: rotate(180deg); padding: 24px 12px; }
}
.round-date { width: 124px; height: 124px; border-radius: 50%; border: 4px double #fff; display: grid; place-items: center; text-align: center; font: 600 13px/1.3 var(--f-mono); letter-spacing: .08em; transform: rotate(-12deg); color: #fff; flex: none; }
.round-date b { display: block; font: 700 20px/1 var(--f-head); letter-spacing: .04em; }

.wall { padding-block: var(--pad); }
.wall__lines { margin-bottom: clamp(32px, 5vw, 64px); }
.wall__line { display: block; font: 700 clamp(3rem, 17vw, 14rem)/.88 var(--f-head); text-transform: uppercase; white-space: nowrap; transform: translateX(var(--sx, 0)); will-change: transform; letter-spacing: -.01em; }
.wall__line--out { color: transparent; -webkit-text-stroke: 2px var(--ink); }
.wall__line--red { color: var(--red); }
.wall__grid { display: grid; gap: 40px; align-items: start; }
.wall__fact-stack { position: relative; min-height: 360px; }
.fact { position: absolute; width: min(100%, 300px); padding: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.fact b { display: block; font: 700 clamp(3rem, 8vw, 4.6rem)/1 var(--f-head); color: var(--navy); }
.fact span { font: 500 12px/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.fact:nth-child(1) { left: 0; top: 0; transform: rotate(-5deg); z-index: 1; }
.fact:nth-child(2) { left: 16%; top: 110px; transform: rotate(3deg); z-index: 2; border-top: 6px solid var(--red); }
.fact:nth-child(3) { left: 6%; top: 230px; transform: rotate(-2deg); z-index: 3; background: var(--navy); color: #fff; }
.fact:nth-child(3) b { color: #fff; font-size: clamp(2rem, 6vw, 3rem); }
.fact:nth-child(3) span { color: #b8cae0; }
@media (min-width: 900px) { .wall__grid { grid-template-columns: 1.1fr 1fr; gap: 72px; } .wall__fact-stack { min-height: 420px; } .fact:nth-child(2) { left: 28%; top: 130px; } .fact:nth-child(3) { top: 270px; } }

.brief { padding-block: var(--pad); }
.brief__top { position: relative; border: 2px dashed rgba(255, 255, 255, .55); padding: clamp(26px, 5vw, 56px); margin-bottom: 40px; background: rgba(8, 12, 18, .35); }
.brief__top .stamp { position: absolute; top: -22px; right: 18px; background: rgba(14, 18, 23, .9); border-color: #ff8e87; color: #ff8e87; mix-blend-mode: normal; }
.brief__body { display: grid; gap: 28px; }
.sides { display: grid; gap: 0; position: relative; margin-bottom: 44px; }
.side { padding: clamp(24px, 4vw, 40px); color: #fff; }
.side--a { background: var(--navy); }
.side--b { background: var(--steel); }
.side h3 { margin-bottom: 12px; }
.side p { color: rgba(255, 255, 255, .88); font-size: 15px; }
.side__flag { display: block; height: 14px; margin-bottom: 20px; background: linear-gradient(90deg, #fff 0 33%, rgba(255, 255, 255, .5) 33% 66%, rgba(255, 255, 255, .2) 66%); }
.sides__line { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; color: #ff8e87; background: var(--night); border-block: 2px dashed #ff8e87; }
@media (min-width: 768px) { .sides { grid-template-columns: 1fr auto 1fr; } .sides__line { flex-direction: column; border-block: 0; border-inline: 2px dashed #ff8e87; padding: 20px 12px; } .brief__body { grid-template-columns: 1fr 1fr; gap: 48px; } }
.tl { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; border-left: 2px solid rgba(29, 53, 87, .3); display: grid; gap: 28px; }
.on-dark .tl, .sec--dark .tl, .sec--img .tl { border-color: rgba(255, 255, 255, .35); }
.tl__i { position: relative; }
.tl__i::before { content: ''; position: absolute; left: -39px; top: 6px; width: 16px; height: 16px; background: var(--red); border: 3px solid var(--bg); }
.sec--img .tl__i::before, .sec--dark .tl__i::before { border-color: var(--night); }
.tl__d { display: block; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.sec--img .tl__d, .sec--dark .tl__d { color: #ff8e87; }
.tl__i h3 { margin-bottom: 8px; }
.tl__i p { font-size: 15px; opacity: .88; }

.desk { display: grid; gap: 22px; }
.desk__board { padding: clamp(14px, 3vw, 28px); background: repeating-linear-gradient(90deg, #1b232c 0 7px, #212b35 7px 14px), #1b232c; border: 1px solid #0b0f13; box-shadow: inset 0 0 60px rgba(0, 0, 0, .55), var(--shadow); position: relative; }
.desk__board::before { content: 'STANOWISKO 07'; position: absolute; top: 8px; right: 12px; font: 400 9px/1 var(--f-pix); color: rgba(255, 255, 255, .3); }
.desk__spots { list-style: none; margin: 0; padding: 14px 0 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.desk__spots li { flex: 0 0 62%; scroll-snap-align: start; }
.spot { width: 100%; height: 100%; text-align: left; background: #fff; padding: 10px 10px 14px; border: 0; cursor: pointer; position: relative; box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .6); transition: transform .25s, outline-color .2s; outline: 3px solid transparent; font: inherit; color: var(--ink); }
.spot:hover, .spot.is-on { transform: translateY(-6px) rotate(0deg) !important; outline-color: var(--red); }
.spot .ph { margin-bottom: 10px; }
.spot b { display: block; font: 600 15px/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .06em; }
.spot span.s { font: 400 11px/1.4 var(--f-mono); color: var(--muted); }
.spot .clip { top: -8px; left: 50%; margin-left: -28px; }
.desk__panel { background: var(--sheet); padding: clamp(22px, 3vw, 36px); border-top: 6px solid var(--red); box-shadow: var(--shadow); min-height: 260px; }
.desk__panel h3 { margin-bottom: 12px; }
.duty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.duty__c { background: var(--night); color: #fff; padding: 16px 10px; text-align: center; border: 1px solid #000; }
.duty__c b { display: block; font: 400 clamp(1.5rem, 5vw, 2.6rem)/1 var(--f-pix); color: #9fc0e6; }
.duty__c span { display: block; margin-top: 8px; font: 500 10px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #9aa9b8; }
.duty__c--ok b { color: #9fc0e6; }
.duty__c--no b { color: #ff8e87; }
@media (min-width: 1024px) {
  .desk { grid-template-columns: 1.55fr 1fr; align-items: stretch; }
  .desk__spots { display: grid; grid-template-columns: repeat(2, 1fr); overflow: visible; padding-top: 22px; gap: 22px; }
  .desk__spots li { flex: none; }
  .desk__spots li:nth-child(1) .spot { transform: rotate(-2.5deg); }
  .desk__spots li:nth-child(2) .spot { transform: rotate(2deg); }
  .desk__spots li:nth-child(3) .spot { transform: rotate(1.5deg); }
  .desk__spots li:nth-child(4) .spot { transform: rotate(-1.5deg); }
  .duty { grid-column: 1 / -1; }
}

.decide { display: flex; flex-direction: column; min-height: 620px; }
.decide__half { flex: 1; padding: clamp(28px, 5vw, 64px); color: #fff; position: relative; overflow: hidden; transition: flex .6s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; gap: 22px; background-image: var(--grain); background-size: auto, 5px 5px; }
.decide__half--ok { background-color: var(--navy); }
.decide__half--no { background-color: var(--red); }
.decide__big { font: 700 clamp(2.4rem, 9vw, 6.5rem)/.92 var(--f-head); text-transform: uppercase; }
.decide__half .stamp { align-self: flex-start; border-color: #fff; color: #fff; mix-blend-mode: normal; background: rgba(255, 255, 255, .08); }
.decide__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .5s; }
.decide__half.is-open .decide__list { max-height: 400px; opacity: 1; }
.decide__list li { display: flex; gap: 12px; align-items: center; font: 500 14px/1.4 var(--f-mono); border-top: 1px dashed rgba(255, 255, 255, .4); padding-top: 10px; }
.decide__tap { margin-top: auto; align-self: flex-start; }
.decide__snd { position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .6); font-size: 18px; }
.decide__half.is-hit .stamp { animation: stamp-hit .6s cubic-bezier(.2, 1.4, .4, 1) both; }
@media (min-width: 900px) {
  .decide { flex-direction: row; min-height: 680px; }
  .decide__half:hover { flex: 1.5; }
  .decide__half .decide__list { max-height: 400px; opacity: 1; }
  .decide__tap { display: none; }
}

.bento { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.tile { position: relative; padding: clamp(18px, 2.4vw, 28px); background: var(--sheet); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 170px; transition: transform .3s, box-shadow .3s; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tile h3 { font-size: 1.3rem; }
.tile p { font-size: 14.5px; color: var(--ink2); }
.tile i.big { font-size: 28px; color: var(--navy); }
.tile--wide { grid-column: span 2; }
.tile--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.tile--navy p { color: #c8d6e6; } .tile--navy i.big { color: #fff; }
.tile--soft { background: var(--sheet2); }
.tile--red { background: var(--red); color: #fff; border-color: var(--red); } .tile--red p { color: #ffe1de; } .tile--red i.big { color: #fff; }
.tile--bg { background-size: cover; background-position: center; background-color: var(--night); color: #fff; border: 0; justify-content: flex-end; min-height: 280px; }
.tile--bg p { color: rgba(255, 255, 255, .85); } .tile--bg i.big { color: #fff; }
.tile--fp { min-height: 260px; }
.tile--fp .fp { position: absolute; right: -20px; bottom: -30px; font-size: 190px; color: rgba(255, 255, 255, .12); }
.dialog { display: grid; gap: 8px; font: 400 13px/1.5 var(--f-mono); }
.dialog p { padding: 8px 12px; background: var(--sheet2); border-left: 3px solid var(--navy); font-size: 13px; color: var(--ink); }
.dialog p.a { border-color: var(--red); background: var(--red-soft); }
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 190px); }
  .tile--fp { grid-column: 1 / 3; grid-row: 1 / 3; }
  .tile--bg { grid-column: 3; grid-row: 1 / 4; }
  .tile--ru { grid-column: 4; grid-row: 1; } .tile--bell { grid-column: 4; grid-row: 2; } .tile--cit { grid-column: 4; grid-row: 3; }
  .tile--wide { grid-column: 1 / 3; grid-row: 3; }
  .tile--fp h3 { font-size: 2.2rem; }
}

.nums-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
.bignum { border-top: 2px solid var(--ink); padding-top: 14px; }
.bignum b { display: block; font: 700 clamp(3.4rem, 15vw, 9rem)/.95 var(--f-head); color: transparent; -webkit-text-stroke: 2px var(--navy); transition: color .8s; }
.bignum.is-in b { color: var(--navy); -webkit-text-stroke-color: var(--navy); }
.bignum b small { font-size: .45em; }
.bignum p { font: 500 12px/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); max-width: 24ch; margin-top: 6px; }
@media (min-width: 1024px) { .nums-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }

.press { display: grid; gap: 40px; align-items: center; }
.meter { --p: 0; position: relative; width: min(78vw, 380px); aspect-ratio: 1; border-radius: 50%; margin-inline: auto; background: conic-gradient(var(--red) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0); display: grid; place-items: center; animation: pulse 2.4s ease-in-out infinite; }
.meter::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 40px rgba(179, 38, 30, .4); }
.meter__in { position: relative; text-align: center; z-index: 1; }
.meter__in b { display: block; font: 400 clamp(2rem, 9vw, 3.6rem)/1 var(--f-pix); color: #fff; }
.meter__in span { display: block; margin-top: 10px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #ff8e87; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(179, 38, 30, .14), 0 0 60px rgba(179, 38, 30, .35); } }
.queue { display: flex; gap: 12px; overflow-x: auto; padding: 10px 0 14px; scrollbar-width: thin; }
.queue__p { flex: none; width: 84px; text-align: center; font: 500 10px/1.3 var(--f-mono); color: #9aa9b8; text-transform: uppercase; letter-spacing: .08em; }
.queue__p i { display: grid; place-items: center; width: 84px; height: 104px; margin-bottom: 8px; background: linear-gradient(180deg, #232c36, #121820); border: 1px solid rgba(255, 255, 255, .14); font-size: 38px; color: #4c5b6b; }
.queue__p:nth-child(3n) i { color: #7b8fa6; }
.queue__p:first-child i { color: #ff8e87; border-color: #ff8e87; }
@media (min-width: 900px) { .press { grid-template-columns: 1fr 1.1fr; gap: 72px; } }

.posters { display: grid; gap: 28px; }
.poster { position: relative; border: 10px solid #fff; background: var(--night2); box-shadow: 0 30px 50px -26px rgba(0, 0, 0, .7); aspect-ratio: 3/4; overflow: hidden; }
.poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.poster__txt { position: absolute; inset: auto 0 0 0; padding: 60px 18px 20px; background: linear-gradient(transparent, rgba(8, 12, 18, .95)); color: #fff; }
.poster__txt b { display: block; font: 700 clamp(1.5rem, 4vw, 2.3rem)/1 var(--f-head); text-transform: uppercase; }
.poster__txt span { font: 400 11px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ff8e87; }
.poster:nth-child(odd) { transform: rotate(-1.5deg); margin-right: 18px; }
.poster:nth-child(even) { transform: rotate(1.5deg); margin-left: 18px; }
.posters__next { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin-top: 28px; font: 500 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.posters__mq { margin-top: 44px; border-block: 2px solid rgba(255, 255, 255, .4); padding-block: 14px; }
@media (min-width: 768px) {
  .posters { grid-template-columns: repeat(3, 1fr); gap: 36px; align-items: start; }
  .poster:nth-child(2) { margin-top: 56px; }
  .poster:nth-child(odd), .poster:nth-child(even) { margin-inline: 0; }
  .poster:nth-child(3) { margin-top: 20px; }
}

.film { display: grid; gap: 22px; }
.film__main { position: relative; background: #07090c; padding: 14px; border: 1px solid #000; box-shadow: var(--shadow); }
.film__main .ph { aspect-ratio: 16/10; }
.film__cap { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-top: 14px; color: #cfd9e4; font-size: 14px; }
.film__cap b { font: 500 13px/1 var(--f-mono); letter-spacing: .14em; color: #fff; white-space: nowrap; }
.film__thumbs { position: relative; display: flex; gap: 10px; overflow-x: auto; padding: 30px 14px; background: #07090c; scrollbar-width: none; scroll-snap-type: x proximity; }
.film__thumbs::before, .film__thumbs::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .8) 0 10px, transparent 10px 24px); opacity: .5; }
.film__thumbs::before { top: 8px; } .film__thumbs::after { bottom: 8px; }
.film__t { flex: none; width: 108px; border: 2px solid transparent; padding: 0; background: #000; cursor: pointer; opacity: .55; transition: opacity .2s, border-color .2s; scroll-snap-align: center; }
.film__t.is-on, .film__t:hover { opacity: 1; border-color: var(--red); }
.film__t .ph { aspect-ratio: 4/3; }
@media (min-width: 1024px) { .film { grid-template-columns: 1fr 360px; align-items: start; } .film__thumbs { flex-direction: column; overflow: auto; max-height: 560px; padding: 14px 30px; } .film__thumbs::before, .film__thumbs::after { left: 8px; right: auto; top: 0; bottom: 0; width: 12px; height: auto; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .8) 0 10px, transparent 10px 24px); } .film__thumbs::after { left: auto; right: 8px; } .film__t { width: 100%; } }

.score { display: grid; gap: 6px; align-items: center; margin-bottom: 34px; }
.score b { font: 700 clamp(4rem, 12vw, 7rem)/1 var(--f-head); color: var(--navy); }
.stars { color: var(--red); font-size: 18px; letter-spacing: 3px; }
.voices { column-count: 1; column-gap: 20px; }
.note { break-inside: avoid; margin: 0 0 20px; padding: 22px 22px 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); position: relative; }
.note p { font-size: 15px; color: var(--ink2); }
.note footer { margin-top: 14px; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }
.note--b { background: #dbe8f5; border-color: #b8cee6; }
.note--c { background: var(--red-soft); border-color: #eac3c0; }
.note--d { background: #e6ebf0; }
.note--tall p { font-size: 17px; font-family: var(--f-type); }
@media (min-width: 640px) { .voices { column-count: 2; } .note:nth-child(4n+1) { transform: rotate(-1.2deg); } .note:nth-child(4n+2) { transform: rotate(1deg); } .note:nth-child(4n+3) { transform: rotate(.6deg); } .note:nth-child(4n) { transform: rotate(-.8deg); } }
@media (min-width: 1024px) { .voices { column-count: 3; } }

.modes { display: grid; border: 1px solid var(--ink); background: var(--ink); }
.modes__tabs { display: flex; background: var(--ink); position: sticky; top: 68px; z-index: 5; }
.modes__tab { flex: 1; min-height: 52px; background: transparent; color: #fff; border: 0; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.modes__tab.is-on { background: var(--red); }
.mode { display: none; padding: clamp(26px, 4vw, 56px); position: relative; }
.mode.is-on { display: block; }
.mode--paper { background: var(--sheet); background-image: var(--grain); background-size: auto, 5px 5px; }
.mode--dark { background: var(--night); color: #e9eff5; }
.mode h3 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 14px; }
.mode__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.mode__list li { display: flex; gap: 14px; align-items: baseline; padding-top: 12px; border-top: 1px dashed currentColor; font-size: 15px; }
.mode__list b { font: 700 1.9rem/1 var(--f-head); min-width: 3ch; color: var(--red); }
.mode--dark .mode__list b { color: #ff8e87; }
@media (min-width: 900px) {
  .modes { grid-template-columns: 1fr 70px 1fr; }
  .modes__tabs { display: none; }
  .mode { display: block; transition: opacity .4s; }
  .modes[data-active="story"] .mode--dark, .modes[data-active="endless"] .mode--paper { opacity: .5; }
  .modes__mid { display: flex !important; }
}
.modes__mid { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: repeating-linear-gradient(180deg, var(--ink) 0 10px, #2a333d 10px 12px); padding: 20px 0; }
.modes__sw { width: 44px; height: 92px; border-radius: 22px; background: #fff; border: 0; position: relative; cursor: pointer; }
.modes__sw::after { content: ''; position: absolute; left: 5px; top: 5px; width: 34px; height: 34px; border-radius: 50%; background: var(--navy); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.modes[data-active="endless"] .modes__sw::after { transform: translateY(48px); background: var(--red); }

.teaser { display: grid; gap: 22px; }
.tcard { display: flex; flex-direction: column; background: var(--sheet); border: 1px solid var(--line); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.tcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tcard .ph { aspect-ratio: 16/10; }
.tcard__b { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tcard__b p { font-size: 15px; color: var(--ink2); }
.tcard__f { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--line); font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.tcard__f .pr { color: var(--red); font-size: 14px; }
@media (min-width: 640px) { .teaser { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .teaser--3 { grid-template-columns: repeat(3, 1fr); } }

.mq2 { padding: 0; background: var(--bg); overflow: hidden; }
.mq2__a { background: var(--navy); color: #fff; padding-block: 22px; transform: rotate(-1.2deg) scale(1.03); }
.mq2__b { background: var(--red); color: #fff; padding-block: 22px; transform: rotate(1.2deg) scale(1.03); margin-top: -8px; }
.mq2 .marquee__item { font-size: clamp(1.4rem, 4vw, 2.6rem); }
.mq2 .marquee__item i { color: #fff; }

.exit { padding-block: calc(var(--pad) * 1.2); text-align: center; }
.exit__big { font: 700 clamp(2.6rem, 10vw, 8rem)/.92 var(--f-head); text-transform: uppercase; }
.exit__big span { color: #ff8e87; }
.exit__row { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; }
.exit__seal { margin: 56px auto 0; }
/* ================= ABOUT ================= */
.creator { padding-block: calc(var(--pad) * .9); }
.creator__in { display: grid; gap: 40px; align-items: center; }
.creator__portrait { position: relative; max-width: 360px; width: 100%; justify-self: center; }
.creator__portrait .frame { transform: rotate(-3deg); background: #fff; padding: 12px 12px 40px; }
.creator__portrait .ph { aspect-ratio: 4/5; }
.creator__portrait figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.creator__text { display: grid; gap: 22px; }
.creator__note { border-left: 4px solid var(--red); padding: 4px 0 4px 20px; font-family: var(--f-type); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.7; color: rgba(255, 255, 255, .92); }
.creator__note cite { display: block; margin-top: 12px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #ff8e87; font-style: normal; }
@media (min-width: 900px) { .creator__in { grid-template-columns: 360px 1fr; gap: 72px; } }

.anat { display: grid; gap: 40px; align-items: center; }
.anat__stage { position: relative; width: min(100%, 420px); aspect-ratio: 3/4; margin-inline: auto; perspective: 1200px; }
.layer { position: absolute; inset: 0; transition: transform 1s cubic-bezier(.2, .8, .2, 1), opacity .8s; border: 1px solid var(--line); box-shadow: var(--shadow); }
.layer--cover { background: var(--navy); background-image: var(--grain); background-size: auto, 5px 5px; display: grid; place-items: center; color: #fff; text-align: center; font: 600 1.4rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .12em; z-index: 1; }
.layer--cover i { display: block; font-size: 54px; margin-bottom: 14px; color: #b6c9e0; }
.layer--page { background: #fff; background-image: var(--grain); background-size: auto, 5px 5px; z-index: 2; padding: 22px; display: grid; grid-template-columns: 38% 1fr; gap: 14px; align-content: start; }
.layer--page .ph { aspect-ratio: 3/4; }
.layer--page .lines { display: grid; gap: 10px; padding-top: 6px; }
.layer--page .lines i { display: block; height: 8px; background: var(--sheet3); }
.layer--page .lines i:nth-child(2n) { width: 70%; }
.layer--seal { z-index: 3; background: transparent; border: 0; box-shadow: none; display: grid; place-items: end start; padding: 0 0 34px 22px; pointer-events: none; }
.layer--seal .stamp { transform: rotate(-12deg); }
.mk { position: absolute; z-index: 5; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: #fff; font: 600 13px/28px var(--f-mono); text-align: center; box-shadow: 0 0 0 4px rgba(179, 38, 30, .22); }
.mk--1 { left: 48%; top: 14%; } .mk--2 { left: 48%; top: 22%; } .mk--3 { left: 78%; top: 30%; } .mk--4 { left: 48%; top: 40%; } .mk--5 { left: 12%; bottom: 14%; }
[data-explode].is-in .layer--cover { transform: translate(-22%, 4%) rotate(-7deg); }
[data-explode].is-in .layer--seal { transform: translate(24%, -10%) rotate(6deg); }
[data-explode].is-in .layer--page { transform: translateY(-4%); }
.anat__list { display: grid; gap: 14px; }
.anat__list li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; font-size: 15px; color: var(--ink2); }
.anat__list b { display: grid; place-items: center; width: 30px; height: 30px; background: var(--red); color: #fff; border-radius: 50%; font: 600 13px/1 var(--f-mono); }
.anat__list strong { display: block; font: 600 14px/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin-bottom: 2px; }
.warn { border: 2px dashed var(--red); background: var(--red-soft); padding: clamp(18px, 3vw, 28px); margin-top: 30px; }
.warn h3 { margin-bottom: 12px; color: var(--red); }
.warn ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.warn li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ink2); }
.warn li i { color: var(--red); margin-top: 5px; }
@media (min-width: 900px) { .anat { grid-template-columns: 1fr 1fr; gap: 80px; } }
@media (min-width: 900px) { .mk { display: block; } }

.tl-c { position: relative; list-style: none; margin: 0; padding: 0 0 0 30px; display: grid; gap: 22px; border-left: 2px solid rgba(255, 255, 255, .35); }
.tl-c__i { position: relative; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .22); padding: 20px 22px; }
.tl-c__i::before { content: ''; position: absolute; left: -40px; top: 24px; width: 18px; height: 18px; background: var(--red); border: 4px solid var(--navy); }
.tl-c__i time { display: block; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #ff9d97; margin-bottom: 8px; }
.tl-c__i p { font-size: 15px; color: rgba(255, 255, 255, .85); margin-top: 8px; }
.tl-c__i--now { background: var(--red); border-color: var(--red); }
.tl-c__i--now time { color: #fff; }
.tl-c__i--now::before { background: #fff; border-color: var(--red); }
@media (min-width: 900px) {
  .tl-c { padding: 0; border: 0; grid-template-columns: 1fr 1fr; column-gap: 70px; row-gap: 26px; }
  .tl-c::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255, 255, 255, .35); }
  .tl-c__i:nth-child(odd) { grid-column: 1; text-align: right; }
  .tl-c__i:nth-child(even) { grid-column: 2; margin-top: 56px; margin-bottom: -56px; }
  .tl-c__i::before { top: 24px; }
  .tl-c__i:nth-child(odd)::before { left: auto; right: -80px; }
  .tl-c__i:nth-child(even)::before { left: -80px; }
  .tl-c__i--now { grid-column: 1 / -1 !important; margin: 40px auto 0 !important; text-align: center !important; max-width: 560px; }
  .tl-c__i--now::before { left: 50% !important; right: auto !important; top: -34px; margin-left: -9px; }
}

.hz { position: relative; background: radial-gradient(ellipse at 20% 0%, #25344a, transparent 60%), linear-gradient(160deg, #0d131b, #17202c); color: #e8eef5; }
.hz__sticky { padding-block: 48px; }
.hz__head { margin-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px; }
.hz__count { font: 400 clamp(1rem, 3vw, 1.5rem)/1 var(--f-pix); color: #ff8e87; border: 2px solid #ff8e87; padding: 12px 16px; background: rgba(8, 12, 18, .8); position: sticky; top: 76px; z-index: 6; }
.hz__track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 16px 20px; scrollbar-width: thin; }
.coupon { flex: 0 0 82%; scroll-snap-align: center; position: relative; background: #f6f8fb; color: var(--ink); padding: 26px 22px 22px 30px; display: grid; gap: 12px; align-content: start; -webkit-mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat; mask: radial-gradient(circle at 0 50%, transparent 11px, #000 12px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, transparent 11px, #000 12px) right / 51% 100% no-repeat; }
.coupon::after { content: ''; position: absolute; left: 14px; top: 20px; bottom: 20px; border-left: 2px dashed var(--line); }
.coupon b { font: 700 3.2rem/1 var(--f-head); color: var(--navy); }
.coupon h3 { font-size: 1.15rem; }
.coupon p { font-size: 14px; color: var(--ink2); }
.coupon .tag { align-self: start; }
.hz__prog { display: flex; gap: 6px; margin-top: 18px; padding-inline: 16px; }
.hz__prog span { flex: 1; height: 6px; background: rgba(255, 255, 255, .18); }
.hz__prog span.is-done { background: #ff8e87; }
@media (min-width: 1024px) {
  .hz { height: var(--hz-h, 300vh); }
  .hz__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding-block: 90px 36px; }
  .hz__track { overflow: visible; transform: translateX(var(--hx, 0)); will-change: transform; padding-inline: max(32px, calc((100vw - 1216px) / 2)); scroll-snap-type: none; }
  .coupon { flex: 0 0 340px; min-height: 360px; }
  .hz__count { position: absolute; right: 32px; top: 100px; }
}

.dilemma { min-height: 100svh; display: flex; align-items: center; text-align: center; }
.dilemma::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, .75) 100%); pointer-events: none; }
.dilemma__q { font: 400 clamp(1.6rem, 5vw, 3.6rem)/1.25 var(--f-type); max-width: 18ch; margin-inline: auto; text-transform: none; letter-spacing: 0; }
.dilemma__choices { display: grid; gap: 16px; max-width: 760px; margin: 40px auto 0; }
.choice { text-align: left; padding: 22px; border: 2px solid rgba(255, 255, 255, .55); background: rgba(8, 12, 18, .55); color: #fff; cursor: pointer; transition: background .25s, border-color .25s; font: inherit; min-height: 44px; }
.choice:hover, .choice.is-on { background: rgba(255, 255, 255, .14); border-color: #fff; }
.choice b { display: block; font: 600 1.5rem/1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.choice span { font-size: 14px; color: rgba(255, 255, 255, .8); }
.dilemma__out { max-width: 760px; margin: 22px auto 0; min-height: 90px; padding: 18px 22px; background: rgba(255, 255, 255, .92); color: var(--ink); text-align: left; font-size: 15px; border-left: 5px solid var(--red); display: none; }
.dilemma__out.is-on { display: block; animation: fade-up .4s both; }
.dilemma__foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 30px; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.dilemma__foot b { color: #fff; font-size: 15px; }
@media (min-width: 768px) { .dilemma__choices { grid-template-columns: 1fr 1fr; } }

.ledger-wrap { display: grid; gap: 36px; }
.ledger { width: 100%; border-collapse: collapse; background: repeating-linear-gradient(180deg, transparent 0 41px, rgba(29, 53, 87, .18) 41px 42px), #fff; border: 1px solid var(--line); font: 400 15px/42px var(--f-mono); box-shadow: var(--shadow); }
.ledger caption { text-align: left; padding: 12px 16px; font: 600 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ledger th { text-align: left; padding: 0 16px; background: var(--sheet2); font: 600 11px/42px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.ledger td { padding: 0 16px; }
.ledger td:last-child, .ledger th:last-child { text-align: right; }
.ledger .plus { color: var(--navy); font-weight: 600; }
.ledger .minus { color: var(--red); font-weight: 600; }
.ledger tfoot td { background: var(--red-soft); font-weight: 600; border-top: 2px solid var(--red); }
.ledger tr.reveal { opacity: 0; transform: translateX(-14px); }
.ledger tr.reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 640px) {
  .ledger, .ledger tbody, .ledger tfoot, .ledger tr, .ledger td { display: block; }
  .ledger thead { display: none; }
  .ledger { background: #fff; line-height: 1.5; }
  .ledger tr { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed var(--line); }
  .ledger td { padding: 0; }
  .ledger td:first-child { color: var(--ink2); }
}
.fam { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.fam__c { flex: 0 0 78%; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); padding: 20px; display: grid; gap: 10px; }
.fam__c i { font-size: 26px; color: var(--navy); }
.fam__c h3 { font-size: 1.15rem; }
.fam__c p { font-size: 14px; color: var(--ink2); }
.bar { height: 8px; background: var(--sheet3); position: relative; }
.bar::after { content: ''; position: absolute; inset: 0 auto 0 0; background: var(--navy); width: 50%; }
.bar--20::after { width: 20%; background: var(--red); } .bar--40::after { width: 40%; background: var(--red); } .bar--60::after { width: 60%; } .bar--85::after { width: 85%; }
.balance { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; background: #fff; border: 2px solid var(--ink); }
.balance b { font: 700 clamp(2rem, 6vw, 3.6rem)/1 var(--f-head); color: var(--red); }
@media (min-width: 640px) { .fam__c { flex-basis: 260px; } }
@media (min-width: 1024px) { .ledger-wrap { grid-template-columns: 1.3fr 1fr; align-items: start; } .fam { flex-direction: column; overflow: visible; } .fam__c { flex-basis: auto; } .balance { grid-column: 1 / -1; } }

.rules { display: grid; gap: 28px; }
.rules__head { align-self: start; }
.rpage { position: sticky; top: 96px; background: #fbfcfd; background-image: var(--grain), linear-gradient(180deg, transparent 0 94%, rgba(29, 53, 87, .06) 94%); background-size: auto, 5px 5px, 100% 100%; border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .6); color: var(--ink); margin-bottom: 22px; }
.rpage:nth-child(2) { top: 108px; } .rpage:nth-child(3) { top: 120px; } .rpage:nth-child(4) { top: 132px; } .rpage:nth-child(5) { top: 144px; }
.rpage__n { font: 700 3.4rem/1 var(--f-head); color: var(--sheet3); -webkit-text-stroke: 1px var(--steel); color: transparent; float: left; margin-right: 18px; }
.rpage h3 { margin-bottom: 8px; }
.rpage p { font-size: 15px; color: var(--ink2); }
.rpage .new { display: inline-block; margin-left: 8px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; color: var(--red); border-bottom: 2px solid var(--red); vertical-align: middle; }
.rules__seal { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px; border: 2px dashed rgba(255, 255, 255, .5); font: 600 1.2rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .08em; }
.rules__seal i { font-size: 30px; color: #ff8e87; }
@media (min-width: 900px) { .rules { grid-template-columns: 340px 1fr; gap: 64px; } .rules__head { position: sticky; top: 100px; } }
@media (max-width: 899px) { .rpage, .rpage:nth-child(n) { top: 84px; } .rpage:nth-child(2) { top: 92px; } .rpage:nth-child(3) { top: 100px; } .rpage:nth-child(4) { top: 108px; } .rpage:nth-child(5) { top: 116px; } }

.plaq-main { display: grid; place-items: center; text-align: center; padding: 34px 22px; margin: 0 auto 40px; max-width: 520px; border: 2px solid #9fb0c2; background: linear-gradient(135deg, #e9eef3 0%, #aab7c4 38%, #f4f7fa 52%, #8696a6 100%); color: var(--ink); box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .8), inset 0 0 0 6px rgba(255, 255, 255, .4); position: relative; overflow: hidden; }
.plaq-main i { font-size: 54px; color: var(--navy); margin-bottom: 10px; }
.plaq-main h3 { color: var(--ink); }
.plaq-main p { color: var(--ink2); margin-top: 8px; font-size: 15px; }
.plaq-grid { display: grid; gap: 16px; }
.plaq { position: relative; padding: 22px 22px 22px 26px; background: linear-gradient(135deg, #dfe6ed, #a9b6c3 45%, #eef2f6 58%, #8999aa); border: 2px solid #8493a3; color: var(--ink); overflow: hidden; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .35), 0 14px 26px -16px rgba(0, 0, 0, .7); }
.plaq::after, .plaq-main::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg); transition: left .8s; pointer-events: none; }
.plaq:hover::after, .plaq.is-shine::after, .plaq-main:hover::after, .plaq-main.is-shine::after { left: 130%; }
.plaq h3 { font-size: 1.15rem; color: var(--ink); }
.plaq p { font-size: 14px; margin-top: 6px; color: var(--ink2); }
.plaq i { position: absolute; right: 16px; top: 16px; color: var(--navy); font-size: 20px; opacity: .7; }
.plaq-more { text-align: center; margin-top: 32px; font: 600 14px/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: #9db3cc; }
.plaq-more i { margin-right: 10px; color: #ff8e87; }
@media (min-width: 768px) { .plaq-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.recwrap { display: grid; gap: 36px; justify-items: center; }
.receipt { width: min(100%, 420px); background: #fff; color: var(--ink); font: 400 14px/1.5 var(--f-mono); padding: 40px 26px 46px; position: relative; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .8); animation: sway 6s ease-in-out infinite; transform-origin: top center; }
.receipt::before, .receipt::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle at 8px 12px, transparent 6px, #fff 6.5px) 0 0 / 16px 12px repeat-x; }
.receipt::before { top: -11px; transform: rotate(180deg); }
.receipt::after { bottom: -11px; }
@keyframes sway { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.receipt h3 { text-align: center; font-size: 1.5rem; letter-spacing: .1em; }
.receipt time { display: block; text-align: center; color: var(--muted); margin: 6px 0 20px; }
.rline { display: flex; align-items: baseline; gap: 8px; padding: 3px 0; }
.rline i { flex: 1; border-bottom: 2px dotted #9aa8b6; transform: translateY(-3px); }
.rline b.m { color: var(--red); }
.rline--sum { margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink); font-weight: 600; font-size: 16px; }
.barcode { height: 58px; margin: 26px 0 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 14px); }
.receipt__sig { text-align: center; font: 600 13px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }

.order { padding-block: calc(var(--pad) * 1.1); }
.order__title { font: 700 clamp(3rem, 12vw, 9rem)/.9 var(--f-head); text-transform: uppercase; }
.cipher-grid { display: grid; gap: 16px; margin-top: 44px; }
.cipher { text-align: left; padding: 22px; border: 1px solid rgba(255, 130, 122, .5); background: rgba(8, 12, 18, .6); color: #fff; cursor: pointer; font: inherit; min-height: 150px; position: relative; transition: border-color .25s, background .25s; }
.cipher:hover, .cipher.is-open { border-color: #ff8e87; background: rgba(60, 12, 12, .55); }
.cipher small { display: block; font: 500 11px/1 var(--f-mono); letter-spacing: .18em; color: #ff8e87; margin-bottom: 14px; text-transform: uppercase; }
.cipher__lock { font: 400 15px/1.6 var(--f-mono); letter-spacing: .2em; word-break: break-all; color: rgba(255, 255, 255, .45); }
.cipher__plain { display: none; font: 400 17px/1.6 var(--f-type); color: #fff; }
.cipher.is-open .cipher__lock { display: none; }
.cipher.is-open .cipher__plain { display: block; animation: fade-up .4s both; }
@media (hover: hover) { .cipher:hover .cipher__lock { display: none; } .cipher:hover .cipher__plain { display: block; } }
.order__warn { margin-top: 36px; display: flex; gap: 18px; align-items: center; padding: 20px 24px; border: 2px solid #ff8e87; background: rgba(179, 38, 30, .22); font: 600 clamp(1rem, 2.4vw, 1.4rem)/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .08em; }
.order__warn i { font-size: 30px; color: #ff8e87; }
@media (min-width: 768px) { .cipher-grid { grid-template-columns: repeat(3, 1fr); } }

.radio { background: linear-gradient(180deg, #2b343e, #161c23); border: 1px solid #0a0d11; padding: clamp(18px, 3vw, 36px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .12); display: grid; gap: 28px; color: #e7edf3; position: relative; }
.radio::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(255, 255, 255, .06); pointer-events: none; }
.radio__top { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.play { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; background: var(--red); color: #fff; font-size: 26px; cursor: pointer; display: grid; place-items: center; transition: transform .2s; flex: none; }
.play:hover { transform: scale(1.06); }
.knob { width: 62px; height: 62px; border-radius: 50%; background: conic-gradient(from 210deg, #5d6b73, #cfd8e1, #5d6b73, #aab7c4, #5d6b73); border: 3px solid #0a0d11; position: relative; box-shadow: 0 6px 12px rgba(0, 0, 0, .5); flex: none; }
.knob::after { content: ''; position: absolute; left: 50%; top: 6px; width: 3px; height: 18px; margin-left: -1.5px; background: var(--ink); transform-origin: 50% 25px; transform: rotate(var(--r, 40deg)); }
.knob--b::after { --r: -60deg; } .knob--c::after { --r: 120deg; }
.radio__dial { flex: 1 1 180px; min-width: 150px; }
.radio__dial b { display: block; font: 400 clamp(.8rem, 2vw, 1rem)/1.5 var(--f-pix); color: #9fc0e6; }
.radio__dial span { font: 500 12px/1.5 var(--f-mono); color: #8c9baa; letter-spacing: .1em; text-transform: uppercase; }
.eq { display: flex; align-items: flex-end; gap: 5px; height: 90px; padding: 10px; background: #0a0d11; border: 1px solid #000; }
.eq i { flex: 1; background: linear-gradient(180deg, #ff8e87, var(--red)); height: 12%; transition: height .3s; }
.is-playing .eq i { animation: eq 1s ease-in-out infinite alternate; }
.eq i:nth-child(3n) { animation-duration: .7s !important; } .eq i:nth-child(4n) { animation-duration: 1.3s !important; } .eq i:nth-child(5n+2) { animation-delay: -.4s !important; } .eq i:nth-child(2n) { animation-delay: -.2s !important; }
@keyframes eq { from { height: 12%; } to { height: 96%; } }
.sounds { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.sound { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); color: #fff; cursor: pointer; font: 500 13px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; transition: background .2s; }
.sound:hover, .sound.is-hit { background: rgba(255, 255, 255, .16); }
@media (min-width: 900px) { .radio { grid-template-columns: 1.2fr 1fr; align-items: start; } .radio__top, .eq { grid-column: 1; } .sounds { grid-column: 2; grid-row: 1 / 3; } }
.decide-sec { padding: 0; }
.cookie a.link { color: #9fc0e6; border-color: rgba(159, 192, 230, .5); }
/* ================= SHARED EXTRAS ================= */
.link--w { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .6); }
.pin--tl { left: 50%; top: -6px; margin-left: -8px; }
.ink-blot--a { width: 420px; height: 420px; right: -120px; top: -80px; }
.pagehero { padding-block: calc(var(--pad) * .85); }
.pagehero__in { display: grid; gap: 36px; align-items: center; }
.pagehero h1 { max-width: 14ch; }
.pagehero .lead { margin-top: 22px; }
@media (min-width: 900px) { .pagehero__in { grid-template-columns: 1.2fr 1fr; gap: 64px; } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.crumbs a:hover { text-decoration: underline; }
.crumbs li { list-style: none; }
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.crumbs { padding: 0; }

/* ================= PRICE ================= */
.ticket { position: relative; background: #fff; color: var(--ink); padding: 28px 26px 28px 40px; max-width: 420px; box-shadow: var(--shadow); -webkit-mask: radial-gradient(circle at 0 50%, transparent 14px, #000 15px); mask: radial-gradient(circle at 0 50%, transparent 14px, #000 15px); }
.ticket::before { content: ''; position: absolute; left: 18px; top: 16px; bottom: 16px; border-left: 2px dashed var(--line); }
.ticket b { display: block; font: 700 clamp(2.6rem, 8vw, 4rem)/1 var(--f-head); color: var(--red); }
.ticket span { font: 500 12px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.plist { border-top: 2px solid var(--ink); }
.prow { display: grid; gap: 14px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: center; }
.prow__n { font: 700 2.4rem/1 var(--f-head); color: transparent; -webkit-text-stroke: 1px var(--steel); }
.prow h3 a:hover { color: var(--red); }
.prow p { font-size: 15px; color: var(--ink2); margin-top: 6px; max-width: 60ch; }
.prow__p { font: 700 1.9rem/1 var(--f-head); color: var(--navy); white-space: nowrap; }
.prow__p small { display: block; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
@media (min-width: 768px) { .prow { grid-template-columns: 70px 1fr 170px 150px; gap: 28px; } }
.packs { display: grid; gap: 22px; align-items: stretch; }
.pack { position: relative; background: #fff; border: 1px solid var(--line); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.pack--hot { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: var(--shadow); }
.pack--hot .ticks li { color: #d3e0ef; } .pack--hot .ticks li::before { color: #9fc0e6; }
.pack__tag { position: absolute; top: -13px; left: 24px; background: var(--red); color: #fff; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; padding: 8px 12px; text-transform: uppercase; }
.pack__price { font: 700 3.4rem/1 var(--f-head); }
.pack__price small { font: 500 13px/1 var(--f-mono); letter-spacing: .1em; margin-left: 6px; opacity: .7; }
.pack__old { font: 400 13px/1 var(--f-mono); text-decoration: line-through; opacity: .6; }
.pack .btn { margin-top: auto; }
@media (min-width: 900px) { .packs { grid-template-columns: repeat(3, 1fr); } .pack--hot { transform: translateY(-14px); } }
.tscroll { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
.cmp { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp th:first-child, .cmp td:first-child { text-align: left; font-weight: 500; }
.cmp thead th { background: var(--ink); color: #fff; font: 600 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.cmp tbody tr:nth-child(even) { background: var(--sheet2); }
.cmp .y { color: var(--navy); } .cmp .n { color: #a5b0bb; }
.cmp tfoot td { font: 700 1.3rem/1 var(--f-head); background: var(--red-soft); }
.calc { display: grid; gap: 26px; }
.calc__opts { display: grid; gap: 12px; }
.calc__opt { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: #fff; border: 2px solid var(--line); cursor: pointer; transition: border-color .2s, background .2s; min-height: 44px; }
.calc__opt:has(input:checked) { border-color: var(--navy); background: #f1f6fb; }
.calc__opt input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border: 2px solid var(--ink); background: #fff; flex: none; display: grid; place-items: center; margin-top: 2px; cursor: pointer; }
.calc__opt input::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 13px; color: #fff; transform: scale(0); transition: transform .15s; }
.calc__opt input:checked { background: var(--navy); border-color: var(--navy); } .calc__opt input:checked::after { transform: scale(1); }
.calc__opt b { display: block; font: 600 1.05rem/1.2 var(--f-head); text-transform: uppercase; letter-spacing: .04em; }
.calc__opt span.d { font-size: 14px; color: var(--ink2); }
.calc__opt span.p { margin-left: auto; font: 600 14px/1.4 var(--f-mono); white-space: nowrap; color: var(--navy); }
.calc__sum { background: var(--ink); color: #fff; padding: 28px; position: relative; align-self: start; }
.calc__sum b { display: block; font: 700 clamp(2.8rem, 7vw, 4.4rem)/1 var(--f-head); margin: 10px 0; }
.calc__sum p { font-size: 14px; color: #b9c6d4; }
.calc__save { color: #9fc0e6 !important; font-family: var(--f-mono); }
@media (min-width: 900px) { .calc { grid-template-columns: 1.4fr 1fr; gap: 40px; } .calc__sum { position: sticky; top: 110px; } }
.permit { display: grid; gap: 28px; background: #fff; color: var(--ink); padding: clamp(24px, 4vw, 44px); border: 3px double var(--navy); position: relative; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.permit__qr { width: 160px; height: 160px; padding: 8px; border: 2px solid var(--ink); background: #fff; }
.permit__qr .ph { width: 100%; height: 100%; }
.permit h2 { color: var(--ink); }
.permit .stamp { position: absolute; right: 18px; top: 18px; }
.stores { display: grid; gap: 12px; margin-top: 22px; }
.store { display: flex; gap: 14px; align-items: center; min-height: 56px; padding: 10px 20px; background: var(--ink); color: #fff !important; border: 2px solid var(--ink); font: 600 15px/1.1 var(--f-body); transition: transform .2s, background .2s; }
.store:hover { transform: translateY(-3px); background: var(--navy); border-color: var(--navy); }
.store i { font-size: 28px; }
.store small { display: block; font: 500 10px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
@media (min-width: 700px) { .permit { grid-template-columns: 180px 1fr; align-items: start; } .stores { grid-template-columns: 1fr 1fr; } }
.shield { display: grid; gap: 28px; padding: clamp(26px, 4vw, 48px); background: var(--night); color: #e8eef5; border-left: 6px solid var(--red); }
.shield__ico { font-size: 80px; color: #9fc0e6; }
.shield ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shield li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .22); font: 400 14px/1.5 var(--f-mono); }
.shield li i { color: #9fc0e6; margin-top: 4px; }
@media (min-width: 900px) { .shield { grid-template-columns: 140px 1fr 1fr; align-items: center; } }
.qcard { display: grid; gap: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 48px); }
@media (min-width: 900px) { .qcard { grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.clock { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.clock__c { min-width: 88px; padding: 18px 10px; background: var(--night); color: #fff; text-align: center; border: 1px solid #000; position: relative; }
.clock__c b { display: block; font: 400 clamp(1.6rem, 6vw, 2.6rem)/1 var(--f-pix); color: #ff8e87; }
.clock__c span { display: block; margin-top: 10px; font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa9b8; }
.notice18 { display: grid; gap: 0; border: 3px solid var(--ink); background: #fff; }
.notice18__bar { height: 22px; background: repeating-linear-gradient(-45deg, var(--red) 0 16px, var(--ink) 16px 32px); }
.notice18__in { display: grid; gap: 24px; padding: clamp(22px, 4vw, 44px); align-items: center; }
.notice18__badge { width: 120px; height: 120px; display: grid; place-items: center; border: 6px solid var(--red); color: var(--red); font: 700 3.2rem/1 var(--f-head); border-radius: 50%; }
.paybar { display: flex; flex-wrap: wrap; gap: 18px 30px; justify-content: center; align-items: center; font-size: 40px; color: var(--steel-d); }
@media (min-width: 768px) { .notice18__in { grid-template-columns: 140px 1fr auto; } }

/* ================= SERVICES ================= */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-height: 44px; padding: 10px 18px; border: 2px solid currentColor; background: transparent; color: inherit; font: 600 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.chip.is-on, .chip:hover { background: #fff; color: var(--ink); border-color: #fff; }
.reel { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 4px 24px; scrollbar-width: thin; }
.dos { flex: 0 0 82%; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); padding: 14px 14px 22px; position: relative; display: flex; flex-direction: column; gap: 12px; transition: transform .3s, box-shadow .3s; }
.dos::before { content: ''; position: absolute; left: 50%; top: -9px; width: 64px; height: 20px; margin-left: -32px; background: linear-gradient(180deg, #c3ccd5, #8996a2); border-radius: 3px; }
.dos:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.dos .ph { aspect-ratio: 4/3; margin-top: 6px; }
.dos h3 { font-size: 1.25rem; }
.dos p { font-size: 14.5px; color: var(--ink2); }
.dos__s { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); font: 600 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.dos__s b { color: var(--red); font-size: 14px; }
.dos[hidden] { display: none; }
@media (min-width: 640px) { .dos { flex-basis: 320px; } }
.phone-wrap { display: grid; gap: 36px; align-items: center; }
.phone { width: min(78vw, 290px); aspect-ratio: 9/18.5; margin-inline: auto; background: #0b0f14; border-radius: 38px; padding: 12px; border: 3px solid #394555; box-shadow: 0 40px 70px -30px rgba(10, 20, 40, .7), inset 0 0 0 2px #1b2430; position: relative; }
.phone::before { content: ''; position: absolute; left: 50%; top: 14px; width: 84px; height: 20px; margin-left: -42px; background: #000; border-radius: 12px; z-index: 3; }
.phone .ph { width: 100%; height: 100%; border-radius: 28px; }
.phone-callouts { display: grid; gap: 16px; }
.callout { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px; background: #fff; border: 1px solid var(--line); }
.callout i { width: 52px; height: 52px; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 20px; }
.callout p { font-size: 14.5px; color: var(--ink2); margin-top: 4px; }
.platforms { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: center; margin-top: 36px; font: 600 14px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.platforms span { display: inline-flex; gap: 10px; align-items: center; } .platforms i { font-size: 30px; color: var(--navy); }
@media (min-width: 1000px) { .phone-wrap { grid-template-columns: 1fr 300px 1fr; gap: 48px; } .phone-callouts--l { text-align: right; } }
.gest { display: grid; gap: 18px; counter-reset: g; }
.gest__s { position: relative; padding: 24px 22px 24px 22px; background: #fff; border: 1px solid var(--line); overflow: hidden; counter-increment: g; min-height: 200px; }
.gest__s::before { content: counter(g); position: absolute; right: 10px; top: -22px; font: 700 9rem/1 var(--f-head); color: var(--sheet2); z-index: 0; }
.gest__s > * { position: relative; z-index: 1; }
.gest__s i { font-size: 30px; color: var(--red); margin-bottom: 12px; display: block; }
.gest__s p { font-size: 14.5px; color: var(--ink2); margin-top: 8px; }
.drag { position: relative; height: 130px; margin-top: 30px; background: var(--sheet2); border: 2px dashed var(--steel); overflow: hidden; }
.drag__doc { position: absolute; left: 8%; top: 28px; width: 70px; height: 84px; background: #fff; border: 1px solid var(--steel); box-shadow: var(--shadow-s); animation: drag 3.6s ease-in-out infinite; }
.drag__doc::before { content: ''; position: absolute; inset: 14px 10px auto; height: 38px; background: repeating-linear-gradient(180deg, var(--sheet3) 0 6px, transparent 6px 12px); }
.drag__zone { position: absolute; right: 8%; top: 22px; width: 90px; height: 90px; border: 3px solid var(--navy); display: grid; place-items: center; color: var(--navy); font: 600 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
@keyframes drag { 0%, 10% { transform: translateX(0); } 60%, 100% { transform: translateX(calc(min(100vw, 560px) * .56)); } }
.tip { display: flex; gap: 18px; align-items: center; margin-top: 28px; padding: 20px 24px; background: var(--navy); color: #fff; }
.tip i { font-size: 28px; color: #9fc0e6; }
@media (min-width: 700px) { .gest { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .gest { grid-template-columns: repeat(4, 1fr); } }
.lstamps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lstamp { aspect-ratio: 1; display: grid; place-items: center; text-align: center; border: 4px double var(--navy); border-radius: 50%; color: var(--navy); font: 700 clamp(1.1rem, 4vw, 1.8rem)/1.1 var(--f-head); text-transform: uppercase; letter-spacing: .08em; transform: rotate(var(--rot, -8deg)); mix-blend-mode: multiply; position: relative; padding: 14px; }
.lstamp small { display: block; font: 500 10px/1.4 var(--f-mono); letter-spacing: .14em; margin-top: 6px; }
.lstamp:nth-child(2n) { --rot: 6deg; border-color: var(--red); color: var(--red); }
.lstamp:nth-child(3n) { --rot: -3deg; }
@media (min-width: 768px) { .lstamps { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .lstamps { grid-template-columns: repeat(6, 1fr); } }
.theater { position: relative; border: 10px solid #000; box-shadow: 0 40px 80px -30px #000; background: rgba(0, 0, 0, .35); aspect-ratio: 16/9; display: grid; place-items: center; backdrop-filter: blur(2px); }
.theater__btn { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 16px 28px; background: rgba(255, 255, 255, .95); color: var(--ink); border: 0; cursor: pointer; font: 600 13px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; transition: transform .2s; }
.theater__btn:hover { transform: scale(1.05); }
.theater__btn i { width: 36px; height: 36px; display: grid; place-items: center; background: var(--red); color: #fff; border-radius: 50%; }
.theater__lbl { position: absolute; left: 14px; bottom: 12px; font: 400 10px/1 var(--f-pix); color: #fff; }
.credits { margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 16px; }
.film-grid { display: grid; gap: 30px; }
@media (min-width: 900px) { .film-grid { grid-template-columns: 1.4fr 1fr; align-items: center; gap: 56px; } }
.stp { display: grid; gap: 18px; }
.stp__i { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.stp__i b { font: 700 3rem/1 var(--f-head); color: var(--red); }
.stp__i p { font-size: 15px; color: var(--ink2); margin-top: 6px; }
@media (min-width: 900px) { .stp { grid-template-columns: repeat(4, 1fr); gap: 28px; } .stp__i { grid-template-columns: 1fr; border-top: 2px solid var(--ink); } }
.pq { position: relative; background: #fff; border: 1px solid var(--line); padding: clamp(26px, 4vw, 52px); flex: 0 0 100%; scroll-snap-align: start; }
.pq blockquote { margin: 0; font: 400 clamp(1.2rem, 2.6vw, 1.9rem)/1.5 var(--f-type); }
.pq blockquote::before { content: '\201E'; display: block; font: 700 5rem/.6 var(--f-head); color: var(--red); }
.pq__src { margin-top: 22px; font: 600 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pq__src b { color: var(--ink); }
.pq-wrap { display: grid; gap: 28px; }
.pq-rate { padding: 24px; background: var(--ink); color: #fff; text-align: center; align-self: start; }
.pq-rate b { display: block; font: 700 4rem/1 var(--f-head); }
.pq-rate .stars { color: #ff8e87; }
.pq-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; }
.pq-track::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .pq-wrap { grid-template-columns: 1fr 220px; } }

/* ================= BLOG ================= */
.bfeat { display: grid; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.bfeat .ph { aspect-ratio: 16/10; }
.bfeat__b { padding: clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
@media (min-width: 900px) { .bfeat { grid-template-columns: 1.2fr 1fr; } .bfeat .ph { aspect-ratio: auto; min-height: 380px; } }
.board { display: grid; gap: 22px; padding: clamp(18px, 3vw, 36px); background: rgba(14, 18, 23, .55); border: 12px solid #1a2129; box-shadow: inset 0 0 40px rgba(0, 0, 0, .6); }
.pnote { position: relative; padding: 28px 20px 20px; background: #f1f4f8; color: var(--ink); font: 400 15px/1.55 var(--f-type); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .6); }
.pnote:nth-child(odd) { transform: rotate(-1.6deg); } .pnote:nth-child(even) { transform: rotate(1.3deg); background: #dbe8f5; }
.pnote .pin { left: 50%; top: 8px; margin-left: -8px; }
.pnote h3 { font-size: 1.1rem; margin-bottom: 8px; }
.pnote--ph { padding: 12px 12px 36px; background: #fff; }
.pnote--ph .ph { aspect-ratio: 4/3; }
.pnote--ph span { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font: 500 11px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 700px) { .board { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .board { grid-template-columns: repeat(4, 1fr); } }
.term { background: #070a0e; border: 1px solid #2a3440; box-shadow: 0 30px 60px -30px #000; max-width: 880px; margin-inline: auto; }
.term__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #141b23; border-bottom: 1px solid #2a3440; font: 500 12px/1 var(--f-mono); color: #8fa1b3; letter-spacing: .1em; }
.term__bar i { width: 10px; height: 10px; border-radius: 50%; background: #3b4856; }
.term__body { padding: 22px 20px 28px; min-height: 300px; font: 400 clamp(12.5px, 2.8vw, 15px)/1.75 var(--f-mono); color: #cfe0f2; }
.term__body p { margin: 0 0 6px; }
.term__body .who { color: #ff8e87; } .term__body .me { color: #9fc0e6; }
.quiz { max-width: 760px; margin-inline: auto; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(24px, 4vw, 48px); }
.quiz__q { font: 600 clamp(1.4rem, 3.4vw, 2.2rem)/1.15 var(--f-head); text-transform: uppercase; margin: 12px 0 22px; }
.quiz__opts { display: grid; gap: 12px; }
.quiz__o { width: 100%; text-align: left; min-height: 52px; padding: 14px 18px; background: #fff; border: 2px solid var(--ink); font: 500 15px/1.4 var(--f-body); cursor: pointer; transition: background .2s, color .2s, transform .2s; color: var(--ink); }
.quiz__o:hover { background: var(--ink); color: #fff; transform: translateX(6px); }
.quiz__prog { font: 600 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--muted); text-transform: uppercase; }
.quiz__res { display: none; text-align: center; padding: 10px 0; }
.quiz__res.is-on { display: block; animation: fade-up .5s both; }
.quiz__res .stamp { margin: 20px 0; }
.day3 { display: grid; }
.day3__f { min-height: 78svh; display: flex; align-items: flex-end; padding-block: 60px; background-size: cover; background-position: center; background-color: var(--night); color: #fff; position: relative; }
.day3__f .g-container { position: relative; z-index: 2; }
.day3__t { font: 400 14px/1 var(--f-pix); color: #ff8e87; margin-bottom: 18px; display: block; }
.day3__f h3 { font-size: clamp(2rem, 6vw, 4.4rem); margin-bottom: 14px; }
.day3__f p { max-width: 54ch; color: rgba(255, 255, 255, .85); }
.bmap { display: grid; gap: 28px; }
.bmap__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 74px; gap: 6px; padding: 14px; background: #eef2f6 repeating-linear-gradient(0deg, rgba(29, 53, 87, .12) 0 1px, transparent 1px 24px), repeating-linear-gradient(90deg, rgba(29, 53, 87, .12) 0 1px, transparent 1px 24px); border: 2px solid var(--navy); }
.bmap__b { display: grid; place-items: center; text-align: center; padding: 6px; border: 2px solid var(--navy); background: rgba(255, 255, 255, .85); font: 500 11px/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.bmap__b i { display: block; font-size: 16px; color: var(--red); margin-bottom: 4px; }
.bmap__b--river { grid-column: 1 / -1; background: repeating-linear-gradient(135deg, #cfe0f1 0 10px, #e2edf8 10px 20px); border-style: dashed; }
.bmap__b--gate { background: var(--navy); color: #fff; grid-column: span 2; } .bmap__b--gate i { color: #ff8e87; }
.legend { display: grid; gap: 12px; align-content: start; }
.legend li { display: flex; gap: 12px; align-items: center; list-style: none; font-size: 15px; }
.legend i { width: 36px; height: 36px; display: grid; place-items: center; background: var(--navy); color: #fff; flex: none; }
.gate-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--navy); background: #fff; font: 600 13px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.gate-status .dot { width: 14px; height: 14px; background: var(--navy); border-radius: 50%; animation: pulse 2s infinite; }
.gate-status.is-closed .dot { background: var(--red); }
@media (min-width: 900px) { .bmap { grid-template-columns: 1.6fr 1fr; } .bmap__grid { grid-auto-rows: 96px; } }
.visa { display: grid; gap: 28px; max-width: 980px; margin-inline: auto; background: #fff; border: 3px double var(--navy); padding: clamp(24px, 4vw, 52px); box-shadow: var(--shadow); position: relative; }
.visa__head { display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 2px solid var(--ink); padding-bottom: 14px; font: 600 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.visa .stamp { position: absolute; right: 24px; bottom: 90px; pointer-events: none; opacity: 0; }
.visa.is-sent .stamp { opacity: .9; }
.tagcloud { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.tagcloud a { padding: 8px 14px; border: 1px solid var(--ink); font: 500 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.tagcloud a:hover { background: var(--ink); color: #fff; }
.tagcloud a.xl { font-size: 18px; padding: 12px 20px; }
.rank { counter-reset: r; list-style: none; margin: 0; padding: 0; }
.rank li { counter-increment: r; display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); align-items: center; }
.rank li::before { content: counter(r, decimal-leading-zero); font: 700 2.4rem/1 var(--f-head); color: var(--red); }
.rank a { font: 600 1.15rem/1.3 var(--f-head); text-transform: uppercase; letter-spacing: .02em; }
.rank a:hover { color: var(--red); }
.rank span { display: block; font: 500 11px/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ================= FAQ ================= */
.helpsearch { position: relative; max-width: 640px; margin-top: 28px; }
.helpsearch input { width: 100%; min-height: 60px; padding: 16px 20px 16px 56px; font: 400 17px/1 var(--f-body); border: 2px solid var(--ink); background: #fff; }
.helpsearch input:focus { outline: none; box-shadow: 4px 4px 0 var(--red); }
.helpsearch i { position: absolute; left: 20px; top: 21px; color: var(--ink2); }
.faq-group { margin-bottom: 40px; }
.faq-group h3 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.faq-empty { display: none; padding: 20px; background: var(--red-soft); color: var(--red); font: 500 14px/1.4 var(--f-mono); }
.faq-empty.is-on { display: block; }
.hunt { display: grid; gap: 26px; }
.hunt__docs { display: grid; gap: 22px; }
.hdoc { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px; position: relative; }
.hdoc h3 { font-size: 1rem; letter-spacing: .12em; margin-bottom: 16px; color: var(--steel-d); }
.hfield { display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 8px; border: 1px dashed var(--steel); background: transparent; font: 400 15px/1.3 var(--f-mono); cursor: pointer; color: var(--ink); position: relative; background-image: linear-gradient(rgba(29, 53, 87, .22), rgba(29, 53, 87, .22)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .5s, border-color .2s; min-height: 44px; }
.hfield small { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hfield.is-found { background-size: 100% 100%; border-color: var(--navy); border-style: solid; }
.hfield.is-miss { border-color: var(--red); background-image: linear-gradient(rgba(179, 38, 30, .15), rgba(179, 38, 30, .15)); background-size: 100% 100%; }
.hunt__panel { display: grid; gap: 14px; align-content: start; }
.hunt__stats { display: flex; gap: 12px; }
.hunt__stats div { flex: 1; padding: 16px; background: var(--ink); color: #fff; text-align: center; }
.hunt__stats b { display: block; font: 400 1.6rem/1 var(--f-pix); color: #9fc0e6; }
.hunt__stats span { font: 500 10px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #9aa9b8; display: block; margin-top: 8px; }
.hunt__res { display: none; padding: 20px; border: 2px solid var(--navy); background: #fff; }
.hunt__res.is-on { display: block; animation: fade-up .4s both; }
@media (min-width: 900px) { .hunt { grid-template-columns: 1fr 320px; } .hunt__docs { grid-template-columns: 1fr 1fr; } }
.cit { display: grid; gap: 26px; }
.citt { width: 100%; border-collapse: collapse; font: 400 14px/1.5 var(--f-mono); }
.citt th { text-align: left; padding: 14px; background: rgba(255, 255, 255, .08); font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #ff8e87; }
.citt td { padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, .14); vertical-align: top; }
.citt td:last-child { color: #ff8e87; white-space: nowrap; }
.warnbar { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 2px solid #ff8e87; background: rgba(179, 38, 30, .25); font: 600 14px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 640px) { .citt, .citt tbody, .citt tr, .citt td { display: block; } .citt thead { display: none; } .citt tr { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .2); } .citt td { border: 0; padding: 4px 0; } }
.glos { display: grid; gap: 0; margin: 0; border: 2px solid var(--ink); background: #fff; }
.glos__r { display: grid; gap: 4px; padding: 16px 18px; border-bottom: 1px dashed var(--steel); }
.glos__r:last-child { border-bottom: 0; }
.glos dt { font: 600 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.glos dd { margin: 0; font-size: 15px; color: var(--ink2); }
.glos__r--risk { background: var(--red-soft); } .glos__r--risk dt { color: var(--red); }
@media (min-width: 768px) { .glos__r { grid-template-columns: 240px 1fr; gap: 24px; } }
.minitest { margin-top: 28px; padding: 24px; background: var(--ink); color: #fff; }
.minitest h3 { margin-bottom: 14px; }
.minitest__o { display: grid; gap: 10px; margin-top: 14px; }
.minitest__o button { min-height: 48px; text-align: left; padding: 12px 16px; background: transparent; border: 2px solid rgba(255, 255, 255, .5); color: #fff; font: 500 14px/1.4 var(--f-body); cursor: pointer; }
.minitest__o button.ok { background: var(--navy); border-color: #9fc0e6; } .minitest__o button.bad { background: var(--red); border-color: var(--red); }
.support { display: grid; gap: 22px; padding: clamp(24px, 4vw, 44px); background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--navy); box-shadow: var(--shadow); }
.support dl { margin: 0; display: grid; gap: 12px; }
.support dt { font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.support dd { margin: 2px 0 0; font-size: 17px; }
@media (min-width: 800px) { .support { grid-template-columns: 1fr 1fr; align-items: center; } }
.endings { display: grid; gap: 28px; }
.nodes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.node { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--night2); border: 1px solid rgba(255, 255, 255, .22); color: #fff; cursor: pointer; font: 400 12px/1 var(--f-pix); transition: transform .2s, border-color .2s; min-height: 44px; }
.node:hover { transform: scale(1.06); border-color: #fff; }
.node i { position: absolute; right: 6px; bottom: 6px; font-size: 11px; color: rgba(255, 255, 255, .6); }
.node--good { border-bottom: 3px solid #8fb4e3; } .node--bad { border-bottom: 3px solid #ff6b63; } .node--neu { border-bottom: 3px solid #9aa7b4; }
.node::after { content: ''; position: absolute; left: 14%; right: 14%; top: 50%; height: 9px; background: #000; opacity: .8; transform: rotate(-4deg); }
.sidepanel { padding: 24px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .05); align-self: start; }
.sidepanel b { display: block; font: 400 2rem/1 var(--f-pix); color: #ff8e87; margin-bottom: 12px; }
.leg { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: 0 0 22px; padding: 0; list-style: none; font: 500 12px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.leg li { display: flex; align-items: center; gap: 8px; } .leg span { width: 14px; height: 14px; display: block; }
@media (min-width: 700px) { .nodes { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1000px) { .endings { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.specs { display: grid; gap: 14px; }
.spec { padding: 22px; background: #fff; border: 1px solid var(--line); display: grid; gap: 6px; }
.spec b { font: 700 2rem/1 var(--f-head); color: var(--navy); }
.spec span { font: 500 12px/1.5 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.spec p { font-size: 14px; color: var(--ink2); }
@media (min-width: 640px) { .specs { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .specs { grid-template-columns: repeat(4, 1fr); } }
.trouble { counter-reset: t; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.trouble li { counter-increment: t; display: grid; grid-template-columns: 54px 1fr; gap: 16px; align-items: start; padding: 18px; background: #fff; border-left: 5px solid var(--red); }
.trouble li::before { content: counter(t); font: 700 2.2rem/1 var(--f-head); color: var(--red); }
.trouble p { font-size: 15px; color: var(--ink2); }

/* ================= CONTACT ================= */
.cinfo { display: grid; gap: 14px; margin-top: 30px; }
.cinfo__i { display: grid; grid-template-columns: 48px 1fr; gap: 14px; padding: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); align-items: center; font-size: 15px; }
.cinfo__i i { width: 48px; height: 48px; display: grid; place-items: center; background: var(--red); color: #fff; }
.cinfo__i small { display: block; font: 500 10px/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
@media (min-width: 800px) { .cinfo { grid-template-columns: repeat(2, 1fr); } }
.mform { display: grid; gap: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); padding: clamp(22px, 4vw, 52px); }
.mform__side { align-self: start; }
.optgrid { display: grid; gap: 10px; }
.opt { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--line); cursor: pointer; min-height: 52px; transition: border-color .2s, background .2s; font-size: 15px; }
.opt:has(input:checked) { border-color: var(--navy); background: #f1f6fb; }
.opt input { accent-color: var(--navy); width: 18px; height: 18px; }
.mform__nav { display: flex; gap: 12px; flex-wrap: wrap; }
@media (min-width: 900px) { .mform { grid-template-columns: 1fr 1.4fr; gap: 60px; } .optgrid { grid-template-columns: 1fr 1fr; } }
.mapframe { border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; padding: 8px; }
.mapframe iframe { width: 100%; height: clamp(300px, 50vw, 460px); border: 0; display: block; filter: grayscale(.5) contrast(1.05); }
.mapgrid { display: grid; gap: 28px; }
@media (min-width: 900px) { .mapgrid { grid-template-columns: 1fr 1.6fr; align-items: center; gap: 56px; } }
.dept { display: grid; gap: 8px; }
.dept i { font-size: 26px; color: var(--navy); }
.dept small { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hours { width: 100%; border-collapse: collapse; font: 400 15px/1.5 var(--f-mono); background: #fff; border: 1px solid var(--line); }
.hours td { padding: 14px 18px; border-bottom: 1px dashed var(--line); }
.hours td:last-child { text-align: right; font-weight: 600; }
.hours tr.is-today { background: var(--sky); }
.hours .closed { color: var(--red); }
.route { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.route li { position: relative; padding: 0 0 28px 52px; }
.route li::before { content: ''; position: absolute; left: 16px; top: 32px; bottom: 0; border-left: 2px dashed var(--steel); }
.route li:last-child::before { display: none; }
.route li b { position: absolute; left: 0; top: 0; width: 34px; height: 34px; display: grid; place-items: center; background: var(--navy); color: #fff; font: 600 14px/1 var(--f-mono); }
.route p { font-size: 15px; color: var(--ink2); margin-top: 4px; }
.sla { display: grid; gap: 18px; }
.sla__s { padding: 26px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); }
.sla__s b { display: block; font: 700 3.4rem/1 var(--f-head); color: #ff8e87; }
.sla__s p { font-size: 15px; margin-top: 8px; }
@media (min-width: 800px) { .sla { grid-template-columns: repeat(3, 1fr); } }
.person { text-align: left; display: grid; gap: 12px; }
.person .ph { aspect-ratio: 1; filter: grayscale(.3); border: 1px solid var(--line); }
.person small { font: 500 11px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.soc { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.soc a { width: 64px; height: 64px; display: grid; place-items: center; border: 2px solid currentColor; font-size: 24px; transition: background .2s, color .2s, transform .2s; }
.soc a:hover { background: #fff; color: var(--ink); transform: translateY(-4px); }

/* ================= THANKS ================= */
.tk-ticket { max-width: 560px; margin: 0 auto; }
.tk-code { font: 700 clamp(2rem, 7vw, 3.4rem)/1 var(--f-head); letter-spacing: .1em; color: var(--navy); }
.nextsteps { display: grid; gap: 18px; counter-reset: s; }
.nextsteps li { counter-increment: s; list-style: none; padding: 24px; background: #fff; border: 1px solid var(--line); position: relative; }
.nextsteps li::before { content: counter(s, decimal-leading-zero); font: 700 2.6rem/1 var(--f-head); color: var(--red); display: block; margin-bottom: 8px; }
.nextsteps p { font-size: 15px; color: var(--ink2); }
@media (min-width: 800px) { .nextsteps { grid-template-columns: repeat(3, 1fr); } }
/* ================= EXTRAS ================= */
.btn-row--c { justify-content: center; }
.fb { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.fb .tile { min-height: 200px; }
.fb__a, .fb__f { grid-column: span 2; }
@media (min-width: 1024px) {
  .fb { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 210px; }
  .fb__a { grid-column: span 3; grid-row: span 1; }
  .fb__b { grid-column: span 3; }
  .fb__c { grid-column: span 2; }
  .fb__d { grid-column: span 2; }
  .fb__e { grid-column: span 2; }
  .fb__f { grid-column: span 6; min-height: 0; }
}

.facts { display: grid; gap: 0; margin: 28px 0 0; border-top: 2px solid var(--ink); }
.facts > div { display: flex; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px dashed var(--steel); }
.facts dt { font: 500 12px/1.5 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font: 600 15px/1.5 var(--f-body); text-align: right; }
.svc-quote { margin: 0; max-width: 900px; margin-inline: auto; }
.svc-quote p { font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1.3; }
.svc-price { max-width: 720px; margin-inline: auto; padding-top: 44px; position: relative; overflow: hidden; }
.svc-price h2 { color: #fff; }
.svc-price p { color: #d3e0ef; }
.svc-price__stamp { position: absolute; right: 18px; top: 18px; }
.art { max-width: 760px; margin-inline: auto; }
.art--wide { max-width: none; margin: 0; }
.art h2 { margin-bottom: 22px; }
.art p { font-size: 17px; line-height: 1.8; color: var(--ink2); margin: 0 0 1.1em; }
.art a.link { color: var(--navy); }
.art__q { margin: 30px 0; padding: 8px 0 8px 22px; border-left: 5px solid var(--red); font: 400 clamp(1.2rem, 2.6vw, 1.7rem)/1.4 var(--f-type); color: var(--ink); }
.art__list { margin: 18px 0 1.1em; }
.art__pull { font-size: clamp(1.4rem, 3.6vw, 2.6rem); line-height: 1.3; max-width: 28ch; margin-inline: auto; }
.art-title { max-width: 18ch; font-size: clamp(2.2rem, 6vw, 4.4rem); }
.author { display: grid; gap: 26px; max-width: 900px; margin-inline: auto; padding: clamp(22px, 4vw, 44px); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); align-items: center; }
.author__ph { max-width: 200px; }
@media (min-width: 700px) { .author { grid-template-columns: 200px 1fr; gap: 40px; } }
.legal-addr { display: grid; gap: 6px; font-style: normal; font-size: 15px; }
.legal-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.legal-links a { display: block; padding: 12px 0; border-bottom: 1px dashed rgba(255, 255, 255, .35); font: 500 14px/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.legal-links a:hover { color: #ff9d97; }
.stamp-pad { position: relative; height: clamp(220px, 40vw, 340px); max-width: 820px; margin-inline: auto; border: 3px dashed rgba(255, 255, 255, .45); background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 6px); cursor: crosshair; overflow: hidden; touch-action: manipulation; }
.stamp-pad__hint { position: absolute; inset: 0; display: grid; place-items: center; font: 400 12px/1 var(--f-pix); color: rgba(255, 255, 255, .5); pointer-events: none; }
.stamp-pad .stamp { position: absolute; margin: -22px 0 0 -70px; pointer-events: none; mix-blend-mode: normal; background: rgba(255, 255, 255, .06); font-size: 1.1rem; padding: 6px 14px; border-width: 3px; }
.crumbs a { color: inherit; }
main p { overflow-wrap: break-word; }
.pagehero .crumbs { margin-bottom: 16px; }
.page-legal .rank a, .page-legal .rank li::before { font-size: inherit; }
@media (max-width: 480px) { .g-footer__reg { grid-template-columns: 1fr 1fr; } .stamp--round { width: 112px; height: 112px; font-size: 13px; } }

[hidden] { display: none !important; }
section[id], main [id] { scroll-margin-top: 96px; }
.field__err.is-show { display: block; font-size: 13px; color: var(--red); font-family: var(--f-mono); margin-top: 8px; }
.fstep legend { margin-bottom: 14px; padding: 0; }
.fstep { border: 0; margin: 0; padding: 0; min-width: 0; }
.sec--vid .lead, .sec--dark .lead, .sec--navy .lead, .sec--red .lead, .hz .lead, .card--dark .lead { color: rgba(255, 255, 255, .84); }
.sec--dark .kicker, .sec--navy .kicker, .sec--img .kicker, .sec--vid .kicker, .sec--red .kicker, .hz .kicker { color: #ff8e87; }
.sec--dark .kicker::before, .sec--navy .kicker::before, .sec--img .kicker::before, .sec--vid .kicker::before, .sec--red .kicker::before, .hz .kicker::before { background: #ff8e87; }
.sec--red .kicker { color: #fff; } .sec--red .kicker::before { background: #fff; }
.sec--img .bignum, .sec--vid .bignum { border-color: #fff; }
.sec--img .bignum b { -webkit-text-stroke-color: #fff; }
.sec--img .bignum.is-in b { color: #fff; }
.sec--img .bignum p { color: rgba(255, 255, 255, .85); }
.sec--dark .muted, .sec--navy .muted { color: #a9b7c6; }
.sec--navy .card--dark { background: rgba(255, 255, 255, .06); }
.sec--dark .card--dark .tag { color: #fff; }
.sec--paper .shield .link--w { color: #fff; }
.sec--navy .pack__price small, .sec--dark .pack__price small { opacity: .75; }
.sec--navy .card--dark .pack__price { color: #fff; }
.sec--dark .tcard, .sec--dark .dos { color: var(--ink); }
.sec--dark .dos h3, .sec--dark .dos p { color: var(--ink); }
.sec--dark .dos p { color: var(--ink2); }
.sec--dark .tag { color: #fff; }
.sec--dark .dos .tag { color: var(--ink); }
.sec--dark .chip.is-on { color: var(--ink); }
.sec--dark .reel + .mono { color: #a9b7c6; }
.sec--img .pagehero__in, .sec--vid .pagehero__in { align-items: end; }

main .sec--img a.link, main .sec--vid a.link, main .sec--dark a.link, main .sec--navy a.link, main .hz a.link, main .sec--red a.link, main .card--dark a.link { color: #fff; border-color: rgba(255, 255, 255, .55); }
main .sec--img a.link:hover, main .sec--vid a.link:hover, main .sec--dark a.link:hover, main .sec--navy a.link:hover { color: #ff9d97; border-color: #ff9d97; }
.mani__word .clip-line > span { color: inherit; }
.mani__word .clip-line:last-child > span { color: #ff8e87; }
.decide__big { font-size: clamp(2rem, 5.2vw, 4.6rem); overflow-wrap: anywhere; }
.decide__half .lead { color: rgba(255, 255, 255, .9); }
.mode--paper, .mode--paper h3, .mode--paper p, .mode--paper li { color: var(--ink); }
.mode--paper .mode__list b { color: var(--red); }
.mode--dark { color: #e9eff5; }
@media (min-width: 900px) { .modes[data-active="story"] .mode--dark, .modes[data-active="endless"] .mode--paper { opacity: .62; } }

.glitch::before, .glitch::after { opacity: 0; }
@keyframes glitch-a { 0%, 90%, 100% { opacity: 0; transform: translate(0); } 91% { opacity: 1; transform: translate(-5px, 1px); } 94% { opacity: 1; transform: translate(4px, -1px); } 96% { opacity: 0; } }
@keyframes glitch-b { 0%, 86%, 100% { opacity: 0; transform: translate(0); } 87% { opacity: 1; transform: translate(5px, -1px); } 90% { opacity: 1; transform: translate(-4px, 1px); } 93% { opacity: 0; } }
.rpage, .rpage h3 { color: var(--ink); }
.plaq, .plaq h3, .plaq-main, .plaq-main h3 { color: var(--ink); }

.vid-bg video { filter: grayscale(.9) contrast(1.05) brightness(.9); }
.vid-bg::after { background: linear-gradient(rgba(10, 22, 42, .72), rgba(8, 12, 18, .8)); }
.vid-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--navy); mix-blend-mode: color; opacity: .55; pointer-events: none; }
.vid-bg::after { z-index: 2; }

.sec--img::before, .hero__visual::before, .tile--bg::before, .day3__f::before, .g-footer::before { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--navy); mix-blend-mode: color; opacity: .5; pointer-events: none; }
.hero__visual > *, .tile--bg > *, .g-footer > * { position: relative; z-index: 2; }
.hero__visual > .stamp, .hero__visual > .hero__corner { position: absolute; }
.tile--bg > i.fp { position: absolute; }
.ph::after, .poster::after, .film__main .ph::after { content: ''; position: absolute; inset: 0; background: var(--navy); mix-blend-mode: color; opacity: .32; pointer-events: none; z-index: 1; }
.poster__txt { z-index: 2; }
.ph img { filter: saturate(.8); }
.leg .node--good { background: #8fb4e3; border: 0; } .leg .node--bad { background: #ff6b63; border: 0; } .leg .node--neu { background: #9aa7b4; border: 0; }
.leg span { border-radius: 2px; }

.cols > *, .split > *, .desk > *, .film > *, .hunt > *, .hunt__docs > *, .calc > *, .ledger-wrap > *, .press > *, .wall__grid > *, .anat > *, .mform > *, .endings > *, .pq-wrap > *, .phone-wrap > *, .bmap > *, .mapgrid > *, .shield > *, .rules > *, .creator__in > *, .pagehero__in > *, .qcard > *, .cit > *, .support > *, .film-grid > * { min-width: 0; }
.svc-price { overflow: visible; }