:root {
  --cream: #f3eee7;
  --ink: #100f0e;
  --muted: #9b928b;
  --card: rgba(31, 29, 27, 0.72);
  --card-strong: rgba(42, 38, 35, 0.92);
  --line: rgba(255, 255, 255, 0.1);
  --accent: #e85f4c;
  --accent-light: #ff9a7d;
  --sage: #9fb49a;
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
  --font: 'Plus Jakarta Sans', 'Noto Sans Myanmar', sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--font);
  background:
    radial-gradient(circle at 14% 8%, rgba(232, 127, 97, 0.28), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(159, 180, 154, 0.16), transparent 30%),
    linear-gradient(135deg, #0e0d0c, #171412 48%, #100f0e);
  overflow-x: hidden;
}

body.is-tab-hidden * {
  animation-play-state: paused !important;
}

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

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 3px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.04);
}

.scroll-progress span {
  display: block;
  width: calc(var(--scroll-progress, 0) * 100%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), #ffd0ae);
  box-shadow: 0 0 28px rgba(232, 127, 97, 0.52);
}

.site-shell {
  position: relative;
  isolation: isolate;
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
}

.ambient {
  position: fixed;
  z-index: -1;
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(42px);
  opacity: 0.42;
  pointer-events: none;
  animation: ambient-drift 16s ease-in-out infinite alternate;
}

.ambient-one {
  top: 8%;
  left: -120px;
  background: rgba(232, 127, 97, 0.45);
}

.ambient-two {
  right: -100px;
  bottom: 18%;
  background: rgba(159, 180, 154, 0.26);
  animation-delay: -6s;
}

.landing-nav {
  position: sticky;
  top: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(16, 15, 14, 0.72);
  backdrop-filter: blur(22px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
}

.landing-brand span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: rgba(232, 95, 76, 0.12);
  box-shadow: 0 18px 48px rgba(232, 95, 76, 0.2);
  overflow: hidden;
}

.landing-brand-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.landing-brand strong {
  font-size: 15px;
}

.landing-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
}

.landing-links a {
  padding: 9px 13px;
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.68);
  font-size: 12px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease;
}

.landing-links a:hover {
  color: var(--cream);
  background: rgba(255, 255, 255, 0.06);
}

.landing-nav-cta,
.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
}

.landing-nav-cta,
.button-primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 18px 42px rgba(232, 127, 97, 0.26);
}

.button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--cream);
  background: rgba(255, 255, 255, 0.05);
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
  gap: 42px;
  align-items: center;
  min-height: calc(100vh - 86px);
  padding: 86px 0 74px;
}

.hero-pill,
.section-kicker {
  display: inline-flex;
  width: fit-content;
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-copy h1,
.section-copy h2,
.section-center h2,
.business-card h2,
.final-cta h2 {
  color: var(--cream);
  font-size: clamp(46px, 7vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.075em;
}

.hero-copy h1 {
  margin-top: 18px;
  max-width: 900px;
}

.hero-copy p {
  max-width: 650px;
  margin-top: 22px;
  color: rgba(243, 238, 231, 0.7);
  font-size: 17px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.hero-proof span {
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.68);
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.hero-stage {
  position: relative;
  min-height: 620px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 42px;
  background:
    radial-gradient(circle at 50% 36%, rgba(232, 95, 76, 0.3), transparent 32%),
    radial-gradient(circle at 70% 12%, rgba(255, 154, 125, 0.14), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transform: perspective(1100px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translate3d(0, var(--tilt-lift, 0px), 0);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  will-change: transform;
  perspective: 1100px;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  backface-visibility: hidden;
}

.creator-orbit {
  position: absolute;
  inset: 62px;
  transform-style: preserve-3d;
  animation: stage-float 6s ease-in-out infinite alternate;
}

.orbit-ring {
  position: absolute;
  inset: 44px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  transform: rotateX(66deg) rotateZ(18deg);
  z-index: 1;
}

.ring-two {
  inset: 96px;
  border-color: rgba(232, 127, 97, 0.34);
  animation: ring-spin 18s linear infinite;
}

.mentor-core {
  position: absolute;
  left: 50%;
  top: 48%;
  display: grid;
  place-items: center;
  width: 166px;
  height: 166px;
  border: 0;
  border-radius: 38px;
  background: rgba(232, 95, 76, 0.1);
  box-shadow: 0 30px 72px rgba(232, 95, 76, 0.24);
  transform: translate(-50%, -50%) translateZ(92px) rotateX(6deg);
  z-index: 5;
  overflow: hidden;
}

.mentor-core-logo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.floating-chip {
  position: absolute;
  z-index: 4;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.82);
  background: rgba(16, 15, 14, 0.72);
  backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 800;
  animation: chip-breathe 4s ease-in-out infinite alternate;
}

.chip-one { left: 7%; top: 18%; }
.chip-two { right: 14%; top: 46%; animation-delay: -1.4s; }
.chip-three { left: 22%; bottom: 16%; animation-delay: -2.6s; }

.insight-card {
  position: absolute;
  z-index: 6;
  width: min(360px, calc(100% - 50px));
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 26px;
  background: rgba(18, 17, 16, 0.74);
  backdrop-filter: blur(20px);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
}

.insight-card span {
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.insight-card strong {
  display: block;
  margin-top: 10px;
  color: var(--cream);
  font-size: 22px;
  line-height: 1.2;
}

.insight-card p {
  margin-top: 9px;
  color: rgba(243, 238, 231, 0.58);
  font-size: 13px;
  line-height: 1.55;
}

.insight-front {
  left: 34px;
  bottom: 34px;
  transform: translate3d(0, 0, 80px) rotateY(-8deg);
}

.insight-back {
  top: 34px;
  right: 34px;
  width: 190px;
  transform: translate3d(0, 0, 44px) rotateY(8deg);
}

.insight-back strong {
  font-size: 54px;
  letter-spacing: -0.08em;
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.035);
}

.logo-strip span {
  padding: 10px 14px;
  color: rgba(243, 238, 231, 0.62);
  font-size: 12px;
  font-weight: 800;
}

.section-grid,
.learn-section,
.business-section,
.feature-section,
.creator-runway,
.motion-board,
.pricing-section,
.final-cta {
  padding: 98px 0;
}

.section-grid,
.learn-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 54px;
  align-items: center;
}

.section-copy h2,
.section-center h2,
.business-card h2,
.final-cta h2 {
  margin-top: 12px;
  font-size: clamp(34px, 4.6vw, 62px);
}

.section-copy p,
.section-text p,
.business-card p {
  color: rgba(243, 238, 231, 0.66);
  font-size: 15px;
  line-height: 1.85;
}

.section-text {
  display: grid;
  gap: 18px;
}

.section-center {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
}

.pricing-section-sub {
  max-width: 720px;
  margin: 16px auto 0;
  color: rgba(243, 238, 231, 0.66);
  font-size: 15px;
  line-height: 1.78;
}

.feature-grid,
.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-card,
.landing-price-card,
.timeline-card,
.business-card {
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 127, 97, 0.13), transparent 34%),
    var(--card);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.18);
}

.feature-card,
.landing-price-card {
  min-height: 260px;
  padding: 24px;
  border-radius: 28px;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translate3d(0, var(--tilt-lift, 0px), 0);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  will-change: transform;
  backface-visibility: hidden;
}

.feature-card span,
.landing-price-card span,
.timeline-card span {
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.feature-card h3,
.landing-price-card h3 {
  margin-top: 22px;
  color: var(--cream);
  font-size: 23px;
  letter-spacing: -0.04em;
}

.feature-card p,
.landing-price-card p,
.timeline-card p {
  margin-top: 12px;
  color: rgba(243, 238, 231, 0.62);
  font-size: 13px;
  line-height: 1.72;
}

.creator-runway {
  position: relative;
  min-height: 160vh;
}

.runway-sticky {
  position: sticky;
  top: 104px;
}

.runway-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  perspective: 1200px;
}

.runway-card {
  position: relative;
  min-height: 360px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 32px;
  background:
    linear-gradient(150deg, rgba(232, 127, 97, 0.16), transparent 46%),
    rgba(31, 29, 27, 0.76);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.24);
  transform: translate3d(0, calc(var(--runway-offset, 0) * 1px), 0) rotateX(calc(var(--runway-rotate, 0) * 1deg));
  transition: transform 260ms ease;
  overflow: hidden;
}

.runway-card::after {
  content: '';
  position: absolute;
  inset: auto -25% -35% -25%;
  height: 180px;
  background: radial-gradient(circle, rgba(232, 127, 97, 0.26), transparent 62%);
}

.runway-card span {
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.runway-card strong {
  display: block;
  margin-top: 90px;
  color: var(--cream);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.03;
  letter-spacing: -0.06em;
}

.runway-card p {
  margin-top: 16px;
  color: rgba(243, 238, 231, 0.62);
  font-size: 14px;
  line-height: 1.72;
}

.learn-visual {
  display: grid;
  gap: 14px;
  perspective: 900px;
}

.timeline-card {
  padding: 22px;
  border-radius: 24px;
  transform: rotateY(-9deg);
}

.timeline-card.active {
  border-color: rgba(232, 127, 97, 0.45);
  transform: rotateY(-3deg) translateX(30px);
}

.timeline-card strong {
  display: block;
  margin-top: 8px;
  color: var(--cream);
  font-size: 20px;
}

.business-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.7fr);
  gap: 26px;
  align-items: center;
  padding: 34px;
  border-radius: 34px;
}

.business-metrics {
  display: grid;
  gap: 12px;
}

.business-metrics div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
}

.business-metrics strong {
  font-size: 32px;
  line-height: 1;
}

.business-metrics span {
  color: rgba(243, 238, 231, 0.62);
  font-size: 12px;
}

.motion-board {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(420px, 1.22fr);
  gap: 28px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 38px;
  padding: 34px;
  background:
    radial-gradient(circle at 80% 20%, rgba(159, 180, 154, 0.18), transparent 28%),
    radial-gradient(circle at 16% 80%, rgba(232, 127, 97, 0.2), transparent 30%),
    rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.motion-copy {
  position: relative;
  z-index: 2;
}

.motion-copy h2 {
  margin-top: 12px;
  color: var(--cream);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.motion-copy p {
  margin-top: 16px;
  color: rgba(243, 238, 231, 0.64);
  line-height: 1.8;
}

.signal-stack {
  position: relative;
  display: grid;
  gap: 16px;
  min-height: 340px;
  align-content: center;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%);
}

.signal-row {
  display: flex;
  width: max-content;
  gap: 12px;
  transform: translateX(calc(var(--signal-progress, 0) * -130px));
  transition: transform 120ms linear;
}

.signal-row.reverse {
  justify-self: end;
  transform: translateX(calc(var(--signal-progress, 0) * 130px));
}

.signal-row span {
  min-width: 130px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: rgba(243, 238, 231, 0.8);
  background: rgba(16, 15, 14, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.signal-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 190px;
  height: 190px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 32%),
    linear-gradient(145deg, #2d2925, #151311);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.34), 0 0 80px rgba(232, 127, 97, 0.22);
  transform: translate(-50%, -50%) rotate(var(--signal-orb-rotate, 0deg));
  transition: transform 140ms linear;
  z-index: 3;
}

.signal-orb strong {
  margin-top: 16px;
  font-size: 18px;
  letter-spacing: -0.04em;
}

.signal-orb span {
  max-width: 108px;
  margin-top: -28px;
  color: rgba(243, 238, 231, 0.48);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.landing-pricing-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-price-card {
  min-height: 580px;
  display: flex;
  flex-direction: column;
}

.landing-price-card.featured {
  border-color: rgba(232, 127, 97, 0.58);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 127, 97, 0.28), transparent 38%),
    var(--card-strong);
  transform: translateY(-12px);
}

.landing-price-card h3 {
  font-size: 36px;
}

.landing-price-card ul {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
  list-style: none;
}

.landing-price-card li {
  position: relative;
  padding-left: 24px;
  color: rgba(243, 238, 231, 0.72);
  font-size: 13px;
}

.landing-price-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
}

.landing-price-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  border: 1px solid rgba(232, 127, 97, 0.42);
  border-radius: 999px;
  color: var(--accent-light);
  background: rgba(232, 127, 97, 0.08);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.landing-price-cta:hover {
  border-color: rgba(232, 127, 97, 0.78);
  background: rgba(232, 127, 97, 0.16);
  transform: translateY(-2px);
}

.landing-price-cta.primary {
  color: #201815;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), #f3a37f);
  box-shadow: 0 18px 42px rgba(232, 127, 97, 0.26);
}

.pricing-psychology-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.pricing-belief-card,
.pricing-detail-panel {
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 12% 0%, rgba(232, 127, 97, 0.18), transparent 32%),
    rgba(31, 29, 27, 0.78);
  backdrop-filter: blur(20px);
  box-shadow: 0 22px 72px rgba(0, 0, 0, 0.2);
}

.pricing-belief-card {
  min-height: 220px;
  padding: 24px;
  border-radius: 28px;
}

.pricing-belief-card span {
  color: var(--accent-light);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pricing-belief-card h3 {
  margin-top: 20px;
  color: var(--cream);
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.pricing-belief-card p {
  margin-top: 14px;
  color: rgba(243, 238, 231, 0.64);
  font-size: 13px;
  line-height: 1.76;
}

.pricing-detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 28px;
  align-items: start;
  margin-top: 22px;
  padding: 30px;
  border-radius: 34px;
}

.pricing-detail-panel h3 {
  margin-top: 12px;
  color: var(--cream);
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.02;
  letter-spacing: -0.065em;
}

.pricing-detail-list {
  display: grid;
  gap: 14px;
}

.pricing-detail-list p {
  margin: 0;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  color: rgba(243, 238, 231, 0.68);
  background: rgba(255, 255, 255, 0.035);
  font-size: 13px;
  line-height: 1.76;
}

.pricing-detail-list strong {
  color: var(--cream);
}

.final-cta {
  display: grid;
  justify-items: center;
  gap: 20px;
  text-align: center;
}

.final-cta span {
  color: var(--accent-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.final-cta h2 {
  max-width: 880px;
}

/* Reveal animation. Only opacity and transform are animated - both are composited on the
   GPU, so they never trigger layout or paint and stay smooth on cheap Android hardware.
   will-change is applied only while the element is still hidden, then dropped, so we do not
   permanently hold a compositor layer for every card on the page. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0) scale(0.985);
  transition:
    opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 620ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  will-change: auto;
}

/* Children of a revealed group ease in one after another, which reads as intentional
   choreography rather than everything snapping in at once. Pure CSS - no JS timers. */
.reveal.is-visible > * {
  animation: reveal-child 520ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.reveal.is-visible > *:nth-child(1) { animation-delay: 60ms; }
.reveal.is-visible > *:nth-child(2) { animation-delay: 130ms; }
.reveal.is-visible > *:nth-child(3) { animation-delay: 200ms; }
.reveal.is-visible > *:nth-child(4) { animation-delay: 270ms; }
.reveal.is-visible > *:nth-child(n + 5) { animation-delay: 330ms; }

@keyframes reveal-child {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Buttons and cards get a short, physical press response. Touch users get feedback the
   instant they tap, which makes a phone feel far more responsive than any scroll effect. */
.landing-nav-cta,
.button-primary,
.landing-price-cta,
.landing-lang-toggle {
  transition: transform 160ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 160ms ease, background 160ms ease, border-color 160ms ease;
}

.landing-nav-cta:active,
.button-primary:active,
.landing-price-cta:active,
.landing-lang-toggle:active {
  transform: scale(0.97);
}

@media (hover: hover) {
  .landing-price-card {
    transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 260ms ease;
  }
  .landing-price-card:hover {
    transform: translate3d(0, -4px, 0);
  }
}

/* Anyone who asks for less motion gets the content immediately, with no movement at all. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(48px, 38px, 0) scale(1.08); }
}

@keyframes stage-float {
  from { transform: translateY(0) rotateX(0deg); }
  to { transform: translateY(-18px) rotateX(4deg); }
}

@keyframes ring-spin {
  to { transform: rotateX(66deg) rotateZ(378deg); }
}

@keyframes chip-breathe {
  from { transform: translateY(0) translateZ(38px); }
  to { transform: translateY(-14px) translateZ(54px); }
}

@media (max-width: 1100px) {
  .landing-links {
    display: none;
  }

  .hero-section,
  .section-grid,
  .learn-section,
  .motion-board,
  .business-card,
  .pricing-detail-panel {
    grid-template-columns: 1fr;
  }

  .hero-section {
    padding-top: 62px;
  }

  .hero-stage {
    min-height: 520px;
  }

  .motion-board {
    grid-template-columns: 1fr;
  }

  .signal-stack {
    min-height: 300px;
  }

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

  .creator-runway {
    min-height: auto;
  }

  .runway-sticky {
    position: relative;
    top: auto;
  }

  .runway-track {
    grid-template-columns: 1fr;
  }

  .runway-card {
    min-height: 260px;
  }
}

@media (max-width: 760px) {
  .site-shell {
    width: min(100% - 24px, 1480px);
  }

  .landing-nav {
    top: 10px;
    border-radius: 22px;
  }

  .landing-brand strong {
    display: none;
  }

  .landing-nav-cta {
    min-height: 38px;
    padding: 0 14px;
  }

  .hero-copy h1 {
    font-size: 44px;
  }

  .hero-stage {
    min-height: 500px;
    border-radius: 28px;
  }

  .creator-orbit {
    inset: 24px;
  }

  .mentor-core {
    width: 126px;
    height: 126px;
    top: 38%;
    border-radius: 32px;
  }

  .mentor-core strong {
    font-size: 34px;
  }

  .insight-card {
    padding: 16px;
  }

  .insight-front {
    left: 18px;
    right: 18px;
    bottom: 18px;
    width: auto;
    transform: none;
  }

  .insight-back {
    display: none;
  }

  .floating-chip {
    padding: 9px 11px;
    font-size: 11px;
  }

  .chip-two,
  .chip-three {
    display: none;
  }

  .chip-one {
    left: 8%;
    top: 15%;
  }

  .feature-grid,
  .landing-pricing-grid,
  .pricing-psychology-grid,
  .pricing-detail-panel,
  .runway-track,
  .business-metrics {
    grid-template-columns: 1fr;
  }

  .landing-price-card {
    min-height: auto;
  }

  .landing-price-card.featured {
    transform: none;
  }

  .section-grid,
  .learn-section,
  .business-section,
  .feature-section,
  .creator-runway,
  .motion-board,
  .pricing-section,
  .final-cta {
    padding: 62px 0;
  }

  .motion-board {
    padding: 22px;
    border-radius: 28px;
  }

  .motion-copy h2 {
    font-size: clamp(32px, 12vw, 44px);
  }

  .signal-stack {
    min-height: 260px;
    margin-top: 4px;
  }

  .signal-row {
    gap: 8px;
  }

  .signal-row span {
    min-width: 96px;
    padding: 14px 14px;
    font-size: 12px;
  }

  .signal-orb {
    width: 142px;
    height: 142px;
  }

  .signal-orb strong {
    font-size: 15px;
  }

  .signal-orb span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Language toggle in the landing nav. Sits beside the CTA and stays visible on mobile,
   because a Burmese-first audience should never have to hunt for their own language. */
.landing-lang-toggle {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 9px 14px;
  margin-right: 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.landing-lang-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.landing-lang-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 720px) {
  .landing-lang-toggle { padding: 8px 11px; font-size: 12px; margin-right: 6px; }
}

/* ---------------------------------------------------------------------------
   Burmese typography
   ---------------------------------------------------------------------------
   The display headings are tuned for English: line-height under 1.0 and heavy
   negative tracking. Burmese stacks marks both above and below the baseline, so
   those settings make consecutive lines physically collide and jam the glyphs
   together. Burmese also sets longer than the same English sentence and renders
   taller per line, so the identical px size overflows into a wall of text.

   Everything below only applies while the page is in Burmese - English keeps
   its original display scale untouched.
   --------------------------------------------------------------------------- */

html[lang="my"] {
  /* Latin stays on Plus Jakarta Sans; the browser falls back per glyph, so only
     Burmese characters reach Noto Sans Myanmar. The extra fallbacks keep the
     page off Windows' dated "Myanmar Text" if Google Fonts is slow to arrive. */
  --font: 'Plus Jakarta Sans', 'Noto Sans Myanmar', 'Padauk', 'Myanmar Text', sans-serif;
}

/* Give every display heading room to breathe and undo the negative tracking. */
html[lang="my"] .hero-copy h1,
html[lang="my"] .section-copy h2,
html[lang="my"] .section-center h2,
html[lang="my"] .business-card h2,
html[lang="my"] .final-cta h2,
html[lang="my"] .motion-copy h2,
html[lang="my"] .runway-card strong,
html[lang="my"] .pricing-detail-panel h3 {
  line-height: 1.5;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Roughly half the English display size. Burmese carries the same weight on the
   page at a smaller size because each glyph is denser than a Latin letter. */
html[lang="my"] .hero-copy h1 {
  font-size: clamp(26px, 3.4vw, 44px);
  max-width: 760px;
}

html[lang="my"] .section-copy h2,
html[lang="my"] .section-center h2,
html[lang="my"] .business-card h2,
html[lang="my"] .final-cta h2 {
  font-size: clamp(21px, 2.7vw, 33px);
}

html[lang="my"] .motion-copy h2 {
  font-size: clamp(21px, 2.5vw, 31px);
}

html[lang="my"] .runway-card strong {
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.45;
}

html[lang="my"] .pricing-detail-panel h3 {
  font-size: clamp(17px, 1.9vw, 24px);
}

/* Card titles. The feature headings carry a parenthetical gloss in Burmese, so
   they run much longer than the English original and need to step down a size. */
html[lang="my"] .feature-card h3 {
  font-size: 19px;
  line-height: 1.6;
  letter-spacing: 0;
}

html[lang="my"] .landing-price-card h3 {
  letter-spacing: 0;
  line-height: 1.4;
}

html[lang="my"] .insight-card strong {
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0;
}

html[lang="my"] .logo-strip span,
html[lang="my"] .floating-chip {
  letter-spacing: 0;
  line-height: 1.6;
}

/* Body copy needs looser leading than Latin for the same reason. */
html[lang="my"] .hero-copy p,
html[lang="my"] .section-copy p,
html[lang="my"] .section-text p,
html[lang="my"] .business-card p,
html[lang="my"] .runway-card p,
html[lang="my"] .motion-copy p,
html[lang="my"] .pricing-detail-list li,
html[lang="my"] .landing-price-card li {
  line-height: 1.95;
  letter-spacing: 0;
}

/* Uppercase only ever hit the Latin words in a mixed line, so "Creators" would
   shout next to the Burmese around it. */
html[lang="my"] .hero-pill,
html[lang="my"] .section-kicker,
html[lang="my"] .landing-price-cta,
html[lang="my"] .button-primary,
html[lang="my"] .button-secondary,
html[lang="my"] .landing-nav-cta {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.6;
}