@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700;900&family=Noto+Sans+JP:wght@400;500;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
/* ========================================
   Reset & Base
======================================== */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  height: 100%;
}

/* keep scrollbar gutter to avoid layout shift */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  color: #555;
  background: #fff;
}

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

img {
  display: block;
  width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline-offset: 2px;
}

/* global CSS variables */
:root {
  /* cheki image insets */
  --cheki-top: 8%;
  --cheki-right: 8%;
  --cheki-bottom: 30%;
  --cheki-left: 8%;

  /* offcanvas defaults */
  --oc-backdrop: linear-gradient(135deg, rgba(141, 130, 235, 0.78), rgba(248, 154, 187, 0.78));
  --oc-width-pc: 33.333vw;
  --oc-width-min: 420px;
  --oc-width-sp: 100vw;
  --oc-bg: #8d82eb;
}

/* ========================================
   Hero – base (desktop first)
======================================== */

/* chat balloon container (desktop) */
.hero-chat {
  position: absolute;
  left: 35%;
  top: 54%;
  transform: translateX(0);
  width: 26%;
  max-width: 26%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 4;
}

/* each chat bubble image (added by JS) */
.hero-chat img.chat-item {
  position: static;
  height: 36px;
  width: auto;
  display: block;
  opacity: 0;
  transform: translateY(6px);
  animation: chat-in 0.35s ease-out forwards;
}

/* chat entrance animation */
@keyframes chat-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* reduced motion – disable chat animation */
@media (prefers-reduced-motion: reduce) {
  .hero-chat img.chat-item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* hero section wrapper and slider */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #e6ddff;
}

/* slider wrapper */
.hero-slider {
  position: relative;
  width: 100%;
}

/* individual slide (cross-fade stack) */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease-in-out;
}

.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* first slide is relative so layout is computed correctly */
.hero-slide:first-child {
  position: relative;
}

/* blurred cafe background */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  z-index: 0;
}

/* full hero stage – 1375 x 768 ratio on desktop */
.hero-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 1375 / 768;
  pointer-events: none;
}

/* all hero images inside hero-inner */
.hero-inner img {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* catchphrase (desktop) */
.hero-copy-pc {
  width: 100%;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  z-index: 3;
}

/* smartphone frame */
.hero-phone {
  width: 21%;
  left: 50%;
  top: 6%;
  transform: translateX(-50%);
  z-index: 1;
}

/* main character */
.hero-girl {
  width: 39%;
  left: 50%;
  top: 4%;
  transform: translateX(-50%);
  z-index: 2;
}

/* cheering cats (desktop left/right) */
.hero-cats-left {
  width: 26%;
  left: 0;
  bottom: 0;
  z-index: 4;
}

.hero-cats-right {
  width: 26%;
  right: 0;
  bottom: 0;
  z-index: 4;
}

/* logo */
.hero-logo {
  width: 50%;
  min-width: 280px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 5;
}

/* bottom arc (desktop) */
.hero-arc-pc {
  width: 150%;
  left: 50%;
  bottom: -1%;
  transform: translateX(-50%);
  z-index: 2;
}

/* mobile-only hero images are hidden on desktop */
.hero-copy-sp,
.hero-cats-sp,
.hero-arc-sp {
  display: none;
}

/* ========================================
   Movie (lead section)
======================================== */

.movie {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 80px 40px 140px;
  width: 100%;
  background: linear-gradient(0deg, #ffb4c8 0%, #d9d2ff 100%);
  overflow: visible;
  margin-top: 0;
  z-index: 0;
}

/* subtle overlay over background only */
.movie::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/img/movie_bk.svg) no-repeat center center;
  background-size: cover;
  opacity: 0.32;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}

/* actual content sits above overlay */
.movie > * {
  position: relative;
  z-index: 2;
}

.movie .div {
  position: relative;
  width: min(1214.5px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

/* section label (shared with feature section) */
.div-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 60px;
  background: linear-gradient(90deg, #f76cb4 0%, #e969db 38%, #8d82eb 77%, #6184f9 100%);
}

.text-wrapper {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  color: #fff;
  font-size: clamp(24px, 4vw, 48px);
  letter-spacing: clamp(8px, 0vw, 19.2px);
  display: inline-flex;
  align-items: center;
  line-height: normal;
}

.frame-3 .text-wrapper {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  color: #fff;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: clamp(8px, 0vw, 19.2px);
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.div-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.view-2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.text-wrapper-2 {
  width: 90%;
}

.cas-live {
  color: #fff;
  text-shadow: 0 0 10px #fb6da799;
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 28px);
  line-height: 1.6;
}

.movie-wrapper {
  width: 100%;
  max-width: 672px;
  aspect-ratio: 16 / 9;
}

.movie-2 {
  width: 100%;
  height: 100%;
  position: relative;
  box-shadow: 20px 20px 0 #fdf7ff;
}

.rectangle {
  position: absolute;
  inset: -10px;
  border: 10px solid #fdf7ff;
  background: #cbcbcb;
}

.text-wrapper-3 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff80;
  font-size: clamp(20px, 4vw, 48px);
}

/* movie decorations (camera + ribbon) */
.movie-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* ribbon on left side */
.movie-deco-img01 {
  left: -100px;
  top: -400px;
  width: 390px;
  animation: movie-float-ribbon 4s ease-in-out infinite alternate;
}

/* camera on right side */
.movie-deco-img02 {
  right: 0px;
  top: 30px;
  width: 160px;
  animation: movie-float-camera 3s ease-in-out infinite alternate;
}

@keyframes movie-float-camera {
  0% {
    transform: translate(0, 0) rotate(-4deg);
  }
  50% {
    transform: translate(-6px, -6px) rotate(-2deg);
  }
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }
}

@keyframes movie-float-ribbon {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(10px, -6px) rotate(2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* movie – reduced motion */
@media (prefers-reduced-motion: reduce) {
  .movie-deco {
    animation: none !important;
    transform: none !important;
  }
}

/* ========================================
   CTA (top & bottom, shared)
======================================== */

.new {
  position: relative;
  width: 100%;
  padding: 100px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  background: url(/img/ad1_new_bk.webp) no-repeat center center;
  background-size: cover;
  overflow: visible;
}

/* parallax-style background only on larger screens */
@media (min-width: 1025px) {
  .new {
    background-attachment: fixed;
  }
}

.cta {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

.text-wrapper-4 {
  width: 80%;
}

/* single mock-up image */
.mock-up {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

.mock-up-app {
  position: static;
  display: block;
  width: clamp(260px, 32vw, 420px);
  height: auto;
  transform: none;
}

/* legacy helper – keep hidden */
.works-mockup {
  display: none !important;
}

/* CTA text block */
.text-icon {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
}

.view-3 {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.label {
  width: 203px;
  height: 8px;
}

.h {
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.frame,
.frame-2 {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  background: #ffffffb2;
  border-radius: 10px;
  box-shadow: 0 0 20px #fb6da726;
}

.text-wrapper-5 {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
  color: #555;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 2.2;
}

/* CTA – generic store badges row (baseline) */
.text-icon > .view-3:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 20px);
}

.text-icon > .view-3:last-child .img {
  height: clamp(45px, 4vw, 60px);
  width: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

/* CTA decorations (ribbon + mic) */
.cta-deco {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

/* mic bottom-left */
.cta-deco-mic {
  left: clamp(8px, 5vw, 40px);
  bottom: -100px;
  width: 150px;
  animation: cta-mic-float 3s ease-in-out infinite alternate;
}

/* ribbon top-right */
.cta-deco-ribbon {
  right: clamp(8px, 5vw, 40px);
  top: -100px;
  width: 210px;
  animation: cta-ribbon-float 4s ease-in-out infinite alternate;
}

@keyframes cta-mic-float {
  0% {
    transform: translate(0, 0) rotate(-4deg);
  }
  50% {
    transform: translate(0, -8px) rotate(-2deg);
  }
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }
}

@keyframes cta-ribbon-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(8px, -6px) rotate(2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* CTA – reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cta-deco {
    animation: none !important;
    transform: none !important;
  }
}

/* ========================================
   Flow (4 steps)
======================================== */

.flow {
  width: 100%;
  background: #cde0ff;
  padding: 120px 40px;
  display: grid;
  place-items: center;
}

.view-4 {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
}

.element {
  width: min(848px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.text-wrapper-6 {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  background: linear-gradient(90deg, #f76cb4 0%, #e969db 38%, #8d82eb 77%, #6184f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.view-5 {
  position: relative;
  width: min(708px, 100%);
  height: 90px;
}

.frame-3 {
  position: relative;
  inset: 0 auto auto 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 60px;
  background: linear-gradient(90deg, #f76cb4 0%, #e969db 38%, #8d82eb 77%, #6184f9 100%);
}

.text-wrapper-7 {
  position: relative;
  top: -6px;
  color: #fff;
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-size: clamp(64px, 8vw, 100px);
  letter-spacing: clamp(10px, 0vw, 56px);
}

.element-2 {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* row layouts: image + description (desktop) */
.view-6 {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
}

.view-12 {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: center;
  padding: 20px 0;
}

.img-2,
.element-3 {
  width: min(360px, 44vw);
}

.view-7,
.view-14,
.view-wrapper {
  width: 100%;
}

.view-8 {
  display: inline-flex;
  align-items: flex-end;
}

.vector {
  width: 26px;
  height: 26px;
}

.step-wrapper {
  background: #fff;
  border-radius: 10px 10px 10px 0;
  padding: 20px 0 40px;
  width: 100%;
  max-width: 560px;
}

.view-13 {
  background: #fff;
  border-radius: 10px 10px 0 10px;
  padding: 20px 0 40px;
  width: 100%;
  max-width: 560px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.view-9 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.view-10 {
  position: relative;
  left: -3px;
  width: 84px;
  padding: 10px 0;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 3px solid #fff;
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(90deg, #fca2c3 0%, #a6c0fe 100%);
}

.text-wrapper-8 {
  color: #fff;
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-size: 16px;
}

.text-wrapper-9 {
  color: #fff;
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-size: 40px;
  letter-spacing: 4px;
}

.text-wrapper-10 {
  width: 70%;
}

.view-11 {
  width: 100%;
  max-width: 560px;
  padding: 0 40px;
}

.text-wrapper-11 {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
  color: #555;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.8;
  text-align: justify;
}

/* flow slider base */
.flow-steps {
  position: relative;
  width: 100%;
}

.flow-window {
  width: 100%;
}

.flow-track {
  width: 100%;
  transition: transform 0.4s ease;
}

.flow-step {
  /* desktop layout stays block-level */
}

.flow-arrow {
  display: none;
}

/* step visuals with 4 decorative images */
.step-visual {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-visual .step-main {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* common deco style */
.step-deco {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.18));
  opacity: 0;
  transform: scale(0.85);
  animation-name: deco-fade, deco-float;
  animation-duration: 0.85s, 3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-direction: normal, alternate;
  animation-delay: var(--deco-delay, 0s), calc(var(--deco-delay, 0s) + 0.85s);
  animation-fill-mode: forwards, both;
}

/* deco fade-in */
@keyframes deco-fade {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* deco floating wiggle */
@keyframes deco-float {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(var(--float-x, 10px), var(--float-y, 2px)) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

/* individual deco positions */
.deco-party {
  left: -40px;
  top: 4%;
  width: 96px;
  --float-x: 10px;
  --float-y: 4px;
  --deco-delay: 0.05s;
}

.deco-balloon {
  left: -48px;
  bottom: 6%;
  width: 80px;
  --float-x: 14px;
  --float-y: -6px;
  --deco-delay: 0.15s;
}

.deco-boy {
  right: -52px;
  top: 10%;
  width: 90px;
  --float-x: -12px;
  --float-y: -4px;
  --deco-delay: 0.25s;
}

.deco-sparkle {
  right: -40px;
  bottom: 9%;
  width: 84px;
  --float-x: -10px;
  --float-y: 3px;
  --deco-delay: 0.35s;
}

/* step deco – reduced motion */
@media (prefers-reduced-motion: reduce) {
  .step-deco {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ========================================
   Feature (3 cards) & Cheki
======================================== */

.view-15 {
  width: min(1210px, 100%);
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  padding-bottom: 120px;
}

.element-4 {
  width: min(848px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.text-wrapper-12 {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-size: clamp(24px, 3vw, 36px);
  background: linear-gradient(90deg, #fc6da2 0%, #8e7cdc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* cheki section wrapper */
.cheki-pin {
  position: relative;
  background: linear-gradient(360deg, #ffb4c8 0%, #d9d2ff 100%);
  width: 100%;
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* soft overlay behind cards */
.cheki-pin::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(/img/movie_bk.svg) no-repeat center center;
  background-size: cover;
  opacity: 0.8;
  filter: brightness(0) invert(1);
  pointer-events: none;
  z-index: 1;
}

/* content above overlay */
.cheki-pin > * {
  position: relative;
  z-index: 2;
}

/* ribbon/star decorations */
.cheki-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* left decoration (ribbon + headband) */
.cheki-deco-left {
  left: clamp(20px, 4vw, 40px);
  top: -40px;
  width: 210px;
  animation: cheki-left-float 4s ease-in-out infinite alternate;
}

/* right decoration (blue ribbon) */
.cheki-deco-right {
  right: clamp(20px, 4vw, 40px);
  top: -80px;
  width: 230px;
  animation: cheki-right-float 4.2s ease-in-out infinite alternate;
}

@keyframes cheki-left-float {
  0% {
    transform: translate(0, 0) rotate(-2deg);
  }
  50% {
    transform: translate(6px, 6px) rotate(1deg);
  }
  100% {
    transform: translate(0, 0) rotate(-2deg);
  }
}

@keyframes cheki-right-float {
  0% {
    transform: translate(0, 0) rotate(2deg);
  }
  50% {
    transform: translate(-8px, -6px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(2deg);
  }
}

/* cheki deco – reduced motion */
@media (prefers-reduced-motion: reduce) {
  .cheki-deco {
    animation: none !important;
    transform: none !important;
  }
}

/* polaroid cards (desktop / tablet) */
.cheki-sticky {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  will-change: transform;
  z-index: 9;
}

.polaroid {
  --p: 0;
  position: relative;
  width: clamp(260px, 28vw, 360px);
  aspect-ratio: 390 / 558;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.22);
  transform: rotate(calc(var(--p) * 0.6deg));
  overflow: hidden;
}

.polaroid-window {
  position: absolute;
  inset: var(--cheki-top) var(--cheki-right) var(--cheki-bottom) var(--cheki-left);
  border-radius: var(--cheki-radius);
  overflow: hidden;
}

.cheki_bk01 {
  background: #ffc393;
}

.cheki_bk02 {
  background: #8adfff;
}

.cheki_bk03 {
  background: #d7e7cb;
}

/* scroll-based reveal (uses custom property --r) */
.polaroid-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: calc(0 + 1 * var(--r));
  filter: blur(calc((1 - var(--r)) * 10px)) saturate(calc(0.85 + 0.15 * var(--r)));
  transform: translateY(calc((1 - var(--r)) * 30px)) scale(calc(0.95 + 0.05 * var(--r))) translateZ(0);
  transform-origin: 50% 60%;
  will-change: opacity, filter, transform;
}

/* polaroid grain overlay */
.polaroid-grain {
  position: absolute;
  inset: 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: 12px;
  opacity: calc(0.25 * var(--p));
  background: radial-gradient(120% 120% at 50% 50%, rgba(255, 255, 255, calc(0.8 * max(0, 1.2 - var(--p) * 2))) 0%, transparent 60%),
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.02) 0 6deg, rgba(0, 0, 0, 0.02) 6deg 12deg);
}

.merit-bottom {
  position: absolute;
  padding-top: 20px;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: calc(100% - 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 120px;
}

.merit-bottom h3 {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-size: clamp(18px, 1.6vw, 22px);
  color: #555;
  margin-bottom: 8px;
}

.merit-bottom p {
  font-family: "Zen Maru Gothic";
  font-weight: 500;
  font-size: clamp(14px, 1.2vw, 16px);
  color: #555;
  line-height: 1.8;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .polaroid-photo {
    transition: none;
  }
}

/* ========================================
   Footer
======================================== */

.view-18 {
  width: 100%;
  background: #8d82eb;
  padding: 80px 40px;
  display: grid;
  place-items: center;
  color: #fff;
}

.view-19 {
  width: min(1200px, 100%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

.caslive-logo {
  width: 266px;
  aspect-ratio: 266 / 71.04;
}

.view-20 {
  width: min(1144px, 100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.view-21 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 6px;
  align-items: center;
  justify-content: center;
}

.div-wrapper-2 {
  display: inline-flex;
  padding: 10px;
}

.text-wrapper-15 {
  color: #fff;
  font-size: clamp(16px, 1.6vw, 20px);
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}

.text-wrapper-16 {
  color: #fff;
  font-size: clamp(12px, 1.6vw, 20px);
  font-family: "Zen Maru Gothic";
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  padding-top: 40px;
}

/* ========================================
   Floating Buttons
======================================== */

.TOP {
  position: fixed;
  right: 34px;
  bottom: 0;
  width: 120px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #8d82eb;
  color: #fff;
  border-radius: 40px 40px 0 0;
  z-index: 40;
  transition: background-color 0.3s ease;
}

.TOP:hover {
  background: #7a6fd9;
}

.TOP .text-icon-2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.arrow-stroke {
  width: 14.73px;
  height: 8.36px;
}

.text-wrapper-17 {
  font-family: "Zen Maru Gothic";
  font-weight: 700;
  font-size: 22px;
}

/* floating menu button */
.menu-btn {
  position: fixed;
  top: -12px;
  right: 12px;
  width: 80px;
  height: 108px;
  z-index: 50;
  background: transparent;
  border: none;
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.15);
  padding: 0;
  transition: transform 0.2s ease;
}

.menu-btn:hover {
  transform: scale(1.05);
}

.view-22 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vector-2 {
  width: 94px;
  height: 114px;
}

.icon {
  position: absolute;
  top: 27px;
  left: 0;
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.text-wrapper-18 {
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  font-size: clamp(14px, 2.5vw, 20px);
  letter-spacing: 1.1px;
}

.view-23 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rectangle-2 {
  width: 40px;
  height: 4px;
  background: #fff;
  border-radius: 20px;
}

/* ========================================
   Accessibility helpers & fade-in
======================================== */

/* global reduced-motion helper for whole page */
@media (prefers-reduced-motion: reduce) {
  .POPPC * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* scroll-in fade animation */
.fade-on-scroll {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
  will-change: opacity, transform;
}

.fade-on-scroll.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========================================
   Offcanvas menu
======================================== */

.offcanvas {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

.offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: var(--oc-backdrop);
  opacity: 0;
  transition: opacity 0.25s ease;
  border: 0;
  pointer-events: none;
}

.offcanvas__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: max(var(--oc-width-pc), var(--oc-width-min));
  background: var(--oc-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -12px 0 30px rgba(0, 0, 0, 0.2);
  outline: none;
  border-left: 3px solid #ffffff;
  padding-bottom: 32px;
}

.offcanvas__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 28px 16px;
}

.offcanvas__logo img {
  height: 70px;
  display: block;
}

.offcanvas__close {
  background: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #fff;
}

.offcanvas__close-label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  font-size: clamp(14px, 2.5vw, 20px);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.offcanvas__close-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
  margin-top: 5px;
}

.offcanvas__close-icon::before,
.offcanvas__close-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 3px;
  border-radius: 10px;
  background-color: #ffffff;
  transform-origin: center;
}

.offcanvas__close-icon::before {
  transform: translate(-50%, -50%) rotate(30deg);
}

.offcanvas__close-icon::after {
  transform: translate(-50%, -50%) rotate(-30deg);
}

/* menu list */
img.diamond {
  width: 14px;
  display: inline-block;
}

.offcanvas__nav {
  display: grid;
  gap: 40px;
  padding: 60px 28px 0;
}

.offcanvas__link {
  display: block;
  color: #fff;
  font-family: "Zen Maru Gothic";
  font-size: 22px;
  font-weight: 600;
  line-height: normal;
  text-decoration: none;
}

.offcanvas__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* offcanvas bottom CTA */
.offcanvas__cta {
  margin-top: auto;
  padding: 24px 28px 16px;
}

.offcanvas__cta .flow-btn-lp2 {
  display: block;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.offcanvas__cta img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* open state */
.offcanvas.is-open {
  pointer-events: auto;
}

.offcanvas.is-open .offcanvas__panel {
  transform: translateX(0);
}

.offcanvas.is-open .offcanvas__backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* lock body scroll while menu is open */
.no-scroll {
  overflow: hidden;
  touch-action: none;
}

/* ========================================
   Responsive ≤ 1024px
======================================== */
@media (max-width: 1024px) {
  /* movie decorations */
  .movie-deco-img01 {
    left: 0;
    top: -280px;
    width: 260px;
  }

  .movie-deco-img02 {
    right: 0;
    top: 50px;
    width: 140px;
  }

  /* CTA layout */
  .text-icon {
    align-items: center;
    text-align: center;
  }

  .text-icon > .view-3:last-child {
    justify-content: center;
  }

  .cta-deco-mic {
    left: 20px;
    bottom: -100px;
    width: 150px;
  }

  .cta-deco-ribbon {
    right: 20px;
    top: -100px;
    width: 200px;
  }

  /* cheki spacing */
  .cheki-pin {
    padding: 96px 24px;
  }

  .cheki-sticky {
    gap: 20px;
  }

  .cheki-deco-left {
    left: 20px;
    top: -140px;
    width: 200px;
  }

  .cheki-deco-right {
    right: 20px;
    top: -60px;
    width: 200px;
  }

  :root {
    --cheki-top: 5%;
    --cheki-right: 5%;
    --cheki-bottom: 35%;
    --cheki-left: 5%;
  }

  .merit-bottom {
    padding-top: 30px;
  }
}

/* ========================================
   Responsive ≤ 768px (tablet + mobile)
======================================== */
@media (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
  /* hero – switch to mobile layout */
  .hero-inner {
    aspect-ratio: 262 / 614;
  }

  /* hide desktop-only hero assets */
  .hero-copy-pc,
  .hero-cats-left,
  .hero-cats-right,
  .hero-arc-pc {
    display: none;
  }

  /* mobile catchphrase */
  .hero-copy-sp {
    display: block;
    width: 90%;
    left: 50%;
    top: 3%;
    transform: translateX(-50%);
    z-index: 3;
  }

  /* phone & girl positions */
  .hero-phone {
    width: 53%;
    left: 50%;
    top: 22%;
    transform: translateX(-50%);
    z-index: 1;
  }

  .hero-girl {
    width: 100%;
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
    z-index: 2;
  }

  /* chat balloons – mobile positioning */
  .hero-chat {
    top: 45%;
    left: 20%;
    transform: translateX(-50%);
    max-width: 82%;
    gap: 3px;
  }

  .hero-chat img.chat-item {
    height: 44px;
    width: auto;
  }

  /* hide desktop cats, show mobile cat */
  .hero-cats-left,
  .hero-cats-right {
    display: none;
  }

  .hero-cats-sp {
    display: block;
    width: 100%;
    left: 50%;
    bottom: 2%;
    transform: translateX(-50%);
    z-index: 4;
  }

  /* logo position on mobile */
  .hero-logo {
    width: 100%;
    left: 50%;
    bottom: 29%;
    transform: translateX(-50%);
  }

  /* bottom arc (SP) */
  .hero-arc-sp {
    display: block;
    width: 100%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
  }

  /* movie layout */
  .movie {
    padding: 48px 16px 72px;
  }

  .movie .div {
    width: 90%;
    gap: 40px;
  }

  .div-2 {
    gap: 32px;
  }

  .view-2 {
    align-items: flex-start;
    text-align: left;
  }
  .rectangle {
    position: absolute;
    inset: -10px;
    border: 10px solid #fdf7ff;
    background: #cbcbcb;
  }
  .movie-wrapper {
    max-width: 480px;
    margin: 0 auto;
  }
  .movie-2 {
    width: 100%;
    height: 100%;
    position: relative;
    box-shadow: 20px 20px 0 #fdf7ff;
  }
  .movie-deco-img01 {
    left: 0;
    top: -140px;
    width: 150px;
  }

  .movie-deco-img02 {
    right: 0px;
    top: -100px;
    width: 100px;
  }

  /* CTA section (.new) */
  .new {
    padding: 72px 16px 96px;
  }

  .mock-up {
    max-width: 360px;
  }

  .mock-up-app {
    width: clamp(220px, 62vw, 320px);
  }

  .cta-deco-mic {
    left: 0;
    bottom: -100px;
    width: 100px;
  }

  .cta-deco-ribbon {
    right: 20px;
    top: -100px;
    width: 120px;
  }

  /* flow – stack layout + slider behavior */
  .flow {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .view-4 {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .view-5 {
    height: 64px;
  }

  .frame-3 {
    padding: 8px 10px;
  }

  .text-wrapper-7 {
    font-size: 44px;
    letter-spacing: 0;
  }

  .view-6,
  .view-12 {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
    margin: 0 auto;
  }

  .img-2,
  .element-3 {
    width: 240px;
  }

  .step-wrapper,
  .view-13 {
    padding: 16px 0 20px;
    border-radius: 10px;
  }

  .view-11 {
    padding: 0 16px;
  }

  /* slider root – hides side slides and anchors arrows */
  .flow-steps {
    width: 100%;
    max-width: 340px;
    margin: 32px auto 0;
    position: relative;
  }

  /* inner window – let decorative images overflow */
  .flow-window {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
  }

  .flow-track {
    display: flex;
    will-change: transform;
    transform: translateX(0);
  }

  .flow-step {
    /* one slide per viewport on mobile */
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px 0 24px;
    position: relative;
    overflow: hidden;
  }

  /* phone + decoration wrapper */
  .step-visual {
    position: relative;
    width: 100%;
    max-width: 210px;
    margin: 0 auto;
  }

  .flow-step .img-2,
  .flow-step .element-3 {
    width: 100%;
    max-width: 210px;
    margin: 0 auto;
  }

  .flow-step .vector {
    display: none;
  }

  .flow-step .view-7,
  .flow-step .view-14,
  .flow-step .view-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .flow-step .view-8 {
    justify-content: center;
  }

  .flow-step .step-wrapper,
  .flow-step .view-13 {
    max-width: 360px;
    width: 100%;
    margin: 0 auto;
  }

  .flow-step .view-11 {
    padding: 0 16px;
  }

  .flow-step .text-wrapper-11 {
    font-size: 12px;
    line-height: 1.7;
  }

  /* left/right arrows (outside slider slightly) */
  .flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 10%;
    border: 2px solid #ffffff;
    background: #8d82eb;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    color: #ffffff;
    z-index: 5;
  }

  .flow-arrow.flow-prev::before,
  .flow-arrow.flow-next::before {
    content: "";
    width: 14px;
    height: 14px;
    border-top: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
  }

  .flow-arrow.flow-prev::before {
    transform: rotate(225deg);
  }

  .flow-arrow.flow-next::before {
    transform: rotate(45deg);
  }

  .flow-prev {
    left: 0px;
  }

  .flow-next {
    right: 0px;
  }

  .flow-arrow:active {
    transform: translateY(-50%) scale(0.95);
  }

  /* Step2 & Step4 – reverse order on mobile */
  .flow-step.view-12 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 16px;
  }

  .flow-step.view-12 .element-3 {
    width: 100%;
    max-width: 210px;
    margin: 0 auto;
  }

  .flow-step.view-12 .view-wrapper,
  .flow-step.view-12 .view-13 {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .flow-step.view-12 .view-11 {
    padding: 0 16px;
  }

  /* cheki – stack vertically */
  .cheki-pin {
    padding: 72px 16px 96px;
  }

  .cheki-sticky {
    width: 100%;
    max-width: 360px;
    position: static;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    will-change: auto;
    z-index: 9;
  }

  .polaroid {
    position: relative;
    width: 100%;
    padding: 24px 16px 32px;
    aspect-ratio: auto;
    margin: 0 auto;
  }

  .polaroid-window {
    position: static;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--cheki-radius);
    overflow: hidden;
    margin-bottom: 16px;
  }

  .polaroid-photo {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    filter: none;
    transform: none;
  }

  .merit-bottom {
    position: static;
    padding-top: 10px;
    transform: none;
    width: 100%;
    text-align: center;
    margin-top: 8px;
    height: auto;
  }

  .view-15 {
    gap: 60px;
    align-items: center;
    padding-bottom: 60px;
  }

  .cheki-deco-left {
    left: 20px;
    top: -100px;
    width: 120px;
  }

  .cheki-deco-right {
    right: 20px;
    top: -40px;
    width: 150px;
  }

  /* optional feature layout helpers (if feature section present) */
  .feature {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .view-16 {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  .element-wrapper,
  .view-17 {
    width: 100%;
    padding: 20px 16px;
  }

  .mini,
  .mini-2,
  .element-7 {
    position: static;
    max-width: 520px;
    box-shadow: none;
  }

  /* global layout tweaks for sections */
  .div-2,
  .cta {
    grid-template-columns: 1fr;
  }

  .text-icon {
    align-items: flex-start;
    gap: 24px;
  }

  .view-3 {
    align-items: flex-start;
    text-align: left;
    gap: 24px;
  }

  .movie,
  .new,
  .flow,
  .feature,
  .view-18 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .movie {
    padding-top: 160px;
    padding-bottom: 64px;
  }

  .div-wrapper {
    padding: 10px 20px;
  }

  .cas-live {
    font-size: 20px;
    width: 100%;
  }

  .cta {
    grid-template-columns: 1fr;
    width: 90%;
  }

  .mock-up {
    max-width: 360px;
    margin: 0 auto;
    aspect-ratio: 1;
  }

  .text-icon > .view-3:last-child {
    justify-content: center;
    align-items: center;
    gap: 12px;
    display: grid;
  }

  .text-icon > .view-3:last-child .img {
    width: auto;
  }

  .h {
    width: 100%;
    max-width: 520px;
  }

  .frame,
  .frame-2 {
    width: 100%;
  }

  .movie-wrapper {
    width: 100%;
    max-width: 672px;
    aspect-ratio: 16 / 9;
  }
  /* ========================================
   Footer
======================================== */
  .view-18 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .view-20 {
    gap: 10px;
  }
  .view-21 {
    width: 100%;
    display: contents;
  }
  .text-wrapper-16 {
    padding-top: 80px;
  }

  /* floating elements adjust for mobile */
  .flow-btn-lp {
    right: 42px;
    bottom: 66px;
    width: 290px;
    height: 68px;
  }

  .TOP {
    right: 12px;
    width: 100px;
    height: 34px;
  }

  .menu-btn {
    width: 70px;
    height: 90px;
    top: -12px;
    right: 8px;
  }

  .icon {
    width: 70px;
  }

  .offcanvas__panel {
    width: var(--oc-width-sp);
    min-width: 0;
  }

  .offcanvas__logo img {
    height: 50px;
    display: block;
  }
}

/* ========================================
   Responsive ≤ 430px (small phones)
======================================== */
@media (max-width: 430px) {
  /* fine-tune hero on very small screens */
  .hero-inner {
    aspect-ratio: 262 / 614;
  }

  .hero-copy-sp {
    top: 2%;
  }

  .hero-phone {
    width: 70%;
    top: 16%;
  }

  .hero-girl {
    width: 110%;
    top: 16%;
  }

  .hero-chat {
    top: 48%;
    left: 20%;
    transform: translateX(-50%);
    gap: 3px;
  }

  .hero-chat img.chat-item {
    height: 30px;
  }

  .hero-cats-sp {
    bottom: -1%;
  }

  .hero-logo {
    bottom: 22%;
  }

  .hero-arc-sp {
    bottom: -1%;
  }
}

/* ========================================
   Floating app download buttons
======================================== */

/* PC default (horizontal-wide button) */
.flow-btn-lp,
.flow-btn-lp2 {
  position: fixed;
  right: 44px;
  bottom: 54px;
  width: 306px;
  height: 100px;
  z-index: 45;
  display: block;
}

/* transition for expanding / shrinking (flow-btn-lp only) */
.flow-btn-lp {
  transition: width 0.35s ease, height 0.35s ease, border-radius 0.35s ease, right 0.35s ease, bottom 0.35s ease;
}

.pc-expanded {
  inset: 0;
  background: url(/img/flow-btn-short_bk_pc2.png) no-repeat center / cover;
  position: absolute;
  top: 0px;
  left: 9px;
  width: 100%;
  height: 100%;
}

.mobile-start {
  display: none;
}

.text-icon-wrapper2 {
  inset: 0;
  background: url(/img/flow-btn-short_bk_pc2.png) no-repeat center / cover;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
}

.text-icon-3,
.text-icon-3_2 {
  position: relative;
  display: grid;
  place-items: center;
  gap: 8px;
  z-index: 2;
  top: 15px;
  left: 10px;
}

.text-icon-3 > .view-3:last-child,
.text-icon-3_2 > .view-3:last-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 10px);
}

.text-icon-3 > .view-3:last-child .img,
.text-icon-3_2 > .view-3:last-child .img {
  height: clamp(45px, 4vw, 60px);
  width: auto;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.12));
}

.text-wrapper-19 {
  width: 80%;
}

.image-21 {
  width: 35%;
}

.view-24 {
  position: absolute;
  inset: 0 auto auto 0;
  width: 55px;
  height: 55px;
  top: -5px;
  left: -5px;
}

.ellipse {
  position: absolute;
  z-index: 1;
  inset: -1px auto auto -1px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 0.9px solid #ffffff99;
  background: linear-gradient(61deg, #ff6e9b 12%, #e969db 32%, #8d82eb 71%, #4d85ff 100%);
}

.text-wrapper-20 {
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 7px;
  transform: rotate(-20.28deg);
  font-family: "Zen Maru Gothic";
  font-weight: 900;
  color: #fff;
  font-size: 12px;
}

/* ========================================
   Mobile behavior: bubble → horizontal banner
======================================== */
@media (max-width: 768px) {
  /* start as a circular bubble on mobile */
  .flow-btn-lp {
    right: 10px;
    bottom: 50px;
    width: 100px;
    height: 100px;
    border-radius: 999px;
    z-index: 999;
    overflow: visible;
    transition: all 0.35s ease;
  }

  .mobile-start {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
  }

  .sp-bubble {
    width: 100%;
    height: 100%;
  }

  .sp-text {
    position: absolute;
    width: 80%;
    max-width: 90px;
  }

  .pc-expanded {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    transition: opacity 0.3s ease 0.1s;
  }

  .flow-btn-lp.is-open {
    width: 306px;
    height: 100px;
    right: 10px;
    bottom: 50px;
  }

  .flow-btn-lp.is-open .mobile-start {
    opacity: 0;
  }

  .flow-btn-lp.is-open .pc-expanded {
    opacity: 1;
    pointer-events: auto;
  }

  .text-icon-3,
  .text-icon-3_2 {
    position: relative;
    display: grid;
    place-items: center;
    gap: 8px;
    z-index: 2;
    top: 0px;
    left: 0px;
  }
}

/* ========================================
   Coming Soon / App release banner (CTA)
======================================== */

/* banner container: logo + text + store buttons */
.text-icon > .view-3:last-child,
.text-icon > .app-release-banner {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  width: auto;
  margin: 0 0 0 auto;
}

/* top section: logo + copy text */
.app-release-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* store buttons – shared style (first & last child differentiation) */
.text-icon > .view-3 .app-release-stores .img.store-btn-blur:first-child {
  width: auto;
  height: clamp(32px, 3.5vw, 30px);
  border-radius: 0;
}

.text-icon > .view-3 .app-release-stores .img.store-btn-blur:last-child {
  width: auto;
  height: clamp(32px, 3.5vw, 30px);
  border-radius: 0;
}

/* logo: slightly larger */
.text-icon > .view-3:last-child .img:first-child {
  height: clamp(56px, 4vw, 68px);
  flex-shrink: 0;
}

/* text block: release date + emphasized text */
.text-icon > .view-3:last-child .text-wrapper-logo {
  display: flex;
  flex-direction: column;
  margin-right: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  white-space: nowrap;
  color: #ffffff;
  text-align: left;
  text-shadow: 0 0 9.8px rgba(0, 0, 0, 0.25);
}

.text-icon > .view-3:last-child .text-wrapper-logo span {
  font-size: 22px;
  font-weight: 700;
}

/* Store buttons container — align two buttons on same row */
.app-release-stores {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.app-release-stores .img {
  height: 40px;
}

/* visually soften store buttons (before launch) */
.store-btn-blur {
  opacity: 0.5;
}

/* ========================================
   Coming Soon banner – Mobile (≤768px)
======================================== */
@media (max-width: 768px) {
  .text-icon > .view-3:last-child,
  .text-icon > .app-release-banner {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(6px);
    width: min-content;
    margin: 0;
  }

  .app-release-header {
    gap: 10px;
  }

  .text-icon > .view-3:last-child .text-wrapper-logo {
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
  }

  .text-icon > .view-3:last-child .text-wrapper-logo span {
    font-size: 26px;
  }

  .app-release-stores .img {
    height: 32px;
  }
}

/* ========================================
     HERO
======================================== */

.movie-2 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
}

.movie-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Sound button */
.movie-sound-btn {
  position: absolute;
  right: 12px;
  bottom: 8px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;

  color: #7b61ff;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #111;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);

  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Show on PC hover */
.movie-2:hover .movie-sound-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Show on keyboard focus */
.movie-2:focus-within .movie-sound-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.movie-sound-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.movie-sound-btn .icon {
  width: 24px;
  height: 24px;
  top: 8px;
  left: 8px;
  color: #7b61ff;
  display: none;
}

/* When muted, show only the muted icon */
.movie-sound-btn.is-muted .icon-muted {
  display: block;
}

/* When unmuted, show only the sound-on icon */
.movie-sound-btn:not(.is-muted) .icon-on {
  display: block;
}

/* ✅ Mobile-only hint state: force visible */
.movie-sound-btn.is-hint {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

/* ✅ Mobile: keep hidden by default (no hover), show only via is-hint */
@media (max-width: 768px) {
  .movie-sound-btn {
    right: 18px;
    bottom: 18px;
    width: 40px;
    height: 40px;

    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }
}