:root{
  --bg:#0b0d12;
  --card:#111522;
  --text:#f2f4f8;
  --muted:#aab2c0;
  --line:rgba(255,255,255,.10);
  --accent:#ffffff;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(255,255,255,.06), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
  padding-top: 68px
}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:24px}
.lang{
  display:flex;gap:8px;align-items:center;
  order: 3; margin-left: auto; 
  flex: 0 0 auto;
}
.topbar-left{ 
  order: 1;
  display:flex;
  align-items:center;
  gap:12px;
  margin-right: 32px;
  flex: 0 0 auto;  }
.langBtn{
border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);
  padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600;
  display:flex;gap:8px;align-items:center
}
.langBtn.active{
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.35),
    0 6px 20px rgba(0,0,0,0.35);
  color: #ffffff;
}
.flag{
  width:30px;
  height:25px;
  border-radius:2px;
  flex:0 0 auto;
}
.hero{
  padding:20px 0 28px;border-bottom:1px solid var(--line)
}
.h1{font-size:44px;line-height:1.10;margin:0 0 14px}
.sub{font-size:18px;color:var(--muted);max-width:720px;margin:0 0 22px}
.ctaRow{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  font-weight:700
}
.btn.primary{background:rgba(255,255,255,.16)}
.btn.emag{
	transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.btn.emag:hover{
  background: linear-gradient(135deg, #e60012 0%, #005eb8 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:16px;padding:26px 0
}
.card{
  grid-column: span 4;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  border-radius:18px;overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.card img{width:100%;height:100%;object-fit:cover;background:#0f1320}
.card .p{
	padding:16px;
	display:flex;
	flex-direction:column;
	flex:1;
}
.kicker{color:var(--muted);font-size:20px;letter-spacing:.16em;margin:0 0 14px; margin-top:auto;}
.title{font-size:18px;margin:10px 0 8px;font-weight:800;min-height:56px}
.desc{color:var(--muted);font-size:14px;margin:0 0 14px;min-height:48px}
.card .actions{display:flex;gap:10px;flex-direction:column;}
.sectionTitle{font-size:20px;margin:0 0 14px}
.panel{
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  border-radius:18px;padding:18px
}
.footer{border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:14px}
.footer a{text-decoration:underline}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  background: rgba(11, 13, 18, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 1000;
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 100%;
  flex-wrap: nowrap;        
  gap: 10px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  order: 2;
  width: auto;
  justify-content: flex-start;
  flex-wrap: nowrap;
  padding-top: 0;
}
.topbar-nav a {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 10px;
}
.topbar-nav a:hover {
  color: var(--text);
}
.topbar-nav .cta {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: var(--text);
  position: relative;
  transition:
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.topbar-nav .cta:hover{
  background: rgba(255,255,255,0.15);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(-1px);

  /* text gradient luminos */
  background-image: linear-gradient(
    135deg,
    #ff2a2a 0%,   /* roșu mai luminos */
    #1e90ff 100%  /* albastru mai luminos */
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* animație subtilă */
  background-size: 200% 200%;
  animation: emagGradient 1.8s ease infinite;
}
.topbar-logo {
  width: auto;
  height: 50px;
  max-width: 150px;
  object-fit: contain;
}
.bundles .card img {
  width: 100%;
  height: 300px;          
  object-fit: contain;  
  display: block;
  margin: 0 auto;
  background: #ffffff;  
  border-radius: 18px 18px 0 0;
}
.bundleMeta{
  margin: 10px 0 12px;
}
.bundleLabel{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  color: var(--muted);
  margin-bottom: 8px;
}
.bundleList{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.bundleList li{ margin: 4px 0; }
.bundleList a{
  display: inline-block;
  padding: 4px 6px;
  margin-left: -6px;              /* aliniază highlight-ul cu textul */
  border-radius: 6px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.bundleList a:hover{
  background-color: rgba(125,211,252,0.18); /* accent light */
}
.bundleList a:focus-visible{
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
  border-radius: 6px;
}
.ctaRow .btn{
  transition:
    background 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.ctaRow .btn:hover{
  background: linear-gradient(135deg, #e60012 0%, #005eb8 100%);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.card .actions .btn{
  width: 100%;
  display: flex;
  justify-content: center;  
  align-items: center;       
  text-align: center;
}
.card .actions .btn:hover{
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transform: translateY(-1px);
}
.card-link{
  display: block;
}

.card-link img{
  transition: transform .25s ease;
}

.card-link:hover img{
  transform: scale(1.03);
}

.card-title-link{
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.card-title-link:hover .title{
  text-decoration: underline;
}
.gallery { display: flex; flex-direction: column; gap: 12px; }
.gallery-main { display:block; border-radius: 18px 18px 0 0; overflow:hidden; }
.gallery-main img {width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: transparent;
  display:block; 
}
.gallery-thumbs { display:flex; gap:10px; flex-wrap:wrap; padding: 0 12px 14px; }
.thumb { border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); border-radius: 12px; padding: 6px; cursor:pointer; }
.thumb img { width: 56px; height: 56px; object-fit: contain; display:block; }
.thumb.is-active { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.12); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; display:none; z-index: 2000; }
.lightbox.is-open { display:block; }
.lightbox-backdrop { position:absolute; inset:0; background: rgba(0,0,0,0.75); }
.lightbox-content {
  position: relative;
  width: fit-content;
  max-width: 90vw;
  max-height: 90vh;
  margin: 60px auto;
  padding: 16px;
  background: #0f1320;
  border-radius: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.lightbox-content img {
  width: min(90vw, 70vh);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: transparent;
  display:block;
}
.lightbox-close{
  position:absolute;
  top: 16px;
  right: 16px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
  z-index: 10;
  text-shadow:
  0 2px 6px rgba(0,0,0,.9),
  0 8px 24px rgba(0,0,0,.9);
  transition: transform .15s ease, opacity .15s ease;
}

.lightbox-close:hover{
  transform: scale(1.1);
  opacity: .85;
}
.lightbox-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #ffffff;
  font-size: 42px;
  cursor: pointer;
  text-shadow:
  0 2px 8px rgba(0,0,0,.95),
  0 10px 30px rgba(0,0,0,.95);
  z-index: 9;
  transition: transform .15s ease, opacity .15s ease;
}

.lightbox-nav:hover{
  transform: translateY(-50%) scale(1.15);
  opacity: .85;
}

.lightbox-nav.prev{ left: 20px; }
.lightbox-nav.next{ right: 20px; }
.back-btn{
  width: fit-content;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    opacity .2s ease;
}

/* arrow */
.back-btn::before{
  content: "←";
  display: inline-block;
  margin-right: 8px;
  transition: transform .25s ease, opacity .25s ease;
  opacity: .9;
}

.back-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}

.back-btn:hover::before{
  transform: translateX(-4px);
  opacity: 1;
}
.productPanel{ padding: 22px; }
.productHeader{ margin-bottom: 14px; }
.productTitle{
  font-size: 26px;
  line-height: 1.15;
  margin: 0 0 10px;
  font-weight: 900;
}

.productBadges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.badge{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.productSection{ margin-top: 18px; }
.featureList, .compatList {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.featureList li, .compatList li { margin: 6px 0; }
.productText{ color: var(--muted); margin: 10px 10 0; }
.reviews{
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.reviewsHead{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.reviewsTitle{
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  padding: 0 18px;
}

.reviewsViewport{
  overflow: hidden;
  border-radius: 14px;
}

.reviewsTrack{
  display:flex;
  gap: 0;
  transition: transform .35s ease;
  will-change: auto;
}

.review{
  min-width: 100%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 14px;
  padding: 12px;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.reviewMeta{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
}

.reviewHeader{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 8px;
  margin-bottom: 8px;
}

.reviewRating{
  letter-spacing: 1px;
  font-size: 14px;
  color: #f5c542;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

.reviewHeadline{
  font-weight: 800;
  font-size: 14px;
}

.reviewBadge{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  padding: 4px 8px;
  border-radius: 999px;
}

.reviewText{
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.advList{
  margin: 10px 0 0;
  padding-left: 26px;      /* padding frumos pentru bullet-uri */
}

.advList li{
  margin: 6px 0;
  line-height: 1.5;
  color: var(--muted);
}

.advList li::marker{
  color: rgba(255,255,255,.4);
}
.panel-about { grid-column: span 7; }
.panel-contact { grid-column: span 5; }
.topbar-nav .cta{
  white-space: nowrap;
}
#top,
#bundles,
#produse,
#despre,
#contact {
  scroll-margin-top: 68px;
}
@media (max-width: 520px){
  .lightbox-nav{ width: 40px; height: 40px; font-size: 26px; }
}
html { scroll-behavior: smooth; }
@media (max-width: 920px){
  .card{grid-column: span 6;}
  .split{grid-template-columns:1fr}
  .h1{font-size:36px}
  .panel-about, .panel-contact { grid-column: span 12; }
}
@media (max-width: 620px){
  .card{grid-column: span 12;}
}
@media (max-width: 820px){
  .topbar{
    height: auto;            
    padding: 10px 0;
  }

  .topbar-inner{
    flex-wrap: wrap;         /* wrap doar pe ecrane mici */
    gap: 10px;
  }

  .topbar-nav{
    order: 3;
    width: 100%;             /* nav ia tot rândul pe mobil */
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding-top: 8px;
	overflow-x: auto;               
    -webkit-overflow-scrolling: touch;
  }
   .topbar-left { order: 1; width: auto; 
   justify-content: flex-start;
   margin-right: 12px;   }
   .lang, .topbar-right {
    order: 2;
    margin-left: 0;
	flex: 0 0 auto;     
    align-self: center;
  }
  .lang { flex-wrap: wrap; gap: 6px; }

  .topbar-nav a, .topbar-nav .cta {
    font-size: 12px;
    padding: 6px 8px;
  }
  
  .topbar-nav a{
    flex: 0 0 auto;                
    white-space: nowrap;           
  }
  .topbar-nav a{
    flex: 0 0 auto;                
    white-space: nowrap;           
  }
  .topbar-left img.topbar-logo, .topbar-left .topbar-logo {
    max-height: 42px;
    height: auto;
  }
  .productPanel {
    padding: 16px; 
  }

  .productPanel .sectionTitle {
    font-size: 16px;     
    margin-bottom: 8px;
  }
  .productPanel .productTitle {
    font-size: 20px;     
    margin-bottom: 15px;
  }
  
  .productPanel .badge {
    font-size: 12px;     
  }

  .productPanel .advList {
    font-size: 13px;    
    line-height: 1.45;
  }

  .productPanel .advList li {
    margin: 4px 0;
  }

  .productPanel .productText {
    font-size: 13px;
    line-height: 1.45;
  }
  .grid > .card {
    grid-column: span 12 !important;   
    order: 1;                          
  }

  .grid > .productPanel {
    grid-column: span 12 !important;   
    order: 2;                          
  }

  
  .grid {
    align-items: start;
  }
  .gallery-thumbs {
    flex-wrap: nowrap;                
    overflow-x: auto;                 
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .gallery-thumbs .thumb {
    flex: 0 0 auto;                    
  }

  /* ascunde scrollbar (estetic) */
  .gallery-thumbs::-webkit-scrollbar {
    display: none;
  }
  #top,
  #bundles,
  #produse,
  #despre,
  #contact {
  scroll-margin-top: 120px; 
}
@media (max-width: 360px){
  .topbar-nav a, .topbar-nav .cta {
    font-size: 11px;
    padding: 5px 6px;
  }
}

  body{
    padding-top: 120px;
  }
}
@keyframes emagGradient{
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}