:root{
  --bg:#f6f7fb;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --text:rgba(12,18,28,.92);
  --muted:rgba(12,18,28,.62);
  --line:rgba(12,18,28,.10);
  --shadow: 0 12px 30px rgba(10, 18, 35, .10);
  --radius:18px;

  --accent1:#4f46e5; /* indigo */
  --accent2:#06b6d4; /* cyan */
  --accent3:#22c55e; /* green */
  --max:1120px;
}


    *{ box-sizing:border-box; }
    html,body{ height:100%; }


body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* Camada decorativa fixa (não “repete” no scroll) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(79,70,229,.18), transparent 62%),
    radial-gradient(860px 520px at 82% 18%, rgba(6,182,212,.16), transparent 62%),
    radial-gradient(980px 620px at 68% 88%, rgba(34,197,94,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(246,247,251,1) 55%, rgba(246,247,251,1));
}

/* Pequenos ajustes de contraste (opcional, mas recomendado) */
.nav{
  background: rgba(246,247,251,.72);
  border-bottom:1px solid var(--line);
}
.logo{
  border:1px solid rgba(12,18,28,.12);
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,212,.55), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(79,70,229,.55), transparent 55%),
    rgba(255,255,255,.75);
}

.card{
  border:1px solid rgba(12,18,28,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70));
  box-shadow: var(--shadow);
}
.pill, .kicker, .link, .btn{
  border-color: rgba(12,18,28,.12);
}
.btn{
  background: rgba(255,255,255,.70);
  color: var(--text);
}
.btn:hover{ background: rgba(255,255,255,.92); }
.btn.primary{
  border-color: rgba(6,182,212,.30);
  background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(6,182,212,.16));
}



    a{ color:inherit; text-decoration:none; }
    .container{ max-width:var(--max); margin:0 auto; padding:0 20px; }

    /* Top nav */
    .nav{
      position:sticky; top:0; z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(7,10,19,.55);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0;
      gap:14px;
    }
    .brand{
      display:flex; align-items:center; gap:10px;
      font-weight:700; letter-spacing:.2px;
    }
    .logo{
      width:34px; height:34px; border-radius:12px;
      background:
        radial-gradient(circle at 30% 30%, rgba(34,211,238,.9), transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(124,58,237,.9), transparent 55%),
        rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.14);
      box-shadow: var(--shadow);
    }
    .nav-links{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
    .nav-links a{
      font-size:14px;
      color:var(--muted);
      padding:8px 10px;
      border-radius:12px;
      border:1px solid transparent;
    }
    .nav-links a:hover{
      color:var(--text);
      background:rgba(255,255,255,.06);
      border-color:rgba(255,255,255,.10);
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:10px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.06);
      color:var(--text);
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      font-weight:600;
      font-size:14px;
      cursor:pointer;
      user-select:none;
    }
    .btn:hover{ background:rgba(255,255,255,.10); }
    .btn.primary{
      border-color: rgba(34,211,238,.35);
      background: linear-gradient(135deg, rgba(124,58,237,.35), rgba(34,211,238,.20));
    }

    /* Hero */
    .hero{ padding:56px 0 28px; }
    .grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:22px;
      align-items:stretch;
    }
    @media (max-width: 920px){
      .grid{ grid-template-columns:1fr; }
    }

    .hero-main{ padding:28px; position:relative; overflow:hidden; }
    .hero-main:before{
      content:"";
      position:absolute; inset:-2px;
      background:
        radial-gradient(500px 220px at 20% 20%, rgba(34,211,238,.20), transparent 60%),
        radial-gradient(540px 240px at 70% 60%, rgba(124,58,237,.18), transparent 62%),
        radial-gradient(500px 220px at 30% 90%, rgba(52,211,153,.12), transparent 60%);
      pointer-events:none;
      filter:saturate(1.1);
    }
    .hero-main > *{ position:relative; }

    .kicker{
      display:inline-flex; gap:10px; align-items:center;
      color:var(--muted);
      font-size:13px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
    }
    .dot{
      width:8px; height:8px; border-radius:99px;
      background:linear-gradient(135deg, var(--accent2), var(--accent1));
      box-shadow: 0 0 0 4px rgba(34,211,238,.12);
    }
    h1{
      margin:16px 0 10px;
      font-size:48px;
      line-height:1.05;
      letter-spacing:-.8px;
    }
    @media (max-width: 520px){
      h1{ font-size:38px; }
    }
    .subtitle{
      margin:0;
      color:var(--muted);
      font-size:16px;
      line-height:1.6;
      max-width: 62ch;
    }
    .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
    .quick{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .quick .row{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
      padding:12px 12px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      border-radius:14px;
    }
    .label{ color:var(--muted); font-size:13px; }
    .value{ font-weight:700; }
    .mini{
      display:flex; gap:8px; flex-wrap:wrap;
      margin-top:6px;
    }
    .pill{
      display:inline-flex;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      color:rgba(255,255,255,.80);
      font-size:12px;
    }

    /* Sections */
    section{ padding:28px 0; }
    .section-title{
      display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      margin-bottom:14px;
    }
    .section-title h2{
      margin:0;
      font-size:20px;
      letter-spacing:-.2px;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      font-size:13px;
    }

    .cols-3{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:16px;
    }
    @media (max-width: 920px){ .cols-3{ grid-template-columns:1fr; } }

    .item{
      padding:18px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
    }
    .item h3{ margin:0 0 8px; font-size:15px; }
    .item p{ margin:0; color:var(--muted); line-height:1.6; font-size:14px; }
    .item .meta{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

    .projects{
      display:grid;
      grid-template-columns: repeat(2, 1fr);
      gap:16px;
    }
    @media (max-width: 920px){ .projects{ grid-template-columns:1fr; } }

    .project{
      padding:18px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      position:relative;
      overflow:hidden;
    }
    .project:before{
      content:"";
      position:absolute; inset:-1px;
      background: radial-gradient(420px 220px at 15% 15%, rgba(34,211,238,.12), transparent 60%),
                  radial-gradient(420px 220px at 85% 60%, rgba(124,58,237,.10), transparent 62%);
      pointer-events:none;
    }
    .project > *{ position:relative; }
    .project h3{ margin:0 0 8px; font-size:16px; }
    .project p{ margin:0; color:var(--muted); line-height:1.6; font-size:14px; }
    .project .links{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }
    .link{
      font-size:13px;
      color:rgba(255,255,255,.85);
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      padding:8px 10px;
      border-radius:12px;
    }
    .link:hover{ background:rgba(255,255,255,.08); }

    /* Contact */
    .contact{
      padding:22px;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
      align-items:stretch;
    }
    @media (max-width: 920px){ .contact{ grid-template-columns:1fr; } }
    .contact .box{ padding:18px; border-radius: var(--radius); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }
    .contact h3{ margin:0 0 8px; font-size:16px; }
    .contact p{ margin:0; color:var(--muted); line-height:1.6; font-size:14px; }
    .form{
      display:grid; gap:10px;
      margin-top:12px;
    }
    input, textarea{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.20);
      color:var(--text);
      outline:none;
      font-size:14px;
    }
    input::placeholder, textarea::placeholder{ color:rgba(255,255,255,.45); }
    textarea{ min-height:110px; resize:vertical; }
    .fine{
      margin-top:10px;
      font-size:12px;
      color:rgba(255,255,255,.55);
    }

    footer{
      padding:26px 0 46px;
      color:rgba(255,255,255,.55);
      font-size:13px;
      border-top:1px solid rgba(255,255,255,.10);
      background: rgba(0,0,0,.10);
      margin-top:20px;
    }

    /* Reveal on scroll */
    .reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.show{ opacity:1; transform:none; }

    /* Mobile menu */
    .hamburger{ display:none; }
    @media (max-width: 720px){
      .nav-links{ display:none; width:100%; }
      .nav-links.open{ display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:0 0 12px; }
      .nav-links a{ width:100%; }
      .hamburger{ display:inline-flex; }
    }

/* ===== Light theme overrides (must be last) ===== */

:root{
  --bg:#f6f7fb;
  --panel:rgba(255,255,255,.78);
  --panel2:rgba(255,255,255,.92);
  --text:rgba(12,18,28,.92);
  --muted:rgba(12,18,28,.62);
  --line:rgba(12,18,28,.10);
  --shadow: 0 12px 30px rgba(10, 18, 35, .10);
  --radius:18px;
  --accent1:#4f46e5;
  --accent2:#06b6d4;
  --accent3:#22c55e;
  --max:1120px;
}

body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* fixed decorative layer to avoid "repeat" effect */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 18% 12%, rgba(79,70,229,.18), transparent 62%),
    radial-gradient(860px 520px at 82% 18%, rgba(6,182,212,.16), transparent 62%),
    radial-gradient(980px 620px at 68% 88%, rgba(34,197,94,.12), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.70), rgba(246,247,251,1) 55%, rgba(246,247,251,1));
}

/* override dark nav */
.nav{
  background: rgba(246,247,251,.72) !important;
  border-bottom:1px solid var(--line) !important;
}

/* cards */
.card{
  border:1px solid rgba(12,18,28,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.70)) !important;
  box-shadow: var(--shadow) !important;
}

/* logo */
.logo{
  border:1px solid rgba(12,18,28,.12) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(6,182,212,.45), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(79,70,229,.45), transparent 55%),
    rgba(255,255,255,.85) !important;
}

/* pills/buttons/links */
.pill{
  background: rgba(255,255,255,.70) !important;
  color: rgba(12,18,28,.78) !important;
  border-color: rgba(12,18,28,.12) !important;
}
.kicker, .link, .btn{
  border-color: rgba(12,18,28,.12) !important;
}

.btn{
  background: rgba(255,255,255,.70) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 20px rgba(10,18,35,.10) !important;
}
.btn:hover{ background: rgba(255,255,255,.92) !important; }

.btn.primary{
  border-color: rgba(6,182,212,.30) !important;
  background: linear-gradient(135deg, rgba(79,70,229,.22), rgba(6,182,212,.16)) !important;
}

/* inputs should not be dark */
input, textarea{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(12,18,28,.12) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder{
  color: rgba(12,18,28,.45) !important;
}

/* footer */
footer{
  color: rgba(12,18,28,.55) !important;
  border-top: 1px solid rgba(12,18,28,.10) !important;
  background: rgba(255,255,255,.55) !important;
}