:root {
  --bg: #170019;
  --bg-deep: #0f0012;
  --bg-card: #29002e;
  --pink: #ff087d;
  --pink-soft: #ff91b4;
  --text: #fff0f6;
  --muted: #bca8b7;
  --border: rgba(255, 38, 143, .24);
  --content: 1100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg-deep); font-family: "Inter", Arial, sans-serif; letter-spacing: 0; padding-bottom: 72px; }
button, a { font: inherit; }
button { cursor: pointer; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.section-band { padding-left: 20px; padding-right: 20px; }
h1, h2, h3, p { margin-top: 0; }

.hero { min-height: 646px; display: grid; place-items: center; text-align: center; background: linear-gradient(130deg, #180018 0%, #24002b 48%, #2a0033 100%); }
.hero__content { width: min(760px, calc(100% - 36px)); transform: translateY(-3px); }
.hero h1 { margin-bottom: 25px; color: #ffd1e0; font-size: 42px; line-height: 1.22; font-weight: 800; }
.hero__lead { margin-bottom: 25px; color: #dc789c; font-size: 19px; }
.hero__copy { max-width: 700px; margin: 0 auto 38px; color: #d1c2ce; font-size: 14px; line-height: 1.7; }
.whatsapp-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 324px; max-width: 100%; height: 59px; padding: 0 24px; border: 0; border-radius: 30px; color: #fff; background: linear-gradient(90deg, #d60065, #df2b79); box-shadow: 0 10px 28px rgba(255, 0, 118, .4), 0 0 18px rgba(255, 0, 128, .24); font-size: 17px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease; }
.whatsapp-button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 13px 34px rgba(255, 0, 118, .56), 0 0 25px rgba(255, 0, 128, .35); }
.whatsapp-button svg { width: 20px; height: 20px; fill: currentColor; }

.stats { min-height: 278px; display: grid; place-items: center; background: #100012; }
.stats__grid { width: min(1000px, calc(100% - 40px)); display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stats__grid div { display: grid; gap: 22px; }
.stats strong { color: var(--pink); font-size: 39px; line-height: 1; font-weight: 800; }
.stats span { color: #c2afbe; font-size: 14px; }

.profiles { min-height: 1100px; padding-top: 86px; padding-bottom: 118px; background: #29002f; }
.section-heading { max-width: 900px; margin: 0 auto 59px; text-align: center; }
.section-heading h2, .features > h2 { margin-bottom: 28px; color: var(--pink-soft); font-size: 32px; line-height: 1.2; font-weight: 800; text-align: center; }
.section-heading h2 span { color: var(--pink); }
.section-heading p { margin-bottom: 12px; color: #c7b7c5; font-size: 14px; line-height: 1.45; }
.profiles__grid { width: min(800px, 100%); margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 28px; }
.profile-card { position: relative; overflow: hidden; aspect-ratio: 4 / 5.2; border: 1px solid rgba(255, 95, 161, .5); border-radius: 11px; background: #3b163e; box-shadow: 0 0 0 1px rgba(255,255,255,.03); transition: transform .25s ease, box-shadow .25s ease; }
.profile-card:hover { z-index: 1; transform: translateY(-4px) scale(1.01); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.profile-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.online { position: absolute; top: 12px; right: 11px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 10px; border-radius: 15px; color: #03140a; background: #00ef72; box-shadow: 0 0 16px rgba(0, 239, 114, .65); font-size: 9px; line-height: 1; font-weight: 800; text-transform: uppercase; }
.online i { width: 7px; height: 7px; border-radius: 50%; background: #001b0c; }

.features { min-height: 1375px; padding-top: 96px; padding-bottom: 116px; background: #160018; }
.features > h2 { margin-bottom: 72px; }
.features__list { width: min(945px, 100%); margin: auto; display: grid; gap: 50px; }
.feature-card { min-height: 157px; display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 25px; padding: 28px 31px; border: 1px solid var(--border); border-radius: 17px; background: rgba(48, 0, 54, .57); }
.feature-card__icon { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #d600b3, #fa007e); box-shadow: 0 0 20px rgba(244, 0, 142, .55); }
.feature-card__icon svg { width: 31px; height: 31px; fill: currentColor; }
.feature-card h3 { margin-bottom: 14px; color: var(--pink-soft); font-size: 20px; }
.feature-card p { margin: 0; color: #c8b8c5; font-size: 13px; line-height: 1.65; }

.cta { min-height: 360px; display: grid; place-items: center; padding: 55px 20px; text-align: center; background: linear-gradient(105deg, #56004b, #43004c 60%, #31003e); }
.cta > div { min-width: 0; width: min(760px, 100%); }
.cta h2 { margin-bottom: 29px; font-size: 37px; }
.cta p { max-width: 720px; margin: 0 auto 31px; color: #d4c3d0; font-size: 16px; line-height: 1.55; }
.cta small { display: block; margin-top: 18px; color: #c7a9bc; font-size: 10px; }
.brand-strip { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 max(20px, calc((100% - 1100px) / 2)); color: var(--pink); background: #100012; }
.brand-strip span { font-size: 22px; }
.brand-strip button { width: 115px; height: 38px; border: 0; border-radius: 20px; color: #fff; background: linear-gradient(90deg, #d60065, #df2b79); box-shadow: 0 0 17px rgba(255, 0, 118, .45); font-size: 12px; font-weight: 700; }

.steps { min-height: 660px; padding-top: 65px; padding-bottom: 94px; background: #110013; }
.steps .section-heading { margin-bottom: 65px; }
.steps__grid { width: min(1040px, 100%); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step-card { position: relative; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 54px 31px 35px; border: 2px solid rgba(255, 86, 154, .32); border-radius: 16px; background: #270029; text-align: center; }
.step-card__number { position: absolute; top: -25px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #d600b3, #ff0079); box-shadow: 0 0 20px rgba(255, 0, 132, .62); font-size: 18px; font-weight: 800; }
.step-card > svg { width: 54px; height: 54px; margin-bottom: 37px; color: var(--pink-soft); fill: currentColor; }
.step-card h3 { margin-bottom: 24px; color: var(--pink-soft); font-size: 20px; }
.step-card p { margin: 0; color: #d0becb; font-size: 13px; line-height: 1.65; }

footer { min-height: 205px; display: grid; align-content: center; gap: 22px; padding: 35px 20px; color: #aa93a6; background: #0d000f; text-align: center; font-size: 11px; }
footer nav { display: flex; justify-content: center; gap: 35px; }
footer a { color: #d779a0; text-decoration: none; }
footer p { margin: 0; }
.sticky-cta { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; padding: 10px 15px; background: rgba(18, 0, 21, .9); backdrop-filter: blur(8px); }
.sticky-cta .whatsapp-button { width: 470px; height: 54px; border-radius: 0; }

@media (max-width: 768px) {
  body { padding-bottom: 76px; }
  .hero { min-height: 520px; }
  .hero h1 { font-size: 31px; }
  .hero__lead { font-size: 16px; }
  .hero__copy { max-width: 550px; font-size: 12px; }
  .stats { min-height: 280px; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 46px 20px; }
  .stats strong { font-size: 31px; }
  .profiles { min-height: auto; padding-top: 70px; padding-bottom: 80px; }
  .section-heading { margin-bottom: 42px; }
  .section-heading h2, .features > h2 { font-size: 26px; }
  .profiles__grid { max-width: 570px; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .features { min-height: auto; padding-top: 75px; padding-bottom: 80px; }
  .features > h2 { margin-bottom: 48px; }
  .features__list { max-width: 620px; gap: 20px; }
  .feature-card { min-height: 140px; padding: 24px; }
  .cta h2 { font-size: 30px; }
  .steps { min-height: auto; }
  .steps__grid { max-width: 520px; grid-template-columns: 1fr; gap: 58px; }
  .step-card { min-height: 270px; }
}

@media (max-width: 430px) {
  .section-band { padding-left: 16px; padding-right: 16px; }
  .hero { min-height: 500px; }
  .hero__content { width: calc(100% - 32px); }
  .hero h1 { margin-bottom: 22px; font-size: 28px; line-height: 1.25; }
  .hero__lead { margin-bottom: 20px; font-size: 14px; }
  .hero__copy { margin-bottom: 30px; font-size: 11px; line-height: 1.65; }
  .whatsapp-button { width: 250px; height: 50px; font-size: 14px; }
  .stats__grid { width: calc(100% - 32px); }
  .stats__grid div { gap: 13px; }
  .stats strong { font-size: 28px; }
  .stats span { font-size: 11px; }
  .section-heading h2, .features > h2 { font-size: 24px; }
  .section-heading p { font-size: 12px; }
  .profiles { padding-top: 60px; padding-bottom: 68px; }
  .profiles__grid { gap: 14px; }
  .online { top: 8px; right: 7px; padding: 6px 8px; font-size: 8px; }
  .feature-card { grid-template-columns: 48px 1fr; gap: 16px; min-height: 150px; padding: 20px 17px; border-radius: 12px; }
  .feature-card__icon { width: 48px; height: 48px; border-radius: 10px; }
  .feature-card__icon svg { width: 24px; height: 24px; }
  .feature-card h3 { margin-bottom: 9px; font-size: 16px; }
  .feature-card p { font-size: 11px; line-height: 1.5; }
  .cta { min-height: 320px; }
  .cta h2 { font-size: 27px; }
  .cta p { font-size: 13px; }
  .brand-strip { height: 68px; }
  .brand-strip span { font-size: 17px; }
  .brand-strip button { width: 88px; height: 34px; }
  .step-card { min-height: 260px; }
  .sticky-cta .whatsapp-button { width: calc(100vw - 30px); height: 52px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}