@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ══════════════════════════════════════════
   DESIGN TOKENS — NOVARIS
══════════════════════════════════════════ */
:root {
  /* Brand */
  --navy:      #0A0F1E;
  --navy-2:    #111827;
  --green:     #00E5A0;
  --green-2:   #00c98a;
  --blue:      #005FFF;
  --blue-2:    #0077ff;
  --cyan:      #22d3ee;
  --purple:    #8b5cf6;

  /* Text */
  --text:      #F0F4F8;
  --muted:     #6B7A8D;

  /* Light mode neutrals */
  --white:     #ffffff;
  --gray-50:   #f8fafc;
  --gray-100:  #f1f5f9;
  --gray-200:  #e2e8f0;
  --gray-300:  #cbd5e1;
  --gray-400:  #94a3b8;
  --gray-500:  #64748b;
  --gray-600:  #475569;
  --gray-700:  #334155;
  --gray-900:  #0f172a;

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Easing — cubic ease-out only, no bounce */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--gray-900); background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.display, .hero-title, .section-title {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ══════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════ */
@keyframes float      { 0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)} }
@keyframes floatAlt   { 0%,100%{transform:translateY(-8px)}50%{transform:translateY(4px)} }
@keyframes fadeUp     { from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none} }
@keyframes fadeIn     { from{opacity:0}to{opacity:1} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)} }
@keyframes blobDrift  { 0%,100%{transform:translate(0,0) scale(1) rotate(0deg)}33%{transform:translate(40px,-30px) scale(1.1) rotate(60deg)}66%{transform:translate(-30px,20px) scale(.9) rotate(120deg)} }
@keyframes auroraA   { 0%,100%{transform:translate(0%,0%) scale(1);opacity:.7} 30%{transform:translate(6%,-8%) scale(1.08);opacity:1} 65%{transform:translate(-5%,5%) scale(.94);opacity:.75} }
@keyframes auroraB   { 0%,100%{transform:translate(0%,0%) scale(1.04);opacity:.6} 40%{transform:translate(-7%,6%) scale(.92);opacity:.9} 70%{transform:translate(5%,-4%) scale(1.1);opacity:.65} }
@keyframes dash       { to{stroke-dashoffset:-20} }
@keyframes dotPulse   { 0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)} }
@keyframes wave       { 0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)} }
@keyframes blink      { 0%,100%{opacity:1}50%{opacity:0} }
@keyframes shimmer    { 0%{background-position:-200%}100%{background-position:200%} }
@keyframes slideRight { from{transform:translateX(-100%)}to{transform:translateX(0)} }
@keyframes countUp    { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
@keyframes pingRing   { 0%{box-shadow:0 0 0 0 rgba(0,229,160,.4)}70%{box-shadow:0 0 0 20px rgba(0,229,160,0)}100%{box-shadow:0 0 0 0 rgba(0,229,160,0)} }
@keyframes gradShift  { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@keyframes slideUp    { from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none} }

/* ══════════════════════════════════════════
   SCROLL REVEAL — 200ms pre-trigger
══════════════════════════════════════════ */
.reveal       { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.show  { opacity:1; transform:none; }
.reveal-left  { opacity:0; transform:translateX(-28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-left.show { opacity:1; transform:none; }
.reveal-right { opacity:0; transform:translateX(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-right.show { opacity:1; transform:none; }
.reveal-scale { opacity:0; transform:scale(.95); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.reveal-scale.show { opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s} .d5{transition-delay:.40s} .d6{transition-delay:.48s}

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: box-shadow .3s var(--ease);
}
#navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.07); }

.nav-logo-text {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800; font-size: 1.15rem;
  letter-spacing: -.03em; color: var(--gray-900);
}

.nav-link {
  font-size: .875rem; font-weight: 500; color: var(--gray-500);
  padding: 4px 2px; position: relative;
  transition: color .2s;
}
.nav-link::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--green);
  border-radius:1px; transition:width .25s var(--ease);
}
.nav-link:hover { color: var(--gray-900); }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color: var(--gray-900); }

/* ── Mobile menu ── */
#mobile-menu { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; backdrop-filter:blur(4px); }
#mobile-menu.open { display:flex; }
#mobile-panel { background:white; width:300px; height:100%; padding:28px 24px; transform:translateX(-100%); transition:transform .35s var(--ease); overflow-y:auto; }
#mobile-menu.open #mobile-panel { transform:translateX(0); }

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--green);
  color: var(--navy); font-size: .9rem; font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  padding: 14px 28px; border-radius: var(--radius-md);
  transition: all .2s var(--ease);
  box-shadow: 0 4px 20px rgba(0,229,160,.3);
  position:relative; overflow:hidden; letter-spacing:.01em;
}
.btn-primary:hover { background:var(--green-2); box-shadow:0 8px 32px rgba(0,229,160,.45); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:white; font-size:.9rem; font-weight:600;
  padding: 13px 28px; border-radius:var(--radius-md);
  border: 1.5px solid rgba(255,255,255,.2);
  transition: all .2s var(--ease);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); }

.btn-white {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:white; color:var(--navy);
  font-size:.9rem; font-weight:700;
  padding:14px 28px; border-radius:var(--radius-md);
  box-shadow: 0 4px 24px rgba(0,0,0,.1);
  transition:all .2s var(--ease);
}
.btn-white:hover { box-shadow:0 8px 40px rgba(0,0,0,.15); transform:translateY(-1px); }

.btn-outline-dark {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  color:var(--gray-600); font-size:.9rem; font-weight:600;
  padding:13px 28px; border-radius:var(--radius-md);
  border: 1.5px solid var(--gray-200);
  transition:all .2s var(--ease);
}
.btn-outline-dark:hover { border-color:var(--green); color:var(--gray-900); background:rgba(0,229,160,.04); }

.btn-sm { padding:9px 18px; font-size:.8rem; border-radius:10px; }

/* ══════════════════════════════════════════
   HERO – DARK
══════════════════════════════════════════ */
.hero-dark {
  background: var(--navy);
  position: relative; overflow: hidden;
  min-height: 100vh;
}
.hero-dark .bg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
}
.hero-dark .blob {
  position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none;
  animation:blobDrift 14s ease-in-out infinite;
}
/* Blob palette: green primary + blue secondary */
.blob-1 { width:560px;height:560px;background:rgba(0,229,160,.12); top:-180px;right:-80px; animation-delay:0s; }
.blob-2 { width:380px;height:380px;background:rgba(0,95,255,.09); bottom:-80px;left:-40px; animation-delay:-5s; }
.blob-3 { width:280px;height:280px;background:rgba(0,229,160,.06); top:45%;left:38%; animation-delay:-9s; }

/* ── Aurora background ── */
.hero-aurora {
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
}
.hero-aurora::before {
  content:'';
  position:absolute; width:160%; height:160%; top:-30%; left:-30%;
  background:
    radial-gradient(ellipse 70% 55% at 15% 45%, rgba(0,229,160,.09) 0%, transparent 60%),
    radial-gradient(ellipse 55% 70% at 80% 25%, rgba(0,95,255,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 55% 75%, rgba(0,229,160,.06) 0%, transparent 50%);
  filter:blur(55px);
  animation:auroraA 24s ease-in-out infinite alternate;
}
.hero-aurora::after {
  content:'';
  position:absolute; width:140%; height:140%; top:-20%; left:-20%;
  background:
    radial-gradient(ellipse 65% 45% at 75% 65%, rgba(0,229,160,.07) 0%, transparent 55%),
    radial-gradient(ellipse 75% 40% at 25% 70%, rgba(0,130,255,.06) 0%, transparent 50%);
  filter:blur(75px);
  animation:auroraB 30s ease-in-out infinite alternate;
}

/* ── Gradient text ── */
.grad-green { background:linear-gradient(135deg,#00E5A0,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-blue  { background:linear-gradient(135deg,#60a5fa,#22d3ee); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-full  { background:linear-gradient(135deg,#00E5A0 0%,#22d3ee 50%,#005FFF 100%); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:gradShift 6s ease infinite; }

/* ── Glass card ── */
.glass {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-strong {
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.13);
}

/* ── System viz ── */
.sys-viz { position:relative; width:480px; height:480px; }
@media(max-width:1023px){ .sys-viz { display:none; } }

.sys-hub {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100px; height:100px;
  background:linear-gradient(135deg,var(--green),#00c48a);
  border-radius:28px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 60px rgba(0,229,160,.4), 0 0 120px rgba(0,229,160,.15);
  z-index:10;
  animation:scaleIn .8s var(--ease) forwards;
}
.sys-mod {
  position:absolute; z-index:10;
  display:flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:16px;
}
.sys-mod.top    { top:16px; left:50%; transform:translateX(-50%) translateY(0); animation:fadeUp .6s .3s var(--ease) both; }
.sys-mod.right  { right:0; top:50%; transform:translateY(-50%); animation:fadeIn .6s .5s var(--ease) both; }
.sys-mod.bottom { bottom:16px; left:50%; transform:translateX(-50%); animation:fadeUp .6s .7s var(--ease) both; }
.sys-mod.left   { left:0; top:50%; transform:translateY(-50%); animation:fadeIn .6s .4s var(--ease) both; }
.sys-mod-icon { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0; }
.sys-mod-label { color:white;font-size:12px;font-weight:700;line-height:1.2;font-family:'Inter',sans-serif; }
.sys-mod-sub   { font-size:10px;opacity:.5;font-weight:500; }

/* Notif bubbles */
.sys-notif { position:absolute; z-index:20; }
.sys-notif-card {
  background:white; border-radius:12px;
  padding:8px 12px; font-size:11px; font-weight:600; color:var(--gray-900);
  display:flex; align-items:center; gap:6px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);
  white-space:nowrap;
  animation:float 3.5s ease-in-out infinite;
}
.sys-notif:nth-child(1) .sys-notif-card { animation-delay:0s; }
.sys-notif:nth-child(2) .sys-notif-card { animation-delay:1.2s; }
.sys-notif:nth-child(3) .sys-notif-card { animation-delay:2.4s; }
.notif-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }

/* Dash SVG lines */
.dash-line { animation:dash 2s linear infinite; }
.dash-line-rev { animation:dash 2s linear infinite reverse; }

/* ── Pillar tags ── */
.pillar-row { display:flex; flex-wrap:wrap; gap:10px; }
.pillar-tag {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:100px; padding:7px 14px; font-size:13px; font-weight:600; color:white;
}
.pillar-dot { width:7px;height:7px;border-radius:50%; }

/* ══════════════════════════════════════════
   PROBLEM SECTION
══════════════════════════════════════════ */
.problem-card {
  background:white; border-radius:var(--radius-md);
  border:1.5px solid #fee2e2;
  padding:28px;
  transition:all .25s var(--ease);
  position:relative; overflow:hidden;
}
.problem-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,#ef4444,#f97316);
}
.problem-card:hover { border-color:#fca5a5; box-shadow:0 12px 40px rgba(239,68,68,.07); transform:translateY(-3px); }
.problem-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px; }

/* ══════════════════════════════════════════
   ROI CALCULATOR
══════════════════════════════════════════ */
.roi-card {
  background: linear-gradient(135deg, var(--navy), #0d1a3a);
  border-radius: var(--radius-xl);
  padding:48px;
  position:relative; overflow:hidden;
}
.roi-card::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
  background-size:32px 32px;
}
.roi-input {
  background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 20px; font-size:20px; font-weight:800;
  color:white; width:100%; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.roi-input:focus { border-color:rgba(0,229,160,.6); box-shadow:0 0 0 3px rgba(0,229,160,.12); }
.roi-label { color:rgba(255,255,255,.55); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; display:block; }
.roi-result { text-align:center; padding:28px; background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.2); border-radius:var(--radius-md); }
.roi-gain   { text-align:center; padding:28px; background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); border-radius:var(--radius-md); }
.roi-number { font-size:2.5rem; font-weight:900; line-height:1; font-family:'Plus Jakarta Sans',sans-serif; }

/* ══════════════════════════════════════════
   3 PILLARS / SOLUTION
══════════════════════════════════════════ */
.solution-dark {
  background:linear-gradient(180deg, #0b1221 0%, #0d1a3a 100%);
  position:relative; overflow:hidden;
}
.pillar-block {
  border-radius:var(--radius-lg); padding:36px;
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .3s, transform .3s;
  position:relative; overflow:hidden;
}
.pillar-block::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.03), transparent);
  opacity:0; transition:opacity .3s;
}
.pillar-block:hover { border-color:rgba(0,229,160,.25); transform:translateY(-5px); }
.pillar-block:hover::before { opacity:1; }
.pillar-num {
  font-size:4rem; font-weight:900; line-height:1;
  opacity:.06; position:absolute; top:20px; right:28px;
  font-family:'Plus Jakarta Sans',sans-serif;
}

/* ══════════════════════════════════════════
   SYSTEM BLOCKS
══════════════════════════════════════════ */
.sys-block {
  background:white; border-radius:var(--radius-lg);
  border:2px solid var(--gray-100); padding:36px;
  position:relative; overflow:hidden;
  transition:all .3s var(--ease);
}
.sys-block::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--block-color, var(--green));
  border-radius:2px 0 0 2px;
}
.sys-block:hover { border-color:var(--block-color, var(--green)); box-shadow:0 20px 56px rgba(0,0,0,.08); transform:translateY(-5px); }
.sys-block-icon { width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:20px; }
.sys-block-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em; margin-bottom:12px;
}

/* ── Chat bubble animation ── */
.chat-demo { background:var(--gray-50); border-radius:20px; padding:20px; }
.chat-bbl {
  border-radius:18px; padding:10px 14px; font-size:13px; font-weight:500;
  max-width:220px; margin-bottom:8px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.chat-bbl.show { opacity:1; transform:none; }
.chat-bbl.user  { background:var(--gray-200); color:var(--gray-900); border-bottom-right-radius:4px; margin-left:auto; }
.chat-bbl.bot   { background:linear-gradient(135deg, var(--green), #00c48a); color:var(--navy); border-bottom-left-radius:4px; font-weight:600; }
.chat-bbl.sys   { background:#d1fae5; color:#065f46; text-align:center; border-radius:10px; margin:0 auto 8px; font-size:11px; }
.chat-typing { display:flex; align-items:center; gap:4px; padding:10px 14px; background:var(--gray-200); border-radius:18px; border-bottom-left-radius:4px; width:64px; margin-bottom:8px; opacity:0; transition:opacity .3s; }
.chat-typing.show { opacity:1; }
.typing-dot { width:6px;height:6px;background:var(--gray-400);border-radius:50%;animation:wave 1.1s ease-in-out infinite; }
.typing-dot:nth-child(2){animation-delay:.15s} .typing-dot:nth-child(3){animation-delay:.3s}

/* ── CRM mockup ── */
.crm-row {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:12px; background:white;
  border:1px solid var(--gray-100);
  margin-bottom:6px;
  opacity:0; transform:translateX(-16px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.crm-row.show { opacity:1; transform:none; }

/* ══════════════════════════════════════════
   USE CASES
══════════════════════════════════════════ */
.use-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.use-tab {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:12px;
  border:1.5px solid var(--gray-200);
  font-size:14px; font-weight:600; color:var(--gray-500);
  cursor:pointer; transition:all .2s var(--ease);
  background:white;
}
.use-tab:hover { border-color:var(--green); color:var(--gray-900); }
.use-tab.active { background:var(--navy); color:white; border-color:var(--navy); box-shadow:0 4px 16px rgba(10,15,30,.2); }
.use-panel { display:none !important; animation:scaleIn .4s var(--ease); }
.use-panel.active { display:grid !important; }
/* Photo panels in use cases */
.use-panel > div:last-child > .relative { min-height:300px; }
@media (max-width:767px) { .use-panel > div:last-child > .relative { min-height:220px; } }

/* ══════════════════════════════════════════
   STATS
══════════════════════════════════════════ */
.stat-card {
  text-align:center; padding:28px 20px;
  background:white; border-radius:var(--radius-md);
  border:1px solid var(--gray-100);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
  transition:all .25s var(--ease);
}
.stat-card:hover { box-shadow:0 12px 40px rgba(0,0,0,.07); transform:translateY(-3px); }
.stat-number { font-size:2.8rem; font-weight:800; line-height:1; letter-spacing:-.02em; font-family:'Plus Jakarta Sans',sans-serif; }

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.testi-track { display:flex; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.testi-item  { min-width:100%; }
.cdot { width:8px;height:8px;border-radius:50%;background:var(--gray-200);cursor:pointer;transition:all .3s; }
.cdot.active { background:var(--green); width:24px; border-radius:4px; }

/* ══════════════════════════════════════════
   PRICING CARDS
══════════════════════════════════════════ */
.price-card {
  background:white; border-radius:var(--radius-lg);
  border:1.5px solid var(--gray-200); padding:36px;
  transition:all .3s var(--ease);
  position:relative;
}
.price-card:hover { box-shadow:0 24px 60px rgba(0,0,0,.08); transform:translateY(-5px); }
.price-card.popular {
  border-color:var(--green);
  box-shadow:0 0 0 4px rgba(0,229,160,.08), 0 24px 60px rgba(0,229,160,.12);
  transform:scale(1.04);
}
.price-card.popular:hover { transform:scale(1.04) translateY(-5px); }
@media(max-width:768px){ .price-card.popular { transform:none; } }
.price-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--green); color:var(--navy); font-size:11px; font-weight:800;
  padding:5px 16px; border-radius:100px; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,229,160,.35);
  font-family:'Inter',sans-serif;
}
.price-feature { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--gray-600); margin-bottom:10px; }
.price-feature .ok  { color:var(--green-2); font-weight:700; flex-shrink:0; margin-top:1px; }
.price-feature .no  { color:var(--gray-300); flex-shrink:0; margin-top:1px; }

/* Toggle */
.toggle-pill { width:52px;height:28px;background:var(--gray-200);border-radius:14px;position:relative;cursor:pointer;transition:background .3s;flex-shrink:0; }
.toggle-pill.on { background:var(--green); }
.toggle-pill::after { content:'';position:absolute;top:4px;left:4px;width:20px;height:20px;background:white;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.12);transition:left .3s; }
.toggle-pill.on::after { left:28px; }

/* ══════════════════════════════════════════
   FORMS & INPUT
══════════════════════════════════════════ */
.form-input {
  width:100%; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  padding:13px 18px; font-size:15px; font-weight:500;
  color:var(--gray-900); outline:none; background:white;
  transition:border-color .2s, box-shadow .2s;
}
.form-input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(0,229,160,.1); }
.form-input::placeholder { color:var(--gray-400); font-weight:400; }

/* ══════════════════════════════════════════
   LABELS / BADGES
══════════════════════════════════════════ */
.section-label {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,229,160,.08); color:var(--green-2);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; border:1px solid rgba(0,229,160,.2);
}
.section-label-dark {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.65);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 14px; border-radius:100px; border:1px solid rgba(255,255,255,.13);
}
.badge-live {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(0,229,160,.1); color:var(--green-2);
  font-size:12px; font-weight:700; padding:6px 14px; border-radius:100px;
  border:1px solid rgba(0,229,160,.2);
}

/* ══════════════════════════════════════════
   WAVE AUDIO BARS
══════════════════════════════════════════ */
.wave-bars { display:flex; align-items:center; gap:4px; height:28px; }
.wave-bar { width:4px; border-radius:3px; background:currentColor; animation:wave 1.1s ease-in-out infinite; }
.wave-bar:nth-child(1){height:10px;animation-delay:0s}
.wave-bar:nth-child(2){height:20px;animation-delay:.12s}
.wave-bar:nth-child(3){height:28px;animation-delay:.24s}
.wave-bar:nth-child(4){height:22px;animation-delay:.12s}
.wave-bar:nth-child(5){height:12px;animation-delay:0s}

/* ══════════════════════════════════════════
   FAQ
══════════════════════════════════════════ */
.faq-body { overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-body.open { max-height:400px; }
.faq-icon { transition:transform .3s var(--ease); display:inline-block; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.footer-dark { background:#06090f; border-top:1px solid rgba(255,255,255,.05); }
.footer-link { font-size:14px; color:#4B5563; transition:color .2s; }
.footer-link:hover { color:var(--green); }

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
.toast {
  position:fixed; bottom:24px; right:24px; z-index:500;
  background:white; border:1.5px solid var(--gray-200); border-radius:16px;
  padding:16px 20px; display:flex; align-items:center; gap:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.1);
  transform:translateY(80px); opacity:0;
  transition:all .4s var(--ease); max-width:320px;
}
.toast.show { transform:translateY(0); opacity:1; }

/* ══════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════ */
.float     { animation:float 4s ease-in-out infinite; }
.float-alt { animation:floatAlt 4.5s ease-in-out infinite; }
.ping-ring { animation:pingRing 2s ease-out infinite; }
.shimmer-bg {
  background:linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size:200% 100%; animation:shimmer 1.5s infinite;
}
.hidden { display:none; }
.overflow-hidden { overflow:hidden; }

/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#f1f5f9; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media(max-width:768px) {
  .sys-viz { display:none; }
  .roi-card { padding:28px 20px; }
  .pillar-block { padding:24px; }
  .sys-block { padding:24px; }
  .price-card { padding:24px; }
}

/* ══════════════════════════════════════════
   SYSTEM PAGE — FLOW DIAGRAM
══════════════════════════════════════════ */
.flow-step {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  background:white; border-radius:var(--radius-md);
  border:1.5px solid var(--gray-100); padding:24px 20px;
  text-align:center; position:relative;
  transition:all .25s var(--ease);
}
.flow-step:hover { border-color:var(--green); box-shadow:0 12px 32px rgba(0,0,0,.06); transform:translateY(-3px); }
.flow-step-icon {
  width:56px;height:56px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}

/* ══════════════════════════════════════════
   DEMO PAGE
══════════════════════════════════════════ */
.phone-sim-card {
  background:var(--navy-2); border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08); padding:28px;
  position:relative; overflow:hidden;
}
.phone-number-box {
  display:flex; align-items:center; gap:16px;
  background:rgba(255,255,255,.06); border:1.5px solid rgba(0,229,160,.2);
  border-radius:var(--radius-md); padding:18px 22px;
}
.phone-number { font-family:'Plus Jakarta Sans',sans-serif; font-size:1.8rem; font-weight:800; color:white; letter-spacing:.02em; }

/* ══════════════════════════════════════════
   PROGRESS BARS (system page)
══════════════════════════════════════════ */
.progress-bar { background:var(--gray-100); border-radius:100px; height:6px; overflow:hidden; }
.progress-fill { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--green),var(--blue)); width:0; transition:width 1.2s var(--ease); }

/* ══════════════════════════════════════════
   COMPARISON TABLE (tarifs page)
══════════════════════════════════════════ */
.compare-table { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--gray-200); }
.compare-head { background:var(--navy); color:white; }
.compare-head-cell { padding:20px 16px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; font-size:14px; }
.compare-head-cell.pro { color:var(--green); }
.compare-row { border-bottom:1px solid var(--gray-100); }
.compare-row:last-child { border-bottom:none; }
.compare-cell { padding:14px 16px; font-size:14px; color:var(--gray-600); }
.compare-cell.feature { color:var(--gray-900); font-weight:500; }
.compare-section { background:var(--gray-50); padding:10px 16px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-400); }