/* Slider hero RDN - inlocuieste Revolution Slider (~540 KB) cu ~4 KB.
   Pozele se vad intregi: sunt incadrate cu "contain", iar spatiul ramas e
   umplut cu o copie neclara a aceleiasi poze, ca sa nu apara benzi goale. */
.rdn-hero{
  --rdn-rosu:#cc0000;
  position:relative;
  /* Cadrul e cat ecranul, fara antetul de 110px. Poza il acopera cap la
     cap, ca pe site-ul live - fara benzi si fara margini. */
  height:clamp(520px,calc(100vh - 110px),1000px);
  overflow:hidden;
  background:#0b0f18;
  isolation:isolate;
}
.rdn-hero-slides{position:absolute;inset:0;display:grid}

.rdn-slide{
  grid-area:1/1;position:relative;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),visibility 0s linear 1s;
}
.rdn-slide.rdn-activ{opacity:1;visibility:visible;transition-delay:0s,0s;z-index:1}

/* poza umple cadrul si se apropie incet cat sta pe ecran */
.rdn-slide-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:scale(1);
  /* revine la loc abia dupa ce slide-ul a disparut, ca sa nu se vada saltul */
  transition:transform 0s linear 1s;
  will-change:transform;
}
.rdn-activ .rdn-slide-img{
  transform:scale(1.08);
  transition:transform 6.5s linear;
}

/* valul intunecat din stanga, ca textul sa fie lizibil pe orice poza */
.rdn-slide::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(97deg,rgba(6,9,16,.84) 0%,rgba(6,9,16,.7) 24%,rgba(6,9,16,.44) 46%,rgba(6,9,16,.12) 68%,rgba(6,9,16,.34) 100%),
    radial-gradient(90% 120% at 12% 50%,rgba(204,0,0,.16),transparent 58%);
}

.rdn-slide-text{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
}
.rdn-hero-grid{
  width:100%;max-width:1250px;
  margin:0 auto;padding:0 15px;
  box-sizing:border-box;
}
.rdn-hero-grid>*{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1);
}
.rdn-activ .rdn-hero-grid>*{opacity:1;transform:none}
.rdn-activ .rdn-eticheta{transition-delay:.15s}
.rdn-activ .rdn-titlu{transition-delay:.28s}
.rdn-activ .rdn-cta{transition-delay:.44s}

.rdn-eticheta{
  display:flex;align-items:center;gap:14px;
  margin:0 0 18px;
  font-family:'Open Sans',Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#ff7a5e;
  text-shadow:0 0 2px rgba(6,9,16,.9),0 2px 8px rgba(6,9,16,.8);
}
.rdn-eticheta::before{
  content:"";width:46px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--rdn-rosu),rgba(204,0,0,0));
}

.rdn-titlu{
  max-width:620px;margin:0 0 30px;
  font-family:Teko,'Open Sans',Arial,sans-serif;
  font-size:75px;line-height:65px;font-weight:400;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.55),0 6px 34px rgba(0,0,0,.45);
}
.rdn-titlu b{
  font-weight:400;
  /* o singura culoare plina, nu degrade: degradeul se stingea in bej si se
     pierdea pe pozele luminoase. Haloul intunecat ii da contur oriunde. */
  color:#ff6a4d;
  text-shadow:
    0 0 2px rgba(6,9,16,.9),
    0 2px 6px rgba(6,9,16,.85),
    0 4px 22px rgba(6,9,16,.7);
}

.rdn-cta{
  display:inline-block;position:relative;overflow:hidden;
  padding:20px 35px 22px;
  border:1px double #34aadc;border-radius:30px;
  background:linear-gradient(135deg,#e11b1b,var(--rdn-rosu));
  box-shadow:0 12px 30px -12px rgba(204,0,0,.85);
  font-family:'Open Sans',Arial,sans-serif;
  font-size:15px;font-weight:700;line-height:15px;letter-spacing:1px;text-transform:uppercase;
  color:#fff!important;text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,filter .3s;
}
.rdn-cta::after{
  content:"";position:absolute;top:0;left:-140%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
}
.rdn-cta:hover,.rdn-cta:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 18px 38px -12px rgba(204,0,0,.95);
  filter:saturate(1.1);
}
.rdn-cta:hover::after{animation:rdn-lucire .9s ease}
@keyframes rdn-lucire{to{left:140%}}

/* bare de progres jos */
.rdn-hero-ctrl{
  position:absolute;z-index:4;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;gap:10px;
  width:100%;max-width:1250px;padding:0 15px;box-sizing:border-box;
  justify-content:flex-start;
}
/* butonul e inalt de 26px ca sa fie usor de apasat, dar se vede doar bara de 4px */
.rdn-hero-ctrl button{
  width:52px;height:26px;padding:0;
  border:0!important;border-radius:0!important;
  background:none!important;box-shadow:none!important;
  position:relative;cursor:pointer;
  transition:width .4s cubic-bezier(.22,.61,.36,1);
}
.rdn-hero-ctrl button::before,
.rdn-hero-ctrl button[aria-current="true"]::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;
  border-radius:99px;
}
.rdn-hero-ctrl button::before{background:rgba(255,255,255,.28);transition:background .3s}
.rdn-hero-ctrl button:hover::before{background:rgba(255,255,255,.55)}
.rdn-hero-ctrl button:hover{transform:none}
.rdn-hero-ctrl button[aria-current="true"]{width:86px}
.rdn-hero-ctrl button[aria-current="true"]::after{
  background:linear-gradient(90deg,#ff3b3b,#ff8a5c);
  transform-origin:left;transform:scaleX(0);
  animation:rdn-umple 5s linear forwards;
}
.rdn-hero-ctrl button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:99px}
.rdn-hero.rdn-pauza .rdn-hero-ctrl button[aria-current="true"]::after{animation-play-state:paused}
@keyframes rdn-umple{to{transform:scaleX(1)}}

/* sageti */
.rdn-hero-nav{
  position:absolute;z-index:4;top:50%;transform:translateY(-50%);
  width:52px;height:52px;padding:0;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:50%!important;
  background:rgba(10,14,22,.32)!important;box-shadow:none!important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  color:#fff;cursor:pointer;
  opacity:0;transition:opacity .35s,background .3s,border-color .3s;
}
.rdn-hero:hover .rdn-hero-nav,.rdn-hero-nav:focus-visible{opacity:1}
.rdn-hero-nav:hover{background:var(--rdn-rosu)!important;border-color:var(--rdn-rosu)!important;transform:translateY(-50%)}
.rdn-hero-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.rdn-inapoi{left:26px}
.rdn-inainte{right:26px}

@media (max-width:1024px){
  .rdn-titlu{font-size:66px;line-height:62px;max-width:520px}
}

/* Pe telefon textul sta peste poza, ca pe desktop: asa nu mai ramane o
   banda inchisa sub imagine. Poza e panoramica (2:1), deci pe ecranul
   ingust se vede o fasie verticala din ea - alegem mai jos care fasie,
   slide cu slide, in ordinea din pagina. */
@media (max-width:800px){
  /* cat ecranul, fara antetul de 98px; svh ignora bara de adresa */
  .rdn-hero{--rdn-antet:98px;height:calc(100vh - var(--rdn-antet));height:calc(100svh - var(--rdn-antet));min-height:520px;max-height:900px}
  .rdn-slide-img{object-position:50% center}
  .rdn-slide:nth-child(2) .rdn-slide-img{object-position:22% center}  /* gazduire: culoarul cu rackuri */
  .rdn-slide:nth-child(3) .rdn-slide-img{object-position:45% center}  /* externalizare: cei doi tehnicieni */
  .rdn-slide:nth-child(4) .rdn-slide-img{object-position:38% center}  /* monitorizare: graficele */
  .rdn-slide:nth-child(5) .rdn-slide-img{object-position:28% center}  /* ssl: degetul cu lacatul */
  /* valul nu mai vine din stanga, ci de jos, sub text */
  .rdn-slide::after{
    background:
      linear-gradient(180deg,rgba(6,9,16,.42) 0%,rgba(6,9,16,.06) 24%,rgba(6,9,16,.5) 52%,rgba(6,9,16,.88) 78%,rgba(6,9,16,.96) 100%),
      radial-gradient(120% 60% at 10% 100%,rgba(204,0,0,.18),transparent 62%);
  }
  .rdn-slide-text{align-items:flex-end;padding:0 0 78px}
  .rdn-titlu{font-size:52px;line-height:50px;max-width:none;margin-bottom:22px}
  .rdn-cta{padding:16px 28px 18px;font-size:13px}
  .rdn-hero-nav{display:none}
  .rdn-hero-ctrl{bottom:18px}
}
@media (max-width:480px){
  .rdn-titlu{font-size:46px;line-height:44px}
  .rdn-eticheta{font-size:11px;letter-spacing:2px;margin-bottom:12px}
  .rdn-hero-ctrl button{width:34px}
  .rdn-hero-ctrl button[aria-current="true"]{width:60px}
}

@media (prefers-reduced-motion:reduce){
  .rdn-slide,.rdn-slide-img,.rdn-hero-grid>*,.rdn-cta{transition-duration:.01ms!important}
  .rdn-banner .rdn-hero-grid>*{animation:none;opacity:1;transform:none}
  .rdn-slide-img{transform:none}
  .rdn-hero-ctrl button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
  .rdn-cta:hover::after{animation:none}
}


/* --- Bannerul paginii de contact -------------------------------------- */
.rdn-banner{
  position:relative;
  height:clamp(340px,32vw,520px);
  overflow:hidden;background:#0b0f18;isolation:isolate;
}
.rdn-banner-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.rdn-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(97deg,rgba(6,9,16,.8) 0%,rgba(6,9,16,.6) 30%,rgba(6,9,16,.2) 62%,rgba(6,9,16,.35) 100%);
}
.rdn-banner-text{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
/* titlul si linia intra in pagina; regula de mai sus, comuna cu slider-ul,
   le-ar lasa invizibile, pentru ca bannerul n-are clasa de slide activ */
.rdn-banner .rdn-hero-grid>*{
  opacity:0;transform:translate3d(0,22px,0);
  animation:rdn-apare .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.rdn-banner .rdn-banner-linie{animation-delay:.18s}
@keyframes rdn-apare{to{opacity:1;transform:none}}
.rdn-banner-titlu{
  margin:0;
  font-family:Teko,'Open Sans',Arial,sans-serif;
  font-size:120px;line-height:1;font-weight:400;
  color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55),0 6px 34px rgba(0,0,0,.45);
}
.rdn-banner-titlu span{color:#74c5da}
.rdn-banner-linie{width:200px;height:0;border-top:5px solid #74c5da;margin:30px 0 0}
@media (max-width:1024px){
  .rdn-banner-titlu{font-size:90px}
}
@media (max-width:480px){
  .rdn-banner{height:clamp(240px,52vw,320px)}
  .rdn-banner-titlu{font-size:52px}
  .rdn-banner-linie{width:140px;border-top-width:4px;margin-top:20px}
}

/* Pe pagina principala titlurile din slider sunt paragrafe, nu titluri: sunt
   reclame care se schimba la 5 secunde, iar pagina isi are titlul ei. Tema
   micsora titlurile sub 1024px prin regula ei cu !important, care prinde doar
   h1-h6; refacem aici aceeasi curba, ca textul sa arate exact ca inainte. */
p.rdn-titlu{line-height:.87}
/* Si echilibrarea randurilor atarna de eticheta: „h1, h2{text-wrap:balance}"
   din futurist.css. Ca paragraf, titlul se rupea altfel — „Oferta realizare /
   website incepand de la / 50 euro." in loc de „...incepand / de la 50 euro."
   Il scriem aici, ca sa arate ca inainte oriunde, si pe prima pagina, care
   coborase pe paragraf mai demult si isi pierduse echilibrarea atunci. */
.rdn-titlu{text-wrap:balance}
@media (max-width:1024px){
  p.rdn-titlu{font-size:calc(47.27px + 1.83vw);line-height:.94}
}
@media (max-width:900px) and (min-width:801px){
  p.rdn-titlu{font-size:calc(29.76px + 3.775vw);line-height:.94}
}
@media (max-width:800px){
  p.rdn-titlu{font-size:calc(27.81px + 2.52vw);line-height:.96}
}
@media (max-width:480px){
  p.rdn-titlu{font-size:calc(26.99px + 1.98vw);line-height:.96}
}