:root{
  --bg0:#03040a;
  --bg1:#070a14;
  --text:#eef1ff;
  --muted:#a9b0d4;

  --line:rgba(255,255,255,.10);
  --glass:rgba(255,255,255,.05);

  /* Futurista, porém sério: menos saturação e mais profundidade */
  --accent:#7b76ff;
  --accent2:#6ee7ff;

  --shadow: 0 26px 80px rgba(0,0,0,.62);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 70% 25%, rgba(123,118,255,.14), transparent 60%),
    radial-gradient(900px 700px at 22% 70%, rgba(110,231,255,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:.95em;
  color: rgba(238,241,255,.95);
}

.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
#stars{position:absolute; inset:0; width:100%; height:100%}
.grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 48% 22%, black 0 50%, transparent 75%);
  opacity:.26;
}
.noise{
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  opacity:.05;
  mix-blend-mode: overlay;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 25%, transparent 0 55%, rgba(0,0,0,.55) 85%);
  opacity:.55;
}

.topbar{
  position:sticky; top:0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px clamp(18px, 4vw, 48px);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}

.brand{
  display:flex; align-items:center; gap:14px;
  letter-spacing:-.4px;
}
.mark{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(135deg, rgba(123,118,255,.95), rgba(110,231,255,.85));
  box-shadow: 0 0 22px rgba(123,118,255,.24);
}
.name{
  font-weight:700;
  font-size: 1.28rem;   /* MAIS destaque */
  line-height:1;
}
.brand:hover .name{opacity:.96}

.nav{display:flex; gap:18px; color:var(--muted); font-weight:500}
.nav a{
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.nav a:hover{
  background:rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
  color:var(--text);
}

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding: 48px clamp(18px, 4vw, 48px) 70px;
}

.hero{padding: 46px 0 18px}

.meta{
  display:flex; align-items:center; gap:10px;
  color:var(--muted);
  font-weight:500;
}
.pill{
  padding: 7px 11px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius:999px;
}
.sep{opacity:.45}

h1{
  margin:16px 0 12px;
  font-size: clamp(36px, 5.4vw, 60px);
  line-height:1.02;
  letter-spacing:-1px;
}
.accent{
  background: linear-gradient(135deg, rgba(123,118,255,.98), rgba(110,231,255,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead{
  max-width: 75ch;
  color: var(--muted);
  font-size: 1.10rem;
  line-height:1.6;
}

.actions{display:flex; gap:12px; margin: 22px 0 26px; flex-wrap:wrap}
.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color:var(--text);
  padding: 11px 14px;
  border-radius: 14px;
  font-weight:650;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.07)}
.btn:active{transform: translateY(0px)}
.btn.primary{
  border-color: rgba(123,118,255,.42);
  background: linear-gradient(135deg, rgba(123,118,255,.20), rgba(110,231,255,.12));
  box-shadow: 0 14px 40px rgba(123,118,255,.12);
}
.btn.ghost{color:var(--muted)}

.panel{
  margin-top: 8px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 10px 14px;
  box-shadow: var(--shadow);
}
.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding: 10px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.row:first-child{border-top:0}
.k{color:var(--muted)}
.v{font-weight:600}
.link{
  color: rgba(238,241,255,.96);
  border-bottom: 1px solid rgba(110,231,255,.24);
}
.link:hover{border-bottom-color: rgba(110,231,255,.40)}

.contact{padding: 34px 0 10px}
.contactCard{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.contactCard h2{margin:0 0 8px; font-size: 1.6rem}
.muted{color:var(--muted); line-height:1.55}

.contactItem{
  margin-top: 12px;
  display:block;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 18px;
  padding: 14px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.contactItem:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(110,231,255,.24);
}

.footnote{
  margin-top: 16px;
  color: var(--muted);
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap;
}
.status{min-height:1.2em}

@media (max-width: 900px){
  .nav{display:none}
}