@import url('https://fonts.googleapis.com/css2?family=Sora:wght@700;800&family=Manrope:wght@400;500;600;700&display=swap');

/* Mesmo sistema visual da Optimuns (escuro premium como padrão), adaptado
   pra um hub de link única página — sem logo/foguete, é pessoal. */
:root{
  --brand:#0097FF;
  --brand-light:#5CC0FF;
  --brand-dark:#0066B3;
  --brand-rgb:0,151,255;

  --bg:#07090D;
  --bg-elevated:#0D1219;
  --text:#F5F8FB;
  --text-soft:rgba(245,248,251,.66);
  --text-dim:rgba(245,248,251,.42);
  --border:rgba(255,255,255,.1);
  --border-strong:rgba(255,255,255,.2);
  --shadow:0 26px 60px -28px rgba(0,0,0,.85);

  --display:'Sora',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="light"]{
  --bg:#F5F7FA;
  --bg-elevated:#FFFFFF;
  --text:#0A0D12;
  --text-soft:rgba(10,13,18,.64);
  --text-dim:rgba(10,13,18,.44);
  --border:#E1E8F0;
  --border-strong:#C9D6E4;
  --shadow:0 22px 50px -26px rgba(10,13,18,.2);
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem 1.2rem;
  position:relative;
  overflow-x:hidden;
  transition:background .3s var(--ease),color .3s var(--ease);
}

/* mesma luz ambiente do site da agência, mais discreta aqui */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 420px at 50% -10%, rgba(var(--brand-rgb),.16), transparent 70%),
    radial-gradient(480px 380px at 100% 100%, rgba(var(--brand-rgb),.08), transparent 72%);
}
:root[data-theme="light"] body::before{
  background: radial-gradient(560px 420px at 50% -10%, rgba(var(--brand-rgb),.1), transparent 70%);
}

.theme-toggle{
  position:fixed;top:1.2rem;right:1.2rem;
  font-size:.78rem;color:var(--text-soft);border:1px solid var(--border);
  border-radius:999px;padding:.42rem .9rem;background:transparent;
  transition:all .2s var(--ease);
}
.theme-toggle:hover{color:var(--text);border-color:var(--brand)}

.hub{
  width:100%;max-width:400px;text-align:center;
  opacity:0;transform:translateY(14px);
  animation:reveal .7s var(--ease) forwards;
}
@keyframes reveal{to{opacity:1;transform:none}}

.hub-photo{
  width:120px;height:120px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(var(--brand-rgb),.55);
  box-shadow:0 0 0 8px rgba(var(--brand-rgb),.08),0 20px 40px -18px rgba(var(--brand-rgb),.6);
  margin:0 auto 1.4rem;display:block;
}

.hub h1{
  font-family:var(--display);font-weight:800;font-size:1.5rem;letter-spacing:-.02em;
}

.hub .bio{
  color:var(--text-soft);font-size:.98rem;margin-top:.6rem;line-height:1.55;
}

.hub-links{margin-top:2.2rem;display:flex;flex-direction:column;gap:.85rem}

.hub-link{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 1.3rem;border-radius:14px;
  border:1px solid var(--border);
  background:linear-gradient(165deg,rgba(255,255,255,.03) 0%,transparent 55%),var(--bg-elevated);
  color:var(--text);text-decoration:none;font-weight:700;font-size:.98rem;
  box-shadow:var(--shadow);
  transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.hub-link:hover{
  border-color:var(--brand);transform:translateY(-2px);
  box-shadow:0 20px 44px -20px rgba(var(--brand-rgb),.5);
}

.hub-footer{margin-top:2.6rem;font-size:.8rem;color:var(--text-dim)}
.hub-footer a{color:var(--brand);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .hub{opacity:1;transform:none;animation:none}
  .hub-link:hover{transform:none}
}