/* ═══════════════════ ECUBIKE BASE STYLES ═══════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#09090b;--dark:#0f0f12;--card:#161619;--card2:#1d1d22;
  --border:#272730;--orange:#ff5c1a;--orange2:#ff8c00;
  --white:#eeebe6;--muted:#7a7a8c;--green:#22c55e;
  --fh:'Bebas Neue',sans-serif;--fb:'Outfit',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--fb);line-height:1.6;overflow-x:hidden}

/* ── NAV ── */
.mnav{position:fixed;top:0;left:0;right:0;z-index:500;display:flex;align-items:center;justify-content:space-between;padding:1rem 4rem;background:rgba(9,9,11,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);height:65px}
.logo{font-family:var(--fh);font-size:1.9rem;letter-spacing:.12em;color:var(--white);text-decoration:none;line-height:1}
.logo span{color:var(--orange)}
.nav-ul{display:flex;gap:2rem;list-style:none;align-items:center}
.nav-ul a{color:var(--muted);text-decoration:none;font-size:.82rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.nav-ul a:hover,.nav-ul a.act{color:var(--white)}
.nav-cta{background:var(--orange)!important;color:#000!important;padding:.45rem 1.1rem;border-radius:4px;font-weight:700!important;transition:background .2s!important}
.nav-cta:hover{background:var(--orange2)!important}
.nav-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:.4rem}
.nav-burger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:all .3s}
.mob-menu{display:none;position:fixed;top:65px;left:0;right:0;background:rgba(9,9,11,.98);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:1.5rem 2rem;z-index:499;flex-direction:column;gap:0}
.mob-menu a{color:var(--muted);text-decoration:none;font-size:.95rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:.9rem 0;border-bottom:1px solid var(--border);display:block;transition:color .2s}
.mob-menu a:last-child{border-bottom:none;color:var(--green);margin-top:.5rem}
.mob-menu a:hover{color:var(--orange)}
.mob-menu.open{display:flex}

/* ── BUTTONS ── */
.btn-p{display:inline-flex;align-items:center;gap:.6rem;background:var(--orange);color:#000;font-weight:700;font-size:.92rem;letter-spacing:.04em;padding:.88rem 1.75rem;border-radius:5px;text-decoration:none;transition:background .25s,transform .2s,box-shadow .25s}
.btn-p:hover{background:var(--orange2);transform:translateY(-3px);box-shadow:0 12px 36px rgba(255,92,26,.28)}
.btn-s{display:inline-flex;align-items:center;gap:.6rem;background:transparent;color:var(--white);font-weight:500;font-size:.92rem;padding:.88rem 1.75rem;border:1px solid var(--border);border-radius:5px;text-decoration:none;transition:border-color .25s,background .25s}
.btn-s:hover{border-color:var(--orange);background:rgba(255,92,26,.07)}
.btn-wa{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;background:#25d366;color:#000;font-weight:700;font-size:1rem;padding:.95rem 2rem;border-radius:8px;text-decoration:none;transition:background .2s,transform .2s,box-shadow .2s}
.btn-wa:hover{background:#1db954;transform:translateY(-2px);box-shadow:0 10px 30px rgba(37,211,102,.3)}

/* ── PAGE HERO (inner pages) ── */
.phero{padding:9rem 4rem 4rem;background:var(--dark);border-bottom:1px solid var(--border);position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 100% 50%,rgba(255,92,26,.09),transparent 65%)}
.phero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,92,26,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,92,26,.04) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(ellipse 100% 100% at 100% 50%,black,transparent 70%)}
.phero .slbl{position:relative}
.phero h1{position:relative}
.phero p{position:relative}

/* ── COMMON ── */
.sec{padding:5rem 4rem}
.sec-dark{background:var(--dark)}
.slbl{font-size:.73rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:.7rem}
h2{font-family:var(--fh);font-size:clamp(2rem,3.5vw,3.5rem);line-height:1;letter-spacing:.03em;margin-bottom:.7rem}
.sdesc{color:var(--muted);max-width:600px;margin-bottom:2.5rem;font-size:1rem;font-weight:300}
.tag{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .6rem;border-radius:2px;background:rgba(255,92,26,.08);color:var(--orange);border:1px solid rgba(255,92,26,.17)}

/* ── REVEAL (faster, no black gaps) ── */
.rev{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.rev.vis{opacity:1;transform:none}

/* ── WA FLOAT ── */
.wa-float{position:fixed;bottom:2rem;right:2rem;z-index:600;background:#25d366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 8px 30px rgba(37,211,102,.38);transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:scale(1.1)}

/* ── FOOTER ── */
.mfooter{background:var(--dark);border-top:1px solid var(--border);padding:3rem 4rem 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2.5rem}
.footer-brand p{color:var(--muted);font-size:.85rem;font-weight:300;line-height:1.7;max-width:240px;margin-top:.6rem}
.fcol h5{font-family:var(--fh);font-size:1rem;letter-spacing:.1em;margin-bottom:1rem}
.fcol a{display:block;color:var(--muted);text-decoration:none;font-size:.85rem;margin-bottom:.5rem;transition:color .2s}
.fcol a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p,.footer-bottom a{color:var(--muted);font-size:.78rem;text-decoration:none}
.footer-bottom a:hover{color:var(--white)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .mnav{padding:1rem 1.5rem}
  .nav-ul{display:none}
  .nav-burger{display:flex}
  .phero{padding:8rem 1.5rem 3rem}
  .sec{padding:3.5rem 1.5rem}
  .mfooter{padding:2.5rem 1.5rem 1.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:580px){
  .footer-grid{grid-template-columns:1fr}
}