/* ══════════════════════════════════════════════════════════════════════════
   RCFM APP — site ↔ aplicație, identitate vizuală unică
   ──────────────────────────────────────────────────────────────────────────
   Se încarcă ULTIMUL (după hdbox.css, rcfm-wow.css, rcfm-v3.css) ca să aibă
   prioritate în cascadă. Nu schimbă structura/HTML — doar identitatea vizuală:
   înlocuiește accentul AURIU al site-ului cu gradientul CYAN→PURPLE al app-ului
   (același folosit pe splash + login: "RCFM.RO") și adaugă glass + glow.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Gradientul-semnătură al aplicației (cyan → blue → purple) */
  --app-cyan:#22D3EE;
  --app-blue:#60A5FA;
  --app-purple:#A78BFA;
  --app-grad:linear-gradient(95deg,#22D3EE 0%,#60A5FA 50%,#A78BFA 100%);
  --app-grad-soft:linear-gradient(135deg,rgba(34,211,238,.14),rgba(167,139,250,.14));
  --app-glow:0 0 0 1px rgba(96,165,250,.30),0 8px 40px rgba(96,165,250,.35);

  /* Remapăm tokenii "gold" din rcfm-v3 către paleta app (elimină auriul global) */
  --gold:#60A5FA;
  --gold2:#A78BFA;
}

/* ── Heading-uri cu gradient (ca "RCFM.RO" din app) ───────────────────────── */
.v3-hlg,            /* fost highlight auriu  */
.hero-shimmer{      /* titlu hero shimmer    */
  background:var(--app-grad)!important;
  background-size:200% auto!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  animation:appGrad 6s linear infinite;
}
@keyframes appGrad{0%{background-position:0% center}100%{background-position:200% center}}

/* ── Kicker pills → stil app (border gradient, text cyan-purple) ───────────── */
.v3-kk,.kicker-pill{
  background:var(--app-grad-soft)!important;
  border:1px solid rgba(96,165,250,.30)!important;
  color:var(--app-blue)!important;
}

/* ── Butoane: gold → gradient app ─────────────────────────────────────────── */
.v3-btn-gold{
  background:var(--app-grad)!important;
  color:#05070D!important;
  box-shadow:0 4px 24px rgba(96,165,250,.40)!important;
}
.v3-btn-gold:hover{box-shadow:0 8px 44px rgba(167,139,250,.55)!important}

/* Butonul primar capătă tentă cyan→purple peste albastrul de bază */
.btn-p,.v3-btn-p{
  background:linear-gradient(135deg,#2563EB,#7C3AED)!important;
}

/* ── Card "popular" la prețuri: glow auriu → glow app ─────────────────────── */
.v3-pr-card.pop,.price-card-popular{
  background:linear-gradient(160deg,rgba(96,165,250,.07),rgba(167,139,250,.03))!important;
  border:1.5px solid transparent!important;
  border-image:var(--app-grad) 1!important;
  animation:appPrGlow 4s ease-in-out infinite!important;
}
@keyframes appPrGlow{
  0%,100%{box-shadow:0 0 28px rgba(96,165,250,.22),0 10px 44px rgba(167,139,250,.10)}
  50%    {box-shadow:0 0 54px rgba(96,165,250,.45),0 16px 60px rgba(167,139,250,.24)}
}
.v3-pr-pop-lbl{background:var(--app-grad)!important;color:#05070D!important}
.v3-pr-card.pop .v3-pr-name{color:var(--app-blue)!important}
.v3-pr-card.pop .v3-pr-btn{background:var(--app-grad)!important;border:none!important;color:#05070D!important}

/* ── Steps timeline: linie & dot aurii → gradient app ─────────────────────── */
.steps-tl::before{background:var(--app-grad)!important;background-size:200% auto!important;animation:appGrad 5s linear infinite!important}
.step-dot{
  background:var(--app-grad)!important;color:#05070D!important;
  box-shadow:0 0 0 5px rgba(96,165,250,.18),0 0 20px rgba(167,139,250,.40)!important;
}

/* ── Orb-ul auriu din hero → mov (paletă app) ─────────────────────────────── */
.hero-orb-2{background:radial-gradient(circle,rgba(167,139,250,.20) 0%,transparent 70%)!important}

/* ── Review cards: hover auriu → app ──────────────────────────────────────── */
.r-card:hover{
  border-color:rgba(96,165,250,.40)!important;
  box-shadow:0 8px 32px rgba(96,165,250,.16)!important;
}

/* ── Glass pe navbar (ca panourile din app) ───────────────────────────────── */
header.topnav{
  background:rgba(10,13,22,.72)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(96,165,250,.10)!important;
}
header.topnav nav.menu a.active{
  color:var(--app-blue)!important;background:rgba(96,165,250,.12)!important;
}

/* ── Carduri glass (v3-card) capătă borderul subtil albastru al app-ului ──── */
.v3-card{
  background:rgba(21,32,51,.55)!important;
  border:1px solid rgba(96,165,250,.14)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.v3-card.gold-bdr{border-color:rgba(167,139,250,.35)!important}

/* ── Linkuri generice aurii (din hdbox.css legacy) → albastru app ─────────── */
a{color:var(--app-blue)}
a:hover{color:var(--app-cyan)}

/* ── FAQ deschis: accent app ──────────────────────────────────────────────── */
.v3-faq details[open]{border-color:rgba(96,165,250,.30)!important}
.v3-faq details[open] summary::after{color:var(--app-purple)!important}

/* ── Override glow popular-card (era auriu în rcfm-v3) → app ───────────────── */
@keyframes v3PrGlow{
  0%,100%{box-shadow:0 0 28px rgba(96,165,250,.22),0 10px 44px rgba(167,139,250,.10)}
  50%    {box-shadow:0 0 54px rgba(96,165,250,.45),0 16px 60px rgba(167,139,250,.24)}
}
/* Card popular din pricing.php (clasă proprie .pr-t-*) → border gradient app */
.pr-t-card.pop{border-image:var(--app-grad) 1!important}

/* ══════════════════════════════════════════════════════════════════════════
   HERO PREMIUM (homepage) — chenare animate, aurora, gradient curgător
   Efecte „high-end": border conic rotativ (ca o lumină ce înconjoară rama),
   orbi de aurora în fundal, shimmer pe screenshot, headline gradient animat.
   ══════════════════════════════════════════════════════════════════════════ */
@property --bd{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes bdSpin{to{--bd:360deg}}

/* — Aurora: orbi de lumină care plutesc în spatele hero-ului — */
.ph-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ph-aurora span{position:absolute;border-radius:50%;filter:blur(70px);mix-blend-mode:screen}
.ph-orb-a{width:540px;height:540px;top:-170px;right:-90px;
  background:radial-gradient(circle,rgba(34,211,238,.42),transparent 70%);animation:orbA 17s ease-in-out infinite}
.ph-orb-b{width:460px;height:460px;bottom:-150px;left:-70px;
  background:radial-gradient(circle,rgba(167,139,250,.40),transparent 70%);animation:orbB 21s ease-in-out infinite}
.ph-orb-c{width:320px;height:320px;top:36%;left:44%;
  background:radial-gradient(circle,rgba(96,165,250,.34),transparent 70%);animation:orbC 14s ease-in-out infinite}
@keyframes orbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-44px,54px) scale(1.14)}}
@keyframes orbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(54px,-44px) scale(1.1)}}
@keyframes orbC{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-42%,-62%) scale(1.2)}}

/* — Chenar conic rotativ în jurul ramei TV (animated border) — */
.ph-tv-frame{position:relative}
.ph-tv-frame::after{
  content:'';position:absolute;inset:-3px;border-radius:17px;padding:3px;z-index:0;
  background:conic-gradient(from var(--bd),#22D3EE,#60A5FA,#A78BFA,#22D3EE,#A78BFA,#22D3EE);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:bdSpin 5s linear infinite;
  filter:drop-shadow(0 0 12px rgba(96,165,250,.55));
}
.ph-tv-bezel{position:relative;z-index:1}

/* — Shimmer sweep peste screenshot — */
.ph-scr-ol::after{
  content:'';position:absolute;inset:0;border-radius:6px 6px 0 0;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 48%,transparent 60%);
  background-size:250% 100%;animation:scrSweep 6s ease-in-out infinite;
}
@keyframes scrSweep{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}

/* — Chenar conic pe cardurile plutitoare — */
.ph-fc{position:relative}
.ph-fc::after{
  content:'';position:absolute;inset:0;border-radius:14px;padding:1px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--bd),rgba(34,211,238,.85),rgba(167,139,250,.85),rgba(34,211,238,.2),rgba(34,211,238,.85));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:bdSpin 7s linear infinite;
}

/* — Headline cu gradient curgător + glow — */
.ph-hl{background-size:220% auto!important;animation:appGrad 5s linear infinite}
.ph-h1{text-shadow:0 0 60px rgba(96,165,250,.12)}

/* — Reduce motion: respectă preferința utilizatorului — */
@media(prefers-reduced-motion:reduce){
  .ph-aurora span,.ph-tv-frame::after,.ph-fc::after,.ph-scr-ol::after,.ph-hl{animation:none!important}
}

/* ══ Chenare animate extinse: card popular preturi + card "Ce primesti" ══════ */
/* Card popular (homepage teaser .v3-pr-card.pop + pricing.php .pr-t-card.pop) */
.v3-pr-card.pop, .pr-t-card.pop{ position:relative; }
.v3-pr-card.pop::after, .pr-t-card.pop::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:2; pointer-events:none;
  background:conic-gradient(from var(--bd),#22D3EE,#60A5FA,#A78BFA,#22D3EE,#A78BFA,#22D3EE);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:bdSpin 5s linear infinite;
}
/* anulam borderul static ca sa nu se dubleze cu chenarul animat */
.v3-pr-card.pop{ border-image:none!important; }
.pr-t-card.pop{ border-image:none!important; border-color:transparent!important; }

/* Card "Ce primesti" (.ft-hero) — chenar conic animat in loc de cel static */
.ft-hero{ position:relative; }
.ft-hero::before{
  background:conic-gradient(from var(--bd),#22D3EE,#60A5FA,#A78BFA,#22D3EE,#A78BFA,#22D3EE)!important;
  animation:bdSpin 6s linear infinite!important;
}