/* ─────────────────────────────────────────────────────
   OUBAITORI VISION — ULTRA LUXURY THEME CSS
   Paletă: alb–negru–gri, sticlă, reflexe subtile
   Accesibilitate: respectă prefers-reduced-motion
   ───────────────────────────────────────────────────── */

:root{
  /* Culoare & design tokens */
  --bg:#0b0b0b; --surface:#111111; --panel:#151515; --line:#2a2a2a;
  --text:#f5f5f5; --muted:#a7a7a7; --muted2:#d0d0d0;
  --radius:20px; --radius-sm:14px;
  --ring:rgba(255,255,255,.12);
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 18px 54px rgba(0,0,0,.45);
  --container:1100px;

  /* Motion */
  --dur:.75s; --ease:cubic-bezier(.2,.7,.2,1);
  --stagger:.06s;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar{width:0;height:0}

body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 70% -20%,rgba(255,255,255,.05),transparent 60%), var(--bg);
  color:var(--text);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

.container{width:min(var(--container),92%);margin:auto}
.section{padding:92px 0; position:relative}
.section::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)
}
.section-alt{
  background:
    radial-gradient(1000px 400px at 50% -20%,rgba(255,255,255,.08),transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%);
}
.ov-muted{color:var(--muted2)}

/* ───────── NAV / HEADER ───────── */
.site-header{
  position:sticky; top:0; z-index:30;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.35));
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.logo-svg{height:34px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand-text{font-weight:800; letter-spacing:.2px}

.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:26px; cursor:pointer}
.nav-menu{display:flex;gap:22px;align-items:center;list-style:none;margin:0;padding:0}
.nav-menu a{
  color:#f1f1f1;text-decoration:none;opacity:.9;position:relative;transition:opacity .25s ease;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg,#fff,transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .35s ease; opacity:.6
}
.nav-menu a:hover{opacity:1}
.nav-menu a:hover::after{transform:scaleX(1)}

/* ───────── BUTTONS ───────── */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid #2b2b2b; background:#1a1a1a; color:#fff; font-weight:700;
  box-shadow:var(--shadow-1);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:#3a3a3a }
.btn-primary{ background:#fff; color:#0b0b0b }
.btn-secondary{ background:#1f1f1f; border-color:#2e2e2e }
.btn-outline{ background:transparent; border-color:#2b2b2b }
.btn-sm{ padding:8px 12px; border-radius:10px }

/* ───────── HERO ───────── */
.hero{ position:relative; min-height:100vh; display:grid; place-items:center; isolation:isolate }
.hero-media{
  position:absolute; inset:0;
  background-size:cover; background-position:center 40%;
  filter:saturate(1.03) contrast(1.04);
  z-index:-1;
  transform:scale(1.02);
  animation:ken 18s ease-in-out infinite alternate;
}
@keyframes ken{
  0%{ transform:scale(1.02) translateY(0) }
  100%{ transform:scale(1.09) translateY(-8px) }
}
.hero-content{ text-align:center; padding:120px 0; will-change:transform }
.hero h1{ font-size:clamp(38px,5.2vw,68px); line-height:1.06; margin:0 0 12px;
  letter-spacing:.2px; text-shadow:0 6px 22px rgba(0,0,0,.6) }
.hero p{ color:#d0d0d0; max-width:760px; margin:0 auto 26px; font-size:clamp(16px,2.4vw,20px) }
.cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.trust{ margin-top:18px; display:flex; gap:18px; justify-content:center; color:#c7cfdd; font-size:14px }

/* Scroll down (alb + bounce + inel sticlă) */
.scroll-indicator{
  position:absolute; bottom:18px; left:50%; transform:translate(-50%,0);
  color:#ffffff; display:inline-grid; place-items:center; width:44px; height:44px;
  border-radius:999px; border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 18px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08);
  opacity:.92; animation:ov-bounce 1.6s ease-in-out infinite;
  transition:transform .2s ease, opacity .2s ease, border-color .2s ease;
}
.scroll-indicator:hover{ opacity:1; border-color:rgba(255,255,255,.45); transform:translate(-50%,0) scale(1.05) }
@keyframes ov-bounce{ 0%,100%{ transform:translate(-50%,0) } 50%{ transform:translate(-50%,8px) } }

/* KPI animated */
.kpi { position:relative; display:inline-flex; align-items:baseline; gap:6px }
.kpi-num{
  position:relative; display:inline-block; font-feature-settings:"tnum" 1;
  background:linear-gradient(90deg, #fff, #dcdcdc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.kpi-num::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.6) 45%, transparent 80%);
  transform:translateX(-120%); opacity:0; pointer-events:none; animation:kpi-shine 2.2s ease-out .45s forwards;
}
@keyframes kpi-shine{
  0%{ transform:translateX(-120%); opacity:0 }
  35%{ opacity:.8 }
  100%{ transform:translateX(120%); opacity:0 }
}
.trust .kpi{ opacity:0; transform:translateY(6px); transition:all .6s ease }
.trust.visible .kpi:nth-child(1){ opacity:1; transform:none; transition-delay:.05s }
.trust.visible .kpi:nth-child(2){ opacity:1; transform:none; transition-delay:.12s }
.trust.visible .kpi:nth-child(3){ opacity:1; transform:none; transition-delay:.18s }

/* ───────── GRIDS / LAYOUT ───────── */
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center }
.feature-figure{ margin:0 }

/* Card standard */
.ov-card{
  background:linear-gradient(180deg,#171717,#101010);
  border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  box-shadow:var(--shadow-1); transition:transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease;
  position:relative; overflow:hidden; will-change:transform;
}
.ov-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:#373737 }
.ov-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from 140deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 60%,rgba(255,255,255,0) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.55; animation:ov-card-sheen 8s linear infinite;
}
@keyframes ov-card-sheen{ to{ transform:rotate(1turn) } }

/* Services — animated pack */
.cards-animated .ov-card{
  opacity:0; transform:translateY(20px) scale(.96); filter:blur(1px);
}
.cards-animated .ov-card.is-in{ opacity:1; transform:none; filter:none; transition:all .6s var(--ease) }
@keyframes ov-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.cards-animated .ov-card.is-in .float{ animation:ov-float 6s ease-in-out infinite }
.cards-animated .ov-card.tilt-on{ box-shadow:var(--shadow-2); border-color:#3a3a3a }

/* KPI grid */
.kpi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0 22px }
.ov-kpi{
  background:linear-gradient(180deg,#161616,#0f0f0f);
  border:1px solid var(--line); border-radius:16px; padding:18px 20px;
  display:flex; flex-direction:column; gap:4px;
  box-shadow:var(--shadow-1);
}
.ov-kpi strong{ font-size:28px }

/* ========== Layout egal pe rând + responsive 3/2/1 ========== */
.testi3d-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
  align-items:stretch;         /* întinde item-urile pe înălțimea rândului */
}

@media (max-width:1024px){
  .testi3d-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px }
}
@media (max-width:768px){
  .testi3d-grid{ grid-template-columns:1fr; gap:16px }
}

/* ========== Card full-height + distribuție verticală ========== */
.testi3d{ height:100% }
.testi3d-card{
  height:100%;
  display:flex;                /* împinge stelele la bază */
  flex-direction:column;
}

/* antet compact + ellipsis pentru nume/rol lungi */
.t3d-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px }
.t3d-name, .t3d-role{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* citatul ocupă spațiul flexibil; stelele se duc jos */
.t3d-quote{ 
  margin:0 0 12px 0;
  /* Clamp: același număr de rânduri vizibile; restul se taie cu … */
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
  -webkit-line-clamp:3;         /* desktop: 3 rânduri */
  line-clamp:3;
}
.t3d-stars{ margin-top:auto; display:flex; gap:6px }

/* quote mark rămâne fix în colț */
.t3d-quote-mark{
  position:absolute; right:14px; top:-8px;
  font-size:110px; line-height:1; color:rgba(255,255,255,.05); pointer-events:none
}

/* ========== Ajustări pe breakpoints pentru balans vizual ========== */
@media (max-width:1024px){
  .t3d-quote{ -webkit-line-clamp:4; line-clamp:4 }   /* un pic mai mult text pe tabletă */
  .t3d-quote-mark{ font-size:90px; right:12px; top:-6px }
}
@media (max-width:768px){
  .t3d-quote{ -webkit-line-clamp:5; line-clamp:5 }   /* mai generos pe mobil */
  .t3d-quote-mark{ font-size:72px; right:10px; top:-4px }
}

/* ========== (Opțional) înălțime minimă pentru uniformitate dură ========== */
.testi3d-card{ min-height: 220px }
@media (max-width:1024px){ .testi3d-card{ min-height: 210px } }
@media (max-width:768px){ .testi3d-card{ min-height: 200px } }

/* ========== Safety mobile: previne ieșirea din container ========== */
.testi3d-wrap{ overflow:hidden }


/* ===== GRID RESPONSIVE FĂRĂ MEDIA QUERIES ===== */
.testi3d-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:22px;
  align-items:stretch;
}

/* ===== CARD: contur, clip corect, layout intern ===== */
.testi3d{ height:100% }

.testi3d-card{
  height:100%;
  display:grid;                       /* 3 zone: head / quote / stars */
  grid-template-rows:min-content 1fr min-content;
  gap:12px;

  box-sizing:border-box;
  padding:22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,#151515,#0f0f0f);
  box-shadow:0 14px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.06) inset;

  overflow:hidden;                    /* IMPORTANT: nimic nu mai iese din border-radius */
  position:relative;
}

/* highlight-urile rămân înăuntru, nu mai folosim inset:-1px */
.testi3d-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:1;
  background:linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0) 30% 70%, rgba(255,255,255,.08));
  mix-blend-mode:screen; opacity:.6; pointer-events:none;
}
.testi3d-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:0;
  background:conic-gradient(from 220deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%, rgba(255,255,255,.08) 60%, rgba(255,255,255,0) 90%);
  opacity:.45; animation:t3d-sheen 6s linear infinite;
}

/* ===== HEAD ===== */
.t3d-head{ display:flex; align-items:center; gap:12px; margin:0 }
.t3d-name, .t3d-role{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* ===== QUOTE (se mulează + clamp) ===== */
.t3d-quote{
  margin:0; color:#f3f3f3;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
  -webkit-line-clamp:4;               /* poți varia 3–5 după gust */
  line-clamp:4;
  word-break:break-word;              /* evită overflow pe cuvinte lungi */
}

/* ===== STARS (mereu jos, nu ies din card) ===== */
.t3d-stars{ display:flex; gap:6px; align-items:center; padding-bottom:2px }
.t3d-stars svg{ display:block }       /* elimină spațiul pe baseline la SVG */

/* ===== QUOTE MARK ===== */
.t3d-quote-mark{
  position:absolute; right:14px; top:-8px;
  font-size:110px; line-height:1; color:rgba(255,255,255,.05); pointer-events:none
}

/* ===== TOUCH SAFE + REDUCED MOTION ===== */
@media (hover:hover) and (pointer:fine){
  .testi3d:hover{ filter:saturate(1.06) }
  .testi3d-card:hover{ border-color:rgba(255,255,255,.2) }
}
@media (prefers-reduced-motion:reduce){
  .testi3d-card{ animation:none !important }
}

/* ===== SPAȚIU MAI STRÂNS PE ECRANE MICI (opțional) ===== */
@media (max-width:420px){
  .testi3d-card{ padding:18px; border-radius:18px }
  .t3d-quote{ -webkit-line-clamp:5; line-clamp:5 }
  .t3d-quote-mark{ font-size:72px; right:10px; top:-4px }
}


/* About / Checklist */
.checklist{ list-style:none; margin:20px 0; padding:0; display:grid; gap:8px }
.checklist li{ position:relative; padding-left:28px; color:#f5f5f5 }
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; color:#fff; font-weight:700; font-size:16px; line-height:1;
}

/* FAQ */
details.faq{
  background:linear-gradient(180deg,#161616,#0f0f0f);
  border:1px solid #262626; border-radius:14px; padding:14px 16px; margin:10px 0;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
details.faq[open]{ box-shadow:var(--shadow-1); border-color:#333 }
details.faq summary{ cursor:pointer; font-weight:700; outline:none }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.06); padding:26px 0; background:#0c0c0d }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap }
.footer-legal{ display:flex; gap:16px }
.site-footer a{ color:#d0d0d0; text-decoration:none }
.site-footer a:hover{ color:#fff }
.anpc{ display:flex; gap:10px }

/* Cookie banner (slide-up) */
.cookie{
  position:fixed; left:0; right:0; bottom:0; background:#111; color:#fff; padding:12px 16px; z-index:9999;
  transform:translateY(30px); opacity:0; transition:transform .45s ease, opacity .45s ease;
  box-shadow:0 -20px 60px rgba(0,0,0,.6); border-top:1px solid rgba(255,255,255,.08)
}
.cookie.show{ transform:none; opacity:1 }
.cookie-inner{ width:min(var(--container),92%); margin:auto; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap }

/* Reveal utilitare (pentru markup vechi .reveal) */
.reveal{ opacity:0; transform:translateY(16px); transition:all .7s var(--ease) }
.reveal.visible{ opacity:1; transform:none }
.delay-1{ transition-delay:.1s } .delay-2{ transition-delay:.2s } .delay-3{ transition-delay:.3s }

/* Imagery */
img{ max-width:100%; height:auto; display:block; border-radius:18px }

/* ───────── RESPONSIVE ───────── */
@media (max-width:1024px){
  .grid-4{ grid-template-columns:1fr 1fr }
}
@media (max-width:720px){
  .nav-toggle{ display:block }
  .nav-menu{
    position:fixed; inset:auto 0 0 0; background:#0c1016; border-top:1px solid #1f2733;
    transform:translateY(100%); transition:.25s; padding:12px 18px; display:grid; gap:12px
  }
  .nav-menu.open{ transform:translateY(0) }
  .split{ grid-template-columns:1fr }
  .grid-4,.testimonials,.pricing,.kpi-grid{ grid-template-columns:1fr }
}

/* ───────── ACCESSIBILITY: REDUCED MOTION ───────── */


/* Split centrat pe 1 coloană (helper) */
.split.centered{
  grid-template-columns:1fr;
  justify-items:center;       /* centrează pe axa X */
  text-align:center;
}
.split.centered > *{ max-width:820px }
.split.centered .btn{ margin-inline:auto }
.split.centered .kpi-grid{ justify-items:center }

/* pe mobil oricum e 1 coloană din media queries existente */

/* ===== ABOUT (luxury glass) ===== */
.about{ position:relative; padding:92px 0 }
.about .bg-ornament{
  position:absolute; inset:-10% -20% auto -20%; height:420px;
  background:radial-gradient(600px 220px at 50% 0, rgba(255,255,255,.07), transparent 60%);
  pointer-events:none; z-index:0;
}

.about-wrap{ position:relative; z-index:1 }
.about-card{
  width:min(980px, 94%);
  margin-inline:auto;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:34px 30px;
  backdrop-filter: blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  position:relative; overflow:hidden;
}
.about-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:conic-gradient(from 140deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%, rgba(255,255,255,.18) 60%, rgba(255,255,255,0) 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6;
  pointer-events:none; animation:about-sheen 9s linear infinite;
}
@keyframes about-sheen{ to{ transform:rotate(1turn) } }

.about-head{ text-align:center; margin-bottom:16px }
.about h2{
  margin:0 0 10px; font-size:clamp(28px,3.6vw,38px); line-height:1.1;
}
.about-underline{
  width:84px; height:2px; margin:8px auto 0;
  background:linear-gradient(90deg, #fff, rgba(255,255,255,0));
  filter:drop-shadow(0 6px 14px rgba(255,255,255,.35));
  transform-origin:left; animation:underline-in .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes underline-in{ from{transform:scaleX(0)} to{transform:scaleX(1)} }

.about-body{ text-align:center; color:#d0d0d0 }
.about-body p{ margin:10px auto; max-width:820px }

.about-list{
  --gap:10px;
  list-style:none; padding:0; margin:18px auto 8px; max-width:700px;
  display:grid; gap:var(--gap);
}
.about-list li{
  display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start;
}
.about-check{
  width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font-weight:700; color:#fff;
}

/* Badges (micro-statistici) */
.about-badges{
  margin:14px auto 6px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.badge{
  padding:6px 10px; border-radius:999px; font-size:.85rem; color:#eaeaea;
  background:#121212; border:1px solid #2a2a2a;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}

/* CTA cu aură */
.about-cta{ margin-top:14px; display:flex; justify-content:center }
.btn-aura{
  position:relative; isolation:isolate;
}
.btn-aura::before{
  content:""; position:absolute; inset:-10px; border-radius:20px; z-index:-1;
  background:radial-gradient(120px 40px at 50% 100%, rgba(255,255,255,.28), transparent 70%);
  filter:blur(12px); opacity:.7; transition:opacity .25s ease, transform .25s ease;
}
.btn-aura:hover::before{ opacity:.95; transform:translateY(2px) }

/* Layout opțional cu imagine */
.about-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center;
}
.about-media{
  border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.about-media img{ display:block; width:100%; height:auto }

/* Responsive */
@media (max-width:980px){
  .about-grid{ grid-template-columns:1fr }
}

/* ===== Permanent motion layer (subtle, luxury) ===== */

/* 1) fundal dinamic: gradient + grain */
body::before{
  content:""; position:fixed; inset:-20% -20% -10% -20%; z-index:-2;
  background:
    radial-gradient(1200px 600px at 70% -20%, rgba(255,255,255,.05), transparent 65%),
    radial-gradient(900px 400px at 20% 120%, rgba(255,255,255,.03), transparent 60%);
  animation:ov-bg-pan 28s ease-in-out infinite alternate;
  will-change:transform,opacity; pointer-events:none;
}
@keyframes ov-bg-pan{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(-2%, -1.5%, 0) scale(1.04) }
}
body::after{
  /* grain foarte subtil peste tot */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect filter='url(%23n)' width='100%25' height='100%25'/%3E%3C/svg%3E");
  animation:ov-grain 7s steps(6) infinite;
  mix-blend-mode:soft-light;
}
@keyframes ov-grain{ to{ transform:translate3d(-2%,1.5%,0) } }

/* 2) particule monocrome discrete */
#ov-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden }
.oval{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background:rgba(255,255,255,.12); filter:blur(.2px);
  box-shadow:0 0 12px rgba(255,255,255,.12);
  animation:ov-drift var(--dur,18s) linear infinite;
}
@keyframes ov-drift{
  0%{ transform:translate3d(var(--x,0), 110vh, 0) }
  100%{ transform:translate3d(calc(var(--x,0) + 0px), -10vh, 0) }
}

/* 3) idle tilt pe carduri (se oprește pe hover) */
@keyframes ov-idle-tilt{
  0%{ transform:perspective(800px) rotateX(1deg) rotateY(-1deg) }
  50%{ transform:perspective(800px) rotateX(-1deg) rotateY(1deg) }
  100%{ transform:perspective(800px) rotateX(1deg) rotateY(-1deg) }
}
.ov-card.idle{
  animation:ov-idle-tilt 9s ease-in-out infinite;
}
.ov-card:hover{ animation:none } /* controlăm cu JS clasa .idle */

/* 4) idle sway pentru testimoniale 3D (foarte fin) */
@keyframes t3d-idle{
  0%{ transform:rotateX(.6deg) rotateY(-.6deg) }
  50%{ transform:rotateX(-.6deg) rotateY(.6deg) }
  100%{ transform:rotateX(.6deg) rotateY(-.6deg) }
}
.testi3d.idle{ animation:t3d-idle 10s ease-in-out infinite }
.testi3d:hover{ animation:none }

/* 5) CTA glow puls */
.btn-primary.pulse{
  box-shadow:0 0 0 rgba(255,255,255,.0);
  animation:cta-pulse 2.8s ease-in-out infinite;
}
@keyframes cta-pulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,255,255,.0) }
  50%{ box-shadow:0 0 36px rgba(255,255,255,.25) }
}

/* 6) marquee infinit (ex: logo-uri clienți / badge-uri) */
.marquee{
  position:relative; overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{
  display:flex; gap:22px; width:max-content; animation:marquee 24s linear infinite;
}
@keyframes marquee{ to{ transform:translateX(-50%) } }

/* Respectă preferința utilizatorului */


/* ───────── PARTICLE BACKGROUND ───────── */
#ov-particles {
  position: fixed;
  inset: 0;
  z-index: 0;              /* rămâne în spate */
  overflow: hidden;
  pointer-events: none;
}

#ov-particles .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  opacity: .6;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) scale(.5);
    opacity: 0;
  }
  10% { opacity: .7; }
  90% { opacity: .7; }
  100% {
    transform: translateY(-10vh) scale(1.1);
    opacity: 0;
  }
}