/* ============================================
   LUIZ — Internet, Negócios & Performance
   Global Stylesheet
   (estrutura inspirada no site da Lumière Odontologia,
    estilo inspirado no site pessoal "Luiz — Internet & Negócios")
   ============================================ */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --accent:#c7cbdb;
  --accent-light:#e6e8f1;
  --accent-dark:#8d92a8;
  --dark:#03030a;
  --dark2:#07070f;
  --dark3:#111120;
  --white:#f2f4fa;
  --off:#e8eaf2;
  --gray:#7d8195;
  --font-display:'Space Grotesk',sans-serif;
  --font-sans:'Inter',sans-serif;
  --font-accent:'Sora',sans-serif;
  --max-width:1200px;
  --section-padding:100px 5%;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-sans);background:var(--dark);color:var(--white);overflow-x:hidden;position:relative}

/* ============================================
   COSMOS BACKGROUND (canvas + grain)
   ============================================ */
.grain-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:180px 180px}
#cosmos{position:fixed;inset:0;z-index:0;pointer-events:none}
.site-wrapper{position:relative;z-index:2}

/* ============================================
   NAV
   ============================================ */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(3,3,10,0.82);backdrop-filter:blur(16px) saturate(120%);border-bottom:1px solid rgba(199,203,219,0.12);padding:0 5%}
.nav-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--white);letter-spacing:0.5px;text-decoration:none}
.logo span{color:var(--accent)}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:rgba(255,255,255,0.65);text-decoration:none;font-size:12px;letter-spacing:1px;text-transform:uppercase;transition:color 0.3s}
.nav-links a:hover{color:var(--accent)}
.nav-cta{background:var(--accent);color:var(--dark);padding:10px 24px;border-radius:8px;font-size:13px;font-weight:600;text-decoration:none;letter-spacing:0.3px;transition:all 0.3s}
.nav-cta:hover{background:var(--accent-light);transform:translateY(-1px)}

/* ============================================
   BOTÕES GLOBAIS
   ============================================ */
.btn-primary{background:linear-gradient(135deg,#eef0f6 0%,#c5c9da 100%);color:var(--dark);padding:15px 32px;border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;letter-spacing:0.3px;transition:all 0.3s;display:inline-block;box-shadow:0 18px 40px -16px rgba(0,0,0,0.55)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 50px -16px rgba(0,0,0,0.6)}
.btn-outline{border:1px solid rgba(255,255,255,0.18);background:rgba(180,184,204,0.06);color:var(--white);padding:15px 32px;border-radius:10px;font-size:14px;font-weight:400;text-decoration:none;letter-spacing:0.3px;transition:all 0.3s;display:inline-block}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(180,184,204,0.12)}

/* ============================================
   ELEMENTOS TIPOGRÁFICOS GLOBAIS
   ============================================ */
.section-tag{font-size:11px;letter-spacing:3px;color:var(--accent-dark);text-transform:uppercase;margin-bottom:16px;display:block}
h2{font-family:var(--font-display);font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin-bottom:20px;color:var(--white)}
.section-divider{width:48px;height:1px;background:var(--accent);margin:20px 0;opacity:0.6}

/* ============================================
   SCROLL REVEAL
   ============================================ */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1)}
[data-reveal].visible{opacity:1;transform:translateY(0)}

/* ============================================
   FOOTER GLOBAL
   ============================================ */
footer{position:relative;background:var(--dark2);border-top:1px solid rgba(199,203,219,0.1);padding:64px 5% 32px}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:48px}
.footer-brand .logo{font-size:22px;display:block;margin-bottom:16px}
.footer-desc{font-size:14px;color:rgba(255,255,255,0.45);line-height:1.8;margin-bottom:24px}
.footer-contact p{font-size:13px;color:rgba(255,255,255,0.55);margin-bottom:8px;line-height:1.6}
.footer-contact strong{color:rgba(255,255,255,0.85)}
.footer-col h4{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-dark);margin-bottom:20px}
.footer-col ul{list-style:none}
.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{font-size:13px;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.3s}
.footer-col ul li a:hover{color:var(--white)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:32px;border-top:1px solid rgba(255,255,255,0.06)}
.footer-copy{font-size:12px;color:rgba(255,255,255,0.32)}
.footer-links{display:flex;gap:24px}
.footer-links a{font-size:12px;color:rgba(255,255,255,0.32);text-decoration:none;transition:color 0.3s}
.footer-links a:hover{color:var(--white)}

/* ============================================
   WHATSAPP FLUTUANTE
   ============================================ */
.whatsapp-float{position:fixed;bottom:28px;right:28px;z-index:200;background:#25D366;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,0.3);transition:transform 0.3s;text-decoration:none}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float svg{width:28px;height:28px;fill:white}

/* ============================================
   PLACEHOLDER DE IMAGEM
   ============================================ */
.img-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;height:100%}
.img-placeholder span{font-size:10px;color:rgba(199,203,219,0.55);letter-spacing:2px;text-transform:uppercase}

/* ============================================
   ANIMAÇÃO FADE UP
   ============================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;animation:fadeUp 0.7s ease forwards}

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:900px){
  .nav-links{display:none}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .footer-top{grid-template-columns:1fr}
}