/* ================= BUTTONS, CTAs & RESIZABLE NAME ================= */

/* NAV: bigger, clearer targets */
.nav{padding:10px var(--wrap);min-height:64px}
.nl{font-size:13px;padding:11px 16px;gap:8px}
.nl .ic{font-size:13px}
.dot{width:38px;height:38px;font-size:14px;border-width:2px;box-shadow:2px 2px 0 var(--ink)}
.dot:hover{box-shadow:3px 3px 0 var(--ink)}
.btn-contact{font-size:13px;padding:11px 20px;background:var(--yellow);border-width:2px;box-shadow:4px 4px 0 var(--ink)}
.btn-contact:hover{background:var(--pink);color:#fff}
.scroll-bar{top:64px}

/* HERO CTA */
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-main,.cta-ghost{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:700;font-size:clamp(14px,1.2vw,16px);letter-spacing:.5px;border:2.5px solid var(--ink);transition:transform .15s,box-shadow .15s,background .25s,color .25s}
.cta-main{background:var(--ink);color:#fff;padding:18px 26px 18px 18px;box-shadow:6px 6px 0 var(--yellow);position:relative;overflow:hidden}
.cta-main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.cta-ic{width:34px;height:34px;display:grid;place-items:center;background:var(--blue);font-size:16px}
.cta-arr{display:inline-block;transition:transform .3s var(--ease)}
.cta-main:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--yellow)}
.cta-main:hover .cta-arr{transform:translateX(6px)}
.cta-main:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--yellow)}
.cta-ghost{background:#fff;color:var(--ink);padding:18px 24px;box-shadow:6px 6px 0 var(--ink)}
.cta-ghost:hover{background:var(--yellow);transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.cta-ghost:active{transform:translate(6px,6px);box-shadow:none}
.cta-note{margin-top:16px;font-size:17px;color:#444}

/* Floating lead button (appears after hero) */
.float-cta{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--yellow);color:var(--ink);font-family:var(--mono);font-weight:700;font-size:14px;padding:14px 20px;border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transform:translateY(140%);transition:transform .5s var(--ease),box-shadow .15s}
.float-cta.show{transform:none}
.float-cta:hover{box-shadow:8px 8px 0 var(--ink);translate:-2px -2px}
.float-cta b{transition:transform .3s var(--ease)}
.float-cta:hover b{transform:translateX(5px)}
.fc-dot{width:10px;height:10px;border-radius:50%;background:var(--green);animation:blip 1.6s infinite}
.float-cta.hide-near{transform:translateY(140%)}

/* Contact section buttons */
.next{font-size:14px;padding:13px 22px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--blue)}
.next:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blue)}
.socials{gap:34px;margin-top:22px}
.socials span{width:48px;height:48px;font-size:17px;border-width:2px;box-shadow:3px 3px 0 var(--ink)}
.socials b{font-size:12px}
.pbtn{font-size:13px;padding:10px 16px;border-width:2px;box-shadow:4px 4px 0 var(--ink)}
.drag-hint{font-size:19px}

/* RESIZABLE NAME (Figma-style selection box) */
.name-box{--fs:clamp(80px,13vw,180px)}
.name-box .h{font-size:var(--fs);transition:font-size .05s linear}
.hd{width:14px;height:14px;cursor:nwse-resize;z-index:3;transition:transform .2s var(--ease),background .2s}
.hd.tl{left:-8px;top:-8px}.hd.tr{right:-8px;top:-8px;cursor:nesw-resize}
.hd.bl{left:-8px;bottom:-8px;cursor:nesw-resize}.hd.br{right:-8px;bottom:-8px}
.hd:hover,.hd.active{transform:scale(1.5);background:var(--red)}
.hd.br{animation:handlePulse 2s ease-in-out infinite}
@keyframes handlePulse{0%,100%{box-shadow:0 0 0 0 rgba(226,85,59,.5)}50%{box-shadow:0 0 0 8px rgba(226,85,59,0)}}
.name-box.resized .hd.br{animation:none}
.size-tip{position:absolute;right:-10px;bottom:-34px;transform:translateX(100%);background:var(--red);color:#fff;padding:4px 8px;white-space:nowrap;font-size:10px;pointer-events:none;transition:opacity .4s}
.size-tip::before{content:"";position:absolute;left:-5px;top:50%;margin-top:-5px;border:5px solid transparent;border-right-color:var(--red);border-left:0}
.name-box.resized .size-tip{opacity:0}
.size-badge{position:absolute;left:50%;top:-30px;transform:translateX(-50%);background:var(--blue);color:#fff;font-family:var(--mono);font-size:10px;padding:2px 8px;opacity:0;transition:opacity .2s;pointer-events:none}
.name-box.resizing .size-badge{opacity:1}
body.resizing,body.resizing *{cursor:nwse-resize!important;user-select:none}

@media (max-width:900px){
  .nav{padding:8px 4vw}
  .nl{font-size:11px;padding:9px 8px}
  .btn-contact{font-size:12px;padding:9px 12px}
  .cta-row{flex-direction:column;align-items:stretch;width:100%;max-width:360px;margin-inline:auto}
  .cta-main,.cta-ghost{justify-content:center}
  .float-cta{right:12px;left:12px;bottom:12px;justify-content:center}
  .size-tip{display:none}
  .hd{width:18px;height:18px}
}
.float-cta{transform:translateY(calc(100% + 40px))}
.float-cta.show{transform:none}
.nl,.btn-contact{white-space:nowrap}
@media (max-width:900px){
  .nav{gap:8px}
  .nav-l{overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
  .nav-l::-webkit-scrollbar{display:none}
  .nl .ic{display:none}
  .b-l{display:none}
}
@media (max-width:420px){.nl{padding:9px 6px;font-size:10.5px}.btn-contact{padding:9px 10px}}