/*
Theme Name: lit451
Author: 451°
Version: 2.1.1
*/

:root{
  --bg: #fff7f1;
  --bg2:#ffffff;
  --card:#ffffff;
  --text:#14141b;
  --muted:#5e5e70;

  --brand:#ff5a2f;
  --brand2:#ff8a60;
  --brand3:#ffd0c2;

  --radius2: 26px;
  --max: 1420px;

  --shadow: 0 20px 60px rgba(20, 18, 16, .10);
  --shadow2: 0 12px 32px rgba(20, 18, 16, .08);

  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --fontHead: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;

  --bgx: 0px;
  --bgy: 0px;
  --driftx: 0px;
  --drifty: 0px;

  --scrollp: 0;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

/* =========================================
   🔥 НОВЫЙ ЧИСТЫЙ ФОН (FIX)
   ========================================= */
html {
  background-color: #ffffff;
  
  /* Мягкое свечение только сверху + плавный уход в белый */
  background-image: 
    radial-gradient(circle at 50% -10%, rgba(255, 90, 47, 0.12), transparent 50%),
    linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
    
  /* ФОН ЗАФИКСИРОВАН: никаких полос при скролле! */
  background-attachment: fixed;
  background-size: cover;
  
  min-height: 100%;
  position: relative;
}

/* Бумажная текстура (мягче) */
html::before {
  content: "";
  position: fixed; 
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05; 
  /* Шум через SVG фильтр для чистоты */
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.03) 1px, rgba(0,0,0,0.03) 2px),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* Фоновые иконки (дрифт) с маской */
#bgLayer {
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23ff8a60' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' opacity='0.9'%3E%3Cpath d='M18 38c14-8 30-8 44 0v78c-14-8-30-8-44 0V38z'/%3E%3Cpath d='M62 38c14-8 30-8 44 0v78c-14-8-30-8-44 0V38z'/%3E%3Cpath d='M62 32v90'/%3E%3Crect x='156' y='26' width='34' height='54' rx='10'/%3E%3Cpath d='M164 36h18M164 48h18' opacity='.5'/%3E%3Ccircle cx='136' cy='206' r='4' fill='%23ff8a60' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;

  transform: translate3d(
    calc(var(--bgx) + var(--driftx)),
    calc(var(--bgy) + var(--drifty)),
    0
  );
  will-change: transform;
  
  /* Маска: иконки исчезают к низу, чтобы футер был на чистом */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
}

/* Контент */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  line-height: 1.55;
  background: transparent;
  position: relative;
  z-index: 1;
}

.header, main, footer{
  position:relative;
  z-index:2;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block; border-radius:18px}

.container{
  width:min(var(--max), 96vw);
  margin:0 auto;
  padding:24px 0;
}

/* единый стек */
main.container{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding-top: 18px;
}
main.container > *{ margin:0 !important; }

@media (max-width: 920px){
  main.container{padding-bottom: calc(110px + env(safe-area-inset-bottom));}
}

/* Inputs */
input[type="search"],
input[type="text"],
input[type="email"],
textarea{
  width: min(520px, 100%);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(20,20,25,.12);
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(20,18,16,.06);
  font: inherit;
  color: var(--text);
  transition: box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
}
input[type="search"]::placeholder,
input[type="text"]::placeholder,
textarea::placeholder{color: rgba(20,20,25,.45)}
input[type="search"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus{
  outline:none;
  border-color: rgba(255,90,47,.35);
  box-shadow: 0 18px 44px rgba(255,90,47,.14);
  transform: translateY(-1px);
}

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(20,20,25,.08);
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s cubic-bezier(.2,.8,.2,1);
}
.header.is-scrolled{box-shadow: 0 18px 40px rgba(20, 18, 16, .08)}
.header.is-hidden{transform: translateY(-110%)}

.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transform-origin:left;
  transform: scaleX(var(--scrollp));
  opacity:.85;
  pointer-events:none;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:flex-start;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
}
.brand-text{font-weight:900; line-height:1.1}

.brand-logo-wrap .custom-logo-link,
.custom-logo-link{
  display:flex;
  align-items:center;
  width:48px;
  height:48px;
}
.brand-logo-wrap img,
.brand-logo-wrap img.custom-logo,
img.custom-logo{
  width:48px !important;
  height:48px !important;
  max-width:48px !important;
  max-height:48px !important;
  object-fit:cover !important;
  border-radius:16px !important;
  border:1px solid rgba(20,20,25,.08);
  box-shadow: 0 14px 35px rgba(255, 90, 47, .18);
}
.brand-badge{
  width:48px; height:48px; border-radius:16px;
  background: radial-gradient(120% 120% at 15% 15%, #ffd0c2 0%, var(--brand2) 42%, var(--brand) 100%);
  box-shadow: 0 14px 35px rgba(255, 90, 47, .20);
  position:relative; overflow:hidden;
}
.brand-badge::after{
  content:"";
  position:absolute; inset:-30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent);
  transform: rotate(25deg) translateX(-60%);
  animation: shine 7.2s ease-in-out infinite;
  opacity:.55;
}
@keyframes shine{
  0%, 60%{transform: rotate(25deg) translateX(-80%); opacity:0}
  70%{opacity:.55}
  100%{transform: rotate(25deg) translateX(80%); opacity:0}
}

.menu{margin-left:auto; display:flex; align-items:center; gap:14px}
.menu-links{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.menu a{
  color:var(--muted);
  font-weight:800;
  white-space:nowrap;
  position:relative;
  transition: color .22s ease;
}
.menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:-8px;
  width:0;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width .26s cubic-bezier(.2,.8,.2,1);
  opacity:.65;
}
.menu a:hover{color:var(--text)}
.menu a:hover::after{width:100%}

/* бургер */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(20,20,25,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 10px 22px rgba(20,18,16,.06);
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:999px;
  background: rgba(20,20,25,.78);
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s cubic-bezier(.2,.8,.2,1);
}
body.menu-open .nav-toggle span:nth-child(1){transform: translateY(7px) rotate(45deg)}
body.menu-open .nav-toggle span:nth-child(2){opacity:0}
body.menu-open .nav-toggle span:nth-child(3){transform: translateY(-7px) rotate(-45deg)}

/* Buttons */
.btn, .lit451-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  font-weight:900;
  letter-spacing:.2px;
  position:relative;
  overflow:hidden;
  transition: transform .26s cubic-bezier(.2,.8,.2,1), box-shadow .26s cubic-bezier(.2,.8,.2,1), filter .26s cubic-bezier(.2,.8,.2,1);
}

.btn{
  background: linear-gradient(180deg, #ff7a55, var(--brand));
  color:#ffffff !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
  box-shadow: 0 16px 35px rgba(255, 90, 47, .22);
}
.btn::after, .lit451-btn::after{
  content:"";
  position:absolute; inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.74), transparent);
  transform: rotate(20deg) translateX(-60%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
  opacity:.55;
}
.btn:hover, .lit451-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(255, 90, 47, .26);
  filter:saturate(1.05);
}
.btn:hover::after, .lit451-btn:hover::after{transform: rotate(20deg) translateX(60%)}

.btn.secondary{
  background: rgba(255,255,255,.94);
  color: var(--text) !important;
  border: 1px solid rgba(20,20,25,.10);
  box-shadow: var(--shadow2);
  text-shadow:none;
}
.btn.secondary:hover{box-shadow: 0 14px 32px rgba(20, 18, 16, .10)}

.btn.white{
  background: rgba(255,255,255,.96);
  color: var(--text) !important;
  border: 1px solid rgba(20,20,25,.12);
  box-shadow: 0 14px 34px rgba(20,18,16,.08);
  text-shadow:none;
}
.btn.white:hover{
  border-color: rgba(255,90,47,.28);
  box-shadow: 0 18px 44px rgba(255,90,47,.12);
}

.btn.btn-tg{
  background: linear-gradient(180deg, #ff9b7f, #ff6a44);
  color:#ffffff !important;
  border: 1px solid rgba(255,90,47,.18);
  box-shadow: 0 16px 38px rgba(255,90,47,.18);
}

/* Cards */
.card{
  position:relative;
  background: var(--card);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background: linear-gradient(135deg,
    rgba(255,90,47,.45),
    rgba(255,255,255,.88),
    rgba(255,138,96,.38)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
  transition: opacity .28s cubic-bezier(.2,.8,.2,1);
}
.card:hover::before{opacity:.78}
.card:hover{transform: translateY(-2px); box-shadow: 0 26px 70px rgba(20, 18, 16, .12)}

/* Hero */
.hero{
  padding:28px 0 8px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){.hero{grid-template-columns:1fr}}
.hero .card{padding:26px}

.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(20,20,25,.10);
  color: var(--muted);
  font-weight:900;
  background: rgba(255,255,255,.94);
  margin-bottom:12px;
}
.h1{
  font-family:var(--fontHead);
  font-size:52px;
  line-height:1.02;
  margin:0 0 12px;
  letter-spacing:-.8px;
}
@media (max-width: 600px){.h1{font-size:36px}}
.section-title{font-family:var(--fontHead); font-size:24px; margin:0 0 8px}
.small{font-size:13px; color:var(--muted)}
.lead{color:var(--muted); font-size:17px; margin:0 0 18px}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}

.hero-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(20,20,25,.10);
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 26px rgba(20,18,16,.06);
}

/* Howto */
.howto{padding:22px}
.howto-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.howto-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 980px){.howto-grid{grid-template-columns:1fr}}
.howto-item{
  border-radius: 22px;
  border:1px solid rgba(20,20,25,.10);
  background: rgba(255,255,255,.96);
  padding:18px;
  box-shadow: 0 14px 36px rgba(20,18,16,.07);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.howto-item:hover{transform: translateY(-2px)}
.howto-ico{
  width:46px; height:46px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(120% 120% at 15% 15%, rgba(255,208,194,.98), rgba(255,90,47,.18));
  border:1px solid rgba(20,20,25,.10);
  font-weight:900;
  color: var(--text);
  margin-bottom:10px;
}
.howto-title{font-weight:900; margin-bottom:6px; font-size:16px}
.howto-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

/* Grid */
.grid{
  margin:18px 0 34px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
@media (max-width: 980px){.grid{grid-template-columns: repeat(2, 1fr)}}
@media (max-width: 640px){.grid{grid-template-columns: 1fr}}

.book{
  overflow:hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.book a{display:block}
.book img{border-bottom-left-radius: 0; border-bottom-right-radius: 0}
.book .content{padding:14px 14px 16px}
.book:hover{box-shadow: 0 22px 64px rgba(20, 18, 16, .12)}

.meta{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:10px}
.pill{
  display:inline-flex; align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(20,20,25,.10);
  background: rgba(255,255,255,.94);
  color:var(--muted);
  font-weight:900;
  font-size:13px;
}
.pill.ok{border-color: rgba(20,170,100,.20); color:#0f6a45}
.pill.pre{border-color: rgba(255,140,60,.25); color:#8a3a19}
.pill.no{border-color: rgba(255,80,80,.22); color:#8d1f1f}
.price{font-weight:900; color: var(--text)}

.section-actions{display:flex; gap:10px; flex-wrap:wrap}

/* Prose */
.prose p{margin:0 0 10px; color:var(--muted)}
.prose h2{margin:18px 0 8px}
.prose a{color: var(--brand); text-decoration: underline; text-underline-offset: 4px}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .85s cubic-bezier(.2,.8,.2,1), transform .85s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{opacity:1; transform: translateY(0)}

/* Sparkles (Клик) */
.lit451-spark{
  position:fixed;
  left:0; top:0;
  transform: translate(-50%,-50%);
  pointer-events:none;
  z-index:9999;
  font-weight:900;
  color: rgba(255,90,47,.92);
  text-shadow: 0 6px 20px rgba(255,90,47,.22);
  animation: sparkPop .85s ease forwards;
  user-select:none;
}
@keyframes sparkPop{
  0%{opacity:0; transform: translate(-50%,-50%) scale(.6) rotate(-10deg)}
  15%{opacity:1}
  60%{opacity:.95; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 26px)) scale(1.05) rotate(8deg)}
  100%{opacity:0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 54px)) scale(.8) rotate(18deg)}
}

/* Embers (Искры/Угольки от JS) - Вернул их, чтобы скрипт работал корректно! */
.ember {
  position: fixed;
  bottom: -10px;
  width: 4px; height: 4px;
  background: #ff5a2f;
  border-radius: 50%;
  pointer-events: none;
  z-index: 999;
  box-shadow: 0 0 10px #ff5a2f, 0 0 20px #ff8a60;
  opacity: 0;
  animation: floatUp linear forwards;
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.8; }
  80% { opacity: 0.5; }
  100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}

/* Мобильная док-панель */
.mobile-dock{
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:70;

  display:flex;
  gap:10px;
  align-items:center;

  padding:10px;
  border-radius: 22px;

  background: rgba(255,255,255,.92);
  border:1px solid rgba(20,20,25,.10);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 70px rgba(20,18,16,.16);

  opacity:0;
  transform: translateY(14px);
  pointer-events:none;
  transition: opacity .28s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1);
}
.mobile-dock.is-visible{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.mobile-dock .dock-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  border:1px solid rgba(20,20,25,.10);
  box-shadow: 0 10px 22px rgba(20,18,16,.06);
}
.mobile-dock .dock-btn.secondary{
  background: rgba(255,255,255,.96);
  color: var(--text) !important;
  border:1px solid rgba(20,20,25,.12);
}
.mobile-dock .dock-btn.primary{
  background: linear-gradient(180deg, #ff7a55, var(--brand));
  color:#fff !important;
  border:1px solid rgba(255,90,47,.20);
}
.mobile-dock .dock-close{
  width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(20,20,25,.10);
  background: rgba(255,255,255,.96);
  color: var(--text);
  font-weight:900;
  cursor:pointer;
}

/* Mobile polish */
@media (max-width: 920px){
  .container{padding:18px 0}
  .nav{padding:12px 0}
  .brand-text{font-size:14px}
  .nav-toggle{display:flex; margin-left:auto}

  /* меню (как у тебя было “нормально”) */
  .menu{
    width:100%;
    margin-left:0;
    order:3;
    flex-direction:column;
    align-items:stretch;
    gap:12px;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform: translateY(-6px);
    transition: max-height .34s cubic-bezier(.2,.8,.2,1), opacity .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
  }
  body.menu-open .menu{
    max-height:60vh;
    opacity:1;
    transform: translateY(0);
    padding-top:12px;
  }

  .menu-links{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    border-radius:18px;
    background: rgba(255,255,255,.94);
    border:1px solid rgba(20,20,25,.08);
    box-shadow: 0 16px 42px rgba(20,18,16,.08);
  }
  .menu a::after{display:none}
  .menu a{padding:8px 6px; color:var(--text)}

  .hero .card{padding:18px}
  .h1{font-size:34px}
  .lead{font-size:15px}

  .mobile-dock{display:flex}
}
@media (min-width: 921px){
  .mobile-dock{display:none}
}

/* ✅ Страница книги: “красиво справа”, без пустоты */
.book-two{
  display:grid;
  grid-template-columns: minmax(260px, 420px) 1fr;
  gap:22px;
  align-items:start;
}
.book-cover{
  justify-self:center;
  width:100%;
  max-width:420px;
}
.book-cover img{
  width:100%;
  border-radius:22px;
  box-shadow: 0 18px 52px rgba(20,18,16,.14);
}
.book-right{min-width:0}
.book-desc.prose a{ text-decoration:none; border-bottom:1px solid rgba(255,90,47,.35); }
.book-desc.prose a:hover{ border-bottom-color: rgba(255,90,47,.65); }

@media (max-width: 980px){
  .book-two{grid-template-columns:1fr}
  .book-cover{max-width:520px}
}

/* ✅ кнопки внутри .prose не должны подчеркиваться */
.prose a.btn,
.prose a.btn:visited,
.prose a.btn:hover,
.prose a.btn:focus{
  text-decoration:none !important;
  border-bottom:0 !important;
}


/* ✅ Футер: 3 колонки, красиво, hover */
.site-footer{ padding: 10px 0 36px; }

.footer-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}
.footer-card::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1px;
  border-radius:inherit;
  background: linear-gradient(135deg,
    rgba(255,90,47,.40),
    rgba(255,255,255,.90),
    rgba(255,138,96,.32)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.65;
}

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  gap:18px;
  padding:22px;
}
.footer-451{
  font-family: var(--fontHead);
  font-size: 54px;
  line-height: 1;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #ff7a55, var(--brand));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  margin-bottom: 8px;
}
.footer-brand-title{ font-weight: 900; margin-bottom: 6px; }
.footer-head{ font-weight:900; margin-bottom:10px; }

.footer-nav a{
  display:block;
  padding:8px 0;
  color: var(--muted);
  font-weight: 800;
  position:relative;
}
.footer-nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:4px;
  width:0;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width .22s cubic-bezier(.2,.8,.2,1);
  opacity:.65;
}
.footer-nav a:hover{ color: var(--text); }
.footer-nav a:hover::after{ width: 86%; }

.footer-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:14px 22px 18px;
  border-top: 1px solid rgba(20,20,25,.08);
  flex-wrap:wrap;
}
@media (max-width: 920px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-451{ font-size: 48px; }
}

/* ✅ Магия: анимация heroArt только 5 секунд по клику */
.hero-art{ cursor:pointer; }
.hero-art .float,
.hero-art .sparkles{ animation-play-state: paused !important; }

.hero-art.is-active .float{
  animation-name: floatY;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4.6s;
  animation-play-state: running !important;
}
.hero-art.is-active .float.slow{ animation-duration: 6.6s; }
.hero-art.is-active .float.slower{ animation-duration: 7.8s; }
.hero-art.is-active .float.fast{ animation-duration: 3.3s; }
.hero-art.is-active .float.medium{ animation-duration: 5.1s; }

@keyframes floatY{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-10px,0) }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  #bgLayer{transform:none}
  .reveal{opacity:1; transform:none; transition:none}
  .brand-badge::after{animation:none}
  .btn, .book, .card, .header, .mobile-dock,
  input[type="search"], input[type="text"], textarea{transition:none}
  .hero-art{cursor:default}
}

/* ===== Footer links вместо кнопок ===== */
.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color: var(--text);
  padding:6px 0;
  text-decoration:none !important;
}

.footer-link::after{
  content:"";
  height:2px;
  width:0;
  border-radius:999px;
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  transition: width .22s cubic-bezier(.2,.8,.2,1);
  opacity:.75;
  flex:1;
}

.footer-link:hover{
  color: var(--brand);
}
.footer-link:hover::after{
  width:100%;
}

/* ✅ single book layout: 60/40 */
.two{
  display:grid;
  grid-template-columns: 3fr 2fr; /* 60/40 */
  gap:22px;
  align-items:start;
}

.book-cover img{
  width:100%;
  height:auto;
  display:block;
  border-radius:22px;
}

/* чуть крупнее “фото-площадь” визуально */
.book-cover{
  max-width: 100%;
}

@media (max-width: 980px){
  .two{ grid-template-columns: 1fr; }
}

/* Каталог: делаем lead более “премиум” */
.card.prose .lead{ max-width: 72ch; line-height:1.65; }

/* страницы: воздух и колонка чтения */
section.page-card{ padding: 34px !important; }
.page-card .prose-inner{ max-width: 860px; margin: 0 auto; }

/* читабельность */
.page-card .prose p{ font-size:16px; line-height:1.75; }
.page-card .prose{ max-width: 74ch; }
@media (max-width: 920px){
  section.page-card{ padding: 22px !important; }
  .page-card .prose p{ font-size:15px; }
}

body{ letter-spacing: .12px; }
.prose p{ font-weight: 500; }
.lead{ letter-spacing: .10px; }