* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  color: #f7fbff;
  background:
    radial-gradient(circle at 25% 0%, rgba(38, 226, 255, 0.2), transparent 32%),
    radial-gradient(circle at 70% 18%, rgba(47, 132, 255, 0.24), transparent 38%),
    linear-gradient(180deg, #020817 0%, #061638 45%, #030713 100%);
}

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

main {
  overflow: hidden;
}

.top-bar {
  position: fixed;
  z-index: 50;
  top: 0;
  left: 0;
  right: 0;

  height: 102px;
  padding: 0 56px;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(20px);

  transform: translateY(0);
  transition: transform 0.28s ease;
}

.top-bar.hide {
  transform: translateY(-120%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  justify-self: start;

  color: #061025;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.06em;
}

.brand img {
  width: 56px;
  height: 56px;
  border-radius: 15px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px;

  color: #061025;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.menu a:nth-of-type(1) {
  color: #3ceac2;
}

.menu a:nth-of-type(2) {
  color: #2d89ff;
}

.menu a:nth-of-type(3) {
  color: #ff5fa3;
}

.menu span {
  width: 1px;
  height: 18px;
  background: rgba(6, 16, 37, 0.4);
}

.top-button {
  justify-self: end;
  padding: 18px 26px;
  border-radius: 18px;
  color: white;
  background: #030519;
  box-shadow: 0 8px 20px rgba(3, 5, 25, 0.28);
  font-size: 18px;
  font-weight: 950;
}

.hero {
  position: relative;
  min-height: 100vh;
  padding: 154px 7vw 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 20%, rgba(43, 199, 255, 0.25), transparent 24%),
    radial-gradient(circle at 50% 70%, rgba(26, 70, 255, 0.2), transparent 34%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 2;
}

.flow-strip {
  width: min(1080px, 100%);
  margin: 0 auto 28px;
  overflow: hidden;
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.flow-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: flowMove 30s linear infinite;
}

.flow-card {
  width: 210px;
  min-height: 76px;
  padding: 16px 18px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(110, 220, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 16px 44px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
}

.flow-card span {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.flow-card strong {
  font-size: 17px;
  font-weight: 850;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.92);
}

.flow-card.quick span {
  color: #4bffd0;
}

.flow-card.memo span {
  color: #53c7ff;
}

.flow-card.todo span {
  color: #ff78b7;
}

.flow-card.backup span {
  color: #baff77;
}

@keyframes flowMove {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero-chip {
  margin: 0 0 34px;
  padding: 10px 24px;
  border-radius: 999px;
  color: #e9fbff;
  background: rgba(8, 32, 73, 0.6);
  border: 1px solid rgba(64, 187, 255, 0.7);
  font-size: 16px;
  font-weight: 800;
}

h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(56px, 8vw, 116px);
  line-height: 1.05;
  letter-spacing: -0.08em;
  text-shadow: 0 0 36px rgba(70, 196, 255, 0.35);
}

h1 strong {
  color: transparent;
  background: linear-gradient(90deg, #4bffd0, #1d8dff);
  -webkit-background-clip: text;
  background-clip: text;
}

.subtitle {
  max-width: 780px;
  margin: 36px auto 0;
  color: rgba(238, 247, 255, 0.78);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.75;
  letter-spacing: -0.035em;
}

.actions {
  margin-top: 42px;
}

.primary-button {
  min-height: 74px;
  padding: 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, #3ff5c7, #1c8cff);
  box-shadow:
    0 0 36px rgba(63, 245, 199, 0.35),
    0 28px 70px rgba(0, 0, 0, 0.36);
  font-size: 24px;
  font-weight: 950;
}

.trust-row {
  width: min(860px, 100%);
  margin: 48px auto 70px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: center;
}

.trust-row div {
  min-height: 86px;
  padding: 0 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.trust-row div + div {
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.trust-row svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #53c7ff;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(83, 199, 255, 0.8));
}

.trust-row p {
  margin: 14px 0 0;
  color: rgba(245, 250, 255, 0.86);
  font-size: 16px;
  font-weight: 700;
}

.hero-image {
  width: min(1030px, 100%);
  padding: 0;
  border-radius: 38px;
}

.hero-image img {
  width: 100%;
  display: block;
  border-radius: 38px;
  border: 1px solid rgba(77, 199, 255, 0.35);
  box-shadow:
    0 0 42px rgba(47, 179, 255, 0.28),
    0 38px 100px rgba(0, 0, 0, 0.52);
}

/* Animated replacement for assets/feature.webp */
.hero-image.memosy-motion {
  position: relative;
  isolation: isolate;
  width: min(1030px, 100%);
  min-height: 500px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr minmax(260px, .72fr) 1fr;
  align-items: center;
  border-radius: 38px;
  border: 1px solid rgba(77, 199, 255, .35);
  background:
    radial-gradient(circle at 15% 50%, rgba(15, 93, 255, .30), transparent 40%),
    radial-gradient(circle at 88% 48%, rgba(0, 202, 140, .22), transparent 42%),
    linear-gradient(105deg, #071a47, #030b20 52%, #06362f);
  box-shadow: 0 0 42px rgba(47, 179, 255, .28), 0 38px 100px rgba(0, 0, 0, .52);
}

.memosy-motion::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 50%, rgba(230,255,255,.34), rgba(70,215,255,.10) 30%, transparent 64%);
  animation: memosySkyFlash 4.8s steps(1,end) infinite;
}

.memosy-motion__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .11;
  background-image: linear-gradient(rgba(76,211,255,.18) 1px,transparent 1px), linear-gradient(90deg,rgba(76,211,255,.18) 1px,transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 24%, black 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 24%, black 78%, transparent);
}

.memosy-motion__feature {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.memosy-motion__quick { grid-column: 1; justify-content: flex-start; padding-left: 7%; animation: memosyFloat 4.2s ease-in-out infinite; }
.memosy-motion__todo { grid-column: 3; flex-direction: row-reverse; justify-content: flex-start; padding-right: 7%; animation: memosyFloat 4.2s ease-in-out -2.1s infinite; }
.memosy-motion__feature h3 { margin: 0; color: #fff; font-size: clamp(30px, 3.2vw, 48px); line-height: .94; letter-spacing: -.055em; text-shadow: 0 6px 16px #000; }
.memosy-motion__todo h3 { text-align: right; }

.memosy-motion__memo-icon,
.memosy-motion__todo-icon { position: relative; flex: 0 0 auto; width: clamp(145px, 16vw, 205px); aspect-ratio: 1; filter: drop-shadow(0 20px 25px rgba(0,0,0,.55)); }

.memosy-motion__memo-icon { border-radius: 25%; background: linear-gradient(145deg,#d8ffbd,#7ce9a5 58%,#54bd87); box-shadow: inset 0 0 28px #eaffba,0 0 42px rgba(19,223,255,.34); }
.memosy-motion__memo-icon i { position:absolute; top:-9%; width:9%; height:29%; border-radius:999px; background:linear-gradient(#46f5c4,#78e9ad); box-shadow:0 5px 5px rgba(6,45,87,.55); }
.memosy-motion__memo-icon i:nth-child(1){left:16%}.memosy-motion__memo-icon i:nth-child(2){left:38%}.memosy-motion__memo-icon i:nth-child(3){left:60%}.memosy-motion__memo-icon i:nth-child(4){left:82%}
.memosy-motion__memo-icon span { position:absolute; left:18%; width:66%; height:5%; border-radius:99px; background:#082e67; }
.memosy-motion__memo-icon span:nth-of-type(1){top:36%}.memosy-motion__memo-icon span:nth-of-type(2){top:51%}.memosy-motion__memo-icon span:nth-of-type(3){top:66%}.memosy-motion__memo-icon span:nth-of-type(4){top:81%;width:55%}

.memosy-motion__todo-icon { border:14px solid #b9f18e; border-radius:25%; background:linear-gradient(145deg,#223a27,#093d32); box-shadow:inset 0 0 25px rgba(85,242,173,.34),0 0 42px rgba(66,255,173,.40); }
.memosy-motion__todo-icon span { position:absolute; left:23%; width:55%; height:28%; border-left:17px solid #9af28b; border-bottom:17px solid #9af28b; transform:rotate(-45deg); }
.memosy-motion__todo-icon span:first-child{top:18%}.memosy-motion__todo-icon span:last-child{top:49%}

.memosy-motion__energy { position:absolute; z-index:4; left:50%; top:50%; width:min(40%,450px); transform:translate(-50%,-50%); pointer-events:none; animation:memosyStrike 4.8s steps(1,end) infinite; }
.memosy-motion__energy svg { display:block; width:100%; overflow:visible; }
.memosy-motion__bolt { fill:url(#memosy-motion-bolt); stroke:#efffff; stroke-width:5; filter:url(#memosy-motion-glow); transform-origin:center; animation:memosyBolt 4.8s steps(1,end) infinite; }
.memosy-motion__bolt-shadow { fill:#07396d; stroke:#2fcfff; stroke-width:18; opacity:.8; }
.memosy-motion__arc { fill:none; stroke:#6beeff; stroke-width:3; stroke-linecap:round; filter:url(#memosy-motion-glow); stroke-dasharray:40 22; animation:memosyDash 1.35s linear infinite; }
.memosy-motion__arc.arc-2 { stroke:#66ffbd; animation-duration:1.7s; animation-direction:reverse; }
.memosy-motion__arc.arc-3 { stroke-width:2; animation-duration:1.1s; }
.memosy-motion__energy b { position:absolute; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 10px 5px #42eaff,0 0 22px 8px #1a6fff; animation:memosySpark 1.7s linear infinite; }
.memosy-motion__energy .spark-1{left:8%;top:61%}.memosy-motion__energy .spark-2{left:25%;top:39%;animation-delay:-.6s}.memosy-motion__energy .spark-3{right:14%;top:23%;animation-delay:-1.1s}.memosy-motion__energy .spark-4{right:5%;bottom:24%;animation-delay:-.3s}

@keyframes memosyFloat { 50% { transform:translateY(-12px); } }
@keyframes memosyDash { to { stroke-dashoffset:-124; } }
@keyframes memosyStrike { 0%,5%,10%,14%,100%{opacity:.78;filter:brightness(.9)}6%,9%{opacity:1;filter:brightness(2.2) drop-shadow(0 0 38px #b9ffff);transform:translate(-50%,-50%) scale(1.025)}11%{opacity:.18;filter:brightness(.6)}12%{opacity:1;filter:brightness(2.8) drop-shadow(0 0 60px #7deaff);transform:translate(-50%,-50%) scale(1.045)}15%{opacity:.88;filter:brightness(1.1)} }
@keyframes memosyBolt { 0%,5%,10%,14%,100%{opacity:.86;transform:scale(.98)}6%,9%,12%{opacity:1;transform:scale(1.04)}11%{opacity:.2;transform:scale(.97)} }
@keyframes memosySkyFlash { 0%,5%,10%,14%,100%{opacity:0}6%,9%{opacity:.8}11%{opacity:.08}12%{opacity:1}15%{opacity:.12} }
@keyframes memosySpark { 0%{transform:translate(-15px,15px) scale(0);opacity:0}35%{opacity:1;transform:scale(1.4)}100%{transform:translate(30px,-22px) scale(0);opacity:0} }

@media (max-width: 760px) {
  .hero-image.memosy-motion { display:block; min-height:600px; border-radius:24px; }
  .memosy-motion__feature { position:absolute; width:46%; height:auto; flex-direction:column; gap:10px; padding:0; }
  .memosy-motion__quick { left:7%; top:9%; align-items:flex-start; }
  .memosy-motion__todo { right:7%; bottom:8%; align-items:flex-end; }
  .memosy-motion__memo-icon,.memosy-motion__todo-icon { width:min(35vw,160px); }
  .memosy-motion__todo-icon { border-width:10px; }
  .memosy-motion__todo-icon span { border-left-width:12px; border-bottom-width:12px; }
  .memosy-motion__energy { width:min(72vw,420px); left:50%; top:50%; }
  .memosy-motion__feature h3 { font-size:clamp(23px,6vw,34px); }
  .memosy-motion__quick h3 { text-align:left; padding-left:4px; }
  .memosy-motion__todo h3 { text-align:right; padding-right:4px; }
}

@media (max-width: 480px) {
  .hero-image.memosy-motion { min-height:520px; }
  .memosy-motion__quick { left:6%; top:8%; }
  .memosy-motion__todo { right:6%; bottom:7%; }
  .memosy-motion__energy { width:78vw; }
}

@media (prefers-reduced-motion: reduce) {
  .memosy-motion *, .memosy-motion::after { animation:none !important; }
}

.section {
  padding: 120px 7vw;
}

.section-title {
  max-width: 820px;
  margin: 0 auto 52px;
  text-align: center;
}

.section-title p,
.eyebrow {
  margin: 0 0 14px;
  color: #62ffe2;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.section-title h2,
.split-section h2,
.privacy h2,
.closing h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.065em;
}

.feature-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.feature-card {
  min-height: 250px;
  padding: 28px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045));
  border: 1px solid rgba(154, 245, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 22px 60px rgba(0, 0, 0, 0.24);
}

.feature-card h3 {
  margin: 0 0 16px;
  color: #7affdf;
  font-size: 25px;
  letter-spacing: -0.04em;
}

.feature-card p {
  margin: 0;
  color: rgba(237, 248, 255, 0.72);
  line-height: 1.7;
}

.gallery {
  padding: 20px 7vw 120px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery img {
  width: 100%;
  display: block;
  border-radius: 30px;
  box-shadow:
    0 0 34px rgba(52, 220, 255, 0.2),
    0 26px 80px rgba(0, 0, 0, 0.5);
}

.split-section {
  padding: 100px 7vw;
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 60px;
  align-items: center;
}

.split-section.reverse {
  grid-template-columns: 1fr 0.8fr;
}

.split-section.reverse div {
  order: 2;
}

.split-section.reverse img {
  order: 1;
}

.split-section p:not(.eyebrow) {
  max-width: 560px;
  color: rgba(237, 248, 255, 0.74);
  font-size: 18px;
  line-height: 1.75;
}

.split-section img {
  width: 100%;
  border-radius: 34px;
  box-shadow:
    0 0 44px rgba(143, 255, 83, 0.22),
    0 32px 90px rgba(0, 0, 0, 0.55);
}

.privacy {
  margin: 80px 7vw;
  padding: 70px 7vw;
  text-align: center;
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 0%, rgba(173, 255, 86, 0.16), transparent 45%),
    rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(186, 255, 119, 0.18);
}

.privacy p {
  max-width: 760px;
  margin: 12px auto 0;
  color: rgba(237, 248, 255, 0.76);
  font-size: 18px;
  line-height: 1.75;
}

.closing {
  padding: 110px 7vw 140px;
  text-align: center;
}

.closing img {
  width: 110px;
  height: 110px;
  margin-bottom: 28px;
  border-radius: 28px;
  box-shadow: 0 0 40px rgba(122, 255, 223, 0.42);
}

.closing h2 {
  text-wrap: balance;
  text-shadow: 0 8px 34px rgba(0, 0, 0, 0.34);
}

.closing h2 strong {
  color: transparent;
  background: linear-gradient(100deg, #78ffe0 0%, #5bcaff 48%, #8ca8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 18px rgba(91, 202, 255, 0.2));
}

.closing p {
  max-width: 560px;
  margin: 24px auto 34px;
  color: rgba(237, 248, 255, 0.72);
  font-size: 18px;
  line-height: 1.75;
}


@media (max-width: 980px) {
  .top-bar {
    height: 88px;
    padding: 0 24px;
    grid-template-columns: 1fr auto;
  }

  .brand {
    font-size: 22px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .menu {
    display: none;
  }

  .top-button {
    padding: 14px 18px;
    border-radius: 16px;
    font-size: 15px;
  }

  .hero {
    padding-top: 136px;
  }

  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-row div + div {
    border-left: 0;
  }

  .trust-row div:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }

  .trust-row div:nth-child(n + 3) {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery,
  .split-section,
  .split-section.reverse {
    grid-template-columns: 1fr;
  }

  .split-section.reverse div,
  .split-section.reverse img {
    order: initial;
  }
}

@media (max-width: 560px) {
  .top-bar {
    height: 78px;
    padding: 0 18px;
  }

  .brand {
    font-size: 19px;
  }

  .brand img {
    width: 42px;
    height: 42px;
  }

  .top-button {
    padding: 12px 14px;
    font-size: 13px;
  }

  .hero {
    padding: 112px 22px 70px;
  }

  .flow-strip {
    margin-bottom: 22px;
  }

  .flow-card {
    width: 170px;
    min-height: 68px;
    padding: 14px 16px;
  }

  .flow-card strong {
    font-size: 15px;
  }

  h1 {
    font-size: clamp(48px, 14vw, 72px);
  }

  .subtitle br {
    display: none;
  }

  .primary-button {
    width: 100%;
    min-height: 62px;
    font-size: 19px;
  }

  .trust-row {
    margin-bottom: 46px;
  }

  .hero-image img {
    border-radius: 24px;
  }

  .section,
  .gallery,
  .split-section,
  .closing {
    padding-left: 22px;
    padding-right: 22px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .privacy {
    margin-left: 22px;
    margin-right: 22px;
    padding: 44px 22px;
  }
}

/* Hero Title Sequence */
.hero-title-sequence {
  width: min(980px, 100%);
  min-height: clamp(112px, 12vw, 150px);
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.sequence-title {
  margin: 0;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: clamp(48px, 7.2vw, 104px);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.075em;
  color: #fff;
  text-align: center;
  text-shadow:
    0 0 10px rgba(255,255,255,.36),
    0 0 36px rgba(70,196,255,.38);
}

.sequence-line {
  display: block;
  white-space: nowrap;
}

.sequence-title.is-changing {
  opacity: .75;
  transform: translateY(-4px) scale(.99);
  filter: blur(4px);
  transition: opacity .32s ease, transform .32s ease, filter .32s ease;
}

.sequence-title.is-cinematic {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow:
    0 0 14px rgba(255,255,255,.4),
    0 0 42px rgba(96,186,255,.38);
  filter:
    drop-shadow(0 0 16px rgba(96,186,255,.36))
    drop-shadow(0 0 46px rgba(123,98,255,.24));
}

.sequence-title.is-cinematic .cinematic-small-line {
  display: block;
  font-size: .72em;
  line-height: 1.05;
  opacity: 1;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  letter-spacing: -0.05em;
}

.sequence-title.is-cinematic .cinematic-main-line {
  display: block;
  margin-top: .04em;
  padding-bottom: .16em;
  font-size: 1.08em;
  line-height: 1.22;
  letter-spacing: -0.07em;
  color: transparent;
  background: linear-gradient(90deg, #ffffff, #72d7ff, #b79cff, #ffffff);
  background-size: 280% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cinematicGradient 4.8s linear infinite;
}

.hero-title-sequence,
.sequence-title,
.sequence-line {
  overflow: visible;
}

@keyframes cinematicGradient {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 280% 50%;
  }
}

.sequence-glow-line {
  width: min(460px, 70vw);
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.82), transparent);
  box-shadow: 0 0 24px rgba(108,190,255,.45);
  animation: sequenceLineGlow 3.3s ease-in-out infinite;
}

@keyframes sequenceLineGlow {
  0%, 100% {
    opacity: .34;
    transform: scaleX(.72);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

body::after {
  content: "";
  position: fixed;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, rgba(86,183,255,.13), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(168,109,255,.10), transparent 30%),
    radial-gradient(circle at 52% 88%, rgba(96,255,218,.08), transparent 36%);
  filter: blur(2px);
  animation: heroAuroraMove 14s ease-in-out infinite;
}

@keyframes heroAuroraMove {
  0%, 100% {
    transform: translate3d(0,0,0) scale(1);
  }
  50% {
    transform: translate3d(0,-20px,0) scale(1.03);
  }
}

/* Plain first title: visible text + fly-out only */
.sequence-title.is-plain {
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  text-shadow:
    0 0 10px rgba(255,255,255,.36),
    0 0 36px rgba(70,196,255,.38);
  filter: none;
}

.sequence-title.is-plain .plain-line {
  display: block;
  font-size: .72em;
  line-height: 1.05;
  letter-spacing: -0.05em;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.sequence-title.is-plain .plain-fly-char {
  display: inline-block;
  font-weight: 850;
  will-change: opacity, transform, filter;
}

.sequence-title .title-space {
  display: inline-block;
  width: .24em;
}

.sequence-title.is-plain .title-space {
  display: inline-block;
  width: .24em;
}


.sequence-title.is-cinematic.is-gather {
  width: 100%;
  text-align: center;
  background: none;
  -webkit-text-fill-color: #ffffff;
}

.sequence-title.is-cinematic .cinematic-gather-line {
  display: inline-block;
  width: auto;
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  font-size: .72em;
  line-height: 1.05;
  opacity: 1;
  color: #ffffff;
  background: none;
  -webkit-text-fill-color: #ffffff;
  letter-spacing: -0.055em;
  transform-origin: center center;
}

.gather-in-char {
  display: inline-block;
  opacity: 0;
  transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-r)) scale(.86);
  filter: blur(10px);
  animation: gatherIntoPlace .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i) * .018s);
  will-change: transform, opacity, filter;
}

@keyframes gatherIntoPlace {
  0% {
    opacity: 0;
    transform: translate(var(--from-x), var(--from-y)) rotate(var(--from-r)) scale(.86);
    filter: blur(10px);
  }
  72% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1.03);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
}

.fly-out-char {
  animation: flyOutChar .72s cubic-bezier(.55,.02,.87,.36) forwards !important;
  animation-delay: calc(var(--i) * .018s) !important;
}

@keyframes flyOutChar {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--fly-x), var(--fly-y))
      rotate(var(--fly-r))
      scale(.72);
    filter: blur(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sequence-title.is-cinematic .cinematic-main-line,
  .gather-in-char,
  .fly-out-char,
  .sequence-glow-line,
  body::after {
    animation: none;
  }
}

@media (max-width: 640px) {
  .hero-title-sequence {
    min-height: 118px;
    padding: 8px 0;
  }

  .sequence-title {
    font-size: clamp(38px, 12vw, 64px);
  }

  .sequence-line {
    white-space: normal;
  }
}

.closing img.store-badge-image {
  width: auto;
  height: 54px;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 640px) {
  .closing img.store-badge-image.is-large {
    width: auto;
    height: 48px;
  }
}