/* ============================================================ ASTRA DESIGN SYSTEM v2 — единый бренд, территории по продуктам Источник эталона: Year golden landing (/prognoz-v2/, 08.2026) Территория задаётся ============================================================ */ /* ---- Playfair Display (реальные woff2; /land-assets/playfair.css не существует) ---- */ @font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap; src:url(/land-assets/fonts/pf-normal-600-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Playfair Display";font-style:normal;font-weight:600;font-display:swap; src:url(/land-assets/fonts/pf-normal-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2019,U+201C-201E,U+20BD} @font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap; src:url(/land-assets/fonts/pf-normal-400-cyrillic.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap; src:url(/land-assets/fonts/pf-normal-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2019,U+201C-201E,U+20BD} /* ---- базовые токены (дефолт = forecast/Year территория) ---- */ :root{ --bg:#07111F; --bg-2:#0B1727; --card:#101E31; --card-2:#14263C; --ink:#F4F1EA; --dim:#B6C0D0; --faint:#8895A8; --gold:#D5A85A; --gold-br:#E8C475; --accent:#5B7CFA; --ice:#8EC5FF; --warn:#C97B6B; --cta-1:#E8C475; --cta-2:#D5A85A; --cta-ink:#241905; --line:rgba(213,168,90,.22); --line-2:rgba(182,192,208,.14); --shadow:0 16px 48px rgba(0,0,0,.45); } /* ---- территории (тёмная тема; светлая наследует нейтральную бумагу + тёмный акцент) ---- */ /* ---- светлые тонировки бумаги по территориям (не «один белый на всех») ---- */ /* локальные акценты продуктов (только для виз-объектов, 5–10% композиции) */ [data-territory="home"]{--accent:#8EC5FF} [data-territory="compat"]{--accent:#C97993} [data-territory="natal"]{--accent:#9A90E8} [data-territory="purpose"]{--accent:#7FB89D} [data-territory="matrix"]{--accent:#9B7BF7} [data-territory="bazi"]{--accent:#6FA98C} [data-territory="vedic"]{--accent:#8E96D8} [data-territory="express"]{--accent:#7B95FB} [data-territory="plus"]{--accent:#6FB0F7} /* ---- reset / base ---- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} } img{max-width:100%;height:auto} .grid>*,.shelf>*,.edit-grid>*,.revs>*,.qs>*,.plans>*{min-width:0} body{background:var(--bg);color:var(--ink); font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased} h1,h2,h3,.serif{font-family:"Playfair Display",Georgia,serif;font-weight:600;line-height:1.2} h1{font-size:clamp(30px,7.4vw,58px);letter-spacing:.2px} h2{font-size:clamp(24px,5.4vw,40px);margin-bottom:12px} h3{font-size:clamp(18px,4.4vw,22px)} p{color:var(--dim)} a{color:inherit} .wrap{max-width:1220px;margin:0 auto;padding:0 24px} .sec{padding:56px 0} @media(min-width:768px){.sec{padding:88px 0}} .sec-alt{background:var(--bg-2);position:relative} .sec-alt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27520%27 height=%27380%27%3E%3Cg fill=%27none%27 stroke=%27%23808caa%27 stroke-opacity=%27.14%27%3E%3Cpath d=%27M40 60l70-22 48 40 76-14M420 70l44 36-24 52M120 300l52-30 64 18%27/%3E%3C/g%3E%3Cg fill=%27%23808caa%27 fill-opacity=%27.22%27%3E%3Ccircle cx=%2740%27 cy=%2760%27 r=%272%27/%3E%3Ccircle cx=%27110%27 cy=%2738%27 r=%271.6%27/%3E%3Ccircle cx=%27158%27 cy=%2778%27 r=%272.2%27/%3E%3Ccircle cx=%27234%27 cy=%2764%27 r=%271.6%27/%3E%3Ccircle cx=%27420%27 cy=%2770%27 r=%272%27/%3E%3Ccircle cx=%27464%27 cy=%27106%27 r=%271.6%27/%3E%3Ccircle cx=%27440%27 cy=%27158%27 r=%272%27/%3E%3Ccircle cx=%27120%27 cy=%27300%27 r=%272%27/%3E%3Ccircle cx=%27172%27 cy=%27270%27 r=%271.6%27/%3E%3Ccircle cx=%27236%27 cy=%27288%27 r=%272.2%27/%3E%3C/g%3E%3C/svg%3E");} .sec-alt>.wrap{position:relative} /* печатающийся текст (Express) */ @keyframes typeIn{from{width:0}to{width:100%}} .type-in{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom; animation:typeIn 2.2s steps(34) .4s both} .type-caret{border-right:2px solid var(--accent);animation:glowPulse 1s steps(2) infinite} @keyframes glowPulse2{0%,100%{opacity:.55}50%{opacity:1}} .eyebrow{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);border:1px solid var(--line);border-radius:100px;padding:6px 14px;margin-bottom:20px;white-space:nowrap} @media(max-width:379px){.eyebrow{font-size:10px;letter-spacing:.1em}} .center{text-align:center} .lead{font-size:clamp(16px,4vw,20px);max-width:720px} .center .lead{margin-inline:auto} .note{font-size:13px;color:var(--faint)} .gold{color:var(--gold)} .accent{color:var(--accent)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px; padding:16px 28px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer; border:1px solid transparent;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;min-height:52px} .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .btn-gold{background:linear-gradient(180deg,var(--cta-1),var(--cta-2));color:var(--cta-ink); box-shadow:0 8px 28px color-mix(in srgb,var(--cta-2) 30%,transparent)} .btn-gold:hover{transform:translateY(-1px);box-shadow:0 12px 32px color-mix(in srgb,var(--cta-2) 38%,transparent)} .btn-ghost{border-color:var(--line-2);color:var(--ink);background:transparent} .btn-ghost:hover{border-color:var(--line);background:color-mix(in srgb,var(--gold) 6%,transparent)} /* ---- header ---- */ header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--line-2)} .hrow{display:flex;align-items:center;justify-content:space-between;padding-block:14px} .logo{font-family:"Playfair Display",serif;font-weight:600;letter-spacing:.34em;font-size:17px;text-decoration:none} .logo span{color:var(--gold)} .hnav{display:flex;align-items:center;gap:10px} .hnav a{font-size:13px;color:var(--dim);text-decoration:none} .hnav a:hover{color:var(--ink)} /* ---- hero ---- */ .hero{padding:64px 0 48px;position:relative;overflow:hidden} @media(min-width:768px){.hero{padding:96px 0 72px}} .hero-glow{position:absolute;inset:auto -20% -60% -20%;height:70%;pointer-events:none; background:radial-gradient(ellipse at 50% 100%, color-mix(in srgb,var(--accent) 14%,transparent), transparent 62%)} .hero h1{max-width:760px;margin:0 auto 18px} .hero .lead{margin-bottom:12px} .hero-price{font-size:15px;color:var(--dim);margin-bottom:26px} .hero-price b{color:var(--ink);font-size:17px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:14px} .hero-hint{font-size:13px;color:var(--faint)} /* ---- viz card (таймлайн/календарь/компас/граф — контейнер главного визуала) ---- */ .viz-card{margin-top:44px;background:var(--card);border:1px solid var(--line-2);border-radius:20px; padding:22px 18px 16px;box-shadow:var(--shadow);position:relative} @media(min-width:768px){.viz-card{padding:30px 30px 22px}} .viz-tag{position:absolute;top:-11px;left:18px;background:var(--bg-2);border:1px solid var(--line); color:var(--gold);border-radius:100px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px} .viz-title{font-size:14px;color:var(--dim);margin-bottom:18px} .viz-title b{color:var(--ink)} .viz-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:12px;color:var(--dim)} .viz-legend span{display:inline-flex;align-items:center;gap:6px} .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto} .d-gold{background:var(--gold)} .d-accent{background:var(--accent)} .d-warn{background:var(--warn)} /* сетка месяцев (Year) и производные */ .tl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} @media(min-width:560px){.tl-grid{grid-template-columns:repeat(6,1fr)}} @media(min-width:900px){.tl-grid{grid-template-columns:repeat(12,1fr)}} .tl-m{border:1px solid var(--line-2);border-radius:12px;padding:10px 4px 8px;text-align:center; background:var(--bg-2);min-height:74px;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0} .tl-m .mn{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)} .tl-m.hot{border-color:color-mix(in srgb,var(--gold) 50%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent)} .tl-dots{display:flex;gap:4px;flex-wrap:wrap;justify-content:center;min-height:8px} .tl-m .ml{font-size:10px;color:var(--dim);line-height:1.25} /* ---- документ-фрагмент (real preview) ---- */ .doc{background:var(--card);border:1px solid var(--line-2);border-left:3px solid var(--gold); border-radius:16px;padding:22px 20px;margin-top:20px;box-shadow:var(--shadow)} @media(min-width:768px){.doc{padding:28px 32px}} .doc-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px} .doc h4{font-family:"Playfair Display",serif;font-size:18px;margin-bottom:10px} .doc p{font-size:15px;line-height:1.7;margin-bottom:10px} .doc p:last-child{margin-bottom:0} .doc .fade{-webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%); mask-image:linear-gradient(180deg,#000 30%,transparent 100%)} .doc-after{margin-top:14px;font-size:14px;color:var(--faint)} /* ---- карточки ---- */ .grid{display:grid;gap:14px;margin-top:28px} @media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}} @media(min-width:900px){.grid-3{grid-template-columns:1fr 1fr 1fr}} .card{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:22px} .card .ic{font-size:20px;margin-bottom:10px;display:block} .card h3{margin-bottom:8px;font-size:17px} .card p{font-size:14px} /* ---- жизненные вопросы ---- */ .qs{display:grid;gap:10px;margin-top:26px} @media(min-width:768px){.qs{grid-template-columns:1fr 1fr;gap:12px}} .q{border:1px solid var(--line-2);border-radius:14px;padding:16px 18px;font-size:15px;color:var(--ink); background:linear-gradient(180deg,var(--card),transparent);display:flex;gap:12px;align-items:flex-start} .q::before{content:"✦";color:var(--gold);flex:0 0 auto;margin-top:1px;font-size:13px} /* ---- планы/тарифы ---- */ .plans{display:grid;gap:14px;margin-top:30px} @media(min-width:820px){.plans{grid-template-columns:1fr 1fr 1.25fr;align-items:stretch}} .plans.plans-2{grid-template-columns:1fr} @media(min-width:820px){.plans.plans-2{grid-template-columns:1fr 1.25fr}} .plan{border:1px solid var(--line-2);border-radius:18px;padding:24px 22px;background:var(--card); display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer; transition:border-color .18s ease,transform .18s ease;font:inherit;color:inherit} .plan:hover{border-color:var(--line)} .plan[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow)} .plan .ph{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .plan .job{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .plan h3{font-size:19px} .plan .pp{font-size:20px;font-weight:700;white-space:nowrap} .plan .pd{font-size:14px;color:var(--dim)} .plan .pf{font-size:13px;color:var(--faint);margin-top:auto;padding-top:8px} .plan.flag{background:linear-gradient(180deg,color-mix(in srgb,var(--gold) 9%,transparent),var(--card) 55%)} .plan .vtag{align-self:flex-start;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold); border:1px solid var(--line);border-radius:100px;padding:3px 10px;margin-bottom:2px} /* ---- шаги ---- */ .steps{display:grid;gap:12px;margin-top:26px} @media(min-width:900px){.steps{grid-template-columns:repeat(4,1fr)}} .step{border:1px solid var(--line-2);border-radius:16px;padding:20px;background:var(--card)} .step .n{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);color:var(--gold); display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:12px;font-weight:600} .step h3{font-size:16px;margin-bottom:6px} .step p{font-size:13.5px} /* ---- отзывы ---- */ .revs{display:grid;gap:14px;margin-top:26px} @media(min-width:768px){.revs{grid-template-columns:1fr 1fr}} .rev{border:1px solid var(--line-2);border-radius:16px;padding:20px 22px;background:var(--card)} .rev p{font-size:14.5px;line-height:1.65;margin-bottom:10px;color:var(--ink)} .rev .who{font-size:13px;color:var(--faint)} .rev .stars{color:var(--gold);font-size:12px;letter-spacing:2px;margin-bottom:8px} /* ---- цена ---- */ .price-card{margin-top:30px;background:linear-gradient(180deg,var(--card-2),var(--card)); border:1px solid var(--line);border-radius:22px;padding:32px 24px;box-shadow:var(--shadow)} @media(min-width:768px){.price-card{padding:44px 48px}} .price-num{font-family:"Playfair Display",serif;font-size:clamp(38px,9vw,54px);font-weight:600;margin:8px 0 4px} .price-num small{font-size:.45em;color:var(--dim);font-weight:400} .inc{display:grid;gap:8px;margin:22px 0 26px;text-align:left;max-width:520px;margin-inline:auto} .inc li{list-style:none;display:flex;gap:10px;font-size:15px;color:var(--ink)} .inc li::before{content:"✓";color:var(--gold);font-weight:700;flex:0 0 auto} .alt-link{display:inline-block;margin-top:16px;font-size:14px;color:var(--dim);text-decoration:underline;text-underline-offset:3px} .alt-link:hover{color:var(--ink)} /* ---- FAQ ---- */ .faq{max-width:760px;margin:26px auto 0} details{border-bottom:1px solid var(--line-2);padding:4px 0} summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center; padding:16px 4px;font-weight:600;font-size:15.5px} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--gold);font-size:20px;flex:0 0 auto;transition:transform .18s ease} details[open] summary::after{transform:rotate(45deg)} details p{padding:0 4px 18px;font-size:14.5px} /* ---- sticky CTA ---- */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px); border-top:1px solid var(--line-2);display:flex;justify-content:center; transform:translateY(110%);transition:transform .25s ease} .sticky.show{transform:translateY(0)} .sticky .btn{width:100%;max-width:520px;padding:14px 20px} @media(min-width:900px){.sticky{display:none}} footer{padding:44px 0 120px;border-top:1px solid var(--line-2);margin-top:40px} @media(min-width:900px){footer{padding-bottom:44px}} footer p{font-size:13px;color:var(--faint);margin-bottom:6px} /* ============================================================ MOTION & ATMOSPHERE LAYER v2.1 (visual rebuild 27.08) ============================================================ */ /* слоёный фон: глубокий градиент + мерцающие звёзды */ body{position:relative} body::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background: radial-gradient(1200px 800px at 80% -10%, color-mix(in srgb,var(--accent) 7%,transparent), transparent 60%), radial-gradient(900px 700px at 10% 110%, color-mix(in srgb,var(--gold) 5%,transparent), transparent 55%); } body::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5; background-image:radial-gradient(1.1px 1.1px at 12% 22%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 34% 68%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1.3px 1.3px at 58% 14%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 72% 82%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1.2px 1.2px at 88% 42%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 22% 88%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1.1px 1.1px at 46% 38%, rgba(255,255,255,.35), transparent 60%), radial-gradient(1px 1px at 94% 76%, rgba(255,255,255,.3), transparent 60%); background-size:900px 900px; animation:starDrift 240s linear infinite; } @keyframes starDrift{from{background-position:0 0}to{background-position:900px 900px}} /* scroll reveal (скрытие только при живом JS: html.js ставит скрипт) */ html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:var(--d,0ms)} html.js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion: reduce){html.js .reveal{opacity:1;transform:none}} /* карточки живут */ .card,.q,.rev,.step{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease} @media(hover:hover){ .card:hover,.rev:hover{transform:translateY(-4px);border-color:var(--line);box-shadow:var(--shadow)} .q:hover{border-color:var(--line)} } /* орбиты и draw-on */ @keyframes orbitSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes orbitSlowR{from{transform:rotate(0)}to{transform:rotate(-360deg)}} .orbit-a{animation:orbitSlow 80s linear infinite;transform-origin:center} .orbit-b{animation:orbitSlowR 130s linear infinite;transform-origin:center} .orbit-c{animation:orbitSlow 200s linear infinite;transform-origin:center} @keyframes drawLine{to{stroke-dashoffset:0}} .draw{stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)} .in .draw,.draw.go{animation:drawLine 1.4s ease forwards;animation-delay:var(--d,0ms)} @keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}} .pulse{animation:glowPulse 4.5s ease-in-out infinite} @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} .floaty{animation:floatY 7s ease-in-out infinite} /* SVG-иконки вместо emoji */ .ic-svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block;margin-bottom:12px} .trust-v{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px} .trust-v span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim); border:1px solid var(--line-2);border-radius:100px;padding:6px 12px} .trust-v svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6} /* editorial фото */ .photo{border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line-2);box-shadow:var(--shadow)} .photo img{display:block;width:100%;height:100%;object-fit:cover} .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(5,10,20,.72))} .photo .cap{color:#F4F1EA} .photo .cap{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;font-size:14px;color:var(--ink)} .photo .cap b{font-family:"Playfair Display",serif;font-size:17px;display:block;margin-bottom:4px} /* hero две колонки на десктопе */ @media(min-width:960px){ .hero-2col{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;text-align:left} .hero-2col .hero-viz{margin-top:0} .hero-2col .hero-cta{justify-content:flex-start} .hero-2col h1{margin-left:0} .hero-2col .lead{margin-left:0} } .platform-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:10px} @media(min-width:960px){.hero-2col .platform-row{justify-content:flex-start}} .platform-row a{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--dim); border:1px solid var(--line-2);border-radius:100px;padding:8px 14px;text-decoration:none;transition:color .18s,border-color .18s} .platform-row a:hover{color:var(--ink);border-color:var(--line)} /* ============ V4: SALES COMPONENTS ============ */ /* trust мини-полоса под CTA */ .trust-mini{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px} .hero-2col .trust-mini{justify-content:flex-start} .trust-mini span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--dim); border:1px solid var(--line-2);border-radius:100px;padding:6px 12px;background:color-mix(in srgb,var(--card) 60%,transparent)} .trust-mini svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.6;flex:0 0 auto} /* карусель «настоящий результат» */ .rcar{margin-top:28px} .rcar-frame{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--card); box-shadow:var(--shadow);padding:14px;overflow:hidden} .rcar-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none; -webkit-overflow-scrolling:touch;border-radius:12px} .rcar-track::-webkit-scrollbar{display:none} .rcar-slide{flex:0 0 100%;scroll-snap-align:center} @media(min-width:820px){.rcar-slide{flex:0 0 60%}} .rcar-slide img{display:block;width:100%;border-radius:12px;border:1px solid var(--line-2)} .rcar-slide .rc-cap{font-size:12.5px;color:var(--faint);margin-top:8px;text-align:center} .rcar-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:14px} .rcar-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card); color:var(--gold);font-size:17px;cursor:pointer;transition:border-color .18s,transform .18s} .rcar-nav button:hover{transform:translateY(-1px);border-color:var(--gold)} .rcar-dots{display:flex;gap:7px} .rcar-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:background .2s} .rcar-dots i.on{background:var(--gold)} /* слайд-«читалка» из реального текста (для продуктов без PDF) */ .rslide-doc{background:#FDFCF8;color:#1E2433;border-radius:12px;padding:26px 24px;min-height:420px; font-size:13.5px;line-height:1.75;border:1px solid var(--line-2)} .rslide-doc h5{font-family:"Playfair Display",Georgia,serif;font-size:17px;color:#101827;margin:0 0 12px} .rslide-doc p{color:#333C4E;margin-bottom:10px} .rslide-doc .rd-tag{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8F6A17;margin-bottom:10px} /* «что произойдёт после оплаты» */ .after{display:grid;gap:10px;margin-top:26px} @media(min-width:860px){.after{grid-template-columns:repeat(4,1fr)}} .after .a-step{border:1px solid var(--line-2);border-radius:16px;padding:18px;background:var(--card);position:relative} .after .a-step .an{width:28px;height:28px;border-radius:50%;background:linear-gradient(180deg,var(--cta-1),var(--cta-2)); color:var(--cta-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-bottom:10px} .after .a-step b{display:block;font-size:14.5px;margin-bottom:4px} .after .a-step p{font-size:12.5px} /* анимированный пайплайн персонализации */ .pipe{display:grid;gap:8px;margin-top:26px;position:relative} @media(min-width:900px){.pipe{grid-template-columns:repeat(5,1fr) }} .pipe .p-node{border:1px solid var(--line-2);border-radius:14px;padding:15px 13px;background:var(--card); text-align:center;position:relative} .pipe .p-node svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:1.5;margin:0 auto 8px;display:block} .pipe .p-node b{display:block;font-size:13px;margin-bottom:3px} .pipe .p-node p{font-size:11.5px} @media(min-width:900px){ .pipe .p-node:not(:last-child)::after{content:"";position:absolute;top:50%;right:-9px;width:10px;height:2px; background:var(--gold);opacity:.6;animation:glowPulse 3s ease-in-out infinite} } /* юр-траст карточка */ .legal-card{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-top:22px; border:1px solid var(--line-2);border-radius:16px;padding:16px 20px;background:var(--card)} .legal-card .lc-t{font-size:13px;color:var(--dim);text-align:left} .legal-card .lc-t b{display:block;color:var(--ink);font-size:14px;margin-bottom:2px} .legal-card svg{width:26px;height:26px;stroke:var(--gold);fill:none;stroke-width:1.5;flex:0 0 auto} .legal-card a{color:var(--gold)} /* pay marks */ .pay-marks{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px} .pay-marks span{font-size:11.5px;letter-spacing:.04em;border:1px solid var(--line-2);border-radius:8px; padding:5px 10px;color:var(--faint)} /* сценарии-карточки с фоном */ .scen{display:grid;gap:14px;margin-top:26px} @media(min-width:860px){.scen{grid-template-columns:repeat(3,1fr)}} .scen .sc{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);min-height:220px; display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:var(--card)} .scen .sc .bgv{position:absolute;inset:0;opacity:.85} .scen .sc .bgv svg{width:100%;height:100%} .scen .sc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,9,18,.85))} .scen .sc b{position:relative;z-index:2;font-family:"Playfair Display",serif;font-size:17px;line-height:1.3} .scen .sc p{position:relative;z-index:2;font-size:12.5px;margin-top:5px} /* ===== V5: живой ридер результата (тёмный) ===== */ .reader5{border:1px solid var(--line-2);border-radius:22px;background:linear-gradient(180deg,#14253A,#101E31);padding:18px;margin-top:26px;box-shadow:0 20px 60px rgba(0,0,0,.4)} @media(min-width:820px){.reader5{display:grid;grid-template-columns:200px 1fr}} .rd-nav{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none} .rd-nav::-webkit-scrollbar{display:none} @media(min-width:820px){.rd-nav{flex-direction:column;overflow:visible;border-right:1px solid rgba(182,192,208,.12);padding-right:14px}} .rd-tab{font:inherit;font-size:13px;color:#8F9CAF;background:none;border:none;border-left:2px solid transparent;padding:9px 12px;cursor:pointer;text-align:left;white-space:nowrap} @media(min-width:820px){.rd-tab{white-space:normal}} .rd-tab.on{color:#E8C475;border-left-color:#E8C475} .rd-page{padding:14px 6px 6px;min-height:340px;display:flex;flex-direction:column} @media(min-width:820px){.rd-page{padding:10px 6px 10px 24px}} .rd-page .rp-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#D5A85A;margin-bottom:10px} .rd-page h4{font-family:"Playfair Display",serif;font-size:21px;margin-bottom:12px;color:#F4F1EA} .rd-page p{font-size:14.5px;line-height:1.8;color:#C7CFDC;margin-bottom:12px} .rd-page b{color:#F4F1EA} .rd-kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .rd-kv span{font-size:12.5px;color:#E8C475;border:1px solid rgba(213,168,90,.35);border-radius:100px;padding:6px 12px;background:rgba(213,168,90,.07)} .rd-cover{text-align:center;padding:56px 10px;margin:auto;width:100%} .rd-cover .rc-mark{font-family:"Playfair Display",serif;letter-spacing:8px;font-size:15px;color:#F4F1EA} .rd-cover .rc-mark span{color:#D5A85A} .rd-cover h3{font-family:"Playfair Display",serif;font-size:38px;margin:26px 0 8px;color:#F4F1EA} .rd-cover .rc-sub{color:#8F9CAF;font-size:13px;letter-spacing:.1em;text-transform:uppercase} .rd-cover svg{width:180px;height:180px;margin:24px auto 0;display:block}