/* ============================================================
   Virtual Employees AI — Components & sections
   ============================================================ */

/* ---------------- HEADER ---------------- */
.hdr {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.hdr.scrolled {
  background: rgba(4,6,14,0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-brd);
}
.hdr-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 11px; position: relative;
  background: linear-gradient(160deg, #0b1430, #05070f);
  border: 1px solid var(--glass-brd-strong);
  display: grid; place-items: center;
  box-shadow: 0 0 24px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-name b { color: var(--acc-2); }
.brand-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .26em; color: var(--text-mute); text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { font-size: 14.5px; font-weight: 600; color: var(--text-dim); transition: color .2s; }
.nav a:hover { color: var(--text); }
@media (max-width: 980px) { .nav { display: none; } }

/* ---------------- HERO ---------------- */
.hero { padding: 150px 0 80px; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px; align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 {
  font-size: clamp(44px, 6vw, 70px);
  font-weight: 600;
  margin: 22px 0 0;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line span { display: inline-block; }
.hero-sub {
  margin-top: 24px; max-width: 520px;
  font-size: 18.5px; color: var(--text-dim); line-height: 1.62;
}
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { margin-top: 36px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-trust .stars { color: var(--acc-3); font-size: 15px; letter-spacing: 2px; }
.hero-trust .t-txt { font-size: 13.5px; color: var(--text-mute); }
.hero-trust .t-txt b { color: var(--text-dim); font-weight: 700; }

/* right column holds chatbox + floating core behind */
.hero-right { position: relative; }
.core-behind {
  position: absolute; right: -120px; top: -150px; z-index: 0;
  width: 500px; height: 500px; pointer-events: none;
  opacity: .6;
  animation: floatCore 9s ease-in-out infinite;
}
@keyframes floatCore { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-22px) } }
@media (max-width: 980px){ .core-behind{ right: -30px; top: -90px; width: 320px; height: 320px;} }

/* ---------------- NEON CORE ---------------- */
.neon-core { position: relative; width: 100%; height: 100%; display: grid; place-items: center; }
.nc-stage { position: relative; width: 70%; aspect-ratio: 1; transform-style: preserve-3d; }
.nc-orb {
  position: absolute; inset: 28%; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fff, var(--acc-3) 22%, var(--acc) 52%, var(--acc-deep) 78%, #0a1230 100%);
  box-shadow: 0 0 60px 8px var(--glow), 0 0 120px 24px var(--glow-soft), inset -8px -10px 30px rgba(0,0,0,.5), inset 6px 8px 22px rgba(255,255,255,.4);
  animation: orbPulse 4.5s ease-in-out infinite;
}
@keyframes orbPulse { 0%,100%{ box-shadow: 0 0 60px 8px var(--glow), 0 0 120px 24px var(--glow-soft), inset -8px -10px 30px rgba(0,0,0,.5), inset 6px 8px 22px rgba(255,255,255,.4);} 50%{ box-shadow: 0 0 80px 14px var(--glow), 0 0 150px 36px var(--glow-soft), inset -8px -10px 30px rgba(0,0,0,.5), inset 6px 8px 22px rgba(255,255,255,.55);} }

.nc-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    conic-gradient(from 0deg, transparent 0%, var(--acc-2) 18%, var(--acc-3) 32%, transparent 55%, transparent 100%) border-box;
  -webkit-mask: none;
  filter: drop-shadow(0 0 8px var(--glow));
}
.nc-ring.r1 { transform: rotateX(74deg) rotateZ(0deg); animation: spin 8s linear infinite; }
.nc-ring.r2 { inset: 9%; transform: rotateX(60deg) rotateY(30deg); animation: spin 12s linear infinite reverse; opacity:.8; }
.nc-ring.r3 { inset: 4%; transform: rotateY(72deg); animation: spin 16s linear infinite; opacity:.6; }
@keyframes spin { to { transform: rotateX(74deg) rotateZ(360deg); } }
.nc-ring.r2 { animation-name: spin2; }
@keyframes spin2 { from{transform: rotateX(60deg) rotateY(30deg) rotateZ(0)} to{transform: rotateX(60deg) rotateY(30deg) rotateZ(-360deg)} }
.nc-ring.r3 { animation-name: spin3; }
@keyframes spin3 { from{transform: rotateY(72deg) rotateZ(0)} to{transform: rotateY(72deg) rotateZ(360deg)} }

.nc-node {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 12px 3px var(--acc-2);
}
.nc-particles span {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--acc-3); box-shadow: 0 0 6px var(--acc-2); opacity:.7;
  animation: floatp 6s ease-in-out infinite;
}
@keyframes floatp { 0%,100%{ transform: translateY(0); opacity:.3 } 50%{ transform: translateY(-16px); opacity:.9 } }

/* full hero core variant (bigger) */
.core-hero { width: 100%; height: 100%; }

/* ---------------- CHATBOX ---------------- */
.chatbox {
  position: relative; z-index: 2;
  width: 100%; border-radius: 20px;
  background: linear-gradient(180deg, rgba(14,22,48,0.86), rgba(8,12,30,0.92));
  border: 1px solid var(--glass-brd-strong);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(47,123,255,.08), 0 0 60px -20px var(--glow);
  backdrop-filter: blur(20px);
  overflow: hidden;
}
.cb-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--glass-brd);
  background: rgba(8,12,28,0.6);
}
.cb-dots { display: flex; gap: 6px; }
.cb-dots i { width: 9px; height: 9px; border-radius: 50%; display:block; }
.cb-dots i:nth-child(1){ background:#ff5f57 } .cb-dots i:nth-child(2){ background:#febc2e } .cb-dots i:nth-child(3){ background:#28c840 }
.cb-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--text-dim); }
.cb-title b { color: var(--acc-2); }
.cb-live { margin-left: auto; display:flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-mute); letter-spacing:.1em; }
.cb-live .pulse { width:7px;height:7px;border-radius:50%;background:#28c840;box-shadow:0 0 8px #28c840; animation: blink 1.6s infinite; }
.cb-expand {
  margin-left: 12px; width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--glass-brd); color: var(--text-dim);
  background: rgba(255,255,255,0.03); transition: all .2s;
}
.cb-expand:hover { color: var(--acc-2); border-color: var(--glass-brd-strong); background: rgba(47,123,255,.12); }
.cb-expand svg { width: 15px; height: 15px; }

/* ---- fullscreen mode ---- */
.cb-backdrop {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2,4,10,0.72);
  backdrop-filter: blur(8px);
  animation: fadeIn .25s ease both;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.chatbox.fs {
  position: fixed; z-index: 301;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(820px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  animation: fsIn .3s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes fsIn { from { opacity: 0; transform: translate(-50%, -48%) scale(.97) } to { opacity: 1; transform: translate(-50%, -50%) scale(1) } }
.chatbox.fs .cb-body { height: auto; flex: 1 1 auto; }
.chatbox.fs .cb-top { padding: 16px 18px; }

.cb-body {
  padding: 20px 18px;
  height: 400px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  scroll-behavior: smooth;
}
.cb-body::-webkit-scrollbar { width: 6px; }
.cb-body::-webkit-scrollbar-thumb { background: rgba(120,165,255,.2); border-radius: 3px; }

#cb-msgs { display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 10px; max-width: 88%; opacity: 1; animation: msgIn .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes msgIn { from{ transform: translateY(12px); } to{ transform: none; } }
.msg.bot { align-self: flex-start; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg .av {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display:grid; place-items:center;
  background: linear-gradient(160deg,#0d1838,#05070f); border:1px solid var(--glass-brd-strong);
  box-shadow: 0 0 16px -4px var(--glow);
}
.msg .av svg { width: 16px; height:16px; }
.msg.user .av { background: linear-gradient(160deg, var(--acc), var(--acc-deep)); border-color: transparent; }
.bubble {
  padding: 11px 14px; border-radius: 13px; font-size: 14.5px; line-height: 1.5;
  overflow-wrap: break-word; word-break: break-word; min-width: 0;
}
.msg.bot .bubble { background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); border-top-left-radius: 4px; color: var(--text); }
.msg.user .bubble { background: linear-gradient(180deg, var(--acc-2), var(--acc)); color: #fff; border-top-right-radius: 4px; font-weight: 600; box-shadow: 0 8px 22px -8px var(--glow); }

.typing { display:flex; gap:5px; padding: 4px 2px; }
.typing i { width:7px;height:7px;border-radius:50%;background:var(--acc-2); animation: typed 1.2s infinite; }
.typing i:nth-child(2){ animation-delay:.18s } .typing i:nth-child(3){ animation-delay:.36s }
@keyframes typed { 0%,60%,100%{ transform: translateY(0); opacity:.4 } 30%{ transform: translateY(-6px); opacity:1 } }

.chips { display: flex; flex-wrap: wrap; gap: 9px; padding: 2px 0 4px; }
.chip {
  padding: 9px 14px; border-radius: 11px; font-size: 13.5px; font-weight: 600;
  color: var(--text); background: rgba(47,123,255,0.06);
  border: 1px solid var(--glass-brd); transition: all .2s;
  animation: msgIn .4s backwards;
}
.chip:hover { background: rgba(47,123,255,0.18); border-color: var(--glass-brd-strong); transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--glow); }

/* estimate card */
.est { border-radius: 14px; overflow: hidden; border: 1px solid var(--glass-brd-strong); background: rgba(6,10,26,0.7); animation: msgIn .5s; flex-shrink: 0; }
.est-hd { padding: 13px 15px; background: linear-gradient(100deg, rgba(47,123,255,.22), rgba(47,123,255,.04)); border-bottom: 1px solid var(--glass-brd); display:flex; align-items:center; gap:10px; }
.est-hd .tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.1em; color: var(--acc-2); }
.est-hd .nm { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.est-rows { padding: 6px 15px 12px; }
.est-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(120,165,255,.12); }
.est-row:last-child { border-bottom: 0; }
.est-row .k { font-size: 13px; color: var(--text-dim); display:flex; align-items:center; gap:8px; flex-shrink: 0; }
.est-row .v { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; color: var(--text); text-align: right; word-break: break-word; }
.est-row .v.accent { color: var(--acc-3); }
.est-foot { padding: 13px 15px; border-top: 1px solid var(--glass-brd); background: rgba(8,12,28,.5); }
.cb-form { display:flex; flex-direction: column; gap:8px; }
.cb-input {
  width: 100%; padding: 11px 13px; border-radius: 10px; font-size: 14px; font-family: var(--font-body);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-brd); color: var(--text); outline: none;
  transition: border-color .2s; box-sizing: border-box;
}
.cb-input:focus { border-color: var(--glass-brd-strong); }
.cb-input::placeholder { color: var(--text-mute); }
.cb-send {
  width: 100%; padding: 12px 16px; border-radius: 10px; border: 0; font-weight: 700; font-size: 14px; color:#fff;
  background: linear-gradient(180deg, var(--acc-2), var(--acc)); box-shadow: 0 10px 24px -10px var(--glow);
  transition: transform .2s;
}
.cb-send:hover { transform: translateY(-2px); }
.cb-success { text-align:center; padding: 8px 4px; }
.cb-success .ok { width:46px;height:46px;border-radius:50%;margin:0 auto 12px; display:grid;place-items:center; background: rgba(40,200,64,.14); border:1px solid rgba(40,200,64,.4); color:#28c840; }
.cb-success h4 { font-size: 18px; margin-bottom: 6px; }
.cb-success p { font-size: 14px; color: var(--text-dim); }

.cb-progress { height: 3px; background: rgba(120,165,255,.1); }
.cb-progress > i { display:block; height:100%; background: linear-gradient(90deg, var(--acc), var(--acc-3)); box-shadow: 0 0 10px var(--glow); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.cb-restart { background:none; border:0; color: var(--text-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; display:inline-flex; gap:6px; align-items:center; transition: color .2s; }
.cb-restart:hover { color: var(--acc-2); }

/* composer (free text input) */
.cb-composer {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border-top: 1px solid var(--glass-brd);
  background: rgba(8,12,28,0.65);
}
.cb-compose-input {
  flex: 1; padding: 12px 15px; border-radius: 12px; font-size: 14.5px; font-family: var(--font-body);
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-brd); color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.cb-compose-input:focus { border-color: var(--glass-brd-strong); box-shadow: 0 0 0 3px rgba(47,123,255,.14); }
.cb-compose-input::placeholder { color: var(--text-mute); }
.cb-compose-input:disabled { opacity: .5; }
.cb-compose-input:focus { animation: inputCaret 1s steps(1) infinite; }
@keyframes inputCaret {
  0%, 49% { caret-color: var(--acc-2); }
  50%, 100% { caret-color: transparent; }
}
.cb-compose-send {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; color: #fff; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--acc-2), var(--acc));
  box-shadow: 0 10px 24px -10px var(--glow); transition: transform .2s, opacity .2s;
}
.cb-compose-send:hover:not(:disabled) { transform: translateY(-2px); }
.cb-compose-send:disabled { opacity: .4; cursor: default; }

/* ---------------- SECTION HEADER ---------------- */
.sec { padding: 100px 0; }
.sec-head { max-width: 760px; margin: 0 auto; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 44px); margin-top: 18px; }
.sec-head p { margin-top: 18px; color: var(--text-dim); font-size: 18px; }

/* ---------------- TYPEWRITER HEADING ---------------- */
.type-h { min-height: 1.08em; }
.type-cur {
  display: inline-block; width: 0.5ch; height: 0.92em;
  margin-left: 4px; vertical-align: -0.08em;
  background: var(--acc-2);
  box-shadow: 0 0 10px var(--acc-2);
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%,49%{ opacity: 1 } 50%,100%{ opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .type-cur { display: none; } }

/* ---------------- ANIMATED SECTION DIVIDER ---------------- */
.divider {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--maxw);
  margin: 0 auto; padding: 0 28px;
  height: 64px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.divider .line {
  position: relative; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-brd-strong) 30%, var(--glass-brd-strong) 70%, transparent);
  overflow: visible;
}
/* a light pulse that travels along the line */
.divider .line::after {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 90px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--acc-2), transparent);
  filter: blur(0.5px);
  box-shadow: 0 0 14px 2px var(--glow);
  animation: dvSweep 5.5s cubic-bezier(.6,0,.4,1) infinite;
  opacity: .9;
}
.divider.rev .line::after { animation-direction: reverse; animation-delay: 1.2s; }
@keyframes dvSweep {
  0%   { transform: translateX(-90px); opacity: 0; }
  12%  { opacity: .95; }
  88%  { opacity: .95; }
  100% { transform: translateX(100%); opacity: 0; }
}
.divider .node {
  flex: none; width: 12px; height: 12px; margin: 0 18px;
  transform: rotate(45deg);
  background: linear-gradient(160deg, var(--acc-2), var(--acc));
  box-shadow: 0 0 14px 1px var(--glow), inset 0 0 4px rgba(255,255,255,.5);
  border: 1px solid var(--glass-brd-strong);
  animation: dvPulse 3.4s ease-in-out infinite;
}
@keyframes dvPulse { 0%,100%{ transform: rotate(45deg) scale(1); opacity:.85 } 50%{ transform: rotate(45deg) scale(1.22); opacity:1 } }
@media (prefers-reduced-motion: reduce) {
  .divider .line::after, .divider .node { animation: none; }
}

/* ---------------- FRAMED IMPORTANT BLOCK (chat-style HUD) ---------------- */
.framed { position: relative; }
.framed > .c {
  position: absolute; width: 16px; height: 16px;
  border: 2px solid var(--acc-2); opacity: .7; z-index: 4;
  filter: drop-shadow(0 0 4px var(--glow));
}
.framed > .c.tl { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.framed > .c.tr { top: -6px; right: -6px; border-left: 0; border-bottom: 0; }
.framed > .c.bl { bottom: -6px; left: -6px; border-right: 0; border-top: 0; }
.framed > .c.br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

/* ---------------- STAT STRIP ---------------- */
.stripe { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-brd); background: var(--glass-brd); }
.stripe .cell { background: var(--bg-2); padding: 26px 22px; }
.stripe .num { font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--text); letter-spacing: -0.02em; }
.stripe .num b { color: var(--acc-2); font-weight: 600; }
.stripe .lbl { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
@media (max-width: 760px){ .stripe { grid-template-columns: repeat(2,1fr); } }

/* ---------------- CARDS GRID ---------------- */
.cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
@media (max-width: 900px){ .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .cards { grid-template-columns: 1fr; } }
.card {
  padding: 26px; border-radius: var(--radius); position: relative; overflow: hidden;
  background: var(--panel-2); border: 1px solid var(--glass-brd);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.card::before { content:""; position:absolute; inset:0; background: radial-gradient(120% 80% at 0% 0%, rgba(47,123,255,.10), transparent 50%); opacity:0; transition: opacity .3s; }
.card:hover { transform: translateY(-5px); border-color: var(--glass-brd-strong); box-shadow: 0 30px 60px -30px rgba(0,0,0,.8), 0 0 40px -22px var(--glow); }
.card:hover::before { opacity:1; }
.card .ico {
  width: 48px; height: 48px; border-radius: 13px; display:grid; place-items:center; margin-bottom: 18px;
  background: linear-gradient(160deg, rgba(47,123,255,.18), rgba(47,123,255,.04));
  border: 1px solid var(--glass-brd-strong); color: var(--acc-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 24px -10px var(--glow);
}
.card .ico svg { width: 24px; height: 24px; }
.card h3 { font-size: 19px; margin-bottom: 9px; }
.card p { font-size: 14.5px; color: var(--text-dim); line-height: 1.55; }
.card .meta { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; color: var(--text-mute); }

/* ---------------- PROCESS ---------------- */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; position: relative; }
@media (max-width: 900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps { grid-template-columns: 1fr; } }
.step { padding: 28px 24px; border-radius: var(--radius); background: var(--panel-2); border: 1px solid var(--glass-brd); position: relative; }
.step .n { font-family: var(--font-mono); font-size: 13px; color: var(--acc-2); letter-spacing:.1em; }
.step .bignum { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: rgba(120,165,255,.14); position:absolute; top:18px; right:22px; }
.step h3 { font-size: 19px; margin: 14px 0 9px; }
.step p { font-size: 14px; color: var(--text-dim); }

/* ---------------- DIFFERENTIATORS (split) ---------------- */
.diff-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px){ .diff-grid { grid-template-columns: 1fr; } }
.diff-list { display: flex; flex-direction: column; gap: 14px; }
.diff-item { display: flex; gap: 16px; padding: 20px 22px; border-radius: 15px; background: var(--panel-2); border: 1px solid var(--glass-brd); transition: border-color .3s, transform .3s; }
.diff-item:hover { border-color: var(--glass-brd-strong); transform: translateX(4px); }
.diff-item .ck { width: 30px; height: 30px; border-radius: 9px; flex:none; display:grid; place-items:center; background: rgba(47,123,255,.14); color: var(--acc-2); border: 1px solid var(--glass-brd-strong); }
.diff-item h4 { font-size: 16.5px; margin-bottom: 5px; }
.diff-item p { font-size: 14px; color: var(--text-dim); }

/* ---------------- TESTIMONIAL ---------------- */
.quote-wrap { max-width: 880px; margin: 0 auto; text-align: center; }
.quote-wrap .q { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.3; letter-spacing: -0.02em; }
.quote-wrap .q .gradient-text { font-weight: 600; }
.quote-by { margin-top: 26px; display: inline-flex; align-items: center; gap: 12px; }
.quote-by .ava { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(160deg,#15224a,#070b1a); border:1px solid var(--glass-brd-strong); display:grid; place-items:center; font-family: var(--font-display); font-weight:600; color: var(--acc-2); }
.quote-by .who { text-align: left; }
.quote-by .who b { display:block; font-size: 15px; }
.quote-by .who span { font-size: 13px; color: var(--text-mute); }

/* ---------------- FINAL CTA ---------------- */
.cta-card { position: relative; overflow: hidden; border-radius: 26px; padding: 64px 48px; text-align: center;
  background: linear-gradient(180deg, rgba(20,32,68,.7), rgba(8,12,30,.85));
  border: 1px solid var(--glass-brd-strong);
  box-shadow: 0 50px 110px -40px rgba(0,0,0,.9), 0 0 80px -30px var(--glow); }
.cta-card::before { content:""; position:absolute; inset:0; background: radial-gradient(60% 80% at 50% 0%, rgba(47,123,255,.22), transparent 60%); pointer-events:none; }
.cta-card h2 { font-size: clamp(32px, 4.6vw, 56px); position: relative; }
.cta-card p { margin: 18px auto 0; max-width: 540px; color: var(--text-dim); font-size: 18px; position: relative; }
.cta-card .hero-cta { justify-content: center; position: relative; }

/* ---------------- FOOTER ---------------- */
.ftr { border-top: 1px solid var(--glass-brd); padding: 50px 0 40px; margin-top: 60px; }
.ftr-grid { display:flex; justify-content: space-between; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.ftr p { font-size: 14px; color: var(--text-mute); max-width: 320px; margin-top: 14px; }
.ftr-cols { display:flex; gap: 60px; flex-wrap: wrap; }
.ftr-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 14px; }
.ftr-col a { display:block; font-size: 14.5px; color: var(--text-dim); margin-bottom: 10px; transition: color .2s; }
.ftr-col a:hover { color: var(--acc-2); }
.ftr-base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--glass-brd); display:flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-mute); font-family: var(--font-mono); letter-spacing: .04em; }

/* ---------------- AGENT NETWORK GRAPH ---------------- */
.agent-graph { width: 100%; height: 100%; overflow: visible; }
.ag-link {
  stroke: var(--acc-2); stroke-width: 1.4; stroke-dasharray: 3 7;
  opacity: .55; filter: drop-shadow(0 0 3px var(--glow));
  animation: agFlow 1.1s linear infinite;
}
@keyframes agFlow { to { stroke-dashoffset: -20; } }
.ag-orbit { animation: agOrbit 6s linear infinite; }
@keyframes agOrbit { to { stroke-dashoffset: -110; } }
.ag-node { fill: var(--acc-2); animation: agPulse 2.6s ease-in-out infinite; }
@keyframes agPulse { 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.ag-label { fill: var(--text-dim); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; }
.ag-core { animation: agCore 4s ease-in-out infinite; }
@keyframes agCore { 0%,100%{ opacity:.92 } 50%{ opacity:1 } }
.ag-core-tx { fill: #fff; font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

/* ---------------- DEPLOY TERMINAL ---------------- */
.term {
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(8,13,30,.92), rgba(5,8,20,.96));
  border: 1px solid var(--glass-brd-strong);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,.9), 0 0 50px -26px var(--glow);
  font-family: var(--font-mono);
}
.term-top { display:flex; align-items:center; gap:10px; padding: 11px 14px; border-bottom: 1px solid var(--glass-brd); background: rgba(6,10,24,.7); }
.term-title { font-size: 11.5px; color: var(--text-dim); letter-spacing: .04em; }
.term-tag { margin-left:auto; font-size: 10px; color: var(--acc-2); border:1px solid rgba(47,123,255,.3); border-radius:5px; padding:2px 7px; letter-spacing:.08em; }
.term-body { padding: 16px 16px 18px; min-height: 168px; font-size: 12.8px; line-height: 1.85; }
.term-line { white-space: pre; }
.term-line.cmd  { color: var(--acc-3); }
.term-line.ok   { color: #9fb0d4; }
.term-line.done { color: #2fd27a; font-weight: 500; }
.term-line.dim  { color: var(--text-mute); }
.term-cur { display:inline-block; width: 8px; height: 14px; margin-left: 3px; background: var(--acc-2); transform: translateY(2px); animation: blink 1s steps(1) infinite; box-shadow: 0 0 8px var(--acc-2); }

/* ---------------- HUD CHROME ---------------- */
.scanlines { position: relative; }
.scanlines::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index: 3; border-radius: inherit;
  background-image: repeating-linear-gradient(0deg, rgba(120,165,255,.045) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity:.6;
}
.hud-corners { position: relative; }
.hud-corners > .c { position:absolute; width:14px; height:14px; border:2px solid var(--acc-2); opacity:.7; z-index:4; }
.hud-corners > .c.tl { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hud-corners > .c.tr { top:-1px; right:-1px; border-left:0; border-bottom:0; }
.hud-corners > .c.bl { bottom:-1px; left:-1px; border-right:0; border-top:0; }
.hud-corners > .c.br { bottom:-1px; right:-1px; border-left:0; border-top:0; }

.chat-frame { position: relative; border-radius: 20px; z-index: 2; }

/* process 2-col with terminal */
.proc-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 38px; align-items: center; margin-top: 54px; }
@media (max-width: 900px){ .proc-grid { grid-template-columns: 1fr; } }
.proc-steps { display: flex; flex-direction: column; gap: 14px; }
.proc-steps .step { padding: 18px 22px; }
.proc-steps .step .bignum { font-size: 34px; top: 14px; }

/* ---- CHATBOX GLOW PULSE ---- */
@media (prefers-reduced-motion: no-preference) {
  .chatbox { animation: cbPulse 3.5s ease-in-out infinite; }
  @keyframes cbPulse {
    0%, 100% { box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(47,123,255,.08), 0 0 40px -15px var(--glow); }
    50%       { box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(47,123,255,.08), 0 0 70px -5px var(--glow); }
  }
}

/* ---- MOBILE RESPONSIVE FIXES ---- */

/* Padding réduit sur petits écrans */
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
}

/* Header : le bouton "Estimer" + brand trop larges ensemble */
@media (max-width: 700px) {
  .brand-sub { display: none; }
  .hdr-inner .btn { padding: 10px 14px; font-size: 13px; }
}
@media (max-width: 440px) {
  .brand-name { font-size: 14px; }
  .hdr-inner .btn { display: none; }
}

/* Hero : core-behind plus petit + contenu héros */
@media (max-width: 600px) {
  .hero { padding: 110px 0 50px; }
  .core-behind { right: -10px; top: -40px; width: 200px; height: 200px; opacity: .3; }
  .chat-frame { max-width: 540px; margin: 0 auto; }
  .hero-sub { font-size: 16px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
}

/* Section "Pour qui" : force empilage sur mobile (au cas où) */
@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr !important; }
}