:root{
  --night:#0c0708; --maroon:#6b0a10; --red:#c81a19; --white:#fff; --soft:#f0dede;
  --blue:#1a6fb5; --green:#6ab43e; --yellow:#f6e600;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--white);font-family:var(--font);line-height:1.6;
  background:
    radial-gradient(circle at 12% 18%,rgba(255,190,90,.55) 0 22px,transparent 60px),
    radial-gradient(circle at 78% 10%,rgba(255,210,120,.45) 0 26px,transparent 70px),
    radial-gradient(circle at 92% 42%,rgba(255,70,50,.40) 0 30px,transparent 80px),
    radial-gradient(circle at 5% 60%,rgba(255,120,60,.35) 0 34px,transparent 90px),
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.10) 0 40px,transparent 120px),
    var(--night);
  background-attachment:fixed;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.pill{
  display:inline-block;margin:0;padding:.55em 1.3em;border-radius:999px;
  background:var(--maroon);color:var(--white);text-decoration:none;
  font-style:italic;font-weight:800;line-height:1.2;
}
h1.pill{font-size:clamp(1.5rem,4.6vw,2.6rem)}
h2.pill{font-size:clamp(1.15rem,3vw,1.6rem)}

.hero{max-width:960px;margin:0 auto;padding:56px 20px 48px;text-align:center}
.lead{max-width:60ch;margin:28px auto 8px;font-size:1.1rem;color:var(--soft)}

.badges{list-style:none;margin:36px 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.badge{
  position:relative;width:132px;height:132px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#101010;box-shadow:0 0 0 4px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.5);
}
.badge::after{
  content:"DGT";position:absolute;bottom:14px;padding:1px 14px;border-radius:3px;
  background:#9a9a9a;color:#fff;font-size:.7rem;font-weight:800;font-style:italic;letter-spacing:.05em;
}
.badge .big{font-size:3.4rem;font-weight:800;line-height:1;margin-bottom:12px}
.badge small{position:absolute;top:80px;font-size:.6rem;font-weight:600}
.b0{background:var(--blue);color:#0a1a2c}
.b0 .big{margin-bottom:22px}
.b0 small{top:86px}
.beco{background:linear-gradient(90deg,var(--green) 55%,var(--blue) 55%)}
.beco .big{font-size:2.2rem}
.bb{background:var(--yellow)}
.bc{background:var(--green)}

.btn{
  display:inline-block;padding:.9em 1.8em;border:0;border-radius:999px;cursor:pointer;
  background:var(--red);color:var(--white);text-decoration:none;
  font:italic 800 1.05rem/1.2 var(--font);
  box-shadow:0 8px 24px rgba(200,26,25,.45);
}
.btn:hover{background:#dd2422}

main{max-width:960px;margin:0 auto;padding:0 20px}
.block{margin:0 0 64px}
.block>h2.pill{margin-bottom:24px}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{padding:26px;border-radius:24px;background:rgba(107,10,16,.75);border:1px solid rgba(255,255,255,.12)}
.card h3{margin:14px 0 8px;font-size:1.25rem;font-style:italic;font-weight:800}
.card p{margin:0;color:var(--soft)}
.mini{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-size:1.6rem;font-weight:800;color:#101010;
}
.yellow{background:var(--yellow)} .green{background:var(--green)}
.note,.small{margin:20px 0 0;color:var(--soft);font-size:.95rem}
.small{font-size:.85rem}

.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{
  counter-increment:s;position:relative;padding:18px 20px 18px 72px;border-radius:20px;
  background:rgba(255,255,255,.06);
}
.steps li::before{
  content:counter(s);position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;background:var(--red);
  display:grid;place-items:center;font-weight:800;font-style:italic;
}

.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;
  padding:26px;border-radius:24px;background:rgba(107,10,16,.75);border:1px solid rgba(255,255,255,.12)}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select{
  width:100%;padding:.8em 1em;border-radius:14px;border:2px solid transparent;
  background:#fff;color:#141414;font:inherit;
}
.form input:focus,.form select:focus{border-color:var(--yellow);outline:0}
.form .btn,.form .small,.error{grid-column:1/-1}
.form .btn{justify-self:start}
.error{margin:0;padding:.7em 1em;border-radius:12px;background:#000;color:#ffd0d0;font-weight:600}

details{margin-bottom:12px;padding:16px 20px;border-radius:18px;background:rgba(255,255,255,.06)}
summary{cursor:pointer;font-weight:800;font-style:italic}
details p{margin:12px 0 0;color:var(--soft)}

.contact{background:var(--red);padding:48px 20px 32px;text-align:center}
.contact .row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-bottom:22px}
.contact .pill{font-size:clamp(1.05rem,3.4vw,1.5rem);font-weight:600}
.contact p{margin:0 0 16px}
.contact .legal{margin:28px 0 0;font-size:.8rem;opacity:.8}

@media (max-width:520px){
  .badge{width:110px;height:110px}
  .badge .big{font-size:2.8rem}
  .badge small{top:66px}
  .b0 small{top:70px}
  .badge::after{bottom:10px;font-size:.6rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}