/* ============ TOKENS — Design système Operis premium ============ */
:root{
  --bg: #FBFBFD;
  --surface: #FFFFFF;
  --ink: #16182B;
  --ink-2: #3A3D55;
  --muted: #5B5E77;
  --line: rgba(20,24,60,.10);
  --line-2: rgba(20,24,60,.06);

  --primary: #444CE7;
  --primary-hover: #3A40D8;
  --primary-2: #6B71EC;
  --primary-3: #8B90F2;
  --primary-soft: #F3F4FF;
  --primary-ink: #2F34B8;

  --success: #22A06B;
  --warning: #E09020;
  --danger:  #C0392B;
  --info:    #0EA5E9;

  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(20,24,60,.04), 0 1px 3px rgba(20,24,60,.05);
  --shadow-md: 0 6px 18px rgba(20,24,60,.07), 0 2px 6px rgba(20,24,60,.05);
  --shadow-lg: 0 26px 56px -20px rgba(20,24,60,.32), 0 8px 24px -8px rgba(20,24,60,.10);

  --font: 'Public Sans', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Schibsted Grotesk', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:#C7C9F8; color:var(--ink) }
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}

.container{ max-width:1240px; margin:0 auto; padding:0 28px }

/* ============ NAV ============ */
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  border-bottom:1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.scrolled{ border-bottom-color: var(--line); background: color-mix(in oklab, #fff 88%, transparent); }
.nav-inner{
  max-width:1320px; margin:0 auto; padding: 14px 28px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; letter-spacing:-.01em; }
.brand-mark{ height:36px; width:auto; max-width:140px; border-radius:0; object-fit:contain }
.brand-word{ font-size:20px }

.nav-links{ display:flex; gap:6px; margin-left:8px }
.nav-links a{
  position:relative; padding:8px 12px; border-radius:10px; color:var(--ink-2);
  font-weight:500; font-size:14.5px; transition: background .2s, color .2s;
}
.nav-links a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--primary); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-links a:hover{ background:var(--primary-soft); color:var(--primary-ink) }
.nav-links a:hover::after{ transform:scaleX(1) }

.nav-right{ margin-left:auto; display:flex; align-items:center; gap:10px }

.lang-toggle{
  display:inline-flex; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:3px; box-shadow:var(--shadow-sm);
}
.lang-btn{
  border:0; background:transparent; padding:5px 11px; border-radius:999px;
  font-weight:600; font-size:12.5px; color:var(--muted); letter-spacing:.04em;
}
.lang-btn.active{ background:var(--ink); color:#fff }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border-radius: 12px;
  font-weight:600; font-size:14.5px; line-height:1;
  border:1px solid transparent; white-space:nowrap;
  transition: transform .15s ease, background .2s, box-shadow .2s, border-color .2s;
}
.btn:hover{ transform: translateY(-1px) }
.btn-primary{
  background: var(--primary); color:#fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 12px 26px -12px rgba(68,76,231,.65);
}
.btn-primary:hover{ background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 18px 34px -14px rgba(68,76,231,.7) }
.btn-ghost{ background:transparent; color:var(--ink-2); border-color:var(--line) }
.btn-ghost:hover{ background:var(--primary-soft); border-color:var(--primary-soft); color:var(--primary-ink) }
.btn-quiet{ background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--shadow-sm) }
.btn-quiet:hover{ background:var(--surface) }
.btn-outline{ background:#fff; color:var(--ink); border-color:var(--line) }
.btn-outline:hover{ border-color:var(--ink); background:#fff }
.btn-dark{ background:var(--ink); color:#fff }
.btn-dark:hover{ background:var(--ink-2) }
.btn-lg{ padding:14px 22px; font-size:15.5px; border-radius:14px }
.btn-block{ display:flex; width:100%; justify-content:center }

.nav-burger{ display:none; background:none; border:0; width:44px; height:44px; flex-direction:column; gap:5px; justify-content:center; align-items:center }
.nav-burger span{ display:block; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s }
.nav-burger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.nav-burger.open span:nth-child(2){ opacity:0; transform:scaleX(0) }
.nav-burger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg) }

/* ============ HERO ============ */
.hero{ position:relative; padding: 56px 0 80px; overflow:hidden }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background: #fff; border:1px solid var(--line);
  color: var(--ink-2); font: 600 12px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  box-shadow: var(--shadow-sm);
}
.eyebrow .dot{ width:8px; height:8px; background:var(--success); border-radius:50%; box-shadow: 0 0 0 4px rgba(34,160,107,.15) }
.eyebrow-onphoto{
  background: rgba(11,16,32,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.2); color:#fff;
}
.eyebrow-onphoto .dot{ background:#86EFAC; box-shadow: 0 0 0 4px rgba(134,239,172,.2) }

.hero-title{
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 64px); line-height:1.04;
  font-weight: 800; letter-spacing: -0.025em;
  margin: 18px 0 18px; text-wrap: balance;
}
.hero-title.light{ color:#fff }
.title-accent{
  background: linear-gradient(100deg, var(--primary-3) 0%, #C7C9F8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size: 19px; color: var(--muted); max-width: 56ch; margin: 0 0 32px;
  text-wrap: pretty;
}
.hero-sub.light{ color:#DFE0F3 }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 28px }
.trust-row{ display:flex; gap:10px; flex-wrap:wrap }
.trust-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:#fff;
  border:1px solid var(--line); color:var(--ink-2); font-size:13px; font-weight:500;
  box-shadow: var(--shadow-sm);
}
.trust-pill i{ color: var(--primary) }
.trust-pill-onphoto{
  background: rgba(255,255,255,.08); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255,255,255,.22); color:#fff;
}
.trust-pill-onphoto i{ color:#C7C9F8 }

/* ============ HERO — full-bleed photo ============ */
.hero-photo{ padding: 22px 0 0 }
.hero-photo-panel{
  position:relative; height:min(78vh,620px); min-height:520px;
  border-radius: 26px; overflow:hidden; box-shadow: var(--shadow-lg);
}
.hero-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero-photo-scrim{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(15,17,45,.88) 0%, rgba(15,17,45,.62) 44%, rgba(15,17,45,.15) 100%);
}
.hero-photo-content{
  position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(28px,5vw,64px); max-width: 720px;
}
.hero-photo .hero-title{ margin:16px 0 0 }
.hero-photo .hero-sub{ margin:16px 0 0 }
.hero-photo .hero-cta{ margin-top: 30px }
.hero-photo .trust-row{ margin-top: 4px }

/* ============ MARQUEE ============ */
.marquee-wrap{ display:none; }
.marquee-label{ text-align:center; font-size:12.5px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; font-weight:600; margin: 0 0 18px }
.marquee{ overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.marquee-track{
  display:inline-flex; gap:28px; white-space:nowrap;
  animation: scroll 38s linear infinite;
  font-size:18px; font-weight:600; color:var(--ink-2); opacity:.7;
}
.marquee-track span{ padding: 0 6px }
@keyframes scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ============ STATS ============ */
.stats{ padding: 56px 0 }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 8px; border:1px solid var(--line); border-radius: var(--radius-lg); background:#fff; padding: 32px; box-shadow:var(--shadow-md) }
.stat{ padding: 8px 16px; border-right:1px solid var(--line-2) }
.stat:last-child{ border-right:0 }
.stat-num{ font-family:var(--font-display); font-size: clamp(40px, 4vw, 56px); font-weight:800; letter-spacing:-.03em; line-height:1 }
.stat-label{ font-size:13.5px; color:var(--muted); margin-top:6px; font-weight:500 }

/* ============ SECTIONS COMMON ============ */
section{ scroll-margin-top: 80px }
.section-head{ max-width: 760px; margin-bottom: 40px }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center }
.section-eyebrow{
  display:inline-block; font: 600 11.5px var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color: var(--primary); margin-bottom: 12px;
}
.section-eyebrow.light{ color:#C7C9F8 }
.section-title{
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.022em;
  line-height: 1.08; margin: 0 0 14px; text-wrap: balance;
}
.section-title.light{ color:#fff }
.section-lede{ font-size: 18px; color: var(--muted); margin: 0; text-wrap: pretty }
.section-lede.light{ color:#C7C9F8 }

/* ============ PILLARS ============ */
.pillars{ padding: 60px 0 40px }
.pillar-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding: 28px; box-shadow:var(--shadow-sm); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pillar:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #DCDFEB }
.pillar-icon{
  width:48px; height:48px; border-radius:14px;
  background: var(--primary-soft); color: var(--primary);
  display:grid; place-items:center; font-size:20px; margin-bottom: 18px;
}
.pillar h3{ font-family:var(--font-display); font-weight:700; font-size:20px; margin: 0 0 8px; letter-spacing:-.01em }
.pillar p{ color:var(--muted); margin:0; font-size:15px }

/* ============ MODULES ============ */
.modules{ padding: 80px 0 60px }
.mod-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 28px }
.chip{
  padding:8px 14px; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--ink-2); transition: all .2s;
}
.chip:hover{ border-color:var(--ink) }
.chip.active{ background:var(--ink); color:#fff; border-color:var(--ink) }

.mod-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px }
.mod-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding: 22px; position:relative; overflow:hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mod-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); border-color:#DCDFEB }
.mod-icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:17px; margin-bottom: 14px; color:#fff;
  background: var(--c, var(--primary));
  box-shadow: 0 6px 16px -6px var(--c, var(--primary));
}
.mod-badge{
  position:absolute; top:18px; right:18px;
  font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:999px;
  letter-spacing:.04em; text-transform:uppercase;
}
.mod-badge.new{ background:#DBEAFE; color:#1E40AF }
.mod-badge.recent{ background:#EDE9FE; color:#5B21B6 }
.mod-badge.updated{ background:#FEF3C7; color:#92400E }
.mod-name{ font-family:var(--font-display); font-size:17px; font-weight:700; margin: 0 0 4px; letter-spacing:-.01em }
.mod-tag{ font-size:13.5px; color:var(--muted); margin: 0 0 12px; min-height: 38px }
.mod-feats{ list-style:none; padding:0; margin: 0; font-size:13px; color: var(--ink-2) }
.mod-feats li{ padding: 5px 0; display:flex; gap:8px; align-items:flex-start; border-top:1px solid var(--line-2) }
.mod-feats li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--c, var(--primary)); margin-top:7px; flex-shrink:0 }
.mod-cat{ position:absolute; top:18px; left:18px; opacity:0 }

/* ============ WHY ============ */
.why{ padding: 90px 0; background:linear-gradient(180deg, transparent, #F4F5F9 40%) }
.why-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items:center }
.why-list{ list-style:none; padding:0; margin: 28px 0 0; display:grid; gap: 12px }
.why-list li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; color:var(--ink-2) }
.why-list li i{
  flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background: var(--primary-soft); color:var(--primary);
  display:grid; place-items:center; font-size:11px; margin-top:1px;
}

.why-table-wrap{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding: 6px; box-shadow:var(--shadow-md); overflow-x:auto }
.why-table{ width:100%; border-collapse:collapse; font-size:14px }
.why-table th, .why-table td{ padding: 14px 16px; text-align:left; border-bottom:1px solid var(--line-2) }
.why-table th{ font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.why-table th.us, .why-table td.us{ background: linear-gradient(180deg, #F3F4FF, #fff); }
.why-table th.us{ color: var(--primary-ink) }
.why-table td.us{ font-weight:700; color: var(--primary-ink) }
.why-table td.us i{ color: var(--primary) }
.why-table td.ko{ color: var(--muted) }
.why-table td.ok{ color: var(--ink-2) }
.why-table tr:last-child td{ border-bottom:0 }

/* ============ SHOWCASE ============ */
.showcase{ padding: 60px 0 }
.showcase-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px }
.show-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding: 32px; box-shadow:var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.show-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color:#DCDFEB }
.show-tag{
  display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px;
  border-radius:999px; background: color-mix(in oklab, var(--c) 14%, #fff);
  color: var(--c); letter-spacing:.04em; text-transform:uppercase;
}
.show-card h3{ font-family:var(--font-display); font-size: 26px; font-weight: 800; letter-spacing:-.02em; line-height:1.15; margin: 14px 0 10px }
.show-card > p{ color: var(--muted); margin: 0 0 22px; font-size:15.5px }

/* Payslip mock */
.payslip, .invoice{
  background:#FAFBFE; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
}
.payslip header{ display:flex; justify-content:space-between; padding: 12px 16px; background:#fff; border-bottom:1px solid var(--line); font-size:13px; font-weight:700; color:var(--ink-2) }
.ps-emp{ display:flex; justify-content:space-between; padding: 14px 16px; align-items:center }
.ps-emp b{ font-size:15px }
.ps-emp small{ display:block; font-size:12px; color:var(--muted); margin-top:2px }
.ps-pay{ font-size:22px; font-weight:800; color:var(--success); letter-spacing:-.02em }
.ps-pay small{ display:block; font-size:11px; color:var(--muted); font-weight:600; text-align:right }
.ps-rows{ padding: 0 16px 14px; font-family:var(--mono); font-size:12.5px }
.ps-rows > div{ display:flex; justify-content:space-between; padding: 6px 0; border-top:1px solid var(--line-2) }
.ps-rows .neg{ color: var(--danger) }
.ps-rows .tot{ font-weight:700; color:var(--ink); font-size:14px; padding-top:10px; margin-top: 4px; border-top: 2px solid var(--ink) }
.payslip footer{ display:flex; align-items:center; gap:8px; padding: 12px 16px; background: #ECFDF5; color: #166534; font-size:12.5px; font-weight:600; border-top:1px solid var(--line) }

/* Invoice mock */
.inv-head{ display:flex; justify-content:space-between; padding:14px 16px; background:#fff; border-bottom:1px solid var(--line); align-items:center }
.inv-head > div:first-child{ display:flex; gap:10px; align-items:center }
.inv-head img{ width:32px; height:32px; border-radius:8px }
.inv-head b{ display:block; font-size:14px } .inv-head small{ font-size:11.5px; color:var(--muted); font-family:var(--mono) }
.inv-num{ font-family:var(--mono); font-size:13px; color:var(--primary); font-weight:700 }
.inv-rows{ padding: 12px 16px; font-family:var(--mono); font-size:12.5px }
.inv-rows > div{ display:flex; justify-content:space-between; padding:5px 0; border-top:1px solid var(--line-2) }
.inv-rows > div:first-child{ border-top:0 }
.inv-tot{ padding: 8px 16px 14px; font-family:var(--mono); font-size:12.5px; border-top:1px dashed var(--line) }
.inv-tot > div{ display:flex; justify-content:space-between; padding: 3px 0 }
.inv-tot .grand{ font-size:15px; font-weight:800; color:var(--ink); margin-top:6px; padding-top:8px; border-top:2px solid var(--ink) }
.inv-cert{ display:flex; gap:12px; padding: 12px 16px; background:#F3F4FF; border-top:1px solid var(--line); align-items:center }
.qr{ flex-shrink:0; padding:5px; background:#fff; border:1px solid var(--line); border-radius:6px }
.cert-badge{ display:inline-flex; gap:6px; align-items:center; font-size:13px; font-weight:700; color: var(--primary-ink) }
.cert-badge i{ color: var(--primary) }
.inv-cert small{ display:block; font-size:11.5px; color:var(--ink-2); margin-top:2px; font-family:var(--mono) }

/* Kanban mock */
.kanban{ background:#FAFBFE; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.kb-header{ display:flex; justify-content:space-between; padding:12px 16px; background:#fff; border-bottom:1px solid var(--line); align-items:center }
.kb-header b{ display:block; font-size:14px }
.kb-header small{ font-size:11.5px; color:var(--muted) }
.kb-progress{ display:flex; align-items:center; gap:8px }
.kb-bar{ width:90px; height:6px; background:var(--line); border-radius:999px; overflow:hidden }
.kb-fill{ height:100%; background:var(--primary); border-radius:999px }
.kb-progress span{ font-size:12px; font-weight:700; color:var(--primary) }
.kb-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px }
.kb-col{ background:#F1F5F9; border-radius:8px; padding:8px }
.kb-col-head{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:700; color:var(--ink-2); margin-bottom:8px }
.kb-dot{ width:8px; height:8px; border-radius:50%; background:var(--c); flex-shrink:0 }
.kb-cnt{ margin-left:auto; background:var(--line); color:var(--ink-2); border-radius:999px; padding:1px 6px; font-size:10px; font-weight:700 }
.kb-task{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:11.5px; margin-bottom:5px; line-height:1.35; display:flex; flex-direction:column; gap:5px }
.kb-task:last-child{ margin-bottom:0 }
.kb-task.active{ border-left:3px solid #E09020 }
.kb-task.done{ opacity:.5 }
.kb-tag{ display:inline-block; font-size:10px; font-weight:600; padding:2px 7px; border-radius:999px; background:var(--primary-soft); color:var(--primary); align-self:flex-start }
.kb-tag.green{ background:#DCFCE7; color:#166534 }
.kb-tag.orange{ background:#FEF3C7; color:#92400E }
.kb-footer{ display:flex; justify-content:space-between; padding:10px 16px; background:#fff; border-top:1px solid var(--line); align-items:center }
.kb-avatars{ display:flex }
.kb-av{ width:26px; height:26px; border-radius:50%; border:2px solid #fff; background-color:var(--bg); color:var(--fg); display:grid; place-items:center; font-size:9px; font-weight:700; margin-left:-7px }
.kb-av:first-child{ margin-left:0 }
.kb-budget{ font-size:11.5px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:5px }
.kb-budget i{ color:var(--primary) }

/* Full-width show-card layout */
.show-card.wide{ grid-column: 1 / -1; display:grid; grid-template-columns:1fr 1.6fr; gap:32px; align-items:start }
.show-card.wide .show-copy{ display:flex; flex-direction:column }
.show-card.wide h3{ font-size:28px }
.show-feats{ list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:9px }
.show-feats li{ display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-2) }
.show-feats li i{ color:var(--primary); margin-top:2px; flex-shrink:0 }

/* ============ TESTIMONIALS ============ */
.testis{ padding: 80px 0 }
.testi-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 18px }
.testi{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding: 28px; margin: 0; box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.testi:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color:#DCDFEB }
.testi blockquote{
  font-family:var(--font-display); font-weight:500;
  font-size: 17px; line-height:1.5; color:var(--ink); margin: 0 0 18px;
  text-wrap: pretty;
}
.testi figcaption{ display:flex; align-items:center; gap:12px }
.ava{
  width:40px; height:40px; border-radius:50%;
  background: var(--bg, --primary-soft); color: var(--fg, --primary);
  display:grid; place-items:center; font-size:13px; font-weight:700;
  background-color: var(--bg); color: var(--fg);
}
.testi b{ font-size:14px } .testi small{ display:block; font-size:12px; color:var(--muted) }

/* ============ PRICING ============ */
.pricing{ padding: 90px 0; background: linear-gradient(180deg, #F4F5F9, transparent 60%) }
.pricing .container{ max-width: 1480px }
.plans{ display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 12px }
.plan{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 22px; position:relative; display:flex; flex-direction:column;
  box-shadow: var(--shadow-sm);
  transition: transform .25s, box-shadow .25s;
}
.plan:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md) }
.plan-featured{
  border: 2px solid var(--primary); box-shadow: 0 30px 60px -20px rgba(68,76,231,.35);
}
.featured-tag{
  position:absolute; top:-12px; left:50%; transform: translateX(-50%);
  background: var(--ink); color:#fff; font-size:11px; font-weight:700;
  padding:4px 12px; border-radius:999px; letter-spacing:.04em;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.featured-tag i{ color: #FACC15 }
.plan h3{ font-family:var(--font-display); font-weight:700; font-size:19px; margin:0 0 5px; letter-spacing:-.01em }
.plan-target{ font-size:12.5px; color:var(--muted); margin: 0 0 18px; min-height:34px }
.plan-price{ display:flex; align-items:baseline; gap:6px; margin-bottom: 16px }
.plan-price .price{ font-family:var(--font-display); font-size: 36px; font-weight:800; letter-spacing:-.03em }
.price-unit{ font-size:12px; color:var(--muted); font-weight:600 }
.price-unit small{ display:block; font-size:11px }
.plan-feats{ list-style:none; padding:0; margin: 16px 0 0; display:grid; gap:8px; font-size:13px; color:var(--ink-2) }
.plan-feats li{ display:flex; gap:8px; align-items:flex-start }
.plan-feats i{ color: var(--primary); margin-top:3px; font-size:11px }
.plan-feats li.incl{ font-weight:700; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 10px; margin-bottom: 3px }
.plan-feats li.incl::before{ content:"+"; color:var(--primary); font-weight:800; margin-right:4px }

/* ---- Billing toggle ---- */
.billing-toggle{ display:flex; background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px; gap:4px; box-shadow:0 2px 10px rgba(11,16,32,.05) }
.btoggle{
  padding:9px 22px; border-radius:999px; font-size:13px; font-weight:600; cursor:pointer;
  border:none; background:transparent; color:var(--muted); transition:all .2s; display:flex; align-items:center; gap:8px;
}
.btoggle.active{ background:var(--primary); color:#fff; box-shadow:0 4px 14px rgba(68,76,231,.3) }
.btoggle-badge{
  background:#22A06B; color:#fff; font-size:10px; font-weight:700;
  padding:2px 8px; border-radius:999px; letter-spacing:.02em;
}

/* ---- Add-ons pills ---- */
.addon-pill{
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:999px; font-size:12px; font-weight:700; color:#fff;
}
.addon-pill span{ font-weight:400; opacity:.8 }

.compare{ margin-top: 32px; border:1px solid var(--line); border-radius: var(--radius); background:#fff }
.compare summary{
  list-style:none; padding: 18px 22px; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; font-weight:600; font-size:15px;
}
.compare summary::-webkit-details-marker{ display:none }
.compare summary i{ transition: transform .25s }
.compare[open] summary i{ transform: rotate(180deg) }
.compare-table{ padding: 0 22px 22px; overflow-x:auto }
.compare-table table{ width:100%; border-collapse:collapse; font-size:14px }
.compare-table th, .compare-table td{ padding: 12px 14px; border-top:1px solid var(--line-2); text-align:center }
.compare-table th{ font-weight:700 } .compare-table td:first-child, .compare-table th:first-child{ text-align:left; font-weight:600 }
.compare-table td.no{ color: #C7CAD8 }
.compare-table td.yes{ color: var(--success); font-weight:700 }

/* ============ SECURITY ============ */
.security{ padding: 90px 0 }
.sec-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items:center }
.sec-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap: 12px }
.sec-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; gap:4px;
  transition: transform .2s, box-shadow .2s;
}
.sec-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md) }
.sec-card i{ font-size: 18px; color: var(--primary); margin-bottom: 6px }
.sec-card b{ font-size: 14px }
.sec-card small{ font-size:12.5px; color: var(--muted) }

/* ============ FAQ ============ */
.faq{ padding: 80px 0 100px; background: linear-gradient(180deg, #F4F5F9, transparent 70%) }
.faq-list{ max-width: 820px; margin: 0 auto; display:grid; gap: 10px }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq-item[open]{ box-shadow: var(--shadow-md); border-color: #DCDFEB }
.faq-item summary{
  list-style:none; padding: 18px 22px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap: 18px;
  font-weight:600; font-size:16px;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary i{ transition: transform .25s; color: var(--muted) }
.faq-item[open] summary i{ transform: rotate(180deg); color: var(--primary) }
.faq-body{ padding: 0 22px 22px; color: var(--muted); font-size: 15px }

/* ============ CTA FINAL ============ */
.cta-final{
  margin: 0 0 0; padding: 96px 0;
  background:
    radial-gradient(700px 380px at 80% 30%, rgba(139,144,242,.35), transparent 60%),
    radial-gradient(700px 380px at 0% 80%, rgba(68,76,231,.25), transparent 60%),
    linear-gradient(180deg, #1E1B4B, #2F34B8);
  color:#fff; position:relative; overflow:hidden;
}
.cta-grid{ display:grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items:center }
.cta-points{ list-style:none; padding:0; margin: 24px 0 0; display:grid; gap: 10px }
.cta-points li{ display:flex; gap:10px; align-items:center; color:#E0E7FF; font-size:15.5px }
.cta-points i{ color:#A5B4FC }

.cta-form{
  background:#fff; color: var(--ink); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-lg); display:flex; flex-direction:column; gap: 14px;
}
.cta-form .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px }
.cta-form label{ display:flex; flex-direction:column; gap:6px; font-size: 13px; font-weight:600; color: var(--ink-2) }
.cta-form input, .cta-form select{
  font:inherit; font-size:14.5px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background:#fff; color:var(--ink); transition: border-color .15s, box-shadow .15s;
}
.cta-form input:focus, .cta-form select:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(68,76,231,.12) }

.seg{ display:flex; gap:6px; padding:4px; background:#F4F5F9; border-radius:10px }
.seg input{ display:none }
.seg label{ flex:1; text-align:center; padding: 9px 8px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--muted); cursor:pointer; transition: all .15s }
.seg input:checked + label{ background:#fff; color:var(--ink); box-shadow: var(--shadow-sm) }

.form-mini{ font-size:11.5px; color:var(--muted); margin: 4px 0 0; text-align:center }
.form-success{
  display:none; align-items:center; gap:12px; padding: 14px;
  background:#DCFCE7; color:#14532D; border-radius: 10px;
  font-size:14px;
}
.form-success.show{ display:flex }
.form-success i{ font-size:18px }
.form-error{
  display:flex; align-items:center; gap:12px; padding:14px;
  background:#FEF2F2; color:#991B1B; border-radius:10px; font-size:14px;
}
.form-error[hidden]{ display:none }
.form-error i{ font-size:18px; color:#C0392B; flex-shrink:0; }

/* ── Pack banner ── */
.fpb{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:12px; border:1.5px solid var(--primary);
  background:var(--primary-soft);
  transition: background .25s ease, border-color .25s ease;
}
.fpb[data-pack="1"]{ background:#F0FDF4; border-color:#22A06B; }
.fpb[data-pack="2"]{ background:var(--primary-soft); border-color:var(--primary); }
.fpb[data-pack="3"]{ background:#1E1B4B; border-color:#4338CA; }
.fpb-left{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; }
.fpb-name{ font-weight:700; font-size:14.5px; }
.fpb-price{ font-size:13px; }
.fpb-price small{ font-size:11px; margin-left:2px; }
.fpb[data-pack="1"] .fpb-name{ color:#15803D; }
.fpb[data-pack="1"] .fpb-price{ color:#166534; }
.fpb[data-pack="2"] .fpb-name{ color:var(--primary-ink); }
.fpb[data-pack="2"] .fpb-price{ color:var(--primary); }
.fpb[data-pack="3"] .fpb-name,
.fpb[data-pack="3"] .fpb-price{ color:#fff; }
.fpb-feats{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.fpb-feats li{ font-size:12.5px; display:flex; align-items:center; gap:6px; }
.fpb-feats li::before{ content:'✓'; font-weight:800; font-size:11px; flex-shrink:0; }
.fpb[data-pack="1"] .fpb-feats li{ color:#166534; }
.fpb[data-pack="1"] .fpb-feats li::before{ color:#22A06B; }
.fpb[data-pack="2"] .fpb-feats li{ color:var(--ink-2); }
.fpb[data-pack="2"] .fpb-feats li::before{ color:var(--primary); }
.fpb[data-pack="3"] .fpb-feats li{ color:#C7D2FE; }
.fpb[data-pack="3"] .fpb-feats li::before{ color:#8B90F2; }

/* ── Extra Entreprise fields ── */
.form-ent-extra{ display:flex; flex-direction:column; gap:14px;
  animation: feIn .22s ease; }
.form-ent-extra textarea{
  font:inherit; font-size:14px; padding:10px 14px; border:1px solid var(--line);
  border-radius:10px; resize:vertical; min-height:62px; width:100%;
  transition: border-color .15s, box-shadow .15s;
}
.form-ent-extra textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 4px rgba(68,76,231,.12) }
@keyframes feIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.form-success b{ display:block }

/* ============ FOOTER ============ */
.foot{ padding: 60px 0 40px; background:#0F112D; color:#9CA3AF }
.foot-grid{ display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px }
.foot .brand{ color:#fff; margin-bottom:14px }
.foot-tagline{ color:#D1D5DB; font-size:15px; margin: 0 0 20px; max-width: 28ch }
.foot-mini{ font-size:12.5px; color:#6B7280; margin: 8px 0 0 }
.foot h5{ color:#8A8DB0; font:600 12px var(--mono); letter-spacing:.1em; text-transform:uppercase; margin: 0 0 16px }
.foot a{ display:block; padding: 4px 0; color:#9CA3AF; font-size: 14px; transition: color .15s }
.foot a:hover{ color:#fff }
.foot .brand:hover{ color:#fff }
.foot-brand-mark{ filter: brightness(0) invert(1); }

/* ============ PAGE LOADER ============ */
#page-loader{
  position:fixed; inset:0; z-index:99999;
  background: var(--primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
  transition: opacity .5s ease, visibility .5s ease;
}
#page-loader.loader-done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ height:52px; width:auto; object-fit:contain; filter:brightness(0) invert(1); }
.loader-spin{ width:44px; height:44px; object-fit:contain; }

/* ============ ANIMS / REVEAL ============ */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease }
.reveal.in{ opacity:1; transform:none }

/* ============ MOBILE NAV DRAWER ============ */
.nav-drawer{
  display:none; position:fixed; inset:0; z-index:200;
}
.nav-drawer.open{ display:block }
.nav-drawer-overlay{
  position:absolute; inset:0; background:rgba(11,16,32,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.nav-drawer-panel{
  position:absolute; top:0; left:0; bottom:0; width:min(320px,88vw);
  background:#fff; box-shadow:24px 0 64px rgba(11,16,32,.18);
  display:flex; flex-direction:column; overflow-y:auto;
  animation: slideInLeft .25s cubic-bezier(.22,1,.36,1);
}
@keyframes slideInLeft{
  from{ transform:translateX(-100%) }
  to{ transform:translateX(0) }
}
.nav-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; border-bottom:1px solid var(--line);
}
.nav-drawer-close{
  width:36px; height:36px; border:0; background:var(--line-2); border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--ink-2); cursor:pointer;
}
.nav-drawer-links{
  flex:1; padding:12px 12px; display:flex; flex-direction:column; gap:4px;
}
.nav-drawer-links a{
  display:block; padding:13px 14px; border-radius:10px;
  font-size:16px; font-weight:600; color:var(--ink-2); transition:background .15s;
}
.nav-drawer-links a:hover{ background:var(--primary-soft); color:var(--primary-ink) }
.nav-drawer-foot{
  padding:16px 20px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px;
}
.nav-drawer-foot .btn{ justify-content:center; padding:13px 16px; font-size:15px }

/* ============ RESPONSIVE ============ */

/* ── 1200px — large tablets / small laptops ── */
@media (max-width: 1200px){
  .plans{ grid-template-columns: repeat(2,1fr); gap:16px }
  .plan-featured{ transform: none }
  .showcase-grid{ grid-template-columns: 1fr }
  .show-card.wide{ display:flex; flex-direction:column; gap:24px }
}

/* ── 1024px — tablet landscape ── */
@media (max-width: 1024px){
  .why-grid, .sec-grid, .cta-grid{ grid-template-columns: 1fr; gap:40px }
  .mod-grid, .testi-grid, .sec-cards, .pillar-grid{ grid-template-columns: repeat(2,1fr) }
  .stats-grid{ grid-template-columns: repeat(2,1fr); gap:20px }
  .stat{ border-right:0 }
  .foot-grid{ grid-template-columns: repeat(2,1fr) }
  .why-table-wrap{ overflow-x:auto }
  .why-table{ min-width:480px }
}

/* ── 768px — tablet portrait ── */
@media (max-width: 768px){
  /* Nav */
  .nav-links, .nav-right .btn-ghost, .nav-right .btn-primary{ display:none }
  .nav-burger{ display:flex }
  .nav-inner{ padding:12px 20px }
  .container{ padding:0 20px }

  /* Hero */
  .hero{ padding:40px 0 56px }
  .hero-sub{ font-size:17px }
  .hero-photo{ padding:12px 0 0 }
  .hero-photo-panel{ height:auto; min-height:0 }
  .hero-photo-content{ padding:40px 24px; max-width:none }

  /* Sections padding */
  .pillars{ padding:48px 0 36px }
  .modules, .testis, .security, .faq{ padding:60px 0 }
  .why, .showcase{ padding:56px 0 }
  .pricing{ padding:60px 0 }
  .stats{ padding:40px 0 }
  .cta-final{ padding:60px 0 }
  section{ scroll-margin-top:60px }

  /* Grids */
  .plans{ grid-template-columns: 1fr 1fr; gap:12px }
  .plan-featured{ transform:none }
  .cta-form .form-row{ grid-template-columns:1fr }
  .cta-form{ padding:24px }
  .cta-grid{ gap:32px }

  /* Tables overflow */
  .compare-table{ overflow-x:auto }
  .compare-table table{ min-width:520px }
  .why-table-wrap{ overflow-x:auto }
  .why-table{ min-width:480px }

  /* Billing toggle */
  .billing-toggle{ flex-wrap:wrap; border-radius:14px }

  /* Footer */
  .foot-grid{ grid-template-columns: 1fr 1fr; gap:24px }
}

/* ── 480px — phone ── */
@media (max-width: 480px){
  .container{ padding:0 16px }
  .nav-inner{ padding:10px 16px }

  /* Hero */
  .hero{ padding:28px 0 44px }
  .hero-sub{ font-size:15.5px }
  .hero-cta{ gap:8px }
  .hero-cta .btn-lg{ padding:12px 16px; font-size:14px }

  /* Sections padding */
  .pillars, .modules, .testis, .security{ padding:48px 0 }
  .faq{ padding:48px 0 64px }
  .why, .showcase, .pricing{ padding:48px 0 }
  .stats{ padding:32px 0 }
  .cta-final{ padding:48px 0 }

  /* Section headings */
  .section-title{ font-size:clamp(24px,7vw,36px) }
  .section-lede{ font-size:15px }

  /* All grids → 1 col */
  .mod-grid, .testi-grid, .plans, .pillar-grid, .sec-cards,
  .foot-grid, .showcase-grid, .why-grid, .sec-grid,
  .stats-grid{ grid-template-columns:1fr }

  /* Mockup */
  .app-side{ display:none }
  .window-body{ grid-template-columns:1fr }
  .app-grid{ grid-template-columns:1fr 1fr }
  .panel-wide{ grid-column:span 2 }
  .pipeline{ grid-template-columns:repeat(3,1fr) }

  /* Pricing */
  .plan-price .price{ font-size:28px }
  .plan{ padding:18px 16px }

  /* Billing toggle */
  .billing-toggle{ flex-direction:column; border-radius:12px; padding:6px }
  .btoggle{ justify-content:center; padding:10px 16px }

  /* CTA form */
  .cta-form{ padding:18px; gap:12px }
  .seg{ flex-wrap:wrap }
  .seg label{ flex:1 1 calc(50% - 3px); padding:8px 4px; font-size:12.5px }

  /* Footer */
  .foot{ padding:48px 0 28px }
  .foot-grid{ grid-template-columns:1fr }

  /* Compare */
  .compare-table table{ min-width:460px }

  /* Misc */
  .section-head, .section-head.center{ text-align:left }
  .testi blockquote{ font-size:15px }
}

/* ══════════════════════════════════════════════════════════
   UX ENHANCEMENTS
   ══════════════════════════════════════════════════════════ */


/* ── Mobile nav drawer ── */
.nav-drawer {
  position:fixed; inset:0; z-index:200;
  pointer-events:none;
}
.nav-drawer.open { pointer-events:all; }
.nav-drawer-bg {
  position:absolute; inset:0; background:rgba(0,0,0,.5);
  opacity:0; transition:opacity .25s; backdrop-filter:blur(2px);
}
.nav-drawer.open .nav-drawer-bg { opacity:1; }
.nav-drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:80%; max-width:320px;
  background:#fff; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding:24px 20px; overflow-y:auto;
  display:flex; flex-direction:column; gap:4px;
}
.nav-drawer.open .nav-drawer-panel { transform:translateX(0); }
.nav-drawer-close {
  position:absolute; top:16px; right:16px;
  background:var(--line-2); border:none; border-radius:50%;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:18px; cursor:pointer; color:var(--ink);
}
.nav-drawer-link {
  display:block; padding:12px 16px; border-radius:10px;
  font-size:15px; font-weight:500; color:var(--ink-2);
  text-decoration:none; transition:background .15s;
}
.nav-drawer-link:hover { background:var(--primary-soft); color:var(--primary-ink); }
.nav-drawer-sep { height:1px; background:var(--line); margin:8px 0; }
.nav-drawer-cta {
  margin-top:auto; padding-top:16px; display:flex; flex-direction:column; gap:8px;
}

/* Burger icon */
.nav-burger {
  display:none; background:none; border:none; cursor:pointer;
  color:var(--ink); padding:6px; border-radius:8px;
  transition:background .15s;
}
.nav-burger:hover { background:var(--line-2); }
.nav-burger i { font-size:20px; }

/* ── Lazy-load blur-up ── */
img[loading="lazy"] { opacity:0; transition:opacity .4s; }
img[loading="lazy"].loaded { opacity:1; }

/* ── Form field inline validation ── */
.site-field { position:relative; }
.site-field-err {
  font-size:12px; color:#C0392B; margin-top:4px;
  display:flex; align-items:center; gap:4px;
  animation:site-fade-in .15s ease;
}
@keyframes site-fade-in { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }
.site-field input.invalid, .site-field select.invalid { border-color:#C0392B !important; }

/* ── Screenshot lightbox ── */
#screenshotLightbox {
  position:fixed; inset:0; z-index:9998;
  background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s;
  cursor:zoom-out; padding:40px 20px;
}
#screenshotLightbox.open { opacity:1; visibility:visible; }
#screenshotLightbox img { max-width:90vw; max-height:85vh; border-radius:12px; box-shadow:0 0 80px rgba(0,0,0,.5); }
.screenshot-thumb {
  cursor:zoom-in; border-radius:12px; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.screenshot-thumb:hover { transform:scale(1.02); box-shadow:0 12px 40px rgba(0,0,0,.15); }

/* ── Testimonials — photo support ── */
.testi-avatar {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid var(--line);
}

/* ── Scrollbar (site) ── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--muted); }

@media (max-width:768px) {
  .nav-burger { display:flex; }
}

/* ============ WHATSAPP FLOAT ============ */
.wa-float{
  position:fixed; right:24px; bottom:24px; z-index:400;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:29px; line-height:1; text-decoration:none;
  box-shadow: var(--shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{ transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg), 0 0 0 6px rgba(37,211,102,.18); }
.wa-float:active{ transform: translateY(-1px) scale(.98); }
.wa-float i{ pointer-events:none; }
@media (max-width:640px){
  .wa-float{ right:16px; bottom:16px; width:52px; height:52px; font-size:25px; }
}

/* ============================================================
   SITE RENEW — photo-driven additions on top of site.css
   Reuses tokens from :root above (--radius-lg, --shadow-lg, --muted, --ink…)
   ============================================================ */

/* ---------- PILLARS: photo thumbnails ---------- */
.pillar-photo{ height:150px; margin: -28px -28px 20px; position:relative; overflow:hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0 }
.pillar-photo img{ width:100%; height:100%; object-fit:cover }
.pillar-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(8,11,24,.55), transparent 60%);
}
.pillar{ overflow:hidden }
.pillar .pillar-icon{ position:relative; z-index:1; margin-top:-46px; border:3px solid #fff }

/* ---------- WHY: photo panel alongside table ---------- */
.why-visual-stack{ display:grid; gap:18px }
.why-photo{
  border-radius: var(--radius-lg); overflow:hidden; position:relative;
  height: 100%; min-height: 320px; box-shadow: var(--shadow-md);
}
.why-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.why-photo .cap{
  position:relative; z-index:1; padding:22px; display:flex; flex-direction:column; justify-content:flex-end; height:100%;
}
.why-photo .cap b{ color:#fff; font-size:18px; display:block; margin-bottom:4px }
.why-photo .cap span{ color:#D1D5E8; font-size:13.5px }

/* ---------- TESTIMONIALS: real photo avatars ---------- */
.ava-photo{
  width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border: 2px solid #fff; box-shadow: var(--shadow-sm);
}

/* ---------- SECURITY: photo side panel ---------- */
.sec-photo{
  border-radius: var(--radius-lg); overflow:hidden; position:relative; min-height:360px; box-shadow: var(--shadow-md);
}
.sec-photo img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0 }
.sec-photo .tag{
  position:absolute; top:18px; left:18px; z-index:1;
  background:rgba(17,21,40,.55); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
}
.sec-photo .tag i{ color:#86EFAC }

/* ---------- CTA FINAL: photo background ---------- */
.cta-final.photo-bg{
  background:none; position:relative;
}
.cta-final.photo-bg .cta-bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.cta-final.photo-bg::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(700px 380px at 80% 30%, rgba(129,140,248,.30), transparent 60%),
    linear-gradient(120deg, rgba(11,16,32,.92) 0%, rgba(30,27,75,.86) 45%, rgba(49,46,129,.75) 100%);
}
.cta-final.photo-bg .container{ position:relative; z-index:2 }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .why-photo{ display:none }
}
@media (max-width: 760px){
  .pillar-photo{ height:120px }
}