body {
	font-family: var(--font-primary);
	font-size: 18px;
	line-height: 1.5;
	color: var(--text-primary);
	overflow-y: scroll!important;
}

::selection{
    background: #ffd4d4de;
    color: #4a4a4a; 
    /* background: linear-gradient(180deg, rgba(var(--primary-rgb), 0.8) 0%, rgba(var(--primary-rgb), 0.6) 100%); */
}



h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: .9;
	margin-bottom: var(--space-md);
}

h1 {font-size:var(--text-h1);}
h2 {font-size:var(--text-h1);}
h3 {font-size:var(--text-h3);}
h4 {font-size:var(--text-h4);}
h5 {font-size:var(--text-h5);font-weight: normal;}
h6 {font-size:var(--text-h6);font-weight: normal;}



/* Responsive */


@media (max-width: 768px) {
	h1 {font-size: 4rem;}
	h2 {font-size: 4rem;}
	h3 {font-size: 3rem}
	h4 {font-size:2.1rem;font-weight: normal;}
	h5 {font-size:1.5rem;font-weight: normal;}
	h6 {font-size:.8rem;font-weight: normal;}
}

@media (max-width: 480px) {
	h1 {font-size:3.5rem;}
	h2 {font-size: 3.5rem;}
	h3 {font-size: 3rem;}
	h4 {font-size: 1.8rem;font-weight: normal;}
	h5 {font-size:1;font-weight: normal;}
	h6 {font-size:.5;font-weight: normal;}
}



h1 strong, h1 b,
h2 strong, h2 b,
h3 strong, h3 b,
h4 strong, h4 b,
h5 strong, h5 b,
h6 strong, h6 b {
    color: var(--title-strong-color);
    /* font-weight: inherit; */
    text-shadow: 0 0 20px rgba(var(--primary-rgb), 0.2), 0 0 28px rgba(var(--primary-rgb), 0.1), 0 0 72px rgba(var(--primary-rgb), 0.05);
}

/* Mantieni il peso del font per strong/bold */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
    font-weight: inherit;
    font-size: inherit;
    white-space: nowrap;
    overflow-wrap: anywhere;
    word-break: normal;
    white-space: normal;
    display: inline-block;
    max-width: 100%;
}

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
    font-weight: 700;
}

p {margin-bottom: var(--space-md);line-height: inherit;}

a { color: var(--primary); transition: color var(--transition-fast); }
a:hover {color: var(--primary);}

.hero-subtitle, .subtitle {
    font-family: var(--font-accent);
    font-size: 2rem;
    margin-bottom: var(--space-xl);
    color: var(--accent);
    font-weight: 400;
    transform: rotate(357deg) !important;
    margin-top: -16px;
}

/*cominsoon shoow*/

[comingsoon] {
    position: relative;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    cursor:default
  }
  
  /* badge "coming soon" */
  [comingsoon]::after {
    content: "coming soon";
    position: absolute;
    top: -6px;
    right: -10px;
    background: #ff4444;
    color: #fff;
    font-size: 0px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0px0px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    transform: scale(0.9);
    opacity: 0.85;
    transition: all 0.25s ease;
    pointer-events: none;
  }
  
  /* effetto hover: badge più grande */
  [comingsoon]:hover::after {
    transform: scale(2);
    opacity: 1;
    top: -10px;
    font-size: 4px;
  
    padding: 2px 5px;
  }