/* ====== Mobile Nav: Glass Hamburger ====== */
.hm-btn{display:none;flex-direction:column;justify-content:center;align-items:center;width:44px;height:44px;border:none;background:none;cursor:pointer;padding:10px;z-index:120;position:relative}
.hm-btn span{display:block;width:22px;height:2px;background:var(--color-text-dim);border-radius:3px;transition:all .3s cubic-bezier(.34,1.56,.64,1);transform-origin:center}
.hm-btn span+span{margin-top:6px}
.hm-btn.on span:nth-child(1){width:26px;transform:translateY(8px) rotate(45deg);background:var(--color-primary)}
.hm-btn.on span:nth-child(2){width:0;opacity:0}
.hm-btn.on span:nth-child(3){width:26px;transform:translateY(-8px) rotate(-45deg);background:var(--color-primary)}

/* overlay */
.hm-overlay{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.hm-overlay.on{opacity:1;pointer-events:auto}

/* drawer — glass premium */
.hm-drawer{position:fixed;top:0;right:0;bottom:0;width:300px;z-index:110;background:rgba(8,12,20,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-left:1px solid rgba(212,168,67,.08);padding:80px 28px 100px;display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto}
.hm-drawer.on{transform:translateX(0)}
.hm-drawer .hm-logo{position:absolute;top:28px;left:28px;display:block}
.hm-drawer a{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 14px;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--color-text-dim);border-radius:var(--radius-md);transition:all .2s ease;position:relative}
.hm-drawer a::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--color-border);flex-shrink:0;transition:all .2s}
.hm-drawer a:hover{background:rgba(212,168,67,.06);color:var(--color-text)}
.hm-drawer a.on{color:var(--color-primary);background:rgba(212,168,67,.08)}
.hm-drawer a.on::before{background:var(--color-primary);box-shadow:0 0 8px rgba(212,168,67,.4)}
.hm-drawer .hm-close{position:absolute;top:24px;right:20px;width:40px;height:40px;border:none;background:rgba(255,255,255,.04);color:var(--color-text-dim);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:all .2s}
.hm-drawer .hm-close:hover{background:rgba(255,255,255,.08);color:var(--color-text)}

/* ====== Tap Feedback ====== */
.btn:active,.scard:active,.fcard:active,.tcard:active,.ccard:active,.step:active,.hcard:active{transform:scale(.97)!important;transition:transform .1s!important}
.nav-cta:active{transform:scale(.95)!important}

/* ====== Horizontal Scroll Cards ====== */
.scroll-x{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px;margin-bottom:-8px;scrollbar-width:none}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x>*{flex:0 0 85%;scroll-snap-align:start}

/* ====== Motion Refinements ====== */
.hm-drawer a{opacity:0;transform:translateX(20px)}
.hm-drawer.on a{opacity:1;transform:translateX(0)}
.hm-drawer.on a:nth-child(3){transition:all .3s .05s ease}
.hm-drawer.on a:nth-child(4){transition:all .3s .1s ease}
.hm-drawer.on a:nth-child(5){transition:all .3s .15s ease}
.hm-drawer.on a:nth-child(6){transition:all .3s .2s ease}
.hm-drawer.on a:nth-child(7){transition:all .3s .25s ease}
.hm-drawer.on a:nth-child(8){transition:all .3s .3s ease}

/* ====== Tablet (768px↓) ====== */
@media(max-width:768px){
  .hm-btn{display:flex}
  .hd-in .nav{display:none}

  .hero{min-height:auto;padding:72px 24px 56px}
  .hero h1{font-size:clamp(2rem,5vw,2.8rem)}
  .hero-sub{font-size:var(--fs-h4)}
  .hero-badge{margin-bottom:20px}

  .sec{padding:60px 24px}
  .sec-desc{margin-bottom:28px}
  .cta{padding:60px 24px}
  .ft{padding:28px 24x;padding-bottom:80px}

  .sgrid{gap:20px}
  .scard{padding:28px}
  .shead{gap:16px}
  .sicon{width:48px;height:48px;font-size:22px}
  .stag{font-size:11px;padding:3px 10px}

  .mgrid{padding:24px;gap:16px}
  .mnum{font-size:clamp(1.3rem,3vw,1.8rem)}
  .mlab{font-size:11px}

  .features{gap:16px}
  .fcard{padding:24px}
  .fcard .fi{width:40px;height:40px;font-size:18px;margin-bottom:16px}

  .trades{gap:16px}
  .tcard{padding:20px}
  .tcard .ts{font-size:var(--fs-h4)}

  .hotspots{gap:12px}
  .hcard{padding:20px}

  .steps{gap:16px}
  .step{padding:24px}

  .contact-block{padding:24px;margin-top:28px}
  .citem{padding:12px 0}

  .ccard{padding:24px}
  .tiers{padding:0}

  .tier{padding:14px 0}
  .tier-num{width:36px;height:36px;font-size:var(--fs-h4)}

  .quote{padding:24px}
  .quote blockquote{font-size:var(--fs-h4)}
}

/* ====== Phone (480px↓) ====== */
@media(max-width:480px){
  .hd-in{padding:0 16px}
  .hero{padding:56px 16px 44px}
  .hero h1{font-size:clamp(1.5rem,7vw,1.8rem);letter-spacing:-.01em}
  .hero-sub{font-size:var(--fs-small)}
  .hero-badge{font-size:11px;padding:4px 12px}
  .btn{padding:12px 20px}
  .btn-p,.btn-o{font-size:13px}

  .sec{padding:44px 16px}
  .sec h2{font-size:clamp(1.3rem,6vw,1.5rem)}
  .sec-desc{font-size:var(--fs-small);margin-bottom:24px}
  .sec-label{font-size:11px}

  .sgrid{grid-template-columns:1fr}
  .scard{padding:24px}

  .mgrid{grid-template-columns:repeat(2,1fr);padding:16px;gap:8px}
  .mnum{font-size:clamp(1rem,4vw,1.25rem)}
  .mnum small{font-size:12px}
  .mlab{font-size:10px}
  .metric-bar{margin:-36px auto 48px}

  .cgrid{grid-template-columns:1fr}
  .ccard{padding:20px}

  .features{grid-template-columns:1fr}
  .fcard{padding:20px}
  .fcard .fi{width:36px;height:36px;font-size:16px;margin-bottom:14px}
  .fcard h3{font-size:var(--fs-body)}

  .trades{grid-template-columns:1fr}
  .tcard{padding:16px}
  .tcard .ts{font-size:var(--fs-h4)}
  .tcard .tp{font-size:var(--fs-h3)!important}
  .tcard .tn{font-size:11px}

  .hotspots{grid-template-columns:1fr}
  .hcard{padding:16px}
  .hcard .hi{font-size:28px}

  .steps{grid-template-columns:1fr}
  .step{padding:20px}
  .step-num{width:40px;height:40px;font-size:var(--fs-h4)}

  .contact-block{padding:20px;margin-top:24px}
  .contact-block .email{font-size:var(--fs-small);padding:10px 16px}
  .citem{padding:10px 0;flex-direction:column;gap:4px}
  .citem .cl{min-width:auto;font-size:11px}

  .tier{flex-direction:column;gap:6px;padding:12px 0}
  .tier-arrow{transform:rotate(90deg)}
  .tier-num{width:32px;height:32px;font-size:var(--fs-body)}

  .hm-drawer{width:100%;padding-left:20px;padding-right:20px}

  .quote{padding:16px}
  .quote blockquote{font-size:var(--fs-body)}

  .cta{padding:48px 16px}
  .cta h2{font-size:var(--fs-h3)}
  .urgent{font-size:10px;padding:2px 10px}
}

/* safe-area for iOS notch */
@supports(padding:max(0px)){
  .hm-drawer{padding-top:max(80px,env(safe-area-inset-top,0)+64px);padding-bottom:max(100px,env(safe-area-inset-bottom,0)+60px)}
  .hero{padding-left:max(24px,env(safe-area-inset-left,0)+16px);padding-right:max(24px,env(safe-area-inset-right,0)+16px)}
  .hd-in{padding-left:max(24px,env(safe-area-inset-left,0)+16px);padding-right:max(24px,env(safe-area-inset-right,0)+16px)}
}