.device,
.device::before,
.device::after,
.device *,
.device *::before,
.device *::after {
box-sizing: border-box;
display: block;
}
.device {
position: relative;
transform: scale(1);
z-index: 1;
}
.device .device-frame {
z-index: 1;
}
.device .device-screen {
background-color: #000;
background-position: center center;
background-size: cover;
object-fit: cover;
position: relative;
}
.device-iphone-14-pro {
height: 868px;
width: 428px;
}
.device-iphone-14-pro .device-frame {
background: #010101;
border: 1px solid #1b1721;
border-radius: 68px;
box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 6px #342c3f;
height: 868px;
padding: 19px;
width: 428px;
}
.device-iphone-14-pro .device-screen {
border-radius: 49px;
height: 830px;
width: 390px;
}
.device-iphone-14-pro .device-stripe::after,
.device-iphone-14-pro .device-stripe::before {
border: solid rgba(1, 1, 1, .25);
border-width: 0 7px;
content: "";
height: 7px;
left: 0;
position: absolute;
width: 100%;
z-index: 9;
}
.device-iphone-14-pro .device-stripe::after {
top: 85px;
}
.device-iphone-14-pro .device-stripe::before {
bottom: 85px;
}
.device-iphone-14-pro .device-header,
.device-iphone-14-pro .device-sensors {
z-index: 12;
pointer-events: none;
}
.device-iphone-14-pro .device-header {
background: #000;
border-radius: 22px;
height: 37px;
left: 50%;
margin-left: -63px;
position: absolute;
top: 28px;
width: 126px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.device-iphone-14-pro .device-sensors::after,
.device-iphone-14-pro .device-sensors::before {
content: "";
position: absolute;
z-index: 13;
}
.device-iphone-14-pro .device-sensors::after {
background: #000;
border-radius: 18px;
height: 35px;
left: 50%;
margin-left: -63px;
top: 29px;
width: 78px;
}
.device-iphone-14-pro .device-sensors::before {
background:
radial-gradient(circle at 35% 30%, #6a8cff 0%, transparent 40%),
radial-gradient(circle at 70% 70%, #1a3a4a 0%, #0a1520 55%, #05080c 100%);
border-radius: 50%;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 0 0 1.5px #000;
height: 11px;
left: 50%;
margin-left: 38px;
top: 41px;
width: 11px;
}
.device-iphone-14-pro .device-btns {
background: #1b1721;
border-radius: 2px;
height: 32px;
left: -2px;
position: absolute;
top: 115px;
width: 3px;
}
.device-iphone-14-pro .device-btns::after,
.device-iphone-14-pro .device-btns::before {
background: #1b1721;
border-radius: 2px;
content: "";
height: 62px;
left: 0;
position: absolute;
width: 3px;
}
.device-iphone-14-pro .device-btns::after {
top: 60px;
}
.device-iphone-14-pro .device-btns::before {
top: 140px;
}
.device-iphone-14-pro .device-power {
background: #1b1721;
border-radius: 2px;
height: 100px;
position: absolute;
right: -2px;
top: 200px;
width: 3px;
}
.device-iphone-14-pro .device-home::after,
.device-iphone-14-pro .device-home::before {
border: solid rgba(1, 1, 1, .25);
border-width: 6px 0;
content: "";
height: 6px;
position: absolute;
width: 6px;
z-index: 9;
}
.device-iphone-14-pro .device-home::after {
right: 86px;
top: 0;
}
.device-iphone-14-pro .device-home::before {
bottom: 0;
left: 86px;
}
.device-iphone-14-pro.device-silver .device-frame {
border-color: #c8cacb;
box-shadow: inset 0 0 4px 2px white, inset 0 0 0 6px #e2e3e4;
}
.device-iphone-14-pro.device-silver .device-btns {
background: #c8cacb;
}
.device-iphone-14-pro.device-silver .device-btns::after,
.device-iphone-14-pro.device-silver .device-btns::before {
background: #c8cacb;
}
.device-iphone-14-pro.device-silver .device-power {
background: #c8cacb;
}
.device-iphone-14-pro.device-black .device-frame {
border-color: #5c5956;
box-shadow: inset 0 0 4px 2px white, inset 0 0 0 6px #76726f;
}
.device-iphone-14-pro.device-black .device-btns {
background: #5c5956;
}
.device-iphone-14-pro.device-black .device-btns::after,
.device-iphone-14-pro.device-black .device-btns::before {
background: #5c5956;
}
.device-iphone-14-pro.device-black .device-power {
background: #5c5956;
}
.device-iphone-14-pro.device-gold .device-frame {
border-color: #e7d19e;
box-shadow: inset 0 0 4px 2px white, inset 0 0 0 6px #d2ab4c;
}
.device-iphone-14-pro.device-gold .device-btns {
background: #e7d19e;
}
.device-iphone-14-pro.device-gold .device-btns::after,
.device-iphone-14-pro.device-gold .device-btns::before {
background: #e7d19e;
}
.device-iphone-14-pro.device-gold .device-power {
background: #e7d19e;
}
@font-face {
font-family: "Unbounded";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/unbounded-cyr-700.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Unbounded";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/unbounded-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-cyr-500.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/manrope-500.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-cyr-600.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/manrope-600.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-cyr-700.woff2") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Manrope";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/manrope-700.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--teal: #009db4;
--teal-deep: #007f86;
--orange: #f36d21;
--ink: #2f3437;
--muted: #5d6a6e;
--white: #ffffff;
--stores-h: 0px;
--phone-w: min(56vw, 210px);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
margin: 0;
min-height: 100dvh;
color: var(--ink);
font-family: "Manrope", sans-serif;
font-weight: 500;
line-height: 1.45;
background:
radial-gradient(120% 80% at 50% -10%, #ffffff 0%, transparent 55%),
radial-gradient(90% 70% at 100% 20%, rgba(0, 157, 180, 0.16) 0%, transparent 50%),
radial-gradient(80% 60% at 0% 80%, rgba(243, 109, 33, 0.07) 0%, transparent 45%),
linear-gradient(165deg, #f4fcfc 0%, #e7f4f5 45%, #eef8f8 100%);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
.atmosphere {
position: fixed;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.5px),
radial-gradient(circle at 70% 60%, rgba(0, 157, 180, 0.12) 0 1px, transparent 1.5px);
background-size: 48px 48px, 64px 64px;
opacity: 0.45;
mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
}
.stage {
position: relative;
z-index: 1;
width: min(1120px, 100%);
margin: 0 auto;
padding:
max(14px, env(safe-area-inset-top))
18px
calc(var(--stores-h) + 18px);
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"intro"
"phone"
"copy";
justify-items: center;
row-gap: 14px;
}
.intro {
grid-area: intro;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
width: 100%;
}
.copy {
grid-area: copy;
width: min(100%, 520px);
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
z-index: 2;
}
.brand {
display: block;
width: min(210px, 68vw);
height: auto;
}
.title {
margin: 0;
font-family: "Unbounded", "Manrope", sans-serif;
font-weight: 700;
font-size: clamp(1.35rem, 5.8vw, 1.85rem);
line-height: 1.1;
letter-spacing: -0.03em;
white-space: nowrap;
}
.title-row {
display: inline;
}
.title-accent {
color: var(--teal-deep);
}
.lead {
display: none;
margin: 0;
color: var(--muted);
font-size: 0.95rem;
text-align: left;
}
.benefits {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.benefits li {
display: grid;
gap: 2px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 157, 180, 0.14);
transform: translate3d(0, 0, 0);
will-change: transform;
}
.benefits strong {
color: var(--teal-deep);
font-size: 0.9rem;
}
.benefits span {
color: var(--muted);
font-size: 0.82rem;
}
@media (min-width: 768px) {
.benefits li {
transition:
transform 0.35s var(--ease-out),
box-shadow 0.35s ease,
border-color 0.35s ease,
background 0.35s ease;
cursor: default;
}
.benefits li:hover {
transform: translate3d(10px, -4px, 0) scale(1.025);
border-color: rgba(0, 157, 180, 0.4);
background: #fff;
box-shadow: 0 14px 30px rgba(0, 90, 96, 0.14);
}
}
@keyframes benefit-bounce {
0% {
opacity: 0.55;
transform: translate3d(0, 14px, 0) scale(0.985);
}
55% {
opacity: 1;
transform: translate3d(0, -4px, 0) scale(1.012);
}
78% {
transform: translate3d(0, 2px, 0) scale(0.997);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
@media (max-width: 767px) {
.benefits li.is-bounce {
animation: benefit-bounce 0.75s var(--ease-out) both;
animation-delay: var(--bounce-delay, 0s);
}
}
.device-wrap {
grid-area: phone;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
perspective: 1400px;
padding: 4px 8px;
margin-bottom: 8px;
overflow: visible;
}
.phone-scene {
position: relative;
width: var(--phone-w);
height: calc(var(--phone-w) * 868 / 428);
transform-style: preserve-3d;
overflow: visible;
}
.phone-tilt {
width: 100%;
height: 100%;
transform-style: preserve-3d;
will-change: transform;
}
.device-scale {
width: 428px;
height: 868px;
transform: scale(calc(var(--phone-w) / 428px));
transform-origin: top left;
}
.device-iphone-14-pro .device-screen {
position: relative;
overflow: hidden;
width: 100%;
}
.device-iphone-14-pro .device-screen .screens {
position: relative;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
touch-action: pan-y;
}
.screens-track {
display: flex;
height: 100%;
width: 100%;
transform: translate3d(0, 0, 0);
transition: transform 0.55s var(--ease-out);
will-change: transform;
}
.device-iphone-14-pro .device-screen .screen {
position: relative;
flex: 0 0 100%;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
opacity: 1;
transform: none;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}
.device-iphone-14-pro {
filter: drop-shadow(0 26px 40px rgba(15, 40, 45, 0.28));
}
@media (pointer: coarse) {
.device-wrap,
.phone-scene,
.phone-tilt,
.device-scale,
.device,
.screens,
.screens-track {
pointer-events: none;
touch-action: pan-y;
}
.dot {
pointer-events: none;
cursor: default;
}
}
.dots {
display: flex;
gap: 4px;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
margin-top: 2px;
}
.dot {
box-sizing: border-box;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
display: grid;
place-items: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.dot-mark {
display: block;
width: 7px;
height: 7px;
border-radius: 999px;
background: rgba(0, 127, 134, 0.28);
transition: width 0.3s var(--ease-out), background 0.3s ease;
}
.dot.is-active .dot-mark {
width: 18px;
background: var(--teal);
}
.dot:focus-visible {
outline: 2px solid var(--teal);
outline-offset: 2px;
}
.stores {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
padding:
10px 14px
calc(10px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, rgba(244, 252, 252, 0) 0%, rgba(236, 247, 248, 0.92) 28%, rgba(236, 247, 248, 0.98) 100%);
backdrop-filter: blur(10px);
}
.store-btn {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 8px 14px;
border-radius: 14px;
color: var(--white);
text-decoration: none;
box-shadow: 0 8px 18px rgba(47, 52, 55, 0.14);
transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
animation: none;
}
.store-btn:nth-child(1) {
background: linear-gradient(135deg, #1c1f22 0%, #343a40 100%);
}
.store-btn:nth-child(2) {
background: linear-gradient(135deg, #009db4 0%, #007f86 100%);
}
.store-btn:nth-child(3) {
background: linear-gradient(135deg, #2b71f6 0%, #1a5de0 100%);
}
.store-btn:hover {
transform: translateY(-2px);
}
.store-btn:focus-visible {
outline: 3px solid rgba(0, 157, 180, 0.45);
outline-offset: 3px;
}
.store-icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
display: block;
}
.store-icon--img {
border-radius: 6px;
background: #fff;
}
.store-text {
display: flex;
flex-direction: column;
}
.store-eyebrow {
font-size: 0.62rem;
opacity: 0.82;
}
.store-name {
font-size: 0.98rem;
font-weight: 700;
line-height: 1.1;
}
.anim {
opacity: 0;
transform: translateY(14px);
}
body.is-ready .anim {
animation: rise-in 0.75s var(--ease-out) forwards;
}
body.is-ready [data-anim="brand"] { animation-delay: 0.04s; }
body.is-ready [data-anim="title"] { animation-delay: 0.12s; }
body.is-ready [data-anim="phone"] {
animation-name: phone-in;
animation-delay: 0.18s;
animation-duration: 0.95s;
}
body.is-ready [data-anim="lead"] { animation-delay: 0.3s; }
body.is-ready [data-anim="benefits"] { animation-delay: 0.38s; }
body.is-ready [data-anim="stores"] { animation-delay: 0.45s; }
@keyframes rise-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes phone-in {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
body.is-ready .phone-tilt {
animation: phone-float 6s ease-in-out 1.1s infinite;
}
@keyframes phone-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -6px; }
}
@media (min-width: 480px) {
.stores {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) {
.stage {
min-height: 100dvh;
grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
grid-template-areas:
"intro phone"
"copy phone";
align-content: center;
align-items: center;
column-gap: 36px;
row-gap: 18px;
padding:
32px 40px
calc(var(--stores-h) + 28px);
justify-items: stretch;
}
.intro,
.copy {
justify-self: start;
text-align: left;
align-items: flex-start;
}
.intro {
gap: 18px;
}
.brand {
width: 240px;
}
.title {
font-size: clamp(2.5rem, 4vw, 3.4rem);
white-space: normal;
}
.title-row {
display: block;
}
.lead {
display: block;
font-size: 1.08rem;
max-width: 38ch;
}
.device-wrap {
justify-self: center;
}
:root {
--phone-w: min(28vw, 290px);
}
.stores {
left: 0;
right: 0;
bottom: 22px;
width: min(860px, calc(100% - 64px));
margin-inline: auto;
border-radius: 22px;
padding: 14px 16px;
gap: 12px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(0, 157, 180, 0.12);
box-shadow: 0 18px 44px rgba(20, 60, 70, 0.14);
}
.store-btn {
min-height: 64px;
padding: 12px 18px;
border-radius: 16px;
gap: 12px;
justify-content: center;
}
.store-icon,
.store-icon--img {
width: 28px;
height: 28px;
}
.store-eyebrow {
font-size: 0.72rem;
}
.store-name {
font-size: 1.12rem;
}
}
@media (prefers-reduced-motion: reduce) {
.anim,
body.is-ready .anim,
body.is-ready .phone-tilt,
.screen,
.screens-track,
.store-btn,
.benefits li {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
.phone-tilt {
transform: none !important;
}
.device-scale {
transform: scale(calc(var(--phone-w) / 428px)) !important;
}
}