
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
:root{
--primary:#F97316;--bg:#0F172A;--bg2:#111827;--text:#F8FAFC;--muted:#CBD5E1;
--glass:rgba(255,255,255,.08);--border:rgba(255,255,255,.12);
--radius:24px;--shadow:0 20px 50px rgba(0,0,0,.35);--container:1200px;}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Poppins,sans-serif;color:var(--text);background:
radial-gradient(circle at top,#1e3a8a22,transparent 35%),
linear-gradient(180deg,var(--bg),var(--bg2));overflow-x:hidden;min-height:100vh}
.background{position:fixed;inset:0;z-index:-2}
.grid{position:absolute;inset:0;background-image:
linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
background-size:42px 42px}
.glow{position:absolute;left:50%;top:-280px;transform:translateX(-50%);
width:700px;height:700px;border-radius:50%;
background:radial-gradient(circle,var(--primary),transparent 70%);
filter:blur(170px);opacity:.16}
.wrapper{width:min(92%,var(--container));margin:auto}
header{text-align:center;padding:32px 0}
.logo{width:min(160px,35vw);display:block;margin:auto}
.company-name{font-size:clamp(2rem,6vw,3.7rem);font-weight:800;margin:20px 0}
.company-name span{color:var(--primary)}
.badge{display:inline-flex;gap:10px;align-items:center;padding:12px 22px;
background:#ffffff10;border:1px solid var(--border);border-radius:999px;backdrop-filter:blur(12px)}
.badge-dot{width:10px;height:10px;border-radius:50%;background:var(--primary)}
.subtitle{max-width:760px;margin:20px auto;color:var(--muted);line-height:1.8}
.hero{display:flex;justify-content:center;align-items:center;min-height:55vh;padding:20px 0}
.scene{position:relative;width:100%;max-width:1100px;aspect-ratio:16/9}
.construction-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:3}
.particles{position:absolute;inset:0;pointer-events:none;z-index:5}
.particles span{position:absolute;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4)}
.contact-card{max-width:820px;margin:40px auto;padding:34px;background:var(--glass);
border:1px solid var(--border);border-radius:var(--radius);
backdrop-filter:blur(16px);box-shadow:var(--shadow);
opacity:0;transform:translateY(35px);transition:.8s}
.contact-card.visible{opacity:1;transform:none}
.contact-card h2{text-align:center;color:var(--primary);margin-bottom:30px}
.contact-grid{display:grid;gap:24px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.contact-icon{width:52px;height:52px;border-radius:14px;background:#ffffff10;
display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-content p,.contact-content a{color:var(--muted);line-height:1.8;text-decoration:none;overflow-wrap:anywhere}
footer{text-align:center;padding:30px;color:#94A3B8}
.float-btn{position:fixed;bottom:22px;width:60px;height:60px;border-radius:50%;
display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;
box-shadow:var(--shadow);z-index:999}
.call-btn{left:20px;background:var(--primary)}
.whatsapp-btn{right:20px;background:#22C55E}
@media(min-width:768px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
.scene{aspect-ratio:1/1}
.contact-card{padding:24px}
.subtitle{font-size:.95rem}
}
