@charset "UTF-8";
html {
  color-scheme: only light;
}

body {
  margin: 0;
}

h1, h2, h3, p, figure {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

label {
  display: block;
}

.product-page * {
  box-sizing: border-box;
}

.product-page {
  color-scheme: only light;
  max-width: 1536px;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  font-size: clamp(12px, 1.5vw, 20px);
  line-height: 1.2;
  font-family: Rozetka, sans-serif;
  color: #1e2738;
  background: #fff;
  text-wrap: balance;
}

.product-page img,
.product-page video {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.text-uppercase {
  text-transform: uppercase;
}

.centered {
  margin: 0 auto;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.text-white {
  color: #fff;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-display {
  font-size: clamp(22px, 5vw, 64px);
}

.text-title {
  font-size: clamp(18px, 3.5vw, 48px);
}

.text-subtitle {
  font-size: clamp(16px, 3vw, 36px);
}

.text-heading {
  font-size: clamp(14px, 2vw, 28px);
}

.section-padding {
  padding: clamp(24px, 4vw, 48px) clamp(10px, 4vw, 48px);
}

@font-face {
  font-family: "Rozetka";
  src: url("../rozetka-fonts/TTF/Rozetka306pro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rozetka";
  src: url("../rozetka-fonts/TTF/Rozetka306pro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.hero__scene {
  background: url("../images/655613950.webp") no-repeat center/cover;
  min-height: 100vh;
  z-index: 1;
}

.hero__scene::after,
.blue-backdrop::after,
.display__scene::after,
.coloros__scene::after,
.gaming__intro::after {
  content: "";
  width: 200%;
  height: 200px;
  position: absolute;
  bottom: -100px;
  left: -10%;
  filter: blur(40px);
  background: #C9D9ED;
  z-index: 1;
}

.display__scene::after {
  z-index: 1;
}

.layer-foreground {
  position: relative;
  z-index: 2;
}

.hero__copy {
  z-index: 1;
}

.hero__network {
  vertical-align: top;
  font-size: 0.5em;
}

.hero__ai-badge {
  max-width: clamp(96px, 12vw, 200px);
}

.hero__os-badge {
  bottom: 8%;
  left: 5%;
  z-index: 2;
}

.hero__phones {
  position: absolute;
  display: flex;
  inset: 0;
  justify-content: center;
  align-items: center;
  width: 55%;
  margin: 0 auto;
}

.hero__phone--blue {
  transform: translate(60px, 60px);
}

.hero__phone--brown {
  transform: translate(-40px, -20px);
}

.hero__phones > div {
  transition: 0.5s ease;
  position: relative;
}

.hero__phones:hover > div {
  transform: translate(0, 0);
}

.blue-backdrop,
.configurator {
  background: url("../images/655614130.webp") no-repeat center/cover;
  min-height: clamp(400px, 56vw, 800px);
  position: relative;
}

.design-overview .feature-grid {
  margin-bottom: 15%;
}

.feature-grid {
  display: flex;
  flex-wrap: wrap;
  background: #FFF;
  padding: clamp(16px, 2vw, 24px);
  gap: clamp(16px, 2vw, 24px);
  border-radius: 24px;
  width: 85%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.feature-grid__item {
  flex: 1;
  min-width: 45%;
  position: relative;
}

.feature-grid__image {
  border-radius: 16px;
  overflow: hidden;
}

.feature-grid__image img {
  width: 100%;
  transition: 0.5s ease;
}

.feature-grid__image:hover img {
  transform: scale(1.1);
}

.feature-grid__caption {
  position: absolute;
  align-self: flex-end;
  padding: 16px;
}

.ergonomics__scene {
  background: url("../images/655617448.webp") no-repeat center/cover;
  min-height: clamp(400px, 64vw, 880px);
  padding-top: 0;
  justify-content: center;
}

.ergonomics .text-title {
  font-size: clamp(20px, 3.5vw, 44px);
}

.section-intro {
  position: relative;
  z-index: 5;
}

.gradient-cyan {
  background: linear-gradient(93.37deg, rgba(53, 145, 255, 0.9) 7.36%, rgba(99, 190, 255, 0.9) 17.81%, rgba(0, 150, 250, 0.9) 30.75%, rgba(0, 242, 255, 0.9) 50.15%, rgba(0, 255, 255, 0.9) 62.86%, rgba(0, 150, 250, 0.9) 75.1%, rgba(0, 255, 255, 0.9) 87.1%, rgba(0, 255, 255, 0.9) 100%);
  background-clip: text;
  color: transparent;
  background-size: 150%;
}

.gradient-steel {
  background: linear-gradient(91.65deg, rgba(135, 174, 217, 0.95) 1.4%, rgba(47, 67, 104, 0.95) 42.39%, rgba(135, 174, 217, 0.95) 84.99%);
  background-clip: text;
  color: transparent;
}

.gradient-spectrum {
  background: linear-gradient(94.05deg, rgb(254, 149, 74) 6.06%, rgb(248, 64, 99) 34.53%, rgb(173, 41, 227) 66.74%, rgb(0, 142, 255) 100.96%) text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.text-muted {
  opacity: 0.7;
}

.split-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.split-copy > div,
.split-copy > p {
  max-width: 480px;
  flex: 1;
}

.configurator {
  position: relative;
  justify-content: end;
  transition: 0.5s ease;
  width: 100%;
  overflow: hidden;
}

.configurator__images img,
.configurator__color-copy > div,
.configurator__detail-copy > div {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s ease;
  z-index: -10;
}

.configurator__images img {
  inset: unset;
  top: 25%;
  left: 25%;
  transform: translate(-25%, -25%);
  max-height: 80%;
}

.configurator__images img:nth-child(3) {
  top: 35%;
  left: 35%;
  transform: translate(-35%, -40%);
}

.configurator__images > div {
  position: absolute;
  inset: 0;
  width: 50%;
  margin-left: auto;
}

.configurator:has(#color-brown:checked) {
  background: url("../images/655635496.webp") no-repeat center/cover;
}

.configurator:has(#color-brown:checked) .text-muted {
  color: #fff;
}

.configurator__colors {
  display: flex;
  position: relative;
  z-index: 1;
  gap: 16px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.configurator__color-name {
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  transition: 0.8s ease;
}

.configurator__controls {
  padding: clamp(16px, 3vw, 40px);
  display: flex;
  align-items: end;
  gap: 8px;
}

.configurator__detail-control {
  width: 60%;
}

.configurator__color-control {
  width: 40%;
}

.configurator__detail-control,
.configurator__color-control {
  position: relative;
  z-index: 1;
}

.configurator__color-copy {
  font-size: clamp(11px, 1.3vw, 16px);
  min-height: 80px;
  position: relative;
}

.configurator__color-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
  background: hsla(0, 0%, 100%, 0.3);
  backdrop-filter: blur(20px);
  padding: 12px;
  border-radius: 32px;
  border: 1px solid #eeeeee;
  font-weight: bold;
}

.swatch--blue {
  background: linear-gradient(111.03deg, #fff -108.34%, #a0b0d8 136.21%);
}

.swatch--brown {
  background: linear-gradient(140.71deg, #78645d, #433833 91.82%);
}

.swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.configurator__details {
  display: flex;
  background: linear-gradient(125.73deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.05) 52.04%, hsla(0, 0%, 100%, 0.1) 101.63%);
  padding: 12px;
  gap: 8px;
  backdrop-filter: blur(20px);
  border: 1px solid #eeeeee;
  border-radius: 32px;
  min-height: 140px;
}

.configurator__detail-label {
  background: linear-gradient(125.73deg, hsla(0, 0%, 100%, 0.4), hsla(0, 0%, 100%, 0.2) 52.04%, hsla(0, 0%, 100%, 0.4) 101.63%);
  flex: 1;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(20px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  font-weight: bold;
  font-size: clamp(11px, 1.3vw, 16px);
  cursor: pointer;
}

.configurator__detail-icon {
  background: url("../images/655635844.svg") no-repeat center/contain;
  width: 32px;
  height: 32px;
  transition: 0.5s ease;
}

.configurator__detail-copy {
  position: absolute;
  width: 40%;
  top: 15%;
  left: 2.5%;
  z-index: 1;
}

.configurator:has(#color-blue:checked) .configurator__color-copy > div:nth-child(1) {
  opacity: 1;
  visibility: visible;
  position: static;
}
.configurator:has(#color-blue:checked) .configurator__color-name--blue {
  max-width: 400px;
  margin-left: 8px;
}
.configurator:has(#color-blue:checked):has(#detail-glass:checked) .configurator__images--blue img:nth-child(1) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.configurator:has(#color-blue:checked):has(#detail-bezel:checked) .configurator__images--blue img:nth-child(2) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.configurator:has(#color-blue:checked):has(#detail-frame:checked) .configurator__images--blue img:nth-child(3) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.configurator:has(#color-brown:checked) .configurator__color-copy > div:nth-child(2) {
  opacity: 1;
  visibility: visible;
  position: static;
}
.configurator:has(#color-brown:checked) .configurator__color-name--brown {
  max-width: 400px;
  margin-left: 8px;
}
.configurator:has(#color-brown:checked):has(#detail-glass:checked) .configurator__images--brown img:nth-child(1) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.configurator:has(#color-brown:checked):has(#detail-bezel:checked) .configurator__images--brown img:nth-child(2) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.configurator:has(#color-brown:checked):has(#detail-frame:checked) .configurator__images--brown img:nth-child(3) {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.configurator:has(#detail-glass:checked) .configurator__copy--glass {
  opacity: 1;
  visibility: visible;
}
.configurator:has(#detail-glass:checked) .configurator__detail-label:nth-of-type(1) {
  background: linear-gradient(125.73deg, #fff, hsla(0, 0%, 100%, 0.5) 52.04%, #fff 101.63%);
}
.configurator:has(#detail-glass:checked) .configurator__detail-label:nth-of-type(1) .configurator__detail-icon {
  background: url("../images/655635845.svg") no-repeat center/contain;
}

.configurator:has(#detail-bezel:checked) .configurator__copy--bezel {
  opacity: 1;
  visibility: visible;
}
.configurator:has(#detail-bezel:checked) .configurator__detail-label:nth-of-type(2) {
  background: linear-gradient(125.73deg, #fff, hsla(0, 0%, 100%, 0.5) 52.04%, #fff 101.63%);
}
.configurator:has(#detail-bezel:checked) .configurator__detail-label:nth-of-type(2) .configurator__detail-icon {
  background: url("../images/655635845.svg") no-repeat center/contain;
}

.configurator:has(#detail-frame:checked) .configurator__copy--frame {
  opacity: 1;
  visibility: visible;
}
.configurator:has(#detail-frame:checked) .configurator__detail-label:nth-of-type(3) {
  background: linear-gradient(125.73deg, #fff, hsla(0, 0%, 100%, 0.5) 52.04%, #fff 101.63%);
}
.configurator:has(#detail-frame:checked) .configurator__detail-label:nth-of-type(3) .configurator__detail-icon {
  background: url("../images/655635845.svg") no-repeat center/contain;
}

.durability__scene {
  background: url("../images/655636640.webp") no-repeat center/cover;
  min-height: clamp(400px, 64vw, 880px);
  justify-content: center;
}

.display__scene {
  background: url("../images/655636977.png") no-repeat center/cover;
  min-height: clamp(400px, 96vw, 1200px);
  justify-content: end;
  align-items: center;
}

.spec-grid {
  display: flex;
  gap: 16px;
}

.spec-card {
  flex: 1;
  font-size: clamp(10px, 1.3vw, 14px);
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  padding: clamp(16px, 2vw, 24px);
}

.spec-card, .performance-card {
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid #eeeeee;
  border-radius: clamp(16px, 2vw, 28px);
  display: flex;
}

.spec-card .body-copy {
  color: #434F56;
}

.spec-card__value {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: bold;
}

.spec-card__icon,
.performance-card__icon {
  width: clamp(32px, 3.5vw, 56px);
  margin-bottom: 16px;
}

.portrait-lighting .spec-grid {
  flex-wrap: wrap;
  gap: 8px;
}

.portrait-lighting .spec-card {
  min-width: 45%;
}

.portrait-lighting .spec-card:first-child {
  min-width: 100%;
}

.display__copy {
  width: 85%;
  position: relative;
  z-index: 2;
  margin-bottom: 2%;
}

.display__floating-phone {
  position: absolute;
  top: 32%;
  margin: 0 auto;
  width: 70%;
  object-fit: contain;
  animation: phone-float 5s ease-in-out infinite;
}

@keyframes phone-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(25px);
  }
}
.vlogging-intro__scene::after {
  z-index: 1;
}

.vlogging-intro__scene::before {
  content: "";
  position: absolute;
  background: url("../images/655637178.webp") no-repeat center/contain;
  right: -14%;
  bottom: -40%;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cameras__scene {
  justify-content: end;
  background: url("../images/655637558.webp") no-repeat center/cover;
  min-height: clamp(400px, 72vw, 960px);
}

.cameras__scene::after {
  content: unset;
}

.cameras__copy {
  width: 40%;
  z-index: 1;
  margin: 0 0 5% 12%;
}

.cameras__phone {
  width: 50%;
  bottom: 0;
  right: 0;
}

.stat-list {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vw, 40px);
  width: 50%;
}

.stat-list__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hdr-video__scene {
  padding-top: 8%;
  align-items: center;
  justify-content: center;
}

.hdr-video__content {
  z-index: 5;
  width: 80%;
}

.footnote {
  font-size: 13px;
  opacity: 0.6;
}

.stabilization__scene {
  justify-content: center;
}

.media-frame {
  padding: clamp(8px, 1.5vw, 16px);
  border-radius: clamp(16px, 2vw, 32px);
  background: #FFF;
}

.media-frame img,
.media-frame video {
  border-radius: clamp(16px, 2vw, 32px);
}

.media-comparison {
  position: relative;
}

.media-comparison__label,
.lighting-card__images::after {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 8px 12px;
  backdrop-filter: blur(20px);
  position: absolute;
  border: 1px solid #eeeeee;
  border-radius: 20px;
  font-size: clamp(10px, 1.5vw, 16px);
  bottom: 5%;
  left: 3%;
  line-height: 1;
}

.stabilization .media-comparison__label {
  bottom: 8%;
}

.stabilization .media-comparison__label--before {
  left: 5%;
}

.media-comparison__label--after {
  left: 53%;
}

.dual-view__copy {
  width: 25%;
}

.dual-view .media-split__copy {
  width: 35%;
}

.dual-view .media-split__image {
  display: flex;
  justify-content: space-between;
  width: 65%;
  gap: 8px;
}

.dual-view .media-split__image img {
  border-radius: 16px;
}

.wide-media img {
  width: 100%;
}

.split-copy__description {
  text-align: end;
}

.portraits .media-split__image img {
  max-height: 600px;
  margin: 0 auto;
}

.media-split__image.flex-row {
  gap: 8px;
}

.media-split__image.flex-row > img {
  flex: 1;
}

.gallery-window {
  overflow: hidden;
  width: 100%;
}

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 25%;
  animation: gallery-scroll 40s linear infinite;
  padding: 8px 0;
  gap: clamp(4px, 0.5vw, 8px);
}

@keyframes gallery-scroll {
  to {
    translate: calc(-10 * (25% + clamp(4px, 0.5vw, 8px)));
  }
}
.gallery-track img {
  transition: 0.5s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-track > div {
  overflow: hidden;
  max-height: 440px;
  position: relative;
}

.gallery-track > div::after {
  content: "";
  transition: 0.3s ease;
  background: #000;
  position: absolute;
  inset: 0;
  opacity: 0;
}

.gallery-track > div:hover::after {
  opacity: 0.15;
}

.gallery-track > div:hover img {
  transform: scale(1.2);
}

.gallery-track:hover {
  animation-play-state: paused;
}

.portrait-lighting .media-split {
  align-items: unset;
}

.portrait-lighting .media-split__image img {
  border-radius: clamp(24px, 3vw, 48px);
  height: 100%;
}

.lighting-grid {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
}

.lighting-card {
  flex: 1;
}

.lighting-card__images {
  position: relative;
  width: 100%;
  height: clamp(240px, 28vw, 420px);
  z-index: 2;
  margin-bottom: 16px;
}

.lighting-card__images img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lighting-card__images::after {
  content: "Вимкнено";
  bottom: 5%;
}

.stabilization__animation {
  width: 100%;
}

.lighting-card {
  position: relative;
}

.lighting-card__images {
  display: block;
  cursor: pointer;
}

.lighting-card__images img:last-of-type {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.lighting-card__toggle:checked + .lighting-card__images::after {
  content: "Увімкнено";
  background: white;
  box-shadow: 0 0 8px white;
}
.lighting-card__toggle:checked + .lighting-card__images img:last-of-type {
  opacity: 1;
}

@media (hover: hover) {
  .lighting-card:hover:not(:focus-within) .lighting-card__images::after {
    content: "Увімкнено";
    background: white;
    transition: 0.5s ease;
    box-shadow: 0 0 8px white;
  }
  .lighting-card:hover:not(:focus-within) .lighting-card__images img:last-of-type {
    opacity: 1;
  }
}
.creative-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.creative-row__column {
  flex: 1;
}

.creative-row__image img {
  transform: scale(0.8);
  transition: 0.5s ease;
}

.creative-row:hover .creative-row__image img {
  transform: scale(1);
}

.creative-tools__comparison {
  gap: 16px;
  width: 70%;
  margin: 0 auto;
}

.media-comparison__label--before {
  left: 3%;
}

.photo-gallery__scene,
.stabilization__scene,
.dual-view__scene {
  min-height: unset;
}

.creative-tools__scene {
  background: linear-gradient(180deg, rgb(200, 216, 237) 50%, rgb(249, 249, 249) 100%);
}

.coloros-intro__scene {
  min-height: 600px;
  justify-content: center;
  align-items: center;
}

.coloros-intro__logo {
  width: clamp(120px, 16vw, 240px);
}

.coloros__scene {
  background: url("../images/655643613.png") no-repeat center/cover;
  min-height: clamp(400px, 64vw, 880px);
  justify-content: center;
  position: relative;
}

.coloros__scene::after {
  background: linear-gradient(180deg, rgb(33, 16, 53) 0%, rgb(16, 10, 43) 100%);
}

.trinity__scene {
  background: url("../images/655643900.png") no-repeat center/cover;
  min-height: clamp(400px, 56vw, 720px);
  justify-content: center;
}

.connect__scene {
  background: #fff url("../images/655680007.webp") no-repeat top center/100%;
  min-height: clamp(400px, 64vw, 880px);
  justify-content: end;
}

.image-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: end;
  border-radius: clamp(24px, 3vw, 40px);
  overflow: hidden;
  min-height: clamp(360px, 48vw, 680px);
  padding: clamp(16px, 2vw, 24px);
}

.image-banner__image {
  position: absolute;
  inset: 0;
}

.image-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-banner__glass {
  background: linear-gradient(124.67deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.1) 30%, hsla(0, 0%, 100%, 0.1) 80%, hsla(0, 0%, 100%, 0));
  backdrop-filter: blur(10px);
  width: 100%;
  position: relative;
  z-index: 1;
  border: 1px solid rgba(238, 238, 238, 0.1215686275);
  padding: clamp(16px, 2vw, 24px);
  border-radius: 24px;
}

.ai-space__scene {
  position: relative;
  z-index: 1;
  padding: 12% clamp(16px, 4vw, 48px);
}

.ai-space__scene::after {
  content: "";
  animation: ambient-glow 8s linear infinite;
  background: conic-gradient(from 180deg at 50% 50%, #9952ff -34.37deg, #ff5374 14.93deg, #fe954a 50.68deg, #00d6ff 193.76deg, #008eff 287.21deg, #9952ff 325.63deg, #ff5374 374.93deg), #fff;
  background-size: 200% 100%;
  filter: blur(50px);
  opacity: 0.6;
  will-change: transform;
  top: 0;
  left: -5%;
  height: clamp(64px, 16vw, 280px);
  width: 120%;
  z-index: -1;
  position: absolute;
}

.ai-space__scene::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 800px;
  background: radial-gradient(146.81% 153.91% at 50% 0, rgba(255, 229, 188, 0) 1.64%, rgba(233, 245, 246, 0) 32.81%, #e6f7fe 49.6%, #c4e4fe 70.57%, #79baff 100%);
}

@keyframes ambient-glow {
  0%, 100% {
    background-position: 0 0;
  }
  50% {
    background-position: 100% 0;
  }
}
.translator-grid {
  display: flex;
  gap: 16px;
}

.translator-card {
  border-radius: 24px;
  background-color: #F7F7F7;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.translator-card__image img {
  margin: 0 auto;
  transform: translateX(24px);
}

.translator-card__copy {
  padding: clamp(16px, 3vw, 40px);
  font-size: clamp(12px, 1.3vw, 18px);
}

.ai-space .media-split {
  background: hsla(0, 0%, 100%, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: clamp(16px, 3vw, 40px);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.0509803922);
  border-radius: 32px;
  backdrop-filter: blur(10px);
}

.gaming__phone {
  max-width: 560px;
  width: 50%;
  margin: 0 auto;
}

.gaming__intro {
  padding-top: 8%;
  background: #E1EDFB url("../images/655695389.webp") no-repeat top center/100%;
}

.gaming__intro::after {
  background: #E1EDFB;
}

.performance-card {
  gap: clamp(16px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.4);
  align-items: center;
  padding: clamp(16px, 3vw, 40px);
}

.performance-card__column {
  flex: 1;
}

.gaming .stat-list,
.connectivity .stat-list {
  flex-direction: row;
  width: 100%;
  padding: clamp(16px, 2vw, 24px) 0;
}

.stat-list__item {
  flex: 1;
}

.performance-card__stats {
  width: 70%;
  margin: 0 auto;
}

.stat-divider {
  background: url("../images/655698150.webp") no-repeat center/contain;
  width: 100%;
  height: 3px;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

.connectivity .performance-card {
  align-items: unset;
}

.connectivity .performance-grid > .performance-card:nth-child(1) {
  grid-row: span 2;
}

.connectivity .media-split__image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: clamp(16px, 2vw, 32px);
}

.connectivity .media-split__image {
  width: 60%;
}

.connectivity .media-split__copy {
  width: 40%;
  align-self: center;
}

.closing__scene {
  background: #fff;
}

.closing__image {
  width: 80%;
  margin: 0 auto;
}

.media-split {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.media-split > * {
  width: 50%;
}

.media-split__image img {
  width: 100%;
  object-fit: cover;
}

.space-after-8 {
  margin-bottom: 8px;
}

.space-after-16 {
  margin-bottom: clamp(8px, 2vw, 16px);
}

.space-after-24 {
  margin-bottom: clamp(16px, 2vw, 24px);
}

.space-after-32 {
  margin-bottom: clamp(16px, 2.5vw, 32px);
}

.space-after-40 {
  margin-bottom: clamp(16px, 3vw, 40px);
}

.space-after-80 {
  margin-bottom: clamp(24px, 6vw, 80px);
}

@media (max-width: 1023px) {
  .hero__scene {
    min-height: 600px;
  }
  .swatch {
    width: 20px;
    height: 20px;
  }
  .configurator__color-label {
    padding: 8px;
  }
  .configurator__controls {
    flex-direction: column;
    align-items: start;
    justify-content: start;
    padding: 12px;
  }
  .configurator__detail-copy {
    position: static;
    padding: 24px 12px;
    width: 50%;
  }
  .configurator__detail-copy > div {
    z-index: -5;
    visibility: hidden;
  }
  .configurator__detail-control,
  .text-bold,
  .creative-tools__comparison,
  .feature-grid {
    width: 100%;
  }
  .cameras__copy {
    width: 50%;
  }
  .configurator__detail-icon {
    width: 20px;
    height: 20px;
  }
  .configurator__details {
    min-height: unset;
  }
  .configurator__detail-label {
    padding: 16px;
    gap: 16px;
  }
  .configurator:has(#detail-glass:checked) .configurator__copy--glass,
  .configurator:has(#detail-bezel:checked) .configurator__copy--bezel,
  .configurator:has(#detail-frame:checked) .configurator__copy--frame {
    position: static;
    visibility: visible;
  }
  .configurator {
    min-height: 560px;
  }
  .coloros-intro__scene {
    min-height: unset;
  }
}
@media (max-width: 767px) {
  .hero__phones {
    width: 95%;
  }
  .hero__os-badge {
    width: 80px;
  }
  .feature-grid,
  .split-copy {
    flex-direction: column;
    position: relative;
    z-index: 2;
  }
  .ergonomics__scene,
  .split-copy__description {
    text-align: center;
  }
  .ergonomics__scene,
  .durability__scene {
    background-size: contain;
    background-position: bottom;
    background-color: #C8D7EC;
    justify-content: start;
    min-height: 300px;
  }
  .configurator__color-control {
    margin-top: auto;
  }
  .configurator {
    height: 900px;
    aspect-ratio: 344/900;
  }
  .configurator__images img {
    max-height: 35%;
    top: 10%;
    left: 20%;
    transform: translate(-10%, -20%);
  }
  .configurator__images img:nth-child(3) {
    top: 5%;
    left: 55%;
    transform: unset;
  }
  .configurator__controls {
    height: 100%;
    justify-content: space-between;
  }
  .configurator__colors {
    display: inline-flex;
    flex-direction: column;
    align-items: start;
  }
  .configurator__text,
  .cameras__copy,
  .hdr-video__content,
  .configurator__color-control,
  .product-page .media-split > *,
  .performance-card__stats,
  .closing__image {
    width: 100%;
  }
  .configurator__details,
  .media-split,
  .portrait-lighting .spec-grid,
  .lighting-grid,
  .creative-row,
  .translator-grid,
  .performance-card {
    flex-direction: column;
  }
  .durability__scene {
    background-color: #D9E7F5;
    text-align: center;
    min-height: 400px;
  }
  .spec-grid {
    flex-wrap: wrap;
    gap: 8px;
  }
  .spec-card {
    border-radius: 12px;
  }
  .display__scene {
    background-position: top center;
    background-size: contain;
    min-height: 720px;
    background-color: #E9EFF7;
  }
  .display__floating-phone {
    top: 10%;
    width: 80%;
  }
  .cameras__copy {
    margin: 0;
  }
  .cameras__phone {
    width: 75%;
    bottom: 0;
    right: -20%;
  }
  .gaming__phone {
    width: 80%;
  }
  .configurator__detail-copy {
    margin-bottom: auto;
  }
  .media-split__image {
    order: -1;
  }
  .gallery-track > div {
    max-height: 200px;
  }
  .gallery-track {
    grid-auto-columns: 50%;
  }
  @keyframes gallery-scroll {
    to {
      translate: calc(-16 * (50% + 4px));
    }
  }
  .lighting-card__images {
    min-height: 360px;
  }
  .creative-row__image img {
    transform: unset;
  }
  .creative-row__column,
  .image-banner {
    text-align: center;
  }
  .coloros__scene {
    text-align: center;
    justify-content: end;
  }
  .image-banner {
    min-height: 400px;
  }
  .performance-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  transform: translateY(-200%);
  padding: 12px 20px;
  border-radius: 12px;
  background: white;
  color: #1e2738;
  z-index: 100;
  font: 16px Arial, sans-serif;
}
.skip-link:focus-visible {
  transform: none;
  outline: 3px solid #075bb0;
  outline-offset: 5px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9);
}

.native-option:focus-visible + label,
.lighting-card__toggle:focus-visible + label,
.gallery-pause:focus-visible + label,
.gallery-window:focus-visible {
  outline: 3px solid #075bb0;
  outline-offset: 5px;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.9);
}

.gallery-window {
  position: relative;
}

.gallery-pause-label {
  position: absolute;
  top: 16px;
  right: 12px;
  z-index: 3;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid #eeeeee;
  background: rgba(255, 255, 255, 0.85);
  color: #1e2738;
  cursor: pointer;
  font-size: 12px;
}

.gallery-pause-label__resume {
  display: none;
}

.gallery-pause:checked + label .gallery-pause-label__pause {
  display: none;
}
.gallery-pause:checked + label .gallery-pause-label__resume {
  display: inline;
}

.gallery-window:focus-within .gallery-track,
.gallery-window:has(.gallery-pause:checked) .gallery-track {
  animation-play-state: paused;
}

.gallery-window:focus,
.gallery-window:has(.gallery-pause:checked) {
  overflow-x: auto;
}
.gallery-window:focus .gallery-track,
.gallery-window:has(.gallery-pause:checked) .gallery-track {
  animation: none;
}

.media-split > *,
.performance-card__column,
.creative-tools__comparison > div {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .hero__phone--blue, .hero__phone--brown,
  .creative-row__image img {
    transform: none;
  }
  .gallery-window {
    overflow-x: auto;
  }
  .gallery-track > [aria-hidden=true] {
    display: none;
  }
  .gallery-pause, .gallery-pause-label {
    display: none;
  }
}