/* Strat futurist peste tema existenta.
   Structura, continutul si culorile de brand raman ale site-ului: violet #6239BD,
   cyan #74C5DA, teal inchis #092933. Se schimba materialul - lumina, adancimea,
   miscarea. Se incarca ultimul si se scoate stergand o linie din pagini. */

:root{
  --rdn-violet:#6239BD;
  --rdn-violet-clar:#8b63e8;
  --rdn-cyan:#74C5DA;
  --rdn-cyan-clar:#a6e4f2;
  --rdn-adanc:#092933;
  --rdn-noapte:#19233F;
  /* roșul butonului din slider, cu care se aprind cardurile la apăsare */
  --rdn-rosu:#cc0000;
  --rdn-rosu-clar:#e11b1b;

  --rdn-grad: linear-gradient(115deg, var(--rdn-violet) 0%, #7a52d4 45%, var(--rdn-cyan) 100%);
  --rdn-grad-text: linear-gradient(100deg, var(--rdn-violet) 10%, #7d57d8 45%, #4fa8c4 92%);
  --rdn-lumina: 0 10px 30px -10px rgba(98,57,189,.55), 0 2px 8px rgba(98,57,189,.22);
  --rdn-lumina-tare: 0 18px 46px -14px rgba(98,57,189,.62), 0 0 0 1px rgba(255,255,255,.14) inset;
  --rdn-sticla: rgba(255,255,255,.62);
  --rdn-arc: cubic-bezier(.22,.61,.36,1);
}

/* --- 1. Antet de sticla, cu muchie luminoasa ---------------------------- */
.fusion-header-wrapper .fusion-header,
.fusion-is-sticky .fusion-header{
  background-color: var(--rdn-sticla) !important;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 0 !important;
  box-shadow: 0 1px 0 rgba(98,57,189,.10), 0 10px 30px -22px rgba(9,41,51,.5);
  position: relative;
  transition: background-color .3s var(--rdn-arc), box-shadow .3s var(--rdn-arc);
}
.fusion-header-wrapper .fusion-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--rdn-grad); opacity:.9;
}
.fusion-is-sticky .fusion-header{ box-shadow: 0 1px 0 rgba(98,57,189,.14), 0 18px 40px -26px rgba(9,41,51,.6); }

/* meniul: linie care creste de la stanga */
.fusion-main-menu > ul > li > a{ position:relative; transition: color .2s var(--rdn-arc); }
.fusion-main-menu > ul > li > a::after{
  content:""; position:absolute; left:0; right:100%; bottom:10px; height:2px; border-radius:2px;
  background: var(--rdn-grad); transition: right .32s var(--rdn-arc);
}
.fusion-main-menu > ul > li:hover > a::after,
.fusion-main-menu > ul > li.current-menu-item > a::after{ right:0; }

/* --- 2. Titluri cu gradient -------------------------------------------- */
.fusion-title h1, .fusion-title h2,
.post-content h1, .post-content h2,
h1.entry-title, .woocommerce-products-header h1{
  background: var(--rdn-grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing:-.02em;
}
/* Titlurile asezate peste imagini, tipare sau masti isi pastreaza culoarea:
   un gradient acolo ar disparea in fundal. Selectoarele tintesc exact
   sectiunile cu fundal, nu orice sectiune - fusion-flex-container e pe toate. */
[class*="has-pattern-background"] h1, [class*="has-pattern-background"] h2,
[class*="has-mask-background"] h1, [class*="has-mask-background"] h2,
[class*="fusion-bg-parallax"] h1, [class*="fusion-bg-parallax"] h2,
[style*="background-image"] h1, [style*="background-image"] h2,
.fusion-page-title-bar h1, .fusion-page-title-bar h2,
sr7-module h1, sr7-module h2, sr7-layer h1, sr7-layer h2{
  background:none !important; -webkit-text-fill-color: currentColor !important; color: inherit;
}

/* Bara de accent sub titluri: se vede indiferent de fundal */
.fusion-title h2::after, .post-content > h2::after{
  content:""; display:block; width:64px; height:3px; border-radius:99px;
  margin-top:14px; background: var(--rdn-grad);
  box-shadow: 0 2px 10px -2px rgba(98,57,189,.6);
}
.fusion-title[class*="text-center"] h2::after,
.fusion-title-center h2::after{ margin-left:auto; margin-right:auto; }
h1, h2{ text-wrap: balance; }
p{ text-wrap: pretty; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* --- 3. Butoane: gradient, lumina si o sclipire care trece ------------- */
.fusion-button, .button, button, input[type=submit],
.woocommerce a.button, .woocommerce button.button, .woocommerce a.button.alt{
  position: relative; isolation: isolate;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--rdn-grad) !important;
  color: #fff !important;
  box-shadow: var(--rdn-lumina);
  transition: transform .2s var(--rdn-arc), box-shadow .26s var(--rdn-arc);
}
.fusion-button::before, .button::before, .woocommerce a.button::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(115deg, #7a52d4, var(--rdn-cyan), #7a52d4);
  background-size: 220% 100%; opacity:0;
  transition: opacity .3s var(--rdn-arc);
}
.fusion-button:hover::before, .button:hover::before, .woocommerce a.button:hover::before{ opacity:1; }
/* Sclipirea cere overflow:hidden, care ar reteza textul butoanelor inguste din
   listele de produse. De aceea e doar pe butoanele principale, cu nowrap, ca
   eticheta sa nu se rupa niciodata in doua randuri. */
.fusion-button, .button{ overflow: hidden; white-space: nowrap; }
.fusion-button::after, .button::after{
  content:""; position:absolute; top:0; bottom:0; width:45%;
  left:-60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  transition: left .55s var(--rdn-arc);
}
.fusion-button:hover::after, .button:hover::after{ left:120%; }

/* butoanele din listele de produse: gradient si lumina, fara sclipire */
.woocommerce a.button, .woocommerce button.button{
  padding-left: 1.1em !important; padding-right: 1.1em !important;
}
.fusion-button:hover, .button:hover, button:hover, input[type=submit]:hover,
.woocommerce a.button:hover{ transform: translateY(-3px); box-shadow: var(--rdn-lumina-tare); }
.fusion-button:active, .button:active{ transform: translateY(-1px); }

a:focus-visible, button:focus-visible, .fusion-button:focus-visible,
input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--rdn-violet); outline-offset:3px; border-radius:10px;
}

/* --- 4. Carduri de sticla, cu muchie in gradient ----------------------- */
.fusion-content-boxes .content-box-column,
.products .product, .fusion-portfolio-post, .fusion-carousel-item-wrapper{
  position: relative;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgba(9,41,51,.05), 0 14px 34px -22px rgba(9,41,51,.4);
  transition: transform .3s var(--rdn-arc), box-shadow .34s var(--rdn-arc);
}
.fusion-content-boxes .content-box-column::before,
.products .product::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background: linear-gradient(135deg, rgba(98,57,189,.45), rgba(116,197,218,.45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55; transition: opacity .3s var(--rdn-arc); pointer-events:none;
}
.fusion-content-boxes .content-box-column:hover,
.products .product:hover, .fusion-portfolio-post:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 54px -26px rgba(98,57,189,.5), 0 0 0 1px rgba(98,57,189,.10);
}
.fusion-content-boxes .content-box-column:hover::before,
.products .product:hover::before{ opacity:1; }

/* --- 4b. Logourile din carusel: toate cardurile la fel ----------------- */
/* Logourile au inaltimi foarte diferite (de la 49 la 145 px), asa ca fiecare
   card iesea de alta marime. Le dam tuturor acelasi cadru, iar logoul sta
   centrat in el, cat de mare incape, fara sa se deformeze. */
.fusion-image-carousel .swiper-slide{display:flex}
.fusion-image-carousel .fusion-carousel-item-wrapper{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  height:130px; padding:18px 22px;
  box-sizing:border-box;
}
.fusion-image-carousel .fusion-carousel-item-wrapper .fusion-image-wrapper{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}
.fusion-image-carousel .fusion-carousel-item-wrapper img{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
}
@media (max-width:800px){
  .fusion-image-carousel .fusion-carousel-item-wrapper{height:112px;padding:14px 18px}
}

/* --- 5. Aurora discreta in spatele sectiunilor ------------------------- */
.fusion-fullwidth{ position: relative; }
.fusion-fullwidth::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(42% 60% at 12% 0%, rgba(98,57,189,.10), transparent 62%),
    radial-gradient(38% 55% at 92% 18%, rgba(116,197,218,.13), transparent 60%);
}
.fusion-fullwidth > *{ position: relative; z-index:1; }

/* --- 6. Imagini: colturi, lumina si o marire fina ---------------------- */
.fusion-imageframe, .woocommerce-product-gallery__image, .attachment-woocommerce_thumbnail{
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 16px 40px -24px rgba(9,41,51,.55);
}
.fusion-imageframe img, .products .product img{ transition: transform .6s var(--rdn-arc), filter .4s var(--rdn-arc); }
.fusion-imageframe:hover img, .products .product:hover img{ transform: scale(1.06); filter: saturate(112%); }

/* --- 7. Campuri de formular ------------------------------------------- */
input[type=text], input[type=email], input[type=tel], input[type=search], textarea, select{
  border-radius: 12px !important;
  border:1px solid rgba(9,41,51,.14) !important;
  background: rgba(255,255,255,.7) !important;
  transition: border-color .22s var(--rdn-arc), box-shadow .22s var(--rdn-arc), background-color .22s var(--rdn-arc);
}
input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus, select:focus{
  border-color: var(--rdn-violet) !important;
  background:#fff !important;
  box-shadow: 0 0 0 4px rgba(98,57,189,.16), 0 8px 22px -14px rgba(98,57,189,.6);
}

/* --- 8. Separator luminos intre sectiuni ------------------------------- */
.fusion-fullwidth + .fusion-fullwidth{ border-top:1px solid transparent; border-image: var(--rdn-grad) 1; }

/* --- 9. Miscare la derulare, nativa, fara JavaScript ------------------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .fusion-fullwidth > .fusion-builder-row{
      animation: rdn-intra .85s var(--rdn-arc) both;
      animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
    @keyframes rdn-intra{
      from{ opacity:0; transform: translateY(34px) scale(.985); filter: blur(3px); }
      to{ opacity:1; transform:none; filter:none; }
    }
  }
}

/* --- 10. Bara de derulare in culorile brandului ------------------------ */
html{ scrollbar-width: thin; scrollbar-color: rgba(98,57,189,.4) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background: var(--rdn-grad); border-radius:99px; border:2px solid transparent; background-clip:content-box; }
::selection{ background: rgba(98,57,189,.22); }

/* --- 11. Cine a cerut mai putina miscare, o primeste ------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- 6. Meniul principal are opt intrari de cand exista Portofoliu ------ */
/* Intre 1025 si 1400px, cele 50px dintre intrari faceau meniul sa treaca pe
   doua randuri pe laptopuri. Il strangem doar acolo; sub 1025px meniul e
   oricum cel de mobil. */
/* Sigla din stanga antetului: exportul a venit cu .fusion-logo gol.
   Meniul are opt intrari, asa ca spatiul dintre ele se stramteaza pe masura
   ce ecranul scade, ca antetul sa ramana pe un singur rand. */
.fusion-logo{display:flex;align-items:center;height:90px;margin:0}
.rdn-sigla-link{display:block;line-height:0}
.rdn-sigla{display:block;width:auto;height:46px;margin-right:20px}
.rdn-sigla-link:hover .rdn-sigla{filter:brightness(1.06)}

/* meniul mare tine pana la 1001px: sub el intra varianta cu buton */
@media (min-width:1001px) and (max-width:1500px){
  .fusion-main-menu > ul > li{padding-right:36px}
}
@media (min-width:1001px) and (max-width:1400px){
  .fusion-main-menu > ul > li{padding-right:28px}
  .rdn-sigla{height:44px;margin-right:16px}
}
@media (min-width:1001px) and (max-width:1280px){
  .fusion-main-menu > ul > li{padding-right:21px}
  .fusion-main-menu > ul > li > a .menu-text{font-size:20px}
  .rdn-sigla{height:42px;margin-right:14px}
}
@media (min-width:1001px) and (max-width:1199px){
  .fusion-main-menu > ul > li{padding-right:13px}
  .fusion-main-menu > ul > li > a .menu-text{font-size:18px}
  .rdn-sigla{height:38px;margin-right:12px}
}
@media (min-width:1001px) and (max-width:1100px){
  .fusion-main-menu > ul > li{padding-right:8px}
  .fusion-main-menu > ul > li > a .menu-text{font-size:17px}
  .rdn-sigla{height:34px;margin-right:10px}
}
/* intre 1001 si 1024 tema isi pune stilurile de tableta peste meniul mare,
   asa ca aici trebuie insistat: altfel meniul cade pe doua randuri */
@media (min-width:1001px) and (max-width:1024px){
  .fusion-main-menu > ul > li{padding-right:8px !important}
  .fusion-main-menu > ul > li > a{padding-left:0 !important;padding-right:0 !important}
  .fusion-main-menu > ul > li > a .menu-text{font-size:17px !important}
}
@media (max-width:1000px){
  .fusion-logo{height:auto}
  .rdn-sigla{height:40px;margin-right:0}
}
@media (max-width:480px){
  .rdn-sigla{height:34px}
}

/* === 9. Ritm vertical unitar pe tot site-ul ==========================
   Secțiunile veneau din WordPress cu spații foarte diferite: 0, 51, 91,
   116, 126 sau 161px deasupra conținutului și, de cele mai multe ori, zero
   dedesubt, așa că marginile coloanelor ieșeau din secțiune. De aici,
   distanțe inegale de la o secțiune la alta și de la o pagină la alta.

   Acum fiecare secțiune are 56px deasupra și sub conținut, iar coloanele
   care se așază una sub alta (pe telefon) au tot 56px între ele.

   Benzile care își au compoziția lor — sliderul de sus, banda Data Center,
   certificările, parteneriatele și secțiunea albă de pe Web Design — rămân
   cu spațiile lor. */
.fusion-fullwidth:not(.rdn-hero):not(.rdn-dc):not(.rdn-certificate):not(.rdn-parteneri):not(.rdn-sus-alb){
  --awb-padding-top: 56px !important;
  --awb-padding-bottom: 56px !important;
}
.fusion-fullwidth:not(.rdn-hero) > .fusion-builder-row{
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  row-gap: 56px;
}
.fusion-fullwidth:not(.rdn-hero):not(.rdn-dc):not(.rdn-certificate):not(.rdn-parteneri):not(.rdn-sus-alb) .fusion-layout-column{
  --awb-margin-top-large: 0px !important;
  --awb-margin-bottom-large: 0px !important;
  --awb-margin-top-medium: 0px !important;
  --awb-margin-bottom-medium: 0px !important;
  --awb-margin-top-small: 0px !important;
  --awb-margin-bottom-small: 0px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Cardurile cu iconiță (content box) de pe paginile de servicii lăsau 55px
   între ele pe telefon, față de 22px pe prima pagină. Le aducem la același
   pas ca acasă. */
.fusion-content-boxes .content-box-column{margin-bottom: 26px !important}
@media (max-width: 800px){
  .fusion-content-boxes .content-box-column{margin-bottom: 22px !important}
}

/* === 10. Toate cardurile: același pas și același accent roșu ===
   Pe prima pagină, cardurile de servicii se ridică puțin la trecerea
   mausului, cu chenarul și medalionul iconiței în roșul din slider. Aici
   ducem același comportament la toate cardurile de pe site: cutiile cu
   iconiță, planurile, produsele din magazin, portofoliul, clienții și
   plăcuțele cu cifre.

   Atenție la telefoane: acolo „hover" rămâne agățat după ce atingi un
   card și cardul rămâne roșu până atingi altceva. De aceea roșul de la
   maus stă într-un @media doar pentru ecranele cu maus, iar pe telefon
   apare cât ții degetul apăsat, prin clasa .rdn-apasat pusă de
   apasare.js. */
.fusion-content-boxes .content-box-column{
  transition: transform .3s var(--rdn-arc), box-shadow .3s, border-color .3s;
}
.fusion-pricing-table .panel-wrapper,
.fusion-pricing-table .fusion-panel{
  transition: transform .3s var(--rdn-arc), box-shadow .3s, border-color .3s;
}

/* --- ecranele cu maus --- */
@media (hover: hover) and (pointer: fine){
  .fusion-content-boxes{
    --awb-hover-accent-color: var(--rdn-rosu) !important;
    --awb-circle-hover-accent-color: var(--rdn-rosu) !important;
  }
  .fusion-content-boxes .content-box-column:hover{
    transform: translateY(-4px);
    border-color: rgba(204,0,0,.55) !important;
  }
  .content-box-column:hover .heading .icon > span{
    box-shadow: 0 0 0 6px rgba(204,0,0,.18) !important;
  }
  .content-box-column:hover .heading .icon > span > i{
    background: linear-gradient(135deg, var(--rdn-rosu-clar), var(--rdn-rosu)) !important;
    color: #ffffff !important;
  }
  .content-box-column:hover .heading .image img[src*="-alb"]{
    background-color: var(--rdn-rosu) !important;
    box-shadow: 0 0 0 6px rgba(204,0,0,.18) !important;
  }
  .fusion-pricing-table .panel-wrapper:hover,
  .fusion-pricing-table .fusion-panel:hover{
    transform: translateY(-4px);
    border-color: rgba(204,0,0,.5) !important;
    box-shadow: 0 26px 50px -30px rgba(204,0,0,.45);
  }
  .products li.product .fusion-product-wrapper:hover{
    transform: translateY(-4px);
    border-color: rgba(204,0,0,.45);
    box-shadow: 0 1px 2px rgba(9,41,51,.05), 0 26px 44px -28px rgba(204,0,0,.4);
  }
}

/* --- cât ții degetul (sau butonul mausului) apăsat pe card --- */
.fusion-content-boxes .content-box-column.rdn-apasat,
.fusion-pricing-table .panel-wrapper.rdn-apasat,
.fusion-pricing-table .fusion-panel.rdn-apasat{
  transform: translateY(-4px);
  border-color: rgba(204,0,0,.55) !important;
}
.products li.product .fusion-product-wrapper.rdn-apasat{
  transform: translateY(-4px);
  border-color: rgba(204,0,0,.45);
  box-shadow: 0 1px 2px rgba(9,41,51,.05), 0 26px 44px -28px rgba(204,0,0,.4);
}
/* medalionul iconiței: selectorul e lung ca să treacă înaintea celui din
   temă, care are șase clase */
.fusion-content-boxes .fusion-content-box-hover.rdn-apasat .content-box-wrapper .heading .icon i.circle-yes,
.fusion-content-boxes .content-box-column.rdn-apasat .content-box-wrapper .heading .icon > span > i{
  background-color: var(--rdn-rosu) !important;
  border-color: var(--rdn-rosu) !important;
  color: #ffffff !important;
}
.fusion-content-boxes .content-box-column.rdn-apasat .heading .icon > span{
  box-shadow: 0 0 0 6px rgba(204,0,0,.18) !important;
}
/* același roșu și pentru medalionul iconiței-imagine */
.fusion-content-boxes .content-box-column.rdn-apasat .heading .image img[src*="-alb"]{
  background-color: var(--rdn-rosu) !important;
  box-shadow: 0 0 0 6px rgba(204,0,0,.18) !important;
}

/* cutiile cu iconiță-imagine: tema le lăsa iconița pusă direct pe fundal,
   pe când cutiile cu iconiță din font au un medalion rotund violet, care se
   face roșu la apăsare. Pe Web Design cele două feluri stau chiar pe aceeași
   pagină, una sub alta, și se vedea diferența.

   Acum au același medalion. Desenul rămâne exact cel dinainte; se schimbă
   doar culoarea lui: scripts/iconite-cutii.py face o copie albă („-alb"),
   iar cercul de sub ea vine de aici.

   De ce o copie albă și nu un filtru CSS peste desenul violet: filtrele ies
   altfel pe iPhone decât pe calculator (roșul ieșea roz), pe când o imagine
   are aceeași culoare peste tot. Regula prinde doar iconițele albe, după
   numele fișierului: în cutiile altor pagini pot sta fotografii. */
.content-box-column .heading .image img[src*="-alb"]{
  /* cercul stă chiar pe imagine, nu pe căsuța din jur. Așa rămâne căsuța
     celulă de tabel, ca la iconițele din font, și păstrează spațiul de 20px
     dintre iconiță și titlu pe care tema îl dă imaginii din cutie. */
  width: 40px;
  height: 40px;
  padding: 9px;
  box-sizing: border-box;
  border-radius: 100%;
  background-color: var(--rdn-violet);
  object-fit: contain;
  transition: background-color .3s var(--rdn-arc), box-shadow .3s var(--rdn-arc);
}

/* Aici erau regulile cardurilor din magazinul vechi, cel făcut cu Avada.
   Markup-ul ăla („.fusion-product-wrapper") nu mai există nicăieri: nici pe
   site, unde magazinul a fost scos, nici pe shop.rdndata.ro, unde tema
   nouă folosește markup-ul nativ al lui WooCommerce.
   Erau, în schimb, foarte vii: două margini negative cu „!important" și un
   „padding: 13px !important" care treceau peste grila din magazin.css și
   îi strâmbau cardurile. Îmbrăcarea magazinului stă acum toată într-un
   singur loc, în magazin.css. */

/* === 11. Poza dintr-o coloană: mai mare, mai aproape de text ===
   Când o coloană ține doar o poză, tema o ținea cu câțiva pixeli mai
   îngustă decât coloana, iar sub cutiile cu iconiță rămânea un spațiu de
   40px peste pasul obișnuit al secțiunii. Poza umple acum coloana, iar pe
   telefon urcă mai aproape de textul de deasupra. */
.fusion-column-wrapper:has(> .fusion-image-element:only-child){
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.fusion-column-wrapper > .fusion-image-element:only-child img{
  width: 100% !important;
  height: auto !important;
}
/* ultimul rând de cutii își ducea marginea de jos mai departe, peste pasul
   secțiunii; o scădem la loc ca spațiul să rămână cât arată pasul */
.fusion-column-wrapper > .fusion-content-boxes:last-child{
  margin-bottom: -26px !important;
}
@media (max-width: 800px){
  .fusion-column-wrapper > .fusion-content-boxes:last-child{
    margin-bottom: -22px !important;
  }
}
@media (max-width: 800px){
  /* clasa scrisă de două ori ca regula să treacă înaintea pasului de la
     punctul 9, care pune margin-top:0 pe toate coloanele */
  .fusion-fullwidth .fusion-builder-row .fusion-layout-column + .fusion-layout-column.fusion-layout-column:has(> .fusion-column-wrapper > .fusion-image-element:only-child){
    margin-top: -24px !important;   /* din pasul de 56px rămân 32px până la poză */
  }
}

/* === 12. Banda „Suport și Monitorizare”: poza noastră ================
   Fotografia din camera de monitorizare e închisă la culoare, deci titlul
   și paragraful nu s-ar mai citi peste ea. Coborâm poza, ca oamenii și
   monitoarele să rămână în cadru, și punem un văl alb care se stinge spre
   mijloc, exact peste zona în care stă textul. */
.rdn-suport-poza{
  background-position: center bottom !important;
  position: relative;
}
.rdn-suport-poza::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 62%;
  background: linear-gradient(180deg,
              #ffffff 0%,
              rgba(255, 255, 255, .94) 38%,
              rgba(255, 255, 255, .72) 68%,
              rgba(255, 255, 255, 0) 100%);
  z-index: 0;
  pointer-events: none;
}
/* conținutul trece peste văl, altfel ar rămâne sub el */
.rdn-suport-poza > .fusion-builder-row{
  position: relative;
  z-index: 1;
}
/* pe telefon ajunge varianta de 960px: 58KB în loc de 128KB */
@media (max-width: 800px){
  .rdn-suport-poza{
    /* inline-ul temei pune variabila pe element, deci avem nevoie de !important */
    --awb-background-image: url("../img/suport-monitorizare-960.webp") !important;
  }
}


/* === 13. Puntea dintre poza de suport și banda Data Center ===========
   Poza de birou, luminoasă, se lipea drept de fotografia întunecată din
   centrul de date. Între ele intră o bandă deschisă la culoare, cu trei
   servicii: ochiul are unde să se odihnească, iar pagina câștigă și ceva
   de citit, nu doar aer.

   Banda e scrisă cu clasele Avada, deci lățimea și pasul de 56px vin din
   punctul 9; aici rămâne doar așezarea celor trei coloane. */
.rdn-punte > .fusion-builder-row{
  margin-left: auto !important;
  margin-right: auto !important;
}
.rdn-servicii{
  /* rândul e flex: fără lățime explicită, grila s-ar strânge cât textul */
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.rdn-punte .rdn-serv{
  text-align: center;
}
.rdn-punte .rdn-serv img{
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  margin: 0 auto 16px;
}
/* titlul e <h3>, iar tema dă tuturor h3-urilor din conținut 42px printr-un
   selector cu două bucăți; de aceea scriem și noi două clase, altfel am
   pierde la specificitate */
.rdn-punte .rdn-serv-t{
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--rdn-noapte);
}
.rdn-punte .rdn-serv-s{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: #7a8399;
}
@media (max-width: 800px){
  .rdn-servicii{
    grid-template-columns: 1fr;
    gap: 26px;
  }
}


/* === 14. Subsolul: scurt, pe un rând =================================
   Zona de widget-uri a temei avea cinci coloane inegale, o siglă „Firmă de
   încredere” cât o casă și o casetă de Facebook care trăgea SDK-ul lor pe
   fiecare pagină. A fost scoasă cu totul: acum subsolul e un bloc scund, cu
   sigla și toate paginile pe un rând, contactul pe linia de dedesubt și
   informațiile legale la final. Rândul ANPC/SOL și copyright-ul rămân în
   subsolul închis de dedesubt. */
.rdn-subsol{
  background: #f4f6f7;
  color: #6b7385;
  padding: 44px 0 30px;
  border-top: 1px solid rgba(25, 35, 63, .07);
  font-size: 15px;
}
.rdn-subsol *{
  box-sizing: border-box;
}
.rdn-subsol .sf-in{
  max-width: 1216px;
  margin: 0 auto;
  padding: 0 24px;
}
.rdn-subsol .sf-cap{
  display: flex;
  align-items: center;
  gap: 34px;
  flex-wrap: wrap;
}
.rdn-subsol .sf-sigla{
  flex: 0 0 auto;
  line-height: 0;
}
.rdn-subsol .sf-sigla img{
  width: 120px;
  height: auto;
}
.rdn-subsol .sf-legaturi{
  display: flex;
  flex-wrap: wrap;
  gap: 9px 22px;
}
.rdn-subsol .sf-legaturi a{
  font-size: 14.5px;
  color: #6b7385;
  text-decoration: none;
  transition: color .2s var(--rdn-arc);
}
.rdn-subsol .sf-legaturi a:hover,
.rdn-subsol .sf-mic a:hover{
  color: var(--rdn-violet);
}
.rdn-subsol .sf-rand{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(25, 35, 63, .08);
}
.rdn-subsol .sf-contact{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  max-width: 74%;
}
.rdn-subsol .sf-contact li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}
.rdn-subsol .sf-contact a{
  color: #6b7385;
  text-decoration: none;
}
.rdn-subsol .sf-contact a:hover{
  color: var(--rdn-violet);
}
/* eticheta de deasupra adresei: care e sediul și care e centrul de date */
.rdn-subsol .sf-contact i{
  display: block;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .62;
  margin-bottom: 2px;
}
.rdn-subsol .sf-ico{
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 2px;
  fill: var(--rdn-violet);
}
.rdn-subsol .sf-dreapta{
  display: flex;
  align-items: center;
  gap: 20px;
}
.rdn-subsol .sf-fb{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--rdn-grad);
  color: #fff !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: var(--rdn-lumina);
}
.rdn-subsol .sf-fb .sf-ico{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 0;
  fill: #fff;
}
.rdn-subsol .sf-incredere{
  width: 74px;
  height: auto;
}
.rdn-subsol .sf-mic{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
}
.rdn-subsol .sf-mic a{
  color: #8b95ab;
  text-decoration: none;
  transition: color .2s var(--rdn-arc);
}
.rdn-subsol .sf-mic span{
  color: #c3c9d4;
}
@media (max-width: 800px){
  .rdn-subsol{
    padding: 34px 0 24px;
  }
  .rdn-subsol .sf-cap{
    gap: 20px;
  }
  .rdn-subsol .sf-rand{
    flex-direction: column;
    align-items: flex-start;
  }
  .rdn-subsol .sf-contact{
    flex-direction: column;
    gap: 11px;
    max-width: 100%;
  }
}

/* === 15. Contact: cartonașele sediilor și banda cu terasa ============
   Cele opt cartonașe stăteau pe „float", așa că fiecare se oprea unde se
   termina textul lui, iar marginea de jos ieșea în trepte: adresa are două
   rânduri, telefonul unul. Rândul devine flexibil și toate ajung la
   aceeași înălțime. */
.rdn-contact-carduri{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.rdn-contact-carduri .content-box-column{
  float: none;
}

/* Titlurile cartonașelor au coborât de la H2 la H3, ca să nu fie două H1 pe
   pagină. Regula de gradient de la secțiunea 2 prinde doar h1 și h2, așa că
   violetul îl punem înapoi aici — altfel primul rând s-ar fi făcut gri.
   Acum arată la fel și rândul al doilea, care oricum era H3. */
.rdn-contact-carduri .content-box-heading{
  background: var(--rdn-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: -.02em;
}

/* Pe telefon iconița avea 200px scriși direct în atributul „style", adică
   aproape un ecran întreg pentru fiecare cartonaș — opt ecrane doar de
   iconițe. De-aia trebuie „!important": altfel stilul din atribut câștigă. */
@media (max-width: 800px){
  .rdn-contact-carduri .icon > span{
    width: 96px !important;
    height: 96px !important;
    line-height: 96px !important;
    border-width: 7px !important;
  }
  .rdn-contact-carduri .icon i.fontawesome-icon{
    width: 88px !important;
    height: 88px !important;
    line-height: 88px !important;
    font-size: 40px !important;
    border-width: 3px !important;
  }
}

/* Banda cu terasa: scrisul e alb, iar poza are cer alb și perne albe, deci
   jumătate din text nu se citea. Un văl întunecat peste poză, sub text.
   E „::before" așezat absolut, nu „::after": banda e „display:flex", iar un
   pseudo-element obișnuit ar deveni o coloană goală în rând. */
.rdn-contact-terasa{
  position: relative;
}

.rdn-contact-terasa::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(9, 41, 51, .74) 0%,
              rgba(9, 41, 51, .60) 55%,
              rgba(9, 41, 51, .44) 100%);
  pointer-events: none;
}

/* conținutul trece peste văl, altfel ar rămâne sub el */
.rdn-contact-terasa > .fusion-builder-row{
  position: relative;
  z-index: 1;
}

/* Titlurile mutate de pe H1/H3/H4 pe H2 au primit, odată cu tagul, și bara
   de accent automată de la secțiunea 2. Fiindcă în pagină există deja o
   linie proprie sub ele, ar fi ieșit două. Rămâne cea din pagină. */
.fusion-title .rdn-contact-titlu::after{
  display: none;
}

/* fraza de sub titlu era pusă ca titlu H4; acum e paragraf, dar arată la fel */
.rdn-contact-terasa .rdn-contact-fraza{
  color: #ffffff;
  margin: 0;
}

/* === 16. Săgeata „sus de tot" ========================================
   Tema aducea deja un buton, dar pe două sferturi: pe calculator era o
   clapetă mică, gri, lipită de marginea de jos și tăiată pe jumătate, iar
   pe ecrane sub 960px nu apărea deloc — body are clasa „no-mobile-totop",
   care o ascunde. Deci pe telefon, unde paginile sunt cele mai lungi și
   omul chiar are nevoie de ea, nu exista.

   Elementul rămâne al temei (#toTop, cu eticheta lui pentru cititoarele de
   ecran și cu derularea lină deja legată). Aici se schimbă doar cum arată
   și când se vede. */
body.no-mobile-totop .to-top-container,
.to-top-container{
  display: block !important;
}

#toTop{
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 100% !important;
  /* sigla firmei, pe alb: logoul e roșu cu negru și pe violet s-ar pierde */
  background-color: #ffffff !important;
  background-image: url("../img/logo_rdn-e1616770176546.webp") !important;
  background-repeat: no-repeat !important;
  background-position: 47% 56% !important;
  background-size: 76% auto !important;
  box-shadow: 0 12px 30px -10px rgba(98, 57, 189, .55),
              0 0 0 2px rgba(98, 57, 189, .35),
              0 2px 8px rgba(9, 41, 51, .18);
  /* până nu derulezi, nu are ce căuta pe ecran */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s var(--rdn-arc), transform .3s var(--rdn-arc),
              visibility .3s var(--rdn-arc), box-shadow .3s var(--rdn-arc);
}

/* tema pune clasa asta pe buton după ce ai derulat puțin */
#toTop.fusion-to-top-active{
  opacity: 1;
  visibility: visible;
  transform: none;
}

#toTop:hover,
#toTop:focus-visible{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px -10px rgba(98, 57, 189, .85), 0 2px 8px rgba(9, 41, 51, .2);
}

#toTop:focus-visible{
  outline: 3px solid var(--rdn-cyan-clar);
  outline-offset: 3px;
}

/* fontul de iconițe al temei n-are ce căuta peste siglă */
#toTop::before{
  content: "" !important;
  display: none;
}

@media (max-width: 800px){
  #toTop{
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 46px !important;
    height: 46px !important;
  }
}

/* cine a cerut mai puțină mișcare o primește */
@media (prefers-reduced-motion: reduce){
  #toTop{transition: opacity .15s linear, visibility .15s linear}
  #toTop:hover{transform: none}
}

/* === 17. Prețul din tabelele de pachete ==============================
   „.price" e flex, așa că spațiile scrise în HTML între <span>-uri se
   pierd la marginea fiecărui element, iar tema pune anume margin-left:0
   (și chiar negativ, la forma cu zecimale ridicate). Prețul ieșea lipit:
   „27,99€/lună", iar pe Cloud € se urca peste exponent. Spațiul îl punem
   din CSS, cu selectoarele temei, ca să cântărească mai mult. Zecimalele
   ridicate (302 cu 29 deasupra) rămân lipite, așa cum se cuvine. */
.fusion-pricing-table.full-boxed-pricing .panel-body .price{
  align-items: baseline
}
.fusion-pricing-table.full-boxed-pricing .panel-body .price .currency.pos-right,
.fusion-pricing-table.full-boxed-pricing .panel-body .price .currency.pos-right.price-without-decimal{
  margin-left: .1em
}
.fusion-pricing-table.full-boxed-pricing .panel-body .price .time,
.fusion-pricing-table.full-boxed-pricing .panel-body .price .time.pos-right,
.fusion-pricing-table.full-boxed-pricing .panel-body .price .time.price-without-decimal{
  margin-left: .55em
}

/* pe Colocare, prețul începe cu „De la": scris mărunt, lângă cifră, nu cu
   litere de-o șchioapă, cum ieșea când stătea în același span cu ea */
.fusion-pricing-table.full-boxed-pricing .panel-body .price .rdn-dela{
  font-size: .3em;
  font-style: italic;
  color: var(--awb-time-color, #747474);
  margin-right: .45em;
  letter-spacing: .02em
}

/* === 18. Legătura către Contact din banda „Premium Support" ===========
   Culoarea singură n-o deosebea destul de restul rândului, mai ales pe
   violet: omul n-avea de unde ști că se poate apăsa. O subliniem. */
.fusion-text a[href="/contact/"]{
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px
}
.fusion-text a[href="/contact/"]:hover{
  text-decoration-thickness: 2px
}

/* === 19. Pe telefon, pasul de 56px iese prea mare =====================
   Între două benzi se adună 56px de jos și 56px de sus - peste 110px de
   gol pe un ecran de 390px lățime, adică aproape o treime de ecran fără
   nimic în el. Pe desktop pasul rămâne cum e; aici îl strângem. */
@media (max-width: 800px){
  .fusion-fullwidth:not(.rdn-hero):not(.rdn-dc):not(.rdn-certificate):not(.rdn-parteneri):not(.rdn-sus-alb){
    --awb-padding-top: 36px !important;
    --awb-padding-bottom: 36px !important;
  }
  .fusion-fullwidth:not(.rdn-hero) > .fusion-builder-row{
    row-gap: 36px;
  }
}

/* Coloanele goale rămase din WordPress. Pe ecran lat sunt distanțiere:
   trei coloane de 1/6 care împing conținutul spre mijloc, și nu se văd.
   Pe telefon însă coloanele se așază una sub alta, iar fiecare goală
   mănâncă un pas întreg - trei la rând înseamnă peste 100px de nimic
   înaintea primului cartonaș. Pe lat rămân cum sunt; pe îngust le
   ascundem. */
@media (max-width: 800px){
  .fusion-builder-row > .fusion-layout-column:has(> .fusion-column-wrapper:empty){
    display: none;
  }
}

/* === 20. Cartonașele care se întorc lasă spațiu în plus sub ele =======
   Sub ultimul cartonaș se adunau două margini ale temei: 20px de la
   învelișul cartonașului și 25px de la grupul lor. Cu cei 36px ai benzii
   ieșeau 81px dedesubt, față de 36px deasupra - se vedea limpede pe
   telefon, banda violetă avea un gol mai mare la coadă decât la cap.
   Între cartonașe margina rămâne, că ea le desparte. */
.fusion-flip-boxes{ margin-bottom: 0 !important }
.fusion-flip-boxes .fusion-flip-box-wrapper:last-child .flip-box-inner-wrapper{
  margin-bottom: 0 !important;
}

/* Aceeași poveste la tabelele de pachete: tema le pune 20px sub ele, deci
   sub ultimul rămâneau 56px, nu 36px ca deasupra. Dacă tabelul e ultimul
   din coloana lui, margina aia nu mai desparte nimic. */
.fusion-column-wrapper > .fusion-pricing-table:last-child,
.fusion-column-wrapper > .awb-pricing-table:last-child{
  margin-bottom: 0 !important;
}

/* === 21. Margina de sub ultimul lucru din coloană =====================
   Tema pune 20px sub fiecare titlu, text sau poză, ca să le despartă
   între ele. Sub ultimul din coloană însă margina aia nu mai desparte
   nimic: doar adaugă la spațiul benzii, și banda iese cu mai mult gol
   la coadă decât la cap. O scoatem, peste tot. */
.fusion-fullwidth .fusion-column-wrapper > *:last-child,
.fusion-fullwidth .fusion-column-wrapper > *:last-child > *:last-child{
  margin-bottom: 0 !important;
}
.fusion-fullwidth .fusion-text > *:last-child{
  margin-bottom: 0 !important;
}

/* === 22. Lungimea rândului de text ====================================
   Pe tabletă și pe laptop, textul curent se întindea pe toată lățimea
   benzii: 119-123 de caractere pe rând la 1024px. Ochiul pierde rândul
   pe la 80 de caractere - de-aia cartea și ziarul au coloane înguste.
   Îi punem o lățime maximă de vreo 75 de caractere.
   Nu se atinge textul din cartonașe, din tabele sau din cutiile cu
   iconițe: acolo rândurile sunt oricum scurte, iar lățimea o dă cutia. */
@media (min-width: 601px){
  .fusion-fullwidth .fusion-column-wrapper > .fusion-text p,
  .fusion-fullwidth .fusion-column-wrapper > .fusion-text ul,
  .fusion-fullwidth .fusion-column-wrapper > .fusion-text ol{
    max-width: 38em;
  }
  /* unde scrisul e centrat, se centrează și coloana lui de text */
  .fusion-fullwidth [style*="text-align: center"] .fusion-text p,
  .fusion-fullwidth .fusion-text[style*="text-align: center"] p,
  .fusion-fullwidth .fusion-text p[style*="text-align: center"],
  .fusion-fullwidth .rdn-gw-intro,
  .fusion-fullwidth .rdn-intro-text,
  .fusion-fullwidth .fusion-text.rdn-text-centrat p{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* === 23. Cât de mare e locul în care apeși ============================
   În meniul de telefon, linkurile aveau „padding:0 12px 0 30px" - zero
   sus și jos -, deci zona pe care apeși era doar cât rândul de scris,
   30px. Deasupra și dedesubt rămânea o fâșie moartă: apeși pe rând și
   nu se întâmplă nimic. La fel în subsol. Degetul cere cam 44px.
   Numai pe ecran tactil: la mouse, 30px e destul. */
@media (pointer: coarse){
  .fusion-mobile-nav-holder .fusion-menu li a{
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .rdn-subsol .sf-legaturi a,
  .fusion-footer a:not(.fusion-button):not([class*=rdn-anpc]){
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
}

/* --- 24. Derularea laterală de 8px de pe ecran îngust ------------------ */
/* Rândurile Avada au margini negative de 2% pe fiecare latură, ca să
   compenseze spațiul dintre coloane: rândul iese 8px în stânga și 8px în
   dreapta, iar coloanele îl aduc înapoi cu padding-ul lor. Pe desktop nu se
   vede, fiindcă pagina are loc. Pe telefon, cei 8px din dreapta nasc o
   derulare laterală — pe 9 din 20 de pagini.

   Banda îi taie. „clip", nu „hidden": hidden face din bandă un container de
   derulare și strică position:sticky dinăuntru; clip doar taie. */
.fusion-fullwidth{ overflow-x: clip; }
@supports not (overflow-x: clip){
  .fusion-fullwidth{ overflow-x: hidden; }
}
/* Bannerul de sus are aceeași poveste, cu poza lui lățită. */
.rdn-banner{ overflow-x: clip; }
@supports not (overflow-x: clip){
  .rdn-banner{ overflow-x: hidden; }
}