@property --zv { syntax: "<integer>"; inherits: false; initial-value: 10; }

body.home {
  background: #eef4fb;
  --deep: #eef4fb;
  --panel: #ffffff;
  --ink: #2b3d5c;
  --ink-strong: #0e2a55;
  --ink-soft: #4f6385;
  --accent: #1f5fbf;
  --zoom: #1f4e96;
  --line: rgba(14, 42, 85, 0.14);
  --edge: #d3e0f2;
  --lift: 0 18px 44px rgba(14, 42, 85, 0.14);
}
.home .topbar, .home .hx, .home .finale, .home .footer,
.home .zoomshow__screen, .home .vid, .home .zooms figcaption {
  --ink: #d6e3f7;
  --ink-strong: #ffffff;
  --ink-soft: #9fb6d9;
  --accent: #3e8ef0;
  --zoom: #ffd60a;
  --line: rgba(191, 214, 245, 0.14);
}

.home .topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
}

h2 { text-wrap: balance; }
.section-title { text-align: center; font-size: clamp(34px, 5.4vw, 56px); font-weight: 800; letter-spacing: -0.035em; }

.hx {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  padding: 120px 24px 150px;
  background:
    radial-gradient(900px 620px at 78% 38%, rgba(62, 142, 240, 0.55), transparent 65%),
    radial-gradient(700px 500px at 8% 0%, rgba(127, 184, 255, 0.28), transparent 70%),
    linear-gradient(180deg, #1f4e96 0%, #0e2a55 58%, #0a1f42 100%);

  border-bottom: 2px solid var(--deep);
}
.hx__inner {
  position: relative; z-index: 1;
  width: 100%; max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px; align-items: center;
}
.hx__icon { width: 84px; height: 84px; margin-bottom: 26px; filter: drop-shadow(0 12px 30px rgba(0, 10, 30, 0.55)); }
.hx h1 {
  font-size: clamp(48px, 7vw, 100px); font-weight: 800;
  letter-spacing: -0.045em; line-height: 0.94; color: #fff;
}
.nowrap { white-space: nowrap; }

.accent { color: var(--zoom); }
.hx__lead { font-size: clamp(19px, 1.7vw, 22px); color: #c9dbf5; max-width: 540px; margin-top: 26px; }
.hx__lead strong { color: #fff; font-weight: 700; }
.hx__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 34px; }
.hx__cta .badge { margin: 0; }
.hx__free { font-size: 15px; line-height: 1.45; color: var(--ink-soft); }

.hx__device { position: relative; display: grid; place-items: center; }
.hx__glow {
  position: absolute; width: 90%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(62, 142, 240, 0.55), rgba(255, 214, 10, 0.08) 55%, transparent 70%);
  filter: blur(20px);
}

.hx__phone {
  position: relative; box-sizing: border-box;

  width: min(340px, 78vw, calc((100svh - 190px) * 0.47));
  padding: 2.8%; border-radius: 15.5% / 7.3%; background: #0b0f18;
  box-shadow: 0 0 0 2px #3a4a66;
  filter: drop-shadow(0 40px 70px rgba(0, 6, 20, 0.65));
  animation: float 8s ease-in-out infinite;
}
.hx__screen { position: relative; aspect-ratio: 402 / 874; overflow: hidden; border-radius: 13.4% / 6.2%; background: #1a2438; }
.hx__screen img, .hx__ui { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx__screen img { object-fit: cover; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

.hx__waves { position: absolute; z-index: 2; left: 0; right: 0; bottom: -2px; height: 170px; overflow: hidden; pointer-events: none; }
.hx__wave { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.hx__wave--back { fill: #7fb8ff; fill-opacity: 0.12; animation: drift 28s linear infinite; }

.hx__wave--mid { fill: #2a5fb0; animation: drift 23s linear infinite; }
.hx__wave--front { fill: var(--deep); animation: drift 18s linear infinite reverse; }
@keyframes drift { to { transform: translateX(-50%); } }

.rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.3s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
.hx__device.rise { animation-duration: 1.2s; }

.mark {
  max-width: 1100px; margin: 0 auto; padding: 110px 24px 90px;
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 72px; align-items: center;
}
.spot { position: relative; margin: 0 0 14% 8%; container-type: inline-size; }
.spot > img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 30px 70px rgba(14, 42, 85, 0.28);
}

.spot__loupe, .spot__ring {
  position: absolute; width: 50cqw; aspect-ratio: 1; border-radius: 50%;
  left: -8cqw; top: 66cqw;
}
.spot__loupe {
  overflow: hidden; background: #7a2f28;
  border: 4px solid #fff;
  box-shadow: 0 20px 50px rgba(14, 42, 85, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.spot__loupe img {
  position: absolute; max-width: none; width: 190cqw; height: auto;
  left: calc(-7.3cqw - 4px); top: calc(-147.9cqw - 4px);
}
.spot__ring { border: 3px solid var(--zoom); opacity: 0; animation: ping 2.8s cubic-bezier(0.2, 0.6, 0.3, 1) infinite 1s; }
@keyframes ping {
  0% { opacity: 0.9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}
.mark__text h2 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.035em; }
.mark__text p { font-size: 20px; margin-top: 16px; }
.mark__text .badge { margin-top: 26px; }

.statement { max-width: 1000px; margin: 0 auto; padding: 90px 24px 24px; text-align: center; }
.moments {
  font-size: clamp(38px, 7vw, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02;
  color: var(--ink-strong); margin-bottom: 56px;
}
.moments span { display: block; }
.moments span:nth-child(3) { color: var(--zoom); }
.statement__body h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; }
.statement__body p { font-size: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }

.zoomshow { position: relative; timeline-scope: --zs; }

.zoomshow__run { height: 170vh; }

.zoomshow__timing { position: absolute; top: 0; left: 0; width: 1px; height: 270vh; pointer-events: none; view-timeline-name: --zs; }
.zoomshow__sticky {
  position: sticky; top: 0; overflow: hidden;

  padding-top: 11svh;
  background: radial-gradient(820px 480px at 50% 360px, rgba(62, 142, 240, 0.2), transparent 70%);
}
.zoomshow__inner {
  width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px;
  display: grid; gap: 40px; text-align: center;
}
.zoomshow__copy h2 { font-size: clamp(36px, 5.2vw, 68px); font-weight: 800; letter-spacing: -0.04em; }
.zoomshow__copy p { font-size: 20px; max-width: 620px; margin: 0 auto; }
.zoomshow__copy .zoomtext { color: var(--zoom); }
.zoomshow__phone {
  justify-self: center; box-sizing: border-box;
  width: min(720px, 100%, calc((100svh - 360px) * 2.1));
  padding: 9px; border-radius: 42px; background: #0b0f18;
  box-shadow: 0 0 0 2px #3a4a66, 0 36px 70px rgba(14, 42, 85, 0.35);
  transform: rotate(3deg);
}
.zoomshow__screen {
  position: relative; aspect-ratio: 874 / 402; overflow: hidden; border-radius: 33px;
  background: #1a2438; container-type: inline-size;
}
.zoomshow__screen::before {
  content: ""; position: absolute; z-index: 3; left: 1.4%; top: 50%; width: 4.2%; height: 30%;
  transform: translateY(-50%); border-radius: 999px; background: #000;
}

.zoomshow__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform-origin: 53.8% 33.3%;
}
.zoomshow__ui { position: absolute; inset: 0; width: 100%; height: 100%; }
.zoomshow__dial { transform-box: view-box; transform-origin: 829.9px 201px; }
.zoomshow__readout {
  position: absolute; left: 66.1%; top: 50%; transform: translate(-50%, -50%);
  width: 7.2cqw; padding: 0.5cqw 0; border-radius: 999px; text-align: center;
  background: rgba(28, 28, 30, 0.72);
  color: var(--zoom); font-size: 1.8cqw; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums;
}

.zval { counter-reset: zi calc(round(down, var(--zv) / 10)) zf calc(mod(var(--zv), 10)); }
.zval::before { content: counter(zi) "." counter(zf) "×"; }

.zoomshow__fallback { display: none; max-width: 760px; margin: 0 auto; padding: 40px 24px 0; text-align: center; }
.zoomshow__fallback h2 { font-size: clamp(34px, 5vw, 52px); font-weight: 800; letter-spacing: -0.035em; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zoomshow__photo { animation: zs-zoom linear both; animation-timeline: --zs; animation-range: contain 4% contain 92%; }
    .zoomshow__dial { animation: zs-dial linear both; animation-timeline: --zs; animation-range: contain 4% contain 92%; }
    .zval { animation: zs-count linear both; animation-timeline: --zs; animation-range: contain 4% contain 92%; }
  }
}

@keyframes zs-zoom {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(-0.81%, 3.55%) scale(1.107); }
  50% { transform: translate(-1.71%, 7.47%) scale(1.225); }
  75% { transform: translate(-2.7%, 11.79%) scale(1.355); }
  100% { transform: translate(-3.8%, 16.6%) scale(1.5); }
}
@keyframes zs-count {
  0% { --zv: 10; } 24% { --zv: 11; } 45% { --zv: 12; } 65% { --zv: 13; } 83% { --zv: 14; } 100% { --zv: 15; }
}
@keyframes zs-dial { to { transform: rotate(-19.5deg); } }

@supports not (animation-timeline: view()) {
  .zoomshow__sticky { position: static; padding-top: 0; background: none; }
  .zoomshow__inner, .zoomshow__run, .zoomshow__timing { display: none; }
  .zoomshow__fallback { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .zoomshow__sticky { position: static; padding-top: 0; background: none; }
  .zoomshow__inner, .zoomshow__run, .zoomshow__timing { display: none; }
  .zoomshow__fallback { display: block; }
}

.reachmore { max-width: 700px; margin: 0 auto; padding: 64px 24px 0; }
.reachmore h3 { text-align: center; font-size: 24px; letter-spacing: -0.02em; }
.reachmore .fineprint { margin-top: 18px; text-align: center; }

.bento { max-width: 1100px; margin: 0 auto; padding: 110px 24px 40px; }
.bento__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; }
.tile-x {
  padding: 26px 28px 30px; border-radius: 28px; overflow: hidden;
  background: #fff;
  border: 1px solid var(--edge);
  box-shadow: var(--lift);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.tile-x:hover { transform: translateY(-4px); border-color: #8fb4e8; }
.tile-x__vis {
  height: 190px; margin: -6px -8px 22px; border-radius: 20px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(62, 142, 240, 0.22), transparent 70%);
}
.tile-x h3 { font-size: 24px; letter-spacing: -0.02em; }
.tile-x p { font-size: 17px; }

.tile-x__vis--photo { position: relative; height: auto; aspect-ratio: 3 / 2; overflow: hidden; background: #0e1d33; }
.tile-x__vis--photo > img:only-child { position: absolute; inset: 0; }
.tile-x__vis--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tile-x__vis--controls { container-type: inline-size; }
.tile-x__screen { position: absolute; left: 0; top: -141.8cqw; width: 100%; aspect-ratio: 402 / 874; }
.tile-x__screen img, .tile-x__ui { position: absolute; inset: 0; width: 100%; height: 100%; }

.tile-x__vis--burst { display: block; background: radial-gradient(circle at 50% 45%, rgba(62, 142, 240, 0.22), transparent 70%); }
.tile-x__vis--burst img {
  position: absolute; width: 62%; height: auto; border-radius: 10px;
  outline: 1.5px solid rgba(255, 255, 255, 0.75); outline-offset: -1px;
  box-shadow: 0 8px 22px rgba(14, 42, 85, 0.35);
}
.tile-x__vis--burst .f1 { left: 5%; top: 4%; }
.tile-x__vis--burst .f2 { left: 14%; top: 12%; }
.tile-x__vis--burst .f3 { left: 23%; top: 20%; }
.tile-x__vis--burst .f4 { left: 32%; top: 28%; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .tile-x:has(.tile-x__vis--burst) { view-timeline-name: --burst; }
    .tile-x__vis--burst img { animation: stack linear both; animation-timeline: --burst; }
    .tile-x__vis--burst .f1 { animation-range: cover 20% cover 27%; }
    .tile-x__vis--burst .f2 { animation-range: cover 25% cover 32%; }
    .tile-x__vis--burst .f3 { animation-range: cover 30% cover 37%; }
    .tile-x__vis--burst .f4 { animation-range: cover 35% cover 42%; }
  }
}
@keyframes stack { from { opacity: 0; transform: translate(-7%, -9%) scale(1.06); } }
.tile-x__vis--library { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 4px; place-items: stretch; }
.tile-x__vis--library img { min-height: 0; }

.video-x { max-width: 900px; margin: 0 auto; padding: 110px 24px 60px; text-align: center; }

.video-x h2 { font-size: clamp(32px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.035em; }
.video-x p { font-size: 20px; max-width: 680px; margin: 0 auto; }
.stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 64px); margin-top: 36px; }
.stats b {
  display: block; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink-strong);
}
.stats span { display: block; margin-top: 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }

.vid {
  width: min(760px, 100%); margin: 0 auto 48px;
  padding: 10px; border-radius: 44px; background: #0b0f18;
  box-shadow: 0 0 0 2px #3a4a66, 0 36px 70px rgba(14, 42, 85, 0.35);
}
.vid__screen { position: relative; aspect-ratio: 874 / 402; overflow: hidden; border-radius: 34px; background: #1a2438; }
.vid__screen::before {
  content: ""; position: absolute; z-index: 3; left: 1.4%; top: 50%; width: 4.2%; height: 30%;
  transform: translateY(-50%); border-radius: 999px; background: #000;
}

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

video.vid__photo { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  video.vid__photo { display: none; }
}

.privacy-x { max-width: 1000px; margin: 0 auto; padding: 90px 24px 40px; text-align: center; }
.privacy-x__head h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.privacy-x__head p { font-size: 20px; }
.privacy-x__list {
  list-style: none; margin-top: 34px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.privacy-x__list li {
  display: grid; justify-items: center; gap: 12px; padding: 26px 18px;
  border-radius: 22px; background: #fff; border: 1px solid var(--edge);
  color: var(--ink-strong); font-size: 17px; font-weight: 500;
}
.privacy-x__list svg { width: 34px; height: 34px; color: var(--zoom); }
.privacy-x__more { margin-top: 24px; font-size: 16px; }

.price-x { max-width: 900px; margin: 0 auto; padding: 90px 24px 40px; }
.price-x__card {
  text-align: center; padding: 56px clamp(24px, 6vw, 72px);
  border-radius: 34px; border: 1.5px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, rgba(62, 142, 240, 0.9), rgba(127, 184, 255, 0.2) 45%, rgba(255, 214, 10, 0.8)) border-box;
  box-shadow: 0 30px 70px rgba(14, 42, 85, 0.16);
}
.price-x__card h2 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; letter-spacing: -0.035em; }
.price-x__card > p { font-size: 20px; max-width: 620px; margin: 0 auto; }
.price-x__perks {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  max-width: 600px; margin: 34px auto 10px; text-align: start;
}
.price-x__perks li {
  display: flex; gap: 12px; align-items: center; padding: 14px 16px;
  border-radius: 16px; background: var(--deep); color: var(--ink-strong); font-size: 16px;
}
.price-x__perks svg { width: 24px; height: 24px; color: var(--accent); flex: none; }

.faq-x { max-width: 760px; margin: 0 auto; padding: 100px 24px 20px; }
.faq-x .faq { margin-top: 30px; }

.finale {

  text-align: center; padding: 110px 24px 70px; margin-top: 90px;
  background:

    radial-gradient(ellipse min(520px, 60vw) 40% at 50% 42%, rgba(62, 142, 240, 0.45), transparent 70%),
    linear-gradient(180deg, #1f4e96 0%, #12336a 100%);
}
.finale__icon { width: 120px; height: 120px; margin: 0 auto 30px; filter: drop-shadow(0 20px 50px rgba(62, 142, 240, 0.55)); }
.finale h2 { font-size: clamp(40px, 6.4vw, 76px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; max-width: 14ch; margin: 0 auto; }
.finale .badge { margin-top: 36px; }
.finale__free { margin-top: 14px; font-size: 15px; }

.home .footer { background: linear-gradient(180deg, #12336a 0%, #0e2a55 100%); }

.dock {
  position: fixed; z-index: 20; left: 50%; bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: none; align-items: center; gap: 10px;
  padding: 8px 18px 8px 8px; border-radius: 999px;
  background: #0e2a55; color: #fff; text-decoration: none;
  box-shadow: 0 12px 30px rgba(14, 42, 85, 0.4);
  font-weight: 700; font-size: 16px; white-space: nowrap;
}
.dock img { width: 28px; height: 28px; border-radius: 7px; }
.dock small { font-weight: 500; font-size: 13px; color: #b9cce6; }
.dock:focus-visible { outline: 3px solid var(--zoom); outline-offset: 3px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .moments span { animation: light linear both; animation-timeline: view(); animation-range: entry 40% cover 42%; }
  }
}
@keyframes reveal { from { opacity: 0; transform: translateY(44px) scale(0.98); } }
@keyframes light { from { opacity: 0.12; transform: translateY(12px); } }

@media (max-width: 900px) {
  .hx { padding: 104px 20px 130px; text-align: center; }
  .hx__inner { grid-template-columns: 1fr; gap: 26px; }

  .hx__inner > * { min-width: 0; }
  .hx__icon { margin-left: auto; margin-right: auto; width: 72px; height: 72px; }
  .hx__lead { margin-left: auto; margin-right: auto; }
  .hx__cta { justify-content: center; flex-direction: column; gap: 10px; }
  .hx__phone { width: min(290px, 72vw); }
  .hx { min-height: 0; }
  .mark { grid-template-columns: 1fr; gap: 30px; padding-top: 70px; text-align: center; }
  .spot { max-width: 420px; width: 88%; justify-self: center; }
  .bento__grid { grid-template-columns: 1fr; }
  .privacy-x__list { grid-template-columns: 1fr; }
  .price-x__perks { grid-template-columns: 1fr; }
  .dock { display: inline-flex; }
  .zoomshow__sticky { padding-top: 10svh; background: radial-gradient(520px 360px at 50% 300px, rgba(62, 142, 240, 0.2), transparent 70%); }
  .zoomshow__inner { gap: 34px; }
  .zoomshow__copy h2 { font-size: clamp(30px, 7.4vw, 48px); margin-bottom: 8px; }
  .zoomshow__copy p { font-size: 17px; }
  .zoomshow__phone { width: min(560px, 100%, calc((100svh - 360px) * 2.1)); padding: 6px; border-radius: 26px; }
  .zoomshow__screen { border-radius: 21px; }
  .footer { padding-bottom: 110px; }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {

      .dock {
        animation: dock-in linear both, dock-out linear forwards;
        animation-timeline: scroll(root), scroll(root);
        animation-range: 60vh 80vh, calc(100% - 560px) calc(100% - 440px);
      }
    }
  }
}
@keyframes dock-in { from { opacity: 0; visibility: hidden; transform: translate(-50%, 24px); } }
@keyframes dock-out { to { opacity: 0; visibility: hidden; transform: translate(-50%, 24px); } }

@media (max-width: 600px) {
  .price-x__card { padding: 40px 22px; }

  .hx h1 { font-size: clamp(30px, 10.4vw, 48px); text-wrap: balance; overflow-wrap: break-word; }
  .hx h1 .nowrap { white-space: normal; }

  .mark { padding-top: 56px; padding-bottom: 48px; }
  .statement { padding: 56px 20px 16px; }
  .reachmore { padding: 44px 20px 0; }
  .bento { padding: 64px 16px 24px; }
  .video-x { padding: 56px 20px 32px; }
  .privacy-x { padding: 56px 20px 24px; }
  .price-x { padding: 56px 16px 24px; }
  .faq-x { padding: 56px 20px 16px; }
  .finale { margin-top: 56px; padding-top: 72px; padding-bottom: 56px; }
  .dock { width: max-content; max-width: calc(100vw - 24px); white-space: normal; line-height: 1.2; text-align: start; }
  .dock img { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .hx__phone, .hx__wave, .spot__ring { animation: none; }
  .tile-x { transition: none; }
}

.hx__screen, .zoomshow__screen, .vid__screen, .tile-x__screen { direction: ltr; }