
:root{
  --brand-pink:#FF2E93;
  --brand-purple:#8A2BE2;
  --brand-black:#0E0E0E;
  --brand-white:#FFFFFF;
  --brand-gradient: linear-gradient(135deg,var(--brand-pink),var(--brand-purple));
  --radius-xxl: 32px;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-1: 0 10px 30px rgba(255,46,147,.25);
  --shadow-2: 0 12px 28px rgba(138,43,226,.25);
  --z-preloader: 9999;
}

html{scroll-behavior:smooth}
body{
  background: #0b0b0b;
  color: var(--brand-white);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
}
/* Improve readability of secondary text on dark background */
.text-secondary-emphasis{ color: rgba(255,255,255,.82) !important; }
.lead{ color: rgba(255,255,255,.9); }
input::placeholder, textarea::placeholder{ color: rgba(255,255,255,.55); }
/* Rounded navbar (pill) */
.navbar{
  border-radius: 999px;
  background: rgba(19,19,19,.8);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
/* On mobile (collapsed), make navbar rectangular with modest rounding and no clipping */
@media (max-width: 991.98px){
  .navbar{ border-radius: var(--radius-lg); overflow: visible; }
  /* Add breathing room between brand/toggler and the opened menu */
  .navbar .collapse.show,
  .navbar .collapsing{ margin-top: .75rem; }
}
.navbar .nav-link{
  border-radius: 999px !important;
  padding:.5rem 1rem !important;
  margin: 0 .15rem; /* create small gap between pills */
  color:#fff !important;
  opacity:.9;
  transition: transform .2s ease, background .2s ease, color .2s ease, opacity .2s ease, text-shadow .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
  transform: translateY(-1px);
  background: var(--brand-gradient);
  box-shadow: var(--shadow-1);
  color:#fff !important;
  text-shadow: 0 0 10px rgba(255,46,147,.55), 0 0 18px rgba(138,43,226,.45);
  opacity:1;
}
.navbar .nav-link.active{
  background: var(--brand-gradient);
  box-shadow: var(--shadow-1);
  color:#fff !important;
  text-shadow: 0 0 10px rgba(255,46,147,.55), 0 0 18px rgba(138,43,226,.45);
}
.navbar-brand{
  display:flex; align-items:center; gap:.6rem; font-weight:700;
  color:#fff !important;
}
.navbar-brand img{ border-radius: 0 !important; height:36px; width:auto; display:block; }
.navbar .btn-cta{
  border-radius: 999px;
  background: var(--brand-gradient);
  color:#fff;
  border:0;
  box-shadow: var(--shadow-1);
}
/* Flag toggle pill */
.lang-toggle{
  --lang-gap: 8px; /* wider visual spacing between RO and UK */
  width:60px; height:30px; border-radius:999px; overflow:hidden; border:2px solid rgba(255,255,255,.12);
  display:flex; padding:2px; background:#111; position:relative;
}
.lang-toggle::after{ content:""; position:absolute; top:2px; bottom:2px; left:50%; width:var(--lang-gap); transform:translateX(-50%);
  background:#0b0b0b; border-radius:999px; z-index:3; }
.lang-toggle .half{ flex:1; border-radius:999px; background-size:cover; background-position:center; filter:saturate(1.1); }
.lang-toggle button{
  all:unset; cursor:pointer; width:100%; display:flex; gap:.4rem; align-items:center; justify-content:center;
}
.lang-toggle .half.ro{ background-image:url('../img/flag-ro.svg'); }
.lang-toggle .half.uk{ background-image:url('../img/flag-uk.svg'); }
.lang-toggle .thumb{
  position:absolute; inset:2px; width:calc(50% - 2px); border-radius:999px; background:rgba(0,0,0,.28);
  transition: transform .25s ease; z-index:2;
}
.lang-toggle[data-lang='en'] .thumb{ transform: translateX(100%); }
.lang-toggle[data-lang='ro'] .thumb{ transform: translateX(0%); }

/* Sections */
.section{
  border-radius: var(--radius-xl);
  background: radial-gradient(1200px 600px at 10% 0%, rgba(255,46,147,.12), transparent 60%),
              radial-gradient(1200px 600px at 90% 0%, rgba(138,43,226,.12), transparent 60%),
              #111;
  border:1px solid rgba(255,255,255,.06);
  padding: clamp(2rem, 3vw, 3rem);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  overflow: hidden; /* ensure rounded edges clip inner content */
}
.hero{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(255,46,147,.20), transparent 60%),
              radial-gradient(1200px 600px at 70% 10%, rgba(138,43,226,.18), transparent 60%),
              #0f0f0f;
  border-radius: var(--radius-xxl); /* stronger rounding for the home section */
  overflow: hidden;
}
.hero .display-5{
  line-height:1.05;
  font-weight:800;
  letter-spacing:.3px;
}
.badge-soft{
  border-radius:999px; padding:.5rem .9rem; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}
.btn-brand{
  border-radius:999px;
  background:var(--brand-gradient); color:#fff; border:0;
  box-shadow: var(--shadow-1);
}
.btn-outline{
  border-radius:999px; border:2px solid rgba(255,255,255,.16); color:#fff;
}
.card{
  border-radius: var(--radius-xl);
  background: #141414;
  border:1px solid rgba(255,255,255,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform: translateY(-6px); border-color: rgba(255,46,147,.35); box-shadow: var(--shadow-1); }
/* Emphasized banner card between KPIs and gallery */
.kpi-banner{
  background:#141414; border:1px solid rgba(255,255,255,.08);
  /* make the banner wrap tightly around its text and align left */
  display:inline-block; max-width:100%;
  text-align:left !important;
  padding:.5rem .9rem !important; /* override Bootstrap utilities for a smaller box */
  margin-right:auto; /* ensure left alignment when inside flex/centered parents */
  margin-top: 1.5rem !important; /* push it a bit farther from the CTAs */
}
.kpi-banner .h4{ color:#fff; letter-spacing:.3px; font-weight:700; }
/* Ensure about-2 card titles are white */
#about .card .fw-semibold{ color:#fff !important; }

/* Prevent title/left content clipping at rounded section edges (Bootstrap row has negative margins) */
#about .row.align-items-center,
#about-2 .row.align-items-center,
#about-3 .row.align-items-center,
#about-4 .row.align-items-center,
#about-5 .row.align-items-center{ margin-left: 0; margin-right: 0; }
.form-control, .form-select, textarea{
  border-radius: var(--radius-md) !important;
  background:#151515; color:#fff; border:1px solid rgba(255,255,255,.12);
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color:#FF2E93; box-shadow: 0 0 0 0.25rem rgba(255,46,147,.18);
}
/* Pink file upload button */
.form-control[type="file"]::file-selector-button{
  margin-right:.75rem; border:0; padding:.5rem .9rem; border-radius:999px;
  background: var(--brand-gradient); color:#fff; cursor:pointer;
  box-shadow: var(--shadow-1);
}
/* Safari/WebKit fallback */
.form-control[type="file"]::-webkit-file-upload-button{
  margin-right:.75rem; border:0; padding:.5rem .9rem; border-radius:999px;
  background: var(--brand-gradient); color:#fff; cursor:pointer;
  box-shadow: var(--shadow-1);
}
@media (hover:hover){
  .form-control[type="file"]::file-selector-button:hover,
  .form-control[type="file"]::-webkit-file-upload-button:hover{
    filter: brightness(1.05);
  }
}
.alert{
  border-radius: var(--radius-md);
}
/* Pink checkbox */
.form-check-input{ accent-color: var(--brand-pink); }
.form-check-input:focus{ box-shadow: 0 0 0 0.25rem rgba(255,46,147,.18); border-color:#FF2E93; }
.footer{
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background:#0f0f0f; border-top:1px solid rgba(255,255,255,.06);
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); transition: all .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view{ opacity:1; transform: none; }

/* Accent text */
.gradient-text{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; background-size:200% 100%; }
.hero .gradient-text{ background-image:linear-gradient(110deg,#ff2e93 0%,#ff7edb 25%,#8a2be2 55%,#5f1dbc 80%,#ff2e93 100%); background-size:240% 100%; animation:heroGradientSweep 3.8s ease-in-out infinite alternate; text-shadow:0 0 12px rgba(255,46,147,.45),0 0 22px rgba(138,43,226,.35); }
@keyframes heroGradientSweep{ 0%{ background-position:0% 50%; } 50%{ background-position:50% 50%; } 100%{ background-position:100% 50%; } }

/* Utilities */
.rounded-everywhere *:not(.navbar){ border-radius: inherit; }

/* Ensure sections keep rounded outer edges even with inherit utility */
body.rounded-everywhere .section{ border-radius: var(--radius-xl); overflow:hidden; }
body.rounded-everywhere .section.hero{ border-radius: var(--radius-xxl); overflow:hidden; }

/* Avoid border-radius inheritance clipping heading/text glyphs */
.section h1, .section h2, .section h3, .section p, .section .gradient-text{
  border-radius: 0 !important;
  overflow: visible;
}

/* Services gallery */
.gallery-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; margin-top: 1rem; }
@media (min-width: 768px){ .gallery-grid{ grid-template-columns: repeat(4, 1fr); } }
.gallery-tile{ position:relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow:hidden;
  border:1px solid rgba(255,255,255,.08); background:#121212; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.gallery-tile img{ width:100%; height:100%; object-fit: cover; display:block; transition: transform .3s ease; }
.gallery-tile::after{ content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.0) 60%); pointer-events:none; }
.gallery-tile figcaption{ position:absolute; left:.75rem; bottom:.5rem; color:#fff; font-weight:600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.gallery-tile:hover img{ transform: scale(1.04); }

/* KPI animated letters (24-72h livrare, etc.) */
.kpi-letters{ display:inline-block; white-space: pre; }
.kpi-letters .char{ display:inline-block; color:#fff; text-shadow:none;
  animation: kpiPink 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms);
}
@keyframes kpiPink{
  0%, 70%, 100%{ color:#fff; text-shadow:none; }
  30%{ color: var(--brand-white); text-shadow: 0 0 10px rgba(255,46,147,.6), 0 0 18px rgba(138,43,226,.5); }
}

/* Hero highlighted phrase (Calitate premium) with gradient text + glow */
.glow-letters{ display:inline-block; white-space: pre; }
.glow-letters .char{ display:inline-block; animation: heroGlow 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 120ms); }
@keyframes heroGlow{
  0%,70%,100%{ text-shadow:none; }
  30%{ text-shadow: 0 0 12px rgba(255,46,147,.7), 0 0 22px rgba(138,43,226,.6); }
}

/* Mobile layout: big image on top (span 2 cols), then 2x2 below */
@media (max-width: 767.98px){
  .gallery-grid .gallery-tile:first-child{ grid-column: 1 / -1; }
}

/* Hide duplicate tiles on all viewports (2,5,6) */
.gallery-grid .gallery-tile:nth-child(2),
.gallery-grid .gallery-tile:nth-child(5),
.gallery-grid .gallery-tile:nth-child(6){ display:none; }

/* Mosaic layout: merge tiles 1,2,5,6 into one large tile (desktop) */
@media (min-width: 768px){
  .gallery-grid .gallery-tile:nth-child(1){ grid-column: 1 / span 2; grid-row: 1 / span 2; align-self: center; }
  .gallery-grid .gallery-tile:nth-child(2),
  .gallery-grid .gallery-tile:nth-child(5),
  .gallery-grid .gallery-tile:nth-child(6){ display:none; }
  /* Ensure the four right tiles show the whole image */
  .gallery-grid .gallery-tile:nth-child(3) img,
  .gallery-grid .gallery-tile:nth-child(4) img,
  .gallery-grid .gallery-tile:nth-child(7) img,
  .gallery-grid .gallery-tile:nth-child(8) img{ object-fit: contain; background:#111; }
}

/* Click-to-zoom (lightbox) */
.gallery-grid .gallery-tile{ cursor: zoom-in; }
.lightbox{ position:fixed; inset:0; background: rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:10000; padding: 1.25rem; }
.lightbox.show{ display:flex; }
.lightbox-inner{ max-width:92vw; max-height:92vh; position:relative; }
.lightbox-inner img{ display:block; max-width:92vw; max-height:80vh; width:auto; height:auto; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-caption{ margin-top:.5rem; text-align:center; color:#fff; opacity:.9; font-weight:600; }
.lightbox-close{ position:absolute; top:-10px; right:-10px; width:36px; height:36px; border-radius:999px; background: rgba(0,0,0,.6); color:#fff; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; cursor:pointer; line-height:1; font-size:20px; }
@media (hover:hover){ .lightbox-close:hover{ background: rgba(0,0,0,.75); } }

/* Mobile: center everything (except navbar and contact) */
@media (max-width: 767.98px){
  /* Center text across primary containers (exclude header/navbar) */
  body, main, footer, .section{ text-align: center; }

  /* Center block media inside content areas only */
  main img, main svg, main video, main canvas,
  footer img, footer svg, footer video, footer canvas{ display:block; margin-left:auto; margin-right:auto; }

  /* Center flex layouts and columns within main content */
  main .d-flex, footer .d-flex{ justify-content: center !important; align-items: center !important; }
  main .row{ justify-content: center !important; }
  main .row > [class^="col-"], main .row > [class*=" col-"]{ display:flex; flex-direction: column; align-items:center; }

  /* Buttons/groups inline centering in main content */
  main .btn, main .btn-group, main .btn-group-vertical{ margin-left:auto; margin-right:auto; }

  /* Cards and banners */
  main .card{ align-items:center; }
  .kpi-banner{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; display:inline-block; }

  /* Gallery captions: center at the bottom */
  .gallery-grid .gallery-tile figcaption{ left:50%; transform:translateX(-50%); width:100%; text-align:center; }

  /* Keep Contact section as originally aligned (left) */
  #contact{ text-align:left; }
  #contact .row{ justify-content:flex-start !important; }
  #contact .row > [class^="col-"], #contact .row > [class*=" col-"]{ display:block; align-items:initial; }
  #contact .btn, #contact .btn-group, #contact .btn-group-vertical{ margin-left:0; margin-right:0; }
  #contact img, #contact svg, #contact video, #contact canvas, #contact iframe{ margin-left:0; margin-right:0; }
}

/* Mobile: move navbar CTA to bottom center and hide near footer */
@media (max-width: 767.98px){
  .btn-cta.btn-cta--float{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
    z-index: 9000;
    margin: 0 !important;
    border-radius: 999px; /* more rounded (pill) */
    padding: .75rem 1.25rem; /* balance shape */
    box-shadow: 0 12px 28px rgba(255,46,147,.35), 0 8px 22px rgba(0,0,0,.4);
    transition: opacity .25s ease, transform .25s ease;
    background: var(--brand-gradient);
    color:#fff;
    border:0;
  }
  @supports (bottom: env(safe-area-inset-bottom)){
    .btn-cta.btn-cta--float{ bottom: calc(env(safe-area-inset-bottom) + 8px); }
  }
  .btn-cta.btn-cta--float.is-hidden{ opacity:0; transform: translateX(-50%) translateY(12px); pointer-events:none; }

  /* Prevent content from being covered by floating button */
  main{ padding-bottom: 80px; }
}

/* Brand logos */
.brands-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 768px){ .brands-grid{ grid-template-columns: repeat(4, 1fr); } }
.brand-tile{ display:flex; align-items:center; justify-content:center; height:110px; padding:1rem; border-radius: var(--radius-xl);
  background:#141414; border:1px solid rgba(255,255,255,.08); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.brand-tile img{ max-height:60px; width:auto; height:auto; object-fit: contain; filter: saturate(0.95) contrast(1.05); opacity:.92; transition: transform .2s ease, opacity .2s ease; }
.brand-tile:hover img{ opacity:1; transform: scale(1.03); }

/* Services: make service card titles pink */
#services .card h5{ color: var(--brand-pink) !important; }
/* Small icon under the first service card description */
#services .service-icon{ color: var(--brand-pink); display:block; text-align:center; margin:.25rem auto 0; }
#services .service-icon svg{ width:28px; height:28px; display:inline-block; opacity:.95; }

/* Preloader overlay */
#preloader{ position:fixed; inset:0; z-index:var(--z-preloader); pointer-events:auto; opacity:1; visibility:visible;
  background: radial-gradient(1200px 600px at 50% 0%, rgba(255,46,147,.12), transparent 60%),
              radial-gradient(1200px 600px at 80% 20%, rgba(138,43,226,.12), transparent 60%),
              #0b0b0b;
  display:grid; place-items:center; transition: opacity .6s ease, visibility 0s linear; }
#preloader.done{ opacity:0; visibility:hidden; transition: opacity .6s ease, visibility 0s linear .6s; pointer-events:none; }
.preloader-inner{ position:relative; padding: 1.5rem 1.75rem; border-radius: var(--radius-xl);
  background: rgba(20,20,20,.72); border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), var(--shadow-2); text-align:center; }
.pre-logo img{ display:block; margin:0 auto; height:140px; width:auto; border-radius:0;
  /* remove subtle outline box around the logo */
  box-shadow: 0 10px 36px rgba(0,0,0,.5);
  animation: pulse 1.6s ease-in-out infinite; }
.pre-progress{ margin-top:1.1rem; width:min(80vw, 520px); margin-inline:auto; }
.pre-bar{ height:14px; background:#121212; border:1px solid rgba(255,255,255,.14); border-radius:999px; overflow:hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.pre-bar .fill{ height:100%; width:0%; background: var(--brand-gradient); box-shadow: 0 6px 18px rgba(255,46,147,.25); transition: width .1s linear; }
.pre-percent{ margin-top:.45rem; font-weight:700; letter-spacing:.4px; color:#fff; opacity:.9; }
.preloader-glow{ position:absolute; inset:auto 0 0 0; height:30vh; pointer-events:none; background: radial-gradient(60vw 40vh at 50% 100%, rgba(255,46,147,.22), transparent 60%); }
.preloader-noise{ position:absolute; inset:0; pointer-events:none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feComponentTransfer><feFuncA type="linear" slope="0.04"/></feComponentTransfer></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>'); opacity:.25; mix-blend-mode: overlay; }
.preloader-gradient{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.06) 40%, rgba(0,0,0,.18) 100%); }

@keyframes pulse {
  0% { transform: scale(0.94); filter: drop-shadow(0 0 0 rgba(255,46,147,0)); }
  50% { transform: scale(1.06); filter: drop-shadow(0 0 18px rgba(255,46,147,.25)); }
  100% { transform: scale(0.94); filter: drop-shadow(0 0 0 rgba(255,46,147,0)); }
}

/* Fullscreen drag-and-drop overlay */
.drop-overlay{ position:fixed; inset:0; display:none; z-index:11000; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(255,46,147,.16), transparent 60%),
              radial-gradient(1200px 600px at 50% 90%, rgba(138,43,226,.16), transparent 60%),
              rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}
.drop-overlay.show{ display:flex; }
.drop-overlay .drop-inner{ text-align:center; padding:2rem 2.5rem; border-radius: var(--radius-xl);
  background: rgba(20,20,20,.72); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-2);
}
.drop-overlay .drop-title{ font-size:1.5rem; font-weight:800; margin:0; margin-bottom:.5rem; }
.drop-overlay .drop-sub{ opacity:.9; }


