:root{
      --bg1: #3a0ca3;
      --bg2: #7209b7;
      --card-bg: rgba(255,255,255,0.06);
      --card-bg-2: rgba(255,255,255,0.04);
      --accent: #b084ff;
      --accent-2: #9d4edd;
      --muted: rgba(255,255,255,0.78);
      --glass-border: rgba(255,255,255,0.08);
    }

    /* Reset básico */
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: Inter, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      background: linear-gradient(135deg,var(--bg1),var(--bg2));
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      color:#fff;
      min-height:100vh;
    }

    /* Container principal */
    .container{
      width:min(980px, 98%);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:20px;
      padding: clamp(18px, 3.2vw, 40px);
      display:grid;
      grid-template-columns: 1fr 420px; /* layout 2 colunas */
      gap: clamp(14px, 2.6vw, 30px);
      box-shadow: 0 10px 30px rgba(0,0,0,0.35);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(6px);
      align-items:stretch;
    }

    /* Left column (texto + CTA) */
    .left{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:14px;
      padding-right:8px;
    }

    .brand-pill{
      display:inline-flex;
      gap:10px;
      align-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      padding:8px 12px;
      border-radius:999px;
      width:fit-content;
      border:1px solid rgba(255,255,255,0.03);
      font-size:13px;
      color:var(--muted);
    }

    .brand-pill .dot{
      width:36px;height:36px;border-radius:50%;
      display:inline-grid;place-items:center;
      background: linear-gradient(180deg,var(--accent-2), var(--accent));
      box-shadow: 0 6px 16px rgba(155,100,255,0.18);
      font-size:18px;
    }

    h1{
      margin:0;
      font-weight:700;
      font-size: clamp(20px, 3.6vw, 32px);
      color:#fff;
      line-height:1.05;
    }

    .lead{
      margin:0;
      color:var(--muted);
      font-size: clamp(13px, 2.2vw, 16px);
      line-height:1.5;
    }

    .cta-row{
      display:flex;
      gap:12px;
      align-items:center;
      margin-top:6px;
      flex-wrap:wrap;
    }

    .btn{
      background: linear-gradient(180deg,var(--accent-2), var(--accent));
      padding: clamp(10px, 2.2vw, 14px) clamp(14px, 3vw, 20px);
      color:#fff;
      border-radius:12px;
      text-decoration:none;
      font-weight:700;
      box-shadow: 0 8px 18px rgba(120,70,200,0.18);
      border: none;
      cursor: pointer;
      display:inline-flex;
      gap:10px;
      align-items:center;
      transition: transform .16s ease, box-shadow .16s ease;
      font-size: clamp(14px, 2.2vw, 16px);
    }

    .btn:active{ transform: translateY(1px) }
    .btn:hover{ box-shadow: 0 12px 28px rgba(120,70,200,0.24) }

    .sub-note{
      font-size:13px;
      color: #cfc3ff;
      background: var(--card-bg-2);
      padding:10px 12px;
      border-radius:10px;
      display:inline-flex;
      gap:10px;
      align-items:center;
      border:1px solid rgba(255,255,255,0.02);
    }

    /* Right column (benefícios) */
    .right{
      display:flex;
      flex-direction:column;
      gap:14px;
      align-items:stretch;
      justify-content:center;
    }

    .feature{
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      padding:14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.025);
      display:flex;
      gap:12px;
      align-items:center;
      transition: transform .14s ease, background .14s ease;
    }

    .feature:hover{ transform: translateY(-6px); background: rgba(255,255,255,0.035) }

    .feature .ic{
      width:52px;height:52px;border-radius:10px;
      display:grid;place-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
      font-size:20px;
      border:1px solid rgba(255,255,255,0.02);
    }

    .feature h3{
      margin:0;font-size:16px;color:#fff;
    }
    .feature p{margin:0;color:var(--muted);font-size:13px}

    /* Footer (acordos) */
    .footer{
      grid-column: 1 / -1;
      text-align:center;
      color:rgba(255,255,255,0.75);
      font-size:13px;
      margin-top:6px;
    }
    .footer a{ color: #e8d9ff; text-decoration:none; font-weight:600 }
    .footer a:hover{ text-decoration:underline }

    /* Media queries: tablet e mobile */
    /* Tablet: empilha as colunas e centraliza conteúdo */
    @media (max-width: 900px){
      .container{
        grid-template-columns: 1fr;
        padding: clamp(16px, 4vw, 28px);
      }
      .left{ padding-right:0; align-items:center; text-align:center }
      .right{ align-items:center }
      .feature{ width:100%; max-width:640px }
      .cta-row{ justify-content:center }
      .brand-pill{ justify-content:center }
    }

    /* Mobile otimizado: reduz espaços, botão full-width, features em linha scrollável */
    @media (max-width: 480px){
      .container{ padding:16px; border-radius:16px }
      h1{ font-size:20px }
      .lead{ font-size:14px }
      .cta-row{ flex-direction:column; gap:10px; width:100% }
      .btn{ width:100%; justify-content:center; padding:12px; font-size:15px; border-radius:12px }
      .sub-note{ width:100%; justify-content:center }
      /* transforma bloco de features em carrossel horizontal */
      .right{
        display:block;
      }
      .features-scroll{
        display:flex;
        gap:12px;
        overflow-x:auto;
        padding-bottom:6px;
        -webkit-overflow-scrolling:touch;
      }
      .feature{
        min-width:220px;
        flex:0 0 auto;
      }
      .footer{ font-size:12px; padding-top:8px }
    }

    /* Pequeno toque accessibility focus */
    .btn:focus{ outline: 3px solid rgba(200,160,255,0.18); outline-offset:3px }
    a:focus{ outline: 2px dashed rgba(200,160,255,0.14); outline-offset:3px }