/* ============================================================
   Vibranius — vibe layer (motion · rhythm · icons · tone)
   Aditiv, se incarca DUPA <style> inline => castiga la egalitate.
   Complementar cu glass-ul (CC). Fara orange agresiv. Fara textura.
   ============================================================ */

/* ---------- 0. tokens locale (mine) ---------- */
:root{
  --vibe-warm: 224,122,63;     /* orange brand, folosit DOAR difuz pe iconite */
  --vibe-dark: #15120e;        /* warm near-black pt banda proof */
  --vibe-dark-ink: #ece6dc;
}

/* ---------- 0b. PERLA MAI RECE: racesc tokenii warm de baza ---------- */
:root{
  --bg: #f4f6f9 !important;
  --panel-2: #f4f6f9 !important;
  --bg-3: #edf0f4 !important;
  --panel-3: #edf0f4 !important;
  --line: #e3e6ea !important;
  --line-2: #d8dce2 !important;
}

/* ---------- 1. RITM: banda dark + cub NEGRU FULL ---------- */
#replaces{ background:#000 !important; }

/* CUB (#replaces): colturile se pierdeau pentru ca mask-ul video le estompa.
   Largesc mask-ul (arat mai mult din cub) + lift fin + halo rece discret in spate. */
.emblem{
  background: radial-gradient(circle at 50% 50%,
              rgba(90,94,106,.22) 0%, rgba(90,94,106,.07) 40%, transparent 64%) !important;
}
.emblem video{
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 94%) !important;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 94%) !important;
  filter: brightness(1.14) contrast(1.07) !important;
}

/* proof-bar = banda dark devreme */
#proof{ background:var(--vibe-dark) !important; border-color:#2b2720 !important; }
#proof, #proof .proof-num, #proof .proof-unit, #proof span{ color:var(--vibe-dark-ink) !important; }
#proof .proof-num{ color:#fff !important; }

/* ---------- 2. ICONITE de-gri-zate: container + stroke + adancime ---------- */
.pkg-ico, .sec-icon, .sec-mark-ico, .aiw-tool-icon, .how-icon-wrap, .prob-answer-icon, .ico{
  background:linear-gradient(150deg, #f4f7fa 0%, #e9eef4 100%) !important;
  box-shadow: 0 1px 2px rgba(31,30,29,.05), inset 0 1px 0 rgba(255,255,255,.7),
              0 0 0 1px rgba(var(--vibe-warm),.05) !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
}
.pkg-ico svg, .sec-icon svg, .sec-mark-ico svg, .aiw-tool-icon svg,
.how-icon-wrap svg, .prob-answer-icon svg, .ico svg{
  color:#33373d !important; stroke:#33373d !important;
}
.pkg-item:hover .pkg-ico, .how-step:hover .how-icon-wrap{
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 12px rgba(var(--vibe-warm),.14), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.pkg-item:hover .pkg-ico svg{ color:rgb(var(--vibe-warm)) !important; stroke:rgb(var(--vibe-warm)) !important; }
#proof .ico, #security .sec-icon, #security .ico{
  background:rgba(255,255,255,.06) !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12) !important;
}
#security .sec-icon svg, #proof .ico svg{ color:var(--vibe-dark-ink) !important; stroke:var(--vibe-dark-ink) !important; }

/* ---------- 3. MOTION: scroll-reveal (clasele le pune JS) + hover lift ---------- */
html.vibe-on .vibe-rv{ opacity:0; transform:translateY(18px); }
html.vibe-on .vibe-rv.vibe-in{
  opacity:1; transform:none;
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
}
html.vibe-on .vibe-rv.vibe-d1.vibe-in{ transition-delay:.06s; }
html.vibe-on .vibe-rv.vibe-d2.vibe-in{ transition-delay:.12s; }
html.vibe-on .vibe-rv.vibe-d3.vibe-in{ transition-delay:.18s; }

.pkg-item, .roi-card, .how-step, [class*="card"]{
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.pkg-item:hover, .roi-card:hover, [class*="card"]:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(31,30,29,.10), 0 3px 10px rgba(31,30,29,.05);
}

/* ---------- 4. accesibilitate: respecta reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  html.vibe-on .vibe-rv{ opacity:1 !important; transform:none !important; }
  .pkg-item, .roi-card, .how-step, [class*="card"]{ transition:none !important; }
  .pkg-item:hover, .roi-card:hover, [class*="card"]:hover{ transform:none !important; }
}

/* ── a11y + semantic color fixes (additive, 20 Jun) ── */
:root{
  /* success/positive states must read green, not brand-orange */
  --green:#10b981 !important;
  --green-2:#059669 !important;
  /* AA contrast: faint/dim were too light on #faf9f6 (#8a857d ≈ 3.3:1) */
  --faint:#6f6a62 !important;   /* ≈ 4.9:1 */
  --dim:#8a857d !important;     /* placeholders ≈ 3.3:1 (was #b3ada3 ≈ 2.2:1) */
}
/* visible keyboard focus on interactive elements — only on keyboard nav, invisible to mouse */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.roi-slider:focus-visible{
  outline:2px solid #ea580c !important;
  outline-offset:2px !important;
}

/* ── heading hierarchy: card titles h4→h3, visual size preserved ── */
.demo3-slide h3{font-size:20px !important;font-weight:600 !important;letter-spacing:-.01em !important;margin:0 0 8px !important;text-align:center;color:#1f1e1d;}
@media(max-width:560px){.demo3-slide h3{font-size:18px !important;}}
.esign-h{font-size:18px !important;font-weight:600 !important;letter-spacing:-.02em !important;margin-bottom:12px;color:#1f1e1d;}

/* ── accessible form validation ── */
.field-err{display:block;color:#b91c1c;font-size:12px;line-height:1.4;margin-top:6px;font-family:var(--sans,sans-serif);}
form input[aria-invalid="true"],form textarea[aria-invalid="true"]{border-color:#b91c1c !important;box-shadow:0 0 0 3px rgba(185,28,28,.12) !important;}

/* ============================================================
   MOBILE responsiveness (additive, 20 Jun) — phones only.
   All rules in @media; desktop untouched. Loads after inline
   <style> so it wins at equal specificity; !important where it
   must beat an inline mobile rule (e.g. the @680 sec-marks rule).
   ============================================================ */
@media(max-width:640px){
  /* Security trust badges: were a chunky 2-col grid (52px icons,
     120px-tall tiles). Make them compact 3-up trust chips → the 6
     badges land as 2 clean rows of 3 instead of bulky pairs. */
  .sec-marks{grid-template-columns:repeat(3,1fr) !important;gap:8px !important;margin-top:28px !important;}
  .sec-mark{padding:14px 6px !important;gap:8px !important;}
  .sec-mark-ico{width:40px !important;height:40px !important;}
  .sec-mark-label{font-size:11px !important;line-height:1.25 !important;word-break:break-word;}
  .sec-mark-sub{font-size:9px !important;line-height:1.2 !important;}
}
@media(max-width:380px){
  /* very narrow (≤360): shrink chips a touch more so 3-up never crowds */
  .sec-marks{gap:6px !important;}
  .sec-mark{padding:12px 4px !important;}
  .sec-mark-ico{width:36px !important;height:36px !important;}
  .sec-mark-label{font-size:10px !important;}
}