:root {
  --bg: #061014;
  --bg2: #071318;
  --panel: #0b171c;
  --panel2: #0d1b21;
  --line: #1f3037;
  --text: #f4f7f8;
  --muted: #b7c1c6;
  --orange: #ff6d0a;
  --orange2: #ff8c28;
  --max: 1024px;
  --content: 990px
}

* {
  box-sizing: border-box
}

html {
  background: var(--bg);
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--text);
  background: radial-gradient(circle at 80% 0, rgba(255, 109, 10, .06), transparent 25%), linear-gradient(#061014, #061116);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.35
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  max-width: 100%
}

button,
input,
textarea,
select {
  font: inherit
}

.page {
  max-width: var(--max);
  margin: 0 auto;
  background: #061014;
  min-height: 100vh;
  overflow: hidden
}

.wrap {
  width: min(var(--content), calc(100% - 36px));
  margin: 0 auto
}

.top {
  height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  position: relative;
  z-index: 20;
  background: rgba(4, 13, 17, .95)
}

.top .wrap {
  display: flex;
  align-items: center;
  gap: 26px
}

.logo {
  width: 218px;
  flex: 0 0 218px
}

.logo img {
  width: 100%
}

.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  align-items: center
}

.nav a {
  padding: 26px 0 20px;
  position: relative;
  font-weight: 700
}

.nav a.active {
  color: var(--orange)
}

.nav a.active:after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--orange);
  left: 0;
  right: 0;
  bottom: 13px
}

.offer {
  margin-left: 8px;
  background: linear-gradient(90deg, #ff6d0a, #ff8a20);
  color: #101010;
  font-weight: 700;
  padding: 13px 21px;
  border-radius: 6px;
  font-size: 12px
}

.hero {
  height: 296px;
  position: relative;
  overflow: hidden
}

.hero .photo {
  position: absolute;
  right: 0;
  top: 0;
  width: 57%;
  height: 100%;
  object-fit: cover
}

.hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #061014 0 36%, rgba(6, 16, 20, .9) 45%, rgba(6, 16, 20, .15) 72%, rgba(6, 16, 20, .05));
  pointer-events: none
}

.hero .wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center
}

.hero-copy {
  width: 52%;
  padding-top: 2px
}

.kicker {
  color: var(--orange);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 9px
}

h1,
h2,
h3,
p {
  margin-top: 0
}

h1 {
  font-size: 39px;
  line-height: 1.06;
  margin-bottom: 14px;
  letter-spacing: -.8px
}

h2 {
  font-size: 27px;
  line-height: 1.08;
  margin-bottom: 11px;
  letter-spacing: -.4px
}

h3 {
  font-size: 16px;
  margin-bottom: 7px
}

.orange {
  color: var(--orange)
}

.lead {
  font-size: 14px;
  color: #eef2f3;
  max-width: 520px
}

.muted {
  color: var(--muted)
}

.actions {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(90deg, #ff6d0a, #ff8820);
  border-radius: 5px;
  color: #101010;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid transparent
}

.btn.outline {
  background: transparent;
  color: #f5f7f8;
  border-color: #819096
}

.strip {
  width: calc(100% - 36px);
  margin: -1px auto 0;
  background: linear-gradient(180deg, #0b171c, #091418);
  border: 1px solid #1d2e35;
  border-radius: 9px;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr)
}

.strip.five {
  grid-template-columns: repeat(5, 1fr)
}

.strip-item {
  min-height: 108px;
  padding: 16px 12px;
  text-align: center;
  border-right: 1px solid #28383f;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.strip-item:last-child {
  border-right: 0
}

.ico {
  font-size: 28px;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 8px
}

.strip-item b {
  font-size: 13px
}

.strip-item small {
  display: block;
  color: #c5cdd1;
  font-size: 11px;
  margin-top: 4px
}

.section {
  padding: 27px 0
}

.section-lg {
  padding: 38px 0
}

.split {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 28px;
  align-items: center
}

.photo-box {
  border-radius: 5px;
  overflow: hidden;
  min-height: 300px;
  background: #111
}

.photo-box img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.bullets {
  list-style: none;
  padding: 0;
  margin: 16px 0
}

.bullets li {
  margin: 9px 0;
  font-size: 13px
}

.bullets li:before {
  content: '✓';
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #111;
  font-weight: 900;
  margin-right: 9px
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0a151a;
  border: 1px solid #1d2c33;
  border-radius: 8px;
  overflow: hidden
}

.stat {
  text-align: center;
  padding: 13px 8px;
  border-right: 1px solid #25353b
}

.stat:last-child {
  border-right: 0
}

.stat b {
  display: block;
  font-size: 20px
}

.stat span {
  font-size: 11px;
  color: #d2d8da
}

.cards {
  display: grid;
  gap: 12px
}

.cards.c4 {
  grid-template-columns: repeat(4, 1fr)
}

.cards.c3 {
  grid-template-columns: repeat(3, 1fr)
}

.cards.c2 {
  grid-template-columns: repeat(2, 1fr)
}

.card {
  border: 1px solid #213138;
  background: linear-gradient(#0b171c, #091419);
  border-radius: 6px;
  padding: 16px;
  min-height: 120px
}

.card .ico {
  font-size: 24px
}

.card h3 {
  font-size: 14px
}

.card p {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0
}

.cta {
  height: 190px;
  position: relative;
  overflow: hidden
}

.cta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.cta:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #071116 0 34%, rgba(7, 17, 22, .78) 50%, rgba(7, 17, 22, .12) 82%)
}

.cta .wrap {
  height: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center
}

.cta-copy {
  width: 56%
}

.clients {
  text-align: center;
  padding: 12px 0 17px;
  background: #071217
}

.clients h3 {
  margin: 0 0 4px
}

.clients p {
  font-size: 11px
}

.logos {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  gap: 18px;
  font-weight: 700;
  color: #d9dee0;
  margin-top: 11px
}

.footer {
  background: #061015;
  border-top: 1px solid #18272d;
  padding: 25px 0 12px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.25fr .7fr .95fr .7fr .8fr;
  gap: 22px;
  font-size: 11px
}

.footer-logo img {
  width: 180px
}

.footer h4 {
  font-size: 12px;
  margin: 0 0 8px
}

.footer a {
  display: block;
  margin: 3px 0
}

.social {
  font-size: 18px;
  display: flex;
  gap: 12px
}

.quote {
  border-left: 2px solid var(--orange);
  padding-left: 12px
}

.bottom {
  border-top: 1px solid #1c2a30;
  margin-top: 21px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #b8c1c5
}

/* about */
.about-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: stretch
}

.values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.team-section {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 28px;
  align-items: center
}

.quote-panel {
  padding: 25px;
  border-left: 3px solid var(--orange);
  font-size: 18px;
  background: linear-gradient(90deg, #0c171c, transparent)
}

/* portfolio */
.filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.chip {
  border: 1px solid #26363d;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 11px;
  background: #091419
}

.chip.active {
  background: var(--orange);
  color: #111;
  border-color: var(--orange)
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.project {
  border: 1px solid #203138;
  border-radius: 7px;
  overflow: hidden;
  background: #091419
}

.project img {
  width: 100%;
  height: 160px;
  object-fit: cover
}

.project-body {
  padding: 10px 12px 13px
}

.project-body h3 {
  margin-bottom: 3px
}

.project-body p {
  font-size: 11px;
  color: #c4cdd1;
  margin: 0
}

/* blog */
.blog-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 24px
}

.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}

.post {
  border: 1px solid #213138;
  border-radius: 6px;
  overflow: hidden;
  background: #091419
}

.post img {
  width: 100%;
  height: 116px;
  object-fit: cover
}

.post-body {
  padding: 11px
}

.tag {
  display: inline-block;
  font-size: 9px;
  border: 1px solid #008fb6;
  border-radius: 8px;
  color: #8ddfff;
  padding: 2px 7px
}

.date {
  float: right;
  font-size: 9px;
  color: #c8d1d5
}

.post h3 {
  font-size: 14px;
  margin: 8px 0
}

.post p {
  font-size: 11px;
  color: #b7c1c5
}

.read {
  font-size: 11px;
  color: var(--orange);
  font-weight: 700
}

.search {
  display: flex;
  margin-bottom: 15px
}

.search input,
.field {
  width: 100%;
  background: #0a151a;
  border: 1px solid #314248;
  color: #fff;
  border-radius: 5px;
  padding: 10px 12px
}

.side h3 {
  font-size: 15px
}

.cat {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #17262c;
  padding: 9px 0;
  font-size: 11px
}

.badge {
  background: #27343a;
  border-radius: 14px;
  padding: 2px 7px
}

.newsletter {
  padding: 14px;
  border: 1px solid #203138;
  border-radius: 6px;
  background: #0a151a;
  margin-top: 15px
}

/* contact */
.contact-main {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px
}

.contact-cards .card {
  min-height: 0;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 13px
}

.map {
  height: 320px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #35464c
}

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.8) contrast(1.04) brightness(.75)
}

.formfaq {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px
}

.formbox,
.faqbox {
  border: 1px solid #203138;
  border-radius: 6px;
  padding: 14px;
  background: #081419
}

.fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.fields .full {
  grid-column: 1/-1
}

.fields .two {
  grid-column: span 2
}

.field textarea,
textarea.field {
  min-height: 100px;
  resize: vertical
}

.faqitem {
  border: 1px solid #27383f;
  border-radius: 4px;
  padding: 9px 11px;
  margin-bottom: 7px;
  font-size: 11px;
  display: flex;
  justify-content: space-between
}

/* consulting */
.domains {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px
}

.domain {
  border: 1px solid #213138;
  background: #091419;
  border-radius: 5px;
  overflow: hidden
}

.domain img {
  height: 105px;
  width: 100%;
  object-fit: cover
}

.domain .body {
  padding: 10px
}

.process {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 20px;
  align-items: stretch
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px
}

.step {
  text-align: center;
  position: relative
}

.num {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #111;
  font-weight: 800;
  margin: 0 auto 9px
}

.step p {
  font-size: 11px;
  color: #c1c9cd
}

.step:not(:last-child):after {
  content: '→';
  position: absolute;
  right: -10px;
  top: 6px;
  color: var(--orange);
  font-size: 22px
}

/* webdesign */
.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 28px
}

.steps-large {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  text-align: center
}

.steps-large .num {
  background: transparent;
  color: #fff;
  border: 2px solid var(--orange);
  width: 48px;
  height: 48px
}

.steps-large h3 {
  font-size: 14px
}

.steps-large p {
  font-size: 11px;
  color: #c0c8cc
}

/* hosting */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.plan {
  border: 1px solid #304147;
  border-radius: 7px;
  padding: 24px;
  background: #091419
}

.plan h2 {
  font-size: 23px
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 18px 0
}

.plan li {
  font-size: 12px;
  margin: 11px 0
}

.plan li:before {
  content: '✓';
  color: var(--orange);
  font-weight: 900;
  margin-right: 10px
}

.plan .btn {
  width: 100%
}

.infra-faq {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 28px
}

.infra {
  position: relative;
  min-height: 280px;
  overflow: hidden
}

.infra img {
  position: absolute;
  right: 0;
  top: 0;
  width: 48%;
  height: 100%;
  object-fit: cover;
  opacity: .95
}

.infra .copy {
  position: relative;
  z-index: 2;
  width: 54%
}

.faqlist .faqitem {
  padding: 10px
}

/* Dropdown Servicii */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center
}

.nav-dropbtn {
  padding: 26px 0 20px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative
}

.nav-dropdown.active .nav-dropbtn {
  color: var(--orange)
}

.nav-dropdown.active .nav-dropbtn:after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--orange);
  left: 0;
  right: 0;
  bottom: 13px
}

.nav-caret {
  font-size: 0;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  line-height: 0;
  margin-top: 2px;
  flex: 0 0 auto
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: 292px;
  padding: 8px;
  background: rgba(7, 18, 23, .98);
  border: 1px solid #263940;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .48);
  z-index: 100
}

.nav-dropdown-menu:before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #0a171c;
  border-left: 1px solid #263940;
  border-top: 1px solid #263940;
  transform: translateX(-50%) rotate(45deg)
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
  display: block
}

.nav .nav-dropdown-menu a {
  padding: 11px 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 6px;
  color: #f2f5f6;
  font-weight: 700
}

.nav .nav-dropdown-menu a:after {
  display: none
}

.nav .nav-dropdown-menu a:hover,
.nav .nav-dropdown-menu a.current {
  background: #101f25;
  color: var(--orange)
}

.service-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid rgba(255, 109, 10, .42);
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: rgba(255, 109, 10, .06)
}

.service-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.service-link b {
  display: block;
  font-size: 12px;
  line-height: 1.2
}

.service-link small {
  display: block;
  color: #9eabb0;
  font-size: 9px;
  line-height: 1.3;
  margin-top: 3px;
  font-weight: 400
}

@media(max-width:760px) {
  .wrap {
    width: calc(100% - 28px)
  }

  .top {
    height: auto;
    padding: 10px 0
  }

  .top .wrap {
    flex-wrap: wrap
  }

  .logo {
    width: 175px;
    flex-basis: 175px
  }

  .nav {
    order: 3;
    width: 100%;
    overflow: auto;
    gap: 18px
  }

  .offer {
    margin-left: auto
  }

  .hero {
    height: auto;
    min-height: 540px
  }

  .hero .photo {
    width: 100%;
    height: 56%;
    top: auto;
    bottom: 0
  }

  .hero:after {
    background: linear-gradient(#061014 0 45%, rgba(6, 16, 20, .92) 58%, rgba(6, 16, 20, .18))
  }

  .hero .wrap {
    min-height: 540px;
    align-items: flex-start;
    padding-top: 30px
  }

  .hero-copy {
    width: 100%
  }

  .strip,
  .strip.five,
  .cards.c4,
  .cards.c3,
  .values,
  .domains,
  .plans,
  .portfolio-grid,
  .posts,
  .stats,
  .logos {
    grid-template-columns: 1fr 1fr
  }

  .split,
  .about-story,
  .team-section,
  .blog-grid,
  .contact-main,
  .formfaq,
  .process,
  .benefit-grid,
  .infra-faq {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

  .fields {
    grid-template-columns: 1fr
  }

  .fields .two {
    grid-column: auto
  }

  .cta {
    height: 240px
  }

  .cta-copy {
    width: 80%
  }

  .steps,
  .steps-large {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:760px) {
  .nav-dropdown {
    flex: 0 0 auto
  }

  .nav-dropbtn {
    padding: 14px 0
  }

  .nav-dropdown.active .nav-dropbtn:after {
    bottom: 4px
  }

  .nav-dropdown-menu {
    position: fixed;
    top: auto;
    left: 14px;
    right: 14px;
    width: auto;
    transform: none;
    margin-top: 8px
  }

  .nav-dropdown-menu:before {
    display: none
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none
  }

  .nav-dropdown.open .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu {
    display: block
  }
}


/* 2026-09-11: aliniere continut cu bannerele */
@media (min-width:761px) {
  :root {
    --content-edge: 18px
  }

  .wrap {
    width: calc(100% - (var(--content-edge) * 2));
    max-width: none
  }

  .strip {
    width: calc(100% - (var(--content-edge) * 2))
  }

  .about-page .hero {
    height: 340px
  }

  .about-page .hero-copy {
    padding-bottom: 8px
  }

  .about-page .hero .actions {
    margin-top: 18px;
    margin-bottom: 12px
  }
}

/* Blog - layout full width, cautare si paginare */
.blog-page .blog-content {
  display: block
}

.blog-page .blog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  margin-bottom: 22px
}

.blog-page .blog-toolbar h2 {
  margin-bottom: 0
}

.blog-page .blog-search {
  width: min(390px, 100%);
  margin: 0
}

.blog-page .blog-search input {
  padding: 13px 15px;
  font-size: 13px;
  border-color: #3a4c53;
  background: #0a151a
}

.blog-page .posts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px
}

.blog-page .post {
  border-radius: 8px;
  min-height: 100%;
  display: flex;
  flex-direction: column
}

.blog-page .post img {
  height: 220px
}

.blog-page .post-body {
  padding: 18px 19px 20px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.blog-page .tag {
  font-size: 10px;
  padding: 3px 8px
}

.blog-page .date {
  font-size: 10px
}

.blog-page .post h3 {
  font-size: 19px;
  line-height: 1.2;
  margin: 12px 0 9px
}

.blog-page .post p {
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 18px
}

.blog-page .read {
  font-size: 12px;
  margin-top: auto
}

.blog-page .blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 30px
}

.blog-page .blog-pagination button {
  min-width: 38px;
  height: 38px;
  border: 1px solid #2d3e45;
  border-radius: 5px;
  background: #091419;
  color: #f4f7f8;
  font-weight: 700;
  cursor: pointer;
  padding: 0 11px
}

.blog-page .blog-pagination button:hover,
.blog-page .blog-pagination button.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #101010
}

.blog-page .blog-pagination button:disabled {
  opacity: .35;
  cursor: default;
  background: #091419;
  color: #f4f7f8;
  border-color: #2d3e45
}

.blog-page .blog-status {
  text-align: center;
  min-height: 18px;
  margin-top: 22px;
  color: #aeb9bd;
  font-size: 12px
}

.blog-page .post.is-hidden {
  display: none
}

/* Pagina model articol blog */
.article-page .article-wrap {
  max-width: 830px;
  margin: 0 auto
}

.article-page .article-hero {
  padding: 55px 0 28px;
  border-bottom: 1px solid #1d2c33;
  background: radial-gradient(circle at 75% 20%, rgba(255, 109, 10, .11), transparent 30%)
}

.article-page .article-hero h1 {
  font-size: 42px;
  max-width: 820px;
  margin-bottom: 16px
}

.article-page .article-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  color: #b7c1c6;
  font-size: 12px
}

.article-page .article-cover {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #263940;
  margin: 30px 0
}

.article-page .article-body {
  font-size: 15px;
  line-height: 1.75;
  color: #dbe1e3;
  padding-bottom: 45px
}

.article-page .article-body h2 {
  font-size: 27px;
  margin: 34px 0 12px;
  color: #fff
}

.article-page .article-body h3 {
  font-size: 20px;
  margin: 26px 0 10px;
  color: #fff
}

.article-page .article-body p {
  margin-bottom: 18px
}

.article-page .article-body ul {
  padding-left: 22px;
  margin: 0 0 22px
}

.article-page .article-body li {
  margin: 8px 0
}

.article-page .article-note {
  border-left: 3px solid var(--orange);
  background: #0b171c;
  padding: 18px 20px;
  margin: 28px 0;
  border-radius: 0 6px 6px 0
}

.article-page .article-back {
  display: inline-flex;
  color: var(--orange);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 15px
}

@media(max-width:760px) {
  .blog-page .blog-toolbar {
    align-items: stretch;
    flex-direction: column
  }

  .blog-page .blog-search {
    width: 100%
  }

  .blog-page .posts {
    grid-template-columns: 1fr
  }

  .blog-page .post img {
    height: 210px
  }

  .article-page .article-hero h1 {
    font-size: 32px
  }

  .article-page .article-cover {
    height: 260px
  }
}

/* 2026-09-11 - aliniere stricta a continutului cu bannerele */
@media (min-width:761px) {
  :root {
    --content-edge: 18px
  }

  .page>.section>.wrap,
  .page>.section-lg>.wrap,
  .page>main>.wrap,
  .top>.wrap,
  .footer>.wrap,
  .cta>.wrap,
  .clients>.wrap,
  .hero>.wrap,
  .faq-hero>.wrap,
  .send-hero>.wrap {
    width: calc(100% - (var(--content-edge) * 2));
    max-width: none;
    margin-left: var(--content-edge);
    margin-right: var(--content-edge)
  }

  .contact-main,
  .formfaq,
  .blog-content,
  .portfolio-grid,
  .about-story,
  .team-section,
  .benefit-grid,
  .infra-faq,
  .process {
    width: 100%
  }
}

/* Contact refacut */
.contact-page .formfaq {
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: start
}

.contact-page .formbox,
.contact-page .faqbox {
  padding: 24px;
  border-color: #293b42;
  background: linear-gradient(180deg, #0a171c, #071318);
  border-radius: 9px
}

.form-heading {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px
}

.form-heading h2 {
  font-size: 29px
}

.form-heading-icon {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 109, 10, .5);
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--orange);
  font-size: 23px;
  background: rgba(255, 109, 10, .06)
}

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.form-group {
  min-width: 0
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 7px;
  color: #eef2f3
}

.form-group label span {
  color: var(--orange)
}

.contact-form .field {
  min-height: 44px;
  border-color: #34474f;
  background: #071217;
  padding: 11px 13px
}

.contact-form .field:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 109, 10, .12)
}

.form-message {
  grid-column: 1/-1
}

.form-message textarea.field {
  min-height: 145px
}

.captcha-card {
  grid-column: 1/-1;
  border: 1px solid #2c3e45;
  border-radius: 7px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #091419
}

.captcha-copy strong,
.captcha-copy small {
  display: block
}

.captcha-copy strong {
  font-size: 12px
}

.captcha-copy small {
  font-size: 10px;
  color: #9facb1;
  margin-top: 3px
}

.captcha-row {
  display: flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap
}

.captcha-row span {
  font-size: 17px;
  font-weight: 800;
  color: var(--orange)
}

.captcha-input {
  width: 72px !important;
  text-align: center
}

.captcha-refresh {
  width: 38px;
  height: 38px;
  border: 1px solid #3a4d54;
  background: #0d1b20;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 19px
}

.captcha-refresh:hover {
  border-color: var(--orange);
  color: var(--orange)
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important
}

.form-actions {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}

.form-note {
  font-size: 10px;
  color: #9eaaaf;
  margin: 0;
  max-width: 58%
}

.contact-submit {
  min-width: 185px
}

.form-error {
  grid-column: 1/-1;
  color: #ff9b66;
  font-size: 11px;
  min-height: 15px
}

.contact-faqbox .faq-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 12px 13px;
  border: 1px solid #293b42;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 11px;
  background: #091419
}

.contact-faqbox .faq-link:hover {
  border-color: var(--orange);
  color: #fff
}

.contact-faqbox .faq-link b {
  color: var(--orange);
  font-size: 20px;
  line-height: 1
}

.faq-all {
  width: 100%;
  margin-top: 8px
}

.direct-mail {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #293b42;
  border-radius: 7px;
  display: flex;
  gap: 12px;
  align-items: center;
  background: #0a171c
}

.direct-mail-icon {
  color: var(--orange);
  font-size: 25px
}

.direct-mail small {
  display: block;
  color: #b8c2c6
}

.direct-mail a {
  display: block;
  color: var(--orange);
  font-weight: 800;
  margin-top: 2px
}

/* FAQ separat */
.faq-hero {
  padding: 58px 0 48px;
  background: radial-gradient(circle at 78% 25%, rgba(255, 109, 10, .12), transparent 28%), linear-gradient(120deg, #071318, #061014);
  border-bottom: 1px solid #1f3037
}

.faq-hero-copy {
  max-width: 690px
}

.faq-hero .btn {
  margin-top: 10px
}

.faq-content {
  padding: 44px 0
}

.faq-intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 25px
}

.faq-intro code {
  color: #ffb07a
}

.faq-answer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px
}

.faq-answer {
  border: 1px solid #26383f;
  background: linear-gradient(180deg, #0b171c, #081419);
  border-radius: 8px;
  padding: 22px;
  scroll-margin-top: 90px
}

.faq-answer:target {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 109, 10, .12)
}

.faq-answer h3 {
  font-size: 17px;
  margin-bottom: 10px
}

.faq-answer p {
  font-size: 12px;
  line-height: 1.65;
  color: #b9c3c7;
  margin: 0
}

.faq-contact {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid #2b3d44;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #091419
}

.faq-contact h2 {
  margin-bottom: 0
}

/* pagina de trimitere fara PHP */
.send-hero {
  min-height: 610px;
  display: flex;
  align-items: center;
  background: radial-gradient(circle at 75% 20%, rgba(255, 109, 10, .12), transparent 28%), linear-gradient(135deg, #061014, #09171c);
  border-bottom: 1px solid #1e2e35
}

.send-hero .wrap {
  display: flex;
  justify-content: center
}

.send-panel {
  width: min(760px, 100%);
  border: 1px solid #2b3e45;
  border-radius: 10px;
  padding: 32px;
  background: linear-gradient(180deg, #0b181d, #071318);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25)
}

.send-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 109, 10, .1);
  border: 1px solid rgba(255, 109, 10, .5);
  color: var(--orange);
  font-size: 27px;
  margin-bottom: 18px
}

.message-preview {
  margin: 22px 0;
  border: 1px solid #2b3e45;
  border-radius: 7px;
  background: #061116;
  padding: 17px;
  font-size: 12px;
  line-height: 1.6;
  color: #c5ced2;
  white-space: pre-wrap
}

.message-preview strong {
  color: #fff
}

.send-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

.send-note {
  font-size: 10px;
  color: #9ca9ae;
  margin: 17px 0 0
}

@media(max-width:760px) {
  .contact-page .formfaq {
    grid-template-columns: 1fr
  }

  .contact-form {
    grid-template-columns: 1fr
  }

  .form-message,
  .captcha-card,
  .form-actions,
  .form-error {
    grid-column: auto
  }

  .captcha-card,
  .form-actions {
    align-items: stretch;
    flex-direction: column
  }

  .form-note {
    max-width: none
  }

  .contact-submit {
    width: 100%
  }

  .faq-intro,
  .faq-answer-list {
    grid-template-columns: 1fr
  }

  .faq-contact {
    align-items: flex-start;
    flex-direction: column
  }

  .send-panel {
    padding: 22px
  }

  .send-hero {
    min-height: 680px
  }
}

/* Refined hosting plans */
.hosting-plans-section {
  position: relative;
  overflow: hidden
}

.hosting-plans-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 24px
}

.hosting-plans-head .btn {
  white-space: nowrap
}

.hosting-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.hosting-plan-card {
  position: relative;
  min-height: 520px;
  border: 1px solid #34484f;
  border-radius: 14px;
  overflow: hidden;
  background-image: url('../img/hosting-hero.webp');
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25)
}

.hosting-plan-card.plan-business {
  background-position: 45% center
}

.hosting-plan-card.plan-enterprise {
  background-position: 75% center
}

.plan-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 12, 17, .52), rgba(3, 12, 17, .92) 44%, #071116 100%)
}

.plan-content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 26px;
  display: flex;
  flex-direction: column
}

.plan-symbol {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(5, 18, 24, .78);
  border: 1px solid rgba(255, 105, 0, .55);
  box-shadow: 0 0 28px rgba(255, 105, 0, .12);
  margin-bottom: 18px
}

.plan-symbol svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.plan-label {
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 800
}

.hosting-plan-card h3 {
  font-size: 25px;
  margin: 7px 0 8px
}

.hosting-plan-card p {
  color: #c5ced2;
  min-height: 66px
}

.hosting-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  flex: 1
}

.hosting-plan-card li {
  margin: 11px 0;
  font-size: 13px
}

.hosting-plan-card li:before {
  content: '✓';
  color: var(--orange);
  font-weight: 900;
  margin-right: 10px
}

.plan-actions {
  display: grid;
  gap: 10px
}

.plan-actions .btn {
  text-align: center
}

.plans-compare-band {
  margin-top: 24px;
  padding: 24px 26px;
  border: 1px solid #304147;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(8, 20, 27, .96), rgba(7, 18, 23, .76)), url('../img/hosting-infra.webp') center/cover;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.plans-compare-band h3 {
  margin: 4px 0 5px;
  font-size: 22px
}

.plans-compare-band .btn {
  white-space: nowrap
}

.hosting-compare-hero .photo {
  filter: saturate(.9) contrast(1.04)
}

.comparison-table-wrap {
  overflow-x: auto;
  border: 1px solid #2f4249;
  border-radius: 12px;
  margin-top: 22px
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
  background: #081419
}

.comparison-table th,
.comparison-table td {
  padding: 15px 18px;
  border-bottom: 1px solid #25363d;
  border-right: 1px solid #25363d;
  text-align: left;
  font-size: 13px
}

.comparison-table th {
  background: #0c1c23;
  color: #fff;
  font-size: 14px
}

.comparison-table th:not(:first-child) {
  color: var(--orange)
}

.comparison-table td:first-child {
  font-weight: 700;
  color: #fff
}

.comparison-table tr:last-child td {
  border-bottom: 0
}

.plan-detail-sections {
  display: grid;
  gap: 18px
}

.plan-detail {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  align-items: center;
  padding: 22px;
  border: 1px solid #2f4249;
  border-radius: 12px;
  background: #091419
}

.plan-detail-icon {
  width: 78px;
  height: 78px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 105, 0, .5);
  background: #071116
}

.plan-detail-icon svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round
}

.domain img {
  filter: saturate(.95) contrast(1.03)
}

@media(max-width:900px) {
  .hosting-plan-grid {
    grid-template-columns: 1fr
  }

  .hosting-plan-card {
    min-height: 460px
  }

  .hosting-plans-head,
  .plans-compare-band {
    align-items: flex-start;
    flex-direction: column
  }
}


/* 2026-09-11 - iconite personalizate clouddns.ro */
.ico {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px
}

.ico img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(39, 200, 255, .14))
}

.card .ico img {
  width: 36px;
  height: 36px
}

.service-icon img {
  width: 30px;
  height: 30px;
  display: block
}

.footer-mini-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 6px;
  object-fit: contain
}

.index-page .hero {
  height: 360px
}

@media(max-width:760px) {
  .index-page .hero {
    height: auto;
    min-height: 520px
  }
}
/* 2026-09-11 - strip egal ca latime cu section.hero pe toate paginile */
.page > .strip,
body > .page > .strip,
.strip {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* FAQ servicii integrate */
.faqitem { color:#eef3f4; text-decoration:none; align-items:center; transition:none }
.faqitem:hover { border-color:var(--orange); background:#0b1a20; color:#fff }
.faqitem span:last-child { color:var(--orange); font-size:18px; line-height:1 }
.faq-heading-row { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:10px }
.faq-heading-row h2 { margin:0 }
.faq-all-link { color:var(--orange); text-decoration:none; font-size:11px; font-weight:800; white-space:nowrap }
.service-faq-section { border-top:1px solid #17282f; border-bottom:1px solid #17282f; background:linear-gradient(180deg,#071317,#08161b) }
.service-faq-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:46px; align-items:center }
.service-faq-intro { max-width:520px }
.service-faq-intro .btn { margin-top:12px }
.service-faq-list .faqitem { padding:13px 14px; margin-bottom:9px; min-height:44px }
.faq-service-group { scroll-margin-top:90px; margin:0 0 40px }
.faq-group-head { margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #21333a }
.faq-group-head h2 { margin-bottom:0 }
@media (max-width:760px){ .service-faq-grid{grid-template-columns:1fr;gap:24px}.faq-heading-row{align-items:flex-start;flex-direction:column} }


/* SEO on-page content */
.seo-copy{max-width:1100px}
.seo-copy>p{max-width:980px;line-height:1.75}
.seo-links{flex-wrap:wrap;margin-top:24px}
@media(max-width:760px){.seo-links{gap:10px}.seo-links .btn{width:100%;text-align:center}}

/* 2026-09-17 - continut desktop putin mai lat, adaptiv in functie de rezolutie.
   Porneste de la layout-ul existent si creste progresiv pe monitoare mai late,
   fara a afecta layout-ul pentru tableta/mobil. */
@media (min-width: 1366px) {
  .page {
    max-width: clamp(1024px, calc(1024px + (100vw - 1366px) * 0.22), 1600px);
  }
}


/* 2026-09-11 - sectiune Audit SEO gratuit */
.seo-audit-promo {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #1d3038;
  border-bottom: 1px solid #1d3038;
  background:
    radial-gradient(circle at 86% 20%, rgba(255,130,45,.16), transparent 30%),
    linear-gradient(135deg,#071317 0%,#0a1b21 58%,#101a1f 100%);
}
.seo-audit-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to right,transparent,black 25%,black 75%,transparent);
}
.seo-audit-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 42px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
}
.seo-audit-copy h2 {
  max-width: 680px;
  margin: 7px 0 13px;
}
.seo-audit-copy p {
  max-width: 720px;
  margin: 0;
  color: #b8c5ca;
  line-height: 1.72;
}
.seo-audit-actions { margin-top: 23px; }
.seo-audit-panel {
  padding: 24px 25px;
  border: 1px solid #29414a;
  border-radius: 14px;
  background: rgba(5,15,19,.76);
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
}
.seo-audit-panel-title {
  margin-bottom: 13px;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
}
.seo-audit-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.seo-audit-panel li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #d9e2e5;
  font-size: 13px;
  line-height: 1.45;
}
.seo-audit-panel li span {
  flex: 0 0 auto;
  color: var(--orange);
  font-weight: 900;
}
.seo-audit-note {
  margin: 17px 0 0;
  padding-top: 14px;
  border-top: 1px solid #20353d;
  color: #8ea0a7;
  font-size: 11px;
  line-height: 1.55;
}
@media(max-width:760px) {
  .seo-audit-grid { grid-template-columns: 1fr; gap: 24px; padding-top: 34px; padding-bottom: 34px; }
  .seo-audit-actions .btn { width: 100%; text-align: center; }
  .seo-audit-panel { padding: 20px; }
}


/* 2026-09-11 - Sistem management cookies / consimtamant */
.cookie-consent-root{position:relative;z-index:99999}
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;max-width:1180px;margin:0 auto;padding:20px 22px;border:1px solid #29414a;border-radius:16px;background:rgba(5,15,19,.97);box-shadow:0 24px 70px rgba(0,0,0,.48);backdrop-filter:blur(14px);color:#eef3f4;z-index:99999}
.cookie-banner[hidden],.cookie-modal[hidden]{display:none!important}
.cookie-banner-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cookie-banner h2{margin:0 0 7px;font-size:18px;line-height:1.25;color:#fff}
.cookie-banner p{margin:0;max-width:760px;color:#aebdc3;font-size:13px;line-height:1.6}
.cookie-banner a,.cookie-modal a{color:var(--orange);text-decoration:none;font-weight:700}
.cookie-banner a:hover,.cookie-modal a:hover{text-decoration:underline}
.cookie-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px}
.cookie-btn{appearance:none;border:1px solid #35505a;border-radius:8px;padding:10px 14px;background:#0b1a20;color:#eef3f4;font:inherit;font-size:12px;font-weight:800;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.cookie-btn:hover{border-color:var(--orange);background:#10242b}
.cookie-btn:focus-visible,.cookie-toggle input:focus-visible+.cookie-switch{outline:2px solid var(--orange);outline-offset:3px}
.cookie-btn-primary{border-color:var(--orange);background:var(--orange);color:#071317}
.cookie-btn-primary:hover{background:#ff9a52;color:#071317}
.cookie-btn-ghost{background:transparent}
.cookie-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.70);z-index:100000}
.cookie-dialog{width:min(720px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;border:1px solid #29414a;border-radius:16px;background:#071317;box-shadow:0 28px 90px rgba(0,0,0,.58);color:#eef3f4}
.cookie-dialog-head{position:sticky;top:0;display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:21px 22px 16px;border-bottom:1px solid #1d3038;background:#071317;z-index:2}
.cookie-dialog-head h2{margin:0 0 5px;font-size:20px;color:#fff}.cookie-dialog-head p{margin:0;color:#93a7af;font-size:12px;line-height:1.5}
.cookie-close{width:36px;height:36px;flex:0 0 auto;border:1px solid #29414a;border-radius:8px;background:#0a1b21;color:#fff;font-size:20px;cursor:pointer}
.cookie-dialog-body{padding:18px 22px}
.cookie-category{padding:16px 0;border-bottom:1px solid #1c3037}.cookie-category:first-child{padding-top:4px}.cookie-category:last-child{border-bottom:0}
.cookie-category-row{display:flex;justify-content:space-between;gap:18px;align-items:center}.cookie-category h3{margin:0 0 5px;font-size:14px;color:#fff}.cookie-category p{margin:0;color:#9eb0b7;font-size:12px;line-height:1.55;max-width:565px}
.cookie-required{display:inline-block;padding:5px 8px;border:1px solid #2b454f;border-radius:999px;color:#aebdc3;font-size:10px;font-weight:800;white-space:nowrap}
.cookie-toggle{position:relative;display:inline-flex;align-items:center;flex:0 0 auto}.cookie-toggle input{position:absolute;opacity:0;width:1px;height:1px}.cookie-switch{width:46px;height:25px;border:1px solid #37505a;border-radius:999px;background:#122329;position:relative;cursor:pointer;transition:.18s}.cookie-switch:after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#92a3aa;transition:.18s}.cookie-toggle input:checked+.cookie-switch{background:rgba(255,130,45,.22);border-color:var(--orange)}.cookie-toggle input:checked+.cookie-switch:after{transform:translateX(21px);background:var(--orange)}
.cookie-dialog-foot{position:sticky;bottom:0;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;padding:15px 22px;border-top:1px solid #1d3038;background:#071317}
.cookie-settings-link{appearance:none;border:0;background:transparent;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.cookie-policy-main{padding:54px 0 70px}.cookie-policy-card{max-width:900px;margin:0 auto}.cookie-policy-card h1{margin-bottom:12px}.cookie-policy-card h2{margin:30px 0 10px}.cookie-policy-card h3{margin:22px 0 8px}.cookie-policy-card p,.cookie-policy-card li{color:#b7c4c9;line-height:1.75}.cookie-policy-card ul{padding-left:20px}.cookie-table-wrap{overflow-x:auto;margin:18px 0}.cookie-table{width:100%;border-collapse:collapse;min-width:650px}.cookie-table th,.cookie-table td{padding:12px;border:1px solid #243941;text-align:left;vertical-align:top;font-size:12px;line-height:1.5}.cookie-table th{background:#0b1a20;color:#fff}.cookie-table td{color:#b7c4c9}.cookie-policy-note{padding:16px 18px;border:1px solid #29414a;border-radius:10px;background:#0a191e}
@media(max-width:760px){.cookie-banner{left:10px;right:10px;bottom:10px;padding:17px}.cookie-banner-grid{grid-template-columns:1fr;gap:16px}.cookie-actions{justify-content:stretch}.cookie-actions .cookie-btn{flex:1 1 100%}.cookie-modal{padding:10px}.cookie-dialog{max-height:calc(100vh - 20px)}.cookie-dialog-head,.cookie-dialog-body,.cookie-dialog-foot{padding-left:16px;padding-right:16px}.cookie-category-row{align-items:flex-start}.cookie-dialog-foot .cookie-btn{flex:1 1 100%}}


/* 2026-09-17 - CloudDNS SupportDesk / Aplicatii */
.apps-hero{position:relative;overflow:hidden;border-bottom:1px solid #1d3038;background:radial-gradient(circle at 78% 34%,rgba(255,130,45,.15),transparent 30%),linear-gradient(135deg,#061216 0%,#091a20 60%,#0d171b 100%);padding:76px 0 68px}
.apps-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:36px 36px}
.apps-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.apps-hero-copy h1{font-size:clamp(42px,5vw,70px);line-height:1.02;margin:9px 0 18px}
.apps-hero-copy .lead{max-width:700px}
.apps-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:25px}
.apps-badges span{padding:7px 10px;border:1px solid #29414a;border-radius:999px;background:rgba(7,19,23,.68);color:#b9c8cd;font-size:11px;font-weight:800}
.apps-product-visual{perspective:1200px}
.apps-window{border:1px solid #2d4650;border-radius:16px;overflow:hidden;background:#071317;box-shadow:0 34px 80px rgba(0,0,0,.42);transform:rotateY(-4deg) rotateX(2deg)}
.apps-window-top{height:43px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #20343c;background:#0b1b21;color:#82969e;font-size:11px}
.apps-window-top i{width:8px;height:8px;border-radius:50%;background:#38505a}.apps-window-top i:first-child{background:var(--orange)}.apps-window-top span{margin-left:8px}
.apps-window-body{display:grid;grid-template-columns:31% 69%;min-height:310px}
.apps-side{padding:22px 17px;background:#08171c;border-right:1px solid #1c3037}.apps-brand{color:#fff;font-weight:900;font-size:15px;margin-bottom:28px}.apps-brand:before{content:"●";color:var(--orange);margin-right:7px}
.apps-nav-line{height:10px;border-radius:5px;background:#1a3038;margin:14px 0}.apps-nav-line.active{background:linear-gradient(90deg,var(--orange),#8f4c23)}.apps-nav-line.short{width:67%}
.apps-dashboard{padding:27px 24px;background:linear-gradient(145deg,#09181d,#071317)}.apps-mini-title{width:44%;height:15px;border-radius:5px;background:#d9e2e5;margin-bottom:23px}
.apps-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.apps-kpis b{display:block;height:54px;border:1px solid #223941;border-radius:8px;background:#0d2026}.apps-kpis b:first-child{border-color:rgba(255,130,45,.48);background:rgba(255,130,45,.09)}
.apps-chat-demo{margin-top:17px;padding:16px;border:1px solid #20353d;border-radius:9px;background:#091a20}.apps-chat-demo span{display:block;width:72%;height:9px;margin:9px 0;border-radius:6px;background:#29414a}.apps-chat-demo span:nth-child(2){width:48%}.apps-chat-demo span:nth-child(3){width:61%}.apps-chat-demo .reply{width:55%;margin-left:auto;background:rgba(255,130,45,.58)}
.apps-section-head{max-width:760px;margin-bottom:27px}.apps-section-head h2{margin:7px 0 10px}.apps-feature-grid .card{min-height:205px}
.apps-selfhosted{border-top:1px solid #1d3038;border-bottom:1px solid #1d3038;background:#071317}
.apps-benefit-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:54px;align-items:center}
.apps-info-card{padding:28px;border:1px solid #29414a;border-radius:14px;background:linear-gradient(145deg,#0a1c22,#071317);box-shadow:0 22px 55px rgba(0,0,0,.22)}
.apps-info-icon{width:52px;height:52px;display:grid;place-items:center;border:1px solid #35505a;border-radius:12px;background:#0d2229;margin-bottom:17px}.apps-info-icon img{width:27px;height:27px}
.apps-info-card h3{margin:0 0 9px}.apps-info-card p{color:#9fb0b7;line-height:1.65}
.apps-info-row{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-top:1px solid #20343c;color:#c4d0d4;font-size:13px}.apps-info-row b{color:var(--orange)}
@media(max-width:900px){.apps-hero{padding:52px 0}.apps-hero-grid,.apps-benefit-grid{grid-template-columns:1fr;gap:34px}.apps-product-visual{max-width:650px}.apps-window{transform:none}}
@media(max-width:620px){.apps-window-body{grid-template-columns:28% 72%;min-height:245px}.apps-side{padding:17px 11px}.apps-dashboard{padding:20px 14px}.apps-hero-copy h1{font-size:40px}.apps-badges span{font-size:10px}}

/* SupportDesk product page - real screenshots preview */
.sd-product{background:#071216;color:#eef4f6}.sd-hero{position:relative;overflow:hidden;padding:86px 0 90px;background:radial-gradient(circle at 72% 30%,rgba(31,142,255,.15),transparent 31%),radial-gradient(circle at 88% 72%,rgba(255,126,42,.13),transparent 28%),#06131a;border-bottom:1px solid #1a3039}
.sd-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 56%,rgba(255,126,42,.035) 56.2%,transparent 56.5%)}
.sd-hero-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:54px;align-items:center;position:relative;z-index:1}.sd-hero-copy h1{font-size:clamp(48px,5.2vw,76px);line-height:.98;margin:10px 0 14px}.sd-tagline{font-size:22px;line-height:1.35;font-weight:800;max-width:620px;margin:0 0 14px}.sd-hero-copy .lead{font-size:15px;line-height:1.8;color:#a8bbc3;max-width:650px}.sd-proof{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.sd-proof span,.sd-pill-row span{font-size:11px;font-weight:800;color:#cbd8dd;border:1px solid #29444f;background:#0a1d25;padding:8px 11px;border-radius:999px}
.sd-hero-stage{height:490px;position:relative;perspective:1400px}.sd-shot{position:absolute;margin:0;overflow:hidden;border-radius:12px;border:1px solid #33505c;background:#fff;box-shadow:0 28px 70px rgba(0,0,0,.45)}.sd-shot img{display:block;width:100%;height:100%;object-fit:cover}.sd-shot-main{width:78%;height:68%;left:11%;top:10%;z-index:3;transform:rotateX(1deg);box-shadow:0 32px 85px rgba(0,0,0,.52),0 0 0 1px rgba(42,145,255,.14)}.sd-shot-left{width:51%;height:45%;left:0;bottom:0;z-index:4;transform:rotate(-2.5deg)}.sd-shot-right{width:51%;height:45%;right:0;bottom:2%;z-index:5;transform:rotate(2.5deg)}.sd-shot:before,.sd-realshot:before,.sd-portal-shot:before{content:"INTERFAȚĂ REALĂ";position:absolute;z-index:2;left:12px;top:12px;background:rgba(4,17,23,.88);color:#fff;border:1px solid rgba(255,255,255,.16);padding:6px 9px;border-radius:999px;font-size:9px;font-weight:900;letter-spacing:.08em}
.sd-offer{padding:82px 0;background:#f4f7f9;color:#0b1a21}.sd-section-head{max-width:800px;margin:0 auto 36px;text-align:center}.sd-section-head h2{font-size:38px;margin:8px 0 12px}.sd-section-head p{color:#60717a}.sd-offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.sd-offer-grid article{position:relative;padding:26px;border:1px solid #dbe4e8;border-radius:14px;background:#fff;box-shadow:0 12px 30px rgba(12,37,48,.05)}.sd-offer-grid article b{color:#ff7d2b;font-size:12px}.sd-offer-grid h3{margin:10px 0 8px;font-size:20px}.sd-offer-grid p{color:#657780;line-height:1.65;margin:0;font-size:13px}
.sd-showcase{padding:85px 0;background:#071216}.sd-feature{display:grid;grid-template-columns:.68fr 1.32fr;gap:46px;align-items:center;padding:58px 0;border-bottom:1px solid #1c3139}.sd-feature.reverse{grid-template-columns:1.32fr .68fr}.sd-feature.reverse .sd-feature-copy{order:2}.sd-feature.reverse .sd-realshot{order:1}.sd-feature-copy{position:relative}.sd-num{position:absolute;right:0;top:-28px;font-size:70px;font-weight:900;color:rgba(255,255,255,.035)}.sd-feature-copy h2{font-size:32px;margin:8px 0 12px}.sd-feature-copy p,.sd-feature-copy li{color:#9fb2ba;line-height:1.7}.sd-feature-copy ul{padding-left:19px}.sd-realshot,.sd-portal-shot{position:relative;margin:0;border-radius:13px;overflow:hidden;border:1px solid #2a4752;background:#fff;box-shadow:0 24px 60px rgba(0,0,0,.35)}.sd-realshot img,.sd-portal-shot img{display:block;width:100%;height:auto}
.sd-portal{padding:88px 0;background:linear-gradient(135deg,#091923,#0a2030);border-top:1px solid #1c3642;border-bottom:1px solid #1c3642}.sd-portal-grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:48px;align-items:center}.sd-portal h2,.sd-control h2{font-size:34px;margin:8px 0 13px}.sd-portal p,.sd-control p{color:#a6bac2;line-height:1.75}.sd-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.sd-portal-shot{box-shadow:0 30px 75px rgba(0,0,0,.4)}
.sd-control{padding:88px 0;background:#071216}.sd-control-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center}.sd-checks{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:22px}.sd-checks span{padding:11px 12px;border:1px solid #29444f;border-radius:9px;background:#0a1b22;color:#d2dde1;font-size:12px;font-weight:800}.sd-cta{border-top:1px solid #223a44}
@media(max-width:1050px){.sd-hero-grid{grid-template-columns:1fr}.sd-hero-stage{height:460px}.sd-feature,.sd-feature.reverse,.sd-portal-grid,.sd-control-grid{grid-template-columns:1fr}.sd-feature.reverse .sd-feature-copy,.sd-feature.reverse .sd-realshot{order:initial}.sd-offer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.sd-hero{padding:54px 0 60px}.sd-hero-stage{height:310px}.sd-shot-main{width:88%;left:6%}.sd-shot-left,.sd-shot-right{width:56%;height:43%}.sd-offer{padding:60px 0}.sd-offer-grid{grid-template-columns:1fr}.sd-section-head h2{font-size:30px}.sd-feature{padding:42px 0;gap:25px}.sd-feature-copy h2,.sd-portal h2,.sd-control h2{font-size:28px}.sd-checks{grid-template-columns:1fr}}


/* SupportDesk: static visual banner + a single functional HTML CTA */
.supportdesk-banner-hero{
  position:relative;
  width:100%;
  aspect-ratio: 1900 / 798;
  min-height:520px;
  max-height:820px;
  overflow:hidden;
  background-image:url("../img/supportdesk/hero-banner.webp");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}
.supportdesk-banner-cta{
  position:absolute;
  left:4.1%;
  top:51.5%;
  z-index:3;
}
.supportdesk-offer-btn{
  min-width:205px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:15px;
  font-weight:800;
  box-shadow:0 10px 28px rgba(255,112,27,.26);
}
.supportdesk-offer-btn span{font-size:20px;line-height:1}
@media (max-width:1200px){
  .supportdesk-banner-hero{min-height:460px;background-size:cover}
  .supportdesk-banner-cta{left:4%;top:51%}
  .supportdesk-offer-btn{min-width:180px;min-height:48px;font-size:13px}
}
@media (max-width:760px){
  .supportdesk-banner-hero{
    min-height:430px;
    aspect-ratio:auto;
    background-size:auto 100%;
    background-position:42% center;
  }
  .supportdesk-banner-cta{left:5%;top:53%}
  .supportdesk-offer-btn{min-width:160px;min-height:44px;font-size:12px}
}

/* Definitive SupportDesk banner fix: no baked duplicate header, no baked CTA */
.supportdesk-banner-hero{
  position:relative !important;
  width:100% !important;
  aspect-ratio:1900 / 720 !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  background-image:url("../img/supportdesk/hero-banner.webp") !important;
  background-size:100% 100% !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
.supportdesk-banner-cta{
  position:absolute !important;
  left:3.25% !important;
  top:43.5% !important;
  z-index:20 !important;
}
.supportdesk-offer-btn{
  width:205px !important;
  min-width:205px !important;
  height:54px !important;
  min-height:54px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  border-radius:7px !important;
  font-size:15px !important;
  font-weight:800 !important;
}


/* SupportDesk page — dark CloudDNS theme below hero */
.sd-offer,
.sd-showcase,
.sd-portal,
.sd-control,
.sd-cta{
  background:#061219 !important;
  color:#f4f7f8 !important;
}
.sd-offer{
  border-top:1px solid #17303b !important;
  border-bottom:1px solid #17303b !important;
}
.sd-section-head h2,
.sd-offer-grid h3,
.sd-feature-copy h2,
.sd-portal h2,
.sd-control h2{
  color:#f4f7f8 !important;
}
.sd-section-head p,
.sd-offer-grid p,
.sd-feature-copy p,
.sd-feature-copy li,
.sd-portal p,
.sd-control p{
  color:#9fb2ba !important;
}
.sd-offer-grid article{
  background:linear-gradient(145deg,#0a1c25,#07151c) !important;
  border:1px solid #23414e !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
}
.sd-offer-grid article:hover{
  border-color:#ff7d2b !important;
  transform:translateY(-2px);
}
.sd-realshot,
.sd-portal-shot{
  border-color:#294a58 !important;
  box-shadow:0 24px 60px rgba(0,0,0,.42) !important;
}
.sd-portal{
  background:linear-gradient(135deg,#07151d,#0a2030) !important;
}
.sd-checks span,
.sd-proof span,
.sd-pill-row span{
  background:#0a1b22 !important;
  border-color:#29444f !important;
  color:#d2dde1 !important;
}
.sd-feature{
  border-bottom-color:#1c3139 !important;
}
.sd-cta{
  border-top:1px solid #223a44 !important;
}

/* SupportDesk banner integration — real site header stays separate */
.supportdesk-banner-hero{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1900 / 798 !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background-image:url("../img/supportdesk/hero-banner.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
}
.supportdesk-banner-cta{display:none !important}

/* Functional CTA replacing the CTA previously drawn into the banner */
.supportdesk-banner-cta.functional-cta{
    display:block !important;
    position:absolute !important;
    left:3.25% !important;
    top:63.5% !important;
    z-index:30 !important;
}
.supportdesk-banner-cta.functional-cta .supportdesk-offer-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:22px !important;
    width:285px !important;
    min-width:285px !important;
    height:68px !important;
    min-height:68px !important;
    padding:0 28px !important;
    border:0 !important;
    border-radius:8px !important;
    background:linear-gradient(135deg,#ff7417,#ff932e) !important;
    color:#071016 !important;
    font-size:18px !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 10px 26px rgba(255,117,23,.25) !important;
    cursor:pointer !important;
}
.supportdesk-banner-cta.functional-cta .supportdesk-offer-btn:hover{
    transform:translateY(-2px) !important;
    filter:brightness(1.06) !important;
}
@media(max-width:900px){
    .supportdesk-banner-cta.functional-cta{left:3.25% !important;top:63.5% !important}
    .supportdesk-banner-cta.functional-cta .supportdesk-offer-btn{
        width:210px !important;min-width:210px !important;
        height:52px !important;min-height:52px !important;
        font-size:14px !important;
    }
}

/* Approved SupportDesk hero banner — no CTA overlay */
.supportdesk-banner-hero{
    position:relative !important;
    width:100% !important;
    aspect-ratio:1900 / 798 !important;
    min-height:0 !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background-image:url("../img/supportdesk/hero-banner.webp") !important;
    background-repeat:no-repeat !important;
    background-position:center center !important;
    background-size:cover !important;
}
.supportdesk-banner-cta,
.supportdesk-banner-cta.functional-cta,
.supportdesk-offer-btn{
    display:none !important;
}


/* SupportDesk CTA — added below hero */
.supportdesk-cta-strip{
    background:#061219;
    padding:26px 4%;
}
.supportdesk-cta-strip-inner{
    max-width:1500px;
    margin:0 auto;
    padding:22px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    background:linear-gradient(100deg,#0a171d,#17120f);
    border:1px solid rgba(255,122,24,.55);
    border-radius:12px;
    box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.supportdesk-cta-strip h2{
    margin:0 0 5px;
    color:#fff;
    font-size:24px;
}
.supportdesk-cta-strip p{
    margin:0;
    color:#a9bac1;
}
.supportdesk-cta-button{
    flex:0 0 auto;
    min-width:205px;
    padding:15px 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    border-radius:8px;
    background:#ff7a18;
    color:#071016 !important;
    font-weight:800;
    text-decoration:none !important;
    box-shadow:0 8px 22px rgba(255,122,24,.24);
    transition:transform .18s ease, filter .18s ease;
}
.supportdesk-cta-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}
@media(max-width:700px){
    .supportdesk-cta-strip-inner{
        align-items:flex-start;
        flex-direction:column;
    }
    .supportdesk-cta-button{width:100%}
}