:root {
      --surface: #fef7ff;
      --surface-low: #f8f1fe;
      --surface-container: #f3ebf8;
      --surface-high: #ede5f3;
      --on-surface: #1d1a23;
      --muted: #494454;
      --outline: #cbc3d7;
      --primary: #6b38d4;
      --primary-2: #8455ef;
      --primary-soft: #d0bcff;
      --secondary: #00687a;
      --cyan: #57dffe;
      --white: #ffffff;
      --shadow: 0 28px 80px rgba(83, 41, 173, .16);
      --shadow-2: 0 18px 45px rgba(83, 41, 173, .12);
      --radius-xl: 42px;
      --radius-lg: 30px;
      --radius-md: 22px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: ui-rounded, "SF Pro Rounded", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--on-surface);
      background:
        radial-gradient(circle at 12% 8%, rgba(87,223,254,.22), transparent 22%),
        radial-gradient(circle at 84% 14%, rgba(132,85,239,.20), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, var(--surface) 44%, #ffffff 100%);
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }

    .bubble-bg {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
      overflow: hidden;
    }
    .bubble {
      position: absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 70px rgba(107,56,212,.10);
      backdrop-filter: blur(8px);
      animation: floaty 9s ease-in-out infinite;
    }
    .bubble.one { width: 220px; height: 220px; top: 18%; left: -70px; }
    .bubble.two { width: 160px; height: 160px; right: 7%; top: 18%; animation-delay: -2s; }
    .bubble.three { width: 280px; height: 280px; right: -120px; bottom: 12%; animation-delay: -5s; }
    .bubble.four { width: 100px; height: 100px; left: 14%; bottom: 10%; animation-delay: -3s; }

    @keyframes floaty {
      0%, 100% { transform: translate3d(0,0,0) scale(1); }
      50% { transform: translate3d(0,-22px,0) scale(1.035); }
    }

    .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      padding: 18px 0;
      backdrop-filter: blur(18px);
      background: rgba(254,247,255,.70);
      border-bottom: 1px solid rgba(203,195,215,.32);
    }
    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .brand { display: flex; align-items: center; gap: 12px; min-width: 160px; }
    .brand-mark {
      width: 42px; height: 42px;
      border-radius: 15px;
      display: grid; place-items: center;
      background: linear-gradient(145deg, var(--primary-2), var(--primary));
      box-shadow: 0 12px 28px rgba(107,56,212,.20);
      overflow: hidden;
    }
    .brand-mark img { width: 72px; transform: translateY(5px); }
    .brand-name { font-weight: 900; font-size: 23px; letter-spacing: -.8px; color: var(--primary); }
    .nav-links { display: flex; align-items: center; gap: 26px; color: var(--muted); font-weight: 700; font-size: 14px; }

    .hero { padding: 82px 0 72px; }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      align-items: center;
      gap: 44px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 15px;
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      border: 1px solid rgba(203,195,215,.54);
      box-shadow: 0 12px 34px rgba(107,56,212,.08);
      color: var(--secondary);
      font-weight: 900;
      margin-bottom: 24px;
    }
    .dot-wave { display: inline-flex; align-items: end; gap: 4px; height: 18px; }
    .dot-wave span { width: 5px; border-radius: 999px; background: var(--cyan); }
    .dot-wave span:nth-child(1) { height: 8px; }
    .dot-wave span:nth-child(2) { height: 14px; }
    .dot-wave span:nth-child(3) { height: 18px; }
    .dot-wave span:nth-child(4) { height: 12px; }

    h1 {
      margin: 0;
      font-size: clamp(48px, 7vw, 92px);
      line-height: .92;
      letter-spacing: -4.5px;
      max-width: 770px;
    }
    .gradient-text {
      color: transparent;
      background: linear-gradient(135deg, var(--primary), var(--primary-2) 58%, var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
    }
    .lead {
      margin: 28px 0 34px;
      color: var(--muted);
      font-size: clamp(18px, 2vw, 22px);
      line-height: 1.62;
      max-width: 630px;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 56px;
      padding: 0 24px;
      border-radius: 999px;
      border: 0;
      font-weight: 950;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 18px 38px rgba(107,56,212,.25);
    }
    .btn-secondary {
      color: var(--primary);
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(203,195,215,.68);
      box-shadow: 0 12px 30px rgba(107,56,212,.08);
    }
    .mini-proof {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 28px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
    }
    .avatars { display: flex; }
    .avatars span {
      width: 34px; height: 34px; border-radius: 50%;
      border: 3px solid #fff;
      margin-left: -10px;
      background: linear-gradient(135deg, var(--primary-2), var(--cyan));
      box-shadow: 0 8px 18px rgba(107,56,212,.15);
    }
    .avatars span:first-child { margin-left: 0; }

    .hero-visual { position: relative; min-height: 570px; display: grid; place-items: center; }
    .mascot-card {
      position: relative;
      width: min(100%, 530px);
      aspect-ratio: 1 / 1;
      display: grid;
      place-items: center;
      border-radius: 54px;
      background:
        radial-gradient(circle at 36% 18%, rgba(255,255,255,.94), transparent 32%),
        linear-gradient(145deg, rgba(255,255,255,.85), rgba(248,241,254,.72));
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.88);
      overflow: hidden;
    }
    .mascot-card:before {
      content: "";
      position: absolute; inset: 36px;
      border-radius: 44px;
      background: linear-gradient(135deg, rgba(132,85,239,.13), rgba(87,223,254,.10));
      filter: blur(.2px);
    }
    .mascot-card img {
      position: relative;
      width: 86%;
      max-width: 480px;
      filter: drop-shadow(0 22px 36px rgba(74,37,147,.18));
      animation: mascotFloat 5.6s ease-in-out infinite;
    }
    @keyframes mascotFloat {
      0%, 100% { transform: translateY(0) rotate(-1.5deg); }
      50% { transform: translateY(-12px) rotate(1.5deg); }
    }

    .float-chip {
      position: absolute;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(255,255,255,.86);
      border: 1px solid rgba(203,195,215,.52);
      box-shadow: 0 18px 48px rgba(107,56,212,.12);
      color: var(--primary);
      font-weight: 950;
      animation: floaty 7s ease-in-out infinite;
    }
    .chip-hi { top: 56px; left: -12px; width: 116px; height: 72px; font-size: 34px; color: var(--cyan); transform: rotate(-8deg); }
    .chip-aa { right: -12px; top: 120px; width: 86px; height: 86px; font-size: 31px; transform: rotate(11deg); animation-delay: -1s; }
    .chip-en { left: 38px; bottom: 84px; width: 86px; height: 64px; font-size: 28px; transform: rotate(-10deg); animation-delay: -2.5s; }
    .chip-wave { right: 42px; bottom: 64px; width: 122px; height: 76px; color: var(--secondary); animation-delay: -4s; }
    .chip-wave .dot-wave span { background: var(--cyan); width: 7px; }

    .logo-strip { padding: 14px 0 58px; }
    .wordmark-card {
      width: min(760px, 100%);
      margin: 0 auto;
      padding: 12px 28px;
      border-radius: 34px;
      background: rgba(255,255,255,.62);
      border: 1px solid rgba(203,195,215,.48);
      box-shadow: 0 16px 50px rgba(107,56,212,.08);
    }
    .wordmark-card img { display: block; width: 100%; height: auto; }

    section { padding: 76px 0; }
    .section-head { text-align: center; max-width: 740px; margin: 0 auto 38px; }
    .section-kicker {
      margin: 0 0 12px;
      color: var(--secondary);
      font-size: 14px;
      font-weight: 950;
      text-transform: uppercase;
      letter-spacing: .16em;
    }
    h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1;
      letter-spacing: -2.8px;
    }
    .section-copy { color: var(--muted); font-size: 18px; line-height: 1.7; margin: 18px auto 0; max-width: 660px; }

    .features {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }
    .feature-card {
      position: relative;
      padding: 28px;
      min-height: 265px;
      border-radius: var(--radius-lg);
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(203,195,215,.50);
      box-shadow: var(--shadow-2);
      overflow: hidden;
    }
    .feature-card:after {
      content: "";
      position: absolute;
      width: 150px; height: 150px;
      right: -64px; bottom: -64px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(132,85,239,.22), transparent 68%);
    }
    .icon-bubble {
      width: 62px; height: 62px;
      border-radius: 22px;
      display: grid; place-items: center;
      background: linear-gradient(145deg, #fff, var(--surface-container));
      box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(107,56,212,.10);
      margin-bottom: 22px;
      color: var(--primary);
      font-size: 28px;
    }
    .feature-card h3 { margin: 0 0 12px; font-size: 22px; letter-spacing: -.8px; }
    .feature-card p { margin: 0; color: var(--muted); line-height: 1.65; }

    .split {
      display: grid;
      grid-template-columns: .95fr 1.05fr;
      gap: 34px;
      align-items: center;
    }
    .panel {
      border-radius: var(--radius-xl);
      background: rgba(255,255,255,.74);
      border: 1px solid rgba(203,195,215,.50);
      box-shadow: var(--shadow);
      padding: 32px;
      overflow: hidden;
    }
    .steps { display: grid; gap: 16px; margin-top: 26px; }
    .step {
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: start;
      padding: 18px;
      border-radius: 26px;
      background: linear-gradient(135deg, rgba(248,241,254,.84), rgba(255,255,255,.78));
      border: 1px solid rgba(203,195,215,.38);
    }
    .step-number {
      width: 52px; height: 52px;
      display: grid; place-items: center;
      border-radius: 18px;
      color: #fff;
      font-weight: 950;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
    }
    .step h3 { margin: 0 0 5px; font-size: 20px; }
    .step p { margin: 0; color: var(--muted); line-height: 1.55; }

    .phone-wrap { display: grid; place-items: center; padding: 18px; }
    .phone {
      width: min(100%, 360px);
      min-height: 690px;
      padding: 18px;
      border-radius: 46px;
      background: #1d1a23;
      box-shadow: 0 35px 80px rgba(29,26,35,.22);
    }
    .phone-screen {
      min-height: 654px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 26% 0%, rgba(87,223,254,.18), transparent 32%),
        linear-gradient(180deg, #fff 0%, var(--surface-low) 100%);
      padding: 22px;
      overflow: hidden;
      position: relative;
    }
    .phone-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .level-pill { padding: 8px 12px; border-radius: 999px; background: rgba(107,56,212,.10); color: var(--primary); font-weight: 950; }
    .mini-mascot {
      width: 58px; height: 58px;
      border-radius: 22px;
      background: var(--surface-container);
      display: grid; place-items: center;
      overflow: hidden;
    }
    .mini-mascot img { width: 92px; transform: translateY(7px); }
    .lesson-title { margin: 26px 0 8px; font-size: 31px; line-height: 1.05; letter-spacing: -1.4px; }
    .lesson-sub { margin: 0; color: var(--muted); line-height: 1.45; }
    .phrase-bubble {
      margin: 28px 0 18px;
      padding: 22px;
      border-radius: 28px 28px 28px 8px;
      background: #fff;
      box-shadow: 0 18px 40px rgba(107,56,212,.10);
    }
    .phrase-bubble b { font-size: 30px; color: var(--primary); }
    .wave-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 18px;
      border-radius: 28px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #fff;
      box-shadow: 0 18px 40px rgba(107,56,212,.22);
    }
    .wave-lines { display: flex; align-items: center; gap: 5px; height: 54px; }
    .wave-lines span { width: 8px; border-radius: 999px; background: var(--cyan); }
    .wave-lines span:nth-child(1) { height: 18px; }
    .wave-lines span:nth-child(2) { height: 34px; }
    .wave-lines span:nth-child(3) { height: 52px; }
    .wave-lines span:nth-child(4) { height: 28px; }
    .wave-lines span:nth-child(5) { height: 42px; }
    .score { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .score-card { padding: 16px; border-radius: 24px; background: rgba(255,255,255,.72); border: 1px solid rgba(203,195,215,.45); }
    .score-card strong { display: block; font-size: 28px; color: var(--primary); }
    .score-card span { color: var(--muted); font-size: 13px; font-weight: 850; }



    footer { padding: 34px 0 48px; color: var(--muted); }
    .footer-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; border-top: 1px solid rgba(203,195,215,.42); padding-top: 26px; }

    @media (max-width: 980px) {
      .hero-grid, .split { grid-template-columns: 1fr; }
      .hero { padding-top: 54px; }
      .hero-visual { min-height: 520px; }
      .features { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px) {
      .nav .nav-links { display: none; }
      .brand-name { font-size: 21px; }
      h1 { letter-spacing: -2.8px; }
      .hero-visual { min-height: 420px; }
      .mascot-card { border-radius: 38px; }
      .float-chip { transform: scale(.82); }
      .chip-hi { left: 0; top: 18px; }
      .chip-aa { right: 0; top: 74px; }
      .chip-en { left: 10px; bottom: 44px; }
      .chip-wave { right: 10px; bottom: 34px; }
      .features { grid-template-columns: 1fr; }
      .phone { min-height: 0; border-radius: 38px; }
      .phone-screen { min-height: 590px; }
    }

    .mockup-grid {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: nowrap;
      margin: 38px auto 0;
      width: 100%;
      max-width: 500px;
    }
    .phone-mockup {
      flex: 1;
      max-width: 240px;
      width: 100%;
      padding: 10px;
      border-radius: 36px;
      background: #1d1a23;
      box-shadow: 0 20px 50px rgba(29,26,35,.22);
      transition: transform .3s ease;
    }
    .phone-mockup:hover {
      transform: translateY(-8px);
    }
    .phone-mockup img {
      width: 100%;
      border-radius: 26px;
      display: block;
    }