:root{
      --bg:#0f1724; /* fundo escuro */
      --card:#0b1220;
      --accent1:#9fd76d; /* laranja */
      --accent2:#7c5cff; /* roxo */
      --muted:#98a0b3;
      --glass: rgba(255,255,255,0.04);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body  {
        height:100;
        margin:30;
        font-family:Inter,system-ui,Segoe UI,Roboto,"Helvetica Neue",Arial;
        color:D;
        background:linear-gradient(180deg,var(--bg) 0%, #C68B35 100%);}

    /* container central */
    .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px}

    .card{
      width:1100px;
      max-width:96%;
      background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:var(--radius);
      padding:40px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:32px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6);
      border:1px solid rgba(255,255,255,0.03);
    }

    /* coluna esquerda com texto */
    .hero .kicker {

    color:#fff;
    font-weight:190;
    letter-spacing:1px;
    text-transform:uppercase;
    padding-left: 4px;
    font-size: 30px;
    

}
    
    .hero img{/*Titulo ALTERAR QUANDO QUISER*/
        font-family:'Playfair Display', serif;
        padding-left:10px ;
        padding-top:5px ;
        width: 350px;
        
       
    }
    .hero p{
        padding-top: 35px;
        color:#fff;
        margin:0 0 22px;
        font-size:22px;
        max-width:60;
        
        padding-left: 9px;
        font-size: 19px;
    
    }

    /* texto com gradiente */
    .gradiente{background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}

    /* botões */
    .controls {display:flex;gap:14px; padding-top: 1px;}
    .btn{
      padding-top:31px;
      border-radius:12px;
      border:0;
      cursor:pointer;
      font-weight:900;
      font-size:35px;
      box-shadow:0 6px 18px rgba(12,18,30,0.5);
      width: 366px;
      height: 119px;
      text-decoration: none;
    }
    .btn-primary {
        background:linear-gradient(90deg,var(--accent1),var(--accent1));
        color:#fff;
        font-size: 34px;
       font-size: 35px;
        
    
    }





    
span{
    padding-left: 30px;
}
    .btn-ghost {
        background:transparent;border:1px solid rgba(255,255,255,0.06);
        color:var(--muted)}

    /* lista de features */
    .features{
    
        display:flex;
        flex-direction:column;
        gap:10px;
        margin-top:18px
    }
    .feature {
        
        display:flex;
        gap:12px;
        align-items:center;
        color:#fff;
        padding-left: 50px;
        font-size: 20px;
        padding-top: 0px;
    }

    .dot{
        width:10px;
        height:10px;
        border-radius:50%;
        background:linear-gradient(90deg,var(--accent1),var(--accent2));flex:0 0 10px
    }

    /* coluna direita: imagem/visual */
    .visual{display:flex;flex-direction:column;gap:1}
    .visual .mock{
      width:470px;
      height:420px;
      border-radius:16px;
      padding-top: px;
    }
    .mock img{width:100%;height:150%;object-fit:cover;display:block ;}

    /* rodapé pequeno */
    .meta  {
        display:flex;
        gap:10px;
        align-items:center;
        margin-top:8px;
        color:#fff;
        font-size:16px;
        padding-top: 30px;
        padding-left: 20px;
    }
    .badge{background:var(--glass);padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,0.03)}

    /* responsividade */
    @media (max-width:1110px){
      .card{
        grid-template-columns:1fr; padding:26px
    }
      .hero p{max-width:100%}
      .visual{order:-1}
      .mock{width:100%;height:320px}
      .hero h1{font-size:32px}
      .kicker img{
        flex-direction: column; 
      }
    }