/* R2 Overlay — главная страница («Обсидиан и золото», те же цвета и шрифты, что в style.css).
   Анимации — landing.js (GSAP + ScrollTrigger + SplitText, плавная прокрутка — Lenis в smooth.js).
   Всё, что анимация прячет до появления, прячется только при html.js (pre.js): без скрипта страница целиком видна. */

body.home main{padding-top:0;overflow-x:clip}
.home .lx-hero,.home .lx-marquee{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ── первый экран ─────────────────────────────────────────── */
.lx-hero{position:relative;isolation:isolate;padding:92px 16px 40px;text-align:center}
.lx-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.lx-aurora{position:absolute;left:0;top:0;width:100%;height:78%;display:block;opacity:.9}
.lx-lines{position:absolute;inset:0;
  background-image:linear-gradient(#D9B56E0D 1px,transparent 1px),linear-gradient(90deg,#D9B56E0D 1px,transparent 1px);
  background-size:72px 72px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%)}
.lx-glow{position:absolute;left:50%;top:52%;width:1100px;height:620px;transform:translateX(-50%);
  background:radial-gradient(closest-side,#D9B56E24,#D9B56E0A 55%,transparent);filter:blur(10px)}
.lx-hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;z-index:-1;background:linear-gradient(transparent,var(--bg))}
.lx-hero-in{max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.lx-hero .eyebrow{padding:7px 14px 7px 12px;border:1px solid #D9B56E33;border-radius:99px;background:#15120EB3;backdrop-filter:blur(6px);margin-bottom:26px}
.lx-title{font:600 clamp(40px,6.4vw,78px)/1.04 var(--serif);letter-spacing:-.012em;margin:0 0 22px;text-wrap:balance;color:var(--text)}
.lx-title>span,.lx-title .lx-ch{background:linear-gradient(180deg,#FFF8EA 8%,#EFD9A8 52%,#B98C45 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.06em}
.lx-title .lx-ch{display:inline-block}
.lx-hero .lead{font-size:clamp(16px,1.5vw,19px);max-width:700px;margin:0 auto;color:#BDB2A1;text-wrap:pretty}
.lx-hero .cta{display:flex;flex-wrap:wrap;justify-content:center;margin:34px 0 22px;gap:14px}
.lx-hero .ticks{justify-content:center;gap:10px 22px}
.lx-hero .promo-hero{margin:0 0 18px}

/* окно программы: на прокрутке «ложится» из наклона (landing.js) */
.lx-stage{position:relative;max-width:1120px;margin:64px auto 0;perspective:1600px}
.lx-frame{position:relative;border-radius:18px;padding:1px;transform-origin:50% 0;will-change:transform;
  background:linear-gradient(160deg,#F4DC9E66,#3a3124 28%,#241f19 70%,#D9B56E55);
  box-shadow:0 50px 120px -20px #000,0 0 0 1px #000,0 0 90px -10px #D9B56E30}
.lx-frame img{border-radius:17px;width:100%}
.lx-frame:after{content:"";position:absolute;inset:1px;border-radius:17px;pointer-events:none;
  background:linear-gradient(180deg,#ffffff0d,transparent 18%)}
.lx-float{position:absolute;left:-5%;bottom:-9%;width:27%;border-radius:14px;padding:1px;will-change:transform;
  background:linear-gradient(160deg,#F4DC9E80,#3a3124 40%,#D9B56E40);box-shadow:0 30px 70px #000e,0 0 50px -6px #D9B56E40}
.lx-float img{border-radius:13px}

/* бегущая строка (LogoLoop / ScrollVelocity) */
.lx-marquee{position:relative;overflow:hidden;margin-top:96px;padding:18px 0;border-block:1px solid var(--line);
  background:linear-gradient(90deg,#0B0A09,#120F0C 50%,#0B0A09);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lx-track{display:flex;align-items:center;gap:28px;width:max-content;animation:lx-marq 60s linear infinite}
.lx-track span{font:500 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#A39886;white-space:nowrap}
.lx-track i{font-style:normal;color:var(--accent);font-size:11px;opacity:.8}
@keyframes lx-marq{to{transform:translateX(-50%)}}
html.anim-on .lx-track{animation:none}

/* цифры */
.home .figures{margin:56px 0 0;gap:0;border:1px solid var(--border);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#14110E,#0F0D0B)}
.home .figure{background:none;border:0;border-radius:0;padding:26px 28px;position:relative}
.home .figure+.figure:before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:linear-gradient(transparent,#3a3124,transparent)}
.home .figure .v{font:600 clamp(32px,3.4vw,46px)/1.1 var(--serif)}

/* разделы */
.home .section{margin-top:132px}
.home .section .head{margin-bottom:34px}
.home h2{font-size:clamp(28px,3.2vw,42px);line-height:1.12;letter-spacing:-.005em}
.home .head.compact h2{font-size:clamp(24px,2.4vw,32px)}
.home .kicker{display:inline-flex;align-items:center;gap:10px}
.home .kicker:before{content:"";width:18px;height:1px;background:var(--gold)}
.home .rule{display:none}
.home .sub,.home .section .head p{font-size:16.5px;color:#B5AA99}
.home .split{gap:64px}
.home .points li{padding:10px 12px;margin:0 -12px;border-radius:12px;transition:background .25s}
.home .points li:hover{background:#D9B56E0A}

/* картинки-окна: рамка с золотым краем, наклон за курсором (TiltedCard) */
.home .media{position:relative;border:0;padding:1px;border-radius:16px;background:linear-gradient(160deg,#F4DC9E55,#2f281f 35%,#1c1814 70%,#D9B56E33);
  box-shadow:0 40px 90px -20px #000,0 0 60px -20px #D9B56E30;transform-style:preserve-3d;will-change:transform}
.home .media img{border-radius:15px}
.home .media:after{content:"";position:absolute;inset:1px;border-radius:15px;pointer-events:none;opacity:var(--glare,0);transition:opacity .3s;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),#fff2d61f,transparent 55%)}

/* карточки со светом за курсором (SpotlightCard / MagicBento) */
.lx-spot{position:relative;isolation:isolate}
.lx-spot:before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:radial-gradient(240px circle at var(--mx,-999px) var(--my,-999px),rgba(244,214,150,calc(.75 * var(--near,0))),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lx-spot:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(380px circle at var(--mx,-999px) var(--my,-999px),rgba(217,181,110,calc(.10 * var(--near,0))),transparent 65%)}
.home .card.feat{padding:24px 22px;background:linear-gradient(180deg,#15120F,#100E0C)}
.home .feat:hover{transform:translateY(-3px);border-color:#4a3d28}
.home .feat .ic{background:linear-gradient(160deg,#D9B56E26,#D9B56E0A);border-color:#D9B56E40;box-shadow:inset 0 1px 0 #ffffff12}
.home .feat h3{font-size:16.5px}

/* Premium: золотая искра бежит по рамке (StarBorder) */
@property --lx-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.lx-starcard{border-color:transparent!important;
  background:radial-gradient(ellipse at top,#2a2116 0,#16130F 65%) padding-box,
    conic-gradient(from var(--lx-a),#8a6b34 0deg,#8a6b34 300deg,#FFE9B8 330deg,#F4DC9E 340deg,#8a6b34 360deg) border-box!important;
  animation:lx-spin 6s linear infinite}
@keyframes lx-spin{to{--lx-a:360deg}}
.home .plan{padding:30px}
.home .plans{gap:20px}
.home .price div{transition:border-color .2s,transform .2s}.home .price div:hover{border-color:#6b5631;transform:translateY(-2px)}

/* кнопки: блик по золоту и притяжение к курсору (Magnet — в landing.js) */
.home .btn{position:relative;overflow:hidden;border-radius:12px;transition:border-color .2s,background .2s,box-shadow .3s}
.home .btn.big{padding:15px 30px;font-size:16px}
.home .btn>span{position:relative;z-index:1}
.lx-star{box-shadow:0 10px 40px -8px #D9B56E70,inset 0 1px 0 #fff5}
.lx-star:after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,#fff8,transparent);animation:lx-sheen 4.5s ease-in-out infinite}
@keyframes lx-sheen{0%,62%{left:-60%}100%{left:130%}}
.lx-ghost{background:#15120EB3;backdrop-filter:blur(6px)}

/* шаги: линия прогресса рисуется на прокрутке */
.home .steps{position:relative}
.home .steps li{position:relative;z-index:1;background:linear-gradient(180deg,#15120F,#100E0C);padding:22px}
.lx-progress{position:absolute;left:0;right:0;top:38px;height:1px;background:#2B251D;z-index:0}
.lx-progress i{position:absolute;inset:0;background:var(--gold);transform-origin:0 50%;transform:scaleX(0)}
.home .steps li:before{box-shadow:0 0 0 6px var(--bg),0 0 24px #D9B56E55}

/* вопросы: раскрываются плавно (landing.js) */
.home .faq{transition:border-color .25s,background .25s}
.home .faq:hover{border-color:#3a3124}
.home .faq .lx-ans{overflow:hidden}

/* финальный призыв */
.lx-cta{position:relative;isolation:isolate;overflow:hidden;padding:84px 24px!important;margin-top:140px!important}
.lx-cta .lx-bg{z-index:-1}.lx-cta .lx-aurora{height:100%;top:auto;bottom:0;opacity:.75}
.lx-cta h2{font-size:clamp(30px,3.6vw,48px)!important}
.lx-cta .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* блик по надписи (ShinyText) */
.lx-shiny{background:linear-gradient(110deg,var(--accent) 35%,#FFF1CF 50%,var(--accent) 65%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:lx-shine 5s linear infinite}
@keyframes lx-shine{0%{background-position:150% 0}100%{background-position:-100% 0}}
/* слова заголовков после разбиения: золотые части остаются золотыми */
.premtxt .lx-w{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.home .faq{overflow:hidden}

/* видео-презентация (кнопка «Как это выглядит» ведёт сюда и включает его) */
.lx-video .head{margin:0 auto 30px;text-align:center}
.lx-player{max-width:1120px;margin:0 auto;border-radius:18px;padding:1px;
  background:linear-gradient(160deg,#F4DC9E66,#3a3124 28%,#241f19 70%,#D9B56E55);box-shadow:0 50px 120px -20px #000,0 0 90px -10px #D9B56E30}
.lx-player video{display:block;width:100%;height:auto;border-radius:17px;background:#000;aspect-ratio:16/9}

/* ── начальные состояния анимаций (только при html.js, пока анимации не отключены) ── */
html.js:not(.anim-off) .lx-up,html.js:not(.anim-off) .lx-title{opacity:0}
html.js:not(.anim-off) .lx-stage{opacity:0}
html.anim-off .lx-up,html.anim-off .lx-title,html.anim-off .lx-stage{opacity:1}

@media (max-width:960px){
  .lx-hero{padding-top:64px}
  .lx-float{left:auto;right:-2%;bottom:-12%;width:34%}
  .home .figure:nth-child(3):before{display:none}
  .home .figure:nth-child(n+3){border-top:1px solid var(--line)}
  .home .section{margin-top:96px}
  .lx-progress{display:none}
}
@media (max-width:640px){
  .lx-hero{padding:48px 16px 24px}
  .lx-title{font-size:36px}
  .lx-hero .cta{flex-direction:column;align-items:stretch;width:100%}
  .lx-hero .cta .btn{justify-content:center}
  .lx-stage{margin-top:40px}
  .lx-marquee{margin-top:64px}
  .home .figure{padding:20px 18px}
  .home .split{gap:32px}
  .lx-cta{padding:56px 18px!important}
}
@media (prefers-reduced-motion:reduce){
  .lx-track,.lx-star:after,.lx-starcard,.lx-shiny{animation:none}
}

/* «Всё о вашем фарме»: 9 карточек — сетка 3×3; вопросы — заголовок слева, список справа */
.home #features .grid.feats{grid-template-columns:repeat(3,1fr)}
.home #faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:48px;align-items:start}
.home #faq .head{position:sticky;top:110px}
.home #faq .faqs{max-width:none}
@media (max-width:960px){.home #features .grid.feats{grid-template-columns:repeat(2,1fr)}.home #faq{grid-template-columns:1fr;gap:0}.home #faq .head{position:static}}
@media (max-width:640px){.home #features .grid.feats{grid-template-columns:1fr}}