:root{
    --sky:#7ecbff;
    --sun:#ffd23f;
    --pink:#ff7eb6;
    --mint:#7ee8b0;
    --purple:#a78bfa;
    --coral:#ff9066;
    --ink:#2b2350;
    --paper:#fffaf1;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  .first{overflow-x:hidden}
  .first{
    font-family:'Fredoka',system-ui,sans-serif;
    color:var(--ink);
    background:
      radial-gradient(circle at 10% 15%, #ffe5f1 0 12%, transparent 13%),
      radial-gradient(circle at 90% 10%, #e6f5ff 0 14%, transparent 15%),
      radial-gradient(circle at 15% 90%, #fff6d1 0 16%, transparent 17%),
      radial-gradient(circle at 85% 85%, #e5ffe9 0 14%, transparent 15%),
      linear-gradient(180deg,#fff9ee 0%,#fef1ff 100%);
    min-height:100vh;
    padding:40px 20px;
    position:relative;
  }

  /* floating background shapes */
  .bg-shape{position:absolute;pointer-events:none;opacity:.6}
  .bg-shape.s1{top:8%;left:5%;animation:float 7s ease-in-out infinite}
  .bg-shape.s2{top:20%;right:6%;animation:float 9s ease-in-out infinite reverse}
  .bg-shape.s3{bottom:15%;left:8%;animation:float 8s ease-in-out infinite}
  .bg-shape.s4{bottom:8%;right:10%;animation:float 6s ease-in-out infinite reverse}
  .bg-shape.s5{top:50%;left:3%;animation:float 10s ease-in-out infinite}
  .bg-shape.s6{top:45%;right:4%;animation:float 11s ease-in-out infinite reverse}

  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-25px) rotate(8deg)}
  }

  .wrap{
    max-width:1100px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  /* HEADING */
  h1.title{
    font-family:'Bubblegum Sans',cursive;
    text-align:center;
    font-size:clamp(28px,4.2vw,46px);
    line-height:1.15;
    color:var(--ink);
    margin-bottom:28px;
    position:relative;
    padding:0 10px;
  }
  h1.title .rainbow{
    background:linear-gradient(90deg,#ff5c8a,#ff9d3e,#ffd23f,#4ecb71,#4ea8ff,#a78bfa);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .crayon-underline{
    display:block;
    width:220px;height:10px;margin:12px auto 0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10'><path d='M2 6 Q 55 -2 110 5 T 218 4' stroke='%23ff7eb6' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain;
  }

  /* INTRO CARD */
  .intro{
    background:var(--paper);
    border:3px dashed #ffb84d;
    border-radius:28px;
    padding:26px 30px;
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.65;
    box-shadow:0 10px 0 rgba(255,184,77,.25);
    position:relative;
    margin-bottom:36px;
  }
  .intro::before,.intro::after{
    content:"";
    position:absolute;
    width:44px;height:44px;
    background-size:contain;background-repeat:no-repeat;
  }
  .intro::before{top:-22px;left:-14px;transform:rotate(-15deg);animation:wiggle 4s ease-in-out infinite}
  .intro::after{bottom:-22px;right:-14px;transform:rotate(15deg);animation:wiggle 5s ease-in-out infinite reverse}
  .intro::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><polygon points='32,4 39,24 60,24 43,37 50,58 32,45 14,58 21,37 4,24 25,24' fill='%23ffd23f' stroke='%23e3a800' stroke-width='2'/></svg>")}
  .intro::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 58s-22-13-22-30a12 12 0 0 1 22-7 12 12 0 0 1 22 7c0 17-22 30-22 30z' fill='%23ff7eb6' stroke='%23c94b8b' stroke-width='2'/></svg>")}

  /* BULLET LIST */
  .bullets{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
    margin-bottom:38px;
  }
  .b-card{
    background:#fff;
    border-radius:22px;
    padding:22px 22px 22px 82px;
    position:relative;
    box-shadow:0 8px 0 rgba(0,0,0,.06),0 12px 24px rgba(120,80,200,.1);
    border:2px solid #ffe4c4;
    font-size:16px;
    line-height:1.5;
    transition:transform .3s ease;
  }
  .b-card:hover{transform:translateY(-6px) rotate(-1deg)}
  .b-card b{color:#d63384}
  .b-card .icon{
    position:absolute;
    left:18px;transform:translateY(-50%);
    width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;
  }
  .b-card:nth-child(1){border-color:#b3e5fc;background:linear-gradient(135deg,#fff 60%,#e3f6ff)}
  .b-card:nth-child(1) .icon{background:#7ecbff;animation:bounce 2.2s ease-in-out infinite}
  .b-card:nth-child(2){border-color:#f8bbd0;background:linear-gradient(135deg,#fff 60%,#ffe6f0)}
  .b-card:nth-child(2) .icon{background:#ff7eb6;animation:spin 6s linear infinite}
  .b-card:nth-child(3){border-color:#c8e6c9;background:linear-gradient(135deg,#fff 60%,#e6ffe9)}
  .b-card:nth-child(3) .icon{background:#7ee8b0;animation:pulse 2s ease-in-out infinite}

  @keyframes bounce{
    0%,100%{transform:translateY(-50%)}
    50%{transform:translateY(calc(-50% - 8px))}
  }
  @keyframes spin{
    from{transform:translateY(-50%) rotate(0)}
    to{transform:translateY(-50%) rotate(360deg)}
  }
  @keyframes pulse{
    0%,100%{transform:translateY(-50%) scale(1)}
    50%{transform:translateY(-50%) scale(1.12)}
  }
  @keyframes wiggle{
    0%,100%{transform:rotate(-15deg)}
    50%{transform:rotate(15deg)}
  }
  @keyframes swing{
    0%,100%{transform:rotate(-8deg)}
    50%{transform:rotate(8deg)}
  }
  @keyframes drift{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(10px)}
  }

  /* OUTRO CARD */
  .outro{
    background:linear-gradient(135deg,#fff6d1 0%,#ffe6f0 100%);
    border-radius:28px;
    padding:28px 34px;
    font-size:clamp(15px,1.5vw,18px);
    line-height:1.7;
    border:3px solid #ffd23f;
    position:relative;
    box-shadow:0 10px 30px rgba(255,157,62,.2);
  }
  .outro .badges{
    display:flex;gap:18px;margin-top:18px;flex-wrap:wrap;justify-content:center;
  }
  .badge{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;padding:8px 16px;border-radius:999px;
    font-weight:600;font-size:14px;
    box-shadow:0 4px 0 rgba(0,0,0,.06);
    border:2px solid #ffe4c4;
    color: #000;
  }
  .badge svg{width:22px;height:22px}
  .badge.parent{border-color:#7ecbff}
  .badge.teacher{border-color:#ff7eb6}
  .badge.tutor{border-color:#7ee8b0}

  /* Icon corners on outro */
  .corner{position:absolute;width:60px;height:60px}
  .corner.tl{top:-30px;left:-10px;animation:swing 3s ease-in-out infinite}
  .corner.tr{top:-24px;right:-10px;animation:swing 3.5s ease-in-out infinite reverse}
  .corner.bl{bottom:-24px;left:-10px;animation:drift 4s ease-in-out infinite}
  .corner.br{bottom:-24px;right:-10px;animation:drift 4.5s ease-in-out infinite reverse}

  /* text emphasis */
  em.hl{
    font-style:normal;
    background:linear-gradient(180deg,transparent 55%,#fff59d 55%);
    padding:0 3px;
  }
  strong.pop{
    color:#d63384;
    font-weight:700;
  }

  @media (max-width:600px){
    .b-card{padding-left:74px}
    .intro,.outro{padding:22px}
  }









  :root{
    --sky:#4ac1ea;
    --sky-2:#7fd9f7;
    --sky-ink:#1b7fb0;
    --deep:#1e5f8c;
    --orange:#ff9c1a;
    --pink:#ff5e8a;
    --yellow:#ffd23f;
    --green:#4ecb71;
    --purple:#a78bfa;
    --red:#ff4d4d;
    --paper:#ffffff;
  }
  *{box-sizing:border-box;margin:0;padding:0}
 .second{overflow-x:hidden}
  .second{
    font-family:'Fredoka',system-ui,sans-serif;
    background:linear-gradient(180deg,#f7fbff 0%, #eaf6ff 100%);
    min-height:100vh;
    padding:40px 20px;
    color:#123;
  }

  .hero{
    max-width:1200px;
    margin:0 auto;
    background:#fff;
    border-radius:32px;
    overflow:hidden;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    min-height:520px;
    position:relative;
    box-shadow:0 30px 60px rgba(30,95,140,.18), 0 8px 20px rgba(30,95,140,.08);
    isolation:isolate;
  }

  /* LEFT PANEL */
  .left{
    position:relative;
    padding:60px 40px 60px 60px;
    display:flex;flex-direction:column;justify-content:center;
    z-index:2;
  }

  h1.headline{
    font-family:'Baloo 2',cursive;
    font-weight:800;
    font-size:clamp(38px,3.6vw,54px);
    line-height:1.02;
    color:var(--deep);
    letter-spacing:-.5px;
    margin-bottom:24px;
  }
  h1.headline .accent{
    color:var(--orange);
    display:inline-block;
    animation:wave 3s ease-in-out infinite;
    transform-origin:bottom left;
  }
  @keyframes wave{
    0%,100%{transform:rotate(0)}
    25%{transform:rotate(-3deg)}
    75%{transform:rotate(3deg)}
  }

  .lede{
    font-size:16px;
    line-height:1.6;
    color:#6b7280;
    max-width:520px;
    margin-bottom:30px;
    font-weight:400;
  }

  .cta{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--orange);
    color:#fff;
    font-family:'Baloo 2',cursive;
    font-weight:700;
    font-size:15px;
    letter-spacing:.5px;
    padding:14px 32px;
    border-radius:999px;
    border:none;
    cursor:pointer;
    box-shadow:0 8px 0 #d17a00, 0 12px 24px rgba(255,156,26,.35);
    transition:transform .15s ease, box-shadow .15s ease;
    width:fit-content;
    text-transform:uppercase;
  }
  .cta:hover{transform:translateY(2px);box-shadow:0 6px 0 #d17a00, 0 10px 20px rgba(255,156,26,.35)}
  .cta:active{transform:translateY(6px);box-shadow:0 2px 0 #d17a00}
  .cta .arrow{
    display:inline-block;
    animation:slide 1.4s ease-in-out infinite;
  }
  @keyframes slide{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(4px)}
  }

  /* RIGHT PANEL — blue "splash" background */
  .right{
    position:relative;
    background:var(--sky);
    overflow:hidden;
  }
  /* organic blob overlap on left edge */
  .blob-overlay{
    position:absolute;
    inset:0;
    z-index:1;
  }

  /* Kids illustration group */
  .kids-scene{
    position:absolute;
    inset:0;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:0;
    z-index:3;
  }
  .kids-scene svg{
    width:100%;
    height:100%;
    max-height:520px;
  }

  /* floating decorative icons */
  .deco{position:absolute;pointer-events:none;z-index:2}
  .deco.floating{animation:float 5s ease-in-out infinite}
  .deco.floating.slow{animation-duration:8s}
  .deco.floating.fast{animation-duration:3.5s}
  .deco.spinning{animation:spin 10s linear infinite}
  .deco.pulsing{animation:pulse 2.2s ease-in-out infinite}
  .deco.wiggling{animation:wiggle 3s ease-in-out infinite}

  @keyframes float{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-14px)}
  }
  @keyframes spin{
    from{transform:rotate(0)}to{transform:rotate(360deg)}
  }
  @keyframes pulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.15)}
  }
  @keyframes wiggle{
    0%,100%{transform:rotate(-8deg)}
    50%{transform:rotate(8deg)}
  }
  @keyframes twinkle{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(.85)}
  }
  @keyframes rainbow-glow{
    0%,100%{filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
    50%{filter:drop-shadow(0 0 8px rgba(255,255,255,.6))}
  }

  /* Left-side decorations */
  .d-star1{top:20px;left:20px;animation:twinkle 2s ease-in-out infinite}
  .d-circle1{top:30px;left:200px}
  .d-heart1{top:14px;left:340px;animation:pulse 1.8s ease-in-out infinite}
  .d-sun1{top:40px;right:-10px}
  .d-rainbow1{top:110px;left:290px;animation:rainbow-glow 3s ease-in-out infinite}
  .d-dot-pattern1{top:16px;left:430px;opacity:.7}
  .d-sun2{bottom:80px;left:30px}
  .d-star2{bottom:130px;left:290px;animation:twinkle 2.5s ease-in-out infinite}
  .d-dots1{bottom:20px;left:120px}
  .d-rainbow2{bottom:20px;left:280px}
  .d-heart2{top:230px;left:20px;animation:pulse 2s ease-in-out infinite}
  .d-circle2{top:280px;left:480px}

  /* Right-side decorations */
  .d-star3{top:16px;right:26px}
  .d-star4{bottom:40px;right:40px}
  .d-star5{top:44px;right:120px}
  .d-sun3{bottom:70px;right:20px}

  /* Blue blob shapes */
  .blob{position:absolute}
  .blob.b1{top:-40px;left:-60px;width:280px;height:280px;background:var(--sky);border-radius:60% 40% 55% 45%/50% 60% 40% 50%;opacity:.9;z-index:1}
  .blob.b2{bottom:-40px;left:-40px;width:220px;height:220px;background:var(--sky-2);border-radius:50% 50% 40% 60%/60% 40% 60% 40%;opacity:.55;z-index:1}
  .blob.b3{top:60%;left:40%;width:180px;height:180px;background:var(--sky-2);border-radius:60% 40% 50% 50%;opacity:.5;z-index:1}

  @media (max-width:900px){
    .hero{grid-template-columns:1fr;min-height:auto}
    .left{padding:50px 30px 30px}
    .right{height:420px}
  }




   :root{
    --pink:#ff2f92;
    --pink-2:#ff6ab5;
    --yellow:#ffd23f;
    --mint:#7ee8b0;
    --sky:#7ecbff;
    --coral:#ff9066;
    --purple:#a78bfa;
    --ink:#f4efff;
    --ink-2:#c8bce8;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  .three{overflow-x:hidden}
  .three{
    font-family:'Fredoka',system-ui,sans-serif;
    color:var(--ink);
    min-height:100vh;
    padding:60px 20px;
    position:relative;
    background:
      radial-gradient(1200px 600px at 15% 10%, #4a2a94 0%, transparent 60%),
      radial-gradient(1000px 700px at 90% 90%, #6c2bd9 0%, transparent 55%),
      linear-gradient(140deg, #1a0b3d 0%, #2b1266 40%, #3a1783 70%, #4a1e9c 100%);
  }
  /* subtle star field */
  .three::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:
      radial-gradient(1.5px 1.5px at 20% 30%, #fff 100%, transparent),
      radial-gradient(1px 1px at 70% 20%, #fff 100%, transparent),
      radial-gradient(1.5px 1.5px at 40% 70%, #fff 100%, transparent),
      radial-gradient(1px 1px at 85% 60%, #fff 100%, transparent),
      radial-gradient(1.5px 1.5px at 10% 85%, #fff 100%, transparent),
      radial-gradient(1px 1px at 55% 40%, #fff 100%, transparent),
      radial-gradient(1px 1px at 90% 15%, #fff 100%, transparent),
      radial-gradient(1.5px 1.5px at 30% 50%, #fff 100%, transparent);
    opacity:.5;
    animation:twinkleBg 4s ease-in-out infinite;
  }
  @keyframes twinkleBg{
    0%,100%{opacity:.35}
    50%{opacity:.7}
  }

  .three .wrap{
    max-width:1100px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }

  /* Floating background icons */
  .bg-ico{position:absolute;pointer-events:none;opacity:.85;z-index:1}
  .bg-ico.b1{top:2%;left:3%;animation:float 7s ease-in-out infinite}
  .bg-ico.b2{top:5%;right:5%;animation:float 9s ease-in-out infinite reverse}
  .bg-ico.b3{top:38%;left:1%;animation:float 8s ease-in-out infinite}
  .bg-ico.b4{top:42%;right:2%;animation:float 10s ease-in-out infinite reverse}
  .bg-ico.b5{bottom:15%;left:4%;animation:float 6s ease-in-out infinite}
  .bg-ico.b6{bottom:8%;right:5%;animation:float 8s ease-in-out infinite reverse}
  .bg-ico.b7{top:20%;left:48%;animation:float 11s ease-in-out infinite}

  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0)}
    50%{transform:translateY(-24px) rotate(10deg)}
  }
  @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes wiggle{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.85)}}
  @keyframes slide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  @keyframes glow{
    0%,100%{box-shadow:0 12px 30px rgba(255,47,146,.35), 0 0 0 rgba(255,47,146,.4)}
    50%{box-shadow:0 12px 30px rgba(255,47,146,.5), 0 0 32px rgba(255,47,146,.55)}
  }

  /* Section 1 - headline */
  .headline-wrap{
    text-align:center;
    margin-bottom:50px;
    position:relative;
  }
  .three h1.title{
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(30px,4.4vw,54px);
    line-height:1.12;
    letter-spacing:.3px;
    padding:0 10px;
    color:#fff;
    text-shadow:0 4px 0 rgba(0,0,0,.15);
  }
  .three h1.title .rainbow{
    background:linear-gradient(90deg,#ffd23f,#ff9066,#ff2f92,#a78bfa,#7ecbff,#7ee8b0);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .three h1.title .ever{
    display:inline-block;
    color:var(--yellow);
    animation:wiggle 2.5s ease-in-out infinite;
    transform-origin:bottom;
  }
  .three .crayon-line{
    display:block;width:240px;height:12px;margin:14px auto 0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'><path d='M4 8 Q60 -2 120 6 T236 4' stroke='%23ffd23f' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain;
  }

  .three .intro{
    max-width:820px;margin:22px auto 0;
    text-align:center;
    font-size:clamp(15px,1.4vw,17px);
    line-height:1.75;
    color:var(--ink-2);
  }

  /* Illustration strip */
  .three .illustration{
    display:flex;justify-content:center;align-items:end;gap:18px;
    margin:36px 0 20px;
    flex-wrap:wrap;
  }
  .three .ill-item{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    background:rgba(255,255,255,.06);
    border:2px dashed rgba(255,255,255,.18);
    border-radius:22px;
    padding:14px 18px;
    backdrop-filter:blur(6px);
    min-width:130px;
  }
  .three .ill-item .lbl{font-size:12px;letter-spacing:1px;color:var(--ink-2);text-transform:uppercase;font-weight:600}
  .ill-item svg{display:block}

  /* Divider */
  .divider{
    display:flex;align-items:center;gap:14px;
    margin:40px 0;
  }
  .divider .bar{
    flex:1;height:4px;
    background:linear-gradient(90deg,transparent,#6b48c7,#8b5cf6,#6b48c7,transparent);
    border-radius:99px;
  }
  .divider svg{flex-shrink:0}

  /* Steps card */
  .steps-card{
    background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    border:1px solid rgba(255,255,255,.12);
    border-radius:32px;
    padding:34px 36px;
    backdrop-filter:blur(10px);
    box-shadow:0 30px 80px rgba(0,0,0,.35);
    position:relative;
  }

  .steps-title{
    font-family:'Bubblegum Sans',cursive;
    color:var(--yellow);
    font-size:22px;
    margin-bottom:22px;
    display:flex;align-items:center;gap:10px;
  }
  .steps-title svg{animation:spin 8s linear infinite}

  .steps{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px 22px;
  }
  .step{
    display:flex;gap:14px;
    background:rgba(255,255,255,.05);
    border-radius:18px;
    padding:16px 18px;
    border:1px solid rgba(255,255,255,.08);
    transition:transform .25s ease, background .25s ease;
    font-size:15px;line-height:1.55;
    color:#efe7ff;
  }
  .step:hover{transform:translateY(-4px);background:rgba(255,255,255,.09)}
  .step u{text-decoration:underline;text-decoration-color:var(--yellow);text-underline-offset:3px}
  .step b{color:#fff}
  .step .stepIcon{
    flex-shrink:0;
    width:46px;height:46px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
  }
  .step:nth-child(1) .stepIcon{background:linear-gradient(135deg,#7ecbff,#4ea8ff);animation:bounce 2.2s ease-in-out infinite}
  .step:nth-child(2) .stepIcon{background:linear-gradient(135deg,#ff9066,#ff5c8a);animation:pulse 2.4s ease-in-out infinite}
  .step:nth-child(3) .stepIcon{background:linear-gradient(135deg,#7ee8b0,#3fbf7f);animation:wiggle 3s ease-in-out infinite}
  .step:nth-child(4) .stepIcon{background:linear-gradient(135deg,#ffd23f,#ff9c1a);animation:spin 6s linear infinite}
  .step em{
    font-style:normal;color:var(--yellow);font-weight:600;
  }

  /* Outro paragraph */
  .outro{
    margin-top:34px;
    color:var(--ink-2);
    font-size:clamp(14px,1.3vw,16px);
    line-height:1.75;
    text-align:center;
    max-width:840px;
    margin-left:auto;margin-right:auto;
  }
  .outro u{
    text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px;color:#fff;
  }
  .outro q{
    color:#fff;font-weight:500;
  }

  /* CTA */
  .cta-wrap{text-align:center;margin-top:36px}
  .cta{
    display:inline-flex;flex-direction:column;align-items:center;
    background:linear-gradient(135deg,#ff2f92 0%,#ff5c8a 100%);
    color:#fff;
    font-family:'Fredoka',sans-serif;
    font-weight:700;
    font-size:clamp(15px,1.6vw,20px);
    letter-spacing:1.2px;
    padding:20px 60px 16px;
    border:none;border-radius:14px;
    cursor:pointer;
    box-shadow:0 12px 30px rgba(255,47,146,.4);
    animation:glow 2.4s ease-in-out infinite;
    text-transform:uppercase;
    transition:transform .15s ease;
  }
  .cta:hover{transform:translateY(-3px)}
  .cta:active{transform:translateY(1px)}
  .cta .arrow{
    display:inline-block;margin-top:4px;font-size:20px;
    animation:slide 1.2s ease-in-out infinite;
  }

  @media (max-width:720px){
    .steps{grid-template-columns:1fr}
    .steps-card{padding:26px 22px}
  }






  :root{
    --lav-1:#faf5ff;
    --lav-2:#ede0ff;
    --lav-3:#d9c2ff;
    --purple:#8b5cf6;
    --purple-deep:#6b3fd6;
    --pink:#ff7eb6;
    --yellow:#ffd23f;
    --mint:#7ee8b0;
    --sky:#7ecbff;
    --coral:#ff9066;
    --ink:#3b2a70;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  .four{overflow-x:hidden}
  .four{
    font-family:'Fredoka',system-ui,sans-serif;
    color:var(--ink);
    min-height:100vh;
    padding:60px 24px;
    background:
      radial-gradient(1000px 500px at 15% 10%, #f4e6ff 0%, transparent 55%),
      radial-gradient(900px 600px at 90% 15%, #e6d5ff 0%, transparent 55%),
      radial-gradient(800px 500px at 20% 90%, #f7ecff 0%, transparent 55%),
      radial-gradient(900px 500px at 85% 85%, #ead6ff 0%, transparent 55%),
      linear-gradient(180deg,#faf5ff 0%,#ede0ff 100%);
    position:relative;
  }

  /* Floating background icons */
  .four .bg-ico{position:absolute;pointer-events:none;opacity:.9;z-index:0}
  .four .b1{top:30px;left:24px;animation:float 7s ease-in-out infinite}
  .four .b2{top:60px;right:36px;animation:float 9s ease-in-out infinite reverse}
  .four .b3{top:38%;left:8px;animation:float 8s ease-in-out infinite}
  .four .b4{top:45%;right:14px;animation:float 10s ease-in-out infinite reverse}
  .four .b5{bottom:60px;left:40px;animation:float 6s ease-in-out infinite}
  .four .b6{bottom:40px;right:60px;animation:float 8s ease-in-out infinite reverse}
  .four .b7{top:20%;left:48%;animation:float 11s ease-in-out infinite}

  @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(10deg)}}
  @keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  @keyframes wiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
  @keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  @keyframes twinkle{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}
  @keyframes swing{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
  @keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

  .wrap{max-width:1100px;margin:0 auto;position:relative;z-index:2}

  /* Header */
  .four header{text-align:center;margin-bottom:38px;position:relative}
  .four h1.title{
    font-family:'Bubblegum Sans',cursive;
    font-size:clamp(28px,4vw,50px);
    line-height:1.15;
    color:var(--purple-deep);
    text-shadow:0 3px 0 rgba(139,92,246,.12);
  }
  .four h1.title .accent{
    background:linear-gradient(90deg,#ff7eb6,#ff9c1a,#ffd23f,#7ee8b0,#7ecbff,#a78bfa);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .four h1.title .ever{
    display:inline-block;color:#ff7eb6;
    animation:wiggle 2.4s ease-in-out infinite;transform-origin:bottom;
  }
  .four .crayon{
    display:block;width:240px;height:12px;margin:14px auto 0;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12'><path d='M4 8 Q 60 -2 120 6 T 236 4' stroke='%238b5cf6' stroke-width='5' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain;
  }

  /* Cards list */
  .four .list{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-top:14px;
  }
  @media (max-width:820px){.list{grid-template-columns:1fr}}

  .four .item{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(8px);
    border:2px solid rgba(139,92,246,.18);
    border-radius:22px;
    padding:22px 24px 22px 92px;
    position:relative;
    box-shadow:0 12px 30px rgba(139,92,246,.12), 0 3px 8px rgba(139,92,246,.06);
    font-size:15.5px;
    line-height:1.65;
    color:#3d2a6b;
    transition:transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s;
  }
  .four .item:hover{
    transform:translateY(-6px) rotate(-.5deg);
    box-shadow:0 20px 42px rgba(139,92,246,.18), 0 6px 14px rgba(139,92,246,.08);
  }
  .four .item u{text-decoration:underline;text-decoration-color:var(--purple);text-underline-offset:3px}
  .four .item b{color:var(--purple-deep);font-weight:600}
  .four .item em{font-style:normal;color:#c92a72;font-weight:600}

  .four .item .badge{
    position:absolute;left:20px;top:22px;
    height:55px;border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
  }
  .four .item .sparkle{
    position:absolute;top:-8px;right:-8px;width:24px;height:24px;
    animation:twinkle 2s ease-in-out infinite;
  }
  .four .item .num{
    position:absolute;top:14px;right:16px;
    font-family:'Bubblegum Sans',cursive;
    font-size:26px;color:var(--purple);opacity:.28;
  }

  /* colored badges + animations */
  .four .i1 .badge{background:linear-gradient(135deg,#ff9066,#ff5c8a);animation:bounce 2.2s ease-in-out infinite}
  .four .i2 .badge{background:linear-gradient(135deg,#7ecbff,#4ea8ff);animation:swing 3s ease-in-out infinite}
  .four .i3 .badge{background:linear-gradient(135deg,#ffd23f,#ff9c1a);animation:spin 8s linear infinite}
  .four .i4 .badge{background:linear-gradient(135deg,#7ee8b0,#3fbf7f);animation:pulse 2.2s ease-in-out infinite}
  .four .i5 .badge{background:linear-gradient(135deg,#a78bfa,#8b5cf6);animation:wiggle 3s ease-in-out infinite}

  /* full-width last item */
  .four .item.wide{grid-column: / -1}

  /* Intro-ish subtitle */
  .four .subtitle{
    margin-top:12px;color:#6b5a9a;
    font-size:clamp(14px,1.3vw,16px);
    max-width:640px;margin-left:auto;margin-right:auto;line-height:1.65;
  }

  /* Footer ribbon */
  .four .ribbon{
    margin-top:34px;
    text-align:center;
    display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  }
  .four .chip{
    display:inline-flex;align-items:center;gap:8px;
    background:#fff;padding:10px 18px;border-radius:999px;
    font-weight:600;font-size:13px;color:#4a3a80;
    box-shadow:0 8px 18px rgba(139,92,246,.14);
    border:2px solid #e9deff;
  }
  .four .chip svg{width:20px;height:20px}







  :root{
  --bg1:#FFF8E7;
  --bg2:#FFE4F1;
  --bg3:#E0F4FF;
  --bg4:#E9FBE7;
  --ink:#3A2E5C;
  --ink-soft:#5A4E7A;
  --pink:#FF7EB6;
  --yellow:#FFD447;
  --blue:#6EC6FF;
  --green:#7ED9A0;
  --purple:#B39CFF;
  --orange:#FFA45B;
}
*{box-sizing:border-box;margin:0;padding:0}
.ten{overflow-x:hidden}
.ten{
  font-family:'Fredoka',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 10% 0%, #FFE7F3 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 20%, #E5F3FF 0%, transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, #FFF7D6 0%, transparent 60%),
    linear-gradient(135deg,#FFFDF6 0%,#F6FBFF 100%);
  position:relative;
}

/* Floating background shapes */
.ten .bg-shapes{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ten .shape{position:absolute;border-radius:50%;opacity:.55;filter:blur(1px)}
.ten .shape.s1{width:120px;height:120px;background:var(--pink);top:8%;left:6%;animation:float 9s ease-in-out infinite}
.ten .shape.s2{width:80px;height:80px;background:var(--yellow);top:18%;right:9%;animation:float 7s ease-in-out infinite 1s}
.ten .shape.s3{width:100px;height:100px;background:var(--blue);top:60%;left:4%;animation:float 8s ease-in-out infinite .5s}
.ten .shape.s4{width:70px;height:70px;background:var(--green);top:75%;right:12%;animation:float 6s ease-in-out infinite}
.ten .shape.s5{width:60px;height:60px;background:var(--purple);top:38%;left:48%;animation:float 10s ease-in-out infinite 2s}
.ten .shape.s6{width:50px;height:50px;background:var(--orange);top:88%;left:38%;animation:float 7.5s ease-in-out infinite 1.5s}
@keyframes float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-30px) rotate(20deg)}
}

/* Stars */
.ten .star{position:absolute;color:#FFD447;font-size:22px;animation:twinkle 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(255,180,0,.35))}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.4);opacity:1}}

.ten .wrap{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:70px 28px 90px}

/* HEADER */
.ten .header{text-align:center;margin-bottom:60px;position:relative}
.ten .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;border:2px dashed #FFB6D9;
  padding:8px 18px;border-radius:999px;
  font-size:14px;color:var(--pink);font-weight:600;
  box-shadow:0 6px 20px rgba(255,126,182,.15);
  animation:pop .8s cubic-bezier(.34,1.56,.64,1) both;
}
.ten .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--pink);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

.ten h1{
  font-family:'Baloo 2',cursive;
  font-size:clamp(36px,6vw,44px);
  line-height:1.05;margin:18px 0 10px;
  color:var(--ink);
  letter-spacing:-.5px;
}
.ten h1 .fun{
  background:linear-gradient(90deg,#FF7EB6,#FFA45B,#FFD447,#7ED9A0,#6EC6FF,#B39CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:rainbow 6s linear infinite;
  display:inline-block;
}
@keyframes rainbow{to{background-position:200% 0}}
.ten .sub{color:var(--ink-soft);font-size:18px;max-width:800px;margin:8px auto 0}

/* Wavy underline scribble */
.ten .scribble{display:block;margin:14px auto 0;width:220px;height:16px}

/* STEPS */
.ten .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:30px}
@media(max-width:960px){.steps{grid-template-columns:1fr;gap:24px}}

.ten .card{
  position:relative;
  background:#fff;
  border-radius:28px;
  padding:34px 28px 30px;
  box-shadow:0 20px 40px -20px rgba(58,46,92,.18), 0 4px 0 rgba(0,0,0,.03);
  border:3px solid #fff;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s;
  opacity:0;transform:translateY(30px);
}
.ten .card.in{opacity:1;transform:translateY(0)}
.ten .card:hover{transform:translateY(-10px) rotate(-.6deg);box-shadow:0 30px 50px -20px rgba(58,46,92,.28)}
.ten .card:nth-child(2):hover{transform:translateY(-10px) rotate(.6deg)}
.ten .card::before{
  content:"";position:absolute;inset:0;border-radius:28px;
  background:linear-gradient(180deg, var(--tint1), transparent 60%);
  opacity:.5;z-index:0;
}
.ten .card > *{position:relative;z-index:1}

.ten .card.c1{--tint1:#FFE1EE;--accent:var(--pink)}
.ten .card.c2{--tint1:#E4F1FF;--accent:var(--blue)}
.ten .card.c3{--tint1:#E7FADD;--accent:var(--green)}

.ten .badge{
  position:absolute;top:-22px;left:24px;
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;
  display:grid;place-items:center;
  font-family:'Baloo 2';font-weight:800;font-size:28px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.25);
  border:4px solid #fff;
}
.ten .badge::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:3px dashed var(--accent);opacity:.35;
  animation:spin 12s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.ten .icon-wrap{
  width:96px;height:96px;border-radius:24px;
  background:var(--tint1);
  display:grid;place-items:center;margin:8px 0 18px;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.ten .card:hover .icon-wrap{transform:rotate(-8deg) scale(1.06)}
.ten .icon-wrap svg{width:56px;height:56px}

.ten .card h3{
  font-family:'Baloo 2';font-size:24px;margin-bottom:10px;color:var(--ink);
}
.ten .card p{color:var(--ink-soft);font-size:16px;line-height:1.55}
.ten .card p .hi{
  background:linear-gradient(180deg,transparent 60%, var(--tint1) 60%);
  padding:0 3px;font-weight:600;color:var(--ink);
}

.ten .tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--tint1);color:var(--accent);
  padding:6px 12px;border-radius:999px;
  font-size:13px;font-weight:600;margin-top:14px;
}

/* Connector arrow */
.ten .arrow{position:absolute;top:50%;right:-28px;width:56px;height:40px;transform:translateY(-50%);z-index:3}
.ten .arrow svg{width:100%;height:100%}
@media(max-width:960px){.arrow{display:none}}

/* FINAL CTA */
.ten .finale{
  margin-top:60px;text-align:center;position:relative;
  background:linear-gradient(135deg,#FFF3D6 0%, #FFE1EE 50%, #E4F1FF 100%);
  border-radius:36px;padding:44px 30px;
  border:3px dashed #FFB6D9;
  overflow:hidden;
}
.ten .finale::before,.finale::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
}
.ten .finale::before{background:radial-gradient(circle,#FFD447 0%,transparent 70%);top:-80px;left:-40px}
.ten .finale::after{background:radial-gradient(circle,#7ED9A0 0%,transparent 70%);bottom:-90px;right:-50px}
.ten .finale h2{
  font-family:'Baloo 2';font-size:clamp(26px,4vw,40px);
  color:var(--ink);position:relative;z-index:1;
}
.ten .finale h2 .wiggle{display:inline-block;animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.ten .finale p{color:var(--ink-soft);font-size:17px;margin-top:10px;position:relative;z-index:1}
.ten .hand-note{
  font-family:'Caveat',cursive;font-size:24px;color:var(--pink);
  margin-top:10px;position:relative;z-index:1;
}
.ten .cta-row{margin-top:22px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.ten .btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:999px;
  font-family:'Baloo 2';font-weight:700;font-size:17px;
  text-decoration:none;transition:transform .2s, box-shadow .2s;
  border:none;cursor:pointer;
}
.ten .btn.primary{background:var(--ink);color:#fff;box-shadow:0 8px 0 #241b3d}
.ten .btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 0 #241b3d}
.ten .btn.primary:active{transform:translateY(4px);box-shadow:0 4px 0 #241b3d}
.ten .btn.ghost{background:#fff;color:var(--ink);box-shadow:0 8px 0 #E5DFEE}
.ten .btn.ghost:hover{transform:translateY(-2px);box-shadow:0 10px 0 #E5DFEE}

/* Confetti */
.ten .confetti{position:absolute;width:10px;height:14px;top:-20px;opacity:0;animation:fall 5s linear infinite}
@keyframes fall{
  0%{transform:translateY(-30px) rotate(0);opacity:0}
  10%{opacity:1}
  100%{transform:translateY(120vh) rotate(720deg);opacity:.5}
}






:root{
  --ink:#3A2E5C;
  --ink-soft:#5A4E7A;
  --pink:#FF7EB6;
  --yellow:#FFD447;
  --blue:#6EC6FF;
  --green:#7ED9A0;
  --purple:#B39CFF;
  --orange:#FFA45B;
}
*{box-sizing:border-box;margin:0;padding:0}
.nine{overflow-x:hidden}
.nine{
  font-family:'Fredoka',sans-serif;
  color:var(--ink);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 8% 0%, #FFE7F3 0%, transparent 60%),
    radial-gradient(900px 700px at 100% 15%, #E5F3FF 0%, transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, #FFF7D6 0%, transparent 60%),
    radial-gradient(700px 600px at 90% 90%, #E7FADD 0%, transparent 60%),
    linear-gradient(135deg,#FFFDF6 0%,#F6FBFF 100%);
  position:relative;
}

/* Floating background shapes */
.nine .bg-shapes{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.nine .blob{position:absolute;border-radius:50%;opacity:.5;filter:blur(1px)}
.nine .blob.b1{width:130px;height:130px;background:var(--pink);top:6%;left:5%;animation:float 9s ease-in-out infinite}
.nine .blob.b2{width:90px;height:90px;background:var(--yellow);top:22%;right:8%;animation:float 7s ease-in-out infinite 1s}
.nine .blob.b3{width:110px;height:110px;background:var(--blue);top:62%;left:3%;animation:float 8s ease-in-out infinite .5s}
.nine .blob.b4{width:80px;height:80px;background:var(--green);top:78%;right:10%;animation:float 6s ease-in-out infinite}
.nine .blob.b5{width:60px;height:60px;background:var(--purple);top:40%;left:52%;animation:float 10s ease-in-out infinite 2s}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(20deg)}}

.nine .star{position:absolute;color:#FFD447;font-size:22px;animation:twinkle 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(255,180,0,.35))}
@keyframes twinkle{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.4);opacity:1}}

.wrap{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:80px 28px 100px}

/* HEADER */
.nine .header{text-align:center;margin-bottom:56px;position:relative}
.nine .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--pink);font-weight:700;font-size:14px;
  letter-spacing:2px;text-transform:uppercase;
  animation:pop .8s cubic-bezier(.34,1.56,.64,1) both;
}
.nine .eyebrow::before,.eyebrow::after{content:"";width:36px;height:2px;background:linear-gradient(90deg,transparent,var(--pink))}
.nine .eyebrow::after{background:linear-gradient(90deg,var(--pink),transparent)}
@keyframes pop{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}

.nine h1{
  font-family:'Baloo 2',cursive;
  font-size:clamp(36px,6vw,50px);
  line-height:1.05;margin:14px 0 10px;
  color:var(--ink);
  letter-spacing:-.5px;
}
.nine h1 .fun{
  background:linear-gradient(90deg,#FF7EB6,#FFA45B,#FFD447,#7ED9A0,#6EC6FF,#B39CFF);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% 100%;
  animation:rainbow 6s linear infinite;
  display:inline-block;
}
@keyframes rainbow{to{background-position:200% 0}}
.nine .sub{color:var(--ink-soft);font-size:18px;max-width:680px;margin:8px auto 0}
.nine .scribble{display:block;margin:14px auto 0;width:220px;height:16px}

/* LIST */
.nine .list{list-style:none;display:flex;flex-direction:column;gap:26px;margin-top:20px;padding:0 6px}
.nine .item{
  position:relative;display:flex;align-items:flex-start;gap:20px;
  padding:6px 0 22px;
}
.nine .item.in{opacity:1;transform:translateX(0)}
.nine .item::after{
  content:"";position:absolute;left:64px;right:20px;bottom:0;height:2px;
  background:repeating-linear-gradient(90deg,#E5DFEE 0 8px,transparent 8px 16px);
}
.nine .item:last-child::after{display:none}

/* Check icon */
.nine .check{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:var(--c);
  box-shadow:0 8px 18px -6px var(--c);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.nine .item:hover .check{transform:rotate(-10deg) scale(1.08)}
.nine .check::before{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:2px dashed var(--c);opacity:.35;
  animation:spin 14s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.nine .check svg{width:28px;height:28px;stroke:#fff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.nine .check svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .8s ease forwards}
.nine .item.in .check svg path{animation:draw .9s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.nine .text{flex:1;min-width:0;padding-top:4px}
.nine .text .lead{
  font-family:'Baloo 2';font-weight:700;font-size:20px;color:var(--ink);
  display:inline;
}
.nine .text .lead .emoji{font-size:22px;margin-right:4px;display:inline-block;animation:wobble 3s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}50%{transform:rotate(10deg)}}
.nine .text p{color:var(--ink-soft);font-size:16.5px;line-height:1.55;margin-top:4px}
.nine .text .hl{
  background:linear-gradient(180deg,transparent 62%, var(--c-soft) 62%);
  padding:0 3px;color:var(--ink);font-weight:600;
}

.nine .theme-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.nine .chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  font-size:13px;font-weight:600;
  background:#fff;box-shadow:0 4px 12px -6px rgba(58,46,92,.2);
}
.nine .chip.c1{color:#FF7EB6}.chip.c1 .d{background:#FF7EB6}
.nine .chip.c2{color:#B39CFF}.chip.c2 .d{background:#B39CFF}
.nine .chip.c3{color:#7ED9A0}.chip.c3 .d{background:#7ED9A0}
.nine .chip.c4{color:#6EC6FF}.chip.c4 .d{background:#6EC6FF}
.nine .chip.c5{color:#FFA45B}.chip.c5 .d{background:#FFA45B}
.nine .chip .d{width:8px;height:8px;border-radius:50%}

/* FINAL LINE */
.nine .finale{
  margin-top:60px;text-align:center;position:relative;padding:20px;
}
.nine .finale h2{
  font-family:'Baloo 2';font-size:clamp(22px,3.4vw,32px);color:var(--ink);
}
.nine .finale h2 .wiggle{display:inline-block;animation:wiggle 1.6s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
.nine .hand-note{
  font-family:'Caveat',cursive;font-size:26px;color:var(--pink);margin-top:6px;
}
.nine .cta{
  margin-top:22px;display:inline-flex;align-items:center;gap:10px;
  padding:14px 30px;border-radius:999px;
  font-family:'Baloo 2';font-weight:700;font-size:18px;
  background:var(--ink);color:#fff;
  box-shadow:0 8px 0 #241b3d;cursor:pointer;border:none;
  transition:transform .2s, box-shadow .2s;
}
.nine .cta:hover{transform:translateY(-2px);box-shadow:0 10px 0 #241b3d}
.nine .cta:active{transform:translateY(4px);box-shadow:0 4px 0 #241b3d}

/* Confetti */
.nine .confetti{position:absolute;width:10px;height:14px;top:-20px;opacity:0;animation:fall 5s linear infinite;z-index:5}
@keyframes fall{0%{transform:translateY(-30px) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(120vh) rotate(720deg);opacity:.5}}

.faq {
    --faq-bg: #ffffff;
    --faq-text: #1a1a1a;
    --faq-muted: #6b6b6b;
    --faq-border: #e5e5e5;
    --faq-accent: #2563eb;
    --faq-hover: #f7f7f8;

    background: var(--faq-bg);
    color: var(--faq-text);
    padding: 80px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .faq__inner {
    max-width: 720px;
    margin: 0 auto;
  }

  .faq__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faq-accent);
    margin: 0 0 12px;
  }

  .faq__title {
    font-size: clamp(28px, 4vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
  }

  .faq__subtitle {
    font-size: 16px;
    color: var(--faq-muted);
    margin: 0 0 40px;
    line-height: 1.5;
  }

  .faq__list {
    border-top: 1px solid var(--faq-border);
  }

  .faq__item {
    border-bottom: 1px solid var(--faq-border);
  }

  .faq__question-wrap {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  .faq__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 17px;
    font-weight: 500;
    color: var(--faq-text);
    transition: color 0.15s ease;
  }

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

  .faq__question:focus-visible {
    outline: 2px solid var(--faq-accent);
    outline-offset: 4px;
    border-radius: 4px;
  }

  .faq__icon {
    position: relative;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
  }

  .faq__icon::before {
    width: 12px;
    height: 2px;
  }

  .faq__icon::after {
    width: 2px;
    height: 12px;
  }

  .faq__question[aria-expanded="true"] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
  }

  .faq__answer {
    overflow: hidden;
    padding: 0 4px 22px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--faq-muted);
  }

  .faq__answer p {
    margin: 0;
  }

  @media (max-width: 480px) {
    .faq {
      padding: 56px 20px;
    }
    .faq__question {
      font-size: 16px;
    }
  }







  :root {
            --pink-light: #ffe4f0;
            --blue-light: #e4f0ff;
            --purple-light: #f0e4ff;
            --mint-light: #e4fff0;
            --yellow-light: #fff8e4;
            --card-bg: rgba(255, 255, 255, 0.85);
            --card-border: rgba(255, 255, 255, 0.9);
            --text-dark: #3d2c5e;
            --text-body: #5a4a7a;
        }

        .last {
            font-family: 'Quicksand', sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #ffecd2 0%, #fcb1d4 25%, #c8b6ff 50%, #a8d8ff 75%, #b8f0d0 100%);
            background-size: 400% 400%;
            animation: gradientShift 20s ease infinite;
            padding: 40px 20px;
            overflow-x: hidden;
            position: relative;
        }

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

        /* Floating background elements */
        .last .floating-elements {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .last .float-item {
            position: absolute;
            font-size: 24px;
            opacity: 0.4;
            animation: floatUp linear infinite;
        }

        @keyframes floatUp {
            0% {
                transform: translateY(100vh) rotate(0deg) scale(0.5);
                opacity: 0;
            }
            10% {
                opacity: 0.4;
            }
            90% {
                opacity: 0.4;
            }
            100% {
                transform: translateY(-100px) rotate(360deg) scale(1);
                opacity: 0;
            }
        }

        .last .float-item:nth-child(1) { left: 5%; animation-duration: 15s; animation-delay: 0s; font-size: 20px; }
        .last .float-item:nth-child(2) { left: 15%; animation-duration: 18s; animation-delay: 2s; font-size: 16px; }
        .last .float-item:nth-child(3) { left: 25%; animation-duration: 12s; animation-delay: 4s; font-size: 22px; }
        .last .float-item:nth-child(4) { left: 35%; animation-duration: 20s; animation-delay: 1s; font-size: 18px; }
        .last .float-item:nth-child(5) { left: 45%; animation-duration: 16s; animation-delay: 3s; font-size: 24px; }
        .last .float-item:nth-child(6) { left: 55%; animation-duration: 14s; animation-delay: 5s; font-size: 20px; }
        .last .float-item:nth-child(7) { left: 65%; animation-duration: 19s; animation-delay: 2.5s; font-size: 16px; }
        .last .float-item:nth-child(8) { left: 75%; animation-duration: 13s; animation-delay: 4.5s; font-size: 22px; }
        .last .float-item:nth-child(9) { left: 85%; animation-duration: 17s; animation-delay: 1.5s; font-size: 18px; }
        .last .float-item:nth-child(10) { left: 92%; animation-duration: 21s; animation-delay: 3.5s; font-size: 20px; }
        .last .float-item:nth-child(11) { left: 10%; animation-duration: 22s; animation-delay: 6s; font-size: 14px; }
        .last .float-item:nth-child(12) { left: 50%; animation-duration: 11s; animation-delay: 7s; font-size: 26px; }

        /* Cloud elements */
        .last .cloud {
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50px;
            animation: driftCloud linear infinite;
        }

        .last .cloud::before, .cloud::after {
            content: '';
            position: absolute;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
        }

        .last .cloud-1 {
            width: 120px;
            height: 40px;
            top: 8%;
            left: -150px;
            animation-duration: 35s;
        }
        .last .cloud-1::before { width: 50px; height: 50px; top: -20px; left: 20px; }
        .last .cloud-1::after { width: 60px; height: 60px; top: -30px; left: 50px; }

        .last .cloud-2 {
            width: 100px;
            height: 35px;
            top: 20%;
            left: -120px;
            animation-duration: 45s;
            animation-delay: 10s;
        }
        .last .cloud-2::before { width: 40px; height: 40px; top: -15px; left: 15px; }
        .last .cloud-2::after { width: 50px; height: 50px; top: -25px; left: 40px; }

        .last .cloud-3 {
            width: 140px;
            height: 45px;
            top: 60%;
            left: -170px;
            animation-duration: 40s;
            animation-delay: 20s;
        }
        .last .cloud-3::before { width: 55px; height: 55px; top: -22px; left: 25px; }
        .last .cloud-3::after { width: 65px; height: 65px; top: -32px; left: 60px; }

        @keyframes driftCloud {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(100vw + 200px)); }
        }

        /* Main content */
        .last .container {
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .last .header {
            text-align: center;
            margin-bottom: 50px;
            animation: dropIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            opacity: 0;
            transform: translateY(-40px);
        }

        @keyframes dropIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .last .header h1 {
            font-family: 'Fredoka', sans-serif;
            font-weight: 700;
            font-size: clamp(1.6rem, 4vw, 2.6rem);
            color: var(--text-dark);
            text-transform: uppercase;
            letter-spacing: 1px;
            line-height: 1.3;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.5);
        }

        .last .header h1 .target-icon {
            display: inline-block;
            animation: wiggle 2s ease-in-out infinite;
            font-size: 1.1em;
        }

        @keyframes wiggle {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-8deg); }
            75% { transform: rotate(8deg); }
        }

        .last .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }

        .last .card {
            background: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 2px solid var(--card-border);
            border-radius: 24px;
            padding: 32px 28px;
            position: relative;
            overflow: hidden;
            opacity: 0;
            transform: translateY(50px) scale(0.9);
            animation: bounceIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
            box-shadow: 0 8px 32px rgba(180, 140, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .last .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            border-radius: 24px 24px 0 0;
            opacity: 0.7;
        }

        .last .card:nth-child(1)::before { background: linear-gradient(90deg, #ff9a9e, #fad0c4); }
        .last .card:nth-child(2)::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
        .last .card:nth-child(3)::before { background: linear-gradient(90deg, #d299c2, #fef9d7); }
        .last .card:nth-child(4)::before { background: linear-gradient(90deg, #fbc2eb, #a6c1ee); }
        .last .card:nth-child(5)::before { background: linear-gradient(90deg, #84fab0, #8fd3f4); }
        .last .card:nth-child(6)::before { background: linear-gradient(90deg, #fccb90, #d57eeb); }

        .last .card:nth-child(1) { animation-delay: 0.2s; }
        .last .card:nth-child(2) { animation-delay: 0.35s; }
        .last .card:nth-child(3) { animation-delay: 0.5s; }
        .last .card:nth-child(4) { animation-delay: 0.65s; }
        .last .card:nth-child(5) { animation-delay: 0.8s; }
        .last .card:nth-child(6) { animation-delay: 0.95s; }

        @keyframes bounceIn {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .last .card:hover {
            transform: translateY(-6px) scale(1.03) rotate(-0.5deg);
            box-shadow: 0 16px 48px rgba(180, 140, 255, 0.2), 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .last .card-icon {
            font-size: 42px;
            margin-bottom: 16px;
            display: inline-block;
            animation: iconBounce 3s ease-in-out infinite;
        }

        .last .card:nth-child(1) .card-icon { animation-delay: 0s; }
        .last .card:nth-child(2) .card-icon { animation-delay: 0.5s; }
        .last .card:nth-child(3) .card-icon { animation-delay: 1s; }
        .last .card:nth-child(4) .card-icon { animation-delay: 1.5s; }
        .last .card:nth-child(5) .card-icon { animation-delay: 2s; }
        .last .card:nth-child(6) .card-icon { animation-delay: 2.5s; }

        @keyframes iconBounce {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            30% { transform: translateY(-8px) rotate(-3deg); }
            50% { transform: translateY(-4px) rotate(2deg); }
            70% { transform: translateY(-6px) rotate(-1deg); }
        }

        .last .card-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 600;
            font-size: 1.25rem;
            color: var(--text-dark);
            margin-bottom: 10px;
        }

        .last .card-desc {
            font-family: 'Quicksand', sans-serif;
            font-weight: 500;
            font-size: 0.95rem;
            color: var(--text-body);
            line-height: 1.6;
        }

        /* Sparkle dots on cards */
        .last .card::after {
            content: '✨';
            position: absolute;
            top: 16px;
            right: 20px;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: scale(0.5) rotate(-20deg);
        }

        .last .card:hover::after {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        /* Responsive */
        @media (max-width: 900px) {
            .last .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        @media (max-width: 600px) {
            .last .grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .last .card {
                padding: 24px 22px;
            }

            .last {
                padding: 24px 16px;
            }

            .last .header {
                margin-bottom: 32px;
            }
        }