/* ! body */
body {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow-x: hidden;
}

:root {
  /* ! Brand colors */
  --phonetastico-color: #ff3131;

  /* Menu */
  --menu-bg: #FFFFFF;
  --menu-color:  #0B0D12;

  /* White System */
  --white-premium: #FFFFFF;
  --white-soft: #f5f5f7;
  --white-muted: #EEF1F6;

  /* Black Premium System */
  --black-premium: #0B0D12;   /* hero, background principale */
  --black-soft: #12141A;      /* section scure */
  --black-muted: #1A1D24;     /* card scure */
  
  /* Blue Trust */
  --blue-premium: #0A3D91;    /* colore principale di fiducia */
  --blue-soft: #E9F0FB;       /* sfondi chiari */
  --blue-accent: #2e75e8;     /* CTA, link, focus */
  --blue-deep: #304e7f;       /* testi scuri o sfondi profondi */
  --blue-muted: #2B4C7E;      /* testi secondari */

  /* Neutral Grays */
  --gray-light: #E5E7EB;
  --gray-medium: #6B7280;
  --gray-dark: #1F2937;
  --gray-deep: #111827;

  /* Status Colors */
  --success-trust: #16A34A;   /* verde fiducia */
  --warning-soft: #F59E0B;    /* arancione warning */
  --error-soft: #DC2626;      /* rosso errore */

  /* Shadow System */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 20px 50px rgba(0, 0, 0, 0.15);
  --shadow-deep: 0 30px 80px rgba(0, 0, 0, 0.25);

  /* ! RGB colors */
  /* Menu */
  --menu-bg-rgb: 29, 29, 31;
  --menu-color-rgb: 255, 255, 255;

  /* White System */
  --white-premium-rgb: 255, 255, 255;
  --white-soft-rgb: 245, 245, 247;
  --white-muted-rgb: 238, 241, 246;

  /* Black Premium System */
  --black-premium-rgb: 11, 13, 18;
  --black-soft-rgb: 18, 20, 26;
  --black-muted-rgb: 26, 29, 36;
  
  /* Blue Trust */
  --blue-premium-rgb: 10, 61, 145;
  --blue-soft-rgb: 233, 240, 251;
  --blue-accent-rgb: 31, 106, 225;
  --blue-deep-rgb: 8, 31, 77;
  --blue-muted-rgb: 43, 76, 126;

  /* Neutral Grays */
  --gray-light-rgb: 229, 231, 235;
  --gray-medium-rgb: 107, 114, 128;
  --gray-dark-rgb: 31, 41, 55;
  --gray-deep-rgb: 17, 24, 39;

  /* Status Colors */
  --success-trust-rgb: 22, 163, 74;
  --warning-soft-rgb: 245, 158, 11;
  --error-soft-rgb: 220, 38, 38;

  /* Shadow System */
  --shadow-soft-rgb: 0, 0, 0, 0.1;
  --shadow-medium-rgb: 0, 0, 0, 0.15;
  --shadow-deep-rgb: 0, 0, 0, 0.25;
}

/* ! Main */
main{
  display: flex;
  width: 100%;
  height: fit-content;
  display: flex;align-items: center;flex-direction: column;
  margin-top: 45px;
  min-height: 100vh;
  position: relative;
}
.main p{font-size: 14px;}

main .main-banner{
    height: 250px;width: 100%;
    background-color: rgba(198, 219, 249);
}
main .main-banner img{
  height: 100%;width: 100%;object-fit: contain;
}
@media (max-width: 768px) {
  main .main-banner{height: 110%;}
}

.title{
  width: 100%;
  height: fit-content;
  display: flex;justify-content: center;align-items: center;flex-direction: column;
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  margin-bottom: 40px;
}
.title h2{
  font-size: 50px;
  font-weight: 860;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--black-premium);
  max-width: 700px;
  position: relative;
  z-index: 1;
  margin-bottom: 7px;
}
@media (max-width: 768px) {
  .title h2{font-size: 40px;margin-bottom: 8px;}
}

.title p{max-width: 450px;}

.cta-container{
  padding: 10px;
  width: fit-content;min-height: 100px;height: fit-content; display: flex; flex-direction: row;gap: 30px;justify-content: center;
  border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.126);background-color: #14141407;
}
@supports(corner-shape: squircle){.cta-container{border-radius: 50px;corner-shape: squircle;}}
.cta-container a{
  color: var(--white-premium);
  border: 1px solid rgb(91, 118, 238);
  height: 140px;width: 230px;
  border-radius: 30px;
  transition: all 0.35s ease;
  background-color: var(--blue-accent);
  display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 5px;
  font-size: 12px;
  user-select: none;
}
.cta-container a:hover{
    scale: 1.015;
    text-decoration: underline;
}

@media (max-width: 768px) {
  .cta-container a{height: 100px;width: 100%;}
  .cta-container {gap: 10px;width: 100%; border-radius: 50px; border: 1px solid rgba(0, 0, 0, 0.126);flex-direction: column;}
}

@supports (corner-shape: squircle) {
  .cta-container a {
    border-radius: 40px;
    corner-shape: squircle;
  }
}

.diator{width: 50%;max-width: 700px;}
@media (max-width: 768px) {
  .diator{width: 90%;}
}

/* ! Maps Banner */
.mapsSection{
  height: fit-content;width: 100%;
  padding: 30px 0px;
  display: flex;justify-content: center;align-items: center;flex-direction: column;
  margin-top: 30px;margin-bottom: 60px;
}
.mapsSection p{text-align: center;max-width: 90%;}
.mapsSection h3{
  font-weight: 800;
  max-width: 90%;margin-bottom: 6px;
}
.mapsSection iframe{
  width: 50%;max-width: 700px;
  height: 400px;
  border-radius: 10px;
}
@media (max-width: 768px) {
  .mapsSection iframe{width: 90%;max-width: 90%;}
}

@supports (corner-shape: squircle) {
  .mapsSection iframe {
    border-radius: 30px;
    corner-shape: squircle;
  }
}