/* ================== RESPONSIVE ================== */

/* Titik indikator carousel (dibuat oleh js/carousel.js) */
.snap-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.snap-dots[hidden]{display:none}
.snap-dots button{width:7px;height:7px;border-radius:99px;background:var(--line-2);transition:width .3s,background .3s}
.snap-dots button.on{width:22px;background:var(--ink)}

/* ---------- Tablet (≤ 980px) ---------- */
@media (max-width:980px){
  .nav-links,.nav .btn{display:none}
  .menu-btn{display:grid}
  .mobile-menu{display:block;position:fixed;inset:80px 20px auto;z-index:49;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:8px;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);pointer-events:none;transition:.3s}
  .mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu a{display:block;padding:12px 16px;border-radius:14px;font-weight:600;color:var(--ink)}
  .mobile-menu a:hover{background:var(--surface-2)}

  .hero{min-height:auto;padding:130px 0 40px}
  .hero-grid,.about-grid,.faq-grid{grid-template-columns:1fr}
  .hero-grid{gap:40px}
  .about-grid{gap:40px}
  .faq-grid{gap:16px}
  .stage{max-width:460px;margin-inline:auto;width:100%}
  .founder-card{position:relative;top:0;max-width:440px}
  .services{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr;row-gap:30px;margin-top:48px}
  .section-head{margin-bottom:36px}

  /* Paket harga → carousel geser */
  .plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-20px;padding:6px 20px 20px;position:relative;align-items:stretch}
  .plans::-webkit-scrollbar{display:none}
  .plans .plan{flex:0 0 min(360px,82%);scroll-snap-align:center}
  .plans .plan:hover{transform:none}
}

/* ---------- HP (≤ 680px) ---------- */
@media (max-width:680px){
  :root{--nav-offset:84px}
  section{padding:12px 0 64px}
  .wrap{width:calc(100% - 32px)}
  .lead{font-size:15.5px}
  h2.title{font-size:34px;margin:10px 0 12px}
  .section-head{margin-bottom:22px;gap:4px}
  .eyebrow{font-size:11px}

  /* nav */
  .nav{top:10px}
  .nav-inner{padding:8px 8px 8px 10px}
  .brand img{width:34px;height:34px}
  .brand-text span{display:none}
  .icon-btn{width:38px;height:38px}
  .mobile-menu{inset:72px 16px auto}

  /* hero */
  .hero{padding:104px 0 28px}
  .hero-grid{gap:28px}
  .status{font-size:12px}
  .hero h1{font-size:44px;margin:18px 0 16px}
  .hero .lead{font-size:16px}
  .hero-cta{margin-top:22px;gap:8px}
  .hero-cta .btn{flex:1;justify-content:center;padding:13px 16px;font-size:14px}
  .hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;padding-top:18px}
  .hero-meta div b{font-size:20px}
  .hero-meta div span{font-size:11.5px;line-height:1.3;display:block;margin-top:4px}
  .stage{max-width:300px}
  .win-code pre{font-size:8.5px;padding:10px 12px}
  .chip{font-size:11px;padding:7px 11px}
  .marquee{margin-top:28px;padding:12px 0}
  .marquee span{font-size:19px;gap:32px}
  .marquee-track{gap:32px}

  /* tentang: kartu founder jadi ringkas (foto di kiri) */
  .about-grid{gap:24px}
  .founder-card{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:center;padding:12px;border-radius:22px;max-width:none}
  .portrait{border-radius:16px}
  .portrait .tag{display:none}
  .founder-meta{padding:0}
  .founder-meta h3{font-size:20px;line-height:1.15}
  .founder-meta p{font-size:12.5px;line-height:1.4}
  .socials{grid-column:1 / -1;margin-top:0;gap:6px}
  .socials a{padding:8px;font-size:12.5px;border-radius:10px}
  .about-copy p{font-size:15.5px;margin-bottom:12px}
  .about-copy p.big{font-size:21px}
  .values{grid-template-columns:1fr;gap:8px;margin:22px 0}
  .value{display:grid;grid-template-columns:30px 1fr;column-gap:8px;padding:14px 16px;border-radius:14px}
  .value b{grid-row:span 2;margin:2px 0 0}
  .value h4{font-size:15px;margin-bottom:2px}
  .value p{font-size:13.5px!important}
  .skill-list{gap:6px}
  .skill-list span{padding:6px 11px;font-size:13px}
  .timeline{margin-top:26px;gap:16px;padding-left:20px}
  .timeline div::before{left:-25px}
  .timeline h5{font-size:15px}
  .timeline p{font-size:13.5px!important}

  /* layanan: kartu ringkas, ikon di kiri */
  .services{grid-template-columns:1fr;gap:10px}
  .svc,.svc.wide{grid-column:auto;min-height:0;padding:18px;border-radius:18px;
    display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:start}
  .svc .ic{width:40px;height:40px;border-radius:12px;margin:2px 0 0;grid-row:span 3}
  .svc .ic svg{width:19px;height:19px}
  .svc h3,.svc.wide h3{font-size:17px;font-family:var(--sans);font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
  .svc p{font-size:14px}
  .svc .stack{padding-top:8px;font-size:10.5px}
  .process{grid-template-columns:1fr 1fr;gap:20px 14px;margin-top:32px}
  .step{padding:18px 0 0}
  .step b{font-size:30px;margin-bottom:6px}
  .step h4{font-size:15px}
  .step p{font-size:13px}

  /* proyek → carousel geser */
  .projects{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin-inline:-16px;padding:4px 16px 8px;position:relative}
  .projects::-webkit-scrollbar{display:none}
  .proj{flex:0 0 86%;scroll-snap-align:center;border-radius:20px}
  .proj:hover{transform:none}
  .proj-visual{aspect-ratio:16/11;padding:44px 16px 14px}
  .proj-visual .badge{top:12px;left:12px;font-size:10px}
  .mock{width:94%}
  .proj-body{padding:18px 18px 20px;gap:6px}
  .proj-body h3{font-size:22px}
  .proj-body p{font-size:14px}
  .tags span{font-size:11px;padding:4px 9px}
  .nfc-cards{transform:rotate(-6deg) scale(.62)}
  .mock table{font-size:8.5px}
  .mock th,.mock td{padding:5px 7px}
  .proj.cta-card{padding:24px}
  .proj.cta-card h3{font-size:28px}

  /* harga */
  .pricing-top{margin-bottom:22px}
  .toggle{margin-top:18px}
  .toggle button{padding:9px 14px;font-size:13px}
  .plans{margin-inline:-16px;padding:6px 16px 16px;gap:10px}
  .plans .plan{flex-basis:84%;padding:24px 20px 20px;border-radius:22px}
  .plan .ribbon{top:16px;right:16px;font-size:9.5px}
  .plan .pname{font-size:24px}
  .plan .pfor{font-size:13px;min-height:0}
  .price{margin:16px 0 4px}
  .price .num{font-size:36px}
  .monthly{font-size:13px}
  .plan hr{margin:16px 0}
  .feat{gap:8px;margin-bottom:20px}
  .feat li{font-size:13.5px}
  .price-note{font-size:12.5px;margin-top:14px}

  /* faq */
  .faq details{padding:15px 0}
  .faq summary{font-size:15.5px}
  .faq summary i{width:26px;height:26px}
  .faq details p{font-size:14px;margin-top:8px}

  /* kontak */
  .contact{padding-bottom:24px}
  .contact-box{border-radius:24px;padding:30px 20px}
  .contact-box h2{font-size:38px;margin:12px 0 12px}
  .contact-box p{font-size:15px}
  .contact-actions{margin-top:22px;gap:8px}
  .contact-actions .btn{flex:1 1 100%;justify-content:center;padding:14px;font-size:14.5px;white-space:nowrap}
  .contact-info{grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:26px;padding-top:20px}
  .contact-info > div:first-child{grid-column:1 / -1}
  .contact-info div{font-size:14.5px;margin-top:2px}

  /* footer */
  footer{padding:24px 0 20px}
  .foot{flex-direction:column;text-align:center;gap:10px;font-size:12.5px}
  .big-word{margin-top:18px;font-size:30vw}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}