/* romaprontointervento24.it — pagina di vendita dominio
   Palette: blu ordinanza, giallo segnale, bianco furgone */

:root{
  --blu:#0E2A47;
  --blu-scuro:#091D33;
  --giallo:#FFD400;
  --bianco:#F7F7F5;
  --testo:#1E2733;
  --grigio:#5A6472;
  --rosso:#E02B20;

  --wrap:1120px;
  --gutter:clamp(20px,5vw,48px);
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--bianco);
  color:var(--testo);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(16px,1.05vw + 13px,18px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-weight:800;
  font-variation-settings:"wdth" 78;
  line-height:1.02;
  letter-spacing:-0.015em;
  margin:0;
}

p{margin:0;}

a{color:inherit;}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--giallo);
  color:var(--blu);
  padding:10px 16px;
  font-weight:700;
  z-index:10;
}
.skip:focus{left:0;}

:focus-visible{
  outline:3px solid var(--rosso);
  outline-offset:3px;
}

/* ---------- barra alta ---------- */

.top{
  background:var(--blu);
  color:#fff;
  padding:18px 0;
}

.top__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.top__brand{
  font-weight:800;
  font-variation-settings:"wdth" 82;
  letter-spacing:0.01em;
  text-decoration:none;
  font-size:1.05rem;
}

.top__status{
  font-size:0.82rem;
  font-weight:600;
  color:var(--blu-scuro);
  background:var(--giallo);
  padding:5px 12px;
  border-radius:2px;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  background:var(--blu);
  color:#fff;
  overflow:hidden;
  padding-block:clamp(56px,9vw,104px) 0;
}

.hero__beacon{
  position:absolute;
  top:-180px;
  right:-120px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,212,0,.30) 0%,rgba(255,212,0,0) 68%);
  animation:beacon 3.4s ease-in-out infinite;
  pointer-events:none;
}

@keyframes beacon{
  0%,100%{opacity:.45;transform:scale(.94);}
  50%{opacity:1;transform:scale(1.04);}
}

.hero__inner{
  position:relative;
  padding-bottom:clamp(48px,7vw,86px);
}

.hero__domain{
  font-size:clamp(2.6rem,10.2vw,6.8rem);
  font-variation-settings:"wdth" 66;
  font-weight:900;
  line-height:0.9;
  letter-spacing:-0.03em;
  max-width:14ch;
}

.hero__domain span{display:block;}

.hero__domain em{
  font-style:normal;
  color:var(--giallo);
}

.hero__lede{
  margin-top:clamp(24px,3.5vw,36px);
  max-width:46ch;
  font-size:clamp(1.05rem,1.1vw + .85rem,1.3rem);
  color:#D6E0EC;
}

.hero__actions{
  margin-top:clamp(28px,4vw,40px);
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.zebra{
  height:16px;
  background:repeating-linear-gradient(
    -60deg,
    var(--giallo) 0 22px,
    var(--blu-scuro) 22px 44px
  );
}

/* ---------- bottoni ---------- */

.btn{
  display:inline-block;
  background:var(--giallo);
  color:var(--blu-scuro);
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  padding:15px 26px;
  border:2px solid var(--giallo);
  border-radius:2px;
  transition:background .15s linear,color .15s linear;
}

.btn:hover{background:#FFE250;border-color:#FFE250;}

.btn--ghost{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.4);
}

.btn--ghost:hover{
  background:#fff;
  border-color:#fff;
  color:var(--blu);
}

.btn--big{
  display:block;
  text-align:center;
  margin-top:22px;
  padding:17px 26px;
  font-size:1.05rem;
}

/* ---------- sezioni di contenuto ---------- */

.pitch,
.who,
.steps{
  padding-block:clamp(56px,8vw,92px);
}

.pitch h2,
.who h2,
.steps h2,
.contact h2{
  font-size:clamp(1.6rem,2.6vw + .8rem,2.5rem);
  max-width:18ch;
}

.pitch__grid{
  margin-top:clamp(32px,4vw,48px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(28px,3.4vw,44px);
}

.pitch__item{
  border-top:3px solid var(--blu);
  padding-top:18px;
  max-width:40ch;
}

.pitch__item h3{
  font-size:1.18rem;
  font-variation-settings:"wdth" 84;
  margin-bottom:10px;
}

.pitch__item p{color:var(--grigio);}

/* ---------- a chi serve ---------- */

.who{
  background:var(--blu);
  color:#fff;
}

.who__intro{
  margin-top:18px;
  max-width:52ch;
  color:#D6E0EC;
}

.who__list{
  margin:clamp(28px,3.5vw,40px) 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px 0;
}

.who__list li{
  font-weight:600;
  padding:4px 20px 4px 0;
  margin-right:20px;
  border-right:1px solid rgba(255,255,255,.28);
}

.who__list li:last-child{
  border-right:0;
  margin-right:0;
}

/* ---------- passaggi ---------- */

.steps__list{
  margin:clamp(32px,4vw,48px) 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(28px,3.4vw,44px);
  counter-reset:step;
}

.steps__list li{max-width:38ch;}

.steps__n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:var(--giallo);
  color:var(--blu-scuro);
  font-weight:900;
  font-variation-settings:"wdth" 80;
  font-size:1.15rem;
  border-radius:50%;
  margin-bottom:16px;
}

.steps__list h3{
  font-size:1.18rem;
  font-variation-settings:"wdth" 84;
  margin-bottom:10px;
}

.steps__list p{color:var(--grigio);}

/* ---------- contatti ---------- */

.contact{
  background:var(--blu-scuro);
  color:#fff;
  padding-block:clamp(56px,8vw,92px);
}

.contact__inner{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(32px,4vw,64px);
  align-items:start;
}

.contact__text p{
  margin-top:18px;
  max-width:44ch;
  color:#D6E0EC;
}

.contact__card{
  background:#fff;
  color:var(--testo);
  padding:clamp(24px,3vw,32px);
  border-radius:2px;
  border-bottom:6px solid var(--giallo);
}

.contact__row{
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  padding:12px 0;
  border-bottom:1px solid #E2E4E1;
}

.contact__row span{
  color:var(--grigio);
  min-width:52px;
  font-size:.92rem;
}

.contact__row a{
  font-weight:700;
  color:var(--blu);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  word-break:break-word;
}

/* ---------- piede ---------- */

.foot{
  background:var(--blu-scuro);
  color:#8FA3B8;
  padding-block:26px 34px;
  font-size:.9rem;
}

.foot__inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:22px;
}

.foot a{color:#fff;}

/* ---------- adattamenti ---------- */

@media (max-width:760px){
  .contact__inner{grid-template-columns:1fr;}
  .who__list li{padding-right:14px;margin-right:14px;}
}

@media (prefers-reduced-motion:reduce){
  .hero__beacon{animation:none;opacity:.7;}
  *{transition-duration:.01ms !important;}
}