/* Sito vetrina (home pubblica e intestazione/piè di pagina delle pagine prodotto).
   Design: artefatto "Sito-Home". Classi con prefisso v- per convivere con marketing.css
   nelle pagine prodotto. Font serviti in locale (DM Sans e Outfit, licenza OFL). */

@font-face { font-family: "DM Sans"; src: url("../fonts/DMSans-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }

:root {
  --v-navy: #071428;
  --v-navy-2: #0B1E3A;
  --v-ink: #0B1E3A;
  --v-bg: #F6F8FB;
  --v-amber: #FFB21A;
  --v-yellow: #FFCB14;
  --v-blue: #0860D0;
  --v-blue-soft: #E3EEFF;
  --v-green: #5FD39A;
  --v-muted: #556378;
  --v-text-2: #3A4A60;
  --v-line: #E2E8F0;
  --v-on-dark: #C3CEDD;
  --v-on-dark-2: #D5DEEA;
  --v-dim: #8FA0B8;
  --v-screen: #0D1520;
  --v-screen-tile: #162131;
  --v-bezel: #1B2433;
}

.v-page {
  margin: 0;
  background: var(--v-bg);
  color: var(--v-ink);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
html:has(.v-page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.v-page) { scroll-behavior: auto; } }

.v-page a, .v-header a, .v-footer a { color: inherit; text-decoration: none; }
.v-page a:hover, .v-header a:hover, .v-footer a:hover { text-decoration: underline; }
.v-header, .v-footer { font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: auto; }
.v-page :focus-visible, .v-header :focus-visible, .v-footer :focus-visible { outline: 3px solid var(--v-amber); outline-offset: 2px; border-radius: 6px; }
.v-display { font-family: "Outfit", "DM Sans", sans-serif; }

.v-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.v-sec { padding-top: 96px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 40px; }
.v-head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.v-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v-blue); }
.v-eyebrow.on-dark { color: var(--v-yellow); }
.v-h2 { margin: 0; font-family: "Outfit", sans-serif; font-size: 42px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.v-lede { margin: 0; font-size: 18px; color: var(--v-muted); }
.v-note { margin: 0; font-size: 14px; color: var(--v-muted); }

.v-btn {
  min-height: 52px; padding: 0 24px; border-radius: 999px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 16px; font-weight: 700; cursor: pointer;
}
.v-page a.v-btn:hover { text-decoration: none; filter: brightness(1.05); }
.v-btn.amber { background: var(--v-amber); color: var(--v-ink); }
.v-btn.ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 600; }
.v-btn.navy { background: var(--v-navy-2); color: #fff; }
.v-btn.outline { min-height: 48px; border: 1px solid var(--v-ink); }
.v-btn svg { flex: none; }

/* ─── Intestazione ─── */

.v-header { background: var(--v-navy); color: #fff; }
.v-bar { padding-top: 18px; padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.v-logo { display: flex; align-items: center; }
.v-logo img { height: 44px; width: auto; display: block; }
.v-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; }
.v-nav a { min-height: 44px; padding: 0 12px; display: flex; align-items: center; color: var(--v-on-dark-2); }
.v-header .v-nav a.v-nav-cta { margin-left: 8px; padding: 0 18px; border-radius: 999px; background: var(--v-amber); color: var(--v-ink); font-weight: 700; justify-content: center; }
.v-header .v-nav a.v-nav-cta:hover { text-decoration: none; filter: brightness(1.05); }
.v-burger {
  display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.35);
  background: transparent; color: #fff; align-items: center; justify-content: center; cursor: pointer;
}

/* ─── Hero ─── */

.v-hero { padding-top: 56px; padding-bottom: 88px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; }
.v-hero-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.v-hero-copy .v-eyebrow { align-self: flex-start; }
.v-hero h1 { margin: 0; font-family: "Outfit", sans-serif; font-size: 58px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.v-hero h1 span { color: var(--v-yellow); }
.v-hero-sub { margin: 0; font-size: 19px; color: var(--v-on-dark); max-width: 560px; }
.v-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.v-ticks { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 10px; font-size: 14px; color: var(--v-on-dark); }
.v-ticks span { display: inline-flex; align-items: center; gap: 8px; }
.v-ticks span::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--v-green); }

.v-hero-art { flex: 1 1 460px; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 18px; }
.v-hero-col { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.v-dev { padding: 12px; border-radius: 18px; background: var(--v-bezel); box-shadow: 0 40px 80px rgba(0,0,0,.45); box-sizing: border-box; max-width: 100%; }
.v-dev-screen { border-radius: 9px; background: var(--v-screen); padding: 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px; }
.v-dev.xl { width: 300px; }
.v-dev.xl .v-dev-screen { height: 190px; }
.v-dev.d7 { width: 230px; padding: 9px; border-radius: 14px; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.v-dev.d7 .v-dev-screen { height: 132px; border-radius: 7px; padding: 10px; gap: 8px; }
.v-dev.d4 { width: 150px; padding: 8px; border-radius: 14px; box-shadow: 0 24px 48px rgba(0,0,0,.4); }
.v-dev.d4 .v-dev-screen { height: 134px; border-radius: 7px; padding: 10px; justify-content: space-between; gap: 0; }
.v-dev-top { display: flex; justify-content: space-between; font-size: 10px; color: var(--v-dim); letter-spacing: .06em; }
.v-dev.d7 .v-dev-top { font-size: 9px; }
.v-dev.d4 .v-dev-top { font-size: 8px; }
.v-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.v-dev.d7 .v-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-tile { background: var(--v-screen-tile); border-radius: 6px; padding: 6px 8px; }
.v-tile small { display: block; font-size: 9px; color: var(--v-dim); }
.v-tile b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; }
.v-dev.d7 .v-tile { padding: 5px 6px; border-radius: 5px; }
.v-dev.d7 .v-tile small { font-size: 8px; }
.v-dev.d7 .v-tile b { font-size: 13px; }
.c-sun { color: var(--v-yellow); }
.c-home { color: #7FB6FF; }
.c-green { color: var(--v-green); }
.v-bars { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 4px; }
.v-bars i { flex: 1 1 0; height: var(--h); background: var(--v-amber); border-radius: 2px 2px 0 0; opacity: .9; }
.v-dev.d7 .v-bars { gap: 3px; }
.v-d4-val small { display: block; font-size: 8px; color: var(--v-dim); }
.v-d4-val b { display: block; font-size: 20px; font-weight: 700; color: var(--v-green); }
.v-meter { height: 6px; border-radius: 999px; background: var(--v-screen-tile); overflow: hidden; }
.v-meter i { display: block; width: 78%; height: 100%; background: var(--v-green); }
.v-d4-solar { font-size: 9px; color: var(--v-yellow); font-weight: 700; }

/* ─── In breve ─── */

.v-strip { background: #fff; border-bottom: 1px solid var(--v-line); }
.v-strip .v-wrap { padding-top: 28px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 20px; }
.v-strip div { display: flex; flex-direction: column; gap: 4px; }
.v-strip b { font-family: "Outfit", sans-serif; font-size: 17px; font-weight: 700; }
.v-strip span { font-size: 14px; color: var(--v-muted); }

/* ─── Ecosistema ─── */

.v-eco { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.v-eco-step { flex: 1 1 220px; min-width: 0; display: flex; align-items: stretch; gap: 12px; }
.v-card { background: #fff; border: 1px solid var(--v-line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.v-eco-step .v-card { flex: 1 1 auto; }
.v-num { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-family: "Outfit", sans-serif; font-weight: 800; font-size: 18px; }
.v-num.n1 { background: #FFF3D6; color: #8A5A00; }
.v-num.n2 { background: #FFE6B8; color: #7A4A00; }
.v-num.n3 { background: var(--v-blue-soft); color: var(--v-blue); }
.v-num.n4 { background: #DDF5E8; color: #146C43; }
.v-card h3 { margin: 0; font-family: "Outfit", sans-serif; font-size: 20px; font-weight: 700; }
.v-card ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--v-text-2); }
.v-arrow { align-self: center; color: #0A77FC; display: flex; }

/* ─── Video ─── */

.v-dark { background: var(--v-navy); color: #fff; }
.v-reel { flex-direction: row; flex-wrap: wrap; align-items: center; }
.v-reel-player { flex: 2 1 560px; min-width: 0; }
.v-reel-player .reel-video figcaption { color: var(--v-dim); }
.v-reel-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.v-reel-side .v-h2 { font-size: 40px; }
.v-chapters { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v-chapters button {
  width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
}
.v-chapters button:hover { border-color: rgba(255,178,26,.6); }
.v-chapters button[aria-pressed="true"] { background: rgba(255,178,26,.14); border-color: var(--v-amber); }
.v-chapters b { font-family: "Outfit", sans-serif; font-weight: 700; color: var(--v-yellow); width: 22px; flex: none; }

/* ─── I display ─── */

.v-models { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.v-model { background: #fff; border: 1px solid var(--v-line); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.v-model.featured { border: 2px solid var(--v-amber); }
.v-model-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v-model-head div { display: flex; flex-direction: column; gap: 2px; }
.v-model h3 { margin: 0; font-family: "Outfit", sans-serif; font-size: 26px; font-weight: 700; }
.v-model h3 a:hover { text-decoration: none; }
.v-model-head span { font-size: 15px; color: var(--v-muted); }
.v-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.v-badge.amber { background: #FFF3D6; color: #7A4A00; }
.v-badge.blue { background: var(--v-blue-soft); color: var(--v-blue); }
.v-model-art { height: 150px; border-radius: 14px; background: #EEF2F7; display: flex; align-items: center; justify-content: center; }
.v-model-art > div { width: var(--w); height: var(--hh); padding: 6px; border-radius: 10px; background: var(--v-bezel); box-sizing: border-box; }
.v-model-art .v-bars { width: 100%; height: 100%; border-radius: 5px; background: var(--v-screen); gap: 2px; padding: 6px; box-sizing: border-box; }
.v-model-art .v-bars i { border-radius: 1px; opacity: 1; }
.v-model dl { margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.v-model dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v-muted); }
.v-model dd { margin: 2px 0 0; }
.v-model .v-btn { margin-top: auto; }

/* ─── Il portale ─── */

.v-white { background: #fff; border-top: 1px solid var(--v-line); border-bottom: 1px solid var(--v-line); }
.v-portal { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 48px; }
.v-portal-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.v-portal-copy .v-btn { align-self: flex-start; }
.v-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.v-checks li { display: flex; gap: 12px; align-items: flex-start; }
.v-check { width: 26px; height: 26px; border-radius: 999px; flex: 0 0 auto; background: var(--v-blue-soft); color: var(--v-blue); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.v-checks b { display: block; }
.v-checks span span { display: block; font-size: 15px; color: var(--v-muted); }

.v-browser { flex: 1 1 520px; min-width: 0; border-radius: 16px; border: 1px solid #D5DEEA; background: #F3F5F7; box-shadow: 0 30px 60px rgba(11,30,58,.14); overflow: hidden; }
.v-browser-top { height: 34px; background: #E8EDF3; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.v-browser-top i { width: 10px; height: 10px; border-radius: 999px; }
.v-browser-top i:nth-child(1) { background: #F2696B; }
.v-browser-top i:nth-child(2) { background: #F5BE4F; }
.v-browser-top i:nth-child(3) { background: #5DC66C; }
.v-browser-top span { margin-left: 12px; flex: 1 1 auto; height: 20px; border-radius: 6px; background: #fff; font-size: 11px; color: var(--v-muted); display: flex; align-items: center; padding: 0 10px; }
.v-browser-body { display: flex; min-height: 330px; }
.v-browser-side { width: 26%; background: #fff; border-right: 1px solid var(--v-line); padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.v-browser-side i { width: 28px; height: 28px; border-radius: 8px; background: #F29A2E; }
.v-browser-side span { height: 26px; font-size: 11px; color: var(--v-text-2); display: flex; align-items: center; padding: 0 8px; }
.v-browser-side span.on { border-radius: 7px; background: #FFF0DC; font-weight: 700; color: #8A4500; }
.v-browser-main { flex: 1 1 auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; min-width: 0; }
.v-browser-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.v-browser-tabs span { font-size: 11px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 2px solid #DCE1E7; background: #fff; }
.v-browser-tabs span.on { font-weight: 700; border-color: #B35600; background: #FFF5E8; }
.v-browser-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.v-browser-kpi div { background: #fff; border: 1px solid #DCE1E7; border-radius: 8px; padding: 8px; }
.v-browser-kpi small { display: block; font-size: 9px; color: #56636F; }
.v-browser-kpi b { display: block; font-size: 15px; font-weight: 700; }
.v-browser-chart { flex: 1 1 auto; background: #fff; border: 1px solid #DCE1E7; border-radius: 8px; padding: 10px; min-height: 150px; box-sizing: border-box; }
.v-browser-chart i { background: #E8850F; opacity: 1; }

/* ─── Come si inizia ─── */

.v-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.v-steps li { gap: 10px; padding: 24px; }
.v-steps .v-step-n { font-family: "Outfit", sans-serif; font-size: 44px; font-weight: 800; line-height: 1; color: var(--v-amber); }
.v-steps p { margin: 0; font-size: 15px; color: var(--v-muted); }

/* ─── Fiducia ─── */

.v-trust-sec { background: var(--v-navy-2); color: #fff; }
.v-trust-sec .v-sec { padding-top: 80px; padding-bottom: 80px; gap: 32px; }
.v-trust-sec .v-h2 { font-size: 36px; line-height: 1.15; max-width: 720px; letter-spacing: 0; }
.v-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.v-trust div { border: 1px solid rgba(255,255,255,.16); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.v-trust h3 { margin: 0; font-family: "Outfit", sans-serif; font-size: 19px; font-weight: 700; color: var(--v-yellow); }
.v-trust p { margin: 0; font-size: 15px; color: var(--v-on-dark); }

/* ─── Domande ─── */

.v-faq-sec { max-width: 880px; gap: 28px; }
.v-faq { display: flex; flex-direction: column; gap: 10px; }
.v-faq details { background: #fff; border: 1px solid var(--v-line); border-radius: 14px; }
.v-faq summary {
  min-height: 60px; padding: 0 20px; cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; font-size: 22px; font-weight: 500; color: var(--v-blue); flex: none; }
.v-faq details[open] summary::after { content: "−"; }
.v-faq p { margin: 0; padding: 0 20px 20px; font-size: 16px; color: var(--v-text-2); }

/* ─── Piè di pagina ─── */

.v-footer { background: var(--v-navy); color: var(--v-on-dark); padding: 0; border: 0; text-align: left; font-size: 16px; }
.v-footer a { color: var(--v-on-dark); }
.v-footer a:hover { color: #fff; }
.v-footer .v-wrap { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 32px; }
.v-foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.v-foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 380px; font-size: 15px; }
.v-foot-brand img { height: 48px; width: auto; align-self: flex-start; }
.v-foot-links { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 10px 32px; font-size: 15px; align-content: start; }
.v-foot-note { margin: 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: var(--v-dim); }

/* ─── Schermi stretti ─── */

@media (max-width: 820px) {
  .v-burger { display: flex; }
  .v-nav { display: none; }
  .v-nav.open { display: flex; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-top: 8px; }
  .v-header .v-nav.open a.v-nav-cta { margin-left: 0; }
  .v-hero h1 { font-size: 40px; }
  .v-h2, .v-reel-side .v-h2 { font-size: 30px; }
  .v-trust-sec .v-h2 { font-size: 28px; }
  .v-sec, .v-trust-sec .v-sec { padding-top: 64px; padding-bottom: 64px; }
  .v-arrow { transform: rotate(90deg); }
  .v-eco-step { flex-direction: column; }
  .v-browser-side { display: none; }
  .v-browser-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Pagine prodotto (marketing.css): la barra non è più fissa sopra l'apertura */
.v-header + .hero { padding-top: 72px; }