:root{
      --bg:#0f172a;          /* azul marinho escuro */
      --card:#0b1227;        /* variação para cards */
      --text:#e5e7eb;        /* cinza claro */
      --muted:#94a3b8;       /* cinza médio */
      --brand:#22c55e;       /* verde de destaque */
      --brand-2:#16a34a;     /* verde escuro hover */
      --accent:#60a5fa;      /* azul para detalhes */
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --radius:14px;
      --max: 1080px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: radial-gradient(1200px 600px at 80% -10%, rgba(96,165,250,.18), transparent 60%),
                  radial-gradient(1000px 500px at 10% 10%, rgba(34,197,94,.10), transparent 60%),
                  var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{color:inherit; text-decoration:none}
    img{max-width:100%; display:block}
    .container{max-width:var(--max); margin-inline:auto; padding:24px}
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(10px);
      background:linear-gradient(180deg, rgba(11,18,39,.85), rgba(11,18,39,.65));
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
    .brand{display:flex; align-items:center; gap:12px; font-weight:700}
    .brand .logo{
      width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
      background:linear-gradient(135deg, var(--accent), var(--brand)); color:#05121d; font-weight:800;
      box-shadow: var(--shadow);
    }
    .nav a.btn{padding:12px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.12)}
    .btn-primary{
      background:linear-gradient(135deg, var(--brand), #2dd4bf); color:#062012; font-weight:700;
      border:none;
      box-shadow:0 10px 20px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.25);
      transition:.2s transform ease, .2s filter ease;
    }
    .btn-primary:hover{transform:translateY(-1px); filter:saturate(110%)}
    .btn-outline{color:var(--text); background:transparent}
    /* Hero */
    .hero{padding:56px 24px 32px}
    .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:36px; align-items:center}
    .kicker{font-size:.9rem; letter-spacing:.12em; color:var(--muted); text-transform:uppercase}
    h1{
      font-size: clamp(2rem, 2.4vw + 1.2rem, 3.2rem);
      line-height:1.15; margin:.4rem 0 1rem; letter-spacing:.01em;
    }
    .lead{font-size:1.1rem; color:#cbd5e1; max-width:60ch}
    .hero-card{
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
      border:1px solid rgba(255,255,255,.10); border-radius: var(--radius); padding:22px; box-shadow:var(--shadow);
    }
    .bullets{display:grid; gap:10px; margin:18px 0}
    .bullets div{display:flex; align-items:flex-start; gap:10px}
    .check{
      width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg, var(--brand), #86efac);
      display:grid; place-items:center; color:#05210f; font-weight:900; flex:0 0 22px;
    }
    .cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
    .cta-row .note{color:var(--muted); font-size:.95rem}

    /* Sections */
    section{padding:48px 24px}
    .section-card{
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.00));
      border:1px solid rgba(255,255,255,.10); border-radius: var(--radius); box-shadow:var(--shadow);
      padding:24px;
    }
    h2{font-size: clamp(1.4rem, 1.1vw + 1rem, 2rem); margin:0 0 16px}
    .grid-3{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
    .grid-2{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px}
    .card{background:var(--card); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:18px}
    .muted{color:var(--muted)}
    .badge{
      display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:#d1fae5;
      background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.3); padding:6px 10px; border-radius:999px;
    }
    .avatar{
      width:120px; height:120px; border-radius:16px; overflow:hidden; border:2px solid rgba(255,255,255,.16)
    }
    .about{display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center}
    .testi{display:grid; gap:14px}
    blockquote{margin:0; font-style:italic; color:#e2e8f0}
    /* Footer */
    footer{padding:36px 24px; border-top:1px solid rgba(255,255,255,.08); color:var(--muted)}
    .footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:18px}
    .small{font-size:.9rem}

    /* Responsivo */
    @media (max-width: 900px){
      .hero-grid{grid-template-columns:1fr}
      .grid-3{grid-template-columns:1fr}
      .grid-2{grid-template-columns:1fr}
      .about{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
    }

    

    /* Acessibilidade de foco */
    :focus-visible{outline:2px dashed var(--accent); outline-offset:2px}