/* ════════════════════════════════════════════════════
   base.css — Variables · Reset · Nav · Footer
              Loading Screen · WhatsApp Float
════════════════════════════════════════════════════ */
:root {
  --bg:#060910; --bg2:#0c1220; --bg3:#111827;
  --cyan:#00e5ff; --blue:#3b82f6; --purple:#8b5cf6;
  --gold:#fbbf24; --gold2:#f59e0b; --red:#ef4444; --green:#22c55e;
  --border:rgba(0,229,255,0.12); --border-g:rgba(251,191,36,0.15);
  --text:#e2e8f0; --muted:#64748b; --card:rgba(12,18,32,0.8);
  --font-display:'Bebas Neue',cursive;
  --font-body:'Outfit',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);overflow-x:hidden;cursor:none;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(0,229,255,.03)1px,transparent 1px),linear-gradient(90deg,rgba(0,229,255,.03)1px,transparent 1px);background-size:50px 50px;pointer-events:none;z-index:0;}

/* ── LOADING SCREEN ── */
#loader{position:fixed;inset:0;z-index:99999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;transition:opacity .7s ease,visibility .7s ease;}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader-logo{font-family:var(--font-display);font-size:clamp(72px,12vw,120px);letter-spacing:16px;color:var(--cyan);text-shadow:0 0 40px rgba(0,229,255,.8),0 0 80px rgba(0,229,255,.4);animation:ldPulse 1.2s ease-in-out infinite;}
.loader-bar-wrap{width:220px;height:2px;background:rgba(0,229,255,.1);border-radius:2px;overflow:hidden;}
.loader-bar{height:100%;width:0;background:linear-gradient(to right,var(--cyan),var(--blue));border-radius:2px;animation:ldFill 2s ease forwards;box-shadow:0 0 12px var(--cyan);}
.loader-text{font-family:var(--font-mono);font-size:11px;color:var(--muted);letter-spacing:4px;text-transform:uppercase;animation:ldPulse 1.2s ease-in-out infinite;}
@keyframes ldPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes ldFill{0%{width:0}100%{width:100%}}

/* ── CURSOR ── */
.cursor{width:10px;height:10px;background:var(--cyan);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transition:transform .1s;box-shadow:0 0 12px var(--cyan);}
.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(0,229,255,.5);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transition:transform .18s ease,width .2s,height .2s;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px 60px;backdrop-filter:blur(20px);background:rgba(6,9,16,.75);border-bottom:1px solid var(--border);}
.logo{font-family:var(--font-display);font-size:28px;letter-spacing:4px;color:var(--cyan);text-shadow:0 0 20px rgba(0,229,255,.6);}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center;}
.nav-links a{color:var(--muted);text-decoration:none;font-size:12px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;transition:color .2s;}
.nav-links a:hover{color:var(--cyan);}
.nav-links a.nav-highlight{color:var(--gold);border:1px solid rgba(251,191,36,.35);border-radius:20px;padding:5px 14px;font-weight:700;}
.nav-links a.nav-highlight:hover{background:rgba(251,191,36,.08);}

/* ── SECTION SHARED ── */
section{position:relative;z-index:1;padding:100px 60px;}
.section-label{font-family:var(--font-mono);font-size:12px;color:var(--cyan);letter-spacing:4px;text-transform:uppercase;margin-bottom:12px;opacity:.8;}
.section-title{font-family:var(--font-display);font-size:clamp(40px,5vw,64px);letter-spacing:2px;margin-bottom:60px;background:linear-gradient(135deg,#fff 60%,var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── WHATSAPP FLOAT ── */
.wa-float{position:fixed;bottom:30px;right:30px;z-index:1000;width:62px;height:62px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(37,211,102,.5);text-decoration:none;animation:waFloat 3s ease-in-out infinite;}
.wa-float:hover{transform:scale(1.12)!important;animation:none;box-shadow:0 6px 36px rgba(37,211,102,.8);}
.wa-float svg{width:34px;height:34px;fill:#fff;}
.wa-float-tip{position:absolute;right:74px;top:50%;transform:translateY(-50%);background:var(--bg2);border:1px solid rgba(37,211,102,.3);border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;color:#25d366;white-space:nowrap;font-family:var(--font-mono);opacity:0;pointer-events:none;transition:opacity .2s;}
.wa-float:hover .wa-float-tip{opacity:1;}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ── FOOTER ── */
footer{border-top:1px solid var(--border);padding:40px 60px;display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.footer-logo{font-family:var(--font-display);font-size:24px;letter-spacing:4px;color:var(--cyan);}
.footer-links{display:flex;gap:24px;}
.footer-links a{color:var(--muted);text-decoration:none;font-size:13px;transition:color .2s;}
.footer-links a:hover{color:var(--cyan);}
.footer-copy{font-size:12px;color:var(--muted);font-family:var(--font-mono);}

/* ── KEYFRAMES ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes ringPulse{0%,100%{opacity:.15;transform:scale(1)}50%{opacity:.3;transform:scale(1.03)}}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tagFloat{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes walkIn{0%{transform:scale(.25) translateY(100px);filter:blur(18px) brightness(.2);opacity:0}40%{filter:blur(5px) brightness(.6);opacity:.6}70%{transform:scale(1.05) translateY(-8px);filter:blur(0) brightness(1);opacity:1}85%{transform:scale(.98) translateY(2px)}100%{transform:scale(1) translateY(0);filter:blur(0) brightness(1);opacity:1}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

@media(max-width:900px){
  nav{padding:16px 24px;}
  .nav-links{display:none;}
  section{padding:70px 24px;}
  footer{padding:24px;flex-direction:column;gap:16px;text-align:center;}
  .wa-float{bottom:20px;right:20px;}
}