:root{
      --brand-dark: #0d1b2a; /* tom escuro do texto */
      --brand-accent: #b45c38; /* tom principal extraído do logo */
      --bg-100: #071016; /* fundo escuro */
      --card-bg: rgba(255,255,255,0.04);
    }
    html,body{height:100%;}
    body{
      background: linear-gradient(180deg, var(--bg-100) 0%, #04121a 100%);
      color: #e6eef5;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    /* Navbar */
    .navbar{background: transparent;}

    .nav-link{color:rgba(230,238,245,0.85) !important}
    .nav-link:hover{color:#fff !important}

    /* Hero */
    .hero{
      padding: 100px 0 80px;
      text-align: left;
    }
    .hero .kicker{
      display:inline-block;
      background: rgba(180,92,56,0.12);
      color: var(--brand-accent);
      padding:6px 10px;
      border-radius:6px;
      font-weight:600;
      margin-bottom:18px;
    }
    .hero h1{
      font-size: clamp(1.8rem, 3.6vw, 2.8rem);
      line-height:1.05;
      font-weight:700;
      color: #f5fbff;
    }
    .hero p.lead{color: rgba(230,238,245,0.85); font-size:1.05rem}

    /* Cards */
    .card-ghost{
      background: var(--card-bg);
      border: 1px solid rgba(255,255,255,0.04);
      color: #dbeaf8;
    }
    .card-ghost .card-title{color:#fff}
    .btn-accent{
      background: linear-gradient(90deg, var(--brand-accent), #9b4b30);
      border: none;
      color: #fff;
    }
    .card-ghost .logo-area{
      background-color: #fff;
      width: 70px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }


    section{padding:70px 0}
    .feature-icon{
      width:62px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background: rgba(255,255,255,0.03); font-size:1.4rem;
    }

    footer{padding:28px 0; color: rgba(230,238,245,0.65); background: transparent}

    /* Responsive tweaks */
    @media (max-width:767px){
      .hero{padding:60px 0}
      .navbar-brand img{height:48px; margin: 0 auto;}
      .hero h1{font-size:1.6rem}
    }

    /* Navbar toggler icon (white for dark navbar) moved from inline head style */
    .navbar-dark .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
    }