:root{
    /* Paleta no estilo das imagens (HSL) */
    --bg-1: 16 50% 12%;
    --bg-2: 16 45% 18%;
    --text: 30 30% 96%;
    --muted: 28 20% 75%;
    --primary: 28 80% 45%;   
    --primary-2: 20 90% 55%;
    --accent: 32 85% 50%;   
    --brand: 186 41% 22%;    
    --success: 152 55% 40%;
    --error: 0 75% 55%;
    --shadow: 0 0% 0% / 0.25;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    color: hsl(var(--text));
    background-color: black;
    background-image: url("image\ 8.png");
    overflow-x:hidden;
  }

  
  /* Logo bandeira no canto superior esquerdo */
  .site-header{
    z-index: 30;
    padding: 16px;
    position: absolute;
    left: 69%;
    top: 60px;
  }
  .site-header .brand{ display:inline-block; }
  .site-header .brand img{
    width: 180px; height:auto; display:block;
    filter: drop-shadow(0 8px 18px hsl(var(--shadow)));
    animation: fade-up .4s ease-out both;
  }
  
  /* Layout base */
  .container{ width: min(1200px, 92vw); margin-inline:auto; }
  .hero{
    position:relative;
    min-height: 100svh;
    display:flex; align-items:center;
    padding: clamp(1.5rem, 2vw, 2.5rem) 0;
  }
  
  /* Painel marrom à direita com bordas grandes âmbar */
  .card{
    margin-left:auto;                 /* encosta na direita */
    width: min(980px, 70vw);
    border-radius: 28px;
    background: hsl(24 28% 26% / 0.98);
    border: 3px solid hsl(var(--accent));
    box-shadow:
      0 10px 30px hsl(var(--shadow)),
      inset 0 0 0 1px hsl(0 0% 100% / .05);
    padding: clamp(1rem, 1.2rem + 1vw, 1.6rem);
    animation: scale-in .45s ease-out both;
  }
  
  .hero-title{
    margin: 0 0 .25rem;
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem);
    line-height:1.1;
    text-shadow: 0 10px 30px hsl(var(--shadow));
  }
  .hero-subtitle{
    margin:0 0 1rem;
    color: hsl(var(--muted));
  }
  
  /* Grãos flutuando (detalhe sutil) */
  .beans{position:absolute; inset:0; pointer-events:none; z-index:0}
  .bean{
    position:absolute; width:26px; height:18px;
    background: linear-gradient(145deg, hsl(20 30% 12%) 0%, hsl(18 35% 18%) 100%);
    border-radius: 50% / 60%;
    box-shadow: 0 8px 18px hsl(var(--shadow));
    animation: float 6s ease-in-out infinite;
  }
  .bean::after{
    content:""; position:absolute; inset:20% 45% 20% 45%;
    background: linear-gradient(180deg, hsl(20 20% 8% / .6), transparent 70%);
    border-radius: 999px;
  }
  .bean:nth-child(1){ left: 8%; top: 18%; transform: rotate(12deg); }
  .bean:nth-child(2){ right: 12%; top: 10%; animation-delay:.6s; transform: rotate(-18deg); }
  .bean:nth-child(3){ left: 18%; bottom: 12%; animation-delay:.2s; transform: rotate(6deg); }
  
  /* Form */
  .form{ display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1; }
  .two-cols{ display:grid; grid-template-columns:1fr; gap:1rem; }
  @media (min-width: 720px){ .two-cols{ grid-template-columns:1fr 1fr; } }
  
  .field{ display:flex; flex-direction:column; gap:.4rem; }
  label, legend{ font-size:.9rem; letter-spacing:.2px; color:hsl(var(--text)); }
  input, select{
    appearance:none; width:100%;
    padding:.75rem .9rem; border-radius: 10px;
    border:1px solid hsl(var(--text)/0.12);
    background: hsl(0 0% 100% / .75);
    color:#1b1b1b; outline:none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .08s ease;
  }
  input::placeholder{ color:#8d8d8d; }
  select{
    color:#1b1b1b;
    background-image:
      linear-gradient(45deg, transparent 50%, hsl(var(--primary)) 50%),
      linear-gradient(135deg, hsl(var(--primary)) 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%, calc(100% - 2.2rem) 50%;
    background-size: 6px 6px, 6px 6px, 1px 60%;
    background-repeat: no-repeat;
  }
  
  input:focus, select:focus{
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 4px hsl(var(--primary)/.20), 0 8px 22px hsl(var(--shadow));
  }
  input:hover, select:hover{ border-color:hsl(var(--text)/0.25); }
  input:active{ transform: translateY(1px); }
  
  .hint{ font-size:.8rem; color: hsl(var(--muted)); }
  
  /* Validação sem JS */
  input:invalid:not(:placeholder-shown){ border-color: hsl(var(--error)); }
  input:valid{ border-color: hsl(var(--success)); }
  
  /* Radio pills */
  .choices{ display:flex; gap:.6rem; flex-wrap:wrap; }
  .choice{
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.5rem .7rem; border-radius: 999px;
    border:1px solid hsl(var(--text)/0.14);
    background: hsl(0 0% 100% / .6);
    cursor:pointer; user-select:none;
    transition: transform .08s ease, border-color .2s ease, background .2s ease;
  }
  .choice:hover{ transform: translateY(-1px); }
  .choice input{ accent-color: hsl(var(--primary)); }
  
  /* Switch */
  .switch{ display:inline-flex; align-items:center; gap:.6rem; cursor:pointer; user-select:none; }
  .switch input{ display:none; }
  .slider{
    position:relative; display:inline-block; width:46px; height:26px;
    background: hsl(var(--text)/0.2);
    border-radius:999px; transition: background .2s ease;
  }
  .slider::after{
    content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
    background: white; box-shadow: 0 4px 12px hsl(var(--shadow));
    transition: transform .2s ease;
  }
  .switch input:checked + .slider{ background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary-2))); }
  .switch input:checked + .slider::after{ transform: translateX(20px); }
  .switch-label{ color:hsl(var(--text)); }
  
  /* Termos */
  .terms{ display:flex; gap:.6rem; align-items:flex-start; font-size:.95rem; }
  .terms input{ margin-top:.25rem; accent-color: hsl(var(--primary)); }
  
  /* Botão com brilho */
  .btn{
    --g: linear-gradient(90deg, hsl(186 41% 22%), hsl(186 41% 22% / .92));
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    width:100%; padding:.9rem 1rem; border-radius: 12px;
    color:white; font-weight:700; letter-spacing:.3px;
    background: var(--g);
    font-size: 18px;
    border: 1px solid hsl(var(--text)/0.14);
    box-shadow: 0 10px 24px hsl(var(--shadow));
    cursor:pointer; position:relative; overflow:hidden;
    transition: transform .1s ease, filter .2s ease, box-shadow .2s ease;
  }

  a{text-decoration: none;}

  .btn::before{
    content:""; position:absolute; inset:0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 40%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .6s ease;
  }
  .btn:hover{ transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 14px 30px hsl(var(--shadow)); }
  .btn:hover::before{ transform: translateX(120%); }
  .btn:active{ transform: translateY(1px); }
  
  /* Utilidades e animações */
  @keyframes fade-up{ from{opacity:0; transform: translateY(12px)} to{opacity:1; transform:none} }
  @keyframes scale-in{ from{opacity:0; transform: scale(.98)} to{opacity:1; transform: scale(1)} }
  @keyframes float{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }