:root {
  --bg: #0b0216;
  --glass: rgba(255,255,255,0.05);
  --accent1: #8a2be2;
  --accent2: #ff66b2;
  --neon: linear-gradient(90deg,var(--accent1),var(--accent2));
  --glass-border: rgba(255,255,255,0.06);
  --text: #eae6f8;
}

*{
  box-sizing:border-box;
}

html,body{
  height:100%;
  margin:0;
  background:
  radial-gradient(1200px 600px at 10% 10%, rgba(138,43,226,0.12), transparent 60%),
  radial-gradient(900px 500px at 90% 90%, rgba(255,102,178,0.08), transparent 60%),
  var(--bg);

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--text);
}

.wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* HEADER */

header{
  position:fixed;
  top:18px;
  left:0;
  right:0;
  z-index:40;
  display:flex;
  justify-content:center;
  padding:8px 24px;
  position: fixed;
  top: 18px;
}

/* NAVBAR */

.navglass{

  width:100%;
  max-width:900px;

  background:linear-gradient(
  180deg,
  rgba(255,255,255,0.03),
  rgba(255,255,255,0.01)
  );

  border:1px solid var(--glass-border);

  padding:12px 20px;

  border-radius:16px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  backdrop-filter:blur(10px);

}

/* BRAND */

.brand{
  display:flex;
  align-items:center;
}

.site-logo{
  height:46px;
  width:auto;
  border-radius:10px;
  box-shadow:0 4px 20px rgba(138,43,226,0.15);
  transition:.3s;
}

.site-logo:hover{
  transform:scale(1.05);
  box-shadow:0 6px 30px rgba(255,102,178,0.25);
}

.logo-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}

/* NAV */

nav{
  display:flex;
  align-items:center;
  gap:24px;
}

nav a{

  text-decoration:none;
  color:var(--text);

  font-weight:600;

  padding:8px 12px;

  border-radius:10px;

  transition:.25s;

}

nav a:hover{

  background:linear-gradient(
  90deg,
  rgba(138,43,226,0.12),
  rgba(255,102,178,0.08)
  );

  transform:translateY(-2px);

}

nav a.active{
  font-weight:700;
  position:relative;
}

nav a.active::after{

  content:'';
  position:absolute;

  left:6px;
  right:6px;
  bottom:-8px;

  height:4px;

  border-radius:6px;

  background:linear-gradient(
  90deg,
  var(--accent2),
  var(--accent1)
  );

  filter:blur(6px);

}

/* HERO */

.hero{

  display:flex;
  align-items:center;
  justify-content:center;

  gap:50px;

  padding:140px 6vw 60px;

  flex-wrap:wrap;

}

.hero-left{

  flex:1;
  max-width:620px;

}

h1{

  font-family:Orbitron,Inter;

  font-size:48px;

  line-height:1.05;

  margin:0 0 14px;

  background:linear-gradient(
  90deg,
  var(--accent2),
  var(--accent1)
  );

  -webkit-background-clip:text;
  color:transparent;

}

.lead{

  font-size:18px;

  margin:14px 0 24px;

  color:rgba(234,230,248,0.85);

}

.cta-row{

  display:flex;

  gap:14px;

}

.btn{

  padding:12px 18px;

  border-radius:12px;

  font-weight:700;

  border:none;

  cursor:pointer;

}

.btn-primary{

  background:linear-gradient(
  90deg,
  var(--accent1),
  var(--accent2)
  );

  color:#fff;

  box-shadow:0 10px 30px rgba(138,43,226,0.2);

}

.btn-ghost{

  background:transparent;

  border:1px solid rgba(255,255,255,0.08);

  color:var(--text);

}

/* 3D VIEWER */

.hero-right{

  flex:1;

  display:flex;

  justify-content:center;

}

.spline-wrap{

  width:100%;
  max-width:620px;

  height:520px;

  border-radius:18px;

  overflow:hidden;

  border:1px solid rgba(255,255,255,0.05);

  box-shadow:0 20px 80px rgba(8,3,20,0.7);

}

spline-viewer{

  width:100%;
  height:100%;

  display:block;

}

/* INFO */

section.info{

  padding:70px 6vw;

  background:linear-gradient(
  180deg,
  rgba(255,102,178,0.03),
  transparent 70%
  );

}

.card{

  background:var(--glass);

  border:1px solid var(--glass-border);

  padding:28px;

  border-radius:16px;

  max-width:980px;

  margin:auto;

}

.card h2{

  font-family:Orbitron;

  margin-top:0;

}

.muted{

  color:rgba(234,230,248,0.75);

  line-height:1.6;

}

/* FOOTER */

footer{

  margin-top:auto;

  background:rgba(255,255,255,0.03);

  border-top:1px solid rgba(255,255,255,0.05);

}

.footer-container{

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

  gap:30px;

  padding:40px 6vw;

  text-align:center;

}

.footer-container h4{

  font-family:Orbitron;

  font-size:16px;

  background:var(--neon);

  -webkit-background-clip:text;

  color:transparent;

  margin-bottom:12px;

}

.footer-container a{

  display:block;

  margin:4px 0;

  text-decoration:none;

  color:rgba(245,242,255,0.88);

  transition:.25s;

}

.footer-container a:hover{

  color:#fff;

  text-shadow:0 0 8px rgba(255,102,178,0.7);

}

.footer-bottom{

  text-align:center;

  padding:14px;

  font-size:14px;

  background:rgba(255,255,255,0.02);

  color:rgba(255,255,255,0.7);

}

/* SOCIAL */

.social-icons{

  display:flex;

  justify-content:center;

  gap:20px;

}

.social-icons img{

  width:26px;

  filter:brightness(0) invert(1);

  opacity:.85;

  transition:.25s;

}

.social-icons img:hover{

  transform:scale(1.2);

  opacity:1;

}

/* RESPONSIVO TABLET */

@media (max-width:1024px){

.hero{

flex-direction:column;
text-align:center;

}

.hero-left{
max-width:100%;
}

.cta-row{
justify-content:center;
}

.spline-wrap{
height:420px;
}

}

/* RESPONSIVO MOBILE */

/* ===================================
HEADER RESPONSIVO PROFISSIONAL
=================================== */

.menu-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
}

.menu-toggle span{
width:26px;
height:3px;
background:var(--text);
border-radius:3px;
transition:.3s;
}

/* MOBILE */

@media (max-width:768px){

header{
top:12px;
padding:10px 14px;
}

.navglass{
max-width:100%;
}

/* BOTÃO MENU */

.menu-toggle{
display:flex;
}

/* MENU ESCONDIDO */

nav{

position:absolute;

top:80px;
left:0;

width:100%;

flex-direction:column;

background:rgba(10,4,20,0.95);

backdrop-filter:blur(14px);

border-top:1px solid rgba(255,255,255,0.05);

padding:25px 0;

gap:18px;

opacity:0;

transform:translateY(-20px);

pointer-events:none;

transition:.35s;

}

/* MENU ABERTO */

nav.active{

opacity:1;

transform:translateY(0);

pointer-events:auto;

}

/* LINKS */

nav a{

font-size:18px;

width:100%;

text-align:center;

}

/* HERO MOBILE */

.hero{

flex-direction:column;

text-align:center;

gap:30px;

padding-top:120px;

}

.hero-left{
max-width:100%;
}

.cta-row{
justify-content:center;
flex-wrap:wrap;
}

h1{
font-size:30px;
}

.lead{
font-size:16px;
}

/* SPLINE */

.spline-wrap{

height:320px;

max-width:100%;

}

}