/* ================================================
   Talvenoro — CUSTOM CSS
   Textured Modern Design System
   camelCase CSS class naming convention
   ================================================ */


@layer base {
  :root {
    --colorPrimary: oklch(28% 0.08 55);
    --colorSecondary: oklch(45% 0.12 50);
    --colorAccent: oklch(62% 0.14 48);
    --colorWarm: oklch(72% 0.10 60);
    --colorLight: oklch(97% 0.01 70);
    --colorText: oklch(22% 0.04 55);
    --colorTextMid: oklch(42% 0.05 55);
    --colorTextLight: oklch(60% 0.04 55);

    --bgPrimary: color-mix(in oklch, var(--colorPrimary), white 96%);
    --bgSecondary: color-mix(in oklch, var(--colorSecondary), white 92%);
    --bgAccentSoft: color-mix(in oklch, var(--colorAccent), white 88%);

    --colorPrimaryLight: color-mix(in oklch, var(--colorPrimary), white 70%);
    --colorPrimaryDark: color-mix(in oklch, var(--colorPrimary), black 20%);
    --colorAccentLight: color-mix(in oklch, var(--colorAccent), white 60%);
    --colorAccentDark: color-mix(in oklch, var(--colorAccent), black 20%);
    --colorSecondaryLight: color-mix(in oklch, var(--colorSecondary), white 75%);

    --borderDefault: color-mix(in oklch, var(--colorPrimary), white 80%);
    --borderAccent: color-mix(in oklch, var(--colorAccent), white 50%);

    --shadowSm: 0 1px 3px color-mix(in oklch, var(--colorPrimary), transparent 85%),
                0 1px 2px color-mix(in oklch, var(--colorPrimary), transparent 90%);
    --shadowMd: 0 4px 6px color-mix(in oklch, var(--colorPrimary), transparent 80%),
                0 2px 4px color-mix(in oklch, var(--colorPrimary), transparent 88%),
                0 0 0 1px color-mix(in oklch, var(--colorPrimary), transparent 95%);
    --shadowLg: 0 10px 25px color-mix(in oklch, var(--colorPrimary), transparent 75%),
                0 4px 10px color-mix(in oklch, var(--colorPrimary), transparent 85%),
                0 1px 3px color-mix(in oklch, var(--colorPrimary), transparent 92%);
    --shadowAccent: 0 8px 24px color-mix(in oklch, var(--colorAccent), transparent 60%),
                    0 2px 8px color-mix(in oklch, var(--colorAccent), transparent 75%);
    --shadowGlow: 0 0 0 3px color-mix(in oklch, var(--colorAccent), transparent 70%);

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;

    --transitionFast: 150ms ease;
    --transitionMid: 280ms cubic-bezier(0.4,0,0.2,1);
    --transitionSlow: 450ms cubic-bezier(0.4,0,0.2,1);

    --navHeight: 72px;
  }
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--bgPrimary);
  color: var(--colorText);
  line-height: 1.7;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--transitionMid); }

ul { list-style: none; }

address { font-style: normal; }


.mainHero::before,
.howItWorks_texture,
.valuesSection_texture,
.profileSection_texture,
.ctaBanner_texture,
.pageHero_texture,
.legalHero_texture,
.pageFooter_texture,
.thanksHero_texture {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.55;
}

.howItWorks_texture,
.valuesSection_texture,
.profileSection_texture,
.ctaBanner_texture,
.pageHero_texture,
.legalHero_texture,
.pageFooter_texture,
.thanksHero_texture { position: absolute; inset: 0; }


.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}


h1, h2, h3, h4, h5 {
  font-family: 'Merriweather', serif;
  line-height: 1.25;
  color: var(--colorText);
}

.sectionTitle {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700;
  margin-bottom: var(--space-md);
  color: var(--colorText);
}

.sectionTitle--light { color: var(--colorLight); }

.sectionLabel {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colorAccent);
  background: color-mix(in oklch, var(--colorAccent), transparent 88%);
  border: 1px solid color-mix(in oklch, var(--colorAccent), transparent 70%);
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.sectionLabel--light {
  color: var(--colorLight);
  background: color-mix(in oklch, white, transparent 85%);
  border-color: color-mix(in oklch, white, transparent 70%);
}

.linkArrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  color: var(--colorAccent);
  transition: gap var(--transitionMid), color var(--transitionMid);
  margin-top: var(--space-sm);
}

.linkArrow:hover { gap: 0.85em; color: var(--colorAccentDark); }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85em 2em;
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transitionMid), color var(--transitionMid),
              border-color var(--transitionMid), box-shadow var(--transitionMid),
              transform var(--transitionFast);
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--colorAccent);
  color: white;
  box-shadow: var(--shadowAccent);
}
.btn--primary:hover {
  background: var(--colorAccentDark);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--colorAccent), transparent 45%),
              0 4px 12px color-mix(in oklch, var(--colorAccent), transparent 60%);
}

.btn--ghost {
  background: transparent;
  color: var(--colorLight);
  border-color: color-mix(in oklch, white, transparent 60%);
}
.btn--ghost:hover {
  background: color-mix(in oklch, white, transparent 85%);
  border-color: white;
}

.btn--white {
  background: white;
  color: var(--colorAccent);
  box-shadow: var(--shadowMd);
}
.btn--white:hover {
  background: var(--colorLight);
  box-shadow: var(--shadowLg);
}

.btn--sm { padding: 0.6em 1.3em; font-size: 0.875rem; }
.btn--full { width: 100%; }

/* ================================================
   SITE HEADER / NAVIGATION
   ================================================ */
.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navHeight);
  z-index: 1000;
  transition: background var(--transitionSlow), color var(--transitionSlow),
              box-shadow var(--transitionSlow);
}

.siteHeader.is-light {
  background: rgba(252, 248, 243, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadowSm);
  color: var(--colorText);
}

.siteHeader.is-dark {
  background: transparent;
  color: var(--colorLight);
}

.siteHeader_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.siteHeader_logo { display: flex; align-items: center; }
.siteHeader_logoImg { height: 36px; width: auto; }

.siteHeader_nav {
  display: none;
  gap: var(--space-sm);
  align-items: center;
}

.siteHeader_navLink {
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.4em 0.7em;
  border-radius: var(--radius-sm);
  transition: background var(--transitionMid), color var(--transitionMid);
  position: relative;
}

.siteHeader.is-light .siteHeader_navLink { color: var(--colorText); }
.siteHeader.is-dark .siteHeader_navLink { color: var(--colorLight); }

.siteHeader.is-light .siteHeader_navLink:hover { background: var(--bgSecondary); }
.siteHeader.is-dark .siteHeader_navLink:hover { background: color-mix(in oklch, white, transparent 85%); }

.siteHeader.is-light .siteHeader_navLink.is-active { color: var(--colorAccent); }
.siteHeader.is-dark .siteHeader_navLink.is-active { color: var(--colorWarm); }

.siteHeader_menuBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transitionMid);
}

.siteHeader.is-light .siteHeader_menuBtn:hover { background: var(--bgSecondary); }
.siteHeader.is-dark .siteHeader_menuBtn:hover { background: color-mix(in oklch, white, transparent 85%); }

.siteHeader_menuIcon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.siteHeader_menuIcon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  transition: background var(--transitionMid);
}

.siteHeader.is-light .siteHeader_menuIcon span { background: var(--colorText); }
.siteHeader.is-dark .siteHeader_menuIcon span { background: white; }

/* ================================================
   MOBILE OVERLAY
   ================================================ */
.mobileOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--colorPrimary);
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--colorPrimary), black 10%) 0%,
    color-mix(in oklch, var(--colorSecondary), black 5%) 100%);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transitionSlow);
}

.mobileOverlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobileOverlay_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  height: var(--navHeight);
}

.mobileOverlay_logo img { height: 36px; filter: brightness(0) invert(1); }

.mobileOverlay_close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklch, white, transparent 85%);
  border: none;
  border-radius: var(--radius-sm);
  color: white;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background var(--transitionMid);
}

.mobileOverlay_close:hover { background: color-mix(in oklch, white, transparent 75%); }

.mobileOverlay_nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.mobileOverlay_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  width: 100%;
  max-width: 440px;
}

.mobileOverlay_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: var(--space-md);
  background: color-mix(in oklch, white, transparent 88%);
  border: 1px solid color-mix(in oklch, white, transparent 80%);
  border-radius: var(--radius-lg);
  color: white;
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  min-height: 100px;
  transition: background var(--transitionMid), transform var(--transitionFast);
}

.mobileOverlay_item i { font-size: 1.4rem; }
.mobileOverlay_item:hover {
  background: color-mix(in oklch, white, transparent 78%);
  transform: scale(1.03);
}

/* ================================================
   HERO SECTION
   ================================================ */
.mainHero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--colorPrimary);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorPrimary), black 15%) 0%,
    color-mix(in oklch, var(--colorSecondary), black 5%) 50%,
    color-mix(in oklch, var(--colorAccent), black 20%) 100%);
}

.mainHero::before { z-index: 1; }

.mainHero_marqueeTrack {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.mainHero_marqueeInner {
  display: flex;
  white-space: nowrap;
  animation: marqueeScroll 35s linear infinite;
}

.mainHero_marqueeInner span {
  font-family: 'Merriweather', serif;
  font-size: clamp(3rem, 8vw, 8rem);
  font-weight: 900;
  color: color-mix(in oklch, white, transparent 88%);
  flex-shrink: 0;
  padding-right: 2em;
  line-height: 1.2;
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.mainHero_content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--navHeight) + var(--space-xl)) var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mainHero_card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid color-mix(in oklch, white, transparent 75%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
  max-width: 720px;
  width: 100%;
  box-shadow: 0 24px 64px color-mix(in oklch, black, transparent 50%),
              0 8px 24px color-mix(in oklch, black, transparent 65%),
              inset 0 1px 0 color-mix(in oklch, white, transparent 60%);
}

.mainHero_eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--colorWarm);
  margin-bottom: var(--space-sm);
}

.mainHero_title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 900;
  color: white;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}

.mainHero_subtitle {
  font-size: 1.05rem;
  color: color-mix(in oklch, white, transparent 20%);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.mainHero_actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.mainHero_scroll {
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.mainHero_scroll span {
  display: block;
  width: 2px;
  height: 50px;
  background: linear-gradient(to bottom, color-mix(in oklch, white, transparent 30%), transparent);
  margin: 0 auto;
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 1; transform: scaleY(0.8); }
}

/* ================================================
   INTRO SECTION
   ================================================ */
.introSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.introSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.introSection_text p {
  color: var(--colorTextMid);
  margin-bottom: var(--space-sm);
  font-size: 1.05rem;
}

.introSection_visual { position: relative; }

.introSection_imgWrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadowLg);
  aspect-ratio: 4/3;
}

.introSection_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transitionSlow);
  cursor: zoom-in;
}

.introSection_imgWrap:hover .introSection_img { transform: scale(1.03); }

.introSection_floatCard {
  position: absolute;
  bottom: -1.5rem;
  left: -1rem;
  background: white;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadowLg);
  display: flex;
  align-items: center;
  gap: 0.75em;
  max-width: 240px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--colorText);
  border: 1px solid var(--borderDefault);
}

.introSection_floatCard i {
  font-size: 1.2rem;
  color: var(--colorAccent);
  flex-shrink: 0;
}

/* ================================================
   HOW IT WORKS
   ================================================ */
.howItWorks {
  position: relative;
  padding: var(--space-2xl) 0;
  background: var(--colorPrimary);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorPrimary), black 10%) 0%,
    color-mix(in oklch, var(--colorSecondary), black 5%) 100%);
  overflow: hidden;
}

.howItWorks_header {
  text-align: center;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 2;
}

.howItWorks_intro {
  color: color-mix(in oklch, white, transparent 25%);
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.05rem;
}

.howItWorks_cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  position: relative;
  z-index: 2;
}

.stepCard {
  background: color-mix(in oklch, white, transparent 90%);
  border: 1px solid color-mix(in oklch, white, transparent 80%);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform var(--transitionMid), box-shadow var(--transitionMid),
              background var(--transitionMid);
  position: relative;
  overflow: hidden;
}

.stepCard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--colorAccent), var(--colorWarm));
  opacity: 0;
  transition: opacity var(--transitionMid);
}

.stepCard:hover {
  transform: translateY(-4px);
  background: color-mix(in oklch, white, transparent 82%);
  box-shadow: 0 20px 48px color-mix(in oklch, black, transparent 55%);
}

.stepCard:hover::before { opacity: 1; }

.stepCard_number {
  font-family: 'Merriweather', serif;
  font-size: 3.5rem;
  font-weight: 900;
  color: color-mix(in oklch, white, transparent 75%);
  line-height: 1;
  margin-bottom: var(--space-xs);
}

.stepCard_icon {
  width: 52px;
  height: 52px;
  background: color-mix(in oklch, var(--colorAccent), transparent 75%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorWarm);
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--colorWarm), transparent 65%);
}

.stepCard_title {
  font-size: 1.25rem;
  color: white;
  margin-bottom: var(--space-sm);
}

.stepCard_text {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.stepCard_detail {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--colorWarm);
  letter-spacing: 0.05em;
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in oklch, white, transparent 85%);
}

/* ================================================
   DASHBOARD SECTION
   ================================================ */
.dashboardSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.dashboardSection_header {
  margin-bottom: var(--space-xl);
}

.dashboardGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.dashCard {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--borderDefault);
  padding: var(--space-lg);
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionMid), box-shadow var(--transitionMid),
              border-color var(--transitionMid);
  position: relative;
  overflow: hidden;
}

.dashCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadowLg);
  border-color: var(--borderAccent);
}

.dashCard_bigIcon {
  font-size: 2rem;
  color: var(--colorAccent);
  margin-bottom: var(--space-sm);
  display: block;
}

.dashCard_title {
  font-size: 1.1rem;
  margin-bottom: 0.6em;
  color: var(--colorText);
}

.dashCard p {
  color: var(--colorTextMid);
  font-size: 0.9rem;
  line-height: 1.6;
}

.dashCard_tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colorAccent);
  background: var(--bgAccentSoft);
  padding: 0.25em 0.7em;
  border-radius: var(--radius-pill);
  margin-bottom: 0.6em;
}

.dashCard--wide .dashCard_content {
  padding-top: var(--space-sm);
}

.dashCard--wide .dashCard_imgWrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 200px;
  margin-bottom: var(--space-sm);
}

.dashCard--wide .dashCard_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transitionSlow);
  cursor: zoom-in;
}

.dashCard--wide:hover .dashCard_img { transform: scale(1.04); }

.dashCard--accent {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--colorAccent), white 15%) 0%,
    color-mix(in oklch, var(--colorSecondary), white 10%) 100%);
  border-color: transparent;
  color: white;
}

.dashCard--accent .dashCard_bigIcon { color: white; }
.dashCard--accent .dashCard_title { color: white; }
.dashCard--accent p { color: color-mix(in oklch, white, transparent 20%); }

.dashCard--imageOnly {
  padding: 0;
  min-height: 220px;
  position: relative;
}

.dashCard_bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  display: block;
  cursor: zoom-in;
  transition: transform var(--transitionSlow);
}

.dashCard--imageOnly:hover .dashCard_bgImg { transform: scale(1.04); }

.dashCard_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in oklch, var(--colorPrimary), transparent 20%) 0%, transparent 60%);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: flex-end;
  padding: var(--space-md);
  pointer-events: none;
}

.dashCard_overlayText {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  color: white;
  font-size: 1.1rem;
}

.dashCard--quote {
  background: color-mix(in oklch, var(--colorPrimary), white 96%);
  border-left: 3px solid var(--colorAccent);
}

.dashCard_quoteIcon {
  font-size: 1.5rem;
  color: var(--colorAccentLight);
  margin-bottom: var(--space-sm);
  display: block;
}

.dashCard_quoteText {
  font-family: 'Merriweather', serif;
  font-style: italic;
  color: var(--colorText) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  margin-bottom: var(--space-sm);
}

.dashCard_quoteAttr {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--colorTextLight);
  letter-spacing: 0.05em;
}

/* ================================================
   ABOUT PREVIEW
   ================================================ */
.aboutPreview {
  padding: var(--space-2xl) 0;
  background: var(--bgSecondary);
}

.aboutPreview_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.aboutPreview_visual {
  position: relative;
}

.aboutPreview_img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadowLg);
  cursor: zoom-in;
  transition: transform var(--transitionSlow);
}

.aboutPreview_img:hover { transform: scale(1.02); }

.aboutPreview_badge {
  position: absolute;
  bottom: -1rem;
  right: -0.5rem;
  background: var(--colorAccent);
  color: white;
  border-radius: var(--radius-md);
  padding: 0.6em 1.1em;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadowAccent);
}

.aboutPreview_lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--colorText);
  margin-bottom: var(--space-md);
  line-height: 1.6;
}

.aboutPreview_content p {
  color: var(--colorTextMid);
  margin-bottom: var(--space-md);
}

/* ================================================
   CTA BANNER
   ================================================ */
.ctaBanner {
  position: relative;
  padding: var(--space-2xl) 0;
  background: var(--colorSecondary);
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--colorSecondary), black 5%) 0%,
    color-mix(in oklch, var(--colorAccent), black 10%) 100%);
  overflow: hidden;
  text-align: center;
}

.ctaBanner_content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
}

.ctaBanner_title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  color: white;
  margin-bottom: var(--space-md);
}

.ctaBanner_sub {
  color: color-mix(in oklch, white, transparent 20%);
  font-size: 1.05rem;
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* ================================================
   GALLERY SECTION
   ================================================ */
.gallerySection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.gallerySection_header { margin-bottom: var(--space-xl); }

.galleryGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.galleryGrid_item {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16/10;
  display: block;
  box-shadow: var(--shadowMd);
  cursor: zoom-in;
}

.galleryGrid_item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transitionSlow);
}

.galleryGrid_item:hover img { transform: scale(1.06); }

.galleryGrid_hover {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--colorPrimary), transparent 35%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  opacity: 0;
  transition: opacity var(--transitionMid);
  border-radius: var(--radius-xl);
}

.galleryGrid_item:hover .galleryGrid_hover { opacity: 1; }

/* ================================================
   PAGE HERO (inner pages)
   ================================================ */
.pageHero {
  position: relative;
  padding: calc(var(--navHeight) + var(--space-2xl)) 0 var(--space-2xl);
  background: var(--colorPrimary);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorPrimary), black 15%) 0%,
    color-mix(in oklch, var(--colorSecondary), black 5%) 100%);
  overflow: hidden;
}

.pageHero--compact {
  padding-bottom: var(--space-xl);
}

.pageHero_content {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.pageHero_title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: white;
  margin-bottom: var(--space-md);
}

.pageHero_sub {
  font-size: 1.05rem;
  color: color-mix(in oklch, white, transparent 20%);
  line-height: 1.7;
}

/* ================================================
   DISTINGUE SECTION
   ================================================ */
.distingueSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.distingueGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.distingueCard {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadowSm);
  transition: transform var(--transitionMid), box-shadow var(--transitionMid),
              border-color var(--transitionMid);
}

.distingueCard:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadowLg);
  border-color: var(--borderAccent);
}

.distingueCard_icon {
  width: 56px;
  height: 56px;
  background: var(--bgAccentSoft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorAccent);
  font-size: 1.4rem;
  margin-bottom: var(--space-md);
  border: 1px solid var(--borderAccent);
  transition: background var(--transitionMid), transform var(--transitionMid);
}

.distingueCard:hover .distingueCard_icon {
  background: var(--colorAccent);
  color: white;
  transform: scale(1.08);
}

.distingueCard_title {
  font-size: 1.2rem;
  margin-bottom: var(--space-sm);
  color: var(--colorText);
}

.distingueCard p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-xs);
}

/* ================================================
   VALUES SECTION
   ================================================ */
.valuesSection {
  position: relative;
  padding: var(--space-2xl) 0;
  background: color-mix(in oklch, var(--colorPrimary), black 8%);
  overflow: hidden;
}

.valuesSection_header {
  text-align: center;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 2;
}

.valuesGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  position: relative;
  z-index: 2;
}

.valueItem {
  padding: var(--space-lg);
  border-left: 2px solid color-mix(in oklch, var(--colorAccent), transparent 50%);
  transition: border-color var(--transitionMid);
}

.valueItem:hover { border-color: var(--colorWarm); }

.valueItem_num {
  display: block;
  font-family: 'Merriweather', serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: color-mix(in oklch, var(--colorWarm), transparent 40%);
  margin-bottom: 0.5em;
}

.valueItem h3 {
  color: white;
  font-size: 1.1rem;
  margin-bottom: 0.6em;
}

.valueItem p {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ================================================
   DISTINGUE IMG
   ================================================ */
.distingueImg {
  padding: var(--space-2xl) 0;
  background: var(--bgSecondary);
}

.distingueImg_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.distingueImg_main {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadowLg);
  aspect-ratio: 16/9;
}

.distingueImg_main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform var(--transitionSlow);
}

.distingueImg_main:hover img { transform: scale(1.03); }

.distingueImg_side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.distingueImg_card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--borderDefault);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transitionMid), transform var(--transitionMid);
}

.distingueImg_card:hover { box-shadow: var(--shadowMd); transform: translateY(-2px); }

.distingueImg_card i {
  font-size: 1.4rem;
  color: var(--colorAccent);
  margin-bottom: 0.6em;
  display: block;
}

.distingueImg_card h3 {
  font-size: 1rem;
  margin-bottom: 0.5em;
  color: var(--colorText);
}

.distingueImg_card p {
  font-size: 0.9rem;
  color: var(--colorTextMid);
  line-height: 1.6;
}

/* ================================================
   OFFER SECTION
   ================================================ */
.offerSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.offerCards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.offerCard {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadowMd);
  transition: transform var(--transitionMid), box-shadow var(--transitionMid);
  display: flex;
  flex-direction: column;
}

.offerCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadowLg);
}

.offerCard--featured {
  border-color: var(--colorAccent);
  box-shadow: var(--shadowAccent), var(--shadowMd);
  position: relative;
}

.offerCard--featured::before {
  content: 'Più richiesto';
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--colorAccent);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
}

.offerCard_header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--borderDefault);
}

.offerCard_iconWrap {
  width: 52px;
  height: 52px;
  background: var(--bgAccentSoft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorAccent);
  font-size: 1.3rem;
  flex-shrink: 0;
  border: 1px solid var(--borderAccent);
}

.offerCard_type {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--colorAccent);
  margin-bottom: 0.3em;
}

.offerCard_title {
  font-size: 1.25rem;
  color: var(--colorText);
}

.offerCard_body {
  padding: var(--space-lg);
  flex: 1;
}

.offerCard_body p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.offerCard_features {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.offerCard_features li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.9rem;
  color: var(--colorTextMid);
}

.offerCard_features i {
  color: var(--colorAccent);
  font-size: 0.8rem;
  flex-shrink: 0;
}

.offerCard_footer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--borderDefault);
}

/* ================================================
   PROCESS TIMELINE
   ================================================ */
.processDetail {
  padding: var(--space-2xl) 0;
  background: var(--bgSecondary);
}

.processDetail_header { margin-bottom: var(--space-xl); }

.processTimeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  padding-left: calc(var(--space-xl) + var(--space-sm));
}

.processTimeline::before {
  content: '';
  position: absolute;
  left: calc(var(--space-md) + 8px);
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: linear-gradient(to bottom, var(--colorAccent), color-mix(in oklch, var(--colorAccent), transparent 80%));
}

.processTimeline_item {
  display: flex;
  gap: var(--space-lg);
  padding: var(--space-md) 0;
  position: relative;
}

.processTimeline_marker {
  position: absolute;
  left: calc(-1 * var(--space-xl) - var(--space-sm) + calc(var(--space-md)));
  top: var(--space-md);
  width: 40px;
  height: 40px;
  background: var(--colorAccent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
  box-shadow: var(--shadowAccent);
  z-index: 1;
}

.processTimeline_content h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5em;
  color: var(--colorText);
}

.processTimeline_content p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ================================================
   FAQ SECTION
   ================================================ */
.faqSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.faqSection_header { margin-bottom: var(--space-xl); }

.faqList {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.faqItem {
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
  transition: box-shadow var(--transitionMid);
}

.faqItem:hover { box-shadow: var(--shadowSm); }

.faqItem_q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--colorText);
  transition: color var(--transitionMid), background var(--transitionMid);
  min-height: 44px;
}

.faqItem_q:hover { background: var(--bgSecondary); }

.faqItem_q i {
  flex-shrink: 0;
  color: var(--colorAccent);
  transition: transform var(--transitionMid);
}

.faqItem_q[aria-expanded="true"] i { transform: rotate(180deg); }

.faqItem_a {
  padding: 0 var(--space-lg) var(--space-md);
  border-top: 1px solid var(--borderDefault);
}

.faqItem_a p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
  padding-top: var(--space-sm);
}

/* ================================================
   SCENARIO GRID
   ================================================ */
.recognizeSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.recognizeSection_header { margin-bottom: var(--space-xl); }

.recognizeSection_intro {
  color: var(--colorTextMid);
  font-size: 1.05rem;
  max-width: 600px;
  margin-top: var(--space-xs);
}

.scenarioGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.scenarioCard {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadowSm);
  position: relative;
  transition: transform var(--transitionMid), box-shadow var(--transitionMid),
              border-color var(--transitionMid);
}

.scenarioCard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadowMd);
  border-color: var(--borderAccent);
}

.scenarioCard_num {
  font-family: 'Merriweather', serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--colorAccent);
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
}

.scenarioCard p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: italic;
}

/* ================================================
   PROFILE SECTION
   ================================================ */
.profileSection {
  position: relative;
  padding: var(--space-2xl) 0;
  background: color-mix(in oklch, var(--colorPrimary), black 8%);
  overflow: hidden;
}

.profileSection_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
  position: relative;
  z-index: 2;
}

.profileSection_text p {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.profileList {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.profileList_item {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  color: color-mix(in oklch, white, transparent 15%);
  font-size: 0.95rem;
}

.profileList_item i {
  color: var(--colorWarm);
  flex-shrink: 0;
  margin-top: 0.2em;
}

.profileSection_visual img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadowLg);
  cursor: zoom-in;
  transition: transform var(--transitionSlow);
}

.profileSection_visual img:hover { transform: scale(1.02); }

/* ================================================
   NOT FOR SECTION
   ================================================ */
.notForSection {
  padding: var(--space-2xl) 0;
  background: var(--bgSecondary);
}

.notForSection_header { margin-bottom: var(--space-xl); }
.notForSection_intro {
  color: var(--colorTextMid);
  max-width: 600px;
  margin-top: var(--space-xs);
}

.notForGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.notForCard {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transitionMid);
}

.notForCard:hover { box-shadow: var(--shadowMd); }

.notForCard i {
  font-size: 1.5rem;
  color: color-mix(in oklch, var(--colorAccent), transparent 30%);
  margin-bottom: 0.6em;
  display: block;
}

.notForCard h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5em;
  color: var(--colorText);
}

.notForCard p {
  color: var(--colorTextMid);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ================================================
   CONTACT PAGE
   ================================================ */
.contactSection {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.contactGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contactInfo_title {
  font-size: 1.4rem;
  margin-bottom: var(--space-lg);
  color: var(--colorText);
}

.contactInfo_items {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.contactInfo_item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.contactInfo_iconWrap {
  width: 44px;
  height: 44px;
  background: var(--bgAccentSoft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--colorAccent);
  font-size: 1rem;
  flex-shrink: 0;
  border: 1px solid var(--borderAccent);
  transition: background var(--transitionMid), color var(--transitionMid);
}

.contactInfo_item:hover .contactInfo_iconWrap {
  background: var(--colorAccent);
  color: white;
}

.contactInfo_item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colorTextLight);
  margin-bottom: 0.2em;
}

.contactInfo_item p, .contactInfo_item a {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: color var(--transitionMid);
}

.contactInfo_item a:hover { color: var(--colorAccent);}

.urgentBlock {
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--colorAccent), white 15%) 0%,
    color-mix(in oklch, var(--colorSecondary), white 10%) 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  color: white;
  border: 1px solid color-mix(in oklch, var(--colorAccent), transparent 40%);
  box-shadow: var(--shadowAccent);
}

.urgentBlock_header {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--space-sm);
}

.urgentBlock_header i {
  font-size: 1.2rem;
  color: var(--colorWarm);
}

.urgentBlock_header h3 {
  color: white;
  font-size: 1.1rem;
}

.urgentBlock p {
  color: color-mix(in oklch, white, transparent 15%);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* ================================================
   CONTACT FORM
   ================================================ */
.contactForm_wrap {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-lg);
  box-shadow: var(--shadowLg);
}

.contactForm_title {
  font-size: 1.4rem;
  margin-bottom: 0.3em;
  color: var(--colorText);
}

.contactForm_sub {
  color: var(--colorTextLight);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
}

.formGroup {
  margin-bottom: var(--space-md);
}

.formLabel {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--colorText);
  margin-bottom: 0.4em;
}

.formLabel span { color: var(--colorAccent); }

.formInput {
  width: 100%;
  padding: 0.75em 1em;
  border: 1.5px solid var(--borderDefault);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: var(--colorText);
  background: var(--bgPrimary);
  transition: border-color var(--transitionMid), box-shadow var(--transitionMid),
              background var(--transitionMid);
  min-height: 44px;
  outline: none;
  appearance: none;
}

.formInput:focus {
  border-color: var(--colorAccent);
  background: white;
  box-shadow: var(--shadowGlow);
}

.formInput::placeholder { color: var(--colorTextLight); }

.formInput--textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

.formGroup--check {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.checkLabel {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--colorTextMid);
  line-height: 1.5;
}

.checkLabel input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkLabel_box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--borderDefault);
  border-radius: var(--radius-xs);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transitionMid), background var(--transitionMid);
  margin-top: 2px;
}

.checkLabel input:checked + .checkLabel_box {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
}

.checkLabel input:checked + .checkLabel_box::after {
  content: '';
  width: 5px;
  height: 9px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
  display: block;
}

.checkLabel input:focus + .checkLabel_box {
  box-shadow: var(--shadowGlow);
}

.checkLabel a {
  color: var(--colorAccent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.formError {
  display: none;
  background: color-mix(in oklch, red, white 85%);
  border: 1px solid color-mix(in oklch, red, white 60%);
  border-radius: var(--radius-md);
  padding: 0.75em 1em;
  font-size: 0.875rem;
  color: color-mix(in oklch, red, black 20%);
  margin-bottom: var(--space-sm);
}

.formError.is-visible { display: block; }

/* ================================================
   MAP SECTION
   ================================================ */
.mapSection {
  padding: var(--space-2xl) 0;
  background: var(--bgSecondary);
}

.mapSection_header { margin-bottom: var(--space-xl); }

.mapSection_wrap {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadowLg);
  border: 1px solid var(--borderDefault);
}

/* ================================================
   THANKS PAGE
   ================================================ */
.thanksHero {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--colorPrimary);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorPrimary), black 15%) 0%,
    color-mix(in oklch, var(--colorAccent), black 10%) 100%);
  overflow: hidden;
  text-align: center;
  padding: calc(var(--navHeight) + var(--space-xl)) var(--space-md) var(--space-xl);
}

.thanksHero_content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.thanksHero_icon {
  font-size: 4rem;
  color: var(--colorWarm);
  margin-bottom: var(--space-md);
  animation: iconPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes iconPop {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.thanksHero_title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: white;
  margin-bottom: var(--space-md);
}

.thanksHero_sub {
  color: color-mix(in oklch, white, transparent 20%);
  font-size: 1.1rem;
  line-height: 1.7;
}

.thanksNext {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.thanksNext_content {
  max-width: 700px;
}

.thanksNext_title {
  font-size: 1.8rem;
  margin-bottom: var(--space-xl);
  color: var(--colorText);
}

.thanksNext_steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.thanksNext_step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.thanksNext_stepNum {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--colorAccent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadowAccent);
  flex-shrink: 0;
}

.thanksNext_step h3 {
  font-size: 1.05rem;
  margin-bottom: 0.4em;
  color: var(--colorText);
}

.thanksNext_step p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.thanksNext_actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ================================================
   LEGAL PAGES
   ================================================ */
.legalHero {
  position: relative;
  padding: calc(var(--navHeight) + var(--space-xl)) 0 var(--space-xl);
  background: var(--colorPrimary);
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorPrimary), black 15%) 0%,
    color-mix(in oklch, var(--colorSecondary), black 5%) 100%);
  overflow: hidden;
}

.legalHero--terms {
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorSecondary), black 15%) 0%,
    color-mix(in oklch, var(--colorPrimary), black 5%) 100%);
}

.legalHero--cookies {
  background: linear-gradient(145deg,
    color-mix(in oklch, var(--colorAccent), black 25%) 0%,
    color-mix(in oklch, var(--colorPrimary), black 10%) 100%);
}

.legalHero_content {
  position: relative;
  z-index: 2;
}

.legalHero_title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: white;
  margin-bottom: var(--space-sm);
}

.legalHero_meta {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.95rem;
  margin-bottom: 0.4em;
}

.legalHero_date {
  font-size: 0.85rem;
  color: var(--colorWarm);
  font-weight: 600;
}

.legalContent {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.legalContent_wrap {
  max-width: 860px;
}

/* ================================================
   LEGAL ACCORDION
   ================================================ */
.legalAccordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.legalAccordion_item {
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transitionMid);
}

.legalAccordion_item:hover { box-shadow: var(--shadowMd); }

.legalAccordion_item.is-open {
  border-color: color-mix(in oklch, var(--colorAccent), transparent 50%);
  box-shadow: var(--shadowMd);
}

.legalAccordion_header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--colorText);
  transition: background var(--transitionMid), color var(--transitionMid);
  min-height: 56px;
}

.legalAccordion_header:hover { background: var(--bgSecondary); }

.legalAccordion_item.is-open .legalAccordion_header {
  background: var(--bgAccentSoft);
  color: var(--colorAccentDark);
}

.legalAccordion_header i {
  flex-shrink: 0;
  color: var(--colorAccent);
  transition: transform var(--transitionMid);
}

.legalAccordion_item.is-open .legalAccordion_header i {
  transform: rotate(180deg);
}

.legalAccordion_body {
  padding: var(--space-lg);
  border-top: 1px solid var(--borderDefault);
}

.legalAccordion_body p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: var(--space-sm);
}

.legalAccordion_body p:last-child { margin-bottom: 0; }

.legalAccordion_body ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.legalAccordion_body ul li {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.legalAccordion_body strong { color: var(--colorText); }

.legalAccordion_body a {
  color: var(--colorAccent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transitionMid);
}

.legalAccordion_body a:hover { color: var(--colorAccentDark); }

/* ================================================
   ACCESSIBILITY PAGE
   ================================================ */
.accessibilityContent {
  padding: var(--space-2xl) 0;
  background: var(--bgPrimary);
}

.accessibilityContent_wrap {
  max-width: 900px;
}

.accessibilityContent_intro {
  font-size: 1.1rem;
  color: var(--colorTextMid);
  line-height: 1.75;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--borderDefault);
}

.accessibilityGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.accessibilityCard {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadowSm);
  transition: box-shadow var(--transitionMid), transform var(--transitionMid);
}

.accessibilityCard:hover {
  box-shadow: var(--shadowMd);
  transform: translateY(-2px);
}

.accessibilityCard i {
  font-size: 1.6rem;
  color: var(--colorAccent);
  margin-bottom: var(--space-sm);
  display: block;
}

.accessibilityCard h2 {
  font-size: 1.05rem;
  margin-bottom: 0.6em;
  color: var(--colorText);
}

.accessibilityCard p {
  color: var(--colorTextMid);
  font-size: 0.9rem;
  line-height: 1.65;
}

.accessibilityFeedback,
.accessibilityLimits {
  background: white;
  border: 1px solid var(--borderDefault);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadowSm);
  margin-bottom: var(--space-lg);
}

.accessibilityFeedback h2,
.accessibilityLimits h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  color: var(--colorText);
}

.accessibilityFeedback p,
.accessibilityLimits p {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

.accessibilityFeedback ul,
.accessibilityLimits ul {
  list-style: disc;
  padding-left: 1.5em;
  margin: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.accessibilityFeedback ul li,
.accessibilityLimits ul li {
  color: var(--colorTextMid);
  font-size: 0.95rem;
  line-height: 1.6;
}

.accessibilityFeedback a {
  color: var(--colorAccent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transitionMid);
}

.accessibilityFeedback a:hover { color: var(--colorAccentDark); }

/* ================================================
   FOOTER
   ================================================ */
.pageFooter {
  position: relative;
  background: color-mix(in oklch, var(--colorPrimary), black 12%);
  padding: var(--space-2xl) 0 0;
  overflow: hidden;
}

.pageFooter_top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid color-mix(in oklch, white, transparent 88%);
  position: relative;
  z-index: 2;
}

.pageFooter_logo {
  height: 36px;
  width: auto;
  margin-bottom: var(--space-sm);
  filter: brightness(0) invert(1);
}

.pageFooter_tagline {
  color: color-mix(in oklch, white, transparent 35%);
  font-size: 0.875rem;
  line-height: 1.6;
  max-width: 280px;
}

.pageFooter_navTitle {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in oklch, white, transparent 40%);
  margin-bottom: var(--space-sm);
  font-family: 'Outfit', sans-serif;
}

.pageFooter_links {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.pageFooter_links a {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.9rem;
  transition: color var(--transitionMid);
  padding: 0.15em 0;
}

.pageFooter_links a:hover { color: var(--colorWarm); }

.pageFooter_address p {
  color: color-mix(in oklch, white, transparent 25%);
  font-size: 0.9rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

.pageFooter_address i {
  color: var(--colorWarm);
  flex-shrink: 0;
  margin-top: 0.2em;
  font-size: 0.85rem;
}

.pageFooter_address a {
  color: color-mix(in oklch, white, transparent 25%);
  transition: color var(--transitionMid);
}

.pageFooter_address a:hover { color: var(--colorWarm); }

.pageFooter_legal-row {
  padding: var(--space-md) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  position: relative;
  z-index: 2;
}

.pageFooter_legalInfo p {
  color: color-mix(in oklch, white, transparent 55%);
  font-size: 0.78rem;
  line-height: 1.6;
}

.pageFooter_copy {
  color: color-mix(in oklch, white, transparent 55%);
  font-size: 0.8rem;
}

/* ================================================
   COOKIE CONSENT — SPLIT BANNER
   ================================================ */
.cookieConsent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: none;
  background: transparent;
}

.cookieConsent.is-visible { display: block; }

.cookieConsent_inner {
  display: grid;
  grid-template-columns: 1fr;
  background: white;
  box-shadow: 0 -4px 24px color-mix(in oklch, var(--colorPrimary), transparent 70%),
              0 -1px 4px color-mix(in oklch, var(--colorPrimary), transparent 85%);
  border-top: 2px solid var(--borderAccent);
}

.cookieConsent_left {
  padding: var(--space-lg);
  background: color-mix(in oklch, var(--colorPrimary), white 94%);
  border-right: 1px solid var(--borderDefault);
}

.cookieConsent_logo {
  height: 28px;
  margin-bottom: var(--space-sm);
}

.cookieConsent_title {
  font-family: 'Merriweather', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--colorText);
  margin-bottom: 0.4em;
}

.cookieConsent_text {
  font-size: 0.82rem;
  color: var(--colorTextMid);
  line-height: 1.6;
}

.cookieConsent_text a {
  color: var(--colorAccent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookieConsent_right {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.cookieConsent_toggles {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin-bottom: var(--space-xs);
}

.cookieToggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.cookieToggle_label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--colorText);
}

.cookieToggle_sub {
  font-size: 0.75rem;
  color: var(--colorTextLight);
  display: block;
}

.cookieToggle_switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cookieToggle_switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.cookieToggle_slider {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--colorTextLight), transparent 40%);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--transitionMid);
}

.cookieToggle_slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform var(--transitionMid);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cookieToggle_switch input:checked + .cookieToggle_slider {
  background: var(--colorAccent);
}

.cookieToggle_switch input:checked + .cookieToggle_slider::before {
  transform: translateX(20px);
}

.cookieToggle_switch input:disabled + .cookieToggle_slider {
  background: var(--colorAccent);
  opacity: 0.6;
  cursor: not-allowed;
}

.cookieConsent_actions {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.cookieConsent_actions .btn {
  font-size: 0.85rem;
  padding: 0.65em 1.2em;
}

/* ================================================
   RESPONSIVE — TABLET (640px+)
   ================================================ */
@media (min-width: 640px) {
  .howItWorks_cards {
    grid-template-columns: 1fr 1fr;
  }

  .galleryGrid {
    grid-template-columns: 1fr 1fr;
  }

  .galleryGrid_item:first-child {
    grid-column: 1 / -1;
  }

  .scenarioGrid {
    grid-template-columns: 1fr 1fr;
  }

  .notForGrid {
    grid-template-columns: 1fr 1fr;
  }

  .accessibilityGrid {
    grid-template-columns: 1fr 1fr;
  }

  .cookieConsent_inner {
    grid-template-columns: 1fr 1fr;
  }

  .cookieConsent_actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .thanksNext_actions {
    flex-direction: row;
  }
}

/* ================================================
   RESPONSIVE — DESKTOP (768px+)
   ================================================ */
@media (min-width: 768px) {
  .siteHeader_nav {
    display: flex;
  }

  .siteHeader_menuBtn {
    display: none;
  }

  .introSection_grid {
    grid-template-columns: 1fr 1fr;
  }

  .aboutPreview_grid {
    grid-template-columns: 1fr 1fr;
  }

  .profileSection_grid {
    grid-template-columns: 1fr 1fr;
  }

  .distingueImg_grid {
    grid-template-columns: 1.2fr 1fr;
  }

  .contactGrid {
    grid-template-columns: 1fr 1.2fr;
  }

  .howItWorks_cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboardGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashCard--wide {
    grid-column: 1 / 3;
  }

  .dashCard--imageOnly {
    grid-column: 3 / 4;
    grid-row: 1 / 3;
    min-height: 380px;
  }

  .dashCard--quote {
    grid-column: 1 / 3;
  }

  .pageFooter_top {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }

  .pageFooter_legal-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .valuesGrid {
    grid-template-columns: 1fr 1fr;
  }

  .distingueGrid {
    grid-template-columns: 1fr 1fr;
  }

  .offerCards {
    grid-template-columns: 1fr 1fr;
  }

  .offerCard--featured {
    grid-column: 1 / -1;
  }

  .accessibilityGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================
   RESPONSIVE — LARGE (1024px+)
   ================================================ */
@media (min-width: 1024px) {
  .offerCards {
    grid-template-columns: repeat(3, 1fr);
  }

  .offerCard--featured {
    grid-column: auto;
  }

  .galleryGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .galleryGrid_item:first-child {
    grid-column: auto;
  }

  .notForGrid {
    grid-template-columns: repeat(3, 1fr);
  }

  .scenarioGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================================
   UTILITY
   ================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--colorAccent);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

::selection {
  background: color-mix(in oklch, var(--colorAccent), transparent 70%);
  color: var(--colorText);
}

/* ================================================
   INTL TEL INPUT OVERRIDES
   ================================================ */
.iti { width: 100%; }
.iti__flag-container { z-index: 10; }
.iti__selected-flag {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  background: var(--bgSecondary);
  border-right: 1px solid var(--borderDefault);
  transition: background var(--transitionMid);
}
.iti__selected-flag:hover { background: color-mix(in oklch, var(--colorAccent), white 88%); }
#phone { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* ================================================
   PRINT
   ================================================ */
@media print {
  .siteHeader, .mobileOverlay, .cookieConsent, .ctaBanner { display: none; }
  body { color: black; background: white; }
  a { color: black; text-decoration: underline; }
}