:root {
  --red: #ff4f91;
  --black: #141414;
  --line: #393939;
  --white: #f6f6f3;
}

/* KATAF robot system — unified monochrome + pink art direction */
:root {
  --red: #ff4f91;
  --pink: #ff4f91;
  --ink: #101010;
  --graphite: #191919;
  --paper: #f4f4f2;
}

body {
  background: var(--ink);
}

/* Kill the browser's default blue tap/focus highlight everywhere (mobile
   Chrome/Safari show it on any tappable element unless it's reset) and
   replace it with an on-brand pink focus ring for accessibility. */
* {
  -webkit-tap-highlight-color: transparent;
}
a, button, input, [tabindex] {
  outline-color: var(--pink);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.top {
  position: fixed;
  border-bottom: 1px solid #ffffff16;
  background: linear-gradient(180deg, #0c0c0ce8, #0c0c0c90 70%, transparent);
  backdrop-filter: blur(14px);
}

.product-hero {
  background: #0b0b0b;
}

.product-hero::before {
  background:
    radial-gradient(circle at 78% 42%, #ff4f9128 0%, transparent 31%),
    radial-gradient(circle at 13% 86%, #ffffff0b 0%, transparent 28%),
    linear-gradient(135deg, #181818, #080808) !important;
}

.product-hero h1 em,
.brand span {
  color: var(--pink);
}

.red-btn,
.fear-intro button {
  background: var(--pink);
  border: 1px solid #ff8bb6;
  box-shadow: 0 12px 34px #ff4f912b;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.red-btn:hover,
.fear-intro button:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px #ff4f9140;
}

.fear-section,
.services,
.system-v2,
.eyes-block,
.packaging,
.prices,
.choice,
.contact {
  position: relative;
  overflow: hidden;
}

.fear-section,
.system-v2,
.packaging,
.choice {
  background: var(--paper);
  color: #151515;
}

.services,
.eyes-block,
.prices,
.contact {
  background: var(--ink);
  color: #f7f7f4;
}

.services::before,
.prices::before,
.contact::before {
  content: "";
  position: absolute;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: #ff4f9118;
  filter: blur(40px);
  pointer-events: none;
}

.services::before { right: -240px; top: 4%; }
.prices::before { left: -280px; top: 18%; }
.contact::before { right: -150px; bottom: -280px; }

.kicker {
  color: var(--pink);
}

.section-robot,
.contact-robot,
.core-robot {
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 28px 48px #0007);
  animation: mascotFloat 6.5s ease-in-out infinite;
  will-change: transform;
  animation-name: mascotEnter, mascotFloat;
  animation-duration: .8s, 6.5s;
  animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count: 1, infinite;
  animation-delay: 0s, .8s;
}

.section-robot {
  position: absolute;
  z-index: 1;
  object-fit: contain;
}

.fear-grid,
.services .shell,
.prices .shell,
.contact .shell {
  position: relative;
  z-index: 2;
}

.robot-fear {
  width: 360px;
  height: 540px;
  right: -42px;
  bottom: -105px;
  opacity: .24;
  filter: drop-shadow(0 24px 40px #0002);
}

.robot-services {
  width: 350px;
  height: 510px;
  right: -45px;
  top: 50px;
  opacity: .24;
  --robot-tilt: 4deg;
}

.robot-prices {
  width: 360px;
  height: 540px;
  left: -110px;
  bottom: -115px;
  opacity: .2;
  filter: drop-shadow(0 28px 48px #0008);
}

.robot-lie {
  width: 420px;
  height: 330px;
  object-fit: contain;
  right: -70px;
  top: 100px;
  opacity: .2;
  --robot-tilt: -5deg;
}

.system-core {
  overflow: hidden;
  background: linear-gradient(150deg, #161616, #080808) !important;
  border: 1px solid #2e2e2e;
}

.core-robot {
  position: absolute;
  width: 260px;
  height: 390px;
  object-fit: contain;
  right: -68px;
  bottom: -88px;
  opacity: .36;
  transform-origin: 50% 70%;
}

.system-features article {
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.system-features article:hover {
  transform: translateY(-5px);
  border-color: #ff4f9166;
  background: #fff;
}

.tabs button.active {
  color: var(--pink);
  border-color: var(--pink);
}

.service-list > div {
  transition: padding-left .3s ease, color .3s ease, border-color .3s ease;
}

.service-list > div:hover {
  padding-left: 12px;
  color: #fff;
  border-color: #ff4f9170;
}

.price-grid article {
  background: #171717;
  border-color: #333;
  color: #f7f7f4;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.price-grid article:hover {
  transform: translateY(-8px);
  border-color: #ff4f9170;
  box-shadow: 0 24px 50px #0005;
}

.price-grid article.featured {
  background: linear-gradient(145deg, #ff4f91, #e92b73);
  border-color: #ff93bb;
}

.direct {
  background: #ededeb;
  color: #151515;
  border: 0;
}

.contact {
  min-height: 660px;
  display: flex;
  align-items: center;
}

.contact-robot {
  position: absolute;
  z-index: 1;
  width: min(43vw, 580px);
  height: 720px;
  object-fit: contain;
  right: 2%;
  bottom: -140px;
  opacity: .7;
}

.robot-wave { transform-origin: 52% 78%; }
.robot-present { transform-origin: 50% 75%; }
.robot-wow { transform-origin: 50% 75%; }

@keyframes mascotEnter {
  from { opacity: 0; transform: translateY(42px) scale(.92) rotate(var(--robot-tilt, 0deg)); }
}

.contact-grid {
  padding-right: min(34vw, 430px);
}

.contact-grid > div:last-child {
  background: #ffffff0b;
  border: 1px solid #ffffff16;
  border-radius: 28px;
  padding: 34px;
  backdrop-filter: blur(10px);
}

@keyframes mascotFloat {
  0%, 100% { transform: translateY(0) rotate(var(--robot-tilt, 0deg)); }
  50% { transform: translateY(-12px) rotate(var(--robot-tilt, 0deg)); }
}

@media (max-width: 900px) {
  .top { height: 74px; }
  .robot-fear { width: 230px; height: 350px; right: -95px; opacity: .12; }
  .robot-services { width: 200px; height: 300px; right: -75px; top: 120px; opacity: .13; }
  .robot-prices { width: 230px; height: 350px; left: -95px; opacity: .1; }
  .robot-lie { width: 230px; height: 200px; right: -80px; top: 65px; opacity: .13; }
  .core-robot { width: 190px; height: 285px; right: -54px; opacity: .28; }
  .contact { min-height: 820px; align-items: flex-start; }
  .contact-grid { padding-right: 0; }
  .contact-robot { width: 390px; max-width: 110vw; height: 520px; right: -84px; bottom: -105px; opacity: .48; }
  .contact-grid > div:last-child { padding: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .section-robot,
  .contact-robot,
  .core-robot,
  .hero-robot,
  .stage-orbit { animation: none !important; }
  * { scroll-behavior: auto !important; }
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  color: #171717;
}
.shell {
  width: min(1260px, calc(100% - 72px));
  margin: auto;
}
.top {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  padding: 0 38px;
  color: white;
}
.brand {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: inherit;
  text-decoration: none;
}
.brand span {
  color: var(--red);
}
.top nav {
  display: flex;
  gap: 8px;
  margin: auto;
}
.top nav a,
.phone {
  color: white;
  text-decoration: none;
  padding: 12px 19px;
  border-radius: 30px;
  background: #ffffff17;
  backdrop-filter: blur(15px);
  font-size: 14px;
}
.phone {
  padding-left: 24px;
  padding-right: 24px;
}
.hamb,
.mobile {
  display: none;
}
.hero {
  height: 100svh;
  min-height: 690px;
  color: white;
  position: relative;
  overflow: hidden;
}
.hero > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0005 0%, #0001 35%, #000b 100%);
}
.hero-content {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 120px;
}
.hero-label {
  font-size: 14px;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(45px, 5.3vw, 78px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
}
.hero-line {
  padding-top: 20px;
  border-top: 1px solid #ffffff78;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero-line p {
  font-size: 14px;
}
.red-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  background: var(--red);
  border-radius: 40px;
  padding: 17px 25px;
  color: white;
  text-decoration: none;
  font-size: 15px;
}
.red-btn svg {
  width: 18px;
}
.hero-tags {
  position: absolute;
  bottom: 25px;
  left: 3%;
  display: flex;
  gap: 4px;
}
.hero-tags span {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 8px 22px;
  font-size: 13px;
}
.down {
  position: absolute;
  right: 3%;
  bottom: 26px;
  color: white;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}
.services {
  background: var(--black);
  color: white;
  padding: 110px 0;
}
.services h2,
.system h2,
.prices h2,
.choice h2,
.contact h2 {
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 55px 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: 30px;
}
.tabs button {
  border: 0;
  border-bottom: 1px solid #555;
  background: none;
  color: #777;
  font-size: 18px;
  padding: 0 0 7px;
  cursor: pointer;
}
.tabs button.active {
  color: white;
  border-color: white;
}
.service-body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 120px;
}
.service-copy h3 {
  font-size: 38px;
  font-weight: 400;
  margin: 0 0 28px;
}
.service-copy p {
  color: #999;
  font-size: 18px;
  line-height: 1.5;
  max-width: 510px;
}
.service-copy .red-btn {
  margin-top: 70px;
}
.service-list > div {
  border-top: 1px solid var(--line);
  padding: 18px 0;
  font-size: 17px;
  display: grid;
  grid-template-columns: 55px 1fr;
}
.service-list span {
  color: #777;
  font-size: 12px;
}
.services-scroll{height:400vh;padding:0!important;overflow:visible}
.services-sticky{position:sticky;top:0;height:100vh;min-height:720px;display:flex;align-items:center;overflow:hidden;background:var(--black)}
.services-sticky>.shell{width:100%}
.services-heading{display:flex;align-items:flex-end;justify-content:space-between}
.scroll-count{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:7px;text-align:right}
.scroll-count strong{font-size:38px;font-weight:400;color:var(--pink)}
.scroll-count span{color:#666;font-size:15px}
.scroll-count small{grid-column:1/3;color:#777;font-size:8px;letter-spacing:.16em}
.services-scroll .tabs{margin:34px 0 46px}
.services-scroll .tabs button{display:flex;align-items:center;gap:9px}
.services-scroll .tabs button>span{font-size:9px;color:#555}
.services-scroll .tabs button.active>span{color:var(--pink)}
.services-scroll .service-body{animation:serviceIn .48s cubic-bezier(.2,.75,.25,1) both}
.service-progress{height:2px;margin-top:34px;background:#ffffff12}
.service-progress i{display:block;height:100%;background:var(--pink);box-shadow:0 0 16px #ff4f9190;transition:width .45s ease}
@keyframes serviceIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Mascots stay vivid and visibly in front of decorative backgrounds. */
.section-robot{z-index:3!important;opacity:.96!important;filter:brightness(1.12) contrast(1.08) saturate(1.12) drop-shadow(0 30px 48px #0009)!important}
.hero-robot,.eyes-robot{z-index:5;opacity:1;filter:brightness(1.08) contrast(1.06) drop-shadow(0 30px 52px #000b)}
.core-robot{z-index:3;opacity:.95!important;filter:brightness(1.12) contrast(1.08) drop-shadow(0 22px 32px #0009)!important}
.contact-robot{z-index:3;opacity:.96!important;filter:brightness(1.12) contrast(1.08) drop-shadow(0 30px 48px #0009)!important}
.system {
  padding: 120px 0;
}
.kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  margin-bottom: 40px;
}
.system h2 span {
  color: #9b9b96;
}
.cycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #bbb;
  margin-top: 80px;
}
.cycle article {
  padding: 25px 25px 25px 0;
  min-height: 235px;
  border-right: 1px solid #bbb;
}
.cycle article + article {
  padding-left: 25px;
}
.cycle b {
  font-size: 12px;
}
.cycle h3 {
  margin-top: 60px;
  font-size: 24px;
  font-weight: 400;
}
.cycle p {
  color: #777;
  line-height: 1.5;
}
.prices {
  padding: 120px 0;
  background: #e6e5e1;
}
.section-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  margin-bottom: 70px;
}
.section-head > p {
  max-width: 400px;
  line-height: 1.6;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #aaa;
  border: 1px solid #aaa;
}
.price-grid article {
  background: #e6e5e1;
  padding: 25px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}
.price-grid span {
  font-size: 12px;
}
.price-grid h3 {
  font-size: 27px;
  font-weight: 400;
  margin-top: 65px;
}
.price-grid strong {
  font-size: 23px;
  margin-top: auto;
}
.price-grid a {
  color: #222;
  text-decoration: none;
  border-top: 1px solid #aaa;
  margin-top: 22px;
  padding-top: 15px;
  display: flex;
  justify-content: space-between;
}
.direct {
  margin-top: 24px;
  background: var(--red);
  color: white;
  padding: 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  align-items: end;
  gap: 30px;
}
.direct h3 {
  font-size: 30px;
  font-weight: 400;
  margin: 18px 0 0;
}
.direct p {
  color: #ffb5b5;
}
.direct strong {
  font-size: 28px;
}
.direct small {
  font-size: 11px;
}
.choice {
  background: var(--black);
  color: white;
  padding: 120px 0;
}
.choice h2 {
  max-width: 900px;
}
.choice > div > p {
  color: #888;
  font-size: 20px;
  margin: 35px 0 90px;
}
.choice-row {
  border-top: 1px solid #555;
  border-bottom: 1px solid #555;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr auto 1.5fr;
  align-items: center;
}
.choice-row span {
  color: #777;
}
.choice-row strong {
  font-size: 28px;
  text-align: right;
  font-weight: 400;
}
.contact {
  background: #fff;
  padding: 120px 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
}
.contact-grid > div:last-child > p {
  font-size: 19px;
  line-height: 1.5;
  max-width: 430px;
}
.large {
  margin: 28px 0 15px;
  min-width: 320px;
}
.contact small {
  display: block;
  color: #888;
}
footer {
  background: var(--black);
  color: white;
}
footer .shell {
  height: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  font-size: 13px;
}
.hero > img {
  animation: heroZoom 14s ease-out both;
}
.shade {
  background:
    linear-gradient(90deg, #070707e8 0%, #0808089c 48%, #0002 78%),
    linear-gradient(0deg, #000d 0%, transparent 45%);
}
.hero-glow {
  position: absolute;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  right: -190px;
  top: -170px;
  background: radial-gradient(circle, #ff4f9155 0%, transparent 67%);
  filter: blur(10px);
  animation: breathe 5s ease-in-out infinite;
}
.orbit {
  position: absolute;
  border: 1px solid #ffffff2e;
  border-radius: 50%;
  right: -150px;
  top: 4%;
  width: 590px;
  height: 590px;
  animation: spin 18s linear infinite;
}
.orbit::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--red);
  top: 49%;
  left: -7px;
  box-shadow: 0 0 25px var(--red);
}
.orbit-two {
  width: 420px;
  height: 420px;
  right: -65px;
  top: 14%;
  animation-direction: reverse;
  animation-duration: 13s;
}
.hero-content {
  bottom: 112px;
  z-index: 2;
}
.hero-label {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: fadeUp 0.7s 0.1s both;
}
.hero-label i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 15px var(--red);
}
.hero h1 {
  font-size: clamp(54px, 6.35vw, 96px);
  line-height: 0.91;
  margin-bottom: 34px;
}
.hero h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
}
.reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(45px);
  animation: fadeUp 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.r1 {
  animation-delay: 0.18s;
}
.r2 {
  animation-delay: 0.33s;
}
.r3 {
  animation-delay: 0.48s;
  color: #ff4f91;
}
.hero-line {
  animation: fadeUp 0.8s 0.7s both;
}
.hero-btn {
  position: relative;
  overflow: hidden;
  animation: buttonPulse 2.8s 1.5s infinite;
}
.hero-btn::after {
  content: "";
  position: absolute;
  inset: -30px;
  width: 30px;
  background: #fff8;
  transform: rotate(20deg);
  animation: shine 3.2s 1.6s infinite;
}
.float-card {
  position: absolute;
  z-index: 3;
  right: 4%;
  padding: 18px 21px;
  width: 190px;
  border: 1px solid #ffffff55;
  background: #1118;
  backdrop-filter: blur(18px);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px #0005;
  animation: float 4s ease-in-out infinite;
}
.float-card small {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #bbb;
}
.float-card strong {
  font-size: 21px;
  font-weight: 400;
  margin: 9px 0 5px;
}
.float-card span {
  font-size: 11px;
  color: #aaa;
}
.card-one {
  top: 31%;
  animation-delay: 0.3s;
}
.card-two {
  top: 51%;
  right: 12%;
  animation-delay: 1.1s;
}
.hero-tags {
  height: 40px;
  width: 58%;
  overflow: hidden;
  border: 1px solid #ffffff70;
  border-radius: 30px;
}
.ticker {
  display: flex;
  width: max-content;
  animation: ticker 18s linear infinite;
}
.hero-tags .ticker span {
  border: 0;
  min-width: max-content;
  padding: 10px 25px;
}
.hero-tags .ticker span::after {
  content: "•";
  color: var(--red);
  margin-left: 25px;
}
.down {
  animation: down 1.8s ease-in-out infinite;
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroZoom {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.15);
    opacity: 0.65;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes float {
  50% {
    transform: translateY(-14px);
  }
}
@keyframes ticker {
  to {
    transform: translateX(-48%);
  }
}
@keyframes down {
  50% {
    transform: translateY(7px);
  }
}
@keyframes shine {
  0%,
  55% {
    left: -50px;
  }
  100% {
    left: 130%;
  }
}
@keyframes buttonPulse {
  50% {
    box-shadow: 0 0 0 8px #ff4f9122;
  }
}
main{display:flex;flex-direction:column}.top{order:0}.product-hero{order:1}.fear-section{order:2}.eyes-block{order:3}.services{order:4}.system-v2{order:5}.packaging{order:6}.prices{order:7}.choice{order:8}.contact{order:9}footer{order:10}
.product-hero{background:#111;color:white;min-height:850px;display:grid;grid-template-columns:1.05fr .95fr;padding:125px 4% 88px;gap:45px;align-items:center}.product-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 40%,#ff4f9120 0%,transparent 35%),linear-gradient(135deg,#181818,#0c0c0c)}.product-copy{position:relative;z-index:4}.product-copy .hero-label{margin-bottom:38px}.product-hero h1{font-size:clamp(50px,5.55vw,84px);line-height:.94;letter-spacing:-.06em;margin:0 0 34px}.product-hero h1 em{font-family:Arial,sans-serif;font-style:normal;color:#ff4f91}.product-actions{display:flex;align-items:center;gap:35px;margin-top:34px}.product-actions>div{display:flex;flex-direction:column;padding-left:25px;border-left:1px solid #ffffff30}.product-actions small{font-size:9px;letter-spacing:.14em;color:#888}.product-actions strong{font-size:25px;font-weight:400;margin-top:5px}.product-list{display:flex;gap:8px;margin-top:45px}.product-list span{border:1px solid #ffffff35;border-radius:25px;padding:9px 14px;font-size:10px;color:#aaa}.product-stage{height:650px;position:relative;z-index:3;perspective:1000px}.hero-robot{position:absolute;z-index:4;right:-3%;bottom:-18px;width:min(100%,610px);height:680px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 30px 55px #000c);animation:robotFloat 6s ease-in-out infinite}.stage-orbit{position:absolute;width:530px;height:530px;border:1px solid #ff4f9135;border-radius:50%;right:-130px;top:30px;box-shadow:0 0 0 70px #ff4f9108;animation:spin 20s linear infinite}@keyframes robotFloat{50%{transform:translateY(-9px)}}.product-hero .hero-proof{z-index:7}
.market-hero {
  background: #111;
  min-height: 820px;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  padding: 125px 4% 85px;
  gap: 45px;
  align-items: center;
}
.market-hero::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border: 1px solid #ffffff16;
  border-radius: 50%;
  right: -170px;
  top: -130px;
  box-shadow:
    0 0 0 100px #ffffff05,
    0 0 0 220px #ffffff03;
}
.market-hero-copy {
  position: relative;
  z-index: 2;
  color: white;
}
.market-hero .hero-label {
  margin-bottom: 38px;
}
.market-hero h1 {
  font-size: clamp(50px, 5.55vw, 84px);
  line-height: 0.94;
  margin: 0 0 35px;
  letter-spacing: -0.06em;
}
.market-hero h1 em {
  color: #ff4f91;
  font-style: normal;
}
.hero-thesis {
  font-size: 18px;
  line-height: 1.52;
  color: #b5b5b5;
  max-width: 680px;
}
.market-hero-actions {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 34px;
}
.market-hero-actions > span {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}
.market-hero-visual {
  position: relative;
  z-index: 2;
  height: 610px;
}
.ozon-phone {
  position: absolute;
  right: 10%;
  top: 10px;
  width: 330px;
  height: 570px;
  border: 8px solid #050505;
  border-radius: 38px;
  overflow: hidden;
  background: #000;
  box-shadow:
    0 35px 90px #000,
    0 0 0 1px #ffffff20;
  transform: rotate(3deg);
  animation: phoneFloat 5s ease-in-out infinite;
}
.ozon-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}
.ozon-badge {
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 0;
  background: #1267f2;
  color: white;
  padding: 12px 18px;
  border-radius: 25px;
  font-size: 10px;
  letter-spacing: 0.1em;
  animation: fadeUp 0.7s 0.5s both;
}
.visual-price {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 155px;
  background: white;
  color: #151515;
  border-radius: 15px;
  padding: 20px;
  width: 190px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px #0008;
  animation: float 4s ease-in-out infinite;
}
.visual-price small,
.furniture-ghost small {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #888;
}
.visual-price strong {
  font-size: 31px;
  margin: 8px 0;
}
.visual-price span {
  font-size: 10px;
  color: #777;
}
.furniture-ghost {
  position: absolute;
  z-index: 4;
  left: 20px;
  bottom: 22px;
  width: 230px;
  padding: 20px;
  border: 1px solid #ffffff40;
  background: #151515cc;
  backdrop-filter: blur(14px);
  border-radius: 15px;
  color: white;
  display: grid;
}
.furniture-ghost strong {
  font-size: 25px;
  margin: 8px 0;
}
.furniture-ghost span {
  font-size: 11px;
  color: #ff4f91;
}
.furniture-ghost b {
  position: absolute;
  right: 16px;
  top: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #ffffff40;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: #777;
}
.hero-proof {
  position: absolute;
  z-index: 5;
  bottom: 20px;
  left: 4%;
  right: 4%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #aaa;
  border-top: 1px solid #ffffff30;
  padding-top: 18px;
  font-size: 10px;
  letter-spacing: 0.07em;
}
.market-hero .down {
  bottom: 17px;
}
@keyframes phoneFloat {
  50% {
    transform: rotate(1deg) translateY(-10px);
  }
}
.system-v2 {
  background: #eceae5;
  padding: 120px 0;
}
.system-title {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 70px;
}
.system-title > p {
  font-size: 17px;
  line-height: 1.6;
  color: #666;
}
.system-showcase {
  margin-top: 70px;
  display: grid;
  grid-template-columns: 0.75fr 1.55fr;
  gap: 1px;
  background: #aaa;
  border: 1px solid #aaa;
}
.system-core {
  background: #171717;
  color: white;
  padding: 42px;
  min-height: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.system-core small {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: #999;
}
.system-core h3 {
  font-size: 55px;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.05em;
  margin: 80px 0 20px;
  position: relative;
  z-index: 2;
}
.system-core p {
  color: #999;
  line-height: 1.5;
  max-width: 280px;
  position: relative;
  z-index: 2;
}
.system-core > span {
  margin-top: auto;
  color: #ff4f91;
  font-size: 10px;
  letter-spacing: 0.14em;
  position: relative;
  z-index: 2;
}
.core-pulse {
  position: absolute;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 1px solid #ff4f9155;
  right: -150px;
  bottom: -100px;
  box-shadow:
    0 0 0 55px #ff4f9112,
    0 0 0 110px #ff4f9108;
  animation: breathe 4s ease-in-out infinite;
}
.system-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.system-features article {
  background: #fff;
  padding: 27px;
  display: grid;
  grid-template-columns: 40px 1fr;
  border: 1px solid #e4e1d9;
  border-radius: 20px;
  min-height: 173px;
  transition: 0.25s;
}
.system-features article:hover {
  transform: translateY(-4px);
}
.system-features b {
  font-size: 10px;
  color: #999;
}
.system-features h3 {
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 12px;
}
.system-features p {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
  margin: 0;
}
.system-result {
  background: var(--red);
  color: white;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 0.5fr 2fr auto;
  align-items: center;
  gap: 25px;
}
.system-result span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.system-result strong {
  font-size: 22px;
  font-weight: 400;
}
.system-result a {
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 12px;
  border: 1px solid #ffffff80;
  border-radius: 28px;
  padding: 13px 18px;
}
.real-card {
  padding: 0;
  background: #050505;
}
.real-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
}
.business-pains {
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: left;
  margin: 12px 0 18px;
}
.business-pains li {
  font-size: 11px;
  padding: 8px 0;
  border-top: 1px solid #ccc;
  color: #666;
}
.business-pains li::before {
  content: "×";
  color: #ff4f91;
  margin-right: 8px;
  font-weight: 700;
}
.empty-business .business-pains + span {
  margin-top: 0;
}
.eyes-block {
  padding: 120px 0;
  background: #f4f2ed;
}
.eyes-head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  column-gap: 80px;
  align-items: end;
}
.eyes-head .kicker {
  grid-column: 1/3;
}
.eyes-head h2 {
  font-size: clamp(45px, 5vw, 75px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 0;
}
.eyes-head > p:last-child {
  font-size: 17px;
  line-height: 1.6;
  color: #666;
}
.market-compare {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  margin-top: 70px;
}
.market-compare > article {
  border: 1px solid #aaa;
  padding: 22px;
  min-height: 570px;
}
.compare-top {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #aaa;
  padding-bottom: 18px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.compare-top strong {
  font-weight: 400;
}
.cheap-product .compare-top strong {
  color: #1b9b62;
}
.expensive-product .compare-top strong {
  color: #ff4f91;
}
.versus {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #171717;
  color: white;
  display: grid;
  place-items: center;
  z-index: 2;
  font-size: 12px;
}
.market-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  margin-top: 22px;
}
.pen-visual {
  min-height: 455px;
  background: linear-gradient(145deg, #6b47ff, #a88cff);
  color: white;
  position: relative;
  overflow: hidden;
  padding: 24px;
}
.pen-visual > span {
  font-size: 9px;
  letter-spacing: 0.14em;
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 7px 10px;
}
.pen-visual b {
  position: absolute;
  left: 24px;
  bottom: 25px;
  font-size: 23px;
  line-height: 1.05;
  font-weight: 400;
}
.pen {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-24deg);
  width: 55px;
  height: 300px;
  border-radius: 25px;
  background: linear-gradient(90deg, #ddd, #fff 45%, #c7c7c7);
  color: #6544e8;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  letter-spacing: 0.2em;
  box-shadow: 18px 25px 40px #34248b66;
}
.market-info {
  padding: 15px 0;
}
.market-info small {
  font-size: 9px;
  color: #888;
  letter-spacing: 0.13em;
}
.market-info h3 {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
}
.stars {
  color: #ff9800;
  font-size: 13px;
}
.stars em {
  color: #777;
  font-size: 9px;
  font-style: normal;
}
.market-price {
  font-size: 27px;
  font-weight: 700;
  margin: 25px 0;
}
.market-price del {
  font-size: 12px;
  color: #999;
}
.market-info ul {
  padding: 0;
  list-style: none;
  font-size: 11px;
  line-height: 2;
  color: #555;
}
.market-info li::before {
  content: "✓";
  color: #1b9b62;
  margin-right: 8px;
}
.market-info button {
  margin-top: 15px;
  width: 100%;
  border: 0;
  background: #8c5cff;
  color: white;
  padding: 14px;
  border-radius: 8px;
}
.empty-business {
  margin-top: 22px;
  background: #e8e6e0;
  min-height: 475px;
  padding: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.empty-image {
  width: 100%;
  height: 205px;
  background: #d3d0c8;
  color: #aaa;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1.5;
}
.empty-business h3 {
  font-size: 25px;
  font-weight: 400;
  margin: 30px 0 10px;
}
.empty-business p {
  font-size: 13px;
  color: #777;
  line-height: 1.5;
}
.empty-lines {
  width: 70%;
  margin: 15px 0;
}
.empty-lines i {
  display: block;
  height: 1px;
  background: #ccc;
  margin: 10px;
}
.empty-business > span {
  font-size: 10px;
  color: #ff4f91;
  margin-top: auto;
}
.eyes-conclusion {
  background: #171717;
  color: white;
  margin-top: 25px;
  padding: 36px;
  display: grid;
  grid-template-columns: 0.55fr 1.5fr 1fr auto;
  align-items: center;
  gap: 35px;
}
.eyes-conclusion > span {
  color: #ff4f91;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.eyes-conclusion h3 {
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.eyes-conclusion p {
  font-size: 12px;
  line-height: 1.5;
  color: #999;
}
.eyes-conclusion a {
  color: white;
  background: var(--red);
  border-radius: 35px;
  padding: 16px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
}
.price-grid article.featured {
  background: #171717;
  color: white;
  transform: translateY(-16px);
  min-height: 352px;
  box-shadow: 0 20px 45px #0003;
}
.price-grid article.featured span {
  color: #aaa;
}
.price-grid article.featured span b {
  float: right;
  background: var(--red);
  color: white;
  padding: 5px 8px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.price-grid article p {
  font-size: 12px;
  line-height: 1.5;
  color: #777;
}
.price-grid article.featured p {
  color: #aaa;
}
.price-grid article.featured a {
  color: white;
  border-color: #555;
}
.price-grid article.featured a svg {
  background: var(--red);
  border-radius: 50%;
  padding: 3px;
}
.packaging {
  padding: 120px 0;
  background: #d7d5cf;
  overflow: hidden;
}
.delta-window .site-preview{height:305px;background:#111}.delta-window .site-preview img{width:100%;height:100%;object-fit:cover;object-position:top}.delta-phone img{width:100%;height:100%;object-fit:cover;object-position:top;filter:none}.delta-showcase{display:grid;grid-template-columns:1.6fr .62fr;gap:22px}.delta-showcase>article{background:#ebe9e3;border-radius:22px;padding:18px;box-shadow:0 30px 70px #5b554b22}.delta-desktop-card{grid-row:1/3}.delta-screen{background:#111;border:8px solid #161616;border-radius:14px;overflow:hidden;box-shadow:0 25px 50px #0003}.delta-screen img{display:block;width:100%;height:auto}.delta-mobile-screen{width:240px;height:500px;margin:auto;border:8px solid #151515;border-radius:30px;overflow:hidden;background:#111;box-shadow:0 25px 50px #0003}.delta-mobile-screen img{width:100%;height:100%;object-fit:cover;object-position:top}.delta-results{background:#171717;color:white;border-radius:22px;padding:28px}.delta-results>small{font-size:9px;letter-spacing:.15em;color:#ffbf2f}.delta-results h3{font-size:27px;font-weight:400;line-height:1.08;margin:18px 0 28px}.result-line{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff25;padding:14px 0;font-size:11px}.result-line span{color:#888}.result-line strong{font-weight:400}
.pack-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: end;
  margin-bottom: 65px;
}
.pack-head h2 {
  font-size: clamp(46px, 5vw, 76px);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
  margin: 0;
}
.pack-head h2 span {
  color: #777;
}
.pack-head > p {
  font-size: 17px;
  line-height: 1.55;
  max-width: 430px;
}

/* 2026 conversion pass */
.product-hero{padding-left:max(72px,7vw);padding-right:max(42px,4vw)}
.product-hero h1{font-size:clamp(46px,5.15vw,78px);line-height:.96;letter-spacing:-.055em}
.product-hero h1 .r3{white-space:nowrap}
.product-actions button,.fear-intro button{font:inherit;border:0;cursor:pointer}
.site-window{transform:none;animation:stageFloatStraight 6s ease-in-out infinite}
@keyframes stageFloatStraight{50%{transform:translateY(-9px)}}

.fear-section{background:#efede7;padding:105px 0;border-bottom:1px solid #cbc8bf}
.fear-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:75px;align-items:start}
.fear-intro{position:sticky;top:110px}
.fear-intro h2{font-size:clamp(42px,4.3vw,66px);font-weight:400;line-height:.98;letter-spacing:-.05em;margin:22px 0}
.fear-intro h2 span{color:#8b8881}
.fear-intro>p:last-of-type{max-width:440px;color:#69665f;font-size:15px;line-height:1.65}
.fear-intro button{margin-top:28px;background:none;border-bottom:1px solid #181818;padding:0 0 10px;display:flex;align-items:center;gap:30px}
.fear-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fear-cards article{background:#171717;color:white;min-height:280px;padding:30px;display:flex;flex-direction:column;border-radius:22px}
.fear-cards article:first-child{grid-column:1/3;background:linear-gradient(145deg,#ff4f91,#dc276d)}
.fear-cards small{font-size:9px;letter-spacing:.13em;color:#aaa}
.fear-cards article:first-child small{color:#ffd0cc}
.fear-cards h3{font-size:clamp(25px,2.2vw,34px);font-weight:400;line-height:1.05;margin:45px 0 20px;max-width:640px}
.fear-cards p{font-size:12px;line-height:1.55;color:#aaa;max-width:500px;margin-top:auto}
.fear-cards article:first-child p{color:#fff}

.bad-site{width:100%;height:220px;background:white;border:1px solid #bcbcbc;text-align:left;overflow:hidden;box-shadow:0 6px 12px #7772}
.bad-browser{height:25px;background:#e5e5e5;display:flex;align-items:center;gap:5px;padding:0 8px}
.bad-browser i{width:6px;height:6px;border-radius:50%;background:#aaa}.bad-browser span{font-size:7px;background:white;color:#888;margin-left:5px;padding:3px 45px}
.bad-nav{height:32px;padding:10px 12px;font:bold 8px Arial;color:#222}.bad-nav b{float:right;font:7px Arial;color:#888}
.bad-hero{height:135px;background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e8e8e8 10px,#e8e8e8 20px);padding:15px;position:relative}
.bad-hero>span{position:absolute;inset:0;display:grid;place-items:center;color:#c2c2c2;font-size:9px}.bad-hero h4{position:relative;margin:4px 0;font:18px Times New Roman;color:#333;max-width:150px}.bad-hero button{position:relative;margin-top:45px;background:#ffd400;border:0;padding:7px 18px;font-size:8px}.turbo-mark{height:28px;padding:8px 10px;background:#f3f3f3;color:#777;font-size:8px}

.delta-showcase{display:grid;grid-template-columns:1.6fr .62fr;align-items:start}
.delta-desktop-card{grid-row:1/3;position:relative;padding-bottom:32px!important}
.delta-desktop-card .delta-mobile-screen{position:absolute;z-index:3;right:-38px;bottom:-20px;width:205px;height:425px;margin:0;border-width:7px}
.phone-notch{position:absolute;z-index:2;top:7px;left:50%;translate:-50%;width:54px;height:13px;border-radius:9px;background:#111}
.delta-results{align-self:start;margin-top:0}

.concept-dialog{max-width:680px!important;background:#111!important;color:white!important;border:1px solid #333!important;border-radius:26px!important;padding:42px!important}
.concept-dialog>button{color:white}.concept-dialog>h2{font-size:13px!important;font-weight:400!important;letter-spacing:.12em;text-transform:uppercase;color:#888}
.quiz-progress{height:3px;border-radius:3px;background:#333;margin:15px 0 30px;overflow:hidden}.quiz-progress span{height:100%;display:block;background:#ff4f91;transition:width .3s}
.concept-quiz>small,.concept-form>small{font-size:9px;letter-spacing:.13em;color:#ff4f91}.concept-quiz h3,.concept-form h3{font-size:clamp(30px,4vw,48px);font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:16px 0 28px}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}.quiz-options button{background:#1d1d1d;color:white;border:1px solid #383838;border-radius:14px;padding:18px;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .25s ease,border-color .25s ease}.quiz-options button:hover{background:#ff4f9124;border-color:#ff4f91}
.concept-form{display:flex;flex-direction:column}.concept-form p{color:#999;line-height:1.5;margin:-10px 0 24px}.concept-form>input{background:#1a1a1a;color:white;border:1px solid #363636;border-radius:14px;padding:16px 18px;font-size:16px;outline:0;transition:border-color .2s ease,background .2s ease}.concept-form>input:focus{border-color:var(--pink);background:#1f1f1f}.concept-form label{font-size:11px;color:#999;margin:20px 0}.concept-form label input{margin-right:8px}.concept-form .red-btn{align-self:flex-start;border:0;border-radius:999px;cursor:pointer}

@media(max-width:900px){
 .product-hero{padding-left:20px;padding-right:20px}.product-hero h1{font-size:clamp(39px,11vw,54px)}.product-hero h1 .r3{white-space:normal}
 .fear-section{padding:75px 0}.fear-grid{grid-template-columns:1fr;gap:42px}.fear-intro{position:static}.fear-cards{grid-template-columns:1fr}.fear-cards article:first-child{grid-column:auto}.fear-cards article{min-height:235px}
 .delta-showcase{grid-template-columns:1fr}.delta-desktop-card{margin-right:20px;padding-bottom:70px!important}.delta-desktop-card .delta-mobile-screen{right:-18px;bottom:-35px;width:125px;height:265px}.delta-results{margin-top:22px}
 .concept-dialog{width:calc(100% - 22px)!important;padding:28px 20px!important;border-radius:22px!important}.quiz-options{grid-template-columns:1fr}
}
.brand-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: center;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  padding: 24px 0;
  margin-bottom: 30px;
}
.forma-logo {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.forma-logo span {
  color: #d47d50;
}
.brand-strip p {
  font-size: 13px;
  line-height: 1.4;
}
.brand-strip strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.palette {
  display: flex;
}
.palette i {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-left: -7px;
  border: 2px solid #d7d5cf;
}
.palette i:nth-child(1) {
  background: #302b27;
}
.palette i:nth-child(2) {
  background: #d47d50;
}
.palette i:nth-child(3) {
  background: #a7a08f;
}
.palette i:nth-child(4) {
  background: #f2eee6;
}
.devices {
  display: grid;
  grid-template-columns: 1.7fr 0.75fr;
  gap: 22px;
}
.devices article {
  background: #ebe9e3;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 30px 70px #5b554b22;
}
.mock-label {
  height: 30px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mock-label > span:last-child {
  margin-left: auto;
  color: #999;
}
.mock-label svg {
  width: 16px;
}
.browser {
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 35px #0004;
}
.browser-top {
  height: 34px;
  background: #e9e7e2;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}
.browser-top b {
  width: 7px;
  height: 7px;
  background: #aaa;
  border-radius: 50%;
}
.browser-top em {
  font-size: 9px;
  color: #888;
  margin: auto;
  font-style: normal;
  background: white;
  border-radius: 8px;
  padding: 4px 55px;
}
.web-hero {
  height: 430px;
  position: relative;
  color: white;
  overflow: hidden;
}
.web-hero > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
}
.web-nav {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  font-size: 10px;
}
.web-nav strong {
  font-size: 19px;
  letter-spacing: 0.1em;
}
.web-nav button,
.web-copy button {
  border: 0;
  background: #d47d50;
  color: white;
  padding: 11px 15px;
  border-radius: 3px;
}
.web-copy {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 35px;
}
.web-copy small,
.m-copy small {
  font-size: 8px;
  letter-spacing: 0.15em;
}
.web-copy h3 {
  font-size: 37px;
  line-height: 1;
  margin: 13px 0;
}
.web-copy p {
  font-size: 11px;
}
.web-copy button {
  margin-top: 10px;
}
.phone-frame {
  width: 235px;
  height: 510px;
  margin: auto;
  border: 8px solid #191919;
  border-radius: 32px;
  overflow: hidden;
  background: #2d2925;
  color: white;
  position: relative;
  box-shadow: 0 20px 40px #0004;
}
.notch {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: #191919;
  border-radius: 10px;
}
.m-nav {
  position: absolute;
  z-index: 2;
  top: 25px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
}
.phone-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
}
.m-copy {
  position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  bottom: 28px;
}
.m-copy h3 {
  font-size: 26px;
  line-height: 1;
  margin: 10px 0 20px;
}
.m-copy button {
  width: 100%;
  padding: 12px;
  border: 0;
  background: #d47d50;
  color: #fff;
}
.vk-shot,
.map-shot {
  min-height: 360px;
}
.social-card,
.map-card {
  background: white;
  border-radius: 13px;
  overflow: hidden;
  height: 310px;
}
.vk-cover {
  height: 150px;
  position: relative;
  overflow: hidden;
  color: white;
}
.vk-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.vk-cover > div {
  position: absolute;
  left: 22px;
  bottom: 22px;
}
.vk-cover small {
  font-size: 8px;
  letter-spacing: 0.14em;
}
.vk-cover strong {
  display: block;
  font-size: 33px;
  letter-spacing: 0.1em;
}
.vk-cover p {
  font-size: 10px;
  margin: 2px 0;
}
.social-profile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 22px;
}
.avatar {
  width: 50px;
  height: 50px;
  background: #302b27;
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.social-profile h4 {
  margin: 0 0 5px;
  font-size: 14px;
}
.social-profile p,
.social-profile span {
  font-size: 9px;
  margin: 2px 0;
  color: #777;
}
.social-profile span {
  color: #31a466;
}
.social-profile button {
  border: 0;
  background: #2787f5;
  color: white;
  padding: 10px 16px;
  border-radius: 7px;
}
.vk-icon {
  margin-left: 0 !important;
  background: #2787f5;
  color: white;
  border-radius: 5px;
  padding: 4px;
  font-weight: 800;
}
.map-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
}
.map-bg {
  position: relative;
  background-color: #eceae2;
  background-image:
    linear-gradient(
      31deg,
      transparent 48%,
      #fff 49%,
      #fff 53%,
      transparent 54%
    ),
    linear-gradient(
      -28deg,
      transparent 46%,
      #d9e2cf 47%,
      #d9e2cf 55%,
      transparent 56%
    );
}
.map-bg i {
  position: absolute;
  background: #ddd;
  width: 2px;
  height: 110%;
  transform: rotate(45deg);
}
.map-bg i:nth-child(1) {
  left: 25%;
}
.map-bg i:nth-child(2) {
  left: 65%;
  transform: rotate(-24deg);
}
.pin {
  position: absolute;
  left: 52%;
  top: 42%;
  width: 38px;
  height: 38px;
  background: #d47d50;
  color: white;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  font-weight: 800;
}
.pin::first-letter {
  transform: rotate(45deg);
}
.map-info {
  padding: 25px;
}
.map-info small {
  font-size: 8px;
  letter-spacing: 0.14em;
  color: #999;
}
.map-info h4 {
  font-size: 27px;
  margin: 9px 0;
}
.rating {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rating > span {
  display: flex;
}
.rating svg {
  width: 12px;
  fill: #ffb800;
  color: #ffb800;
}
.rating em {
  font-size: 9px;
  color: #999;
}
.map-info p {
  font-size: 11px;
  line-height: 1.5;
  color: #777;
}
.map-actions {
  display: flex;
  gap: 7px;
  margin-top: 18px;
}
.map-actions button {
  border: 0;
  background: #f1f1f1;
  padding: 10px 13px;
  border-radius: 7px;
}
.map-actions button:first-child {
  background: #32b768;
  color: white;
}
.pack-result {
  margin-top: 22px;
  background: #1a1917;
  color: white;
  border-radius: 22px;
  padding: 32px;
  display: grid;
  grid-template-columns: 0.5fr 1.6fr 1fr auto;
  align-items: center;
  gap: 30px;
}
.pack-result > span {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.pack-result h3 {
  font-size: 27px;
  font-weight: 400;
  margin: 0;
}
.pack-result p {
  font-size: 12px;
  color: #999;
  line-height: 1.5;
}
.pack-result a {
  display: flex;
  align-items: center;
  gap: 22px;
  color: white;
  text-decoration: none;
  background: #d47d50;
  border-radius: 30px;
  padding: 14px 19px;
  font-size: 12px;
}
.devices article {
  animation: packFloat 5s ease-in-out infinite;
}
.devices article:nth-child(2) {
  animation-delay: 0.7s;
}
.devices article:nth-child(3) {
  animation-delay: 1.2s;
}
.devices article:nth-child(4) {
  animation-delay: 1.8s;
}
@keyframes packFloat {
  50% {
    transform: translateY(-7px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 800px) {
  .eyes-block {
    padding: 75px 0;
  }
  .eyes-head {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .eyes-head .kicker {
    grid-column: auto;
  }
  .market-compare {
    grid-template-columns: 1fr;
    margin-top: 45px;
  }
  .market-compare > article {
    min-height: auto;
  }
  .versus {
    margin: -1px auto;
  }
  .market-card {
    grid-template-columns: 1fr;
  }
  .pen-visual {
    min-height: 370px;
  }
  .eyes-conclusion {
    grid-template-columns: 1fr;
  }
  .eyes-conclusion h3 {
    font-size: 23px;
  }
  .price-grid article.featured {
    transform: none;
  }
  .hero-glow {
    width: 380px;
    height: 380px;
  }
  .orbit {
    width: 370px;
    height: 370px;
    right: -230px;
  }
  .orbit-two {
    width: 270px;
    height: 270px;
    right: -160px;
  }
  .float-card {
    display: none;
  }
  .shell {
    width: calc(100% - 30px);
  }
  .top {
    height: 74px;
    padding: 0 16px;
  }
  .top nav,
  .phone {
    display: none;
  }
  .hamb {
    display: block;
    margin-left: auto;
    background: #ffffff1f;
    color: white;
    border: 0;
    border-radius: 50%;
    padding: 9px;
  }
  .mobile {
    display: flex;
    position: absolute;
    top: 70px;
    left: 15px;
    right: 15px;
    background: #202020;
    padding: 25px;
    flex-direction: column;
    gap: 22px;
  }
  .mobile a {
    color: white;
    text-decoration: none;
  }
  .hero {
    min-height: 650px;
  }
  .hero-content {
    left: 15px;
    right: 15px;
    bottom: 135px;
  }
  .hero h1 {
    font-size: 48px;
    line-height: 0.96;
  }
  .hero-line {
    align-items: flex-end;
  }
  .hero-line p {
    max-width: 120px;
    text-align: right;
  }
  .hero-tags {
    left: 15px;
    right: 15px;
    width: auto;
    overflow: hidden;
  }
  .hero-tags span {
    padding: 7px 14px;
  }
  .down {
    display: none;
  }
  .services,
  .system,
  .packaging,
  .prices,
  .choice,
  .contact {
    padding: 75px 0;
  }
  .service-body,
  .section-head,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .pack-head {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .brand-strip {
    grid-template-columns: 1fr auto;
  }
  .brand-strip p,
  .brand-strip strong {
    display: none;
  }
  .devices {
    grid-template-columns: 1fr;
  }
  .website-shot {
    overflow: hidden;
  }
  .web-hero {
    height: 310px;
  }
  .web-nav span {
    display: none;
  }
  .web-copy h3 {
    font-size: 28px;
  }
  .phone-frame {
    height: 480px;
  }
  .map-card {
    grid-template-columns: 1fr;
  }
  .map-bg {
    height: 100px;
  }
  .pack-result {
    grid-template-columns: 1fr;
  }
  .pack-result h3 {
    font-size: 23px;
  }
  .service-copy .red-btn {
    margin-top: 25px;
  }
  .cycle,
  .price-grid {
    grid-template-columns: 1fr;
  }
  .cycle article {
    border-right: 0;
    border-bottom: 1px solid #bbb;
    padding: 25px 0 !important;
    min-height: 190px;
  }
  .cycle h3 {
    margin-top: 35px;
  }
  .direct {
    grid-template-columns: 1fr;
  }
  .choice-row {
    grid-template-columns: 1fr auto;
  }
  .choice-row strong {
    grid-column: 1/3;
    margin-top: 30px;
    text-align: left;
  }
  .tabs {
    gap: 18px;
  }
  .tabs button {
    font-size: 15px;
  }
  .service-list > div {
    font-size: 15px;
  }
  .services-scroll{height:400vh}
  .services-sticky{min-height:100svh;height:100svh;align-items:flex-start;padding:68px 0 28px}
  .services-scroll .tabs{margin:24px 0 30px;gap:12px 18px}
  .services-scroll .service-body{gap:28px}
  .services-scroll .service-copy h3{font-size:30px;margin-bottom:15px}
  .services-scroll .service-copy p{font-size:15px}
  .services-scroll .service-list>div{padding:10px 0}
  .services-scroll .service-copy .red-btn{margin-top:18px}
  .services-heading .kicker{margin-bottom:18px}
  .scroll-count small{display:none}
  .robot-services{right:-80px!important;top:20px!important;width:240px!important;height:330px!important}
  .contact h2 {
    font-size: 55px;
  }
  .market-hero {
    display: block;
    min-height: 980px;
    padding: 105px 15px 85px;
  }
  .market-hero::before {
    width: 390px;
    height: 390px;
  }
  .market-hero h1 {
    font-size: 45px;
    line-height: 0.98;
  }
  .hero-thesis {
    font-size: 15px;
  }
  .market-hero-actions {
    display: block;
  }
  .market-hero-actions > span {
    display: block;
    margin-top: 20px;
  }
  .market-hero-visual {
    height: 470px;
    margin-top: 35px;
  }
  .ozon-phone {
    width: 230px;
    height: 420px;
    right: 6%;
    border-radius: 28px;
  }
  .ozon-badge {
    right: 0;
  }
  .visual-price {
    width: 145px;
    padding: 15px;
    top: 115px;
  }
  .visual-price strong {
    font-size: 24px;
  }
  .furniture-ghost {
    width: 170px;
    left: 0;
    bottom: 0;
    padding: 15px;
  }
  .furniture-ghost strong {
    font-size: 20px;
  }
  .furniture-ghost b {
    display: none;
  }
  .hero-proof {
    grid-template-columns: 1fr;
    gap: 5px;
    bottom: 14px;
  }
  .market-hero .down {
    display: none;
  }
  .product-hero{display:block;min-height:1050px;padding:105px 15px 85px}.product-hero h1{font-size:45px;line-height:.98}.product-actions{display:block}.product-actions>div{border-left:0;border-top:1px solid #ffffff30;padding:18px 0 0;margin-top:20px}.product-list{overflow:hidden}.product-list span{white-space:nowrap}.product-stage{height:480px;margin-top:25px}.hero-robot{right:-8%;bottom:-15px;width:112%;height:510px}.stage-orbit{width:350px;height:350px}.product-hero .hero-proof{bottom:14px}
  .system-title {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .system-showcase {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .system-core {
    min-height: 370px;
  }
  .system-core h3 {
    margin-top: 55px;
  }
  .system-features {
    grid-template-columns: 1fr;
  }
  .system-features article {
    min-height: 140px;
  }
  .system-result {
    grid-template-columns: 1fr;
  }
  .system-result strong {
    font-size: 20px;
  }
  .system-v2 {
    padding: 75px 0;
  }
  .real-card {
    min-height: 520px;
  }
  .delta-showcase{grid-template-columns:1fr}.delta-desktop-card{grid-row:auto}.delta-mobile-screen{height:470px}.delta-results h3{font-size:23px}.delta-window .site-preview{height:220px}.delta-phone{height:250px}.delta-phone img{object-position:top}
  footer .shell {
    grid-template-columns: 1fr auto;
  }
  footer p:nth-child(2) {
    display: none;
  }
}

/* Final cascade for the unified robot theme */
body { background: var(--ink); }
.top { position: fixed; border-bottom: 1px solid #ffffff16; background: linear-gradient(180deg,#0c0c0ce8,#0c0c0c90 70%,transparent); backdrop-filter: blur(14px); }
.product-hero { background: #0b0b0b; }
.product-hero::before { background: radial-gradient(circle at 78% 42%,#ff4f9128 0%,transparent 31%),radial-gradient(circle at 13% 86%,#ffffff0b 0%,transparent 28%),linear-gradient(135deg,#181818,#080808) !important; }
.product-hero h1 em,.brand span,.kicker { color: var(--pink); }
.red-btn,.fear-intro button { background: var(--pink); border-color: #ff8bb6; }
.fear-section,.system-v2,.packaging,.choice { background: var(--paper); color: #151515; }
.services,.eyes-block,.prices,.contact { background: var(--ink); color: #f7f7f4; }
.price-grid article { background: #171717; border-color: #333; color: #f7f7f4; }
.price-grid article.featured { background: linear-gradient(145deg,#ff4f91,#e92b73); border-color: #ff93bb; }
.direct { background: #ededeb; color: #151515; border: 0; }
.tabs button.active { color: var(--pink); border-color: var(--pink); }
.contact { min-height: 660px; display: flex; align-items: center; }
@media (max-width:900px){.contact{min-height:820px;align-items:flex-start}.top{height:74px}}

/* Story block: a cheap pen can look more convincing than expensive furniture */
.eyes-block{padding:120px 0 105px;overflow:hidden;background:#0b0b0b!important}
.eyes-story{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;min-height:720px;border-top:1px solid #ffffff24}
.eyes-copy{position:relative;z-index:3;padding:74px 0 60px;align-self:center}
.eyes-copy h2{max-width:650px;margin:22px 0 28px;font-size:clamp(50px,5.6vw,86px);font-weight:400;line-height:.94;letter-spacing:-.06em}
.eyes-copy h2 span{color:#797979}
.eyes-copy>p:last-of-type{max-width:530px;color:#aaa;font-size:17px;line-height:1.65}
.eyes-copy>a{display:inline-flex;align-items:center;gap:28px;margin-top:28px;padding-bottom:10px;border-bottom:1px solid #fff;color:#fff;text-decoration:none;font-size:13px}
.eyes-copy>a svg{width:18px;transition:transform .25s ease}
.eyes-copy>a:hover svg{transform:translateX(5px)}
.eyes-robot-wrap{position:relative;height:720px;display:flex;align-items:flex-end;justify-content:center}
.eyes-robot-wrap::before{content:"";position:absolute;width:590px;height:590px;left:50%;top:50%;translate:-50% -47%;border-radius:50%;background:radial-gradient(circle,#ff4f9129 0%,#ff4f9109 48%,transparent 70%);animation:penAura 4.8s ease-in-out infinite}
.eyes-robot-wrap::after{content:"";position:absolute;width:480px;height:480px;left:50%;top:50%;translate:-50% -44%;border:1px solid #ffffff13;border-radius:50%}
.eyes-robot{position:relative;z-index:2;width:min(100%,680px);height:690px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 35px 45px #0009);animation:penRobotFloat 5.5s ease-in-out infinite;transform-origin:50% 85%}
.robot-note{position:absolute;z-index:4;right:5%;top:13%;padding:9px 13px;border:1px solid #ffffff34;border-radius:30px;color:#bbb;font-size:9px;letter-spacing:.17em;animation:penNote 3.2s ease-in-out infinite}
@keyframes penRobotFloat{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-13px) rotate(.4deg)}}
@keyframes penAura{50%{scale:1.07;opacity:.72}}
@keyframes penNote{50%{transform:translateY(-7px)}}
.compare-rails{display:grid;gap:10px;margin-top:10px}
.compare-rail{display:grid;grid-template-columns:160px 1fr 1.15fr 190px;gap:34px;align-items:center;min-height:142px;padding:24px 30px;border:1px solid #ffffff1d;border-radius:18px;background:#121212;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.compare-rail:hover{transform:translateX(8px);border-color:#ffffff46;background:#171717}
.rail-good{border-left:3px solid #4fd59a}.rail-bad{border-left:3px solid var(--pink)}
.rail-number{font-size:clamp(28px,3vw,43px);letter-spacing:-.04em;white-space:nowrap}
.compare-rail small{color:#777;font-size:9px;letter-spacing:.14em}
.compare-rail h3{margin:8px 0 0;font-size:21px;font-weight:400;line-height:1.15}
.compare-rail ul{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0;list-style:none;color:#aaa;font-size:12px}
.compare-rail li::before{display:inline-block;width:18px;color:#4fd59a;content:"✓"}
.rail-bad li::before{color:#ff6a9f;content:"×"}
.compare-rail>strong{justify-self:end;max-width:170px;font-size:12px;font-weight:400;line-height:1.4;text-align:right;color:#4fd59a}
.rail-bad>strong{color:#ff6a9f}
.pen-rail{grid-template-columns:160px 1fr 1.15fr 190px;min-height:218px}
.pen-card{position:relative;align-self:stretch;overflow:hidden;min-height:170px;border:1px solid #ffffff22;border-radius:16px;background:#070707}
.pen-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .5s ease}
.pen-card:hover img{transform:scale(1.04)}
.pen-card span{position:absolute;left:9px;right:9px;bottom:9px;padding:8px;background:#0b0b0bd9;color:#fff;font-size:8px;line-height:1.35;text-transform:uppercase;letter-spacing:.08em;backdrop-filter:blur(5px)}
.business-gap{min-height:230px}
.business-gap ul{grid-template-columns:1fr 1fr;column-gap:20px}
.business-gap>strong{max-width:190px}
.eyes-conclusion{margin-top:42px;border-radius:22px;overflow:hidden;background:linear-gradient(110deg,#181818,#101010);border:1px solid #ffffff1c}

@media(max-width:900px){
 .eyes-block{padding:80px 0 70px}
 .eyes-story{grid-template-columns:1fr;min-height:auto}
 .eyes-copy{padding:45px 0 8px}
 .eyes-copy h2{font-size:clamp(43px,13vw,66px)}
 .eyes-copy>p:last-of-type{font-size:15px}
 .eyes-robot-wrap{height:540px;margin:0 -30px}
 .eyes-robot{height:530px;width:100%}
 .eyes-robot-wrap::before{width:430px;height:430px}
 .eyes-robot-wrap::after{width:350px;height:350px}
 .robot-note{right:8%;top:9%}
 .compare-rail{grid-template-columns:1fr 1fr;gap:20px;padding:24px 20px}
 .compare-rail ul{grid-column:1/3;border-top:1px solid #ffffff16;padding-top:16px}
 .compare-rail>strong{justify-self:start;text-align:left}
 .pen-rail{grid-template-columns:140px 1fr}
 .pen-card{grid-row:1/3;min-height:215px}
 .business-gap ul{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
 .eyes-robot-wrap{height:465px;margin-left:-48px;margin-right:-48px}
 .eyes-robot{height:465px}
 .robot-note{display:none}
 .compare-rail{grid-template-columns:1fr}
 .compare-rail ul{grid-column:auto}
 .compare-rail>strong{justify-self:start}
 .rail-number{font-size:34px}
 .pen-rail{grid-template-columns:108px 1fr;align-items:start}
 .pen-card{grid-row:1;min-height:155px}
 .pen-rail ul{grid-column:1/3}
 .pen-rail>strong{grid-column:1/3}
 .business-gap ul{grid-template-columns:1fr}
}

/* Layout guard: decorative robots must never push or cover content. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.services h2 {
  font-size: clamp(42px, 4.25vw, 64px);
}

.services .shell {
  isolation: isolate;
}

.robot-services {
  right: -135px;
  top: 78px;
  width: 300px;
  height: 440px;
  opacity: .9;
}

@media (max-width: 1200px) {
  .robot-services {
    right: -175px;
    width: 270px;
  }

  .robot-fear,
  .robot-lie {
    right: -150px;
  }

  .robot-prices {
    left: -165px;
  }
}

@media (max-width: 900px) {
  .services h2 {
    font-size: clamp(38px, 10vw, 52px);
  }

  .section-robot {
    z-index: 1;
    opacity: .18;
  }

  .robot-services {
    top: 88px;
    right: -115px;
    width: 210px;
    height: 310px;
  }

  .services .shell,
  .fear-grid,
  .prices .shell,
  .packaging .shell {
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 560px) {
  .robot-services {
    top: 92px;
    right: -105px;
    width: 185px;
    height: 270px;
    opacity: .14;
  }

  .robot-fear,
  .robot-lie,
  .robot-prices {
    opacity: .12;
  }
}

/* September layout polish */
.hero-title-balanced{width:min(100%,860px)}
.hero-title-balanced .reveal{display:block;width:100%;white-space:nowrap;word-spacing:normal;transform-origin:left center}
.hero-title-balanced .r1{font-size:.91em;letter-spacing:-.045em}
.hero-title-balanced .r2{font-family:Arial,sans-serif;font-size:.94em;letter-spacing:-.052em;color:var(--pink)}
.hero-title-balanced .r3{font-size:1.08em;letter-spacing:-.025em;color:#fff}
.product-stage{z-index:6}
.hero-robot{z-index:7!important;display:block!important;opacity:1!important;visibility:visible!important;right:0!important;filter:brightness(1.1) contrast(1.07) drop-shadow(0 32px 55px #000c)!important}
.stage-orbit{z-index:1}
.services-sticky>.shell{position:relative;z-index:2;width:min(94%,1500px);margin-inline:auto}
.system-features article{transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease}
.system-features article:first-child{background:#fff;color:#151515;box-shadow:inset 4px 0 0 var(--pink)}
.system-features article:first-child b{color:var(--pink)}
/* Frosted-glass hover — only on devices that actually hover, so a tap
   on mobile never leaves a card stuck looking "highlighted". */
@media (hover: hover) and (pointer: fine) {
  .system-features article:hover{
    background: linear-gradient(135deg, #ffffffe0, #ff4f9124);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-color: #ff4f9155;
    border-radius: 24px;
    transform: translateY(-6px);
    box-shadow: 0 18px 38px #00000014;
  }
  .system-features article:hover b{ color: var(--pink); }
}

@media(max-width:900px){
  .hero-title-balanced{width:100%}
  .hero-title-balanced .reveal{white-space:nowrap}
  .hero-title-balanced .r1,.hero-title-balanced .r2,.hero-title-balanced .r3{font-size:1em;letter-spacing:-.045em}
  .hero-title-balanced .r3{letter-spacing:-.025em}
  .hero-robot{right:-3%!important}
  .services-sticky>.shell{width:calc(100% - 30px)}
}

/* Requested section order: the client-acquisition system follows the hero. */
main{display:flex;flex-direction:column}
.top{order:0}.product-hero{order:1}.system-v2{order:2}.fear-section{order:3}.eyes-block{order:4}.services{order:5}.packaging{order:6}.portfolio{order:7}.prices{order:8}.choice{order:9}.contact{order:10}footer{order:11}

/* Portfolio system: repeatable result-led case cards. */
.portfolio{padding:120px 0;background:#0b0b0b;color:#f7f7f4;overflow:hidden}
.portfolio-head{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:50px;margin-bottom:62px}
.portfolio-head h2{font-size:clamp(46px,5vw,76px);font-weight:400;letter-spacing:-.055em;line-height:.96;margin:18px 0 0}
.portfolio-head h2 span{color:#777}
.case-nav>p{color:#aaa;font-size:16px;line-height:1.6;max-width:420px;margin:0 0 22px}
.case-nav>div{display:flex;align-items:center;gap:14px}.case-nav button{width:46px;height:46px;border-radius:50%;border:1px solid #444;background:#171717;color:#fff;display:grid;place-items:center;cursor:pointer;transition:.25s}.case-nav button:hover:not(:disabled){background:var(--pink);border-color:var(--pink)}.case-nav button:disabled{opacity:.35;cursor:default}.case-nav button svg{width:18px}.case-nav span{font-size:12px;color:#888;letter-spacing:.08em}
.case-card{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr);gap:14px}
.case-browser{background:#181818;border:1px solid #303030;padding:12px;border-radius:24px;overflow:hidden;box-shadow:0 30px 80px #000;display:flex;flex-direction:column}
.case-browser-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 8px}
.case-browser-bar>span{width:8px;height:8px;border-radius:50%;background:#555}
.case-browser-bar>span:first-child{background:var(--pink)}
.case-browser-bar small{margin-left:12px;color:#777;font-size:11px;letter-spacing:.04em}
.case-screen{display:flex;align-items:center;width:100%;flex:1;min-height:0;background:#fff;border-radius:14px;overflow:hidden}
.case-screen img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.case-copy{position:relative;background:linear-gradient(145deg,#ff4f91,#e62870);color:#fff;border-radius:24px;padding:32px;min-height:520px;display:flex;flex-direction:column}
.case-index,.case-type{font-size:10px;letter-spacing:.14em}
.case-index{position:absolute;right:30px;top:30px;color:#ffd4e4}
.case-type{margin:0;color:#ffd4e4}
.case-copy h3{font-size:clamp(44px,4.5vw,70px);font-weight:400;letter-spacing:-.055em;line-height:.88;margin:34px 0 auto;display:flex;flex-direction:column}
.case-metric{display:flex;align-items:end;gap:16px;border-top:1px solid #ffffff45;padding-top:22px}
.case-metric strong{font-size:clamp(70px,7vw,112px);font-weight:500;line-height:.72;letter-spacing:-.08em}
.case-metric p{font-size:13px;line-height:1.25;margin:0}
.case-work{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #ffffff45;margin-top:24px;padding-top:18px}
.case-work span{grid-column:1/3;color:#ffd4e4;font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.case-work p{margin:0;font-size:13px}
.case-open{margin-top:14px;min-height:82px;padding:0 28px;border:1px solid #333;border-radius:18px;color:#fff;text-decoration:none;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px;transition:.25s}.case-open span{color:#888;font-size:12px;text-transform:uppercase;letter-spacing:.1em}.case-open strong{font-size:16px;font-weight:400}.case-open svg{width:22px}.case-open:hover{border-color:var(--pink);background:#151515}.case-open:hover svg{color:var(--pink)}

@media(max-width:900px){
 .portfolio{padding:78px 0}.portfolio-head{grid-template-columns:1fr;gap:20px;margin-bottom:40px}.portfolio-head h2{font-size:clamp(39px,11vw,55px)}
 .case-card{grid-template-columns:1fr}.case-browser{border-radius:18px;padding:8px}.case-browser-bar{height:30px}.case-screen{aspect-ratio:2.692/1;flex:none}
 .case-copy{min-height:470px;border-radius:18px;padding:25px}.case-copy h3{font-size:55px}.case-index{right:24px;top:24px}
 .case-open{grid-template-columns:1fr auto;padding:18px 20px}.case-open strong{display:none}
}

/* Decorative robots stay in their visual lanes and never sit above copy. */
.fear-section,.packaging,.prices,.contact{overflow:hidden}
.fear-section .shell,.packaging .shell,.prices .shell,.contact .shell{position:relative;z-index:3}
.robot-fear,.robot-lie,.robot-prices,.contact-robot{z-index:1!important;pointer-events:none}
.robot-fear{right:-105px!important;transform:scale(.82);transform-origin:right center}
.robot-lie{right:-90px!important;transform:scale(.82);transform-origin:right center}
.robot-prices{left:-110px!important;transform:scale(.82);transform-origin:left center}
.contact-robot{right:-95px!important;transform:scale(.82);transform-origin:right bottom}

@media(max-width:900px){
  .hero-title-balanced{font-size:clamp(35px,9.6vw,45px)!important}
  .robot-fear,.robot-lie,.robot-prices,.contact-robot{display:none!important}
}

@media(max-width:420px){
  .hero-title-balanced{font-size:clamp(31px,9.2vw,39px)!important}
}

/* Fix: on narrow phones the hero title lines (forced nowrap for the
   desktop "balanced" effect) overflow past the viewport edge and get
   clipped. Let them wrap on their own line instead of cutting off. */
@media (max-width: 480px) {
  .hero-title-balanced .reveal {
    white-space: normal;
  }
}

/* Pricing cards: clearer hierarchy, visible actions and restrained motion. */
.prices{background:#0d0d0d;color:#f7f7f4}
.prices .section-head h2 span{color:var(--pink)}
.prices .section-head>p{color:#aaa;font-size:16px}
.price-grid{gap:14px;background:transparent;border:0}
.price-grid article,.price-grid article.featured{
  position:relative;
  min-height:390px;
  padding:30px;
  border:1px solid #353535;
  border-radius:24px;
  background:linear-gradient(160deg,#1b1b1b,#121212);
  color:#f7f7f4;
  overflow:hidden;
  transform:none;
  box-shadow:none;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.price-grid article::before{content:"";position:absolute;width:190px;height:190px;right:-110px;top:-120px;border-radius:50%;background:var(--pink);opacity:0;filter:blur(8px);transition:opacity .35s ease,transform .5s ease}
.price-grid article:hover{transform:translateY(-10px);border-color:#777;box-shadow:0 24px 55px #0007}
.price-grid article:hover::before{opacity:.12;transform:scale(1.25)}
.price-grid article.featured{background:linear-gradient(145deg,#ff4f91,#dc276d);border-color:#ff91ba;box-shadow:0 24px 65px #ff4f9128}
.price-grid article.featured::before{background:#fff;opacity:.1}
.price-grid article>span{display:flex;align-items:center;justify-content:space-between;color:#aaa}
.price-grid article.featured>span{color:#fff}
.price-grid article>span b{padding:8px 10px;border-radius:999px;background:#ffffff18;color:#fff;font-size:9px;letter-spacing:.08em}
.price-grid h3{margin:58px 0 12px;font-size:clamp(25px,2vw,32px);line-height:1.05}
.price-grid article p{color:#929292!important;font-size:14px;line-height:1.5;min-height:63px}
.price-grid article.featured p{color:#ffe1ec!important}
.price-grid strong{font-size:clamp(25px,2.1vw,34px)}
.price-grid button,.direct button{
  width:100%;margin-top:24px;padding:17px 0 0;border:0;border-top:1px solid #ffffff35;background:transparent;color:#fff;
  display:flex;align-items:center;justify-content:space-between;font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:left;
}
.price-grid button svg,.direct button svg{width:34px;height:34px;padding:8px;border-radius:50%;background:#ffffff12;transition:transform .3s ease,background .3s ease}
.price-grid button:hover svg,.price-grid button:focus-visible svg,.direct button:hover svg,.direct button:focus-visible svg{transform:translateX(5px);background:#ffffff25}
.price-grid button:focus-visible,.direct button:focus-visible{outline:2px solid #fff;outline-offset:5px;border-radius:4px}
.direct{grid-template-columns:1.25fr 1fr .65fr .7fr;border-radius:24px;padding:34px 38px;background:#f3f2ef;color:#151515}
.direct p{color:#e94a87;font-size:15px;font-weight:600}
.direct button{color:#151515;margin:0;padding:14px 0 0;border-color:#15151535}
.direct button svg{background:#151515;color:#fff}

@supports (animation-timeline:view()){
  .price-grid article{animation:priceCardIn .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--card-index) * 80ms);animation-timeline:view();animation-range:entry 8% cover 32%}
  .direct{animation:priceCardIn .75s cubic-bezier(.2,.8,.2,1) both;animation-timeline:view();animation-range:entry 8% cover 27%}
}
@keyframes priceCardIn{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:1050px){.price-grid{grid-template-columns:repeat(2,1fr)}.direct{grid-template-columns:1fr 1fr}.direct button{align-self:end}}
@media(max-width:620px){.prices .section-head{grid-template-columns:1fr;gap:20px;margin-bottom:42px}.price-grid{grid-template-columns:1fr}.price-grid article,.price-grid article.featured{min-height:350px;padding:25px}.direct{grid-template-columns:1fr;padding:27px}.direct button{margin-top:8px}}

/* ===================================================================
   Dialog / modal — replaces Radix UI Dialog primitives (static build)
   =================================================================== */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.dialog-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.dialog-content {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 51;
  width: calc(100% - 2rem);
  max-width: 32rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  background: #fff;
  border-radius: .5rem;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
}
.dialog-content.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.dialog-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .7;
  cursor: pointer;
  border-radius: 50%;
  transition: opacity .2s ease, background .2s ease;
}
.dialog-close:hover { opacity: 1; background: #ffffff1a; }
.dialog-close svg { width: 18px; height: 18px; }

body.dialog-locked { overflow: hidden; }

[hidden] { display: none !important; }

/* Hero secondary CTA — subscription offer, deliberately lower-emphasis
   than the primary red button, but still clearly clickable (frosted
   pill, same treatment as the header nav links) */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 13px 22px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #ffffff14;
  backdrop-filter: blur(15px);
  color: #f7f7f4;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.ghost-btn:hover,
.ghost-btn:focus-visible {
  border-color: var(--pink);
  background: #ff4f911f;
  color: #fff;
  transform: translateY(-2px);
}
.ghost-btn:active {
  transform: translateY(0);
}
.ghost-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Concept form: submit status + thank-you state (send.php integration) */
.concept-form .form-note {
  margin: -8px 0 4px;
  font-size: 12px;
  color: #7fd88f;
}
.concept-form .form-note.form-note--error {
  color: #ff8b8b;
}
.concept-form button[disabled] {
  opacity: .6;
  cursor: default;
}
.concept-thanks small {
  font-size: 9px;
  letter-spacing: .13em;
  color: #7fd88f;
}
.concept-thanks h3 {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 16px 0 12px;
}
.concept-thanks p {
  color: #999;
  line-height: 1.5;
}