/* ================ MOBILE ADAPTATION ================ */

/* Tablet */
@media (max-width:1100px){
  .wrap{padding:0 22px}
  .hero{padding: 130px 0 70px}
  .sec-head h2{font-size:40px}
}

/* Phone ≤ 760px */
@media (max-width:760px){
  .wrap{padding:0 18px}

  /* NAV */
  .nav{padding:8px 10px 8px 14px}
  .brand{font-size:15px}
  .brand-mark{width:34px; height:34px}
  .brand-mark img{width:28px; height:28px}
  .nav-cta{padding:9px 12px; font-size:12.5px}
  .nav-cta .dot{width:6px; height:6px}

  /* HERO */
  .hero{padding: 110px 0 60px}
  .hero .wrap{gap:24px}
  .hero h1{font-size:38px; line-height:1.04; margin:16px 0 14px}
  .hero p.lead{font-size:16px}
  .cta-row{gap:10px; margin-top:22px}
  .btn{padding:14px 20px; font-size:14.5px; border-radius:14px}
  .trust{margin-top:18px; font-size:12px}
  .hero-stats{margin-top:28px; padding-top:20px; gap:22px}
  .stat .num{font-size:24px}
  .stat .lbl{font-size:12px}

  .hero-stage{height:480px; margin-top:10px}
  .phone{width:240px; height:480px; border-radius:38px; padding:10px; right:14px; top:0}
  .phone::before{width:90px; height:22px; top:12px}
  .phone-screen{border-radius:30px}
  .phone-top{padding:38px 14px 6px; font-size:11px}
  .phone-hi{padding:10px 14px 4px}
  .phone-hi .greet{font-size:15px}
  .phone-hi .sub{font-size:10.5px}
  .chat{padding:10px 10px 0; gap:7px}
  .msg{font-size:11.5px; padding:8px 10px; border-radius:12px}
  .msg .fml{font-size:11px}
  .phone-input{margin:8px 10px 12px; padding:8px 10px; font-size:11px}
  .phone-input .mic{width:24px; height:24px; font-size:12px}

  .mascot-hero{width:190px; left:-24px; bottom:-20px}
  .speech{left:130px; top:10px; font-size:11.5px; padding:10px 12px; border-radius:14px 14px 14px 3px}
  .sticker{font-size:11.5px; padding:8px 10px; border-radius:12px}
  .sticker .ico{width:26px; height:26px; font-size:13px; border-radius:8px}
  .sticker.s1{top:100px; right:-6px}
  .sticker.s2{bottom:30px; right:auto; left:16px}
  .blob.a{width:220px; height:220px}
  .blob.b{width:180px; height:180px}

  /* Marquee */
  .subjects{padding:20px 0}
  .mq-item{font-size:15px; gap:36px}
  .marquee{gap:36px}

  /* Section heads */
  .sec-head{margin:0 auto 40px}
  .tag{font-size:10.5px; padding:5px 12px}
  .sec-head h2{font-size:30px; line-height:1.1}
  .sec-head p{font-size:15px}

  /* PROBLEM */
  .problem{padding:80px 0 60px}
  .prob-grid{grid-template-columns:1fr; gap:18px}
  .prob-card{padding:24px 22px}
  .prob-card h3{font-size:20px}
  .prob-mascot-wrap{width:110px; height:110px}
  .prob-mascot{width:92px; height:92px}
  .prob-card .num{font-size:42px; top:16px; right:18px}
  .prob-transition{margin-top:50px}
  .prob-transition .txt{font-size:13px}
  /* disable alt-side slide-in on mobile for cleaner reveal */
  .prob-grid .reveal.d1, .prob-grid .reveal.d3{transform:translateY(30px)}

  /* SOLUTION — collapse horizontal story to vertical stack */
  .solution{padding:80px 0 60px}
  .story{height:auto !important}
  .story-sticky{position:static !important; height:auto !important; overflow:visible !important}
  .story-track{display:flex !important; flex-direction:column !important; padding:0 18px !important; gap:60px !important; width:auto !important; transform:none !important; height:auto !important}
  .story-panel{flex:1 1 auto !important; width:100% !important; max-width:100% !important; grid-template-columns:1fr !important; opacity:1 !important; transform:none !important; gap:24px}
  .story-panel .sp-copy h3{font-size:26px}
  .story-panel p.sp-lead{font-size:15px}
  .story-panel .step-num{font-size:12px}
  .story-panel .sp-tags span{font-size:12px; padding:6px 12px}
  .story-panel .sp-visual{height:auto; min-height:520px; padding:20px 0}
  .story-panel .sp-phone{width:250px; height:500px; border-radius:38px; padding:10px}
  .story-panel .sp-phone::before{width:90px; height:22px}
  .story-panel .sp-screen{border-radius:30px; padding:38px 14px 10px}
  .sp-bg-num{font-size:160px; right:-4%; top:4%; opacity:.1}
  .sp-mascot{width:110px}
  .sp-mascot.l{left:-14px; bottom:10px}
  .sp-mascot.r{right:-14px; top:20px}
  .story-hud{display:none}
  .scroll-hint{display:none}

  /* SOCIAL PROOF */
  .social{padding:80px 0 60px}
  .review-scroll{margin:0 -18px; padding:20px 18px 30px}
  .review{flex: 0 0 300px; padding:22px 20px}
  .review .quote{font-size:14.5px}
  .review .who .av{width:38px; height:38px; font-size:14px}
  .review .who .name{font-size:13.5px}
  .review .who .meta{font-size:11.5px}
  .review .who .result{font-size:10.5px; padding:4px 8px}

  /* PRICING */
  .pricing{padding:80px 0 60px}
  .price-grid{grid-template-columns:1fr; gap:20px}
  .price{padding:28px 24px 26px; border-radius:22px}
  .price.best{transform:none}
  .price.best:hover{transform:translateY(-4px)}
  .price .cost .amount{font-size:44px}
  .price .cost .cur{font-size:18px}
  .price .plan{font-size:18px}
  .price .ribbon{font-size:11px; padding:5px 12px}
  .price li{font-size:13.5px}
  .price-note{flex-direction:column; gap:10px; font-size:12.5px}

  /* FINAL CTA */
  .final{padding:80px 0 60px}
  .final h2{font-size:34px}
  .final p{font-size:15.5px}
  .final .urgency{font-size:12px; padding:6px 12px}
  .final-mascot{width:90px; bottom:-30px; left:2%}
  .final-mascot.r{width:80px; top:10px; right:2%}
  .final .stars{font-size:12px; margin-top:22px}

  /* FAB */
  .notify-fab{right:12px; bottom:12px; padding:10px}
  .notify-fab .bell{width:28px; height:28px}
  .notify-fab .bell svg{width:15px; height:15px}
  .notify-fab .txt{display:none}

  /* FOOTER */
  .foot{padding:40px 0 24px}
  .foot-row{gap:28px}
  .foot-cols{gap:32px}
  .foot-col h4{font-size:12px; margin-bottom:10px}
  .foot-col a{font-size:13px}
  .foot-bottom{flex-direction:column; align-items:flex-start; gap:8px; font-size:12px}
}

/* Small phones ≤ 420px */
@media (max-width:420px){
  .hero h1{font-size:32px}
  .sec-head h2{font-size:26px}
  .final h2{font-size:28px}
  .phone{width:210px; height:420px}
  .mascot-hero{width:160px; left:-20px}
  .speech{left:110px; top:6px; font-size:11px}
  .sticker.s1{top:80px}
  .hero-stage{height:420px}
  .story-panel .sp-phone{width:220px; height:440px}
  .story-panel .sp-visual{min-height:470px}
  .review{flex: 0 0 260px}
  .price .cost .amount{font-size:38px}
}

/* Disable heavy parallax on touch */
@media (hover: none){
  [data-tilt]{transform:none !important}
  [data-parallax]{transform:none !important}
}