/* =========================================================
   ГАРАЖ 403 — PULP концепт (Punchy Pulp Comic)
   палитра из DESIGN.md (flying papers style reference)
   ========================================================= */
:root{
  --grape:#f0ede4; --lemon:#f4ed36; --dough:#f9cc73; --plum:#61609a;
  --rose:#f8c1ba; --sage:#b5c995; --forest:#375027; --orchid:#ac4f98;
  --crimson:#c94245; --ink:#000000; --cream:#f9f5f2; --charcoal:#1a1a1a;
  --disp:"Unbounded","Manrope",sans-serif;
  --sans:"Manrope",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --bd:3px solid var(--ink);
  --bd-fat:4px solid var(--ink);
  --pop:6px 6px 0 var(--ink);
  --pop-lg:10px 10px 0 var(--ink);
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; background:var(--grape); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--lemon); color:var(--ink); }
.wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 22px; }
.wrap-mid{ max-width:780px; }
mark{ background:transparent; color:inherit; }
.mk-lemon{ color:var(--lemon); -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill; }
.mk-crimson{ color:var(--crimson); -webkit-text-stroke:2.5px var(--ink); paint-order:stroke fill; }

/* ---------- BUTTONS ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-weight:700;
  font-size:15px; text-transform:lowercase; letter-spacing:.01em; padding:14px 22px; border-radius:0;
  border:var(--bd); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background .15s; white-space:nowrap; line-height:1; }
.btn-lemon{ background:var(--lemon); color:var(--ink); box-shadow:var(--pop); }
.btn-lemon:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.btn-lemon:active{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.btn-dark{ background:var(--ink); color:var(--lemon); box-shadow:6px 6px 0 var(--crimson); }
.btn-dark:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--crimson); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }
.btn-big{ font-size:17px; padding:18px 30px; }
.btn-wide{ width:100%; justify-content:center; }
.cta{ position:relative; }

/* ---------- NAV ---------- */
.nav{ position:sticky; top:0; z-index:60; background:var(--cream); border-bottom:var(--bd-fat); }
.nav-in{ max-width:1180px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:20px; }
.logo{ display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.02em; }
.logo-mark{ background:var(--crimson); color:var(--cream); font-family:var(--mono); font-weight:700; font-size:13px; padding:4px 7px; border:2px solid var(--ink); }
.nav-links{ display:flex; gap:22px; margin-left:auto; font-family:var(--mono); font-size:14px; }
.nav-links a{ border-bottom:2px solid transparent; padding-bottom:2px; }
.nav-links a:hover{ border-bottom-color:var(--ink); }
.nav .cta{ box-shadow:4px 4px 0 var(--ink); }

/* ---------- HERO ---------- */
.hero{ position:relative; padding:clamp(44px,7vw,84px) 0 clamp(48px,6vw,88px); overflow:hidden; }
.hero-in{ position:relative; z-index:3; max-width:1180px; margin:0 auto; padding:0 22px; text-align:center; pointer-events:none; }
.hero-in .badge, .hero-in .hero-cta{ pointer-events:auto; }
.badge{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.08em;
  background:var(--cream); border:var(--bd); padding:9px 16px; transform:rotate(-1.4deg); margin-bottom:26px; }
.hero-h1{ font-family:var(--disp); font-weight:900; text-transform:uppercase; line-height:.86; letter-spacing:-.01em;
  margin:0 auto 26px; color:var(--ink); }
.hero-h1 span{ display:block; font-size:clamp(46px,9.2vw,116px); }
.hero-h1 .l2,.hero-h1 .l4{ }
.hero-sub{ font-family:var(--sans); font-weight:600; font-size:clamp(16px,2vw,21px); max-width:50ch; margin:0 auto 32px; color:var(--ink); }
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* stickers */
.stick-layer{ position:absolute; inset:0; z-index:2; }
.sticker{ position:absolute; left:var(--x); top:var(--y); transform:translateY(var(--pary,0)) rotate(var(--r));
  font-family:var(--disp); font-weight:800; font-size:22px; padding:12px 16px; border:var(--bd); cursor:grab;
  user-select:none; touch-action:none; box-shadow:var(--pop); white-space:nowrap; will-change:transform, left, top; }
.sticker:active{ cursor:grabbing; }
.s-403{ background:var(--crimson); color:var(--cream); font-size:34px; }
.s-vault{ background:var(--lemon); color:var(--ink); }
.s-price{ background:var(--sage); color:var(--ink); font-size:26px; }
.s-nowater{ background:var(--dough); color:var(--ink); font-size:18px; }
.s-agents{ background:var(--orchid); color:var(--cream); }
.s-num{ background:var(--rose); color:var(--ink); font-size:20px; }
.s-code{ background:var(--cream); color:var(--ink); font-family:var(--mono); font-weight:700; font-size:30px; }
.s-code .sti{ letter-spacing:-2px; }
.s-chip{ background:var(--cream); padding:12px; }
.chip{ display:block; width:40px; height:40px;
  background:var(--ink);
  -webkit-mask:var(--chip-mask); mask:var(--chip-mask); }
.s-chip .sti{ position:relative; display:flex; }
.s-chip .sti::after{ content:""; position:absolute; left:13px; top:14px; width:14px; height:6px;
  background:var(--lemon); box-shadow:0 9px 0 var(--lemon); }
:root{ --chip-mask:
  linear-gradient(#000 0 0) 10px 0/20px 4px no-repeat,
  linear-gradient(#000 0 0) 10px 36px/20px 4px no-repeat,
  linear-gradient(#000 0 0) 0 10px/4px 20px no-repeat,
  linear-gradient(#000 0 0) 36px 10px/4px 20px no-repeat,
  linear-gradient(#000 0 0) 7px 7px/26px 26px no-repeat; }
/* breathing inner */
@keyframes sbreathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06) translateY(-2px); } }
.sticker .sti{ display:inline-block; animation:sbreathe 3.2s ease-in-out infinite; animation-delay:var(--d,0s); }

/* mascot */
.bot{ position:absolute; right:5%; bottom:80px; z-index:2; width:166px; pointer-events:none; filter:drop-shadow(3px 5px 0 rgba(0,0,0,.16)); }
.bot .mascot{ width:100%; height:auto; display:block; animation:bob 3.6s ease-in-out infinite; transform-origin:center; }
@keyframes bob{ 50%{ transform:translateY(-8px) rotate(-2deg); } }
.m-eyes{ transition:transform .09s linear; }
.mascot .m-eyes-in{ transform-box:fill-box; transform-origin:center; transition:transform .09s ease; }
.blink .m-eyes-in{ transform:scaleY(.12); }

/* scattered mascot spots + gags */
.m-spot{ position:absolute; z-index:5; width:118px; pointer-events:auto; filter:drop-shadow(3px 5px 0 rgba(0,0,0,.16)); }
.m-spot .mascot{ width:100%; height:auto; display:block; transform-origin:bottom center; }
.m-fit{ top:64px; right:5%; transform:rotate(5deg); width:170px; cursor:pointer; }
.m-final{ top:48px; right:5%; transform:rotate(-6deg); width:168px; cursor:pointer; }
.final{ position:relative; }
.sec-fit{ position:relative; }
.final-in{ position:relative; }
@keyframes mhop{ 0%,100%{ transform:translateY(0); } 28%{ transform:translateY(-24px); } 52%{ transform:translateY(0); } 70%{ transform:translateY(-9px); } 85%{ transform:translateY(0); } }
.hop .mascot{ animation:mhop .72s ease; }
@keyframes mspin{ to{ transform:rotate(360deg); } }
.spin .mascot{ animation:mspin .6s ease; }
@keyframes mfloatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-11px); } }
.m-move-float .mascot{ animation:mfloatY 3s ease-in-out infinite; }
@keyframes mwiggle{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.m-move-wiggle .mascot{ animation:mwiggle 2.6s ease-in-out infinite; transform-origin:bottom center; }
@keyframes mbob2{ 50%{ transform:translateY(-7px) rotate(-2deg); } }
.m-move-bob .mascot{ animation:mbob2 3.4s ease-in-out infinite; }
.m-prop{ position:absolute; width:42px; z-index:6; pointer-events:none; }
.m-prop svg{ width:100%; height:auto; display:block; }
.m-prop.heart{ top:-24px; left:-14px; animation:mpropF 2.2s ease-in-out infinite; }
.m-prop.star{ top:-20px; right:-16px; animation:mpropS 4s linear infinite; }
@keyframes mpropF{ 0%,100%{ transform:translateY(0) scale(1); } 50%{ transform:translateY(-8px) scale(1.1); } }
@keyframes mpropS{ to{ transform:rotate(360deg); } }
.m-price{ top:32%; right:5%; transform:rotate(-4deg); width:150px; cursor:pointer; }
.sec-price{ position:relative; }

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--ink); color:var(--lemon); border-top:var(--bd-fat); border-bottom:var(--bd-fat); overflow:hidden; padding:14px 0; }
.mq-track{ display:inline-flex; align-items:center; gap:24px; white-space:nowrap; font-family:var(--disp); font-weight:800; font-size:26px; text-transform:uppercase; animation:mq 26s linear infinite; will-change:transform; }
.mq-track b{ color:var(--crimson); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ---------- SECTION SHELL ---------- */
.sec{ padding:clamp(56px,8vw,110px) 0; border-bottom:var(--bd-fat); }
.sec-head{ margin-bottom:clamp(34px,5vw,56px); }
.sec-head.center{ text-align:center; }
.eyebrow{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:14px; letter-spacing:.06em; background:var(--ink); color:var(--lemon); padding:6px 12px; margin-bottom:18px; }
.sec-h2{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(34px,6vw,82px); line-height:.9; letter-spacing:-.01em; margin:0; }
.sec-h2 s{ text-decoration:none; position:relative; opacity:.85; }
.sec-h2 s::after{ content:""; position:absolute; left:-.04em; right:-.04em; top:52%; height:.1em; background:var(--crimson); transform:rotate(-3deg); border-radius:2px; }

/* ---------- WHAT (blocks) ---------- */
.sec-what{ background:var(--grape); }
.blocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.blk{ border:var(--bd-fat); border-radius:6px; padding:24px; box-shadow:var(--pop); transform:rotate(var(--rot));
  transition:transform .18s ease, box-shadow .18s ease; min-height:230px; display:flex; flex-direction:column; }
.blk:hover{ transform:rotate(0deg) translate(-3px,-3px); box-shadow:var(--pop-lg); }
.blk-n{ font-family:var(--mono); font-weight:700; font-size:14px; }
.blk h3{ font-family:var(--disp); font-weight:800; font-size:clamp(22px,2.4vw,30px); margin:10px 0 12px; text-transform:uppercase; line-height:.95; }
.blk p{ font-family:var(--sans); font-weight:500; font-size:15px; line-height:1.45; margin:0; }
.blk-tag{ margin-top:auto; align-self:flex-start; font-family:var(--mono); font-weight:700; font-size:12px; border:2px solid var(--ink); padding:5px 10px; margin-top:18px; }
.blk-vault{ background:var(--lemon); color:var(--ink); }
.blk-stream{ background:var(--orchid); color:var(--cream); }
.blk-stream .blk-tag, .blk-board .blk-tag, .blk-cur .blk-tag{ border-color:var(--cream); }
.blk-board{ background:var(--crimson); color:var(--cream); }
.blk-docs{ background:var(--dough); color:var(--ink); }
.blk-chat{ background:var(--sage); color:var(--ink); }
.blk-cur{ background:var(--plum); color:var(--cream); }

/* ---------- FIT ---------- */
.sec-fit{ background:var(--rose); }
.fit-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.fit-card{ border:var(--bd-fat); border-radius:6px; padding:28px; box-shadow:var(--pop); }
.fit-yes{ background:var(--sage); }
.fit-no{ background:var(--cream); }
.fit-top{ font-family:var(--disp); font-weight:800; font-size:24px; text-transform:uppercase; margin-bottom:20px; border-bottom:var(--bd); padding-bottom:14px; }
.fit-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.fit-card li{ position:relative; padding-left:34px; font-weight:600; font-size:16px; line-height:1.4; }
.fit-card li::before{ position:absolute; left:0; top:-2px; font-family:var(--disp); font-weight:900; font-size:22px; }
.fit-yes li::before{ content:"+"; color:var(--forest); }
.fit-no li::before{ content:"–"; color:var(--crimson); }

/* ---------- RHYTHM ---------- */
.sec-rhythm{ background:var(--plum); color:var(--cream); }
.sec-rhythm .eyebrow{ background:var(--lemon); color:var(--ink); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.stat{ border:var(--bd-fat); border-radius:6px; padding:30px 26px; box-shadow:6px 6px 0 rgba(0,0,0,.55); }
.stat b{ font-family:var(--disp); font-weight:900; font-size:78px; line-height:.8; display:block; margin-bottom:18px; }
.stat span{ font-family:var(--sans); font-weight:600; font-size:16px; }
.stat-a{ background:var(--lemon); color:var(--ink); }
.stat-b{ background:var(--crimson); color:var(--cream); }
.stat-c{ background:var(--dough); color:var(--ink); }

/* ---------- PRICE ---------- */
.sec-price{ background:var(--orchid); }
.price-card{ max-width:560px; margin:0 auto; background:var(--cream); border:var(--bd-fat); border-radius:6px; padding:34px; box-shadow:var(--pop-lg); position:relative; }
.price-flag{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:13px; background:var(--lemon); border:var(--bd); padding:8px 14px; transform:rotate(-1.5deg); margin-bottom:22px; }
.price-amt{ display:flex; align-items:baseline; gap:10px; }
.price-amt b{ font-family:var(--disp); font-weight:900; font-size:clamp(58px,11vw,96px); line-height:.85; }
.price-amt span{ font-family:var(--mono); font-weight:700; font-size:18px; }
.price-after{ font-weight:600; font-size:15px; margin:14px 0 22px; color:var(--charcoal); }
.price-after s{ color:var(--crimson); text-decoration:none; }
.price-list{ list-style:none; margin:0 0 22px; padding:20px 0 0; border-top:var(--bd); display:flex; flex-direction:column; gap:11px; }
.price-list li{ position:relative; padding-left:30px; font-weight:600; font-size:15px; }
.price-list li::before{ content:"✦"; position:absolute; left:2px; color:var(--orchid); font-size:16px; }
.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px; }
.countdown div{ background:var(--ink); color:var(--lemon); border-radius:4px; padding:12px 4px; text-align:center; }
.countdown b{ font-family:var(--disp); font-weight:900; font-size:30px; display:block; font-variant-numeric:tabular-nums; color:#fff; }
.countdown span{ font-family:var(--mono); font-size:11px; }
.price-fine{ text-align:center; font-family:var(--mono); font-size:12.5px; color:var(--charcoal); margin:14px 0 0; }
html[data-urg="off"] .price-flag, html[data-urg="off"] .countdown{ display:none; }

/* ---------- FAQ ---------- */
.sec-faq{ background:var(--sage); }
.faq{ display:flex; flex-direction:column; gap:14px; }
.faq-i{ background:var(--cream); border:var(--bd-fat); border-radius:6px; overflow:hidden; box-shadow:var(--pop); transition:transform .15s, box-shadow .15s; }
.faq-i.open{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink); }
.faq-q{ width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink); -webkit-text-fill-color:currentColor; font-family:var(--sans); font-weight:700; font-size:17px;
  padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; line-height:1.3; }
.faq-q i{ position:relative; flex:0 0 18px; width:18px; height:18px; }
.faq-q i::before,.faq-q i::after{ content:""; position:absolute; background:var(--ink); transition:transform .25s ease; }
.faq-q i::before{ left:0; top:8px; width:18px; height:3px; }
.faq-q i::after{ left:8px; top:0; width:3px; height:18px; }
.faq-i.open .faq-q i::after{ transform:scaleY(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ margin:0; padding:0 22px 22px; font-weight:500; font-size:15px; line-height:1.55; }

/* ---------- FINAL ---------- */
.final{ background:var(--lemon); padding:clamp(64px,10vw,130px) 0; text-align:center; border-bottom:var(--bd-fat); position:relative; overflow:hidden; }
.final-in{ position:relative; z-index:2; max-width:980px; margin:0 auto; padding:0 22px; }
.final-flag{ display:inline-block; font-family:var(--mono); font-weight:700; font-size:14px; background:var(--ink); color:var(--lemon); padding:8px 16px; transform:rotate(-1.4deg); margin-bottom:24px; }
.final-h{ font-family:var(--disp); font-weight:900; text-transform:uppercase; font-size:clamp(46px,10vw,128px); line-height:.84; margin:0 0 22px; }
.final-sub{ font-weight:600; font-size:clamp(16px,2vw,20px); max-width:46ch; margin:0 auto 32px; }

/* ---------- FOOTER ---------- */
.ftr{ background:var(--forest); color:var(--cream); padding:34px 0; }
.ftr-in{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.logo-light .logo-mark{ background:var(--lemon); color:var(--ink); }
.ftr-dim{ font-family:var(--mono); font-size:13px; opacity:.85; }
.ftr-in .ftr-dim:last-child{ margin-left:auto; }
.ftr-link{ text-decoration:none; border-bottom:1px solid transparent; transition:border-color .15s, opacity .15s; }
.ftr-link:hover{ opacity:1; border-bottom-color:currentColor; }

/* ---------- confetti ---------- */
.confetti{ position:fixed; width:12px; height:16px; z-index:200; pointer-events:none; border:2px solid var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .blocks{ grid-template-columns:repeat(2,1fr); }
  .bot{ width:104px; right:3%; }
}
@media (max-width:680px){
  .m-spot{ display:none; }
  body{ font-size:16px; }
  .nav-links{ display:none; }
  .blocks{ grid-template-columns:1fr; }
  .fit-2{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stick-layer{ display:none; }
  .bot{ display:none; }
  .hero{ padding-top:40px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .mq-track{ animation:none !important; }
}

/* =========================================================
   ПАЛИТРЫ (переключаются через Tweaks, data-pal на <html>)
   ========================================================= */
/* белый минимал = база (бумажный фон), тут только тёмный футер */
html[data-pal="white"]{ --forest:#141414; }
/* виноград (фиолетовый фон) как опция */
html[data-pal="grape"]{ --grape:#8584bd; --forest:#375027; }

/* === БЕЛЫЙ МИНИМАЛ: все секции на бумажном фоне, цвет только в карточках === */
html[data-pal="white"] .sec-what,
html[data-pal="white"] .sec-fit,
html[data-pal="white"] .sec-rhythm,
html[data-pal="white"] .sec-price,
html[data-pal="white"] .sec-faq,
html[data-pal="white"] .final{ background:var(--grape); }
/* rhythm в обычном режиме светлый текст на фиолетовом — вернуть тёмный на белом */
html[data-pal="white"] .sec-rhythm{ color:var(--ink); }
html[data-pal="white"] .sec-rhythm .eyebrow{ background:var(--ink); color:var(--lemon); }
/* финал был жёлтый — оставить акцентную плашку, но фон белый */
html[data-pal="white"] .final-flag{ background:var(--ink); color:var(--lemon); }

/* карточки на белом фоне возвращаем в цвет, чтобы не сливались */
html[data-pal="white"] .fit-yes{ background:var(--sage); }
html[data-pal="white"] .fit-no{ background:var(--rose); }
html[data-pal="white"] .price-card{ background:var(--cream); }
html[data-pal="white"] .stat-a{ background:var(--sage); color:var(--ink); }
html[data-pal="white"] .price-card .countdown div{ background:var(--ink); }
html[data-pal="white"] .faq-i{ background:var(--cream); }
html[data-pal="white"] .faq-i:nth-child(3n+1){ background:var(--dough); }
html[data-pal="white"] .faq-i:nth-child(3n+2){ background:var(--sage); }
html[data-pal="white"] .faq-i:nth-child(3n){ background:var(--rose); }
/* мята */
html[data-pal="mint"]{ --grape:#dcebe2; --forest:#16201a; }
/* песок */
html[data-pal="sand"]{ --grape:#ece2d0; --forest:#241d14; }
/* === ТЁМНЫЙ МИНИМАЛ: тёплая тёмная "бумага", не чистый чёрный === */
html[data-pal="night"]{ --grape:#232220; --forest:#1a1917; }
/* секции на тёмном фоне */
html[data-pal="night"] .sec-what,
html[data-pal="night"] .sec-fit,
html[data-pal="night"] .sec-rhythm,
html[data-pal="night"] .sec-price,
html[data-pal="night"] .sec-faq,
html[data-pal="night"] .final{ background:var(--grape); }
/* светлый текст на тёмном */
html[data-pal="night"] .hero-h1,
html[data-pal="night"] .sec-h2,
html[data-pal="night"] .final-h{ color:#f3f1ea; }
html[data-pal="night"] .hero-sub,
html[data-pal="night"] .sec-lede,
html[data-pal="night"] .final-sub{ color:#a8a49a; }
/* разделители-хайрлайны вместо чёрных рамок */
html[data-pal="night"] .sec,
html[data-pal="night"] .final{ border-bottom-color:rgba(255,255,255,.12); }
html[data-pal="night"] .marquee{ border-color:rgba(255,255,255,.12); }
/* nav */
html[data-pal="night"] .nav{ background:rgba(35,34,32,.82); backdrop-filter:blur(10px); border-bottom-color:rgba(255,255,255,.12); }
html[data-pal="night"] .logo{ color:#f3f1ea; }
html[data-pal="night"] .nav-links a{ color:#bdb9b0; }
html[data-pal="night"] .nav-links a:hover{ border-bottom-color:#fff; color:#fff; }
html[data-pal="night"] .badge{ background:transparent; border-color:rgba(255,255,255,.3); color:#ebe8e0; }
/* bold-карточки what: белая тень вместо чёрной */
html[data-pal="night"] .blk{ box-shadow:6px 6px 0 rgba(255,255,255,.14); }
/* цветные карточки-акценты (как в белом минимале) */
html[data-pal="night"] .fit-yes{ background:var(--sage); }
html[data-pal="night"] .fit-no{ background:var(--rose); }
html[data-pal="night"] .stat-a{ background:var(--sage); color:var(--ink); }
html[data-pal="night"] .price-card{ background:var(--cream); }
html[data-pal="night"] .faq-i{ background:var(--cream); }
html[data-pal="night"] .faq-i:nth-child(3n+1){ background:var(--dough); }
html[data-pal="night"] .faq-i:nth-child(3n+2){ background:var(--sage); }
html[data-pal="night"] .faq-i:nth-child(3n){ background:var(--rose); }

/* =========================================================
   ОСНОВНОЙ АКЦЕНТ (data-accent) — CTA, vault, бейджи, финал
   ========================================================= */
html[data-accent="orange"]{ --lemon:#ff7a1a; }
html[data-accent="pink"]{ --lemon:#ff4d97; }
html[data-accent="cyan"]{ --lemon:#24e3c5; }

/* =========================================================
   РЕЖИМ "СТРОГИЙ" (data-mode=refined)
   та же типографика и структура, но взрослее: тонкие линии,
   без хард-теней и стикеров, спокойная бумажная гамма,
   нейтральные карточки, акцент дозированно
   ========================================================= */
html[data-mode="refined"]{ --grape:#ece7dd; --cream:#ffffff; --pop:none; --pop-lg:0 22px 50px -30px rgba(20,18,12,.4); }
html[data-mode="refined"] .stick-layer,
html[data-mode="refined"] .bot,
html[data-mode="refined"] .m-spot{ display:none; }

/* nav + hero */
html[data-mode="refined"] .nav{ background:rgba(236,231,221,.8); backdrop-filter:blur(10px); border-bottom-width:1px; }
html[data-mode="refined"] .logo-mark{ border-width:1px; }
html[data-mode="refined"] .badge{ transform:none; background:transparent; border:1px solid rgba(20,18,12,.28); }
html[data-mode="refined"] .hero-h1{ letter-spacing:-.025em; }
html[data-mode="refined"] .mk-lemon,
html[data-mode="refined"] .mk-crimson{ -webkit-text-stroke:0; }
html[data-mode="refined"] .mk-crimson{ color:var(--ink); font-style:italic; }

/* buttons: hairline, soft radius, no comic shadow */
html[data-mode="refined"] .btn{ border-radius:8px; border-width:1px; }
html[data-mode="refined"] .btn-lemon{ box-shadow:none; }
html[data-mode="refined"] .btn-lemon:hover{ box-shadow:none; transform:translateY(-2px); }
html[data-mode="refined"] .btn-dark{ box-shadow:none; }
html[data-mode="refined"] .btn-dark:hover{ box-shadow:none; transform:translateY(-2px); }
html[data-mode="refined"] .nav .cta{ box-shadow:none; }
html[data-mode="refined"] .btn-ghost:hover{ background:var(--ink); color:var(--cream); }

/* marquee: quiet hairline rule */
html[data-mode="refined"] .marquee{ background:transparent; border-color:rgba(20,18,12,.14); border-width:1px; }
html[data-mode="refined"] .mq-track{ color:rgba(20,18,12,.5); font-weight:700; }
html[data-mode="refined"] .mq-track b{ color:var(--lemon); }

/* sections: one calm surface, separated by hairlines */
html[data-mode="refined"] .sec{ border-bottom:1px solid rgba(20,18,12,.13); }
html[data-mode="refined"] .sec-what,
html[data-mode="refined"] .sec-fit,
html[data-mode="refined"] .sec-rhythm,
html[data-mode="refined"] .sec-price,
html[data-mode="refined"] .sec-faq{ background:var(--grape); color:var(--ink); }
html[data-mode="refined"] .eyebrow{ background:transparent; color:rgba(20,18,12,.55); border:1px solid rgba(20,18,12,.28); }

/* what cards: uniform refined surface, accent only on the index */
html[data-mode="refined"] .blk{ background:var(--cream); color:var(--ink); border:1px solid rgba(20,18,12,.14); border-radius:12px; transform:none; box-shadow:none; }
html[data-mode="refined"] .blk:hover{ transform:translateY(-3px); box-shadow:var(--pop-lg); border-color:rgba(20,18,12,.4); }
html[data-mode="refined"] .blk h3{ color:var(--ink); }
html[data-mode="refined"] .blk p{ color:rgba(20,18,12,.62); }
html[data-mode="refined"] .blk-n{ color:var(--ink); opacity:.35; }
html[data-mode="refined"] .blk-tag{ border:1px solid rgba(20,18,12,.22); color:rgba(20,18,12,.7); }
html[data-mode="refined"] .soon{ background:var(--lemon); color:#15140e; }

/* fit */
html[data-mode="refined"] .fit-card{ background:var(--cream); color:var(--ink); border:1px solid rgba(20,18,12,.14); box-shadow:none; }
html[data-mode="refined"] .fit-top{ border-color:rgba(20,18,12,.16); }

/* rhythm */
html[data-mode="refined"] .stat{ background:var(--cream); color:var(--ink); border:1px solid rgba(20,18,12,.14); box-shadow:none; }
html[data-mode="refined"] .stat b{ color:var(--ink); }
html[data-mode="refined"] .stat span{ color:rgba(20,18,12,.62); }

/* price */
html[data-mode="refined"] .price-card{ border:1px solid rgba(20,18,12,.16); box-shadow:var(--pop-lg); }
html[data-mode="refined"] .price-flag{ transform:none; border-width:1px; }
html[data-mode="refined"] .countdown div{ border-width:1px; }

/* faq */
html[data-mode="refined"] .faq-i{ box-shadow:none; border:1px solid rgba(20,18,12,.14); }
html[data-mode="refined"] .faq-i.open{ box-shadow:none; transform:none; border-color:rgba(20,18,12,.45); }

/* final */
html[data-mode="refined"] .final{ background:var(--cream); }
html[data-mode="refined"] .final-flag{ transform:none; }