/* ══════════════════════════════════════════
   LearnEnglish — Landing Page Styles
   css/landing.css
   
   To update: edit this file and upload only
   this file to Hostinger. No need to touch
   index.html unless the content changes.
══════════════════════════════════════════ */

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

    :root {
      --purple: #6C3FE8;
      --purple-l: #EDE8FD;
      --purple-d: #4A2AB5;
      --yellow: #FFD000;
      --yellow-d: #E6A800;
      --green: #00C48C;
      --green-d: #009E72;
      --coral: #FF6B6B;
      --coral-d: #E54B4B;
      --sky: #4ECDC4;
      --white: #ffffff;
      --ink: #1A1040;
      --ink-m: #5A5280;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Nunito', sans-serif;
      background: #FAFAFF;
      color: var(--ink);
      overflow-x: hidden;
    }

    /* ── NAV ── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 0 24px;
      height: 64px;
      display: flex; align-items: center; justify-content: flex-end;
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(108,63,232,0.08);
      overflow: hidden;
      gap: 8px;
    }
    .nav-logo {
      font-family: 'Fredoka One', sans-serif;
      font-size: 24px; color: var(--purple);
      display: flex; align-items: center; gap: 8px;
    }
    .nav-logo .logo-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--yellow); display: inline-block;
    }
    .nav-cta {
      background: var(--purple); color: #fff;
      text-decoration: none; border-radius: 50px;
      padding: 10px 24px; font-weight: 800; font-size: 14px;
      transition: all 0.2s; white-space: nowrap;
      box-shadow: 0 4px 14px rgba(108,63,232,0.35);
      flex-shrink: 0;
    }
    .nav-cta:hover { background: var(--purple-d); transform: translateY(-1px); }

    /* ── NAV MOBILE ── */
    @media (max-width: 520px) {
      nav { padding: 0 14px; }
      .nav-logo { font-size: 18px; }
      .nav-logo .logo-dot { width: 8px; height: 8px; }
      /* Hide Register from nav on mobile — it's already in the hero */
      #navRegisterBtn { display: none !important; }
      .nav-cta { padding: 9px 18px; font-size: 13px; }
      /* Hide lower bubbles that overlap pill buttons on mobile */
      .b3, .b4, .b5, .b6 { display: none; }
    }
    @media (max-width: 360px) {
      .nav-logo { font-size: 15px; }
      .nav-cta { padding: 8px 14px; font-size: 12px; }
    }

    /* ── HERO ── */
    .hero {
      min-height: 100vh;
      padding: 100px 24px 60px;
      position: relative;
      overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }

    /* Animated blob background */
    .hero-bg {
      position: absolute; inset: 0; z-index: 0;
      background: linear-gradient(135deg, #F0EBFF 0%, #E8F9F5 40%, #FFF5E8 100%);
    }
    .blob {
      position: absolute; border-radius: 50%;
      filter: blur(60px); opacity: 0.5;
      animation: blob-drift 8s ease-in-out infinite alternate;
    }
    .blob-1 { width: 500px; height: 500px; background: #C4B0FF; top: -100px; right: -100px; animation-delay: 0s; }
    .blob-2 { width: 400px; height: 400px; background: #B0F0E0; bottom: -80px; left: -80px; animation-delay: 2s; }
    .blob-3 { width: 300px; height: 300px; background: #FFE0A0; top: 40%; left: 30%; animation-delay: 4s; }
    @keyframes blob-drift {
      from { transform: translate(0,0) scale(1); }
      to   { transform: translate(30px,20px) scale(1.08); }
    }

    /* Floating alphabet bubbles */
    .bubble {
      position: absolute; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-family: 'Fredoka One', sans-serif;
      font-size: 24px; color: #fff; font-weight: 400;
      animation: bubble-float 6s ease-in-out infinite alternate;
      z-index: 1; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }
    .b1{width:64px;height:64px;background:var(--purple);top:12%;left:8%;font-size:28px;animation-delay:0s;}
    .b2{width:52px;height:52px;background:var(--coral);top:20%;right:12%;font-size:22px;animation-delay:1s;}
    .b3{width:56px;height:56px;background:var(--green);top:65%;left:6%;font-size:24px;animation-delay:2s;}
    .b4{width:48px;height:48px;background:var(--yellow);color:var(--ink);top:70%;right:8%;font-size:20px;animation-delay:0.5s;}
    .b5{width:44px;height:44px;background:var(--sky);top:40%;left:4%;font-size:18px;animation-delay:3s;}
    .b6{width:60px;height:60px;background:var(--coral);top:50%;right:6%;font-size:26px;animation-delay:1.5s;}
    @keyframes bubble-float {
      from { transform: translateY(0) rotate(-5deg); }
      to   { transform: translateY(-20px) rotate(5deg); }
    }
    /* ── CSS FLOWERS ── */
    .css-flower {
      position: absolute; z-index: 1;
      animation: bubble-float 5s ease-in-out infinite alternate;
    }
    .petal-wrap { position: relative; width: 60px; height: 60px; }
    .petal {
      position: absolute; top: 50%; left: 50%;
      width: 18px; height: 30px;
      border-radius: 50%;
      transform-origin: center bottom;
      margin-left: -9px; margin-top: -30px;
    }
    .petal:nth-child(1){transform:rotate(0deg);}
    .petal:nth-child(2){transform:rotate(60deg);}
    .petal:nth-child(3){transform:rotate(120deg);}
    .petal:nth-child(4){transform:rotate(180deg);}
    .petal:nth-child(5){transform:rotate(240deg);}
    .petal:nth-child(6){transform:rotate(300deg);}
    .flower-center {
      position: absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width: 16px; height: 16px; border-radius: 50%;
      z-index: 2;
    }
    /* Flower variants */
    .fl1 { top:10%; left:20%; animation-delay:0.5s; }
    .fl1 .petal { background: #FF9EBC; opacity:0.85; }
    .fl1 .flower-center { background: #FFD000; }
    .fl2 { top:72%; right:18%; animation-delay:2s; }
    .fl2 .petal { background: #B07FFF; opacity:0.8; }
    .fl2 .flower-center { background: #fff; }
    .fl3 { top:30%; left:12%; animation-delay:3.5s; transform:scale(0.7); }
    .fl3 .petal { background: #FF7E7E; opacity:0.75; }
    .fl3 .flower-center { background: #FFD000; }
    .fl4 { top:60%; right:12%; animation-delay:1s; transform:scale(0.8); }
    .fl4 .petal { background: #FFB347; opacity:0.8; }
    .fl4 .flower-center { background: #fff; }

    /* ── CSS CAT ── */
    .css-cat {
      position: absolute; z-index: 1;
      animation: bubble-float 4s ease-in-out infinite alternate;
    }
    .cat-head {
      width: 52px; height: 44px; border-radius: 50%;
      position: relative;
    }
    .cat-ear {
      position: absolute; top: -12px;
      width: 0; height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
    .cat-ear.cl { left: 4px; }
    .cat-ear.cr { right: 4px; }
    .cat-face {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      gap: 8px; padding-bottom: 4px;
    }
    .cat-eye {
      width: 8px; height: 8px; border-radius: 50%;
      background: #333;
      position: relative;
    }
    .cat-eye::after {
      content: ''; position: absolute; top: 1px; left: 2px;
      width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.7);
    }
    .cat-nose {
      position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
      width: 6px; height: 4px; background: #FF9EBC; border-radius: 50%;
    }
    /* Cat variants */
    .ca1 { top: 22%; right: 20%; animation-delay: 1.5s; }
    .ca1 .cat-head { background: #FFD4A0; }
    .ca1 .cat-ear { border-bottom: 14px solid #FFD4A0; }
    .ca1 .cat-ear.cl::after,
    .ca1 .cat-ear.cr::after {
      content:''; position:absolute; top:2px; left:-5px;
      width:0; height:0;
      border-left:5px solid transparent;
      border-right:5px solid transparent;
      border-bottom:8px solid #FFB7D5;
    }
    .ca2 { top: 55%; left: 16%; animation-delay: 2.8s; transform: scale(0.8); }
    .ca2 .cat-head { background: #C8B4FF; }
    .ca2 .cat-ear { border-bottom: 14px solid #C8B4FF; }

    /* ── CSS BIRD ── */
    .css-bird {
      position: absolute; z-index: 1;
      animation: bird-bob 3s ease-in-out infinite alternate;
    }
    @keyframes bird-bob {
      from { transform: translateY(0) rotate(-3deg); }
      to   { transform: translateY(-14px) rotate(3deg); }
    }
    .bird-body {
      width: 40px; height: 28px; border-radius: 50%;
      position: relative;
    }
    .bird-wing {
      position: absolute; top: 4px;
      width: 22px; height: 14px;
      border-radius: 50% 50% 0 50%;
    }
    .bird-wing.wl { left: -12px; transform: rotate(-20deg) scaleX(-1); }
    .bird-wing.wr { right: -12px; transform: rotate(-20deg); }
    .bird-head {
      position: absolute; top: -16px; right: 2px;
      width: 22px; height: 22px; border-radius: 50%;
    }
    .bird-eye {
      position: absolute; top: 5px; left: 5px;
      width: 6px; height: 6px; border-radius: 50%; background: #333;
    }
    .bird-eye::after {
      content:''; position:absolute; top:1px; left:1px;
      width:2px; height:2px; border-radius:50%; background:rgba(255,255,255,0.8);
    }
    .bird-beak {
      position: absolute; top: 8px; right: -5px;
      width: 0; height: 0;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 7px solid #FF9500;
    }
    /* Bird variants */
    .bi1 { top: 42%; right: 14%; animation-delay: 0.4s; }
    .bi1 .bird-body { background: #7BC8F5; }
    .bi1 .bird-wing { background: #5AABDE; }
    .bi1 .bird-head { background: #7BC8F5; }
    .bi2 { top: 78%; left: 14%; animation-delay: 1.8s; transform: scale(0.75); }
    .bi2 .bird-body { background: #A8E6A0; }
    .bi2 .bird-wing { background: #7DC677; }
    .bi2 .bird-head { background: #A8E6A0; }

    /* Hero content */
    .hero-content {
      position: relative; z-index: 2;
      text-align: center; max-width: 680px;
    }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; border-radius: 50px;
      padding: 8px 20px; font-size: 14px; font-weight: 800;
      color: var(--purple); margin-bottom: 28px;
      box-shadow: 0 4px 20px rgba(108,63,232,0.15);
      border: 1.5px solid var(--purple-l);
    }
    .badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

    .hero h1 {
      font-family: 'Fredoka One', sans-serif;
      font-size: clamp(32px, 5.5vw, 58px);
      line-height: 1.0;
      margin-bottom: 16px;
      color: var(--ink);
    }
    /* Chinese = big + purple; English = smaller + secondary */
    .hero h1 .line-zh { display: block; color: var(--purple); }
    .hero h1 .line-en {
      display: block;
      font-size: clamp(22px, 3.5vw, 40px);
      color: var(--ink-m);
      margin-top: 6px;
      font-family: 'Nunito', sans-serif;
      font-weight: 800;
    }

    .hero-sub-zh {
      font-size: 18px; font-weight: 700; color: var(--ink-m);
      margin-bottom: 8px; line-height: 1.5;
    }
    .hero-sub {
      font-size: 14px; font-weight: 700; color: #aaa;
      margin-bottom: 36px;
    }

    .hero-btns {
      display: flex; gap: 14px; justify-content: center;
      flex-wrap: wrap; margin-bottom: 48px;
    }
    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--purple); color: #fff;
      text-decoration: none; border-radius: 50px;
      padding: 18px 36px; font-weight: 900; font-size: 18px;
      box-shadow: 0 8px 28px rgba(108,63,232,0.4);
      transition: all 0.2s;
    }
    .btn-primary:hover { background: var(--purple-d); transform: translateY(-3px); box-shadow: 0 14px 36px rgba(108,63,232,0.45); }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      background: #fff; color: var(--purple);
      text-decoration: none; border-radius: 50px;
      padding: 18px 36px; font-weight: 900; font-size: 18px;
      border: 2px solid var(--purple-l);
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      transition: all 0.2s;
    }
    .btn-secondary:hover { border-color: var(--purple); transform: translateY(-3px); }

    /* Phone card */
    .phone-wrap {
      position: relative; display: inline-block;
      margin-top: -20px; z-index: 3;
    }
    .phone-card {
      background: #fff; border-radius: 40px;
      padding: 30px 26px; width: 320px;
      box-shadow: 0 40px 100px rgba(108,63,232,0.25), 0 8px 30px rgba(0,0,0,0.12);
      border: 5px solid #F0EBFF; text-align: center;
      transform: rotate(2deg); transition: transform 0.3s;
    }
    .phone-card:hover { transform: rotate(0deg) scale(1.02); }
    .phone-letter {
      font-family: 'Fredoka One', sans-serif;
      font-size: 100px; color: var(--purple); line-height: 1;
      animation: letter-bounce 2s ease-in-out infinite;
    }
    @keyframes letter-bounce {
      0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}
    }
    .phone-word { font-family:'Fredoka One',sans-serif; font-size:26px; color:var(--ink); margin:6px 0; }
    .phone-zh { font-size:16px; color:var(--ink-m); margin-bottom:16px; }
    .phone-listen {
      background:var(--green); color:#fff; border-radius:50px;
      padding:12px 24px; font-weight:800; font-size:16px;
      display:inline-block; margin-bottom:16px;
    }
    .phone-wave {
      display:flex; align-items:center; justify-content:center; gap:3px;
      height:44px; margin-bottom:12px;
    }
    .phone-bar {
      width:5px; border-radius:4px; background:var(--purple-l);
      animation:wave-anim 1.2s ease-in-out infinite alternate;
    }
    .phone-bar:nth-child(odd) { background:var(--purple); }
    @keyframes wave-anim {
      from{transform:scaleY(0.3)} to{transform:scaleY(1.2)}
    }
    .phone-bar:nth-child(1){animation-delay:0s}
    .phone-bar:nth-child(2){animation-delay:0.1s}
    .phone-bar:nth-child(3){animation-delay:0.2s}
    .phone-bar:nth-child(4){animation-delay:0.15s}
    .phone-bar:nth-child(5){animation-delay:0.05s}
    .phone-bar:nth-child(6){animation-delay:0.25s}
    .phone-bar:nth-child(7){animation-delay:0.1s}
    .phone-bar:nth-child(8){animation-delay:0.3s}
    .phone-bar:nth-child(9){animation-delay:0s}
    .phone-rec { background:var(--coral-l); color:var(--coral-d); border-radius:50px; padding:8px 16px; font-weight:800; font-size:13px; display:inline-block; margin-bottom:10px; }
    .phone-stars { font-size:22px; letter-spacing:4px; }

    /* Floating badges around phone */
    .phone-badge {
      position:absolute; background:#fff; border-radius:50px;
      padding:8px 14px; font-weight:800; font-size:13px;
      box-shadow:0 4px 18px rgba(0,0,0,0.12);
      white-space:nowrap; animation:badge-float 3s ease-in-out infinite alternate;
    }
    .pb1 { top:-10px; right:-30px; color:var(--green-d); animation-delay:0s; }
    .pb2 { bottom:40px; left:-40px; color:var(--purple); animation-delay:1s; }
    .pb3 { bottom:-10px; right:-20px; color:var(--coral-d); animation-delay:0.5s; }
    @keyframes badge-float {
      from{transform:translateY(0)} to{transform:translateY(-8px)}
    }

    /* ── STATS ── */
    .stats-bar {
      background: var(--purple); padding: 20px 24px;
      display: flex; align-items: center; justify-content: center;
      gap: 40px; flex-wrap: wrap;
    }
    .stat-item { text-align:center; }
    .stat-num { font-family:'Fredoka One',sans-serif; font-size:32px; color:#fff; display:block; }
    .stat-label { font-size:12px; font-weight:800; color:rgba(255,255,255,0.7); text-transform:uppercase; letter-spacing:1px; }

    /* ── HOW IT WORKS ── */
    .section { padding: 36px 24px; max-width: 1100px; margin: 0 auto; }
    .section-tag {
      display:inline-flex; align-items:center; gap:6px;
      background:var(--purple-l); color:var(--purple);
      border-radius:50px; padding:6px 16px;
      font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:1px;
      margin-bottom:16px;
    }
    .section-title {
      font-family:'Fredoka One',sans-serif;
      font-size:clamp(28px,4vw,44px); color:var(--ink);
      margin-bottom:8px;
    }
    .section-title span { color:var(--purple); }
    .section-sub { font-size:17px; color:var(--ink-m); font-weight:700; margin-bottom:48px; }

    .steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
    .step {
      background:#fff; border-radius:24px; padding:28px 24px;
      box-shadow:0 4px 20px rgba(108,63,232,0.08);
      border: 1.5px solid var(--purple-l);
      position:relative; overflow:hidden; transition:transform 0.2s;
    }
    .step:hover { transform:translateY(-4px); }
    .step::before {
      content:''; position:absolute; top:0; left:0; right:0; height:4px;
    }
    .step:nth-child(1)::before { background:var(--purple); }
    .step:nth-child(2)::before { background:var(--green); }
    .step:nth-child(3)::before { background:var(--yellow); }
    .step:nth-child(4)::before { background:var(--coral); }
    .step-num {
      font-family:'Fredoka One',sans-serif; font-size:48px;
      color:var(--purple-l); position:absolute; top:12px; right:20px;
    }
    .step-icon { font-size:44px; margin-bottom:14px; display:block; }
    .step .step-zh { font-family:'Fredoka One',sans-serif; font-size:22px; color:var(--ink); margin-bottom:4px; }
    .step h3 { font-size:13px; color:var(--ink-m); font-weight:800; margin-bottom:8px; }
    .step p { font-size:14px; color:var(--ink-m); line-height:1.6; font-weight:700; }

    /* ── LEVELS ── */
    .levels-section { background:var(--ink); padding:80px 24px; }
    .levels-inner { max-width:1100px; margin:0 auto; }
    .levels-section .section-tag { background:rgba(255,255,255,0.1); color:#fff; }
    .levels-section .section-title { color:#fff; }
    .levels-section .section-sub { color:rgba(255,255,255,0.6); }
    .levels-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; }
    .level-card {
      border-radius:24px; padding:28px 22px;
      position:relative; overflow:hidden; cursor:pointer;
      transition:transform 0.2s; border:1.5px solid rgba(255,255,255,0.1);
    }
    .level-card:hover { transform:translateY(-4px) scale(1.01); }
    .lc1 { background:linear-gradient(135deg,#6C3FE8,#9B6BF5); }
    .lc2 { background:linear-gradient(135deg,#00C48C,#00A376); }
    .lc3 { background:linear-gradient(135deg,#FF6B6B,#E54B4B); }
    .lc4 { background:linear-gradient(135deg,#FFD000,#E6A800); }
    .lc4 h3, .lc4 .lc-zh, .lc4 p, .lc4 .lc-age { color:var(--ink) !important; }
    .lc-icon { font-size:48px; margin-bottom:14px; display:block; }
    .lc-zh { font-family:'Fredoka One',sans-serif; font-size:24px; color:#fff; margin-bottom:2px; }
    .level-card h3 { font-size:13px; color:rgba(255,255,255,0.75); font-weight:800; margin-bottom:10px; }
    .level-card p { font-size:13px; color:rgba(255,255,255,0.7); line-height:1.5; font-weight:700; margin-bottom:14px; }
    .lc-age { display:inline-block; background:rgba(255,255,255,0.2); border-radius:50px; padding:4px 14px; font-size:12px; font-weight:800; color:#fff; }

    /* ── FEATURES ── */
    .features-section { padding:80px 24px; background:#FAFAFF; }
    .features-inner { max-width:1100px; margin:0 auto; }
    .features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
    .feat {
      background:#fff; border-radius:24px; padding:28px;
      border:1.5px solid var(--purple-l); transition:all 0.2s;
      display:flex; gap:18px; align-items:flex-start;
    }
    .feat:hover { transform:translateY(-3px); box-shadow:0 8px 30px rgba(108,63,232,0.1); }
    .feat-icon-wrap {
      width:52px; height:52px; border-radius:16px; flex-shrink:0;
      display:flex; align-items:center; justify-content:center; font-size:26px;
    }
    .fi1 { background:#EDE8FD; }
    .fi2 { background:#E8FBF5; }
    .fi3 { background:#FFF8E0; }
    .fi4 { background:#FFE8E8; }
    .fi5 { background:#E8F8F8; }
    .fi6 { background:#F0F0FF; }
    .feat-text .feat-zh { font-family:'Fredoka One',sans-serif; font-size:18px; color:var(--ink); margin-bottom:2px; }
    .feat-text h4 { font-size:12px; color:var(--ink-m); font-weight:800; margin-bottom:6px; }
    .feat-text p { font-size:14px; color:var(--ink-m); line-height:1.55; font-weight:700; }

    /* ── CTA ── */
    .cta-section {
      background:linear-gradient(135deg, var(--purple) 0%, #9B3FE8 100%);
      padding:80px 24px; text-align:center; position:relative; overflow:hidden;
    }
    .cta-bg-circle {
      position:absolute; border-radius:50%; background:rgba(255,255,255,0.06);
    }
    .cc1 { width:400px;height:400px;top:-150px;right:-100px; }
    .cc2 { width:300px;height:300px;bottom:-100px;left:-80px; }
    .cta-section h2 {
      font-family:'Fredoka One',sans-serif; font-size:clamp(32px,5vw,52px);
      color:#fff; margin-bottom:8px; position:relative; z-index:1;
    }
    .cta-section .cta-zh {
      font-size:20px; font-weight:800; color:rgba(255,255,255,0.8);
      margin-bottom:12px; position:relative; z-index:1;
    }
    .cta-section p {
      font-size:17px; font-weight:700; color:rgba(255,255,255,0.7);
      margin-bottom:36px; position:relative; z-index:1;
    }
    .btn-cta {
      display:inline-flex; align-items:center; gap:10px;
      background:var(--yellow); color:var(--ink);
      text-decoration:none; border-radius:50px;
      padding:20px 44px; font-weight:900; font-size:20px;
      box-shadow:0 8px 28px rgba(0,0,0,0.2);
      transition:all 0.2s; position:relative; z-index:1;
    }
    .btn-cta:hover { background:#fff; transform:translateY(-3px) scale(1.03); }

    /* ── FOOTER ── */
    footer {
      background:var(--ink); padding:40px 24px; text-align:center;
    }
    .footer-logo { font-family:'Fredoka One',sans-serif; font-size:24px; color:#fff; margin-bottom:8px; }
    .footer-tagline { font-size:14px; font-weight:700; color:rgba(255,255,255,0.5); margin-bottom:4px; }
    .footer-copy { font-size:12px; color:rgba(255,255,255,0.3); margin-top:16px; }

    /* INSTALL BANNER */
    #installBanner {
      display:none; position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
      background:var(--purple); color:#fff; border-radius:50px;
      padding:14px 24px; font-weight:800; font-size:15px;
      box-shadow:0 6px 24px rgba(108,63,232,0.45); z-index:999;
      align-items:center; gap:14px; white-space:nowrap;
    }
    #installBanner button {
      background:var(--yellow); color:var(--ink); border:none;
      border-radius:50px; padding:8px 20px;
      font-family:'Nunito',sans-serif; font-weight:900; font-size:14px; cursor:pointer;
    }
    #installBanner .close-btn {
      background:transparent; color:rgba(255,255,255,0.6);
      font-size:20px; padding:0; min-width:auto;
    }

    /* ── FLOWER STRIP ── */
    .flower-strip {
      background: #fff; padding: 16px 0;
      border-top: 2px dashed #EDE8FD;
      border-bottom: 2px dashed #EDE8FD;
      overflow: hidden;
    }
    .flower-track {
      display: flex; gap: 28px; align-items: flex-end;
      animation: scroll-flowers 30s linear infinite;
      width: max-content; padding: 0 14px;
    }
    @keyframes scroll-flowers {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    /* Strip flowers */
    .strip-flower {
      position: relative; flex-shrink: 0;
      width: 60px; display: flex; flex-direction: column; align-items: center;
    }
    .strip-flower .petal-wrap { width: 56px; height: 56px; position: relative; }
    .strip-flower .petal {
      position: absolute; top: 50%; left: 50%;
      width: 14px; height: 24px; border-radius: 50%;
      transform-origin: center bottom;
      margin-left: -7px; margin-top: -24px;
    }
    .strip-flower .petal:nth-child(1){transform:rotate(0deg);}
    .strip-flower .petal:nth-child(2){transform:rotate(60deg);}
    .strip-flower .petal:nth-child(3){transform:rotate(120deg);}
    .strip-flower .petal:nth-child(4){transform:rotate(180deg);}
    .strip-flower .petal:nth-child(5){transform:rotate(240deg);}
    .strip-flower .petal:nth-child(6){transform:rotate(300deg);}
    .strip-flower .flower-center {
      position: absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      width: 14px; height: 14px; border-radius: 50%; z-index: 2;
    }
    .stem {
      width: 3px; height: 20px; background: #5CB85C;
      border-radius: 2px; margin-top: -2px;
    }
    .sf1 .petal { background: #FF9EBC; } .sf1 .flower-center { background: #FFD000; }
    .sf2 .petal { background: #B07FFF; } .sf2 .flower-center { background: #fff; border: 2px solid #ddd; }
    .sf3 .petal { background: #FFB347; } .sf3 .flower-center { background: #FF6B6B; }
    .sf4 .petal { background: #7BC8F5; } .sf4 .flower-center { background: #FFD000; }
    /* Strip cat */
    .strip-cat {
      flex-shrink: 0; margin-bottom: 4px;
    }
    .strip-cat .cat-head {
      width: 48px; height: 40px; border-radius: 50%; background: #FFD4A0; position: relative;
    }
    .strip-cat .cat-ear {
      position: absolute; top: -10px;
      width: 0; height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 12px solid #FFD4A0;
    }
    .strip-cat .cat-ear.cl { left: 4px; }
    .strip-cat .cat-ear.cr { right: 4px; }
    .strip-cat .cat-face {
      position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 2px;
    }
    .strip-cat .cat-eye {
      width: 7px; height: 7px; border-radius: 50%; background: #333;
    }
    .strip-cat .cat-nose {
      position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
      width: 5px; height: 3px; background: #FF9EBC; border-radius: 50%;
    }
    /* Strip bird */
    .strip-bird {
      flex-shrink: 0; margin-bottom: 8px;
    }
    .strip-bird .bird-body {
      width: 36px; height: 24px; border-radius: 50%; background: #7BC8F5; position: relative;
    }
    .strip-bird .bird-wing {
      position: absolute; top: 4px;
      width: 18px; height: 12px; border-radius: 50% 50% 0 50%;
      background: #5AABDE;
    }
    .strip-bird .bird-wing.wl { left: -10px; transform: rotate(-20deg) scaleX(-1); }
    .strip-bird .bird-wing.wr { right: -10px; transform: rotate(-20deg); }
    .strip-bird .bird-head {
      position: absolute; top: -14px; right: 2px;
      width: 20px; height: 20px; border-radius: 50%; background: #7BC8F5;
    }
    .strip-bird .bird-eye {
      position: absolute; top: 4px; left: 4px;
      width: 5px; height: 5px; border-radius: 50%; background: #333;
    }
    .strip-bird .bird-beak {
      position: absolute; top: 7px; right: -4px;
      width: 0; height: 0;
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
      border-left: 6px solid #FF9500;
    }

    /* CSS circle accent on level cards */
    .lc1::after { content:''; position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.1); }
    .lc2::after { content:''; position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.1); }
    .lc3::after { content:''; position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:rgba(255,255,255,0.1); }
    .lc4::after { content:''; position:absolute; bottom:-20px; right:-20px; width:80px; height:80px; border-radius:50%; background:rgba(0,0,0,0.05); }
    /* CSS dot accent on step cards */
    .step:nth-child(1)::after { content:''; position:absolute; bottom:16px; right:16px; width:32px; height:32px; border-radius:50%; background:#FF9EBC; opacity:0.2; }
    .step:nth-child(2)::after { content:''; position:absolute; bottom:16px; right:16px; width:32px; height:32px; border-radius:50%; background:#00C48C; opacity:0.2; }
    .step:nth-child(3)::after { content:''; position:absolute; bottom:16px; right:16px; width:32px; height:32px; border-radius:50%; background:#FFD000; opacity:0.3; }
    .step:nth-child(4)::after { content:''; position:absolute; bottom:16px; right:16px; width:32px; height:32px; border-radius:50%; background:#FF6B6B; opacity:0.2; }

    @media(max-width:640px){
      .hero { padding:90px 16px 48px; }
      .stats-bar { gap:24px; }
      .hero-btns { flex-direction:column; align-items:center; }
      .btn-primary, .btn-secondary { width:100%; justify-content:center; }
      .b1,.b2,.b3,.b4,.b5,.b6 { display:none; }
    }