/* =========================
   Chiara M. Villa — Brand System (Vogue Business direction)
   Fonts: DM Sans (Headings), Inter (Body)
   Colors:
   Blue:   #1F3F8B
   Violet: #8B6FB6
   Pink:   #E65FA4
   Soft White: #FAFAFA
   Light Grey: #F4F4F6
   Text:   #2B2B2B
========================= */

/* =========================
   Fonts (self-host)
========================= */
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-variable.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "DM Sans";
  src: url("../assets/fonts/dm-sans-italic-variable.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: italic;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-variable.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-italic-variable.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: italic;
}

/* =========================
   Tokens
========================= */
:root{
  --c-blue: #1F3F8B;
  --c-violet: #8B6FB6;
  --c-pink: #E65FA4;

  --c-softwhite: #FAFAFA;
  --c-lightgrey: #F4F4F6;
  --c-white: #FFFFFF;
  --c-text: #2B2B2B;

  --grad-brand: linear-gradient(90deg, var(--c-blue), var(--c-violet), var(--c-pink));

  --radius: 18px;
  --radius-sm: 14px;

  --max: 1100px;

  /* Vogue-like shadows: lighter, cleaner */
  --shadow-1: 0 10px 30px rgba(0,0,0,0.08);
  --shadow-2: 0 8px 18px rgba(0,0,0,0.06);

  --border: 1px solid rgba(43,43,43,0.08);

  /* Motion */
  --ease: cubic-bezier(.2,.8,.2,1);

  /* Type scale */
  --h1: clamp(2.6rem, 4vw, 3.6rem);
  --h2: clamp(1.7rem, 2.4vw, 2.2rem);
  --h3: clamp(1.25rem, 1.7vw, 1.5rem);
  --p: 1.05rem;
  --small: 0.92rem;
}

/* =========================
   Base / Reset
========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c-text);
  background: var(--c-softwhite);
  line-height: 1.65;
  letter-spacing: 0.01em;
}
img{ max-width: 100%; height: auto; }
p{ margin: 0.75rem 0; }
ul{ margin: 0.75rem 0; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 4px; }

/* =========================
   Accessibility
========================= */
.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 1rem; top: 1rem; width:auto; height:auto; padding: .75rem 1rem;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  z-index: 9999;
}
:focus-visible{
  outline: 3px solid rgba(230,95,164,0.55);
  outline-offset: 3px;
  border-radius: 10px;
}

/* =========================
   Layout
========================= */
.container{
  width: min(var(--max), calc(100% - 2rem));
  margin: 0 auto;
}

/* =========================
   Header
========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: rgba(250,250,250,0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(43,43,43,0.06);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-scrolled{
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 0;
  flex-wrap: nowrap;
}
.brand{
  display:flex;
  align-items:center;
  flex: 0 0 auto;
}
.brand-logo{
  height: clamp(56px, 5vw, 90px);
  width: auto;
  display: block;
}
.nav{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: .25rem;
  flex: 1 1 auto;
  flex-wrap: wrap;
  min-width: 0;
}
.nav a{
  font-size: .95rem;
  padding: .45rem .6rem;
  border-radius: 12px;
}
.nav a[aria-current="page"]{
  background: rgba(31,63,139,0.08);
  color: var(--c-blue);
  text-decoration: none;
}

/* =========================
   Buttons
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: .5rem;
  padding: .78rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(31,63,139,0.15);
  background: var(--c-white);
  box-shadow: var(--shadow-2);
  text-decoration: none;
  font-weight: 600;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
  filter: brightness(1.01);
}
.btn:active{ transform: translateY(0); }
.btn-primary{
  border: none;
  color: var(--c-white);
  background: var(--grad-brand);
  box-shadow: 0 12px 26px rgba(31,63,139,.18);
}
.btn-ghost{
  background: transparent;
  box-shadow: none;
}

/* =========================
   Typography (FIXED)
========================= */
h1, h2, h3{
  font-family: "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.4px;
  margin: 0 0 .75rem;
}

h1{
  font-size: var(--h1);
  color: var(--c-blue);
  font-weight: 750;
  line-height: 1.08;
}

h2{
  font-size: var(--h2);
  color: var(--c-blue);
  font-weight: 700;
  line-height: 1.18;
}

h3{
  font-size: var(--h3);
  color: var(--c-blue);
  font-weight: 650;
  line-height: 1.22;
}

.kicker{
  font-size: var(--small);
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(43,43,43,0.62);
  margin: 0 0 .6rem;
  position: relative;
  padding-left: .9rem;
}
.kicker::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-pink));
  position: absolute;
  left: 0;
  top: .35em;
  opacity: .9;
}

.lead{
  font-size: clamp(1.08rem, 1.35vw, 1.22rem);
  line-height: 1.65;
  margin: 0 0 1.25rem;
  max-width: 70ch;
  color: rgba(43,43,43,0.92);
}

.muted{
  color: rgba(43,43,43,0.65);
  font-size: .95rem;
}

/* Underline controllata: aggiungila solo dove vuoi */
.section-title::after{
  content:"";
  display:block;
  width: 56px;
  height: 3px;
  border-radius: 999px;
  margin-top: .55rem;
  background: var(--grad-brand);
  opacity: .85;
}

/* =========================
   Hero
========================= */
.hero{
  padding: 4.25rem 0 2.25rem;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 2rem;
  align-items: center;
}
.hero-actions{
  display:flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* Signature line */
.hero-signature{
  margin: 0 0 1.25rem;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: rgba(43,43,43,0.86);
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
  max-width: 70ch;
}
.hero-signature span{
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.hero-signature::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(31,63,139,0) 0%,
    rgba(31,63,139,0.35) 18%,
    rgba(139,111,182,0.75) 60%,
    rgba(230,95,164,1) 100%
  );
  clip-path: polygon(0 50%, 0 75%, 100% 100%, 100% 0, 0 25%);
}

.hero-card{
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(43,43,43,0.06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hero-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.10);
}
.hero-badges{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}
.badge{
  font-size: .9rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(139,111,182,0.10);
  border: 1px solid rgba(139,111,182,0.18);
}

/* =========================
   Sections
========================= */
.section{
  padding: 3.25rem 0;
}
.section.alt{
  background: var(--c-lightgrey);
  border-top: 1px solid rgba(43,43,43,0.06);
  border-bottom: 1px solid rgba(43,43,43,0.06);
}

/* =========================
   Grids / Cards
========================= */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.card{
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(43,43,43,0.06);
  transition: transform .20s var(--ease), box-shadow .20s var(--ease);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,0.10);
}
.card p{
  margin: .5rem 0 0;
  font-size: var(--p);
}
.card a{
  color: var(--c-blue);
  font-weight: 650;
}

/* =========================
   Steps
========================= */
.steps{
  display:grid;
  grid-template-columns: 1fr;
  gap: .75rem;
}
.step{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--c-white);
  border: 1px solid rgba(43,43,43,0.06);
  box-shadow: 0 6px 14px rgba(0,0,0,0.04);
  transition: transform .20s var(--ease), box-shadow .20s var(--ease);
}
.step:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.step-num{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(31,63,139,0.08);
  color: var(--c-blue);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 750;
}

/* =========================
   Lists
========================= */
.list-check{
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
}
.list-check li{
  padding-left: 1.6rem;
  position: relative;
  margin: .4rem 0;
}
.list-check li::before{
  content: "✓";
  position:absolute;
  left: 0;
  color: var(--c-pink);
  font-weight: 800;
}

/* =========================
   Section images
========================= */
.section-media{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
}
.section-media.reverse .media{ order: 2; }
.section-media.reverse .content{ order: 1; }

.media{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(43,43,43,0.06);
  background: var(--c-white);
}
.media img{
  width: 100%;
  height: 100%;
  max-height: 440px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.media::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  opacity: 0.07;
  pointer-events: none;
}
.media-caption{
  font-size: var(--small);
  color: rgba(43,43,43,0.65);
  margin-top: .6rem;
}

/* =========================
   Profile photo
========================= */
.profile-photo{
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* =========================
   Social
========================= */
.social{
  display:flex;
  gap:.75rem;
  align-items:center;
  flex-wrap: wrap;
}
.social a{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .55rem .75rem;
  border-radius: 14px;
  background: var(--c-white);
  border: 1px solid rgba(43,43,43,0.06);
  box-shadow: var(--shadow-2);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.social a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}
.social img{
  width: 18px;
  height: 18px;
}

/* =========================
   Footer
========================= */
.site-footer{
  padding: 2rem 0;
  background: var(--c-softwhite);
}
.footer-inner{
  display:flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(43,43,43,0.08);
  padding-top: 1.25rem;
}
.footer-links{
  display:flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .95rem;
}

/* =========================
   Cookie banner
========================= */
.cookie-banner{
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  background: var(--c-white);
  padding: 1rem 1.25rem;
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  border: 1px solid rgba(43,43,43,0.08);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 3000;
  flex-wrap: wrap;
}
.cookie-banner p{
  margin: 0;
  font-size: .95rem;
}
.cookie-banner a{
  color: var(--c-blue);
  font-weight: 600;
}
.cookie-actions{
  display: flex;
  gap: .5rem;
}
.cookie-actions button{
  padding: .5rem .9rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
#accept-cookies{
  background: var(--grad-brand);
  color: white;
}
#reject-cookies{
  background: var(--c-lightgrey);
}

/* =========================
   Reveal
========================= */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Responsive
========================= */
@media (max-width: 880px){
  .hero-grid{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .section-media{ grid-template-columns: 1fr; }
  .section-media.reverse .media,
  .section-media.reverse .content{ order: initial; }
  .profile-photo{ max-width: 320px; }
}

/* =========================
   Reduce Motion
========================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .card, .step, .hero-card, .social a, .reveal{
    transition: none !important;
    transform: none !important;
  }
}