@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=DM+Mono:wght@400;500&display=swap');

/* ──────────────────────────────────────────────────────────────────────────
   AI.GOR design language — marketing site · v3 ("la web app in scena").
   Light-first reading surface (off-white pages, navy ink), navy chrome, and
   orange demoted to a *signal* colour. All figures (importi, percentuali, date)
   are set in DM Mono for precision. Motion is sobrio, Apple-style: reveal on
   scroll, headings that "ignite" (grey → navy/orange) as they enter view, and
   self-running in-loop product demos. Tokens mirror design/README.md — keep the
   var *names*, every page reads them.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --navy: #0E1B3C;
  --navy-mid: #1B2C56;   /* navy-700 */
  --navy-light: #243A70; /* lifted navy for gradients */
  --navy-900: #0A1430;   /* deepest navy — footer, alt sections */
  --orange: #F47B20;
  --orange-dark: #D96A10;
  --orange-ink: #C25A0C; /* orange text on light (AA-safe) */
  --orange-soft: #FCEDE0;
  --orange-glow: rgba(244,123,32,0.16);
  --white: #FFFFFF;
  --off-white: #F6F7F9;  /* light reading surface (page) */
  --ink: #0E1B3C;        /* primary text on light */
  --ink-muted: #5E6B86;  /* secondary text on light */
  --grey: #8A93A8;
  --grey-light: #C8CDD8;
  --grey-inactive: #D5DBE6; /* "spento" journey text before it ignites */
  --green: #1F9D57;      /* trust marker (fonte BDNCP) */
  --border: rgba(255,255,255,0.08);   /* hairline on dark */
  --border-light: #E2E6EF;            /* hairline on light */
  --border-faint: #EEF1F6;            /* faintest hairline on light */
  --border-orange: rgba(244,123,32,0.3);
  --text-body: #C8CDD8;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Outfit', sans-serif;
  --font-sans: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--off-white);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--off-white); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 2px; }

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
/* Two-colour heading accent: an <em> (or .accent) inside a heading is the orange
   signal word, upright — the reusable form of the home hero's page-local rule. */
h1 em, h2 em, h3 em, h4 em, .accent { font-style: normal; color: var(--orange); }
abbr[title] { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; color: inherit; }

/* Eyebrow / mono label — DM Mono, tracked uppercase. Orange-ink on light. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.eyebrow.on-dark { color: var(--orange); }

/* Mono figure helper — importi, percentuali, date. */
.figure, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Green "fonte BDNCP · aggiornato" trust marker. */
.trust-line {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--grey);
}
.trust-line::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── AI.GOR CSS WORDMARK ──────────────────────────────────────────────────
   The "AI.G●R" mark — the O is an orange disc with a white catch-light. Used
   inside product mockups; the site chrome (nav/footer) uses the reseller
   logo.png so white-label resellers keep their own brand. */
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.wordmark .o {
  position: relative;
  display: inline-block;
  width: 0.78em; height: 0.78em;
  border-radius: 50%;
  background: var(--orange);
  margin: 0 0.01em;
}
.wordmark .o::after {
  content: '';
  position: absolute;
  top: 13%; right: 15%;
  width: 25%; height: 25%;
  border-radius: 50%;
  background: #fff;
}
.wordmark.on-dark { color: #fff; }

/* ── NAV ── slim, translucent navy, blur backdrop, pill CTA ─────────────────*/
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 58px;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10,20,48,0.72);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow 0.3s, background 0.3s;
}
nav.scrolled {
  background: rgba(10,20,48,0.9);
  box-shadow: 0 6px 24px rgba(10,20,48,0.28);
}
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img { height: 26px; display: block; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.nav-links a {
  position: relative;
  color: var(--grey-light);
  text-decoration: none;
  font-size: 0.81rem;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 99px;
  transition: color 0.25s, background-color 0.25s;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,0.07); }
.nav-links a.active { color: #fff; font-weight: 600; }
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--orange);
}
.nav-links a.nav-accedi { color: #fff; font-weight: 600; margin-left: 0.75rem; opacity: 0.9; }
.nav-links a.nav-accedi:hover { opacity: 1; background: transparent; }
.nav-cta {
  font-family: var(--font-display);
  font-weight: 700 !important;
  font-size: 0.81rem;
  background: var(--orange);
  color: #fff !important;
  padding: 9px 19px !important;
  border-radius: 99px;
  margin-left: 0.5rem;
  box-shadow: 0 4px 16px rgba(244,123,32,0.3);
  transition: transform 0.25s, box-shadow 0.25s !important;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(244,123,32,0.45); background: var(--orange) !important; }

/* hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; }
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: 0.3s; }

/* ── BUTTONS ── pill-shaped ─────────────────────────────────────────────────*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 14px 32px;
  border-radius: 99px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s, color 0.25s;
}
.btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 28px rgba(244,123,32,0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(244,123,32,0.45); }
/* Outline — dark ink on light surfaces (default) … */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--border-light);
  padding: 12.5px 30px;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange-ink); }
/* … and a light variant for dark surfaces (CTA band, footers, heroes). */
.btn-outline.on-dark { color: #fff; border-color: rgba(255,255,255,0.28); }
.btn-outline.on-dark:hover { border-color: var(--orange); color: var(--orange); }

/* ── SECTION COMMONS ────────────────────────────────────────────────────────*/
section, .section { padding: 6rem 4rem; position: relative; }
.section--light { background: var(--off-white); }
.section--white { background: var(--white); }
.section--navy  { background: var(--navy); color: #fff; }
.section--deep  { background: var(--navy-900); color: #fff; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4,
.section--deep h1, .section--deep h2, .section--deep h3, .section--deep h4 { color: #fff; }
.section-light { background: var(--off-white); color: var(--ink); }

.container { max-width: 1200px; margin: 0 auto; }
.section-header { margin-bottom: 3rem; }
.section-header h2 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); margin-top: 0.5rem; line-height: 1.12; }

/* divider bar under an eyebrow */
.divider { width: 48px; height: 3px; background: var(--orange); margin: 0.9rem 0; border-radius: 2px; }

/* ── STAT NUMBER ── */
.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
  color: var(--orange);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── GENERIC CARD ── */
.card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 2rem;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

/* ── FOOTER ── */
footer {
  background: var(--navy-900);
  padding: 4rem 4rem 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}
.footer-brand img { height: 30px; margin-bottom: 1rem; }
.footer-brand p { color: var(--grey); font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.85rem; line-height: 1.7; max-width: 36ch; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 1.2rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul a { color: var(--grey-light); text-decoration: none; font-size: 0.875rem; transition: color 0.2s; }
.footer-col ul a:hover { color: var(--orange); }
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--grey);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.footer-powered strong { color: var(--grey-light); font-weight: 700; }

/* ── SCROLL ANIMATIONS ──────────────────────────────────────────────────────
   Correct-by-default: the CSS resting state is the FINAL, fully-visible state, so
   the page is legible with no JS (or before/without a boot). main.js only arms the
   animated START state (grey / hidden / offset) on out-of-view elements and then
   releases it as they scroll in — the same graceful pattern [data-reveal] uses. */

/* [data-reveal] / .reveal — soft rise as it enters view. Visible by default;
   main.js adds `.pre` to out-of-view elements to arm the rise, then removes it. */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.pre { opacity: 0; transform: translateY(30px); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* [data-journey] — big two-colour headings that "ignite" scrolling in. The resting
   state is the LIVE colour (navy base word + orange accent/number, descriptions
   shown); main.js sets the grey "spento" start on out-of-view steps and flips them
   to colour as they enter. So without JS every heading reads in full navy+orange. */
[data-journey] [data-j] {
  transition: color 0.6s var(--ease), opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-journey] [data-j="accent"] { transition-delay: 0.12s; }
[data-j="dark"] { color: var(--ink); }
[data-j="accent"], [data-j="num"] { color: var(--orange); }
/* On dark authority surfaces the base word is white (mirrors main.js darkTarget). */
.section--navy [data-j="dark"], .section--deep [data-j="dark"],
.page-hero [data-j="dark"], .cta-section [data-j="dark"] { color: #fff; }
[data-j="desc"] { transition-delay: 0.15s; }

/* ── HOVER HOOKS (data-h) ── keyed so the same markup works statically ───────*/
[data-h="card"] { transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; }
[data-h="card"]:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(14,27,60,0.1); border-color: var(--border-orange); }
[data-h="pill"] { transition: transform 0.25s, box-shadow 0.25s; }
[data-h="pill"]:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(244,123,32,0.45); }
[data-h="navlink"]:hover { color: #fff; background: rgba(255,255,255,0.07); }
[data-h="fade"]:hover { opacity: 1 !important; }

/* ── KEYFRAMES ──────────────────────────────────────────────────────────────
   Shared motion vocabulary + the self-running product-demo loops. */
@keyframes aigorPulse { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:0.5; transform: scale(1.4); } }
@keyframes aigorFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes aigorRise { from { opacity:0; transform:translateY(44px); } to { opacity:1; transform:translateY(0); } }
@keyframes growBar { from { height: 0; } }
@keyframes heroThink { 0%,100% { transform: scale(1); box-shadow:0 0 0 0 rgba(244,123,32,0.35); } 50% { transform: scale(1.12); box-shadow:0 0 0 6px rgba(244,123,32,0); } }
@keyframes heroBlink { 0%,50% { opacity:1; } 51%,100% { opacity:0; } }
@keyframes aigorSoftPulse { 0%,100% { box-shadow:0 0 0 0 rgba(244,123,32,0); } 50% { box-shadow:0 0 0 4px rgba(244,123,32,0.16); } }
@keyframes aigorRing { 0%,100% { box-shadow:0 0 0 3px rgba(244,123,32,0.16); } 50% { box-shadow:0 0 0 7px rgba(244,123,32,0.08); } }
@keyframes aigorThink { 0%,100% { transform:scale(1); box-shadow:0 0 0 3px rgba(244,123,32,0.20); } 50% { transform:scale(1.08); box-shadow:0 0 0 5px rgba(244,123,32,0.30); } }
@keyframes aigorBlink { 0%,55% { opacity:1; } 60%,100% { opacity:0; } }
/* chat demo — 18s shared loop */
@keyframes chatM1 { 0%,2% { opacity:0; transform:translateY(12px); } 5%,91% { opacity:1; transform:translateY(0); } 97%,100% { opacity:0; transform:translateY(0); } }
@keyframes chatTyping { 0%,6% { opacity:0; } 9%,17% { opacity:1; } 20%,100% { opacity:0; } }
@keyframes chatR1 { 0%,19% { opacity:0; transform:translateY(12px); } 23%,91% { opacity:1; transform:translateY(0); } 97%,100% { opacity:0; transform:translateY(0); } }
@keyframes chatBar { 0%,23% { transform:scaleY(0); } 31%,91% { transform:scaleY(1); } 97%,100% { transform:scaleY(0); } }
@keyframes chatM2 { 0%,36% { opacity:0; transform:translateY(12px); } 40%,91% { opacity:1; transform:translateY(0); } 97%,100% { opacity:0; transform:translateY(0); } }
@keyframes chatR2 { 0%,47% { opacity:0; transform:translateY(12px); } 52%,91% { opacity:1; transform:translateY(0); } 97%,100% { opacity:0; transform:translateY(0); } }
/* esplora demo — 14s shared loop */
@keyframes espQuery { 0%,2% { opacity:0; } 6%,93% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes espChip1 { 0%,10% { opacity:0; transform:scale(0.85); } 14%,93% { opacity:1; transform:scale(1); } 98%,100% { opacity:0; } }
@keyframes espChip2 { 0%,15% { opacity:0; transform:scale(0.85); } 19%,93% { opacity:1; transform:scale(1); } 98%,100% { opacity:0; } }
@keyframes espChip3 { 0%,20% { opacity:0; transform:scale(0.85); } 24%,93% { opacity:1; transform:scale(1); } 98%,100% { opacity:0; } }
@keyframes espChip4 { 0%,25% { opacity:0; transform:scale(0.85); } 29%,93% { opacity:1; transform:scale(1); } 98%,100% { opacity:0; } }
@keyframes espRow1 { 0%,33% { opacity:0; transform:translateY(10px); } 38%,93% { opacity:1; transform:translateY(0); } 98%,100% { opacity:0; } }
@keyframes espRow2 { 0%,39% { opacity:0; transform:translateY(10px); } 44%,93% { opacity:1; transform:translateY(0); } 98%,100% { opacity:0; } }
@keyframes espRow3 { 0%,45% { opacity:0; transform:translateY(10px); } 50%,93% { opacity:1; transform:translateY(0); } 98%,100% { opacity:0; } }
@keyframes espRow4 { 0%,51% { opacity:0; transform:translateY(10px); } 56%,93% { opacity:1; transform:translateY(0); } 98%,100% { opacity:0; } }
@keyframes espType { 0%,2% { width:0; } 8%,94% { width:100%; } 98%,100% { width:0; } }
/* dashboard demo — 16s shared loop */
@keyframes dashPrompt { 0%,3% { opacity:0; } 8%,93% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes dashGlow { 0%,12% { box-shadow:0 0 0 0 rgba(244,123,32,0); } 16%,20% { box-shadow:0 0 0 7px rgba(244,123,32,0.28); } 26%,100% { box-shadow:0 0 0 0 rgba(244,123,32,0); } }
@keyframes dashCard1 { 0%,22% { opacity:0; transform:translateY(18px) scale(0.985); } 28%,93% { opacity:1; transform:translateY(0) scale(1); } 98%,100% { opacity:0; } }
@keyframes dashCard2 { 0%,29% { opacity:0; transform:translateY(18px) scale(0.985); } 35%,93% { opacity:1; transform:translateY(0) scale(1); } 98%,100% { opacity:0; } }
@keyframes dashCard3 { 0%,36% { opacity:0; transform:translateY(18px) scale(0.985); } 42%,93% { opacity:1; transform:translateY(0) scale(1); } 98%,100% { opacity:0; } }
@keyframes dashBarGrow { 0%,42% { transform:scaleY(0); } 56%,93% { transform:scaleY(1); } 98%,100% { transform:scaleY(0); } }
@keyframes dashType { 0%,3% { width:0; } 10%,93% { width:100%; } 98%,100% { width:0; } }

/* Respect reduced-motion: stop keyframe animations entirely (leaving elements at
   their static, visible state — never frozen on an invisible loop keyframe) and
   keep transitions instant. Reveals still resolve via main.js. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ── GRID DOTS / GLOW HELPERS ──*/
.grid-bg { background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 30px 30px; }
.grid-bg-light { background-image: radial-gradient(circle, rgba(14,27,60,0.05) 1px, transparent 1px); background-size: 40px 40px; }
.glow-blob { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(244,123,32,0.18) 0%, transparent 70%); pointer-events: none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  nav { padding: 0 1.25rem; }
  section, .section { padding: 4.5rem 1.5rem; }
  .nav-links { display: none; flex-direction: column; align-items: flex-start; position: fixed; top: 0; right: -100%; width: 78vw; height: 100vh; background: var(--navy); padding: 5rem 1.5rem 2rem; gap: 0.5rem; transition: right 0.3s; z-index: 99; }
  .nav-links.open { display: flex; right: 0; }
  .nav-links a { width: 100%; font-size: 1rem; padding: 0.75rem 0.5rem; }
  .nav-links a.active::after { display: none; }
  .nav-cta { margin-left: 0; margin-top: 0.5rem; }
  .nav-toggle { display: flex; z-index: 100; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
}

/* ── SUB-PAGE PATTERNS (shared by come-funziona / pmi / grandi / partner / prezzi / privacy) ── */
/* Dark gradient page hero */
.page-hero {
  padding: 9rem 4rem 5rem;
  background: linear-gradient(135deg, #0A1430 0%, #0E1B3C 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-hero .dots { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 40px 40px; }
.page-hero .glow { position: absolute; width: 500px; height: 500px; right: 0; top: -100px; background: radial-gradient(circle, rgba(244,123,32,0.1) 0%, transparent 70%); pointer-events: none; }
.page-hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.page-hero.center { text-align: center; }
.page-hero.center .page-hero-content { display: flex; flex-direction: column; align-items: center; }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.06; letter-spacing: -0.025em; margin: 1rem 0; max-width: 22ch; }
.page-hero .eyebrow { color: var(--orange); }
.page-hero p.sub { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 1.05rem; line-height: 1.7; color: var(--text-body); max-width: 56ch; font-weight: 400; }
.page-hero .ctas { display: flex; gap: 14px; margin-top: 2rem; flex-wrap: wrap; }
.page-hero.center .ctas { justify-content: center; }

/* Big "ignite" headings on light sub-page sections */
.j-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.028em; line-height: 1.1; }
.j-h2 { font-size: clamp(1.7rem, 2.9vw, 2.4rem); margin: 0.5rem 0 0; }
.j-h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 0.6rem 0 1.1rem; }
.sub-lead { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.95rem; color: var(--ink-muted); line-height: 1.75; }
.section--navy .sub-lead, .section--deep .sub-lead, .page-hero .sub-lead { color: var(--text-body); }

/* Journey list rows (numbered big-text steps) */
.journey-rows { max-width: 1080px; }
.journey-row { display: flex; gap: 36px; align-items: baseline; padding: 44px 0; border-bottom: 1px solid #EAEDF3; }
.journey-row:last-child { border-bottom: none; }
.journey-row .num { font-family: var(--font-mono); font-size: 1rem; font-weight: 500; flex-shrink: 0; width: 44px; }
.journey-row .role { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange-ink); display: block; margin-bottom: 6px; }
.journey-row h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.028em; line-height: 1.08; margin: 0; }
.journey-row p { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.92rem; color: var(--ink-muted); line-height: 1.7; margin: 14px 0 0; max-width: 56ch; }

/* CTA band (shared) */
.cta-section { background: linear-gradient(135deg, #0E1B3C 0%, #1B2C56 100%); position: relative; overflow: hidden; color: #fff; }
.cta-section .cta-glow { position: absolute; width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(244,123,32,0.1) 0%, transparent 65%); pointer-events: none; }
.cta-section .eyebrow { color: var(--orange); }
.cta-section h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; margin: 1.5rem 0; }
.cta-section p { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 1rem; color: var(--text-body); max-width: 48ch; margin: 0 0 2.5rem; line-height: 1.7; }
.cta-btns { display: flex; gap: 16px; flex-wrap: wrap; }

/* Generic feature-row list (icon + dark/accent title + desc) */
.feat-row { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid var(--border-light); }
.feat-row:last-child { border-bottom: none; }
.feat-icon { width: 44px; height: 44px; flex-shrink: 0; background: var(--orange-soft); border: 1px solid var(--border-orange); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.feat-row h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 5px; }
.feat-row p { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.85rem; color: var(--ink-muted); line-height: 1.65; margin: 0; }

@media (max-width: 900px) {
  .page-hero { padding: 7rem 1.5rem 3.5rem; }
  .journey-row { flex-direction: column; gap: 8px; padding: 32px 0; }
}

/* ── CONTACT / LEAD FORMS ──────────────────────────────────────────────────
   Shared form styling for the contact sections (partnership / enterprise /
   subscription). Posts to the /api/contact Pages Function → Slack. */
/* v3: light reading surface, white form card — matches the rest of the redesign. */
.contact-section { background: var(--off-white); color: var(--ink); }
.contact-section h1, .contact-section h2, .contact-section h3, .contact-section h4 { color: var(--ink); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 2rem; }
.contact-text h3 { font-size: 1.7rem; letter-spacing: -0.02em; margin-bottom: 1rem; }
.contact-text p { font-family: var(--font-mono); letter-spacing: -0.02em; color: var(--ink-muted); line-height: 1.8; margin-bottom: 1.5rem; font-size: 0.9rem; }
.contact-list { list-style: none; }
.contact-list li { display: flex; gap: 0.75rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--border-light); font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-muted); }
.contact-list li:last-child { border-bottom: none; }
.contact-list li a { color: var(--orange-ink); text-decoration: none; }
.contact-list .icon { font-size: 1rem; flex-shrink: 0; }
.contact-form { background: #fff; border: 1px solid var(--border-light); border-radius: 20px; padding: 2.5rem; box-shadow: 0 24px 70px rgba(14,27,60,0.09); }
.contact-form h3 { font-size: 1.3rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.contact-form > p { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); margin-bottom: 1.75rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.5rem; }
.form-group input, .form-group select, .form-group textarea { width: 100%; background: var(--off-white); border: 1px solid var(--border-light); border-radius: 10px; padding: 0.8rem 1rem; color: var(--ink); font-family: var(--font-sans); font-size: 0.9rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; }
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--grey); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(244,123,32,0.12); }
/* Styled dropdown — native chevron replaced with an inline SVG so selects read
   like the rest of the form (not raw OS widgets). */
.form-group select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A93A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.form-group select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23F47B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); }
.form-group select:required:invalid { color: var(--grey); }
.form-group select option { background: #fff; color: var(--ink); }
.form-group select option[value=""] { color: var(--grey); }
.form-group textarea { resize: none; height: 88px; }
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 8px; font-size: 0.82rem; line-height: 1.5; }
.form-msg.ok { display: block; background: rgba(31,157,87,0.1); border: 1px solid rgba(31,157,87,0.35); color: #157a41; }
.form-msg.err { display: block; background: rgba(200,60,40,0.08); border: 1px solid rgba(200,60,40,0.3); color: #b23a26; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── LEAD SPLIT CARD ────────────────────────────────────────────────────────
   The shared lead-capture layout: a navy pitch panel + a white form panel.
   Used by the prezzi free-trial, the Enterprise demo and the Partner form so
   every form on the site looks the same. */
.lead-split { display: flex; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 80px rgba(14,27,60,0.18); background: #fff; border: 1px solid var(--border-light); max-width: 1160px; margin: 0 auto; }
.lead-split .ls-left { flex: 1; background: #0E1B3C; padding: 46px 52px 42px; color: #fff; position: relative; overflow: hidden; }
.lead-split .ls-left .glow { position: absolute; top: -60px; right: -40px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(244,123,32,0.2) 0%, transparent 70%); pointer-events: none; }
.lead-split .ls-left h2, .lead-split .ls-left h3 { color: #fff; font-size: 1.7rem; letter-spacing: -0.02em; margin: 0.75rem 0 1rem; position: relative; }
.lead-split .ls-left > p { font-family: var(--font-mono); letter-spacing: -0.02em; font-size: 0.9rem; color: var(--text-body); line-height: 1.7; position: relative; margin: 0; }
.ls-list { list-style: none; margin: 1.5rem 0; position: relative; }
.ls-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--grey-light); line-height: 1.5; }
.ls-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.ls-stats { display: flex; gap: 32px; margin-top: 1.5rem; position: relative; }
.ls-stats .n { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: #fff; line-height: 1; }
.ls-stats .n.orange { color: var(--orange); }
.ls-stats small { display: block; font-family: var(--font-mono); font-size: 0.68rem; color: var(--grey); margin-top: 6px; }
.ls-contact { position: relative; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--grey-light); }
.ls-contact a { color: #fff; text-decoration: none; }
.lead-split .ls-right { flex: 1; background: #fff; padding: 46px 52px; }
.lead-split .ls-right .ls-form-head { font-size: 1.3rem; letter-spacing: -0.02em; margin: 0.4rem 0 0.4rem; }
.lead-split .ls-right .ls-form-sub { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-muted); margin: 0 0 1.5rem; }
.lead-split .ls-right .fine { font-family: var(--font-mono); font-size: 0.68rem; color: var(--grey); margin-top: 1rem; line-height: 1.5; }
@media (max-width: 900px) {
  .lead-split { flex-direction: column; }
  .lead-split .ls-left, .lead-split .ls-right { padding: 36px 28px; }
}