/* ============================================================
   Novella's Creator — лендинг · «полночный нуар-будуар»
   VN-вход (Рина) → нуар-сайт, где Рина сопровождает
   ============================================================ */

:root{
  --bg:        oklch(0.150 0.018 40);
  --bg-deep:   oklch(0.118 0.016 34);
  --surface:   oklch(0.205 0.022 38);
  --surface-2: oklch(0.255 0.026 40);
  --line:      oklch(0.42 0.02 45 / 0.30);
  --line-soft: oklch(0.42 0.02 45 / 0.15);

  --text:      oklch(0.950 0.012 70);
  --text-dim:  oklch(0.795 0.018 58);   /* поднят контраст (критик: body-текст тусклый) */
  --text-mute: oklch(0.62 0.02 50);

  --amber:      oklch(0.815 0.125 72);
  --amber-deep: oklch(0.665 0.155 56);
  --ember:      oklch(0.640 0.190 42);
  --wine:       oklch(0.520 0.170 18);
  --wine-bright:oklch(0.605 0.195 17);

  --c-crystal:  oklch(0.840 0.120 338);
  --c-energy:   oklch(0.840 0.128 88);
  --c-spark:    oklch(0.690 0.185 44);

  /* редкости — приглушены под нуар (критик: были кислотные) */
  --rar-c: oklch(0.66 0.012 250);
  --rar-r: oklch(0.70 0.075 240);
  --rar-e: oklch(0.64 0.105 340);
  --rar-l: oklch(0.815 0.130 85);

  --good: oklch(0.80 0.13 150);

  /* светлый VN-вход */
  --vn-cream:  #f7efe3;
  --vn-cream2: #ead9c2;
  --vn-ink:    #38291f;
  --vn-ink-dim:#6b5847;

  --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-1: 0 1px 2px oklch(0 0 0/.5), 0 6px 18px oklch(0 0 0/.34);
  --sh-2: 0 10px 30px oklch(0 0 0/.46), 0 30px 70px oklch(0 0 0/.5);
  --glow-amber: 0 10px 36px oklch(0.66 0.16 58/.42);

  --font-display:'Prata', Georgia, serif;
  --font:'Golos Text', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.16,1,.3,1);

  --maxw: 1160px;
  --pad: clamp(20px, 5vw, 56px);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html,body{margin:0}
body{
  font-family:var(--font);
  background:
    radial-gradient(120% 75% at 50% -10%, oklch(0.215 0.045 44), transparent 55%),
    radial-gradient(90% 60% at 85% 8%, oklch(0.20 0.05 18/.5), transparent 60%),
    var(--bg-deep);
  color:var(--text);
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.intro-lock{overflow:hidden; height:100vh}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
::selection{background:oklch(0.66 0.16 58/.4); color:#fff}

/* зерно + виньетка (только тёмный сайт; intro выше по z) */
.grain{position:fixed; inset:-50%; z-index:9990; pointer-events:none; opacity:.05; 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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}16%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-3%,4%)}66%{transform:translate(5%,2%)}83%{transform:translate(-2%,-3%)}}
.vignette{position:fixed; inset:0; z-index:9989; pointer-events:none; background:radial-gradient(130% 100% at 50% 38%, transparent 55%, oklch(0 0 0/.55) 100%)}

/* ════════════════════════════════════════════
   VN-ВХОД (Рина встречает на светлом)
   ════════════════════════════════════════════ */
.intro{position:fixed; inset:0; z-index:9995; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; opacity:1; transition:opacity .7s var(--ease)}
.intro.hide{opacity:0; pointer-events:none}
.intro__bg{position:absolute; inset:0; z-index:-2;
  background:radial-gradient(120% 95% at 66% 30%, #fdf8f0, var(--vn-cream) 44%, var(--vn-cream2) 100%)}
.intro__bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(46% 62% at 68% 50%, oklch(0.95 0.075 74/.7), transparent 60%); mix-blend-mode:soft-light}
.intro__dust{position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(2px 2px at 20% 30%, #fff7, transparent), radial-gradient(1.6px 1.6px at 65% 55%, #fff6, transparent), radial-gradient(1.4px 1.4px at 80% 22%, #fff5, transparent), radial-gradient(1.8px 1.8px at 38% 72%, #fff6, transparent);
  background-size:cover; animation:dust 9s var(--ease) infinite alternate}
@keyframes dust{to{transform:translateY(-14px)}}
.intro__char{position:absolute; right:clamp(0px, calc(50% - 470px), 8vw); bottom:0; height:min(97vh, 900px); width:auto; z-index:-1;
  filter:drop-shadow(-24px 20px 50px oklch(0.4 0.06 40/.4)); transform-origin:bottom center;
  animation:rinaIn 1.1s var(--ease) both; animation-delay:.15s}
@keyframes rinaIn{from{opacity:0; transform:translateY(28px) scale(.985)} to{opacity:1; transform:none}}
.intro__top{position:absolute; top:clamp(24px,4vh,40px); left:var(--pad); z-index:2}
.intro__brand{font-family:var(--font-display); font-size:clamp(22px,2.4vw,28px); color:var(--vn-ink); letter-spacing:.01em; opacity:0; animation:fadeIn .8s ease .5s both}
.intro__brand span{color:var(--wine)}
.intro__kicker{margin:7px 0 0; font-size:12.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--wine); opacity:0; animation:fadeIn .8s ease .68s both}
@keyframes fadeIn{to{opacity:1}}

.vn{position:relative; z-index:2; width:min(940px, 92vw); margin:0 auto clamp(20px,4vh,46px);
  background:linear-gradient(180deg, #fffefbf2, #f6ecddf2); backdrop-filter:blur(6px);
  border:1px solid #e6d6bd; border-radius:var(--r-lg); padding:26px clamp(24px,3.2vw,40px) 22px;
  box-shadow:0 22px 60px oklch(0.35 0.04 40/.3); color:var(--vn-ink);
  animation:vnIn .7s var(--ease) both; animation-delay:.45s}
@keyframes vnIn{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.vn__name{display:inline-block; font-family:var(--font-display); font-size:17px; color:#fff;
  background:linear-gradient(180deg, var(--wine-bright), var(--wine)); padding:6px 18px; border-radius:var(--r-pill);
  margin:-40px 0 14px; box-shadow:0 8px 20px oklch(0.5 0.15 18/.45)}
.vn__text{font-size:clamp(18px,2.1vw,23px); line-height:1.55; margin:0 0 20px; min-height:3.4em; font-weight:500}
.vn__caret{display:inline-block; width:2px; height:1.05em; background:var(--wine); margin-left:2px; vertical-align:-2px; animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.vn__text.done .vn__caret{display:none}
.vn__row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.vn__hint{font-size:13px; color:var(--vn-ink-dim); opacity:.7}
.vn__hint.gone{visibility:hidden}
.vn__choices{display:flex; gap:10px; margin-left:auto}
.vn__btn{font-weight:600; font-size:15px; border-radius:var(--r-pill); padding:13px 24px; border:1.5px solid #c8a283; color:var(--vn-ink); background:#fff8ee; transition:transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s}
.vn__btn:hover{transform:translateY(-2px); border-color:#a9714f; background:#fff}
.vn__btn--primary{color:oklch(0.18 0.02 40); border-color:transparent; background:linear-gradient(180deg, var(--amber), var(--amber-deep)); box-shadow:var(--glow-amber)}
.vn__btn--primary:hover{box-shadow:0 14px 40px oklch(0.66 0.16 58/.5)}

/* ════════════════════════════════════════════
   ТИПОГРАФИКА / ОБЩЕЕ
   ════════════════════════════════════════════ */
.eyebrow{font-size:13px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin:0 0 18px}
.h2{font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4.6vw,48px); line-height:1.08; letter-spacing:-.01em; margin:0}
.lead{font-size:clamp(16px,1.6vw,19px); color:var(--text-dim); line-height:1.62; margin:18px 0 0}
.section{position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(80px,12vh,132px) var(--pad)}
.section--band{position:relative}
.section--band::before{content:""; position:absolute; inset:0 calc(50% - 50vw); z-index:-1;
  background:linear-gradient(180deg, oklch(0.138 0.016 36/.6), oklch(0.124 0.016 34/.6));
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft)}
.section__head{max-width:640px; margin:0 0 clamp(36px,5vw,56px)}
.section__head--center{max-width:680px; margin-left:auto; margin-right:auto; text-align:center}
.section__sub{color:var(--text-dim); font-size:clamp(15px,1.5vw,17px); margin:16px 0 0; line-height:1.6}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:8px}
.dot--amber{background:var(--amber)} .dot--rose{background:var(--wine-bright)} .dot--gem{background:var(--c-crystal)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; line-height:1; border:1px solid transparent; border-radius:var(--r-pill); padding:13px 24px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s, color .3s}
.btn--sm{padding:9px 18px; font-size:14px}
.btn--lg{padding:16px 32px; font-size:16px}
.btn--primary{color:oklch(0.16 0.02 40); background:linear-gradient(180deg, var(--amber), var(--amber-deep)); box-shadow:var(--glow-amber)}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 14px 44px oklch(0.66 0.16 58/.55)}
.btn--ghost{color:var(--text); background:oklch(0.3 0.02 44/.18); border-color:var(--line)}
.btn--ghost:hover{transform:translateY(-2px); border-color:oklch(0.8 0.12 68/.5); background:oklch(0.3 0.02 44/.32)}

/* ════════════════════════════════════════════
   НАВИГАЦИЯ
   ════════════════════════════════════════════ */
.nav{position:fixed; top:0; left:0; right:0; z-index:200; display:flex; align-items:center; gap:24px; padding:16px var(--pad); transition:background .4s var(--ease), backdrop-filter .4s, border-color .4s, padding .4s var(--ease); border-bottom:1px solid transparent}
.nav.scrolled{background:oklch(0.135 0.016 36/.8); backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--line-soft); padding-top:11px; padding-bottom:11px}
.nav__brand{display:flex; align-items:center; gap:11px; margin-right:auto; font-weight:600}
.nav__mark{display:grid; place-items:center; width:36px; height:36px; border-radius:10px; flex:none; overflow:hidden; background:oklch(0.18 0.02 40); border:1px solid var(--line); box-shadow:0 4px 14px oklch(0 0 0/.4)}
.nav__mark img{width:100%; height:100%; object-fit:cover; display:block}
.nav__name{font-size:16px; letter-spacing:.01em} .nav__ap{color:var(--amber)}
.nav__links{display:flex; gap:30px}
.nav__links a{font-size:15px; color:var(--text-dim); position:relative; transition:color .25s}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--amber); transition:width .3s var(--ease)}
.nav__links a:hover{color:var(--text)} .nav__links a:hover::after{width:100%}
.nav__burger{display:none; flex-direction:column; gap:5px; width:42px; height:42px; align-items:center; justify-content:center; background:none; border:1px solid var(--line); border-radius:11px}
.nav__burger span{width:18px; height:1.8px; background:var(--text); transition:transform .3s var(--ease), opacity .3s}
.nav.open .nav__burger span:nth-child(1){transform:translateY(3.4px) rotate(45deg)}
.nav.open .nav__burger span:nth-child(2){transform:translateY(-3.4px) rotate(-45deg)}

/* ════════════════════════════════════════════
   HERO (Рина-спутник провожает в мир)
   ════════════════════════════════════════════ */
.hero{position:relative; min-height:92svh; display:flex; align-items:center; padding:120px var(--pad) 80px; overflow:hidden}
.hero__inner{position:relative; max-width:var(--maxw); margin:0 auto; width:100%; display:grid; grid-template-columns:1.18fr .82fr; gap:40px; align-items:center}
.hero__title{font-family:var(--font-display); font-weight:400; font-size:clamp(40px,7vw,76px); line-height:1.03; letter-spacing:-.015em; margin:0 0 22px}
.hero__title em{font-style:italic; color:var(--amber)}
.hero__sub{font-size:clamp(16px,1.7vw,20px); color:var(--text-dim); max-width:520px; margin:0 0 34px; line-height:1.6}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}
.hero__chips{display:flex; flex-wrap:wrap; gap:10px 14px}
.chip{display:inline-flex; align-items:center; font-size:13.5px; color:var(--text-dim); padding:8px 15px; border-radius:var(--r-pill); background:oklch(0.22 0.02 40/.45); border:1px solid var(--line-soft)}
.hero__guide{position:relative; align-self:end; display:flex; flex-direction:column; align-items:center; justify-self:center; padding-right:clamp(0px,2vw,28px)}
.hero__guide::before{content:""; position:absolute; left:50%; bottom:0; width:138%; height:98%; transform:translateX(-50%); z-index:-1;
  background:radial-gradient(48% 54% at 50% 54%, oklch(0.62 0.14 50/.44), transparent 70%); filter:blur(16px)}
.hero__rina{height:clamp(400px,58vh,610px); width:auto; filter:drop-shadow(0 26px 40px oklch(0 0 0/.55));
  -webkit-mask-image:linear-gradient(to bottom, #000 75%, transparent 99%); mask-image:linear-gradient(to bottom, #000 75%, transparent 99%);
  animation:floatCharM 6s var(--ease) infinite}
@keyframes floatCharM{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-12px)}}
.say{position:relative; font-size:14.5px; line-height:1.45; color:var(--text); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:16px; padding:12px 16px; box-shadow:var(--sh-1)}
.say::before{content:""; position:absolute; width:12px; height:12px; background:inherit; border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg)}
.say--hero{max-width:280px; margin-top:-14px; text-align:center}
.say--hero::before{top:-7px; left:50%; margin-left:-6px}

.hero__scroll{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); display:grid; place-items:center}
.hero__scroll-line{width:1.5px; height:46px; background:linear-gradient(var(--amber), transparent); position:relative; overflow:hidden}
.hero__scroll-line::after{content:""; position:absolute; inset:0; background:var(--bg-deep); animation:scrollDown 2.1s var(--ease) infinite}
@keyframes scrollDown{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ════════════════════════════════════════════
   ГАЙД-РИНА в секциях (сопровождает / дополняет)
   ════════════════════════════════════════════ */
.guide{display:flex; align-items:center; gap:16px; margin-top:36px}
.guide--center{justify-content:center; margin:42px auto 0; max-width:600px}
.guide__ava{flex:none; width:58px; height:58px; border-radius:50%; overflow:hidden; border:2px solid oklch(0.8 0.12 68/.55); box-shadow:0 6px 18px oklch(0 0 0/.4); background:var(--surface)}
.guide__ava img{width:100%; height:100%; object-fit:cover; object-position:50% 6%}
.guide__bubble{position:relative; font-size:15.5px; line-height:1.5; color:var(--text); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid var(--line); border-radius:16px; padding:14px 19px; box-shadow:var(--sh-1)}
.guide__bubble b{color:var(--amber); font-weight:600}
.guide__bubble::before{content:""; position:absolute; left:-6px; top:50%; margin-top:-6px; width:12px; height:12px; background:var(--surface-2); border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg)}

/* ════════════════════════════════════════════
   О ПРОДУКТЕ
   ════════════════════════════════════════════ */
.about__inner{max-width:740px}
.ticks{list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px}
.ticks li{position:relative; padding-left:34px; color:var(--text-dim); font-size:16px}
.ticks li::before{content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:oklch(0.8 0.12 68/.16); border:1px solid oklch(0.8 0.12 68/.4)}
.ticks li::after{content:""; position:absolute; left:7px; top:8px; width:8px; height:5px; border-left:1.6px solid var(--amber); border-bottom:1.6px solid var(--amber); transform:rotate(-45deg)}

/* ════════════════════════════════════════════
   ВОЗМОЖНОСТИ — БЕНТО (4 плитки, без колеса)
   ════════════════════════════════════════════ */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:18px}
.tile{position:relative; overflow:hidden; padding:26px; border-radius:var(--r-lg); background:linear-gradient(165deg, var(--surface), oklch(0.165 0.018 38)); border:1px solid var(--line-soft); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s; grid-column:span 3; min-height:230px; display:flex; flex-direction:column; justify-content:flex-end}
.tile::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(120% 80% at 80% -10%, oklch(0.8 0.12 68/.08), transparent 55%); opacity:0; transition:opacity .4s}
.tile:hover{transform:translateY(-5px); border-color:oklch(0.8 0.12 68/.34); box-shadow:var(--sh-2)}
.tile:hover::after{opacity:1}
.tile__title{font-family:var(--font-display); font-weight:400; font-size:22px; margin:0 0 8px; letter-spacing:-.01em}
.tile__desc{color:var(--text-dim); font-size:14.5px; line-height:1.55; margin:0}
.tile--lg{grid-column:span 3; grid-row:span 2; min-height:470px; justify-content:space-between}
.tile__top{position:relative; z-index:2}
.tile--lg .tile__title{font-size:28px}
.tile--wide{grid-column:span 6; min-height:auto; flex-direction:row; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap}
.tile--wide .vip__body{max-width:560px}

.ach-cluster{position:relative; display:flex; flex-wrap:wrap; gap:14px; align-content:center; justify-content:center; padding:10px 0 6px; flex:1}
.ach-medal{width:clamp(56px,8vw,76px); height:auto; border-radius:18px; flex:none; filter:saturate(.9) drop-shadow(0 8px 18px oklch(0 0 0/.5)); animation:floatY 4s var(--ease) infinite; animation-delay:calc(var(--i) * -.55s); transition:transform .3s var(--ease)}
.tile--ach:hover .ach-medal{transform:translateY(-3px)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.cards-stack{position:relative; height:96px; margin-bottom:18px}
.mini-card{position:absolute; top:0; left:50%; width:62px; height:88px; border-radius:11px; border:1px solid oklch(1 0 0/.1); box-shadow:0 8px 18px oklch(0 0 0/.45); transition:transform .45s var(--ease)}
.mc--c{background:linear-gradient(160deg, oklch(0.4 0.012 250), oklch(0.26 0.012 250)); transform:translateX(-50%) rotate(-15deg) translateX(-66px)}
.mc--r{background:linear-gradient(160deg, var(--rar-r), oklch(0.4 0.06 240)); transform:translateX(-50%) rotate(-6deg) translateX(-23px); z-index:2}
.mc--e{background:linear-gradient(160deg, var(--rar-e), oklch(0.38 0.1 340)); transform:translateX(-50%) rotate(6deg) translateX(23px); z-index:3}
.mc--l{background:linear-gradient(160deg, var(--rar-l), oklch(0.6 0.12 80)); transform:translateX(-50%) rotate(15deg) translateX(66px); box-shadow:0 8px 22px oklch(0.7 0.12 80/.38)}
.tile--cards:hover .mc--c{transform:translateX(-50%) rotate(-19deg) translateX(-78px) translateY(-4px)}
.tile--cards:hover .mc--l{transform:translateX(-50%) rotate(19deg) translateX(78px) translateY(-4px)}
.rar-legend{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.rar{font-size:11px; letter-spacing:.04em; padding:4px 10px; border-radius:var(--r-pill); border:1px solid currentColor; opacity:.8}
.rar--c{color:var(--rar-c)} .rar--r{color:var(--rar-r)} .rar--e{color:var(--rar-e)} .rar--l{color:var(--rar-l)}

.coins{display:flex; gap:14px; margin-bottom:20px}
.coin{display:grid; place-items:center; width:54px; height:54px; border-radius:16px; background:oklch(0.18 0.02 40/.6); border:1px solid var(--line); transition:transform .3s var(--ease)}
.coin svg{width:28px; height:28px}
.coin--crystal svg{fill:var(--c-crystal); filter:drop-shadow(0 0 6px oklch(0.8 0.12 332/.4))}
.coin--energy svg{fill:var(--c-energy); filter:drop-shadow(0 0 6px oklch(0.84 0.12 88/.4))}
.coin--spark svg{fill:var(--c-spark); filter:drop-shadow(0 0 6px oklch(0.69 0.18 44/.4))}
.tile--econ:hover .coin{transform:translateY(-4px)}
.tile--econ:hover .coin--energy{transition-delay:.05s} .tile--econ:hover .coin--spark{transition-delay:.1s}

.ranks{display:grid; gap:9px; min-width:240px; flex:1; max-width:360px}
.rank-bar{height:9px; border-radius:var(--r-pill); background:oklch(0.16 0.02 40/.7); overflow:hidden}
.rank-bar i{display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--amber-deep), var(--amber)); transform-origin:left}
.tile--vip:hover .rank-bar i{box-shadow:0 0 12px oklch(0.7 0.14 60/.5)}

/* ════════════════════════════════════════════
   ЦЕНЫ
   ════════════════════════════════════════════ */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{position:relative; display:flex; flex-direction:column; padding:34px 28px; border-radius:var(--r-xl); background:linear-gradient(180deg, var(--surface), oklch(0.165 0.018 38)); border:1px solid var(--line); transition:transform .4s var(--ease), border-color .4s, box-shadow .4s}
.plan:hover{transform:translateY(-6px); border-color:oklch(0.8 0.12 68/.3); box-shadow:var(--sh-2)}
.plan--featured{border-color:oklch(0.8 0.12 68/.55); background:linear-gradient(180deg, oklch(0.245 0.032 44), oklch(0.18 0.02 40)); box-shadow:0 18px 54px oklch(0.55 0.14 50/.26); transform:translateY(-10px)}
.plan--featured:hover{transform:translateY(-16px)}
.plan--featured::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; background:linear-gradient(180deg, oklch(0.85 0.12 70/.8), transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.plan__flag{position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:oklch(0.16 0.02 40); padding:6px 16px; border-radius:var(--r-pill); background:linear-gradient(180deg, var(--amber), var(--amber-deep)); box-shadow:var(--glow-amber); white-space:nowrap}
.plan__flag--best{background:oklch(0.225 0.03 44); color:var(--amber); border:1px solid oklch(0.8 0.12 68/.55); box-shadow:none}
.plan__name{font-family:var(--font-display); font-weight:400; font-size:23px; margin:6px 0 16px}
.plan__price{display:flex; align-items:baseline; gap:4px; margin:0}
.plan__num{font-family:var(--font-display); font-size:56px; line-height:1; color:var(--text)}
.plan__cur{font-size:24px; color:var(--text-dim)}
.plan__per{color:var(--text-mute); font-size:14px; margin:10px 0 6px}
.plan__save{display:inline-block; font-size:12px; font-weight:600; color:var(--good); background:oklch(0.8 0.13 150/.12); border:1px solid oklch(0.8 0.13 150/.3); padding:3px 10px; border-radius:var(--r-pill); margin:0 0 16px}
.plan__list{list-style:none; padding:0; margin:8px 0 28px; display:grid; gap:12px; flex:1}
.plan__list li{position:relative; padding-left:28px; font-size:14.5px; color:var(--text-dim)}
.plan__list li::before{content:""; position:absolute; left:0; top:5px; width:16px; height:16px; border-radius:50%; background:oklch(0.8 0.12 68/.16)}
.plan__list li::after{content:""; position:absolute; left:5px; top:9px; width:6px; height:4px; border-left:1.5px solid var(--amber); border-bottom:1.5px solid var(--amber); transform:rotate(-45deg)}
.plan__btn{width:100%}
.assure{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:32px 0 0; color:var(--text-dim); font-size:14px}
.assure span{display:inline-flex; align-items:center; gap:8px}
.assure svg{color:var(--good); flex:none}
.pay-note{display:flex; align-items:center; justify-content:center; gap:9px; margin:14px 0 0; color:var(--text-mute); font-size:13.5px}
.pay-note svg{color:var(--amber); flex:none}

/* ════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════ */
.faq{max-width:840px}
.acc{display:grid; gap:12px}
.acc__item{border:1px solid var(--line-soft); border-radius:var(--r); background:oklch(0.2 0.02 40/.6); overflow:hidden; transition:border-color .3s, background .3s}
.acc__item:hover,.acc__item.open{border-color:var(--line)}
.acc__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; padding:20px 22px; background:none; border:none; color:var(--text); font-size:17px; font-weight:500}
.acc__ic{position:relative; width:16px; height:16px; flex:none}
.acc__ic::before,.acc__ic::after{content:""; position:absolute; background:var(--amber); border-radius:2px; transition:transform .3s var(--ease)}
.acc__ic::before{top:7px; left:0; width:16px; height:2px}
.acc__ic::after{top:0; left:7px; width:2px; height:16px}
.acc__item.open .acc__ic::after{transform:scaleY(0)}
.acc__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.acc__item.open .acc__a{grid-template-rows:1fr}
.acc__a>p{overflow:hidden; margin:0; padding:0 22px; color:var(--text-dim); font-size:15px; line-height:1.6; transition:padding .4s var(--ease)}
.acc__item.open .acc__a>p{padding:0 22px 22px}

/* ════════════════════════════════════════════
   ФИНАЛЬНЫЙ CTA
   ════════════════════════════════════════════ */
.cta-band{text-align:center}
.cta-band__inner{position:relative; max-width:780px; margin:0 auto; padding:clamp(54px,8vw,88px) var(--pad); border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(100% 130% at 50% 0%, oklch(0.29 0.07 48/.85), transparent 62%), linear-gradient(180deg, var(--surface), oklch(0.16 0.018 38)); border:1px solid oklch(0.8 0.12 68/.3)}
.cta-band__inner::after{content:""; position:absolute; left:50%; bottom:-30%; width:80%; height:60%; transform:translateX(-50%); background:radial-gradient(50% 50% at 50% 50%, oklch(0.66 0.16 58/.3), transparent 70%); filter:blur(10px); pointer-events:none}
.cta-band__inner .h2{margin-bottom:14px; font-size:clamp(30px,5vw,52px)}
.cta-band__inner .section__sub{margin:0 auto 30px; max-width:460px}
.cta-band__inner .btn{position:relative; z-index:2}

/* ════════════════════════════════════════════
   ФУТЕР
   ════════════════════════════════════════════ */
.footer{border-top:1px solid var(--line-soft); margin-top:40px; padding:clamp(48px,7vw,72px) var(--pad) 30px; max-width:var(--maxw); margin-inline:auto}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:36px}
.footer__brand .nav__mark{margin-bottom:14px}
.footer__name{font-family:var(--font-display); font-size:20px; margin:0 0 8px}
.footer__tag{color:var(--text-mute); font-size:14px; max-width:280px; line-height:1.55; margin:0}
.footer__h{font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-mute); margin:0 0 16px}
.footer__col{display:flex; flex-direction:column; gap:11px}
.footer__col a{color:var(--text-dim); font-size:14.5px; transition:color .25s}
.footer__col a:hover{color:var(--amber)}
.footer__legal{margin-top:34px; padding-top:24px; border-top:1px solid var(--line-soft); display:grid; gap:6px; max-width:840px}
.footer__legal p{margin:0; font-size:12px; line-height:1.55; color:var(--text-mute)}
.footer__org{color:var(--text-dim); font-weight:600; font-size:12.5px; letter-spacing:.01em}

/* ════════════════════════════════════════════
   МОДАЛКА
   ════════════════════════════════════════════ */
.modal{position:fixed; inset:0; z-index:9998; display:grid; place-items:center; padding:24px}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:oklch(0.08 0.01 34/.7); backdrop-filter:blur(6px); animation:fade .3s ease}
.modal__card{position:relative; width:100%; max-width:420px; text-align:center; padding:38px 32px 32px; border-radius:var(--r-xl); background:linear-gradient(180deg, var(--surface-2), var(--surface)); border:1px solid oklch(0.8 0.12 68/.28); box-shadow:var(--sh-2); animation:pop .42s var(--ease)}
.modal__ico{width:60px; height:60px; margin:0 auto 18px; display:grid; place-items:center; border-radius:18px; color:var(--amber); background:oklch(0.8 0.12 68/.14); border:1px solid oklch(0.8 0.12 68/.35)}
.modal__ico svg{width:30px; height:30px}
.modal__plan{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--amber); margin:0 0 8px; font-weight:600; min-height:16px}
.modal__title{font-family:var(--font-display); font-weight:400; font-size:26px; margin:0 0 12px}
.modal__text{color:var(--text-dim); font-size:15.5px; line-height:1.6; margin:0 0 26px}
.modal__ok{width:100%}
@keyframes fade{from{opacity:0}} @keyframes pop{from{opacity:0; transform:translateY(16px) scale(.96)}}

/* ════════════════════════════════════════════
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ (оферта / политика)
   ════════════════════════════════════════════ */
.legal{max-width:840px; margin:0 auto; padding:clamp(40px,6vh,72px) var(--pad) 90px}
.legal__top{display:flex; align-items:center; gap:12px; margin-bottom:clamp(32px,5vw,52px)}
.legal__top .nav__mark{width:40px; height:40px}
.legal__brand{font-family:var(--font-display); font-size:18px}
.legal__brand span{color:var(--amber)}
.legal__back{margin-left:auto; font-size:14px; color:var(--text-dim); display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border:1px solid var(--line); border-radius:var(--r-pill); transition:color .25s, border-color .25s, transform .25s var(--ease)}
.legal__back:hover{color:var(--amber); border-color:oklch(0.8 0.12 68/.5); transform:translateY(-1px)}
.legal h1{font-family:var(--font-display); font-weight:400; font-size:clamp(26px,4.4vw,42px); line-height:1.14; letter-spacing:-.01em; margin:0 0 16px}
.legal__meta{color:var(--text-mute); font-size:13.5px; margin:0 0 6px}
.legal__intro{color:var(--text); font-size:16.5px; line-height:1.7; margin:22px 0 8px}
.legal h2{font-family:var(--font-display); font-weight:400; font-size:clamp(20px,2.6vw,27px); margin:46px 0 16px; padding-top:8px; line-height:1.2}
.legal h3{font-size:17px; font-weight:600; color:var(--text); margin:28px 0 10px}
.legal p{color:var(--text-dim); font-size:15.5px; line-height:1.72; margin:0 0 14px}
.legal ul{margin:0 0 16px; padding-left:4px; list-style:none; display:grid; gap:9px}
.legal li{position:relative; padding-left:24px; color:var(--text-dim); font-size:15.5px; line-height:1.66}
.legal li::before{content:""; position:absolute; left:4px; top:10px; width:6px; height:6px; border-radius:50%; background:oklch(0.8 0.12 68/.7)}
.legal a{color:var(--amber); word-break:break-word}
.legal__req{margin-top:10px; padding:20px 22px; border:1px solid var(--line-soft); border-radius:var(--r); background:oklch(0.19 0.02 40/.5); display:grid; gap:5px}
.legal__req p{margin:0; font-size:14px; line-height:1.5}
.legal__req b{color:var(--text-dim); font-weight:600}
.legal__divider{height:1px; background:var(--line-soft); border:none; margin:40px 0}

/* ════════════════════════════════════════════
   REVEAL
   ════════════════════════════════════════════ */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-2), transform .8s var(--ease-2); transition-delay:var(--d,0ms)}
.reveal.in{opacity:1; transform:none}

/* ════════════════════════════════════════════
   АДАПТИВ
   ════════════════════════════════════════════ */
@media (max-width:980px){
  .hero__inner{grid-template-columns:1fr; gap:24px}
  .hero__guide{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .tile,.tile--lg{grid-column:span 1; grid-row:auto; min-height:220px}
  .tile--lg{min-height:360px} .tile--ach{grid-column:span 2}
  .tile--wide{grid-column:span 2; flex-direction:column; align-items:flex-start}
  .ranks{max-width:none; width:100%}
}
@media (max-width:760px){
  .nav__links{position:fixed; top:0; right:0; bottom:0; width:min(78vw,320px); flex-direction:column; justify-content:center; gap:30px; padding:0 40px; background:oklch(0.135 0.016 36/.97); backdrop-filter:blur(16px); transform:translateX(100%); transition:transform .42s var(--ease); border-left:1px solid var(--line)}
  .nav.open .nav__links{transform:none}
  .nav__links a{font-size:22px; font-family:var(--font-display); color:var(--text)}
  .nav__cta{display:none} .nav__burger{display:flex; z-index:2}
  .plans{grid-template-columns:1fr; max-width:420px; margin-inline:auto}
  .plan--featured{order:-1; transform:none} .plan--featured:hover{transform:translateY(-6px)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:28px}
  .footer__brand{grid-column:1/-1}
  .intro__char{right:50%; height:min(56vh,440px); animation:rinaInM 1.1s var(--ease) both}
  @keyframes rinaInM{from{opacity:0; transform:translateX(50%) translateY(24px)} to{opacity:1; transform:translateX(50%)}}
  .vn__text{min-height:5.4em}
  .vn__row{flex-direction:column; align-items:stretch}
  .vn__choices{margin-left:0} .vn__btn{flex:1}
  .vn__hint{order:2; text-align:center}
}
@media (max-width:480px){
  .bento{grid-template-columns:1fr} .tile--ach,.tile--wide{grid-column:span 1}
  .footer__grid{grid-template-columns:1fr}
}

/* ════════════════════════════════════════════
   REDUCED MOTION
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
  .grain,.intro__dust{display:none}
  .hero__rina{transform:scaleX(-1)}
}