:root{
      /* === Ajuste aqui para bater 100% com o padrão da marca === */
      --bg: #0b0f14;          /* fundo escuro principal */
      --surface: #0f1621;     /* cards/superfícies */
      --surface-2: #111b28;   /* variação */
      --text: #e9eef6;        /* texto */
      --muted: rgba(233, 238, 246, .72);

      --brand: #f7b500;       /* cor de destaque (Happy/amarelo) */
      --brand-2: #ffcf44;     /* variação */
      --stroke: rgba(255,255,255,.10);

      --radius: 18px;
      --shadow: 0 18px 45px rgba(0,0,0,.35);
    }

    body{
      background: radial-gradient(1200px 600px at 20% -10%, rgba(247,181,0,.18), transparent 55%),
                  radial-gradient(900px 500px at 90% 10%, rgba(255,255,255,.06), transparent 55%),
                  var(--bg);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    a{ color: inherit; }
    .text-muted-soft{ color: var(--muted) !important; }

    /* Navbar */
    .nav-blur{
      background: rgba(11,15,20,.65);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--stroke);
    }
    .brand-dot{
      display:inline-block; width:10px; height:10px; border-radius:999px;
      background: var(--brand);
      box-shadow: 0 0 0 6px rgba(247,181,0,.12);
      margin-left: 6px;
      vertical-align: middle;
    }

    /* Buttons */
    .btn-brand{
      background: linear-gradient(135deg, var(--brand), var(--brand-2));
      border: 0;
      color: #131313;
      font-weight: 700;
      border-radius: 999px;
      padding: .85rem 1.2rem;
      box-shadow: 0 12px 26px rgba(247,181,0,.18);
    }
    .btn-brand:hover{ filter: brightness(1.03); transform: translateY(-1px); }
    .btn-outline-soft{
      border: 1px solid var(--stroke);
      color: var(--text);
      border-radius: 999px;
      padding: .85rem 1.2rem;
      background: rgba(255,255,255,.02);
    }
    .btn-outline-soft:hover{
      background: rgba(255,255,255,.05);
    }

    /* Hero */
    .hero{
      padding: 6.5rem 0 2.5rem;
    }
    .badge-guide{
      display: inline-flex; gap:.5rem; align-items:center;
      background: rgba(247,181,0,.12);
      border: 1px solid rgba(247,181,0,.28);
      color: var(--text);
      padding: .45rem .75rem;
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: .2px;
    }
    .hero h1{
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.08;
      margin-top: 1rem;
    }
    .hero-lead{
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 56ch;
      margin-top: 1rem;
    }

    /* Feature list (benefícios no hero) */
    .feature-list{
      margin-top: 1.25rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: .65rem;
    }
    .feature-item{
      display:flex; gap:.7rem; align-items:flex-start;
      color: var(--text);
      background: rgba(255,255,255,.03);
      border: 1px solid var(--stroke);
      border-radius: 14px;
      padding: .85rem .95rem;
    }
    .feature-item i{
      color: var(--brand);
      font-size: 1.2rem;
      margin-top: .1rem;
    }
    @media (min-width: 992px){
      .feature-list{ grid-template-columns: 1fr 1fr; }
    }

    /* Cards / Sections */
    .section{
      padding: 2.3rem 0;
    }
    .section-title{
      font-weight: 800;
      letter-spacing: -0.3px;
    }
    .content-card{
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .content-card .card-body{
      padding: 1.4rem 1.35rem;
    }

    /* Image placeholder */
    .img-box{
      background: linear-gradient(135deg, rgba(247,181,0,.12), rgba(255,255,255,.04));
      border: 1px solid var(--stroke);
      border-radius: var(--radius);
      min-height: 240px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding: 1rem;
      color: var(--muted);
    }
    .img-box small{ display:block; margin-top:.35rem; opacity:.9; }

    /* CTA block */
    .cta{
      padding: 2.8rem 0 3rem;
    }
    .cta-card{
      border-radius: 22px;
      padding: 1.6rem;
      background:
        radial-gradient(900px 400px at 15% 10%, rgba(247,181,0,.22), transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border: 1px solid rgba(247,181,0,.22);
      box-shadow: var(--shadow);
    }

    /* Quick access */
    .quick-access{
      border-top: 1px solid var(--stroke);
      padding-top: 1.2rem;
      margin-top: 2rem;
      color: var(--muted);
    }
    .quick-access a{
      text-decoration: none;
      border: 1px solid var(--stroke);
      background: rgba(255,255,255,.02);
      padding: .5rem .75rem;
      border-radius: 999px;
      display: inline-flex;
      gap: .45rem;
      align-items: center;
      margin: .35rem .35rem 0 0;
      color: var(--text);
    }
    .quick-access a:hover{ background: rgba(255,255,255,.05); }

    /* Footer */
    footer{
      padding: 2rem 0 3rem;
      color: var(--muted);
      border-top: 1px solid var(--stroke);
      margin-top: 2.5rem;
    }