* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--paper);
  background:
    radial-gradient(circle at 20% 0%, rgba(212, 32, 107, 0.08), transparent 30%),
    #020203;
  font-family: "Manrope", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

.page-shell {
  min-height: 100vh;
  padding: 16px;
}

.page-frame {
  position: relative;
  isolation: isolate;
  width: min(100%, 1740px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 32px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.015), transparent 30%),
    linear-gradient(180deg, #09070a 0%, #050405 72%, #070507 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 32px 100px rgba(0, 0, 0, 0.48);
}

.page-content {
  padding: 0 44px 44px;
}

.page-noise {
  position: absolute;
  inset: 0;
  z-index: -5;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 0.5px, transparent 0.7px),
    radial-gradient(circle at 70% 60%, #fff 0 0.45px, transparent 0.7px);
  background-size: 8px 8px, 11px 11px;
}

.page-glow {
  position: absolute;
  z-index: -4;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
}

.page-glow--left {
  top: 12%;
  left: -14%;
  width: 450px;
  height: 450px;
  background: rgba(212, 32, 107, 0.12);
}

.page-glow--right {
  top: 24%;
  right: -10%;
  width: 520px;
  height: 520px;
  background: rgba(212, 112, 139, 0.09);
}

.section-eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--pink-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
  margin-top: 20px;
  padding: 62px;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 201, 0.16);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 30%),
    linear-gradient(145deg, #170812, #0b070c 65%, #200912);
}

.cta-band::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -120px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: rgba(212, 32, 107, 0.17);
  filter: blur(100px);
}

.cta-band__copy,
.cta-band__action {
  position: relative;
  z-index: 2;
}

.cta-band h2 {
  max-width: 850px;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(38px, 4.7vw, 66px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.cta-band h2 span {
  color: var(--pink-soft);
}

.cta-band p {
  max-width: 680px;
  margin: 22px 0 0;
  color: #a79da3;
  font-size: 14px;
  line-height: 1.75;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  color: #250811;
  background: linear-gradient(135deg, #ffd3e0, #ffb0c9 54%, #d4708b);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 18px 44px rgba(212, 32, 107, 0.24);
  transition:
    transform 220ms ease,
    background 220ms ease,
    color 220ms ease,
    box-shadow 220ms ease;
}

.cta-button:hover {
  transform: translateY(-5px) scale(1.025);
  color: #fff;
  background: var(--pink-main);
  box-shadow:
    0 26px 58px rgba(212, 32, 107, 0.4),
    0 0 0 6px rgba(255, 176, 201, 0.07);
}

.cta-button span {
  transition: transform 220ms ease;
}

.cta-button:hover span {
  transform: translate(4px, -4px);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 900px) {
  .page-content {
    padding-inline: 28px;
  }

  .cta-band {
    grid-template-columns: 1fr;
    padding: 48px 36px;
  }

  .cta-band__action {
    justify-self: start;
  }
}

@media (max-width: 720px) {
  .page-shell {
    padding: 7px;
  }

  .page-frame {
    border-radius: 23px;
  }

  .page-content {
    padding: 0 17px 28px;
  }

  .cta-band {
    margin-top: 7px;
    padding: 40px 24px;
    border-radius: 22px;
  }

  .cta-button {
    width: 100%;
    justify-content: center;
  }
}

.digital-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(560px,1.1fr); align-items:center; gap:clamp(60px,7vw,120px); min-height:690px; padding:62px 12px 54px; }
.digital-hero__copy{padding-left:clamp(0px,2vw,28px)}
.digital-hero h1{max-width:810px;margin:0;padding:.03em 0 .16em;overflow:visible;font-family:"Outfit",sans-serif;font-size:clamp(59px,6vw,103px);font-weight:500;line-height:1.01;letter-spacing:-.058em}.digital-hero h1 span{display:block;margin-top:2px;padding-bottom:.07em;color:transparent;background:linear-gradient(92deg,#fff 0%,#ffd2e0 42%,#d4708b 100%);-webkit-background-clip:text;background-clip:text}.digital-hero__lead{max-width:630px;margin:30px 0 0;color:#aaa0a6;font-size:15px;line-height:1.85}.digital-hero__link{display:inline-flex;align-items:center;gap:14px;margin-top:32px;padding-bottom:7px;border-bottom:1px solid rgba(255,176,201,.34);color:var(--pink-soft);font-size:12px;font-weight:800;transition:gap .2s ease,border-color .2s ease}.digital-hero__link:hover{gap:22px;border-color:var(--pink-soft)}
.digital-map{position:relative;min-height:540px;overflow:hidden;border:1px solid rgba(255,176,201,.22);border-radius:30px;background:radial-gradient(circle at 55% 48%,rgba(212,32,107,.14),transparent 39%),linear-gradient(145deg,rgba(255,255,255,.05),transparent 25%),rgba(14,8,13,.86);box-shadow:0 35px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)}.digital-map::before{content:"";position:absolute;inset:0;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px}.digital-map__header{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.07);color:#81767d;font-size:8px;font-weight:800;letter-spacing:.15em}.digital-map__line{position:absolute;left:50%;top:100px;bottom:78px;width:1px;background:rgba(255,176,201,.17)}.digital-map__line span{display:block;width:3px;height:94px;margin-left:-1px;border-radius:999px;background:linear-gradient(180deg,transparent,var(--pink-soft),transparent);box-shadow:0 0 20px rgba(212,32,107,.7);animation:mapScan 5.5s ease-in-out infinite}.digital-map__item{position:absolute;z-index:6;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:4px 13px;width:245px;padding:17px;border:1px solid rgba(255,176,201,.17);border-radius:17px;background:rgba(10,7,10,.82);backdrop-filter:blur(18px);box-shadow:0 20px 48px rgba(0,0,0,.34);transition:transform .25s ease,border-color .25s ease,background .25s ease}.digital-map__item:hover{transform:translateY(-6px);border-color:rgba(255,176,201,.4);background:rgba(25,9,18,.92)}.digital-map__item small{grid-row:1/3;display:grid;width:34px;height:34px;place-items:center;border-radius:11px;color:#230811;background:linear-gradient(135deg,#ffd1df,#d4708b);font-size:10px;font-weight:900}.digital-map__item strong{font-size:12px}.digital-map__item>span{color:#8d8289;font-size:9px}.digital-map__item--one{left:35px;top:105px}.digital-map__item--two{right:34px;top:230px}.digital-map__item--three{left:70px;bottom:38px}.digital-map__mark{position:absolute;right:-10px;bottom:-22px;width:260px;height:260px;opacity:.43}.digital-map__mark img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;animation:digitalMarkFloat 6s ease-in-out infinite}
@keyframes mapScan{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(260px);opacity:1}}
@media(max-width:1060px){.digital-hero{grid-template-columns:1fr}.digital-map{width:min(100%,820px);margin:0 auto}}
@media(max-width:720px){.digital-hero{gap:45px;min-height:auto;padding:50px 0}.digital-hero h1{font-size:49px;line-height:1.03}.digital-map{min-height:520px}.digital-map__item{width:205px}.digital-map__item--one{left:12px}.digital-map__item--two{right:12px}.digital-map__item--three{left:22px}.digital-map__mark{width:210px;height:210px}}
.structures {
  display: grid;
  gap: 18px;
  padding: 0 12px 20px;
}

.structure {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  min-height: 480px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 28%),
    #080609;
}

.structure:nth-child(even) {
  grid-template-columns: 1.25fr 0.75fr;
}

.structure:nth-child(even) .structure__copy {
  order: 2;
}

.structure__copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 54px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.structure:nth-child(even) .structure__copy {
  border-right: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.structure__index {
  color: var(--pink-muted);
  font-family: "Outfit", sans-serif;
  font-size: 22px;
}

.structure__copy h2 {
  margin: 80px 0 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.structure__copy p {
  max-width: 520px;
  margin: 22px 0 0;
  color: #999096;
  font-size: 13px;
  line-height: 1.75;
}

.structure__link {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: fit-content;
  margin-top: 36px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(255, 176, 201, 0.32);
  color: var(--pink-soft);
  font-size: 12px;
  font-weight: 800;
  transition: gap 200ms ease, border-color 200ms ease;
}

.structure__link:hover {
  gap: 21px;
  border-color: var(--pink-soft);
}

.structure__visual {
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

.structure__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 40px 40px;
}

.browser-scene {
  position: absolute;
  inset: 54px 45px;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 201, 0.2);
  border-radius: 22px;
  background: rgba(17, 9, 15, 0.85);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38);
  transform: rotate(2deg);
  transition: transform 400ms ease;
}

.structure:hover .browser-scene {
  transform: rotate(0) translateY(-5px);
}

.browser-scene__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  color: #756a71;
  font-size: 7px;
  letter-spacing: 0.13em;
}

.browser-scene__body {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  min-height: calc(100% - 43px);
}

.browser-scene__panel {
  padding: 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.browser-scene__panel small {
  color: var(--pink-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.browser-scene__panel strong {
  display: block;
  margin-top: 18px;
  font-family: "Outfit", sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}

.browser-scene__lines {
  display: grid;
  align-content: center;
  gap: 13px;
  padding: 36px;
}

.browser-scene__lines span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.browser-scene__lines span:nth-child(1) {
  width: 78%;
  background: rgba(255, 176, 201, 0.28);
}

.browser-scene__lines span:nth-child(2) {
  width: 92%;
}

.browser-scene__lines span:nth-child(3) {
  width: 67%;
}

.commerce-scene {
  position: absolute;
  inset: 45px;
}

.commerce-scene__product {
  position: absolute;
  border: 1px solid rgba(255, 176, 201, 0.17);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 30%),
    rgba(16, 8, 14, 0.84);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.35);
  transition: transform 300ms ease;
}

.commerce-scene__product--main {
  inset: 20px 28% 18px 12%;
  padding: 28px;
}

.commerce-scene__product--side {
  width: 38%;
  height: 40%;
  right: 5%;
  top: 7%;
  padding: 20px;
  transform: rotate(4deg);
}

.commerce-scene__product--bottom {
  width: 43%;
  height: 36%;
  right: 3%;
  bottom: 4%;
  padding: 20px;
  transform: rotate(-3deg);
}

.structure:hover .commerce-scene__product--side,
.structure:hover .commerce-scene__product--bottom {
  transform: rotate(0) translateY(-5px);
}

.product-shape {
  height: 60%;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 176, 201, 0.48), transparent 34%),
    linear-gradient(145deg, #2b101f, #0d080c);
}

.product-copy {
  display: grid;
  gap: 9px;
  margin-top: 19px;
}

.product-copy span {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.product-copy span:first-child {
  width: 70%;
  background: rgba(255, 176, 201, 0.22);
}

.system-scene {
  position: absolute;
  inset: 46px;
  display: grid;
  grid-template-columns: 160px 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 176, 201, 0.17);
  border-radius: 22px;
  background: rgba(14, 8, 13, 0.86);
  box-shadow: 0 28px 68px rgba(0, 0, 0, 0.38);
}

.system-scene__sidebar {
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.system-scene__logo {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ffd0df, #d4206b);
  box-shadow: 0 12px 26px rgba(212, 32, 107, 0.23);
}

.system-scene__nav {
  display: grid;
  gap: 11px;
  margin-top: 32px;
}

.system-scene__nav span {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.system-scene__nav span:first-child {
  width: 92%;
  background: rgba(255, 176, 201, 0.24);
}

.system-scene__nav span:nth-child(2) {
  width: 76%;
}

.system-scene__nav span:nth-child(3) {
  width: 84%;
}

.system-scene__main {
  padding: 28px;
}

.system-scene__header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.system-scene__header strong {
  font-family: "Outfit", sans-serif;
  font-size: 24px;
  font-weight: 500;
}

.system-scene__badge {
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--pink-soft);
  background: rgba(255, 176, 201, 0.07);
  font-size: 8px;
  font-weight: 800;
}

.system-scene__charts {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
  margin-top: 28px;
}

.system-chart {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.02);
}

.system-chart::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 18px solid rgba(255, 176, 201, 0.09);
  border-top-color: rgba(255, 176, 201, 0.46);
  animation: systemSpin 10s linear infinite;
}

.system-chart--bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 32px 26px;
}

.system-chart--bars::before {
  display: none;
}

.system-chart--bars span {
  flex: 1;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, var(--pink-soft), rgba(212, 32, 107, 0.18));
}

.system-chart--bars span:nth-child(1) { height: 38%; }
.system-chart--bars span:nth-child(2) { height: 70%; }
.system-chart--bars span:nth-child(3) { height: 52%; }
.system-chart--bars span:nth-child(4) { height: 86%; }

.choice-strip {
  padding: 72px 12px 22px;
}

.choice-strip__heading {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 46px;
}

.choice-strip h2 {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(40px, 4.5vw, 67px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.05em;
}

.choice-strip__heading p {
  margin: 0;
  color: #9a9096;
  font-size: 13px;
  line-height: 1.75;
}

.choice-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.choice-strip__grid article {
  min-height: 190px;
  padding: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.choice-strip__grid article:last-child {
  border-right: 0;
}

.choice-strip__grid small {
  color: var(--pink-muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.choice-strip__grid h3 {
  margin: 20px 0 12px;
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 500;
}

.choice-strip__grid p {
  margin: 0;
  color: #8f858b;
  font-size: 11px;
  line-height: 1.65;
}

@keyframes digitalMarkFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

@keyframes digitalRingOne {
  from { transform: translate(-50%, -50%) rotate(-12deg); }
  to { transform: translate(-50%, -50%) rotate(348deg); }
}

@keyframes digitalRingTwo {
  from { transform: translate(-50%, -50%) rotate(34deg); }
  to { transform: translate(-50%, -50%) rotate(-326deg); }
}

@keyframes systemSpin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1060px) {
  .digital-hero {
    grid-template-columns: 1fr;
  }

  .digital-orbit {
    width: min(100%, 800px);
    margin: 0 auto;
  }

  .structure,
  .structure:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .structure:nth-child(even) .structure__copy {
    order: initial;
  }

  .structure__copy,
  .structure:nth-child(even) .structure__copy {
    min-height: 380px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .structure__visual {
    min-height: 480px;
  }

  .choice-strip__heading {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 720px) {
  .digital-hero {
    gap: 45px;
    min-height: auto;
    padding: 50px 0;
  }

  .digital-hero h1 {
    font-size: 51px;
    line-height: 1.03;
  }

  .digital-hero__meta {
    grid-template-columns: 1fr;
  }

  .digital-hero__meta div {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .digital-orbit {
    min-height: 470px;
  }

  .digital-orbit__mark {
    width: 270px;
    height: 270px;
  }

  .digital-orbit__label {
    min-width: 175px;
  }

  .digital-orbit__label--one {
    left: 10px;
  }

  .digital-orbit__label--two {
    right: 10px;
  }

  .digital-orbit__label--three {
    left: 20px;
  }

  .structure__copy {
    padding: 38px 26px;
  }

  .structure__copy h2 {
    margin-top: 50px;
  }

  .structure__visual {
    min-height: 390px;
  }

  .browser-scene,
  .commerce-scene,
  .system-scene {
    inset: 28px 18px;
  }

  .system-scene {
    grid-template-columns: 105px 1fr;
  }

  .system-scene__charts {
    grid-template-columns: 1fr;
  }

  .system-chart {
    min-height: 125px;
  }

  .choice-strip__grid {
    grid-template-columns: 1fr;
  }

  .choice-strip__grid article {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .choice-strip__grid article:last-child {
    border-bottom: 0;
  }
}