/* «Моя личность» — Selena. Темний фон, приглушені акварельні рожевий, бузковий і бірюзовий */
:root {
  --bg: #14111a;
  --bg2: #1b1723;
  --card: #221d2c;
  --line: rgba(255, 255, 255, .09);
  --text: #f2edf3;
  --muted: #b5acbf;
  --pink: #e8a9c5;
  --aqua: #a6d8d2;
  --violet: #a99bd8;
  --grad: linear-gradient(120deg, var(--pink), #c7b5e2 50%, var(--aqua));
  --r: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.6 Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--aqua); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; }
h1, h2 { font-family: Oswald, Manrope, sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: clamp(30px, 5vw, 48px); }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1em; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }
.narrow { width: min(820px, 100% - 32px); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: 14px; }

/* шапка */
.top { position: sticky; top: 0; z-index: 20; background: rgba(20, 17, 26, .78); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.logo { font: 600 26px/1 Oswald, sans-serif; letter-spacing: .06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.top .logo { font-weight: 300; font-size: 20px; letter-spacing: .14em; }
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--muted); font-size: 15px; }
.nav a:hover { color: var(--text); }
.lang { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.lang a, .lang span { padding: 5px 11px; border-radius: 99px; color: var(--muted); transition: color .2s, background .2s; }
.lang a:hover { color: var(--text); }
.lang .on { background: var(--grad); color: #1a0b1f; }
/* плавна зміна мовної версії: при переході сторінка згасає, нова — проявляється (класи ставить script.js) */
body { transition: opacity .3s ease-out; }
body.leaving, body.arriving { opacity: 0; }
body.leaving { transition-duration: .22s; }

/* 3D-кнопка: пухка, з «товщиною» знизу, натискається */
.btn3d {
  --depth: 7px;
  display: inline-block; position: relative; padding: 18px 38px; border-radius: 18px;
  font: 700 18px/1 Manrope, sans-serif; color: #1a0b1f; text-align: center;
  background: linear-gradient(180deg, #f6d6e4 0%, var(--pink) 45%, #d792b3 100%);
  box-shadow: 0 var(--depth) 0 #96627c, 0 calc(var(--depth) + 12px) 28px rgba(232, 169, 197, .32), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .12);
  transform: translateY(0); transition: transform .12s, box-shadow .12s, filter .2s;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.btn3d::after { content: ''; position: absolute; inset: 4px 10px auto; height: 40%; border-radius: 14px 14px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn3d:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 calc(var(--depth) + 2px) 0 #96627c, 0 calc(var(--depth) + 18px) 34px rgba(232, 169, 197, .39), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.btn3d:active { transform: translateY(var(--depth)); box-shadow: 0 0 0 #96627c, 0 4px 12px rgba(232, 169, 197, .24), inset 0 2px 0 rgba(255, 255, 255, .4); }
.plan-alt .btn3d, .final .btn3d { background: linear-gradient(180deg, #dcf1ee 0%, var(--aqua) 45%, #86c3bc 100%); box-shadow: 0 var(--depth) 0 #5c8f89, 0 calc(var(--depth) + 12px) 28px rgba(166, 216, 210, .24), inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.plan-alt .btn3d:active, .final .btn3d:active { box-shadow: 0 0 0 #5c8f89, 0 4px 12px rgba(166, 216, 210, .21); }
.btn3d.wide { display: block; width: 100%; }

/* перший екран */
.hero { position: relative; display: flex; flex-direction: column; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); padding: 0 0 56px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; background: radial-gradient(closest-side, rgba(232, 169, 197, .2), transparent 70%); }
.hero::after { content: ''; position: absolute; inset: auto auto -30% -20%; width: 60vw; height: 60vw; background: radial-gradient(closest-side, rgba(166, 216, 210, .13), transparent 70%); }
.hero-grid { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding-top: 48px; }
.kicker { color: var(--aqua); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.hero h1 { font-size: clamp(54px, 9vw, 104px); line-height: .95; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(232, 169, 197, .24)); }
.lead { font-size: 19px; color: #e3d9ec; max-width: 560px; }
.facts { list-style: none; padding: 0; margin: 22px 0 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li { border: 1px solid var(--line); background: rgba(255, 255, 255, .04); border-radius: 99px; padding: 7px 16px; font-size: 15px; }
.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 10px; }
.hero-price { position: relative; display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 20px 10px 18px; border-radius: 18px; color: var(--muted); background: linear-gradient(var(--bg2), var(--bg2)) padding-box, var(--grad) border-box; border: 1.5px solid transparent; box-shadow: 0 0 28px rgba(232, 169, 197, .15); }
.hp-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); }
.hp-row { display: flex; align-items: baseline; gap: 10px; }
.hp-from { font-size: 16px; }
.hero-price s { position: relative; font: 500 22px Oswald, sans-serif; color: var(--muted); text-decoration: none; opacity: .8; }
.hero-price s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: var(--pink); transform: rotate(-14deg); box-shadow: 0 0 6px var(--pink); }
.hero-price b { font: 600 40px/1 Oswald, sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(232, 169, 197, .32)); }
s { color: var(--muted); opacity: .8; }
.hero-photo { position: relative; }
.hero-photo::before { content: ''; position: absolute; inset: 8% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(232, 169, 197, .32), rgba(169, 155, 216, .13) 60%, transparent 75%); filter: blur(10px); }
.hero-photo img { position: relative; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 78%, transparent 100%); }
.hero-matrix { position: absolute; z-index: 0; width: 620px; right: -120px; top: 40px; opacity: .22; animation: spin 140s linear infinite; }
.m-ring, .m-line { fill: none; stroke: #fff; stroke-width: .6; }
.m-dot0 { fill: var(--pink); } .m-dot1 { fill: var(--aqua); } .m-dot2 { fill: var(--violet); }
.m-core { fill: #ecd5a6; }
@keyframes spin { to { transform: rotate(360deg); } }

/* секції */
.sec { padding: 88px 0; position: relative; scroll-margin-top: 64px; }
.plans-note { margin: 16px 0 0; }
.sec-soft { background: var(--bg2); }
.sec-lead { font-size: 19px; color: var(--muted); max-width: 720px; margin-bottom: 36px; }
.center .sec-lead { margin-inline: auto; }
.sub { margin-top: 56px; font-size: 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.card p { color: var(--muted); margin: 0; }
.card h3 { position: relative; padding-left: 18px; }
.card h3::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 12px var(--pink); }
.loss { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.loss div { padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.loss b { display: block; font: 500 22px Oswald, sans-serif; text-transform: uppercase; color: var(--pink); }
.loss span { color: var(--muted); }
.who { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.who article { padding: 28px; border-radius: var(--r); background: linear-gradient(160deg, rgba(232, 169, 197, .07), rgba(166, 216, 210, .04)); border: 1px solid var(--line); }
.who p { color: var(--muted); margin: 0; }
.num { font: 500 40px/1 Oswald, sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; margin-bottom: 12px; }

.inside-grid, .about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.inside-cover img { border-radius: var(--r); box-shadow: 0 30px 80px rgba(169, 155, 216, .24); }
.topics { list-style: none; counter-reset: t; padding: 0; margin: 0; }
.topics li { counter-increment: t; position: relative; padding: 0 0 18px 64px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.topics li::before { content: counter(t); position: absolute; left: 0; top: -2px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 20px Oswald, sans-serif; color: #1a0b1f; background: var(--grad); box-shadow: 0 0 20px rgba(232, 169, 197, .28); }
.topics p { color: var(--muted); margin: 0; }

.ticks, .crosses { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li, .crosses li { position: relative; padding-left: 34px; margin-bottom: 12px; }
.ticks li::before { content: '✦'; position: absolute; left: 4px; color: var(--aqua); }
.crosses li::before { content: '×'; position: absolute; left: 6px; color: var(--pink); font-weight: 700; }
.ticks.big { columns: 2 320px; column-gap: 40px; font-size: 18px; margin-bottom: 40px; }
.ticks.big li { break-inside: avoid; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; }
.panel-dim { background: transparent; }
.panel-dim li { color: var(--muted); }
.no { color: var(--muted); }
.no b { color: var(--text); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 44px; }
.steps article { position: relative; padding: 30px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.steps p { color: var(--muted); margin: 0; }
.step-n { display: block; font: 500 52px/1 Oswald, sans-serif; color: transparent; -webkit-text-stroke: 1px var(--pink); margin-bottom: 14px; }

/* відгуки — стрічка зі скриншотів */
.arrow { width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer; font: 700 22px/1 Manrope, sans-serif; color: #1a0b1f;
  background: linear-gradient(180deg, #f6d6e4, var(--pink) 50%, #d792b3); box-shadow: 0 5px 0 #96627c, 0 12px 24px rgba(232, 169, 197, .24), inset 0 2px 0 rgba(255, 255, 255, .5);
  transition: transform .12s, box-shadow .12s, opacity .2s; }
.arrow:active { transform: translateY(5px); box-shadow: 0 0 0 #96627c, 0 4px 10px rgba(232, 169, 197, .21); }
.arrow:disabled { opacity: .3; cursor: default; }
.rv-wrap { position: relative; }
.arrow-side { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; }
.arrow-side:active { transform: translateY(5px); }
.arrow-l { left: max(10px, (100% - 1160px) / 2 - 70px); } .arrow-r { right: max(10px, (100% - 1160px) / 2 - 70px); }
.rv-row { scroll-padding-inline: max(16px, (100% - 1160px) / 2); display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px max(16px, (100% - 1160px) / 2) 24px; scrollbar-width: none; }
.rv-row::-webkit-scrollbar { display: none; }
.rv-dots { display: flex; justify-content: center; gap: 8px; }
.rv-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .2); transition: width .25s, background .25s; }
.rv-dots i.on { width: 26px; background: var(--grad); }
/* переписка як у Telegram (темна тема) */
.tg { flex: 0 0 auto; width: 360px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; border-radius: 22px; border: 1px solid var(--line);
  background-color: #0f0e14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M18 22l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Ccircle cx='98' cy='30' r='11'/%3E%3Cpath d='M60 70c0-6 9-6 9 0 0-6 9-6 9 0 0 7-9 12-9 12s-9-5-9-12z'/%3E%3Cpath d='M112 92l14 14M126 92l-14 14'/%3E%3Crect x='20' y='96' width='22' height='16' rx='4'/%3E%3Cpath d='M30 96v-5h6M84 118c6-8 14-8 20 0'/%3E%3Ccircle cx='58' cy='20' r='3'/%3E%3Ccircle cx='132' cy='60' r='3'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 100% 0%, rgba(169, 155, 216, .13), transparent 60%), radial-gradient(100% 60% at 0% 100%, rgba(232, 169, 197, .07), transparent 60%); }
.tg-msg { position: relative; max-width: 86%; align-self: flex-start; padding: 8px 12px 6px; border-radius: 16px 16px 16px 4px; background: #232129; color: #f2f0f5; font: 400 15px/1.42 -apple-system, 'SF Pro Text', Manrope, system-ui, sans-serif; }
.tg-msg p { margin: 0; display: inline; }
.tg-msg time { float: right; margin: 8px -2px -2px 10px; font-size: 11.5px; line-height: 1; color: rgba(255, 255, 255, .45); }
.tg-out { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: linear-gradient(160deg, #8676b8, #6f60a6); }
.tg-out time { color: rgba(255, 255, 255, .75); }
.tg-day { align-self: center; margin: 4px 0; }
.tg-day span { display: inline-block; padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 13px; font-weight: 600; }

.about-photo { position: relative; max-width: 360px; margin: 0 auto; }
.about-photo img { position: relative; width: 100%; max-height: 560px; object-fit: contain; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.role { color: var(--pink); font-weight: 600; font-size: 18px; }
.cards-5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ціни */
.sec-glow { background: radial-gradient(60% 50% at 50% 0%, rgba(232, 169, 197, .11), transparent), var(--bg2); }
.promo { display: inline-block; padding: 8px 18px; border-radius: 99px; background: rgba(232, 169, 197, .08); border: 1px solid rgba(232, 169, 197, .28); color: #f3d4e2; font-weight: 600; margin-bottom: 36px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.plan { display: flex; flex-direction: column; padding: 34px; border-radius: 26px; background: var(--card); border: 1px solid rgba(232, 169, 197, .24); box-shadow: 0 20px 60px rgba(232, 169, 197, .08); }
.plan-alt { border-color: rgba(166, 216, 210, .24); box-shadow: 0 20px 60px rgba(166, 216, 210, .07); }
.plan h3 { font-size: 23px; }
.plan .ticks { flex: 1; margin: 18px 0 28px; }
.price { display: flex; align-items: baseline; gap: 14px; margin-top: 6px; }
.price s { font-size: 22px; }
.price b { font: 500 60px/1 Oswald, sans-serif; }
.gift { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: center; margin-top: 30px; padding: 26px; border-radius: 26px; border: 1px dashed rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .03); }
.gift img { border-radius: 16px; }
.gift-label { display: inline-block; margin-bottom: 10px; color: var(--aqua); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.gift p { color: var(--muted); }
.gift-cta { color: var(--pink) !important; font-weight: 700; margin: 0; }

/* питання */
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; font-weight: 700; font-size: 18px; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 6px; top: 16px; font-size: 28px; color: var(--pink); transition: transform .2s; }
details[open] summary::after { transform: rotate(45deg); }
details p { color: var(--muted); padding-right: 30px; }

.final { overflow: hidden; padding: 120px 0; }
.final-matrix { position: absolute; width: 560px; left: 50%; top: 50%; translate: -50% -50%; opacity: .14; animation: spin 160s linear infinite reverse; }
.final .wrap { position: relative; }
.final .btn3d { margin: 10px 0 16px; }

.foot { border-top: 1px solid var(--line); padding: 48px 0 110px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.foot-grid > div { display: flex; flex-direction: column; gap: 8px; }
.foot-h { font-weight: 700; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }

.sticky-cta { display: none; }

/* правові сторінки */
.legal h1 { font-size: clamp(30px, 6vw, 44px); margin-top: 20px; }
.legal h2 { font-size: 22px; margin-top: 30px; }
.legal p, .legal li { color: #dcd2e6; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--pink); }
.legal-date { font-size: 14px; color: var(--muted) !important; }
.legal-intro { font-size: 18px; padding: 16px 20px; border-left: 3px solid var(--pink); background: var(--card); border-radius: 0 14px 14px 0; }

@media (max-width: 960px) {
  .nav { display: none; }
  .lang { margin-left: auto; }
  .hero-grid, .inside-grid, .about-grid, .two, .plans { grid-template-columns: 1fr; }
  /* телефон: фото — підкладка під текстом першого екрана */
  .hero { padding-bottom: 20px; }
  /* телефон: текст притиснутий донизу першого екрана, кнопка й ціна — внизу */
  .hero-grid { display: flex; flex-direction: column; justify-content: flex-end; padding-top: min(66vw, 300px); }
  .hero-text > p:last-child { margin-bottom: 0; }
  .hero-text { position: relative; z-index: 1; }
  .hero-text p, .hero-text li { text-shadow: 0 1px 10px rgba(20, 17, 26, .9); }
  .hero .hero-matrix { display: none; }
  .hero-photo { position: absolute; z-index: 0; top: 0; right: -34%; width: 125%; max-width: 560px; opacity: .55; pointer-events: none; }
  .hero-photo::before { display: none; }
  .hero-photo img { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 95%), linear-gradient(90deg, transparent 0, #000 30%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, #000 0, #000 60%, transparent 95%), linear-gradient(90deg, transparent 0, #000 30%); mask-composite: intersect; }
  .facts li { background: rgba(20, 17, 26, .55); backdrop-filter: blur(6px); }
  .hero-matrix { width: 420px; right: -160px; top: 0; }
  .steps { grid-template-columns: 1fr 1fr; }
  .inside-cover { max-width: 360px; margin: 0 auto; }
  .about-photo { max-width: 240px; }
  .gift { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .sec { padding: 64px 0; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .steps { grid-template-columns: 1fr; }
  .tg { width: 84vw; }
  .arrow { width: 46px; height: 46px; font-size: 18px; }
  .arrow-side { top: auto; bottom: -58px; translate: none; }
  .arrow-l { left: 16px; } .arrow-r { right: 16px; }
  .rv-dots { height: 46px; align-items: center; margin-top: 12px; gap: 6px; }
  .rv-dots i { width: 6px; height: 6px; }
  .rv-dots i.on { width: 18px; }
  .top-in { height: 44px; }
  .lang a, .lang span { padding: 2px 11px; }
  /* висота під голову: фото й відступ тексту стискаються разом, щоб ціна й кнопка лишались на першому екрані */
  .hero { --head: clamp(100px, calc(100vh - 500px), min(52vw, 240px)); --head: clamp(100px, calc(100svh - 500px), min(52vw, 240px)); min-height: calc(100vh - 44px); min-height: calc(100svh - 44px); padding-bottom: 14px; }
  .hero-grid { padding-top: var(--head); }
  .hero-photo { width: calc(var(--head) * 1.75); right: calc(var(--head) * -.3); }
  .sec { scroll-margin-top: 44px; }
  .hero h1 { font-size: min(12.6vw, 50px); margin: 6px 0 10px; }
  html[lang="uk"] .hero h1 { font-size: min(11.2vw, 50px); }
  .kicker { margin: 0; }
  .lead { font-size: 16px; line-height: 1.45; margin: 0; }
  .facts { margin: 12px 0 14px; gap: 6px; }
  .facts li { font-size: 13px; padding: 4px 10px; }
  .hero-cta { gap: 12px; }
  .hero-cta .btn3d { width: 100%; }
  .hero-price { order: -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding: 8px 14px; }
  .hp-label { color: #fff; white-space: nowrap; }
  .kicker { font-size: clamp(10px, 3.3vw, 14px); letter-spacing: .03em; white-space: nowrap; }
  .hero-price b { font-size: 34px; }
  .price b { font-size: 50px; }
  .plan, .panel { padding: 24px; }
  .sticky-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; transition: transform .25s, opacity .25s; }
  .sticky-cta.off { transform: translateY(140%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-matrix, .final-matrix { animation: none; } html { scroll-behavior: auto; } }