@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/clash-display-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("assets/fonts/clash-display-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  --color-bg: #ffffff;
  --color-bg-alt: #f5f6f8;
  --color-ink: #18233f;
  --color-body: #4b5563;
  --color-label: #6b7280;
  --color-track: #e5e7eb;
  --color-accent: #4849f9;
  --color-accent-strong: #3536e0;
  --color-accent-tint: #ececfe;
  --color-lime: #d7f500;

  --font-display: "Clash Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ko: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  --gutter: 80px;
  --section-y: 140px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.on-hero { background: #31a9ee; }
main { background: var(--color-bg); }

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 64px;
  line-height: 68px;
  color: var(--color-ink);
}

.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  height: 100lvh;
  min-height: 600px;
  padding: 0 16px;
  /* Paints behind mobile browser bars while the layout stays in the visible (svh) area. */
  padding-bottom: calc(100lvh - 100svh);
  /* Matches the top edge of the photo, so the fade below has no seam. */
  background: linear-gradient(90deg, #0290e3 0%, #0395e5 10%, #029ae7 20%, #05a0ea 32%, #31a9ee 50%, #4db0f0 65%, #69b8f3 80%, #77bff5 90%, #82c4f8 100%);
}

/* iOS 26 Safari also draws the page under its floating toolbar, about 60px below 100lvh. */
@supports (-webkit-touch-callout: none) {
  .hero {
    height: calc(100lvh + 80px);
    padding-bottom: calc(100lvh - 100svh + 80px);
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 160px;
    background: linear-gradient(#31a9ee, rgb(49 169 238 / 0));
  }
}

.hero__photo {
  position: absolute;
  left: 0;
  bottom: -140px;
  width: 100%;
  height: 1060px;
  object-fit: cover;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 200px);
  pointer-events: none;
}

.hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: auto;
  padding-top: clamp(56px, 9vh, 128px);
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 96px;
  line-height: 92px;
  word-spacing: 0.06em;
  color: #fff;
}

.hero__copy > p {
  max-width: 560px;
  font-size: 20px;
  line-height: 30px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding-top: 12px;
}

.store {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 26px 0 22px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  transition: transform 150ms ease;
}

.store:hover { transform: translateY(-2px); }

.store__text {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.01em;
}

.store__text small {
  font-weight: 500;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
}

.hero__stage {
  --pw: 340px;
  position: relative;
  flex: 1;
  width: 100%;
  max-height: calc(var(--pw) * 1.6);
  margin-top: auto;
}

.phone {
  position: absolute;
  top: clamp(40px, 7vh, 96px);
  width: var(--pw);
  aspect-ratio: 414 / 868;
  padding: calc(var(--pw) * 12 / 414);
  border-radius: calc(var(--pw) * 64 / 414);
  background: #0a0a0a;
  box-shadow: inset 0 0 0 2px #2a2a2e, 0 40px 80px rgba(24, 35, 63, 0.32), 0 12px 24px rgba(24, 35, 63, 0.18);
  transform-origin: 50% 0;
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: calc(var(--pw) * 52 / 414);
  background: #fff;
}

.phone--vocab { right: calc(50% + var(--pw) * 14 / 414); rotate: -6deg; }
.phone--feed { left: calc(50% + var(--pw) * 14 / 414); rotate: 6deg; }

.hero__photo { animation: photo-settle 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 50% 100%; }
.hero h1 { animation: title-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.hero__copy > p { animation: rise-in 900ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.stores { animation: rise-in 900ms 200ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.phone--vocab { animation: phone-in 1200ms 320ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.phone--feed { animation: phone-in 1200ms 420ms cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes photo-settle { from { scale: 1.06; } }
@keyframes title-in { from { opacity: 0; scale: 0.9; } }
@keyframes rise-in { from { opacity: 0; translate: 0 16px; } }
@keyframes phone-in { from { opacity: 0; translate: 0 160px; } }

/* How it works */

.how { padding-block: var(--section-y) 120px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 64px;
}

.section-head h2 { max-width: 540px; }

.section-head p {
  max-width: 420px;
  font-size: 20px;
  line-height: 30px;
  color: var(--color-body);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.step__panel {
  position: relative;
  height: 520px;
  margin-bottom: 28px;
  border-radius: 32px;
  overflow: hidden;
}

.step__panel--word { background: rgba(171, 171, 255, 0.3); }
.step__panel--grammar { background: rgba(221, 163, 248, 0.3); }
.step__panel--lime { background: rgba(215, 245, 0, 0.32); }

.step__panel img {
  position: absolute;
  top: 60px;
  left: 50%;
  translate: -50% 0;
  width: 300px;
  height: 617px;
  object-fit: cover;
  object-position: top;
  border-radius: 38px;
  outline: 7px solid #fff;
  box-shadow: 0 24px 48px rgba(24, 35, 63, 0.16);
}

.step h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
}

.step__num {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 18px;
}

.step p {
  padding-right: 24px;
  font-size: 17px;
  line-height: 26px;
  color: var(--color-body);
}

/* Hangul */

.hangul {
  padding-block: 120px;
  background: var(--color-bg-alt);
}

.hangul__inner {
  display: flex;
  align-items: center;
  gap: 96px;
}

.trace {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  width: 580px;
  padding: 40px 40px 48px;
  border-radius: 40px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 35, 63, 0.04);
}

.trace__title {
  font-weight: 700;
  font-size: 22px;
  line-height: 28px;
}

.trace svg { width: 420px; max-width: 100%; height: auto; }

.trace__hint {
  font-size: 16px;
  line-height: 22px;
  color: var(--color-label);
}

.hangul__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.hangul__copy > p,
.mascot__copy > p:last-child,
.pricing__copy > p {
  font-size: 20px;
  line-height: 30px;
  color: var(--color-body);
}

.letters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 16px;
}

.letters li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 84px;
  height: 100px;
  border-radius: 20px;
  background: #fff;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-label);
}

.letters span {
  font-family: var(--font-ko);
  font-weight: 600;
  font-size: 48px;
  line-height: 54px;
  color: var(--color-ink);
}

.letters .is-active { background: var(--color-accent); color: rgba(255, 255, 255, 0.85); }
.letters .is-active span { color: #fff; }

/* Mascot */

.mascot {
  overflow: hidden;
  background: var(--color-lime);
}

.mascot__inner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 760px;
}

.mascot__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 680px;
}

.mascot__hangul {
  font-family: var(--font-ko);
  font-weight: 800;
  font-size: 168px;
  line-height: 176px;
  letter-spacing: -0.02em;
  color: #000;
}

.mascot h2 { color: #000; }

.mascot__copy > p:last-child { max-width: 500px; color: #1f2600; }

.mascot__art {
  position: absolute;
  top: 70px;
  right: 100px;
  width: 560px;
}

.mascot__art img { width: 560px; height: 880px; object-fit: cover; }

.bubble {
  position: absolute;
  top: 400px;
  left: 416px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 22px 18px;
  border-radius: 24px 24px 24px 6px;
  background: #fff;
  box-shadow: 0 16px 32px rgba(31, 38, 0, 0.18);
  rotate: -6deg;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-body);
  white-space: nowrap;
}

.bubble span {
  font-family: var(--font-ko);
  font-weight: 800;
  font-size: 34px;
  line-height: 40px;
  color: #000;
}

/* Pricing */

.pricing { padding-block: var(--section-y); }

.pricing__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
}

.pricing__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 560px;
}

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 24px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 44px;
  bottom: 50px;
  width: 2px;
  background: var(--color-accent-tint);
}

.timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: 17px;
  line-height: 26px;
  color: var(--color-body);
}

.timeline li > div { padding-top: 8px; }

.timeline strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-ink);
}

.timeline__dot {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-accent-tint);
  color: var(--color-accent);
}

.timeline__dot--now { background: var(--color-accent); color: #fff; }

.pricing__inner > .timeline {
  width: 100%;
  max-width: 560px;
}

/* FAQ */

.faq {
  padding-block: var(--section-y);
  background: var(--color-bg-alt);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: 64px;
}

.faq__head {
  position: sticky;
  top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.faq__head p {
  font-size: 20px;
  line-height: 30px;
  color: var(--color-body);
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 32px 32px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(24, 35, 63, 0.04);
}

.faq__item h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
}

.faq__item p {
  font-size: 17px;
  line-height: 26px;
  color: var(--color-body);
}

.faq a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq a:hover { color: var(--color-accent-strong); }

/* Final call to action */

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-height: 760px;
  padding: 120px 16px 0;
  background: #8ec3f2 url("assets/seoul.webp") 50% 100% / cover no-repeat;
  text-align: center;
}

.subtitle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.subtitle span {
  padding-bottom: 8px;
  border-bottom: 6px solid rgba(255, 255, 255, 0.75);
  border-radius: 3px;
  font-family: var(--font-ko);
  font-weight: 700;
  font-size: 88px;
  line-height: 100px;
  color: #fff;
}

.cta__translation {
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
}

.cta .stores { padding-top: 20px; }

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  max-width: 1440px;
  margin-inline: auto;
  padding: 40px var(--gutter);
}

.footer__brand { display: flex; align-items: center; gap: 10px; }
.footer__brand img { width: 32px; height: 32px; border-radius: 9px; }

.footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
}

.footer__note {
  padding-left: 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-label);
}

.footer__links { display: flex; flex-wrap: wrap; gap: 32px; }

.footer__links a {
  font-weight: 500;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-body);
}

.footer__links a:hover { color: var(--color-accent); }

/* Tablet */

@media (max-width: 1180px) {
  :root { --gutter: 48px; --section-y: 112px; }

  h2 { font-size: 52px; line-height: 56px; }

  .hero h1 { font-size: 80px; line-height: 78px; }
  .hero__stage { --pw: 300px; }

  .steps { gap: 20px; }
  .step__panel { height: 460px; }
  .step__panel img { width: 260px; height: 535px; border-radius: 33px; }

  .hangul__inner { gap: 56px; }
  .trace { width: 460px; }

  .mascot__hangul { font-size: 132px; line-height: 140px; }
  .mascot__art { right: 0; width: 460px; }
  .mascot__art img { width: 460px; height: 723px; }
  .bubble { top: 330px; left: auto; right: 8px; }
}

@media (max-width: 900px) {
  :root { --gutter: 32px; --section-y: 96px; }

  .hero h1 { font-size: 64px; line-height: 64px; }

  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 48px; }

  .steps { grid-template-columns: minmax(0, 1fr); max-width: 480px; gap: 48px; }

  .hangul__inner { flex-direction: column; align-items: stretch; }
  .trace { width: 100%; max-width: 580px; }

  .mascot__inner { flex-direction: column; align-items: flex-start; min-height: 0; padding-top: 96px; }
  .mascot__art { position: relative; top: auto; right: auto; align-self: center; width: 360px; height: 420px; margin-top: 40px; }
  .mascot__art img { width: 360px; height: 566px; }
  .bubble { top: 170px; right: -24px; }

  .pricing__inner { flex-direction: column; }

  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq__head { position: static; }
}

/* Phone */

@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: 80px; }

  body { font-size: 16px; }

  h2 { font-size: 40px; line-height: 44px; }

  .hero__photo {
    bottom: -40px;
    height: 460px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 120px);
  }

  .hero__copy { gap: 16px; padding-top: max(48px, env(safe-area-inset-top)); }
  .hero h1 { font-size: 46px; line-height: 46px; }
  .hero__copy > p { font-size: 17px; line-height: 26px; }

  .store { gap: 10px; height: 54px; padding: 0 16px 0 14px; }

  .hero__stage { --pw: 184px; }
  .phone { top: 32px; }

  .section-head p,
  .hangul__copy > p,
  .mascot__copy > p:last-child,
  .pricing__copy > p { font-size: 17px; line-height: 26px; }

  .step__panel { height: 400px; border-radius: 28px; }
  .step__panel img { top: 44px; width: 240px; height: 494px; border-radius: 31px; outline-width: 6px; }
  .step h3 { font-size: 24px; line-height: 30px; }

  .trace { padding: 28px 20px 32px; border-radius: 32px; }
  .trace__title { font-size: 18px; line-height: 24px; }

  .letters { gap: 8px; }
  .letters li { width: calc((100% - 32px) / 5); max-width: 84px; height: 88px; }
  .letters span { font-size: 38px; line-height: 44px; }

  .mascot__inner { padding-top: 80px; }
  .mascot__hangul { font-size: 104px; line-height: 112px; }
  .mascot__art { width: 280px; height: 340px; }
  .mascot__art img { width: 280px; height: 440px; }
  .bubble { top: 120px; right: -36px; padding: 12px 16px 14px; }
  .bubble span { font-size: 26px; line-height: 32px; }

  .faq__head p { font-size: 17px; line-height: 26px; }
  .faq__item { padding: 24px; border-radius: 24px; }
  .faq__item h3 { font-size: 20px; line-height: 26px; }
  .faq__item p { font-size: 16px; line-height: 24px; }

  .cta { min-height: 600px; padding-top: 88px; background-size: auto 100%; }
  .subtitle { gap: 16px; }
  .subtitle span { font-size: 52px; line-height: 62px; border-bottom-width: 4px; }
  .cta__translation { font-size: 18px; line-height: 26px; }

  .footer { flex-direction: column; align-items: flex-start; }
  .footer__links { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__photo, .hero h1, .hero__copy > p, .stores, .phone { animation: none; }
  .store { transition: none; }
  .store:hover { transform: none; }
}