/* ==========================================================================
   Textile Design Rating — landing
   ========================================================================== */
@property --a1 { syntax: '<color>'; inherits: true; initial-value: #ff6a4d; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #7c6cff; }
@property --a3 { syntax: '<color>'; inherits: true; initial-value: #19d3c0; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --ink: #0c0912;
  --ink2: #140f1e;
  --ink3: #1d1530;
  --line: rgba(255, 255, 255, .09);
  --line2: rgba(255, 255, 255, .16);
  --tx: #f4ede4;
  --tx2: rgba(244, 237, 228, .8);
  --tx3: rgba(244, 237, 228, .6);
  --coral: #ff6a4d;
  --amber: #ffc24b;
  --rose: #ff9fb3;
  --teal: #19d3c0;
  --violet: #8f7bff;
  --pink: #ff4d8d;
  --a1: #ff6a4d; --a2: #8f7bff; --a3: #19d3c0;
  --head: 64px;
  --r: 22px;
  --wrap: 1200px;
  --pad: clamp(18px, 4vw, 48px);
  --f-mega: 'Unbounded', 'Arial Black', sans-serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Manrope', 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  transition: --a1 1.4s var(--ease), --a2 1.4s var(--ease), --a3 1.4s var(--ease);
}
body[data-theme="coral"] { --a1: #ff6a4d; --a2: #ffc24b; --a3: #ff4d8d; }
body[data-theme="teal"] { --a1: #19d3c0; --a2: #8f7bff; --a3: #3aa0ff; }
body[data-theme="violet"] { --a1: #8f7bff; --a2: #ff4d8d; --a3: #19d3c0; }
body[data-theme="amber"] { --a1: #ffc24b; --a2: #ff6a4d; --a3: #8f7bff; }
body[data-theme="rose"] { --a1: #ff9fb3; --a2: #8f7bff; --a3: #ffc24b; }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--head) + 20px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--tx);
  font: 400 17px/1.65 var(--f-body);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-color: color-mix(in oklab, var(--a1) 70%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--a1); }
b, strong { font-weight: 700; color: #fff; }
::selection { background: var(--a1); color: #000; }
:focus-visible { outline: 2px solid var(--a3); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Custom scrollbar (desktop) ---------- */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--a1) var(--ink); }
  ::-webkit-scrollbar { width: 12px; }
  ::-webkit-scrollbar-track { background: linear-gradient(180deg, #0c0912, #1d1530 50%, #0c0912); border-left: 1px solid var(--line); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--coral), var(--amber) 35%, var(--pink) 65%, var(--violet));
    border-radius: 12px; border: 3px solid #140f1e;
  }
  ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--teal), var(--violet)); }
}

/* ---------- Background waves (fixed) ---------- */
.bg-waves { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
  background: linear-gradient(160deg, #0c0912 0%, #140c22 45%, #0d0f1d 100%); }
.bg-waves::before { content: ''; position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 15% 20%, color-mix(in oklab, var(--a1) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 85% 75%, color-mix(in oklab, var(--a2) 20%, transparent), transparent 70%),
    radial-gradient(35% 30% at 60% 10%, color-mix(in oklab, var(--a3) 14%, transparent), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate; }
#bgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; filter: blur(1px) saturate(.9); }
.bg-waves svg { mix-blend-mode: screen; }
.bg-waves svg { position: absolute; left: 0; width: 200%; height: 46vh; bottom: -4vh; opacity: .55; }
.bg-waves svg.w2 { bottom: -10vh; opacity: .35; animation-duration: 38s !important; }
.bg-waves .wv { animation: waveX 26s linear infinite; }
.bg-waves .w2 .wv { animation-direction: reverse; }
.bg-grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes drift { to { transform: translate3d(4%, -3%, 0) rotate(6deg) scale(1.08); } }
@keyframes waveX { to { transform: translateX(-50%); } }

/* ---------- Header + progress ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--head);
  display: flex; align-items: center; gap: 16px; padding: 0 var(--pad);
  background: linear-gradient(180deg, rgba(12, 9, 18, .92), rgba(12, 9, 18, .72));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 15px/1 var(--f-mega); letter-spacing: -.02em; white-space: nowrap; }
.logo-mark { width: 78px; height: 30px; flex: none; overflow: visible; margin-left: -6px; }
.logo-tx { display: block; }
.logo-tx i { font-style: normal; color: var(--a1); margin: 0 1px; transition: color 1s; }
.logo:hover .logo-mark { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--a1) 60%, transparent)); }
.logo small { display: block; font: 500 10px/1.2 var(--f-mono); color: var(--tx3); letter-spacing: .08em; margin-top: 3px; }
.hdr-nav { margin-left: auto; display: flex; gap: 4px; }
.hdr-nav a { text-decoration: none; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 99px; color: var(--tx2); transition: .25s; }
.hdr-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.hdr-toc { display: none; align-items: center; gap: 8px; margin-left: auto; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font: 600 13px/1 var(--f-body); }
.hdr-toc .ctr { font-family: var(--f-mono); color: var(--a1); }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 0 0 var(--a1); animation: blink 1.6s infinite; flex: none; }
@keyframes blink { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--a1) 80%, transparent); opacity: 1; } 50% { opacity: .35; } 70% { box-shadow: 0 0 0 10px transparent; } 100% { opacity: 1; box-shadow: 0 0 0 0 transparent; } }
.progress { position: fixed; top: var(--head); left: 0; right: 0; height: 4px; z-index: 59; background: rgba(255, 255, 255, .05); }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coral), var(--amber), var(--pink), var(--violet), var(--teal)); background-size: 200% 100%; animation: shimmer 4s linear infinite; box-shadow: 0 0 14px var(--a1); border-radius: 0 4px 4px 0; position: relative; }
.progress i::after { content: ''; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff, 0 0 24px var(--a1); }
.progress-sec { position: fixed; top: calc(var(--head) + 4px); left: 0; right: 0; height: 2px; z-index: 58; display: flex; gap: 2px; pointer-events: none; }
.progress-sec span { flex: 1; background: rgba(255, 255, 255, .06); transition: background .4s; }
.progress-sec span.on { background: color-mix(in oklab, var(--a1) 55%, transparent); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- TOC rail ---------- */
.toc { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50; }
.toc ol { list-style: none; margin: 0; padding: 10px 6px; display: flex; flex-direction: column; gap: 4px;
  background: rgba(20, 15, 30, .55); border: 1px solid var(--line); border-radius: 99px; backdrop-filter: blur(10px); }
.toc a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; text-decoration: none; position: relative; height: 18px; }
.toc a .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: .35s var(--ease); flex: none; margin: 0 5px; }
.toc a .lbl { position: absolute; right: 30px; white-space: nowrap; font: 600 12.5px/1 var(--f-body); padding: 7px 12px; border-radius: 99px;
  background: rgba(20, 15, 30, .95); border: 1px solid var(--line2); opacity: 0; transform: translateX(8px); pointer-events: none; transition: .25s var(--ease); }
.toc a .lbl em { font: 500 11px var(--f-mono); color: var(--a1); font-style: normal; margin-right: 6px; }
.toc a:hover .lbl, .toc a.on .lbl { opacity: 1; transform: none; }
.toc:hover a.on:not(:hover) .lbl { opacity: 0; }
.toc a.on .dot { background: var(--a1); box-shadow: 0 0 0 4px color-mix(in oklab, var(--a1) 25%, transparent), 0 0 16px var(--a1); transform: scale(1.25); }
.toc a.past .dot { background: color-mix(in oklab, var(--a1) 50%, #fff 10%); }
.toc-pct { text-align: center; font: 600 10px var(--f-mono); color: var(--tx3); margin-top: 8px; }

/* Mobile TOC sheet */
.toc-sheet { position: fixed; inset: 0; z-index: 80; display: none; }
.toc-sheet.open { display: block; }
.toc-sheet .scrim { position: absolute; inset: 0; background: rgba(5, 3, 10, .6); backdrop-filter: blur(6px); animation: fade .3s; }
.toc-sheet .panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto; padding: 18px 18px 30px;
  background: linear-gradient(180deg, #1d1530, #0c0912); border-radius: 26px 26px 0 0; border-top: 1px solid var(--line2); animation: up .4s var(--ease); }
.toc-sheet h3 { margin: 4px 4px 14px; font: 700 18px var(--f-mega); display: flex; justify-content: space-between; align-items: center; }
.toc-sheet h3 button { background: rgba(255,255,255,.08); border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 22px; }
.toc-sheet ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc-sheet a { display: flex; gap: 12px; align-items: center; padding: 11px 12px; border-radius: 14px; text-decoration: none; font-weight: 600; font-size: 15px; }
.toc-sheet a em { font: 500 12px var(--f-mono); color: var(--tx3); font-style: normal; width: 22px; }
.toc-sheet a.on { background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 30%, transparent), transparent); }
.toc-sheet a.on em { color: var(--a1); }
.toc-sheet a.on::after { content: 'вы здесь'; margin-left: auto; font: 600 10px var(--f-mono); text-transform: uppercase; color: var(--a1); letter-spacing: .08em; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }

/* ---------- Layout ---------- */
main { position: relative; }
.sec { position: relative; padding: clamp(70px, 11vw, 150px) 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); position: relative; }
.sec + .sec::before { content: ''; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); margin-bottom: 18px; }
.kicker b { color: var(--a1); font-weight: 600; }
.kicker .ln { width: 40px; height: 1px; background: linear-gradient(90deg, var(--a1), transparent); }

/* Mega editorial heading — full width, each line fitted by JS */
.mega { margin: 0 0 clamp(24px, 4vw, 48px); font-family: var(--f-mega); font-weight: 800; text-transform: uppercase; letter-spacing: -.045em; line-height: .86; padding: 0 var(--pad); width: 100%; }
.mega .l { display: block; white-space: nowrap; font-size: 12vw; width: max-content; max-width: 100%;
  background: linear-gradient(100deg, #fff 0%, #fff 30%, var(--a1) 50%, var(--a2) 65%, #fff 85%); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: megaFlow 9s ease-in-out infinite; }
.mega .l.out { -webkit-text-stroke: 1.5px color-mix(in oklab, var(--tx) 70%, transparent); background: none; color: transparent; animation: none; }
.mega .l.ser { font-family: var(--f-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -.02em; line-height: .95; }
.mega .l:nth-child(2) { animation-delay: -2s; }
.mega .l:nth-child(3) { animation-delay: -4s; }
.mega.right .l { margin-left: auto; }
.mega.center .l { margin-left: auto; margin-right: auto; }
@keyframes megaFlow { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.h2-full { font: 600 clamp(19px, 2.2vw, 26px)/1.3 var(--f-body); margin: 0 0 18px; max-width: 820px; color: #fff; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--tx2); max-width: 760px; text-wrap: pretty; margin: 0 0 1.2em; }
p { text-wrap: pretty; }
.muted { color: var(--tx3); font-size: 14px; }
h3 { font: 700 clamp(19px, 2vw, 24px)/1.25 var(--f-body); margin: 0 0 10px; letter-spacing: -.01em; }
.ser-i { font-family: var(--f-serif); font-style: italic; font-weight: 500; }

/* ---------- Icons ---------- */
.ic { width: 44px; height: 44px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; overflow: visible; }
.ic.g1 { stroke: url(#g1); } .ic.g2 { stroke: url(#g2); } .ic.g3 { stroke: url(#g3); } .ic.g4 { stroke: url(#g4); }
.ic .f { stroke: none; opacity: .28; }
.ic.g1 .f { fill: url(#g1); } .ic.g2 .f { fill: url(#g2); } .ic.g3 .f { fill: url(#g3); } .ic.g4 .f { fill: url(#g4); }
.ic.sm { width: 26px; height: 26px; stroke-width: 2.6; }
.ic.lg { width: 64px; height: 64px; stroke-width: 1.8; }
.ic-badge { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; flex: none;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--line2); position: relative; }
.ic-badge::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang), transparent 70%, var(--a1), transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 4s linear infinite; opacity: 0; transition: opacity .3s; }
*:hover > .ic-badge::after, .ic-badge:hover::after { opacity: 1; }
@keyframes spin { to { --ang: 360deg; } }

/* ---------- Buttons ---------- */
.btn { --bx: 50%; --by: 50%; position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; min-height: 52px; border-radius: 99px; border: 0;
  font: 700 15px/1 var(--f-body); text-decoration: none; color: #120c18; overflow: hidden; isolation: isolate;
  background: linear-gradient(110deg, var(--coral), var(--amber) 50%, var(--rose)); background-size: 200% 100%;
  box-shadow: 0 10px 30px -10px color-mix(in oklab, var(--a1) 80%, transparent); transition: transform .3s var(--ease), background-position .6s, box-shadow .3s; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px circle at var(--bx) var(--by), rgba(255,255,255,.7), transparent 60%); opacity: 0; transition: opacity .3s; }
.btn:hover { background-position: 100% 0; color: #120c18; box-shadow: 0 16px 40px -10px color-mix(in oklab, var(--a1) 90%, transparent); }
.btn:hover::before { opacity: 1; }
.btn:active { transform: scale(.96); }
.btn .arr { transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(5px) rotate(-8deg); }
.btn.ghost { background: rgba(255,255,255,.05); color: var(--tx); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--a1); color: #fff; }
.btn.sm { padding: 11px 18px; min-height: 44px; font-size: 14px; }
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255,255,255,.6); animation: rip .7s ease-out forwards; pointer-events: none; z-index: 0; }
@keyframes rip { to { transform: scale(4); opacity: 0; } }
.burst { position: fixed; pointer-events: none; z-index: 200; width: 8px; height: 22px; border-radius: 4px; }

/* ---------- Cards / glass ---------- */
.glass { background: linear-gradient(150deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(8px); position: relative; }
.spot { --mx: 50%; --my: 50%; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx) var(--my), color-mix(in oklab, var(--a1) 14%, transparent), transparent 60%); opacity: 0; transition: opacity .4s; }
.spot:hover::before { opacity: 1; }
.tilt { transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in { opacity: 1; transform: none; }
.rv.l { transform: translateX(-40px); } .rv.r { transform: translateX(40px); } .rv.s { transform: scale(.88); }
.rv.l.in, .rv.r.in, .rv.s.in { transform: none; }
.mega .l { transform: translateY(40%); opacity: 0; transition: transform 1.1s var(--ease), opacity 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.mega.in .l { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .rv, .mega .l { opacity: 1 !important; transform: none !important; transition: none; } * { animation-duration: .001s !important; } }

/* ---------- HERO ---------- */
.hero { min-height: 100svh; padding: calc(var(--head) + 30px) 0 40px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-blobs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: .75; }
.hero-blobs i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.hero-blobs i:nth-child(1) { width: 60vmax; height: 60vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle, #ff6a4d 0%, rgba(255,106,77,0) 65%); animation: blobA 22s ease-in-out infinite alternate; }
.hero-blobs i:nth-child(2) { width: 55vmax; height: 55vmax; right: -20vmax; top: -10vmax; background: radial-gradient(circle, #8f7bff 0%, rgba(143,123,255,0) 65%); animation: blobB 26s ease-in-out infinite alternate; }
.hero-blobs i:nth-child(3) { width: 45vmax; height: 45vmax; left: 25%; bottom: -25vmax; background: radial-gradient(circle, #ff4d8d 0%, rgba(255,77,141,0) 65%); animation: blobC 19s ease-in-out infinite alternate; }
.hero-blobs i:nth-child(4) { width: 34vmax; height: 34vmax; right: 10%; bottom: -8vmax; background: radial-gradient(circle, #ffc24b 0%, rgba(255,194,75,0) 65%); animation: blobA 30s ease-in-out infinite alternate-reverse; opacity: .7; }
.hero-blobs i:nth-child(5) { width: 30vmax; height: 30vmax; left: 8%; top: 40%; background: radial-gradient(circle, #19d3c0 0%, rgba(25,211,192,0) 65%); animation: blobB 24s ease-in-out infinite alternate-reverse; opacity: .55; }
@keyframes blobA { to { transform: translate(14vw, 10vh) scale(1.25); } }
@keyframes blobB { to { transform: translate(-16vw, 14vh) scale(.85); } }
@keyframes blobC { to { transform: translate(-10vw, -18vh) scale(1.3); } }
.hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(12,9,18,.2) 0%, transparent 30%, rgba(12,9,18,.55) 70%, var(--ink) 100%); }
.hero > * { position: relative; z-index: 2; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 0 var(--pad); margin-bottom: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: rgba(12,9,18,.5); border: 1px solid var(--line2); font: 600 12px/1 var(--f-mono); letter-spacing: .06em; backdrop-filter: blur(8px); }
.hero h1 { margin: 0; font-family: var(--f-mega); font-weight: 800; text-transform: uppercase; letter-spacing: -.05em; line-height: .84; padding: 0 var(--pad); }
.hero h1 .l { display: block; white-space: nowrap; width: max-content; max-width: 100%; }
.hero h1 .l.g { background: linear-gradient(100deg, var(--coral), var(--amber) 30%, var(--rose) 55%, var(--violet) 80%, var(--coral)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.hero h1 .l.ser { font-family: var(--f-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: -.03em; }
.hero h1 .l.out { -webkit-text-stroke: 1.5px rgba(255,255,255,.7); color: transparent; }
.hero h1 .hl { opacity: 0; transform: translateY(60%) rotate(2deg); display: inline-block; animation: heroIn 1.2s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * .15s); }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.hero-sub { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: end; padding: 0 var(--pad); margin-top: clamp(18px, 3vw, 34px); }
.hero-sub p { margin: 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--tx2); max-width: 640px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { padding: 16px 16px 14px; border-radius: 18px; background: rgba(12,9,18,.55); border: 1px solid var(--line2); backdrop-filter: blur(10px); }
.stat .n { font: 700 clamp(26px, 3.4vw, 40px)/1 var(--f-mega); letter-spacing: -.04em; background: linear-gradient(90deg, #fff, var(--a1)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .t { font-size: 12.5px; color: var(--tx3); margin-top: 6px; line-height: 1.3; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 var(--pad); margin-top: 26px; }
.scroll-hint { position: absolute; left: 50%; bottom: 14px; z-index: 3; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid var(--line2); border-radius: 20px; }
.scroll-hint::after { content: ''; position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--a1); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(-4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
.marquee { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,106,77,.08), rgba(143,123,255,.08)); padding: 14px 0; position: relative; z-index: 2; }
.marquee .track { display: flex; gap: 44px; width: max-content; animation: marq 40s linear infinite; }
.marquee span { font: 600 15px var(--f-mega); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; color: var(--tx2); }
.marquee span::after { content: '✦'; color: var(--a1); animation: twinkle 1.2s infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.7); } }

/* ---------- Byline / editorial ---------- */
.byline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
.person { padding: 22px; display: flex; gap: 14px; align-items: flex-start; }
.ava { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 700 16px var(--f-mega); color: #120c18;
  background: conic-gradient(from var(--ang), var(--coral), var(--amber), var(--teal), var(--violet), var(--coral)); animation: spin 6s linear infinite; }
.person b { display: block; font-size: 15px; } .person span { font-size: 13.5px; color: var(--tx2); line-height: 1.45; display: block; margin-top: 4px; }
.qa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
.qa { padding: 22px 22px 20px; display: flex; gap: 16px; overflow: hidden; }
.qa h3 { font-size: 16px; margin-bottom: 4px; } .qa p { margin: 0; font-size: 15px; color: var(--tx2); }
.routes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.routes a { padding: 12px 18px; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); display: inline-flex; gap: 8px; align-items: center; transition: .3s var(--ease); }
.routes a:hover { background: var(--a1); color: #120c18; transform: translateY(-3px) rotate(-1.5deg); border-color: transparent; }

/* ---------- Rooms ---------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; min-height: 48px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255,255,255,.03); font-weight: 600; font-size: 14.5px; transition: .3s var(--ease); position: relative; }
.tab .ic { width: 28px; height: 28px; }
.tab:hover { border-color: color-mix(in oklab, var(--a1) 60%, transparent); }
.tab[aria-selected="true"] { background: linear-gradient(110deg, color-mix(in oklab, var(--a1) 35%, transparent), color-mix(in oklab, var(--a2) 20%, transparent)); border-color: var(--a1); color: #fff; }
.room-stage { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; }
.room-photo { position: relative; border-radius: var(--r); overflow: hidden; min-height: 420px; }
.room-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s, transform 6s ease-out; }
.room-photo img.hide { opacity: 0; transform: scale(1.08); }
.room-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,9,18,.85), transparent 50%); }
.room-photo .cap { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; font: 700 clamp(28px, 4vw, 48px)/1 var(--f-mega); text-transform: uppercase; letter-spacing: -.04em; }
.curtain-l, .curtain-r { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 3; pointer-events: none; transition: transform 1s var(--ease);
  background: repeating-linear-gradient(90deg, #3a1f4f 0 14px, #2a1638 14px 22px, #4a2862 22px 34px); box-shadow: inset 0 0 40px rgba(0,0,0,.6); }
.curtain-l { left: 0; transform: translateX(-100%); } .curtain-r { right: 0; transform: translateX(100%); }
.room-photo.closing .curtain-l, .room-photo.closing .curtain-r { transform: none; }
.room-info { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.room-info h3 { font-size: clamp(22px, 2.4vw, 30px); }
.room-info p { margin: 0; color: var(--tx2); }
.room-info .who { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid var(--line2); text-decoration: none; }
.pill.hot { background: color-mix(in oklab, var(--a1) 22%, transparent); border-color: color-mix(in oklab, var(--a1) 60%, transparent); }
.room-info .show { padding: 14px 16px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px dashed var(--line2); font-size: 14.5px; }
.room-info .show b { display: block; font: 600 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a1); margin-bottom: 4px; }
.room-tips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.tip { padding: 22px; } .tip p { margin: 0; color: var(--tx2); font-size: 15px; }
.tip h3 { font-size: 17px; display: flex; gap: 10px; align-items: center; }

/* ---------- Light canvas ---------- */
.light-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.light-canvas-box { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line2); }
#lightCanvas { width: 100%; height: 100%; display: block; }
.light-ctrl { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 99px; background: rgba(12,9,18,.7); backdrop-filter: blur(8px); border: 1px solid var(--line2); }
.light-ctrl output { font: 600 14px var(--f-mono); min-width: 48px; color: var(--a1); }
.layer-toggles { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.layer-toggles button { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(12,9,18,.7); font-size: 12.5px; font-weight: 600; min-height: 36px; }
.layer-toggles button.on { background: var(--a1); color: #120c18; border-color: transparent; }
.scenes { display: grid; gap: 10px; }
.scene { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding: 16px; cursor: pointer; transition: .3s var(--ease); }
.scene.on { border-color: var(--a1); background: linear-gradient(110deg, color-mix(in oklab, var(--a1) 16%, transparent), transparent); }
.scene h3 { font-size: 16px; margin: 0 0 4px; } .scene p { margin: 0; font-size: 14px; color: var(--tx2); }
.scene .ic { width: 40px; height: 40px; }

/* Range */
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--a1) var(--p, 50%), rgba(255,255,255,.15) var(--p, 50%)); outline: none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 5px solid var(--a1); box-shadow: 0 0 0 6px color-mix(in oklab, var(--a1) 25%, transparent); cursor: grab; transition: transform .2s; }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.2); cursor: grabbing; }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 5px solid var(--a1); cursor: grab; }

/* ---------- Calculators ---------- */
.calc-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; scrollbar-width: none; }
.calc-tabs::-webkit-scrollbar { display: none; }
.calc-tabs .tab { flex: none; }
.calc { display: none; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.calc.on { display: grid; animation: fade .5s; }
.calc-in { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
.calc-out { padding: clamp(22px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; background: linear-gradient(160deg, rgba(0,0,0,.25), rgba(0,0,0,.05)); position: relative; }
.fld { display: grid; gap: 8px; }
.fld label { font-size: 13.5px; font-weight: 600; color: var(--tx2); display: flex; justify-content: space-between; gap: 10px; }
.fld label output { font-family: var(--f-mono); color: var(--a1); }
.inp { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(0,0,0,.3); font-size: 16px; transition: .25s; }
.inp:focus { border-color: var(--a1); outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--a1) 20%, transparent); }
.inp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.big-out { font: 800 clamp(40px, 6vw, 72px)/1 var(--f-mega); letter-spacing: -.05em; background: linear-gradient(90deg, #fff, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; word-break: break-word; }
.big-out small { font-size: .35em; letter-spacing: 0; -webkit-text-fill-color: var(--tx2); }
.formula { font: 500 13.5px/1.5 var(--f-mono); padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.35); border: 1px solid var(--line); color: var(--tx2); }
.formula b { color: var(--a1); }
.warn { font-size: 13px; color: var(--tx3); display: flex; gap: 8px; align-items: flex-start; }
.warn::before { content: '!'; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--f-mono); background: var(--amber); color: #120c18; margin-top: 2px; }
.err { color: var(--coral); font-size: 13.5px; min-height: 1.2em; }
#foldCanvas { width: 100%; height: 160px; border-radius: 14px; background: rgba(0,0,0,.3); }
.rows-tbl { display: grid; gap: 8px; }
.rows-tbl .r { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 8px; align-items: center; animation: fade .4s; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); display: grid; place-items: center; font-size: 20px; transition: .25s; }
.icon-btn:hover { background: var(--coral); color: #120c18; transform: rotate(90deg); }
.bars3 { display: grid; gap: 12px; }
.bar3 { display: grid; gap: 6px; }
.bar3 .top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.bar3 .top span:last-child { font-family: var(--f-mono); }
.bar3 .trk { height: 12px; border-radius: 12px; background: rgba(255,255,255,.07); overflow: hidden; }
.bar3 .trk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--a1), var(--a2)); width: 0; transition: width 1s var(--ease); }
.diff { font: 600 13px var(--f-mono); color: var(--teal); }
.three-q { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.three-q > div { padding: 18px; border-radius: 16px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.three-q b { display: block; font-size: 15px; margin: 8px 0 4px; } .three-q p { margin: 0; font-size: 13.5px; color: var(--tx2); }

.planner { width: 100%; border-collapse: separate; border-spacing: 0 8px; font-size: 14px; }
.planner th { text-align: left; font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); padding: 0 8px; }
.planner td { padding: 6px 4px; }
.planner select, .planner input { width: 100%; min-height: 42px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(0,0,0,.3); font-size: 14px; }
.planner select option { background: #1d1530; }

/* ---------- Budget ---------- */
.budget { display: grid; gap: 10px; }
.bud { display: grid; grid-template-columns: 220px 1fr 130px; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 16px; transition: .3s var(--ease); cursor: default; }
.bud:hover { background: rgba(255,255,255,.05); transform: translateX(6px); }
.bud .who { font-weight: 700; font-size: 15px; } .bud .who small { display: block; font-weight: 500; color: var(--tx3); font-size: 12.5px; }
.bud .trk { height: 30px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; position: relative; }
.bud .trk i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--c1, var(--a1)), var(--c2, var(--a2))); transition: width 1.4s var(--ease); }
.bud .trk em { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font: 500 12.5px var(--f-body); color: #fff; font-style: normal; white-space: nowrap; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.bud .sum { font: 700 18px var(--f-mono); text-align: right; white-space: nowrap; }
.bud .sum small { font-size: 11px; color: var(--tx3); display: block; font-weight: 500; }

/* ---------- Palette mixer ---------- */
.mixer { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: stretch; }
.mix-room { position: relative; border-radius: var(--r); overflow: hidden; min-height: 440px; background: linear-gradient(180deg, var(--wall, #d9cbb8), color-mix(in oklab, var(--wall, #d9cbb8) 70%, #000) ); transition: background .8s; }
.mix-room .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, var(--floor, #8a6648), color-mix(in oklab, var(--floor, #8a6648) 60%, #000)); transition: background .8s; }
.mix-room .win { position: absolute; left: 28%; right: 28%; top: 12%; bottom: 30%; background: linear-gradient(180deg, #bfe3ff, #ffe6c4); border: 8px solid #f1ece4; box-shadow: inset 0 0 40px rgba(255,255,255,.6); }
.mix-room .win::before, .mix-room .win::after { content: ''; position: absolute; background: #f1ece4; }
.mix-room .win::before { left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; } .mix-room .win::after { top: 45%; left: 0; right: 0; height: 6px; }
.mix-room .rod { position: absolute; left: 14%; right: 14%; top: 8%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #222, #666, #222); z-index: 3; }
.mix-room .drape { position: absolute; top: 8%; bottom: 22%; width: 22%; z-index: 2; transition: background .8s, filter .8s;
  background: repeating-linear-gradient(90deg, var(--cur, #6b2d5c) 0 10px, color-mix(in oklab, var(--cur, #6b2d5c) 70%, #000) 10px 16px, color-mix(in oklab, var(--cur, #6b2d5c) 85%, #fff) 16px 22px); 
  transform-origin: top; animation: sway 6s ease-in-out infinite; }
.mix-room .drape.l { left: 14%; } .mix-room .drape.r { right: 14%; animation-delay: -3s; }
.mix-room[data-tex="linen"] .drape { filter: contrast(.9) brightness(1.05); background-size: 30px 100%; }
.mix-room[data-tex="velvet"] .drape { filter: saturate(1.3) contrast(1.15); }
.mix-room .sofa { position: absolute; left: 20%; right: 20%; bottom: 14%; height: 18%; border-radius: 18px 18px 8px 8px; background: linear-gradient(180deg, var(--sofa, #3e4a5a), color-mix(in oklab, var(--sofa, #3e4a5a) 60%, #000)); z-index: 4; transition: background .8s; box-shadow: 0 20px 30px -10px rgba(0,0,0,.5); }
@keyframes sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(1.2deg); } }
.mix-ctrl { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.sw-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sw { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); transition: .25s var(--ease); }
.sw:hover { transform: scale(1.12) rotate(-8deg); }
.sw.on { border-color: #fff; transform: scale(1.1); }
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: rgba(0,0,0,.3); border: 1px solid var(--line); flex-wrap: wrap; }
.seg button { padding: 10px 16px; border: 0; border-radius: 99px; background: none; font-weight: 600; font-size: 14px; min-height: 40px; transition: .25s; }
.seg button.on { background: var(--a1); color: #120c18; }
.dir-cards { display: grid; gap: 10px; }
.dir { padding: 16px 18px; } .dir b { display: block; margin-bottom: 4px; } .dir p { margin: 0; font-size: 14.5px; color: var(--tx2); }

/* ---------- TOP-20 leaderboard ---------- */
.lb-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.lb { display: grid; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 2fr) 110px 44px; gap: 16px; align-items: center; padding: 14px 18px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); transition: .35s var(--ease); cursor: pointer; text-align: left; width: 100%; }
.lb-row:hover { transform: translateX(8px); border-color: color-mix(in oklab, var(--a1) 50%, transparent); }
.lb-row .pos { font: 800 30px/1 var(--f-mega); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.5); }
.lb-row .nm { font-weight: 700; font-size: 16.5px; } .lb-row .nm small { display: block; font: 500 12px var(--f-mono); color: var(--tx3); margin-top: 2px; }
.lb-row .meter { height: 10px; border-radius: 10px; background: rgba(255,255,255,.07); position: relative; overflow: hidden; }
.lb-row .meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; width: 0; background: linear-gradient(90deg, var(--a2), var(--a1)); transition: width 1.4s var(--ease); }
.lb-row .meter-lbl { display: flex; justify-content: space-between; font: 500 11px var(--f-mono); color: var(--tx3); margin-top: 6px; }
.lb-row .score { font: 800 24px/1 var(--f-mega); text-align: right; letter-spacing: -.04em; }
.lb-row .score small { display: block; font: 500 10.5px var(--f-mono); color: var(--tx3); letter-spacing: 0; margin-top: 4px; }
.lb-row .go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; transition: .3s; }
.lb-row:hover .go { background: var(--a1); color: #120c18; transform: rotate(-45deg); }
.lb-row.first { padding: 22px 18px; background: linear-gradient(110deg, color-mix(in oklab, var(--coral) 28%, transparent), color-mix(in oklab, var(--violet) 18%, transparent) 60%, rgba(255,255,255,.02)); border-color: color-mix(in oklab, var(--coral) 60%, transparent); position: relative; overflow: hidden; }
.lb-row.first .pos { -webkit-text-stroke: 0; background: linear-gradient(180deg, var(--amber), var(--coral)); -webkit-background-clip: text; background-clip: text; font-size: 40px; }
.lb-row.first::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); transform: translateX(-100%); animation: sheen 4s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 60%, 100% { transform: translateX(100%); } }
.badge-ed { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--amber); color: #120c18; font: 700 10.5px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-left: 8px; vertical-align: 2px; }
.badge-ed .live { background: #120c18; width: 6px; height: 6px; }
.lb-row.dim { opacity: .28; filter: grayscale(.8); }

/* ---------- Company cards ---------- */
.cards { display: grid; gap: 12px; }
.card { overflow: hidden; }
.card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 70px 1fr auto 44px; gap: 18px; align-items: center; padding: 18px 22px; }
.card > summary::-webkit-details-marker { display: none; }
.card .ring { width: 64px; height: 64px; position: relative; }
.card .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.card .ring circle { fill: none; stroke-width: 6; }
.card .ring .bg { stroke: rgba(255,255,255,.08); }
.card .ring .fg { stroke: url(#ringG); stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.card .ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 15px var(--f-mega); }
.card h3 { margin: 0; font-size: clamp(17px, 1.8vw, 21px); }
.card h3 small { display: block; font: 500 12.5px var(--f-mono); color: var(--tx3); margin-top: 4px; }
.card .tdi { font: 800 26px/1 var(--f-mega); letter-spacing: -.04em; text-align: right; }
.card .tdi small { display: block; font: 500 10.5px var(--f-mono); color: var(--tx3); letter-spacing: 0; margin-top: 4px; }
.card .plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); position: relative; transition: .4s var(--ease); }
.card .plus::before, .card .plus::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: currentColor; border-radius: 2px; transition: .4s var(--ease); }
.card .plus::after { transform: rotate(90deg); }
.card[open] .plus { background: var(--a1); color: #120c18; transform: rotate(180deg); }
.card[open] .plus::after { transform: rotate(0); }
.card-body { padding: 0 22px 24px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; animation: fade .5s; }
.card-body p { margin: 0 0 12px; color: var(--tx2); font-size: 15.5px; }
.card-body .contacts { font-size: 14px; color: var(--tx2); }
.chips27 { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.chips27 i { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.07); position: relative; }
.chips27 i.y { background: linear-gradient(135deg, var(--a1), var(--a2)); animation: pop .5s var(--ease) backwards; animation-delay: calc(var(--k) * 25ms); }
@keyframes pop { from { transform: scale(0); } }
.feat { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.25); font-size: 14px; color: var(--tx2); }
.feat b { display: block; font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--a1); margin-bottom: 4px; }
.card.flash { animation: flashc 1.6s var(--ease); }
@keyframes flashc { 0%, 100% { box-shadow: none; } 30% { box-shadow: 0 0 0 3px var(--a1), 0 0 60px color-mix(in oklab, var(--a1) 50%, transparent); } }
.card.armandi { border-color: color-mix(in oklab, var(--coral) 55%, transparent); background: linear-gradient(150deg, color-mix(in oklab, var(--coral) 14%, transparent), rgba(255,255,255,.02)); }

/* ---------- Compare ---------- */
.cmp-bar { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; padding: 20px; }
.cmp-bar select { appearance: none; -webkit-appearance: none; background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' fill='none' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; }
.cmp-bar select option { background: #1d1530; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; }
.switch input { appearance: none; -webkit-appearance: none; width: 48px; height: 28px; border-radius: 28px; background: rgba(255,255,255,.15); position: relative; transition: .3s; cursor: pointer; margin: 0; }
.switch input::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .3s var(--ease); }
.switch input:checked { background: var(--a1); }
.switch input:checked::after { left: 23px; }
.cmp-msg { padding: 16px 18px; border-radius: 14px; background: rgba(0,0,0,.25); color: var(--tx2); margin-top: 16px; font-size: 15px; }
.cmp-msg.bad { color: var(--coral); border: 1px solid color-mix(in oklab, var(--coral) 50%, transparent); }
.cmp-head { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 10px; margin-top: 18px; }
.cmp-head > div { padding: 18px; border-radius: 16px; }
.cmp-head .co { text-align: center; background: linear-gradient(160deg, color-mix(in oklab, var(--a1) 18%, transparent), rgba(255,255,255,.02)); border: 1px solid var(--line2); }
.cmp-head .co:last-child { background: linear-gradient(160deg, color-mix(in oklab, var(--a2) 22%, transparent), rgba(255,255,255,.02)); }
.cmp-head .co b { display: block; font-size: 16px; } .cmp-head .co .big { font: 800 clamp(26px, 3.4vw, 38px)/1.1 var(--f-mega); letter-spacing: -.04em; margin: 4px 0; }
.cmp-head .co small { font: 500 12px var(--f-mono); color: var(--tx3); }
.cmp-tbl { margin-top: 8px; display: grid; gap: 4px; }
.cmp-grp { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--a1); padding: 16px 4px 6px; }
.cmp-r { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.03); font-size: 14.5px; animation: fade .4s backwards; }
.cmp-r.df { background: rgba(255,255,255,.06); }
.cmp-r .v { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; text-align: center; }
.v .y { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--violet)); display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.v .n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px dashed var(--tx3); display: grid; place-items: center; color: var(--tx3); flex: none; font-size: 14px; }
.cmp-note { font-size: 13px; color: var(--tx3); margin-top: 14px; }

/* ---------- Models ---------- */
.models { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.model { padding: 22px 20px; min-height: 240px; display: flex; flex-direction: column; gap: 10px; perspective: 900px; cursor: pointer; }
.model .ic { width: 58px; height: 58px; transition: transform .6s var(--ease); }
.model:hover .ic { transform: translateY(-6px) rotate(-6deg) scale(1.08); }
.model h3 { font-size: 17px; margin: 6px 0 0; }
.model p { margin: 0; font-size: 14px; color: var(--tx2); }
.model .lim { margin-top: auto; font-size: 13px; padding-top: 12px; border-top: 1px dashed var(--line2); color: var(--tx3); }
.model .lim b { color: var(--amber); font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; display: block; margin-bottom: 2px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.split > div { padding: 24px; } .split p { margin: 0 0 10px; color: var(--tx2); font-size: 15.5px; }

/* ---------- Timeline ---------- */
.tl { position: relative; display: grid; gap: 14px; padding-left: 34px; }
.tl::before { content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px; background: rgba(255,255,255,.08); }
.tl .fill { position: absolute; left: 11px; top: 8px; width: 2px; height: 0; background: linear-gradient(180deg, var(--a1), var(--a2)); transition: height .3s linear; box-shadow: 0 0 12px var(--a1); }
.tl-i { position: relative; padding: 18px 20px; display: grid; grid-template-columns: 1fr 180px; gap: 18px; align-items: center; }
.tl-i::before { content: ''; position: absolute; left: -29px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--ink); border: 2px solid var(--a1); transition: .3s; }
.tl-i.in::before { background: var(--a1); box-shadow: 0 0 0 5px color-mix(in oklab, var(--a1) 25%, transparent); }
.tl-i b { font-size: 16px; } .tl-i p { margin: 4px 0 0; font-size: 14px; color: var(--tx3); }
.dur { position: relative; height: 34px; border-radius: 10px; background: rgba(255,255,255,.05); overflow: hidden; }
.dur i { position: absolute; top: 0; bottom: 0; border-radius: 10px; background: linear-gradient(90deg, var(--a1), var(--a2)); opacity: .85; transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--ease); }
.tl-i.in .dur i { transform: scaleX(1); }
.dur span { position: absolute; inset: 0; display: grid; place-items: center; font: 600 13px var(--f-mono); z-index: 2; }

/* ---------- Nonstandard window (7) ---------- */
.seven { display: grid; grid-template-columns: 1fr 1.1fr; gap: 30px; align-items: center; }
.seven-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4/5; }
.seven-photo img { width: 100%; height: 100%; object-fit: cover; }
.hot-pt { position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--a1); color: #120c18; font: 700 14px var(--f-mono); display: grid; place-items: center; border: 0; transform: translate(-50%, -50%); box-shadow: 0 0 0 0 var(--a1); animation: blink 2s infinite; z-index: 2; }
.hot-pt.on { background: #fff; animation: none; transform: translate(-50%, -50%) scale(1.25); }
.seven-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: s; }
.seven-list li { padding: 14px 16px 14px 60px; border-radius: 14px; position: relative; cursor: pointer; transition: .3s var(--ease); border: 1px solid transparent; }
.seven-list li::before { counter-increment: s; content: '0' counter(s); position: absolute; left: 16px; top: 14px; font: 700 18px var(--f-mega); color: transparent; -webkit-text-stroke: 1px var(--tx3); transition: .3s; }
.seven-list li.on { background: rgba(255,255,255,.06); border-color: var(--line2); }
.seven-list li.on::before { color: var(--a1); -webkit-text-stroke: 0; }
.seven-list b { display: block; font-size: 15.5px; } .seven-list span { font-size: 14px; color: var(--tx2); }

/* ---------- Cases ---------- */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.case { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 360px; cursor: pointer; text-align: left; border: 1px solid var(--line); }
.case .ph { height: 140px; position: relative; overflow: hidden; }
.case .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.case:hover .ph img { transform: scale(1.1); }
.case .ph .num { position: absolute; left: 14px; top: 10px; font: 800 44px/1 var(--f-mega); color: #fff; mix-blend-mode: difference; letter-spacing: -.05em; }
.case .bd { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.case h3 { font-size: 16px; margin: 0; }
.case p { margin: 0; font-size: 14px; color: var(--tx2); }
.case .more { margin-top: auto; font: 600 12px var(--f-mono); color: var(--a1); text-transform: uppercase; letter-spacing: .08em; }
.modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 16px; }
.modal.open { display: grid; }
.modal .scrim { position: absolute; inset: 0; background: rgba(5,3,10,.7); backdrop-filter: blur(8px); animation: fade .3s; }
.modal .box { position: relative; max-width: 720px; width: 100%; max-height: 88vh; overflow: auto; padding: clamp(22px, 4vw, 40px); border-radius: 26px; background: linear-gradient(160deg, #241a38, #120c1c); border: 1px solid var(--line2); animation: popIn .5s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.94) rotate(-1deg); } }
.modal .x { position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.05); font-size: 22px; }
.modal h3 { font-size: clamp(20px, 2.6vw, 28px); padding-right: 50px; }
.modal dl { display: grid; gap: 14px; margin: 18px 0 0; }
.modal dt { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--a1); }
.modal dd { margin: 4px 0 0; color: var(--tx2); }

/* ---------- Mistakes (flip) ---------- */
.flips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.flip { perspective: 1000px; min-height: 230px; cursor: pointer; background: none; border: 0; padding: 0; text-align: left; }
.flip .in { position: relative; width: 100%; height: 100%; min-height: 230px; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.flip:hover .in, .flip.on .in { transform: rotateY(180deg); }
.flip .fc, .flip .bc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.flip .fc { background: linear-gradient(160deg, rgba(255,106,77,.16), rgba(255,255,255,.02)); border: 1px solid var(--line2); }
.flip .fc .x { font: 800 40px/1 var(--f-mega); color: var(--coral); }
.flip .fc b { font-size: 16px; line-height: 1.3; }
.flip .bc { transform: rotateY(180deg); background: linear-gradient(160deg, rgba(25,211,192,.18), rgba(143,123,255,.1)); border: 1px solid color-mix(in oklab, var(--teal) 50%, transparent); font-size: 14.5px; color: var(--tx); }
.flip .bc::before { content: '✓ Как правильно'; font: 600 11px var(--f-mono); color: var(--teal); text-transform: uppercase; letter-spacing: .1em; }
.hint { font: 500 11px var(--f-mono); color: var(--tx3); margin-top: auto; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Checklist ---------- */
.ck-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
.ck-ring { position: sticky; top: calc(var(--head) + 40px); padding: 28px; text-align: center; }
.ck-ring svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.ck-ring circle { fill: none; stroke-width: 14; }
.ck-ring .bg { stroke: rgba(255,255,255,.07); } .ck-ring .fg { stroke: url(#ringG); stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }
.ck-ring .pct { font: 800 48px/1 var(--f-mega); margin-top: -132px; margin-bottom: 92px; letter-spacing: -.05em; }
.ck-ring p { margin: 0; color: var(--tx2); font-size: 14px; }
.ck-groups { display: grid; gap: 14px; }
.ck-g { padding: 22px; }
.ck-g h3 { display: flex; justify-content: space-between; align-items: center; font-size: 17px; }
.ck-g h3 small { font: 600 12px var(--f-mono); color: var(--a1); }
.ck { display: flex; gap: 14px; align-items: flex-start; padding: 10px 6px; border-radius: 12px; cursor: pointer; transition: background .2s; font-size: 15.5px; }
.ck:hover { background: rgba(255,255,255,.04); }
.ck input { appearance: none; -webkit-appearance: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line2); flex: none; display: grid; place-items: center; transition: .3s var(--ease); margin: 0; cursor: pointer; }
.ck input::after { content: ''; width: 12px; height: 7px; border-left: 3px solid #120c18; border-bottom: 3px solid #120c18; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .3s var(--ease); }
.ck input:checked { background: linear-gradient(135deg, var(--teal), var(--a1)); border-color: transparent; transform: rotate(-6deg); }
.ck input:checked::after { transform: rotate(-45deg) scale(1); }
.ck input:checked + span { color: var(--tx3); text-decoration: line-through; text-decoration-color: var(--a1); }

/* ---------- B2B ---------- */
.b2b { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.b2b-ph { border-radius: var(--r); overflow: hidden; position: relative; aspect-ratio: 4/3; }
.b2b-ph img { width: 100%; height: 100%; object-fit: cover; }
.b2b-ph .tag { position: absolute; left: 16px; bottom: 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: st; }
.steps li { display: grid; grid-template-columns: 52px 1fr; gap: 14px; padding: 16px; }
.steps li::before { position: static; opacity: 1; inset: auto; counter-increment: st; content: counter(st); width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font: 800 18px var(--f-mega); background: linear-gradient(135deg, var(--a1), var(--a2)); color: #120c18; }
.steps b { display: block; } .steps span { font-size: 14.5px; color: var(--tx2); }

/* ---------- Brief builder ---------- */
.brief { display: grid; grid-template-columns: 1fr 1fr; gap: 0; overflow: hidden; }
.brief-in { padding: clamp(22px, 3vw, 32px); display: grid; gap: 14px; border-right: 1px solid var(--line); }
.brief-out { padding: clamp(22px, 3vw, 32px); background: rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 14px; }
.letter { font: 500 clamp(17px, 1.6vw, 20px)/1.6 var(--f-serif); font-style: italic; color: #fff; padding: 22px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid var(--line2); position: relative; flex: 1; }
.letter mark { background: linear-gradient(90deg, color-mix(in oklab, var(--a1) 40%, transparent), color-mix(in oklab, var(--a2) 30%, transparent)); color: #fff; padding: 0 4px; border-radius: 4px; font-style: normal; font-family: var(--f-body); font-size: .85em; font-weight: 600; }
.letter .caret { display: inline-block; width: 2px; height: 1em; background: var(--a1); vertical-align: -2px; animation: twinkle .9s steps(1) infinite; }
.brief-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.brief-pills > div { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font-size: 14px; color: var(--tx2); }
.brief-pills b { display: flex; gap: 8px; align-items: center; color: #fff; margin-bottom: 4px; font-size: 14.5px; }
.brief-pills .ic { width: 22px; height: 22px; }

/* ---------- Tables (generic, responsive) ---------- */
.tbl-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
table.t th { text-align: left; font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); padding: 14px 16px; background: rgba(255,255,255,.04); }
table.t td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; color: var(--tx2); }
table.t td:first-child { color: #fff; font-weight: 600; }
table.t tr { transition: background .2s; } table.t tbody tr:hover { background: rgba(255,255,255,.04); }

/* ---------- Method / canvas TDI ---------- */
.formula-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 26px 0; }
.fx { padding: 26px; text-align: center; }
.fx .eq { font: 700 clamp(22px, 3vw, 36px)/1.2 var(--f-mega); letter-spacing: -.03em; }
.fx .eq em { font-style: normal; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx p { margin: 10px 0 0; color: var(--tx2); font-size: 14px; }
.tdi-lab { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; overflow: hidden; }
#tdiCanvas { width: 100%; height: 100%; min-height: 360px; display: block; }
.tdi-ctrl { padding: 26px; display: flex; flex-direction: column; gap: 14px; border-left: 1px solid var(--line); }
.blocks { display: grid; gap: 8px; }
.blk { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); cursor: pointer; font-size: 14px; transition: .25s; }
.blk.on, .blk:hover { border-color: var(--a1); background: color-mix(in oklab, var(--a1) 12%, transparent); }
.blk b { font: 700 16px var(--f-mono); }
.crit-tbl { display: none; margin-top: 18px; }
.crit-tbl.on { display: block; animation: fade .4s; }

/* ---------- Heatmap matrix ---------- */
.hm-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); padding: 14px; background: rgba(0,0,0,.2); -webkit-overflow-scrolling: touch; }
.hm { display: grid; grid-template-columns: 170px repeat(27, minmax(18px, 1fr)) 64px; gap: 3px; min-width: 860px; font-size: 12px; }
.hm .h { font: 600 10px var(--f-mono); color: var(--tx3); text-align: center; padding-bottom: 6px; align-self: end; }
.hm .nm { font-weight: 600; font-size: 13px; padding-right: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; align-self: center; }
.hm .c { aspect-ratio: 1; border-radius: 4px; background: rgba(255,255,255,.05); transition: transform .2s; position: relative; }
.hm .c.y { background: linear-gradient(135deg, var(--a1), var(--a2)); opacity: calc(.45 + var(--w) * .12); }
.hm .c:hover { transform: scale(1.6); z-index: 3; outline: 2px solid #fff; }
.hm .s { font: 700 12px var(--f-mono); text-align: right; align-self: center; }
.hm .row-hl { display: contents; }
.hm-tip { position: fixed; z-index: 120; pointer-events: none; padding: 10px 12px; border-radius: 12px; background: #1d1530; border: 1px solid var(--line2); font-size: 13px; max-width: 260px; opacity: 0; transition: opacity .15s; box-shadow: 0 20px 40px rgba(0,0,0,.4); }
.hm-tip.on { opacity: 1; }
.hm-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 13px; color: var(--tx3); }
.hm-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 6px; }

/* ---------- Care / 4 scenes ---------- */
.q7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; counter-reset: q; }
.q7 > div { padding: 18px 18px 18px 64px; position: relative; font-size: 15px; }
.q7 > div::before { opacity: 1; inset: auto; background: none; counter-increment: q; content: counter(q); position: absolute; left: 18px; top: 16px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--f-mono); border: 1.5px solid var(--a1); color: var(--a1); }
.scenes4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sc4 { padding: 22px; position: relative; overflow: hidden; min-height: 240px; display: flex; flex-direction: column; gap: 10px; }
.sc4 .t { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--a1); }
.sc4 h3 { font-size: 17px; margin: 0; } .sc4 p { margin: 0; font-size: 14.5px; color: var(--tx2); }
.sc4::after { content: ''; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--a1) 30%, transparent), transparent 70%); animation: pulseGlow 4s ease-in-out infinite; }
.sc4:nth-child(2)::after { animation-delay: -1s; } .sc4:nth-child(3)::after { animation-delay: -2s; } .sc4:nth-child(4)::after { animation-delay: -3s; }
@keyframes pulseGlow { 50% { transform: scale(1.4); opacity: .4; } }
.compat { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.compat > div { padding: 22px; display: flex; gap: 16px; }
.compat p { margin: 0; font-size: 15px; color: var(--tx2); }

/* ---------- FAQ ---------- */
.faq-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.faq-search { position: relative; flex: 1; min-width: 240px; }
.faq-search input { padding-left: 48px; }
.faq-search .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; }
.faq-count { font: 600 13px var(--f-mono); color: var(--tx3); }
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.fq { overflow: hidden; }
.fq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; font-weight: 700; font-size: 15.5px; line-height: 1.4; display: flex; gap: 12px; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary em { font: 600 12px var(--f-mono); color: var(--a1); font-style: normal; flex: none; padding-top: 3px; width: 24px; }
.fq summary::after { content: '+'; position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; font-weight: 400; border: 1px solid var(--line2); transition: .4s var(--ease); }
.fq[open] summary::after { transform: rotate(135deg); background: var(--a1); color: #120c18; border-color: transparent; }
.fq .a { padding: 0 20px 20px 56px; color: var(--tx2); font-size: 15px; animation: fade .4s; }
.fq .a p { margin: 0 0 10px; }
.fq.hide { display: none; }
mark.hl { background: color-mix(in oklab, var(--a1) 45%, transparent); color: #fff; border-radius: 3px; padding: 0 2px; }

/* ---------- Final CTA ---------- */
.final { text-align: center; overflow: hidden; }
.final .mega .l { margin-left: auto; margin-right: auto; }
.final p { margin: 0 auto 28px; }
.final .orb { position: absolute; width: 60vmin; height: 60vmin; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from var(--ang), var(--coral), var(--amber), var(--teal), var(--violet), var(--pink), var(--coral)); filter: blur(80px); opacity: .28; animation: spin 14s linear infinite; z-index: -1; }

/* ---------- Sources / Disclaimer / Footer ---------- */
.dis { columns: 2; column-gap: 34px; font-size: 14.5px; color: var(--tx2); }
.dis p { break-inside: avoid; margin: 0 0 14px; }
.dis h3 { font-size: 16px; break-after: avoid; margin-top: 8px; }
footer { padding: 50px 0 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--tx3); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }

/* ---------- Photo strip / parallax ---------- */
.strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 30px; }
.strip figure { margin: 0; border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 4/3; }
.strip figure:first-child { aspect-ratio: auto; grid-row: span 2; }
.strip img { width: 100%; height: 115%; object-fit: cover; will-change: transform; }
.strip figcaption { position: absolute; left: 12px; bottom: 10px; font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 99px; background: rgba(12,9,18,.7); backdrop-filter: blur(6px); }

/* ---------- Cursor ---------- */
.cur-dot, .cur-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 300; border-radius: 50%; transform: translate(-50%, -50%); }
.cur-dot { width: 6px; height: 6px; background: #fff; mix-blend-mode: difference; }
.cur-ring { width: 38px; height: 38px; border: 1.5px solid color-mix(in oklab, var(--a1) 80%, transparent); transition: width .3s var(--ease), height .3s var(--ease), background .3s, border-color .3s; }
.cur-ring.big { width: 74px; height: 74px; background: color-mix(in oklab, var(--a1) 14%, transparent); border-color: transparent; }
.cur-ring.txt { width: 6px; height: 34px; border-radius: 3px; }
@media (pointer: coarse) { .cur-dot, .cur-ring { display: none; } }
.thread { position: fixed; pointer-events: none; z-index: 299; width: 5px; height: 5px; border-radius: 50%; }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 150; padding: 14px 20px; border-radius: 99px; background: linear-gradient(110deg, var(--teal), var(--violet)); color: #fff; font-weight: 700; font-size: 14.5px; transition: transform .5s var(--ease); box-shadow: 0 20px 40px -10px rgba(0,0,0,.5); max-width: calc(100vw - 32px); text-align: center; }
.toast.on { transform: translate(-50%, 0); }

/* ---------- To top ---------- */
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 55; width: 56px; height: 56px; border-radius: 50%; border: 0; background: rgba(20,15,30,.85); backdrop-filter: blur(8px); display: grid; place-items: center; opacity: 0; transform: scale(.6); transition: .4s var(--ease); }
.totop.on { opacity: 1; transform: none; }
.totop svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.totop circle { fill: none; stroke-width: 3; }
.totop .fg { stroke: url(#ringG); stroke-linecap: round; }
.totop span { font-size: 20px; }

/* ---------- Fabric texture backgrounds (Ken Burns) ---------- */
.has-tex { overflow: hidden; isolation: isolate; }
.texbg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.texbg img { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; animation: kenburns 28s ease-in-out infinite alternate; filter: saturate(1.15); }
.texbg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(12,9,18,.5) 12%, rgba(12,9,18,.6) 50%, rgba(12,9,18,.5) 88%, var(--ink) 100%),
              linear-gradient(90deg, rgba(12,9,18,.7), rgba(12,9,18,.15) 50%, rgba(12,9,18,.7)); }
.texbg.b img { animation-duration: 34s; animation-delay: -12s; }
@keyframes kenburns { 0% { transform: scale(1) translate3d(0,0,0); } 50% { transform: scale(1.25) translate3d(-2%,1.5%,0); } 100% { transform: scale(1.06) translate3d(2%,-1%,0); } }

/* ---------- Formula section ---------- */
.f-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0; }
.f-step { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; position: relative; }
.f-step .no { font: 800 13px var(--f-mono); color: var(--a1); letter-spacing: .1em; }
.f-step .eq2 { font: 700 clamp(20px, 1.9vw, 28px)/1.15 var(--f-mega); letter-spacing: -.03em; }
.f-step .eq2 em { font-style: normal; background: linear-gradient(90deg, var(--a1), var(--a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-step p { margin: 0; font-size: 14.5px; color: var(--tx2); }
.f-step .arrow { position: absolute; right: -15px; top: 50%; z-index: 3; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; display: grid; place-items: center; background: var(--a1); color: #120c18; font-weight: 800; font-size: 14px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
.weights { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; padding: clamp(22px, 3vw, 34px); }
.donut-wrap { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.donut { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#ff6a4d 0 40%, #ffc24b 0 58%, #19d3c0 0 73%, #8f7bff 0 89%, #ff9fb3 0 100%); animation: spinSlow 40s linear infinite; -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut-c b { display: block; font: 800 46px/1 var(--f-mega); letter-spacing: -.05em; }
.donut-c span { font: 600 11px var(--f-mono); color: var(--tx3); text-transform: uppercase; letter-spacing: .1em; }
@keyframes spinSlow { to { transform: rotate(360deg); } }
.wlist { display: grid; gap: 10px; }
.wl { display: grid; grid-template-columns: 1fr 70px; gap: 14px; align-items: center; }
.wl .tp { display: flex; justify-content: space-between; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; gap: 10px; }
.wl .tp span:last-child { font: 500 12px var(--f-mono); color: var(--tx3); }
.wl .tr { height: 10px; border-radius: 10px; background: rgba(255,255,255,.07); overflow: hidden; }
.wl .tr i { display: block; height: 100%; border-radius: inherit; background: var(--bc); box-shadow: 0 0 12px var(--bc); }
.wl b { font: 800 26px var(--f-mega); text-align: right; color: var(--bc); }
.builder { padding: clamp(22px, 3vw, 34px); margin-top: 14px; }
.builder-top { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 18px; }
.builder-res { display: flex; gap: 28px; align-items: flex-end; flex-wrap: wrap; }
.builder-res .big-out { font-size: clamp(38px, 4.5vw, 60px); }
.builder-res small { font: 600 11px var(--f-mono); color: var(--tx3); display: block; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.bgroups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.bgroup h4 { margin: 0 0 8px; font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); display: flex; justify-content: space-between; gap: 6px; }
.bgroup h4 i { font-style: normal; color: var(--bc); }
.crit-chip { display: flex; width: 100%; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; margin-bottom: 6px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: 13px; line-height: 1.25; transition: .25s var(--ease); }
.crit-chip::before { content: ''; width: 14px; height: 14px; border-radius: 4px; flex: none; border: 1.5px solid var(--tx3); transition: .25s; }
.crit-chip.on { border-color: color-mix(in oklab, var(--bc) 70%, transparent); background: color-mix(in oklab, var(--bc) 16%, transparent); color: #fff; }
.crit-chip.on::before { background: var(--bc); border-color: var(--bc); box-shadow: 0 0 10px var(--bc); }
.crit-chip em { margin-left: auto; font: 600 11px var(--f-mono); font-style: normal; color: var(--tx3); }
.examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.ex { padding: 22px; } .ex b { display: block; font-size: 16px; margin-bottom: 6px; }
.ex .calc-line { font: 500 13.5px/1.7 var(--f-mono); color: var(--tx2); }
.ex .calc-line strong { color: var(--a1); }

/* Leaderboard scale ticks */
.lb-row .meter { height: 12px; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.16) calc(10% - 1px) 10%), rgba(255,255,255,.06); }
.lb-row .meter i { box-shadow: 0 0 12px color-mix(in oklab, var(--a1) 50%, transparent); }
.lb-scale { display: grid; grid-template-columns: 64px minmax(0, 1.4fr) minmax(0, 2fr) 110px 44px; gap: 16px; padding: 0 18px 4px; font: 600 10.5px var(--f-mono); color: var(--tx3); }
.lb-scale .ticks { display: flex; justify-content: space-between; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 1024px) { .wrap { max-width: none; padding-left: var(--pad); padding-right: calc(var(--pad) + 46px); } .lede { max-width: 1000px; } .h2-full { max-width: 1000px; } }
@media (max-width: 1180px) { .f-steps { grid-template-columns: repeat(2, 1fr); } .f-step:nth-child(2) .arrow { display: none; } .bgroups { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1360px) { .toc { right: 8px; } }
@media (max-width: 1180px) {
  .models, .cases, .scenes4 { grid-template-columns: repeat(2, 1fr); }
  .flips { grid-template-columns: repeat(3, 1fr); }
  .hdr-nav { display: none; }
  .hdr-toc { display: inline-flex; }
}
@media (max-width: 1023px) {
  .toc { display: none; }
  .hero-sub, .room-stage, .light-wrap, .mixer, .seven, .b2b, .brief, .calc, .tdi-lab, .ck-wrap, .card-body { grid-template-columns: 1fr; }
  .calc-in, .brief-in { border-right: 0; border-bottom: 1px solid var(--line); }
  .tdi-ctrl { border-left: 0; border-top: 1px solid var(--line); }
  .ck-ring { position: relative; top: 0; display: flex; align-items: center; gap: 20px; text-align: left; padding: 18px; }
  .ck-ring svg { width: 110px; height: 110px; flex: none; }
  .ck-ring .pct { position: absolute; left: 18px; width: 110px; text-align: center; margin: 0; font-size: 28px; top: 50%; transform: translateY(-50%); }
  .byline { grid-template-columns: 1fr; }
  .room-tips { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .dis { columns: 1; }
  .strip { grid-template-columns: 1fr 1fr; } .strip figure:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16/9; }
  .seven-photo { aspect-ratio: 16/10; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  :root { --head: 58px; --r: 18px; }
  .logo { font-size: 13px; } .logo small { display: none; } .logo-mark { width: 56px; height: 24px; }
  .hdr .btn { display: none; }
  .hdr-toc { padding: 8px 10px; font-size: 12px; max-width: 58vw; }
  .hdr-toc .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32vw; }
  .hero { min-height: 100svh; padding-bottom: 70px; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .stat { padding: 12px 10px; border-radius: 14px; } .stat .t { font-size: 11px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; }
  .qa-grid, .split, .compat, .formula-hero { grid-template-columns: 1fr; }
  .rv.l, .rv.r { transform: translateY(30px); }
  .f-steps, .examples, .weights { grid-template-columns: 1fr; }
  .f-step .arrow { display: none; }
  .bgroups { grid-template-columns: 1fr; }
  .donut-wrap { width: 200px; height: 200px; }
  .lb-scale { display: none; }
  .qa { padding: 18px; } .qa .ic-badge { width: 48px; height: 48px; border-radius: 14px; } .qa .ic-badge .ic { width: 30px; height: 30px; }
  .models, .cases, .scenes4, .flips { grid-template-columns: 1fr; }
  .flip, .flip .in { min-height: 190px; }
  .model { min-height: 0; }
  .room-photo { min-height: 300px; }
  .tab { font-size: 13.5px; padding: 8px 14px 8px 8px; }
  .bud { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px; }
  .bud .trk { grid-column: 1 / -1; grid-row: 2; }
  .lb-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px; }
  .lb-row .bar-col { grid-column: 1 / -1; grid-row: 2; }
  .lb-row .go { display: none; }
  .lb-row .pos { font-size: 24px; } .lb-row.first .pos { font-size: 30px; }
  .lb-row .score { font-size: 20px; }
  .lb-row:hover { transform: none; }
  .badge-ed { display: flex; width: max-content; margin: 6px 0 0; }
  .card > summary { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; padding: 16px; }
  .card .plus { display: none; }
  .card .ring { width: 52px; height: 52px; } .card .ring span { font-size: 12px; }
  .card .tdi { font-size: 20px; }
  .card-body { padding: 0 16px 18px; }
  .chips27 { grid-template-columns: repeat(9, 1fr); }
  .cmp-bar { grid-template-columns: 1fr; padding: 16px; }
  .cmp-bar .swap { justify-self: center; transform: rotate(90deg); }
  .cmp-head { grid-template-columns: 1fr 1fr; }
  .cmp-head > div:first-child { display: none; }
  .cmp-r { grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 10px 12px; }
  .cmp-r .k { grid-column: 1 / -1; font-weight: 600; font-size: 13.5px; }
  .tl { padding-left: 26px; } .tl::before, .tl .fill { left: 7px; } .tl-i::before { left: -25px; }
  .tl-i { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .inp-row { grid-template-columns: 1fr; }
  .three-q { grid-template-columns: 1fr; }
  .planner thead { display: none; }
  .planner, .planner tbody, .planner tr, .planner td { display: block; width: 100%; }
  .planner tr { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.03); margin-bottom: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .planner td { padding: 0; } .planner td:first-child { grid-column: 1 / -1; }
  .planner td[data-l]::before { content: attr(data-l); display: block; font: 600 10px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); margin-bottom: 4px; }
  .mix-room { min-height: 320px; }
  .strip { grid-template-columns: 1fr; } .strip figure:first-child { grid-column: auto; }
  .fq summary { padding: 16px 52px 16px 16px; font-size: 15px; } .fq .a { padding: 0 16px 18px 16px; }
  .totop { width: 50px; height: 50px; right: 12px; bottom: 12px; }
  .marquee span { font-size: 13px; }
  .scroll-hint { display: none; }
  .light-ctrl { left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; }
  .layer-toggles button { padding: 6px 10px; font-size: 12px; min-height: 32px; }
  .light-canvas-box { aspect-ratio: 4/3.6; }
  .hot-pt { width: 30px; height: 30px; font-size: 12px; }
  .steps li { grid-template-columns: 44px 1fr; padding: 14px; } .steps li::before { width: 38px; height: 38px; font-size: 15px; }
  .q7 > div { padding: 16px 16px 16px 58px; }
}
@media (max-width: 380px) {
  .hero-stats .stat .n { font-size: 22px; }
  .lb-row .nm { font-size: 15px; }
}

/* =====================================================================
   v6 · Доп. рейтинги: пункт «Подборки», подвал со списком, бенто-превью,
   элементы страниц доп. рейтингов
   ===================================================================== */
/* --- Header: «Подборки» --- */
.hdr-more { position: relative; flex: none; }
.hdr-nav + .hdr-more { margin-left: 2px; }
.hdr-more-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; min-height: 40px; border-radius: 99px; border: 0; background: rgba(255,255,255,.04); font: 700 14px/1 var(--f-body); cursor: pointer; isolation: isolate; }
.hdr-more-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--ang), var(--coral), var(--amber), var(--teal), var(--violet), var(--pink), var(--coral)); animation: spin 4s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .85; }
.hdr-more-btn .tx { background: linear-gradient(100deg, var(--coral), var(--amber) 25%, var(--rose) 45%, var(--violet) 65%, var(--teal) 85%, var(--coral)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: moreFlow 5s linear infinite; }
.hdr-more-btn .live { background: var(--amber); }
.hdr-more-btn .cnt { font: 700 10.5px/1 var(--f-mono); padding: 4px 6px; border-radius: 99px; background: var(--amber); color: #120c18; }
.hdr-more-btn .chev { width: 8px; height: 8px; border-right: 2px solid var(--tx2); border-bottom: 2px solid var(--tx2); transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.hdr-more.open .hdr-more-btn .chev { transform: translateY(2px) rotate(-135deg); }
.hdr-more-btn:hover { background: rgba(255,255,255,.08); }
@keyframes moreFlow { to { background-position: -300% 0; } }
.hdr-more-menu { position: absolute; top: calc(100% + 12px); right: 0; width: min(380px, calc(100vw - 24px)); padding: 10px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(36,26,56,.97), rgba(18,12,28,.97)); border: 1px solid var(--line2); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.hdr-more-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.hdr-more.open .hdr-more-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease), visibility 0s; }
.hm-head { padding: 8px 10px 10px; }
.hm-item { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; text-decoration: none; transition: background .2s, transform .3s var(--ease); }
.hdr-more.open .hm-item { animation: hmIn .45s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 40ms); }
@keyframes hmIn { from { opacity: 0; transform: translateX(10px); } }
.hm-item:hover { background: rgba(255,255,255,.07); transform: translateX(-3px); }
.hm-item.on { background: color-mix(in oklab, var(--a1) 16%, transparent); }
.hm-ph { width: 52px; height: 40px; border-radius: 10px; overflow: hidden; display: block; }
.hm-ph img { width: 100%; height: 100%; object-fit: cover; }
.hm-tx b { display: block; font-size: 14.5px; line-height: 1.25; }
.hm-tx small { display: block; font: 500 11px var(--f-mono); color: var(--tx3); margin-top: 3px; }
.hm-item.on .hm-tx small::after { content: ' · вы здесь'; color: var(--a1); }
@media (max-width: 1180px) { .hdr-more { margin-left: auto; } .hdr-toc { margin-left: 0; } }
@media (max-width: 760px) {
  .hdr { gap: 8px; }
  .hdr-more-btn { padding: 8px 10px; font-size: 12.5px; gap: 6px; min-height: 36px; }
  .hdr-more-btn .cnt, .hdr-more-btn .live { display: none; }
  .hdr-more-menu { position: fixed; top: calc(var(--head) + 8px); left: 12px; right: 12px; width: auto; }
  .hdr-toc { max-width: 38vw; } .hdr-toc .nm { max-width: 18vw; }
}
@media (max-width: 400px) { .hdr-toc .nm { display: none; } }

/* --- Footer --- */
.ftr { padding: 56px 0 44px; }
.ftr .ftr-grid { display: grid; grid-template-columns: 1fr minmax(0, 1.1fr); gap: 30px 50px; align-items: start; }
.ftr-brand p { margin: 10px 0 0; font-size: 14px; color: var(--tx3); }
.ftr-brand .logo { font-size: 17px; color: var(--tx); }
.ftr-h { display: block; font: 600 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin-bottom: 12px; }
.ftr-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
.ftr-nav a { display: inline-block; padding: 6px 0; color: var(--tx2); text-decoration: none; font-size: 14.5px; font-weight: 600; background: linear-gradient(var(--a1), var(--a1)) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ease), color .2s; }
.ftr-nav a:hover { color: #fff; background-size: 100% 1px; }
.ftr-nav a[aria-current] { color: var(--a1); }
@media (max-width: 760px) { .ftr .ftr-grid, .ftr-nav ul { grid-template-columns: 1fr; } }

/* --- Index: бенто «Подборки» --- */
.rb { display: grid; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: repeat(2, minmax(250px, auto)); gap: 12px; margin-top: 34px; }
.rb-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(18px, 2.2vw, 28px); border-radius: var(--r); overflow: hidden; text-decoration: none; isolation: isolate; border: 1px solid var(--line); min-height: 250px; }
.rb-card:first-child { grid-row: span 2; min-height: 520px; }
.rb-card .ph { position: absolute; inset: 0; z-index: -2; }
.rb-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), filter .6s; }
.rb-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12,9,18,.95) 8%, rgba(12,9,18,.55) 45%, rgba(12,9,18,.1) 80%); transition: opacity .5s; }
.rb-card:hover .ph img { transform: scale(1.07); filter: saturate(1.15); }
.rb-card .drp { position: absolute; top: 0; bottom: 0; width: 26%; z-index: -1; pointer-events: none; transition: transform .9s var(--ease);
  background: repeating-linear-gradient(90deg, rgba(58,31,79,.92) 0 12px, rgba(42,22,56,.92) 12px 19px, rgba(74,40,98,.92) 19px 30px); box-shadow: inset 0 0 30px rgba(0,0,0,.6); }
.rb-card .drp.l { left: 0; transform: translateX(-102%); border-radius: 0 0 40% 0 / 0 0 12% 0; } .rb-card .drp.r { right: 0; transform: translateX(102%); border-radius: 0 0 0 40% / 0 0 0 12%; }
.rb-card:hover .drp.l, .rb-card:hover .drp.r { transform: none; animation: sway 3s ease-in-out infinite; }
.rb-top { position: absolute; top: clamp(16px, 2vw, 22px); left: clamp(16px, 2vw, 22px); right: clamp(16px, 2vw, 22px); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rb-no { font: 800 clamp(34px, 4vw, 54px)/1 var(--f-mega); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.2px rgba(255,255,255,.75); }
.rb-card h3 { margin: 0; font: 800 clamp(20px, 2vw, 28px)/1.02 var(--f-mega); letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
.rb-card:first-child h3 { font-size: clamp(30px, 3.6vw, 52px); }
.rb-card p { margin: 0; color: var(--tx2); font-size: 15px; max-width: 520px; }
.rb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 500 12px var(--f-mono); color: var(--tx3); }
.rb-meta b { color: var(--amber); font-weight: 700; }
.rb-go { display: inline-flex; align-items: center; gap: 10px; font: 700 13px var(--f-body); color: var(--tx); }
.rb-go i { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-style: normal; transition: .35s var(--ease); background: rgba(12,9,18,.4); }
.rb-card:hover .rb-go i { background: var(--a1); color: #120c18; border-color: transparent; transform: rotate(-45deg); }
.rb-card:hover { border-color: color-mix(in oklab, var(--a1) 50%, transparent); }
@media (max-width: 1023px) { .rb { grid-template-columns: 1fr 1fr; grid-template-rows: none; } .rb-card:first-child { grid-column: span 2; grid-row: auto; min-height: 420px; } }
@media (max-width: 640px) { .rb { grid-template-columns: 1fr; } .rb-card:first-child { grid-column: auto; min-height: 380px; } .rb-card { min-height: 230px; } }

/* --- Страницы доп. рейтингов --- */
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: .38; filter: saturate(1.1); animation: kenburns 32s ease-in-out infinite alternate; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 600 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--tx3); }
.crumbs a { color: var(--tx2); text-decoration: none; } .crumbs a:hover { color: var(--a1); }
.crumbs span[aria-hidden] { opacity: .5; }
.prose { max-width: 860px; }
.prose p { color: var(--tx2); margin: 0 0 1em; text-wrap: pretty; }
.def-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
.def { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.def .no { font: 800 13px var(--f-mono); letter-spacing: .1em; color: var(--a1); }
.def h3 { font-size: 18px; margin: 0; } .def p { margin: 0; font-size: 15px; color: var(--tx2); }
.def.wide { grid-column: 1 / -1; background: linear-gradient(120deg, color-mix(in oklab, var(--a1) 18%, transparent), rgba(255,255,255,.02)); }
.def.wide p { font-size: clamp(16px, 1.5vw, 19px); color: var(--tx); }
.scn { display: grid; grid-template-columns: 1.05fr 1fr; gap: 26px; align-items: stretch; }
.scn-list { display: grid; gap: 8px; align-content: start; }
.scn-list button { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-weight: 700; font-size: 15px; cursor: pointer; transition: .3s var(--ease); }
.scn-list button em { font: 800 22px/1 var(--f-mega); font-style: normal; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.5); letter-spacing: -.04em; }
.scn-list button:hover { border-color: color-mix(in oklab, var(--a1) 50%, transparent); transform: translateX(4px); }
.scn-list button[aria-selected="true"] { background: linear-gradient(110deg, color-mix(in oklab, var(--a1) 24%, transparent), rgba(255,255,255,.03)); border-color: color-mix(in oklab, var(--a1) 60%, transparent); }
.scn-list button[aria-selected="true"] em { -webkit-text-stroke: 0; color: var(--a1); }
.scn-body dl { display: grid; gap: 14px; margin: 0; }
.scn-body dt { font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--a1); }
.scn-body dd { margin: 4px 0 0; color: var(--tx2); font-size: 15.5px; }
.share { display: grid; gap: 8px; }
.share-row { display: grid; grid-template-columns: 200px 1fr 90px; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 14px; transition: background .25s; }
.share-row:hover { background: rgba(255,255,255,.04); }
.share-row .nm b { display: block; font-size: 15px; } .share-row .nm small { display: block; color: var(--tx3); font-size: 12.5px; margin-top: 2px; }
.share-row .trk { position: relative; height: 26px; border-radius: 8px; background: rgba(255,255,255,.05); overflow: hidden; }
.share-row .trk i { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, var(--a1), var(--a2)); opacity: .9; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease); }
.share-row.in .trk i { transform: scaleX(1); }
.share-row .trk em { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font: 500 12px var(--f-body); font-style: normal; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); white-space: nowrap; z-index: 2; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 20px); }
.share-row .pc { font: 700 16px var(--f-mono); text-align: right; }
.lvl3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lvl { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.lvl .tag { font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--a1); }
.lvl h3 { margin: 0; font-size: 18px; }
.lvl ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; color: var(--tx2); }
.lvl ul li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.lvl ul li span:last-child { font-family: var(--f-mono); color: var(--tx); white-space: nowrap; }
.lvl .tot { margin-top: auto; font: 800 clamp(26px, 2.6vw, 34px)/1 var(--f-mega); letter-spacing: -.04em; }
.lvl .bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.07); overflow: hidden; }
.lvl .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--a1), var(--a2)); width: 0; transition: width 1.4s var(--ease); }
.lvl.in .bar i { width: var(--w); }
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 3px; height: 120px; align-items: stretch; margin-top: 4px; }
.panels i { border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--a1) 70%, #000) 0 3px, color-mix(in oklab, var(--a1) 90%, #fff 10%) 3px 7px); position: relative; animation: pnl .6s var(--ease) backwards; animation-delay: calc(var(--k) * 50ms); }
.panels i::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.7); top: calc(var(--r) * 1%); box-shadow: 0 calc(var(--r) * 1.2px) 0 rgba(255,255,255,.4); }
@keyframes pnl { from { transform: scaleY(0); transform-origin: top; } }
.ttl3 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mono-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mono-list li { padding: 16px 18px 16px 18px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.mono-list b { display: block; margin-bottom: 4px; }
.mono-list span { color: var(--tx2); font-size: 15px; }
.gloss { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gloss div { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: 14.5px; color: var(--tx2); }
.gloss b { display: block; color: #fff; font-family: var(--f-serif); font-style: italic; font-size: 22px; font-weight: 600; margin-bottom: 4px; }
.route3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.route3 > div { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.route3 h3 { margin: 0; font-size: 18px; }
.route3 ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: r3; }
.route3 li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; font-size: 14.5px; color: var(--tx2); }
.route3 li::before { counter-increment: r3; content: counter(r3); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--f-mega); background: rgba(255,255,255,.08); color: var(--tx); }
.route3 li:first-child::before { background: linear-gradient(135deg, var(--amber), var(--coral)); color: #120c18; }
.route3 li b { color: var(--tx); }
.tbl-wrap .t td b { color: var(--tx); }
.acc { display: grid; gap: 10px; }
.acc details { padding: 0; overflow: hidden; }
.acc summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; gap: 14px; align-items: center; font-weight: 700; font-size: 16.5px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: '+'; font: 400 26px/1 var(--f-body); color: var(--a1); transition: transform .3s var(--ease); }
.acc details[open] summary::after { transform: rotate(45deg); }
.acc .bd { padding: 0 22px 20px; color: var(--tx2); font-size: 15px; }
.acc .bd p { margin: 0 0 10px; }
.acc .bd b { color: var(--tx); }
@media (max-width: 1023px) { .scn, .lvl3, .route3 { grid-template-columns: 1fr; } .ttl3 { grid-template-columns: 1fr 1fr; } .share-row { grid-template-columns: 1fr 70px; } .share-row .trk { grid-column: 1 / -1; grid-row: 2; } }
@media (max-width: 760px) { .def-grid, .ttl3 { grid-template-columns: 1fr; } }
.hm-item.soon { opacity: .55; cursor: default; } .hm-item.soon:hover { background: none; transform: none; }
.rb-card.soon { cursor: default; } .rb-card.soon .rb-go { color: var(--tx3); }
.rp-steps { display: grid; gap: 6px; }
.rp-steps .r { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.04); }
.rp-steps .r span:first-child { color: var(--tx3); }
.rp-steps .r span:last-child { font-family: var(--f-mono); text-align: right; }
.rp-steps .r b { color: var(--a1); }
.panels-cap { font: 600 12px var(--f-mono); color: var(--tx3); }
.sh-meter { position: relative; height: 14px; border-radius: 14px; background: rgba(255,255,255,.07); overflow: visible; }
.sh-meter .band { position: absolute; top: 0; bottom: 0; left: 22.2%; width: 22.2%; border-radius: 14px; background: linear-gradient(90deg, var(--a1), var(--a2)); opacity: .55; }
.sh-meter .pin { position: absolute; top: 50%; left: var(--p, 30%); width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px color-mix(in oklab, var(--a1) 40%, transparent); transition: left .3s var(--ease); }
.sh-scale { display: flex; justify-content: space-between; font: 500 11px var(--f-mono); color: var(--tx3); margin-top: 6px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-row button { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--line2); background: rgba(255,255,255,.04); font: 600 12.5px var(--f-body); cursor: pointer; }
.chips-row button:hover { border-color: var(--a1); }
.model .mx { font-size: 13px; color: var(--tx2); display: grid; gap: 6px; }
.model .mx b { font: 600 10.5px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; display: block; }
.model .mx .p b { color: var(--teal); } .model .mx .m b { color: var(--coral); }
.models.m7 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.models.m7 .model { min-height: 0; cursor: default; }
.model .mx > div { display: block; }
.pick { position: relative; margin: 26px 0 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 420px; display: flex; align-items: flex-end; isolation: isolate; }
.pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s var(--ease); }
.pick:hover img { transform: scale(1.04); }
.pick::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12,9,18,.92) 0%, rgba(12,9,18,.7) 45%, rgba(12,9,18,.1) 80%); }
.pick figcaption { padding: clamp(22px, 3.5vw, 44px); max-width: 640px; display: grid; gap: 12px; }
.pick h3 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.pick p { margin: 0; color: var(--tx2); font-size: clamp(15px, 1.3vw, 17px); }
@media (max-width: 760px) { .pick { min-height: 380px; } .pick::after { background: linear-gradient(0deg, rgba(12,9,18,.95) 20%, rgba(12,9,18,.55) 70%, rgba(12,9,18,.15)); } }

/* ---------- Блэкаут: карта света, бюджет по схемам, схема напуска ---------- */
.lm-grid { display: grid; gap: 8px; margin-top: 26px; }
.lm-h, .lm-i { display: grid; grid-template-columns: 220px 1fr 1fr; gap: 18px; align-items: center; }
.lm-h { padding: 0 20px; font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); }
.lm-i { padding: 16px 20px; border-radius: 16px; opacity: .001; transform: translateX(-14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lm-i.in { opacity: 1; transform: none; }
.lm-i .lm-t { font: 600 italic 22px/1.15 var(--f-serif); color: #fff; }
.lm-i p { margin: 0; color: var(--tx2); font-size: 15px; }
.lm-i b { font-weight: 600; font-size: 15px; color: var(--tx); padding-left: 14px; border-left: 2px solid var(--a1); }
@media (max-width: 860px) { .lm-h { display: none; } .lm-i { grid-template-columns: 1fr; gap: 8px; } }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 26px; }
.bs-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; opacity: .001; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.bs-card.in { opacity: 1; transform: none; }
.bs-tag { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 800 20px var(--f-mega); color: #120c18; background: linear-gradient(135deg, var(--a1), var(--a2)); }
.bs-card h3 { margin: 0; font-size: 18px; }
.bs-card dl { margin: 0; display: grid; gap: 10px; }
.bs-card dt { font: 600 10.5px var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--tx3); margin-bottom: 2px; }
.bs-card dd { margin: 0; color: var(--tx2); font-size: 14.5px; }
.bs-card .keep dt { color: var(--a1); }
.lvl ul li span.lk { white-space: normal; text-align: right; font-family: var(--f-body); font-size: 13px; color: var(--tx2); }
.gp-scheme { position: relative; height: 170px; border-radius: 14px; background: radial-gradient(120% 90% at 50% 40%, rgba(255,214,140,.22), rgba(0,0,0,.35)); overflow: hidden; --ww: 60%; --wh: 60%; --cw: 75%; --ch: 78%; --cy: 0%; }
.gp-win { position: absolute; left: 50%; top: 50%; width: var(--ww); height: var(--wh); transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.55); border-radius: 3px; background: linear-gradient(180deg, rgba(255,226,160,.85), rgba(255,180,90,.6)); box-shadow: 0 0 40px rgba(255,200,110,.55); transition: .4s var(--ease); }
.gp-win i { position: absolute; background: rgba(255,255,255,.55); }
.gp-win i:first-child { left: 50%; top: 0; bottom: 0; width: 2px; } .gp-win i:last-child { top: 50%; left: 0; right: 0; height: 2px; }
.gp-cv { position: absolute; left: 50%; top: 50%; width: var(--cw); height: var(--ch); transform: translate(-50%, calc(-50% + var(--cy))); border-radius: 6px; background: repeating-linear-gradient(90deg, #1b1426 0 10px, #241b33 10px 20px); box-shadow: 0 10px 30px rgba(0,0,0,.5); z-index: 2; transition: .4s var(--ease); }
.gp-scheme.cas .gp-cv { border-radius: 2px; background: linear-gradient(180deg, #2a2138 0 12%, #1b1426 12%); box-shadow: inset 4px 0 0 rgba(255,255,255,.25), inset -4px 0 0 rgba(255,255,255,.25), 0 10px 30px rgba(0,0,0,.5); }
.gp-leak { position: absolute; z-index: 3; opacity: 0; background: rgba(255,214,140,.95); box-shadow: 0 0 18px 4px rgba(255,200,110,.7); transition: opacity .4s; border-radius: 4px; }
.gp-leak.t { left: 50%; top: calc(50% - var(--ch) / 2 + var(--cy) - 3px); width: var(--cw); height: 3px; transform: translateX(-50%); }
.gp-leak.l, .gp-leak.r { top: 50%; height: var(--wh); width: 3px; transform: translateY(-50%); }
.gp-leak.l { left: calc(50% - var(--cw) / 2 - 3px); } .gp-leak.r { right: calc(50% - var(--cw) / 2 - 3px); }
.gp-scheme.lt .gp-leak.t, .gp-scheme.ls .gp-leak.l, .gp-scheme.ls .gp-leak.r { opacity: 1; }


/* ---------- Школа: одежда сцены, закупка, маршруты ---------- */
.st-stage { display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.st-row { display: grid; grid-template-columns: 70px 1fr 28px; gap: 10px; align-items: center; font: 600 11px var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tx3); }
.st-row b { color: var(--tx); text-align: right; font-size: 13px; }
.st-bars { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; height: 34px; }
.st-bars i { border-radius: 3px 3px 1px 1px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--a1) 65%, #000) 0 3px, color-mix(in oklab, var(--a1) 90%, #fff 10%) 3px 7px); animation: pnl .6s var(--ease) backwards; animation-delay: calc(var(--k) * 25ms); }
.st-bars i.k { background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--a2) 60%, #000) 0 3px, color-mix(in oklab, var(--a2) 90%, #fff 10%) 3px 7px); }
.st-bars i.c { background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--rose, #ff9fb3) 55%, #000) 0 3px, color-mix(in oklab, var(--rose, #ff9fb3) 85%, #fff 15%) 3px 7px); }
.calc-out .share { display: grid; gap: 4px; }
.calc-out .share-row { grid-template-columns: 150px 1fr 54px; padding: 8px 10px; gap: 10px; }
.calc-out .share-row .nm b { font-size: 14px; } .calc-out .share-row .nm small { font-size: 11.5px; }
.q7.q6 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.split.three-sp { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.route3 .r3p { margin: 0; font-size: 14.5px; color: var(--tx2); line-height: 1.6; }
.route3 .r3p a { color: var(--tx); }
.mono-list .tbl-wrap { margin-top: 12px; }
@media (max-width: 760px) { .calc-out .share-row { grid-template-columns: 1fr 54px; } .calc-out .share-row .trk { grid-column: 1 / -1; grid-row: 2; } }