/* styles.css - base visual cinema 5D */
:root{
  --bg:#07070b;
  --emerald:#0fb07a;
  --deepblue:#0a3a6b;
  --metal:#bfc6cc;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.04);
  --accent: linear-gradient(135deg,var(--emerald),#00a6d6);
  --glass-border: rgba(255,255,255,0.06);
  --radius:14px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(10,30,60,0.25), transparent),
              radial-gradient(900px 400px at 90% 90%, rgba(0,160,214,0.06), transparent),
              var(--bg);
  color:#e9eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(6px);
}
.brand{display:flex;align-items:center;gap:12px}
.logo-3d{
  width:56px;height:56px;border-radius:12px;
  background: linear-gradient(135deg,var(--emerald),#00a6d6);
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), inset 0 -6px 18px rgba(255,255,255,0.06);
  transform: perspective(800px) rotateX(6deg) rotateY(-8deg);
  filter: drop-shadow(0 10px 30px rgba(0,160,214,0.12));
}
.brand-text{font-weight:700;font-size:20px;color:var(--metal);letter-spacing:0.6px}
.nav a{color:rgba(255,255,255,0.75);margin-left:18px;text-decoration:none}
.nav .cta-link{padding:10px 14px;border-radius:10px;background:var(--accent);color:#fff;box-shadow:0 8px 30px rgba(15,176,122,0.12)}

/* Hero */
.hero{position:relative;padding:64px 32px;display:flex;gap:32px;align-items:flex-start}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-image:
  radial-gradient(600px 300px at 20% 20%, rgba(15,176,122,0.06), transparent),
  radial-gradient(500px 250px at 80% 80%, rgba(0,160,214,0.04), transparent);
  filter: blur(18px);opacity:0.9}
.hero-content{z-index:2;max-width:640px}
.hero h1{font-size:34px;margin:0 0 12px 0;line-height:1.05;color:#fff;text-shadow:0 6px 30px rgba(0,0,0,0.6)}
.lead{color:rgba(255,255,255,0.78);margin-bottom:18px}
.btn-primary{
  display:inline-block;padding:14px 22px;border-radius:12px;background:var(--accent);
  color:#fff;font-weight:700;text-decoration:none;box-shadow:0 12px 40px rgba(0,160,214,0.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,160,214,0.18)}

/* Mockups area */
.mockups{margin-left:auto;display:flex;flex-direction:column;gap:18px;z-index:2}
.device{width:220px;border-radius:22px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);padding:12px;transform:translateZ(0)}
.device.landscape{width:520px;border-radius:18px}
.screen{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;min-height:380px;position:relative;overflow:hidden}
.screen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sim-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:10px;border-radius:12px;border:1px solid var(--glass-border)}
.sim-card textarea{width:100%;height:72px;border-radius:8px;padding:8px;background:transparent;border:1px dashed rgba(255,255,255,0.04);color:#fff}
.row{display:flex;gap:8px;margin-top:8px}
.row input{flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
.btn-ghost{padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:#fff}

/* Chart placeholder */
.chart-placeholder{height:180px;border-radius:12px;background:linear-gradient(180deg, rgba(10,30,60,0.6), rgba(0,0,0,0.4));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.7);font-weight:600;box-shadow:inset 0 6px 18px rgba(0,0,0,0.6)}

/* Sections */
.container{max-width:1100px;margin:0 auto;padding:40px 24px}
.simulacao{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border-top:1px solid rgba(255,255,255,0.02)}
.sim-form textarea{width:100%;height:120px;border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff;margin-bottom:12px}
.sim-form input{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff;margin-bottom:12px}
.form-actions{display:flex;gap:12px}

/* Vantagens */
.vantagens .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;list-style:none;padding:0;margin:24px 0}
.vantagens li{background:var(--glass);padding:18px;border-radius:12px;display:flex;align-items:center;gap:12px;border:1px solid rgba(255,255,255,0.03)}
.icon-3d{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--emerald),#00a6d6);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 10px 30px rgba(0,160,214,0.08)}

/* Footer */
.site-footer{padding:20px 32px;border-top:1px solid rgba(255,255,255,0.02);color:rgba(255,255,255,0.6)}

/* Responsive */
@media (max-width:980px){
  .hero{flex-direction:column}
  .mockups{flex-direction:row;justify-content:center}
  .device.landscape{display:none}
}
@media (max-width:520px){
  .brand-text{display:none}
  .device.portrait{width:180px}
  .hero h1{font-size:22px}
}