/* VH Software — main.css (Redesign 2024) */

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

:root {
  --bg: #f5f7fc;
  --bg2: #ffffff;
  --bg3: #eef1f8;
  --bg4: #e3e8f4;
  --blue: #1655d4;
  --blue2: #2a6df5;
  --blue3: #5b93ff;
  --blue-bg: #eef3ff;
  --blue-bg2: #dce8ff;
  --text: #0f1a38;
  --text2: #3d4a6b;
  --text3: #6b7a9e;
  --border: #d3daf0;
  --border2: #bcc6e5;
  --success: #0d9e6e;
  --success-bg: #e6f7f2;
  --warn: #c07a00;
  --warn-bg: #fef5e0;
  --premium: #a0550a;
  --premium-bg: #fff0e5;
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 1px 4px rgba(15,26,56,.07), 0 4px 16px rgba(15,26,56,.06);
  --shadow-md: 0 4px 12px rgba(15,26,56,.10), 0 12px 40px rgba(15,26,56,.08);
  --shadow-blue: 0 6px 24px rgba(22,85,212,.18);
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  /* Backward compat aliases for old templates */
  --primary: #1655d4;
  --bg-alt: #eef1f8;
  --bg-dark: #0c3660;
  --amber: #2a6df5;
  --amber-light: #eef3ff;
  --text-muted: #6b7a9e;
  --border-color: #d3daf0;
  --radius-md: 8px;
}

html { scroll-behavior: smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  min-height: 100vh;
  overflow-x: hidden;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }
@keyframes scanBeam { 0% { opacity: 0; transform: translateY(0) } 15% { opacity: 1 } 85% { opacity: 1 } 100% { opacity: 0; transform: translateY(72px) } }

/* ── NAV ─────────────────────────────────────────────────────── */
nav.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 80px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(15,26,56,.06);
}
.nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; cursor: pointer }
.nav-logo img,
.nav-logo .custom-logo-link img,
.nav-logo .custom-logo {
  height: 46px !important;
  width: auto !important;
  max-height: 46px !important;
  max-width: 180px;
  display: block;
  object-fit: contain;
}
.nav-logo .custom-logo-link {
  display: flex;
  align-items: center;
  height: 46px;
  overflow: hidden;
}
/* Logo footer */
.footer-brand img,
.footer-brand .custom-logo-link img,
.footer-brand .custom-logo {
  height: 36px !important;
  width: auto !important;
  max-height: 36px !important;
  max-width: 160px;
  display: block;
  object-fit: contain;
}
.footer-brand .custom-logo-link { display: inline-flex; align-items: center }
.nav-logo-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(22,85,212,.3) }
.nav-logo-icon svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2 }
.nav-logo-text { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: 0.01em }
.nav-logo-text span { color: var(--blue2) }
.nav-links { display: flex; align-items: center; gap: 2px }
.nav-link { padding: 8px 16px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--text2); background: none; border: none; cursor: pointer; transition: var(--transition); font-family: var(--font-body); text-decoration: none; display: inline-block }
.nav-link:hover, .nav-link.active { color: var(--blue); background: var(--blue-bg) }
.nav-cta { padding: 9px 22px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius); font-size: 14px; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: var(--transition); font-family: var(--font-body); text-transform: uppercase; box-shadow: var(--shadow-blue); text-decoration: none }
.nav-cta:hover { background: var(--blue2); transform: translateY(-1px); color: #fff }

/* ── HERO ────────────────────────────────────────────────────── */
.hero { min-height: 100vh; display: flex; align-items: center; padding: 114px 48px 60px; background: linear-gradient(160deg, #ffffff 0%, #f0f5ff 55%, #e8efff 100%); position: relative; overflow: hidden }
.hero-dots { position: absolute; inset: 0; background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.45; pointer-events: none }
.hero-blob { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(22,85,212,.10) 0%, transparent 65%); top: -60px; right: -80px; pointer-events: none }
.hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1 }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 99px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; color: var(--blue); text-transform: uppercase; margin-bottom: 22px }
.hero-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--blue2); animation: pulse 2s infinite }
h1 { font-family: var(--font-head); font-size: clamp(48px, 6vw, 76px); font-weight: 800; line-height: 1.0; letter-spacing: -0.01em; color: var(--text); margin-bottom: 22px }
h1 .accent { color: var(--blue2) }
.hero-desc { font-size: 17px; color: var(--text2); line-height: 1.75; margin-bottom: 38px; max-width: 480px }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }

.btn-primary { padding: 13px 30px; border-radius: var(--radius); background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; letter-spacing: 0.03em; border: none; cursor: pointer; transition: var(--transition); font-family: var(--font-body); text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; box-shadow: var(--shadow-blue); text-decoration: none }
.btn-primary:hover { background: var(--blue2); transform: translateY(-2px); color: #fff }
.btn-primary svg { width: 17px; height: 17px; transition: var(--transition) }
.btn-primary:hover svg { transform: translateX(4px) }

.btn-outline { padding: 12px 26px; border-radius: var(--radius); background: #fff; color: var(--text); font-size: 15px; font-weight: 500; border: 1.5px solid var(--border2); cursor: pointer; transition: var(--transition); font-family: var(--font-body); box-shadow: var(--shadow); text-decoration: none; display: inline-flex; align-items: center; gap: 8px }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg) }

.hero-stats { display: flex; gap: 28px; margin-top: 44px; padding-top: 28px; border-top: 1.5px solid var(--border) }
.hero-stat-val { font-family: var(--font-head); font-size: 30px; font-weight: 800; color: var(--text) }
.hero-stat-label { font-size: 13px; color: var(--text3); margin-top: 2px }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center }
.hero-visual a:hover img { opacity: 1 !important }

/* ── FEATURES BAR ────────────────────────────────────────────── */
.features-bar { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 48px }
.features-bar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.feat-item { display: flex; align-items: center; gap: 12px }
.feat-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.feat-icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 1.8 }
.feat-text { font-size: 14px; color: var(--text2); line-height: 1.4 }
.feat-text strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 1px; font-size: 15px }

/* ── SECTIONS ────────────────────────────────────────────────── */
section { padding: 80px 48px; position: relative }
.container { max-width: 1200px; margin: 0 auto; width: 100% }
.section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; display: flex; align-items: center; gap: 10px }
.section-label::before { content: ''; width: 20px; height: 2px; background: var(--blue) }
h2 { font-family: var(--font-head); font-size: clamp(30px, 4.5vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px }
.section-desc { font-size: 17px; color: var(--text2); line-height: 1.75; max-width: 540px; margin-bottom: 48px }

/* ── ABOUT ───────────────────────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center }
.about-image-area { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow) }
.about-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.about-metric { background: var(--bg); border-radius: var(--radius); padding: 20px; border: 1px solid var(--border); position: relative; overflow: hidden }
.about-metric::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue) }
.about-metric-val { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px }
.about-metric-val span { font-size: 18px; color: var(--blue) }
.about-metric-label { font-size: 13px; color: var(--text3) }
.about-text h2 { margin-bottom: 20px }
.about-text p { font-size: 16px; color: var(--text2); line-height: 1.8; margin-bottom: 18px }
.about-checks { margin-top: 24px; display: flex; flex-direction: column; gap: 12px }
.about-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--text2) }
.about-check-icon { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; background: var(--success-bg); border: 1.5px solid #a7e8d3; display: flex; align-items: center; justify-content: center }
.about-check-icon svg { width: 11px; height: 11px; stroke: var(--success); stroke-width: 2.5; fill: none }

/* ── PRODUCTS ────────────────────────────────────────────────── */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.product-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; box-shadow: var(--shadow); text-decoration: none; color: inherit }
.product-card:hover { border-color: var(--blue3); transform: translateY(-4px); box-shadow: var(--shadow-md); color: inherit }
.product-img { background: #fff; padding: 28px; display: flex; align-items: center; justify-content: center; min-height: 170px; border-bottom: 1px solid var(--border); position: relative }
.product-body { padding: 22px; flex: 1; display: flex; flex-direction: column }
.product-badge { display: inline-flex; padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 10px }
.badge-entry { background: var(--success-bg); color: var(--success); border: 1px solid #b2e8d6 }
.badge-pro { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-bg2) }
.badge-premium { background: var(--premium-bg); color: var(--premium); border: 1px solid #ffd9b8 }
.product-name { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 7px }
.product-desc { font-size: 13.5px; color: var(--text2); line-height: 1.6; margin-bottom: 14px; flex: 1 }
.product-specs { display: flex; flex-direction: column; gap: 5px; margin-bottom: 18px; padding: 12px 14px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border) }
.spec-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px }
.spec-key { color: var(--text3) }
.spec-val { color: var(--text); font-weight: 600; font-family: var(--font-head); font-size: 13px }
.product-footer { display: flex; justify-content: space-between; align-items: center }
.product-price { font-size: 12px; color: var(--text3) }
.product-price strong { display: block; font-size: 18px; color: var(--text); font-family: var(--font-head); font-weight: 700 }
.btn-details { padding: 8px 18px; border-radius: var(--radius); background: var(--blue-bg); color: var(--blue); border: 1.5px solid var(--blue-bg2); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: var(--transition); font-family: var(--font-body); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; text-decoration: none }
.btn-details:hover { background: var(--blue); color: #fff; border-color: var(--blue) }
.btn-details svg { width: 13px; height: 13px }

/* ── WHY GRID ────────────────────────────────────────────────── */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.why-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); transition: var(--transition) }
.why-card:hover { border-color: var(--blue3); box-shadow: var(--shadow-md); transform: translateY(-2px) }
.why-card-icon { width: 46px; height: 46px; border-radius: 10px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; margin-bottom: 18px }
.why-card-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 1.8 }
.why-card h3 { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px }
.why-card p { font-size: 14px; color: var(--text2); line-height: 1.7 }

/* ── DIVIDER ─────────────────────────────────────────────────── */
.section-divider { border: none; border-top: 1px solid var(--border); margin: 0 48px }

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band { background: linear-gradient(135deg, var(--blue) 0%, #1245b0 100%); padding: 64px 48px; text-align: center; position: relative; overflow: hidden }
.cta-band::before { content: ''; position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 24px 24px; inset: 0 }
.cta-band h2 { margin-bottom: 14px; position: relative; color: #fff }
.cta-band p { font-size: 17px; color: rgba(255,255,255,.82); margin-bottom: 34px; position: relative }
.cta-actions { display: flex; gap: 14px; justify-content: center; position: relative; flex-wrap: wrap }
.cta-band .btn-primary { background: #fff; color: var(--blue); box-shadow: 0 4px 20px rgba(0,0,0,.15) }
.cta-band .btn-primary:hover { background: #f0f5ff; color: var(--blue) }
.cta-band .btn-outline { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); box-shadow: none }
.cta-band .btn-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff }

/* ── PARTNERS ────────────────────────────────────────────────── */
.partners-row { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; padding: 32px 0 }
.partner-logo { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--border2); letter-spacing: 0.06em; transition: var(--transition) }
.partner-logo:hover { color: var(--text3) }

/* ── PRODUCT DETAIL ──────────────────────────────────────────── */
.prod-page-header { padding: 110px 48px 60px; background: linear-gradient(160deg, #fff 0%, var(--blue-bg) 100%); border-bottom: 1px solid var(--border); position: relative; overflow: hidden }
.prod-page-header::before { content: ''; position: absolute; background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 28px 28px; inset: 0; opacity: 0.4; pointer-events: none }
.prod-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text3); margin-bottom: 24px; position: relative; z-index: 1 }
.prod-breadcrumb a { color: var(--blue); text-decoration: none }
.prod-breadcrumb a:hover { text-decoration: underline }
.prod-breadcrumb span { color: var(--border2) }
.prod-header-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; position: relative; z-index: 1 }
.prod-visual { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 44px; display: flex; align-items: center; justify-content: center; min-height: 260px; box-shadow: var(--shadow-md); position: relative; overflow: hidden }
.prod-visual::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--blue), var(--blue3)) }
.prod-model { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--blue); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: 10px }
.prod-info h1 { font-size: clamp(30px, 4vw, 48px); margin-bottom: 14px; color: var(--text) }
.prod-desc { font-size: 16px; color: var(--text2); line-height: 1.75; margin-bottom: 24px }
.prod-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.prod-hl { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--success-bg); border: 1px solid #b2e8d6; font-size: 13px; color: var(--success); font-weight: 600 }
.prod-hl::before { content: '✓' }
.prod-actions { display: flex; gap: 12px; flex-wrap: wrap }
.prod-page-body { padding: 60px 48px 80px; background: var(--bg) }
.prod-body-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; gap: 40px }
.specs-table-wrap h3 { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--text); margin-bottom: 16px }
.specs-wrapper { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 28px }
.specs-table { width: 100%; border-collapse: collapse }
.specs-table tr { border-bottom: 1px solid var(--border) }
.specs-table tr:last-child { border-bottom: none }
.specs-table td { padding: 13px 16px; font-size: 14px }
.specs-table td:first-child { color: var(--text3); width: 42%; font-weight: 500 }
.specs-table td:last-child { color: var(--text); font-weight: 600 }
.specs-table tr:nth-child(even) { background: var(--bg) }
.devis-card { background: #fff; border: 1.5px solid var(--blue-bg2); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: 96px; box-shadow: var(--shadow) }
.devis-card::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--blue), var(--blue3)); margin: -26px -26px 20px; border-radius: var(--radius-lg) var(--radius-lg) 0 0 }
.devis-card h3 { font-family: var(--font-head); font-size: 21px; font-weight: 700; color: var(--text); margin-bottom: 6px }
.devis-card > p { font-size: 14px; color: var(--text2); margin-bottom: 18px }
.devis-card .btn-primary { width: 100%; justify-content: center; margin-bottom: 14px }
.devis-contact { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--bg); border-radius: var(--radius); border: 1px solid var(--border) }
.devis-contact-item { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text2) }
.devis-contact-item svg { width: 15px; height: 15px; stroke: var(--blue); fill: none; stroke-width: 1.9; flex-shrink: 0 }
.devis-contact-item a { color: var(--blue); text-decoration: none }
.devis-contact-item a:hover { text-decoration: underline }
.info-boxes { display: flex; flex-direction: column; gap: 14px; margin-top: 24px }
.info-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow) }
.info-box-title { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; display: flex; align-items: center; gap: 8px }
.info-box-title svg { width: 16px; height: 16px; stroke: var(--blue); fill: none; stroke-width: 2 }
.info-box p { font-size: 13.5px; color: var(--text2); line-height: 1.7 }
.include-list { display: flex; flex-direction: column; gap: 7px; margin-top: 4px }
.include-item { font-size: 13.5px; color: var(--text2); display: flex; align-items: center; gap: 8px }
.include-item::before { content: '→'; color: var(--blue); font-size: 12px; font-weight: 700 }

/* ── CONTACT ─────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start }
.contact-form { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow) }
.contact-form h3 { font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--text); margin-bottom: 6px }
.contact-form > p { font-size: 14px; color: var(--text2); margin-bottom: 22px }
.form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow) }
.form-group { margin-bottom: 16px }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; letter-spacing: 0.02em }
.form-input, .form-select, .form-textarea,
.form-control,
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 select,
.wpcf7 textarea { width: 100%; padding: 10px 14px; background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text); font-size: 14px; font-family: var(--font-body); transition: var(--transition); outline: none; box-sizing: border-box }
.form-input:focus, .form-select:focus, .form-textarea:focus,
.form-control:focus,
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(22,85,212,.10) }
.form-textarea, textarea.form-control, .wpcf7 textarea { min-height: 120px; resize: vertical }
select.form-control, .wpcf7 select { cursor: pointer }
.wpcf7 input[type="submit"] { width: 100%; padding: 13px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: var(--transition); font-family: var(--font-body); box-shadow: var(--shadow-blue) }
.wpcf7 input[type="submit"]:hover { background: var(--blue2); transform: translateY(-1px) }
/* CF7 — supprimer l'espace entre label et input */
.wpcf7-form-control-wrap { position: relative; display: block; margin-top: 0 }
.wpcf7 p { margin: 0 }
.wpcf7 br { display: none }
.wpcf7 .wpcf7-spinner { display: none }
.wpcf7-not-valid-tip { font-size: 12px; color: #e53e3e; margin-top: 4px; display: block }
.wpcf7-response-output { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius); font-size: 14px; border: none !important }
.wpcf7 .sent .wpcf7-response-output { background: #f0fdf4; color: #166534 }
.wpcf7 .failed .wpcf7-response-output, .wpcf7 .invalid .wpcf7-response-output { background: #fef2f2; color: #991b1b }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.form-submit { width: 100%; padding: 13px; margin-top: 6px; background: var(--blue); color: #fff; border: none; border-radius: var(--radius); font-size: 15px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: var(--transition); font-family: var(--font-body); box-shadow: var(--shadow-blue) }
.form-submit:hover { background: var(--blue2); transform: translateY(-1px) }
.contact-info-cards { display: flex; flex-direction: column; gap: 16px }
.contact-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--shadow) }
.ci-icon { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center }
.ci-icon svg { width: 19px; height: 19px; stroke: var(--blue); fill: none; stroke-width: 1.8 }
.ci-content h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 5px }
.ci-content p, .ci-content a { font-size: 13.5px; color: var(--text2); text-decoration: none; line-height: 1.65; display: block }
.ci-content a:hover { color: var(--blue) }
.ci-content strong { color: var(--text) }

/* ── PAGE HERO ───────────────────────────────────────────────── */
.page-hero { padding: 110px 48px 60px; background: linear-gradient(160deg, #ffffff 0%, var(--blue-bg) 100%); border-bottom: 1px solid var(--border); position: relative; overflow: hidden }
.page-hero::before { content: ''; position: absolute; background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size: 28px 28px; inset: 0; opacity: 0.4; pointer-events: none }
.page-hero-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1 }
.page-hero h1 { font-size: clamp(36px, 5vw, 58px); margin-bottom: 14px }
.page-hero p { font-size: 17px; color: var(--text2); max-width: 580px; line-height: 1.75 }

/* ── TEAM ────────────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px }
.team-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; box-shadow: var(--shadow); transition: var(--transition) }
.team-card:hover { border-color: var(--blue3); box-shadow: var(--shadow-md); transform: translateY(-3px) }
.team-avatar { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; background: var(--blue-bg); border: 3px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--blue) }
.team-name { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 3px }
.team-role { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: 10px }
.team-bio { font-size: 14px; color: var(--text2); line-height: 1.65 }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer { background: #fff; border-top: 1px solid var(--border); padding: 48px 48px 28px }
.footer-inner { max-width: 1200px; margin: 0 auto }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; margin-bottom: 36px }
.footer-brand p { font-size: 14px; color: var(--text2); line-height: 1.75; margin-top: 12px; max-width: 250px }
.footer-col h4 { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 14px }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 9px }
.footer-col ul li a, .footer-col a { font-size: 14px; color: var(--text2); text-decoration: none; transition: var(--transition); display: block }
.footer-col ul li a:hover, .footer-col a:hover { color: var(--blue) }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px }
.footer-bottom p { font-size: 13px; color: var(--text3) }
.footer-bottom-links { display: flex; gap: 20px }
.footer-bottom-links a { font-size: 13px; color: var(--text3); text-decoration: none }
.footer-bottom-links a:hover { color: var(--text) }

/* ── BURGER ──────────────────────────────────────────────────── */
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; border: none; background: none; cursor: pointer; border-radius: var(--radius); transition: var(--transition) }
.burger:hover { background: var(--blue-bg) }
.burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: 0.3s ease; transform-origin: center }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0) }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }

/* ── MOBILE MENU ─────────────────────────────────────────────── */
#mobile-menu { display: none; position: fixed; top: 80px; left: 0; right: 0; bottom: 0; background: rgba(15,26,56,.35); backdrop-filter: blur(2px); z-index: 900; animation: fadeIn 0.2s ease }
#mobile-menu.open { display: block }
.mobile-menu-panel { background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 4px }
.mobile-menu-panel .nav-link { width: 100%; text-align: left; padding: 13px 16px; font-size: 16px; border-radius: var(--radius) }
.mobile-menu-panel .nav-cta { width: 100%; margin-top: 12px; padding: 14px; font-size: 15px; text-align: center; border-radius: var(--radius); display: block }
.mobile-menu-divider { height: 1px; background: var(--border); margin: 8px 0 }

/* ── WORDPRESS COMPAT ────────────────────────────────────────── */

/* Breadcrumb (shown above page-hero) */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 48px; padding-top: 92px }
.breadcrumb-list { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 8px; list-style: none; font-size: 13px; color: var(--text3) }
.breadcrumb-list li { display: flex; align-items: center; gap: 8px }
.breadcrumb-list li:not(:last-child)::after { content: '›'; color: var(--border2) }
.breadcrumb-list a { color: var(--blue); text-decoration: none }
.breadcrumb-list a:hover { text-decoration: underline }

.section-pad { padding: 80px 48px }

/* Old button compat */
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: none; font-family: var(--font-body); transition: var(--transition); font-weight: 600; line-height: 1 }
.btn-sm { padding: 8px 18px !important; font-size: 13px !important; border-radius: var(--radius) }
.btn-lg { padding: 15px 36px !important; font-size: 16px !important }
.btn-outline-dark { padding: 10px 22px; border-radius: var(--radius); background: transparent; color: var(--text); font-size: 14px; font-weight: 600; border: 1.5px solid var(--border2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition) }
.btn-outline-dark:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-bg) }
.btn-cta-white { padding: 13px 30px; background: #fff; color: var(--blue); border: none; border-radius: var(--radius); font-size: 15px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.15); transition: var(--transition) }
.btn-cta-white:hover { background: #f0f5ff; color: var(--blue) }
.btn-cta-outline { padding: 12px 26px; background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45); border-radius: var(--radius); font-size: 15px; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition) }
.btn-cta-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff }

/* Old CTA banner */
.cta-banner { background: linear-gradient(135deg, var(--blue) 0%, #1245b0 100%); padding: 64px 48px; position: relative; overflow: hidden }
.cta-banner::before { content: ''; position: absolute; background-image: radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 24px 24px; inset: 0 }
.cta-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap }
.cta-banner h2 { color: #fff; margin-bottom: 8px }
.cta-banner p { color: rgba(255,255,255,.82); font-size: 16px }

/* Spec pills */
.spec-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); border-radius: 99px; font-size: 12px; color: var(--blue); font-weight: 600; white-space: nowrap }
.spec-pill svg { width: 12px; height: 12px; flex-shrink: 0; stroke: var(--blue); fill: none; stroke-width: 2 }
.product-specs .spec-pill { margin-bottom: 4px }

.product-brand { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px }

/* Old trust bar */
.trust-bar { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 28px 48px }
.trust-items { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap }
.trust-item { display: flex; align-items: center; gap: 12px }
.trust-icon { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.trust-icon svg { width: 20px; height: 20px; stroke: var(--blue); fill: none; stroke-width: 2 }
.trust-info strong { display: block; font-size: 15px; font-weight: 600; color: var(--text) }
.trust-info span { font-size: 13px; color: var(--text2) }

/* Old stats bar */
.stats-bar { background: linear-gradient(135deg, var(--blue) 0%, #1245b0 100%); padding: 48px }
.stats-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center }
.stat-value { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 6px }
.stat-label { font-size: 14px; color: rgba(255,255,255,.75) }

/* Old software section */
.software-section { background: #0c3660; padding: 80px 48px; color: #fff }
.software-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.software-features { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 32px }
.sw-feat { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: rgba(255,255,255,.85) }
.sw-feat-check { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px }
.sw-feat-check svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 3; fill: none }

/* Old feat list */
.feat-list { display: flex; flex-direction: column; gap: 16px }
.feat-item { display: flex; align-items: flex-start; gap: 16px }
.feat-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.feat-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 2 }
.feat-content h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px }
.feat-content p { font-size: 14px; color: var(--text2); line-height: 1.65 }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 56px; align-items: start }
.contact-info-cards { display: flex; flex-direction: column; gap: 16px }
.contact-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow) }
.contact-card-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.contact-card-icon svg { width: 22px; height: 22px; stroke: var(--blue); fill: none; stroke-width: 2 }
.contact-card h4 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px }
.contact-card p { font-size: 14px; color: var(--text2); line-height: 1.6; margin: 0 }
.contact-card a { font-size: 14px; color: var(--blue); text-decoration: none }
.contact-card a:hover { text-decoration: underline }

/* Single scanner — points forts */
.product-features { display: flex; flex-direction: column; gap: 12px; margin-top: 24px }
.pf-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow) }
.pf-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.pf-icon svg { width: 20px; height: 20px; flex-shrink: 0 }
.pf-icon-blue { background: var(--blue-bg); border: 1px solid var(--blue-bg2) }
.pf-icon-blue svg { stroke: var(--blue); fill: none; stroke-width: 2 }
.pf-content { flex: 1 }
.pf-content p { font-size: 14px; color: var(--text2); line-height: 1.65; margin: 0 }

/* ── PAGES LÉGALES ───────────────────────────────────────────── */
.legal-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; align-items: start }
.legal-content { min-width: 0 }
.legal-block { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border) }
.legal-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0 }
.legal-block h2 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 14px }
.legal-block h3 { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); margin: 18px 0 8px }
.legal-block p { font-size: 14px; color: var(--text2); line-height: 1.85; margin-bottom: 12px }
.legal-block a { color: var(--blue); text-decoration: none }
.legal-block a:hover { text-decoration: underline }
.legal-sidebar { position: sticky; top: 100px }
.legal-info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow) }
.legal-info-card h3 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 0 }

/* Misc compat */
.divider-left { margin-left: 0 }
.software-visual { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: 28px }

/* Old clients grid */
.clients-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px }
.client-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; text-align: center; box-shadow: var(--shadow); transition: var(--transition) }
.client-card:hover { border-color: var(--blue3); box-shadow: var(--shadow-md); transform: translateY(-2px) }
.client-icon { width: 52px; height: 52px; border-radius: 12px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px }
.client-icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none }
.client-card h4 { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 6px }
.client-card p { font-size: 13px; color: var(--text2); line-height: 1.6 }

/* Old expertise layout */
.expertise-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center }
.expertise-img-placeholder { background: #0c3660; border-radius: var(--radius-lg); padding: 48px; display: flex; align-items: center; justify-content: center; min-height: 320px }

/* ── ARCHIVE SCANNER ─────────────────────────────────────────── */
.prod-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 32px }
.prod-archive-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: var(--transition) }
.prod-archive-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px) }
.prod-archive-img { background: #fff; display: flex; align-items: center; justify-content: center; min-height: 220px; overflow: hidden }
.prod-archive-img img { width: 100%; height: 220px; object-fit: contain; padding: 24px }
.prod-archive-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.prod-cat-badge { display: inline-flex; align-items: center; padding: 4px 12px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); border-radius: 99px; font-size: 11px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: 0.07em; width: fit-content }
.prod-archive-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin: 0 }
.prod-archive-title a { color: inherit; text-decoration: none }
.prod-archive-title a:hover { color: var(--blue) }
.prod-archive-desc { font-size: 14px; color: var(--text2); line-height: 1.7; margin: 0 }
.prod-spec-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden }
.prod-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--border) }
.prod-spec-row:last-child { border-bottom: none }
.prod-spec-row:nth-child(even) { background: var(--bg3) }
.prod-spec-key { color: var(--text2) }
.prod-spec-val { font-weight: 700; color: var(--blue) }
.prod-archive-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px }
.prod-archive-price { display: flex; flex-direction: column }
.prod-archive-price strong { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text) }
.prod-archive-price span { font-size: 12px; color: var(--text3) }
.prod-archive-cta { font-size: 13px; font-weight: 700; color: var(--blue); text-decoration: none; letter-spacing: 0.03em; transition: var(--transition) }
.prod-archive-cta:hover { color: var(--blue2) }

/* ── SINGLE SCANNER LAYOUT ───────────────────────────────────── */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start }
.product-gallery {}
.product-main-img { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: center; justify-content: center; min-height: 280px; box-shadow: var(--shadow) }
.product-main-img img { max-width: 100%; height: auto; max-height: 340px; object-fit: contain }
.notice { font-size: 13px; color: var(--text2); margin-top: 16px; padding: 10px 14px; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border) }
.notice strong { color: var(--text) }
.notice a { color: var(--blue); text-decoration: none }
.category-link { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text3); text-decoration: none; margin-bottom: 10px }
.category-link a { color: var(--text3); text-decoration: none }
.category-link:hover a, .category-link a:hover { color: var(--blue) }
.product-info h1 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 42px); font-weight: 800; color: var(--text); line-height: 1.1; margin-bottom: 14px }
.product-intro { font-size: 15px; color: var(--text2); line-height: 1.8; margin-bottom: 20px }

/* Single scanner header */
.prod-single-header { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start }
.prod-single-img { background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--blue); border-radius: var(--radius-lg); padding: 36px; display: flex; align-items: center; justify-content: center; min-height: 280px; box-shadow: var(--shadow-md) }
.prod-single-img img { max-width: 100%; max-height: 320px; object-fit: contain }
.prod-stock-notice { font-size: 13px; color: var(--text2); margin-top: 14px; padding: 10px 14px; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border) }
.prod-stock-notice strong { color: var(--text) }
.prod-stock-notice a { color: var(--blue); text-decoration: none }
.prod-single-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px }
.prod-single-info h1 { font-family: var(--font-head); font-size: clamp(32px, 4vw, 48px); font-weight: 800; color: var(--text); line-height: 1.05; margin-bottom: 16px }
.prod-single-desc { font-size: 15px; color: var(--text2); line-height: 1.8; margin-bottom: 20px }
.prod-check-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px }
.prod-check-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--blue-bg); border: 1px solid var(--blue-bg2); border-radius: 99px; font-size: 13px; font-weight: 500; color: var(--text) }
.prod-check-pill svg { width: 13px; height: 13px; flex-shrink: 0; stroke: var(--blue) }
.prod-single-ctas { display: flex; gap: 12px; flex-wrap: wrap }

/* Specs + contact layout */
.prod-specs-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start }
.prod-contact-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow) }
.prod-contact-card h3 { font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 10px }
.prod-contact-card p { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 16px }
.prod-contact-infos { display: flex; flex-direction: column; gap: 10px }
.prod-contact-info-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text2) }
.prod-contact-info-row svg { width: 16px; height: 16px; stroke: var(--blue); flex-shrink: 0 }
.prod-contact-info-row a { color: var(--blue); text-decoration: none; font-weight: 600 }

/* KPI stats row */
.key-specs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin: 20px 0 24px; padding: 16px; background: var(--bg3); border-radius: var(--radius-lg); border: 1px solid var(--border) }
.key-spec { text-align: center }
.key-spec-value { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--blue); line-height: 1.1; margin-bottom: 4px }
.key-spec-label { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600 }

/* CTAs under product info */
.product-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px }

/* Tabs */
.tabs { margin-top: 48px }
.tab-list { display: flex; border-bottom: 2px solid var(--border); gap: 0; margin-bottom: 0 }
.tab-btn { padding: 12px 22px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text2); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; transition: var(--transition) }
.tab-btn:hover { color: var(--blue) }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue) }
.tab-pane { display: none; padding: 32px 0 }
.tab-pane.active { display: block }

/* Specs table */
.specs-table { width: 100%; border-collapse: collapse; font-size: 14px }
.specs-table td { padding: 11px 16px; border-bottom: 1px solid var(--border) }
.specs-table td:first-child { color: var(--text2); width: 40%; font-weight: 500 }
.specs-table td:last-child { color: var(--text); font-weight: 600 }
.specs-table tr:nth-child(even) td { background: var(--bg3) }
.specs-table tr:last-child td { border-bottom: none }

/* Small section padding */
.section-pad-sm { padding: 48px 48px }

/* Misc */
.section-title { font-family: var(--font-head); font-size: clamp(30px, 4.5vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); margin-bottom: 14px }
.lead { font-size: 17px; color: var(--text2); line-height: 1.75 }
.text-center { text-align: center }
.bg-alt { background: var(--bg3) }
.divider { width: 40px; height: 3px; background: var(--blue); margin: 16px 0; border-radius: 99px }
.entry-content { font-size: 16px; color: var(--text2); line-height: 1.85 }
.entry-content h2, .entry-content h3 { font-family: var(--font-head); color: var(--text); margin: 28px 0 12px }
.entry-content p { margin-bottom: 16px }
.entry-content a { color: var(--blue) }
.entry-content ul, .entry-content ol { margin: 12px 0 16px 24px }
.entry-content li { margin-bottom: 6px }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  nav.site-nav { padding: 0 20px }
  .nav-links { display: none }
  .nav-cta { display: none }
  .burger { display: flex }
  .hero { padding: 114px 20px 48px }
  .hero-inner { grid-template-columns: 1fr; gap: 36px }
  .prod-page-header { padding: 110px 20px 48px }
  .prod-header-inner { grid-template-columns: 1fr; gap: 36px }
  .about-grid { grid-template-columns: 1fr !important; gap: 36px }
  .contact-grid { grid-template-columns: 1fr; gap: 36px }
  section { padding: 56px 20px }
  .products-grid { grid-template-columns: 1fr }
  .why-grid { grid-template-columns: 1fr 1fr }
  .footer-top { grid-template-columns: 1fr 1fr }
  .prod-body-inner { grid-template-columns: 1fr }
  .features-bar { padding: 20px }
  .features-bar-inner { gap: 16px }
  .team-grid { grid-template-columns: 1fr }
  .breadcrumb { padding: 12px 20px; padding-top: 92px }
  .section-pad { padding: 56px 20px }
  .stats-grid { grid-template-columns: 1fr 1fr }
  .clients-grid { grid-template-columns: 1fr 1fr }
  .software-inner, .expertise-grid { grid-template-columns: 1fr }
  .product-detail { grid-template-columns: 1fr; gap: 32px }
  .key-specs-row { grid-template-columns: 1fr 1fr }
  .section-pad-sm { padding: 40px 20px }
  #tab-desc > div { grid-template-columns: 1fr !important }
  .prod-archive-grid { grid-template-columns: 1fr }
  .legal-layout { grid-template-columns: 1fr }
  .legal-sidebar { position: static }
  .prod-single-header { grid-template-columns: 1fr; gap: 32px }
  .prod-specs-layout { grid-template-columns: 1fr }
  .cta-inner { flex-direction: column; text-align: center }
  .cta-banner, .cta-band { padding: 48px 20px }
  .section-divider { margin: 0 20px }
  .partners-row { gap: 24px }
  footer { padding: 40px 20px 24px }
}