:root{
    --bg-1:#0a1022; --bg-2:#0a0f1c;
    --text:#eaf2ff; --muted:#a6b3cb;
    --brand:#31d0a8; --brand-2:#1ec2ff; --accent:#7b61ff;
    --glass:rgba(255,255,255,.06); --glass-b:rgba(255,255,255,.16);
    --shadow:0 12px 40px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; color:var(--text);
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
    background:var(--bg-1); overflow-x:hidden;
  }
  
  /* container com respiro nas laterais */
  .container{
    width:min(1200px, 90vw);
    margin:0 auto;
    padding-inline:clamp(16px, 3.5vw, 28px);
  }
  
  /* Backgrounds */
  .bg{position:fixed; inset:0; z-index:-2}
  .fx-gradient{
    background:
      radial-gradient(1200px 800px at -10% -5%, rgba(49,208,168,.28), transparent 60%),
      radial-gradient(900px 700px at 110% -10%, rgba(30,194,255,.24), transparent 55%),
      radial-gradient(1100px 900px at 40% 120%, rgba(123,97,255,.18), transparent 60%),
      linear-gradient(180deg, var(--bg-2), var(--bg-1));
    animation:floatBg 24s ease-in-out infinite alternate;
    filter:saturate(115%);
  }
  @keyframes floatBg{to{transform:translateY(-18px)}}
  
  .fx-noise{
    z-index:-1; pointer-events:none; opacity:.35; mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 .04 .08 .12 .12 .08 0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  
  /* acessibilidade */
  @media (prefers-reduced-motion: reduce){
    .fx-gradient{animation:none}
    .orb{animation:none}
  }