/* V3.2 final visual polish — structure remains inherited from V3.1. */

.hero {
  min-height: 706px;
  background:
    radial-gradient(ellipse at 78% 43%, rgba(29, 86, 132, .28), transparent 31%),
    radial-gradient(ellipse at 90% 63%, rgba(40, 74, 122, .16), transparent 24%),
    radial-gradient(ellipse at 58% 20%, rgba(12, 47, 82, .26), transparent 32%),
    linear-gradient(132deg, #030b14 3%, #061421 52%, #020811 92%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: -12% -7% -10% 33%;
  z-index: 0;
  pointer-events: none;
  opacity: .68;
  background:
    radial-gradient(ellipse at 66% 42%, transparent 0 29%, rgba(80, 132, 176, .13) 30%, transparent 33%),
    radial-gradient(ellipse at 73% 47%, transparent 0 41%, rgba(226, 169, 61, .075) 42%, transparent 43.5%),
    radial-gradient(ellipse at 49% 35%, rgba(81, 151, 205, .22), transparent 7%),
    radial-gradient(ellipse at 62% 43%, rgba(116, 74, 142, .1), transparent 18%),
    linear-gradient(147deg, transparent 37%, rgba(55, 119, 170, .12) 48%, rgba(223, 157, 42, .07) 51%, transparent 60%);
  transform: rotate(-5deg);
}

.hero::after {
  opacity: .42;
  background-image:
    radial-gradient(circle at 18% 23%, #f1bc4d 0 .8px, transparent 1.5px),
    radial-gradient(circle at 58% 32%, #7db9ee 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 68%, #db9a2f 0 .85px, transparent 1.5px),
    radial-gradient(circle at 34% 71%, #d7e8f6 0 .7px, transparent 1.4px),
    radial-gradient(circle at 72% 16%, #b7dbf7 0 .65px, transparent 1.3px);
  background-size: 43px 47px, 67px 61px, 89px 83px, 113px 109px, 137px 127px;
}

.hero-inner { grid-template-columns: 42.5% 57.5%; }
.trace-scene {
  position: relative;
  margin-right: -4px;
  transform: translate(4px, -4px) scale(1.035);
  transform-origin: center right;
}
.trace-scene::after {
  content: "";
  position: absolute;
  right: 4.5%;
  top: 20%;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(229, 171, 47, .12), transparent 66%);
}

.about,
.about-inner { min-height: 300px; }
.about {
  border-top-color: rgba(229, 171, 47, .32);
  border-bottom-color: rgba(229, 171, 47, .23);
  background:
    radial-gradient(circle at 11% 82%, rgba(229, 171, 47, .055), transparent 20%),
    radial-gradient(circle at 87% 54%, rgba(36, 101, 148, .13), transparent 24%),
    linear-gradient(90deg, #06111c, #081928 54%, #06111c);
}
.about-inner {
  grid-template-columns: 224px minmax(330px, 1.1fr) minmax(275px, .86fr) 224px;
  gap: 28px;
}
.about-aye {
  width: 200px;
  height: 300px;
  transform: translateX(5px);
}
.about-memi {
  width: 212px;
  height: auto;
  transform: translate(-5px, 4px);
}
.about-heading { padding-bottom: 2px; }
.about-copy { max-width: 320px; }

.product { padding-top: 36px; padding-bottom: 40px; }
.product-console {
  background:
    radial-gradient(circle at 68% 40%, rgba(22, 64, 96, .1), transparent 35%),
    rgba(5, 17, 28, .94);
  border-color: rgba(229, 171, 47, .38);
}
.capture-panel { grid-template-columns: 250px minmax(0, 1fr); }
.capture-ui {
  width: 338px;
  height: 390px;
  justify-self: center;
  align-self: center;
  background: #08121c;
  border-color: rgba(229, 171, 47, .42);
}
.capture-ui picture,
.capture-ui img { width: 100%; height: 100%; }
.capture-ui img { object-fit: cover; object-position: center; }

.keep-panel {
  grid-template-columns: 226px minmax(0, 1fr) 172px;
  gap: 18px;
}
.keep-ui-stack { gap: 10px; }
.aye-slot {
  align-self: center;
  height: 100%;
  place-items: center;
}
.aye-slot img {
  max-width: 158px;
  max-height: 332px;
  transform: translateX(-3px);
}

.closing-grid { min-height: 286px; }
.closing-grid article,
.closing-grid article:first-child,
.closing-grid article:last-child { padding-top: 24px; padding-bottom: 21px; }
.why-points,
.care-points { margin-top: 21px; }
.why-points small,
.care-points small { margin-top: 7px; }
.contact-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-block h2 { max-width: 340px; }
.contact-block .button { margin-top: 20px; }
.contact-block .email { margin-top: 4px; }
.site-footer { min-height: 76px; }

@media (max-width: 1080px) and (min-width: 761px) {
  .about-inner { grid-template-columns: 166px 1.08fr .92fr 166px; gap: 22px; }
  .about-aye { width: 164px; height: 246px; }
  .about-memi { width: 160px; }
  .capture-ui { width: 326px; height: 376px; }
}

@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; }
  .capture-panel { grid-template-columns: 1fr; }
  .hero {
    min-height: 684px;
    background:
      radial-gradient(ellipse at 72% 68%, rgba(26, 79, 120, .24), transparent 29%),
      radial-gradient(ellipse at 48% 36%, rgba(16, 54, 89, .2), transparent 31%),
      linear-gradient(150deg, #030b14, #061522 58%, #020811);
  }
  .hero::before { inset: 35% -22% -6% -10%; opacity: .56; }
  .hero::after { opacity: .34; }
  .trace-scene {
    margin: 10px -4px 0;
    transform: translateY(-2px) scale(1.01);
    transform-origin: center;
  }
  .trace-scene::after { right: 2%; top: 17%; width: 92px; }

  .about,
  .about-inner { min-height: 438px; }
  .about-inner {
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    grid-template-rows: auto auto;
    gap: 24px 20px;
    padding: 42px 0 36px;
  }
  .about-aye {
    width: 54px;
    height: auto;
    align-self: end;
    transform: translate(-2px, -6px);
  }
  .about-memi {
    width: 54px;
    transform: translate(2px, -18px);
  }
  .about-heading,
  .about-copy { padding-left: 3px; padding-right: 3px; }
  .about-copy { max-width: none; }

  .capture-ui {
    width: min(100%, 310px);
    height: auto;
    max-height: none;
    justify-self: center;
  }
  .capture-ui picture,
  .capture-ui img { width: 100%; height: auto; max-height: none; }
  .keep-panel { grid-template-columns: 1fr; gap: 15px; }
  .aye-slot {
    height: auto;
    width: 78px;
    right: 5px;
    bottom: 1px;
  }
  .aye-slot img { max-width: 78px; max-height: none; transform: none; }

  .closing-grid article,
  .closing-grid article:first-child,
  .closing-grid article:last-child { padding-top: 24px; padding-bottom: 24px; }
  .why-points,
  .care-points { margin-top: 19px; }
  .contact-block .button { margin-top: 17px; }
  .site-footer { min-height: 108px; }
}

@media (max-width: 390px) {
  .about-inner { grid-template-columns: 52px minmax(0, 1fr) 52px; column-gap: 18px; }
  .about-aye,
  .about-memi { width: 48px; }
}