/* ===========================
   CND Control — Electrics Page
   Dark-tech design with electric accents
   =========================== */

/* ---- CSS Variables (Theme) ---- */
:root{
  --bg-0: #0b1222;           /* deep space */
  --bg-1: #0f172a;           /* dark slate */
  --bg-2: #1e293b;           /* card */
  --text-0: #e2e8f0;         /* light */
  --text-1: #cbd5e1;         /* muted */
  --text-2: #94a3b8;         /* subtext */
  --accent: #38bdf8;         /* cyan electric */
  --accent-2: #22d3ee;       /* bright cyan */
  --line: rgba(56,189,248,0.25);
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.08);
  --shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* ---- Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }

/* ---- Body ---- */
body{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, rgba(56,189,248,0.07), transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%, #0a0f1c 100%);
  color: var(--text-0);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Improve text rendering */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---- Wrapper ---- */
.electric-page-wrapper{ flex: 1; display: flex; flex-direction: column; }

/* Reusable shells */
.section-shell { position: relative; }
.section-shell::before{
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  opacity: .6;
}

/* Container */
.electric-page-wrapper .container{
  width: min(1200px, 92vw);
  margin: 0 auto;
  padding: 3.5rem 0;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.85rem 1.2rem; border-radius:12px;
  text-decoration:none; font-weight:600; transition:.2s ease-in-out;
  border:1px solid var(--border);
  will-change: transform, box-shadow;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#001019;
  box-shadow: 0 8px 24px rgba(34, 211, 238, .25);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(34,211,238,.35); }
.btn-ghost{
  background: transparent; color: var(--text-0);
  backdrop-filter: blur(3px);
}
.btn-ghost:hover{ background: var(--glass); transform: translateY(-2px); }

/* =======================
   HERO
   ======================= */
.electric-hero{
  position: relative; width:100%; height: 54vh; min-height: 420px; overflow:hidden;
  border-bottom: 1px solid var(--border);
}
.electric-hero .slide{
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  filter: saturate(0.85) contrast(1.05) brightness(0.9);
  transform: scale(1.04);
}
.electric-hero .overlay{
  position: relative; z-index: 3; height: 100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1rem; text-align:center; padding: 0 1rem;
}
.electric-hero .overlay h1{
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: .02em;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(56,189,248,.8), 0 0 32px rgba(56,189,248,.35);
}
.electric-hero .overlay .subtitle{
  color: var(--text-1);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  max-width: 900px;
  font-style: italic;
}

.hero-badges{
  display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center;
}
.badge{
  font-size:.85rem; padding:.45rem .7rem; border-radius:999px;
  background: linear-gradient(180deg, rgba(34,211,238,.18), rgba(56,189,248,.12));
  color:#b7effa; border: 1px solid rgba(56,189,248,.35);
  box-shadow: inset 0 0 12px rgba(56,189,248,.15);
}
.hero-cta{ display:flex; gap:.8rem; margin-top:.25rem; }

/* animated circuit grid layer */
.circuit-grid{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.55;
  mix-blend-mode: screen;
}
.circuit-grid svg{
  width:100%; height:100%; display:block;
  animation: gridGlow 5s linear infinite;
}
@keyframes gridGlow{
  0% { opacity: .35; }
  50% { opacity: .65; }
  100%{ opacity: .35; }
}

/* subtle scanline */
.scanline{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity:.08;
}

/* Prefers-reduced-motion: remove animations */
@media (prefers-reduced-motion: reduce){
  .circuit-grid svg, .scanline{ animation: none !important; }
}

/* =======================
   INTRO
   ======================= */
.electric-intro{ position:relative; }
.intro-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: stretch;
}
.electric-intro h2{
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text-0);
  margin-bottom: .6rem;
  text-shadow: 0 0 10px rgba(56,189,248,.15);
}
.electric-intro p{ color: var(--text-1); max-width: 62ch; }
.checklist{
  margin-top: 1rem; list-style: none; display: grid; gap: .5rem;
}
.checklist li{
  position:relative; padding-left: 1.6rem; color: var(--text-0);
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.35rem;
  width:1rem; height:1rem; border-radius:4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px rgba(34,211,238,.35);
  mask: radial-gradient(circle at 30% 30%, white 55%, transparent 56%);
}

.intro-panel{
  background: linear-gradient(145deg, rgba(34,211,238,.10), rgba(56,189,248,.08), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 1.2rem;
  box-shadow: var(--shadow);
}
.intro-panel__title {
  text-align: center;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent-2);
  margin-bottom: 5.2rem; /* mai mult spațiu față de setul de casete */
  font-family: 'Orbitron', sans-serif;
}

.intro-pillset {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* două coloane */
  gap: 1rem 1.2rem; /* spațiu pe rânduri și coloane */
  max-width: 500px; /* pentru simetrie, centru pe pagină */
  margin: 0 auto;   /* centrează gridul */
}

.pill {
  display: flex;
  align-items: center;
  justify-content: center; /* text pe centru */
  font-size: .9rem;
  padding: .6rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.35);
  background: rgba(56,189,248,.08);
  color: #bff4ff;
  min-height: 40px; /* toate au aceeași înălțime */
}

/* =======================
   TEST TYPES
   ======================= */
.electric-tests{
  background: radial-gradient(800px 480px at 20% 10%, rgba(56,189,248,.08), transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-0));
}
.electric-tests h2{
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--text-0);
  text-align:center;
}
.section-desc{
  text-align:center; color: var(--text-2); margin-top:.25rem; margin-bottom:1.6rem;
}
.card-grid{
  display:grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card{
  position:relative;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 1.4rem 1.2rem 1.2rem;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:-2px; border-radius:18px;
  background: conic-gradient(from 180deg, transparent, rgba(56,189,248,.18), transparent 30%);
  filter: blur(10px); opacity:.0; transition:.25s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 12px 28px rgba(34,211,238,.18), var(--shadow);
}
.card:hover::before{ opacity:.85; }

.card-icon{
  margin: 0 auto 1rem auto; /* centrează containerul pe card */
  width: 140px; height:110px; display:grid; place-items:center;
  border-radius: 12px; margin-bottom:.9rem;
  background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(34,211,238,.16));
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: inset 0 0 18px rgba(56,189,248,.25);
}

.card-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* în loc de contain */
  border-radius: 12px;
}
.card h3{
  font-family: 'Orbitron', sans-serif;
  color: var(--accent); margin-bottom:.35rem; font-size: 1.05rem;
}
.card p{ color: var(--text-1); font-size: .97rem; }

/* =======================
   DIAGRAM
   ======================= */
.electric-diagram .diag-flex{
  display:grid; grid-template-columns: .95fr 1.05fr; gap: 1.6rem; align-items:center;
}
.diag-media{
  background: linear-gradient(145deg, rgba(56,189,248,.10), rgba(34,211,238,.08));
  padding: .8rem; border-radius: 16px;
  border:1px solid var(--border); box-shadow: var(--shadow);
}
.diag-media img{ border-radius: 12px; }
.diag-media figcaption{
  margin-top:.5rem; color: var(--text-2); font-size:.9rem; text-align:center;
}
.diag-copy p{ color: var(--text-1); margin-bottom: 1rem; }
.steps{ display:grid; gap:.6rem; }
.step{ display:flex; align-items:center; gap:.6rem; }
.step-dot{
  width:12px; height:12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff 12%, #7dd3fc 45%, transparent 46%);
  box-shadow: 0 0 12px rgba(56,189,248,.6);
}

/* =======================
   STANDARDS / QUALITY
   ======================= */
.electric-standards{
  background: linear-gradient(180deg, var(--bg-0), #0a0f1c);
}
.electric-standards h2{
  text-align:center; font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--text-0); margin-bottom: 1.2rem;
}
.std-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1rem;
}
.std-card{
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 1.2rem 1.1rem;
  box-shadow: var(--shadow);
}
.std-led{
  width: 12px; height:12px; border-radius:50%; margin-bottom:.6rem;
  background: radial-gradient(circle at 30% 30%, #fff 12%, #7dd3fc 45%, transparent 46%);
  box-shadow: 0 0 12px rgba(56,189,248,.6);
}
.std-card h3{
  font-family: 'Orbitron', sans-serif; color: var(--accent);
  margin-bottom:.3rem; font-size: 1.02rem;
}
.std-card p{ color: var(--text-1); }

/* =======================
   CTA
   ======================= */
.electric-cta{
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, #0a0f1c, var(--bg-0));
}
.cta-box{
  text-align:center;
  background: linear-gradient(145deg, rgba(34,211,238,.10), rgba(56,189,248,.08), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: 18px; padding: 2rem 1.2rem;
  box-shadow: var(--shadow);
}
.cta-box h2{
  font-family: 'Orbitron', sans-serif;
  color: var(--text-0); margin-bottom:.4rem; font-size: clamp(1.4rem, 2.8vw, 1.9rem);
}
.cta-box p{ color: var(--text-2); margin-bottom: 1rem; }
.cta-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* =======================
   RESPONSIVE
   ======================= */
@media (max-width: 1024px){
  .intro-grid{ grid-template-columns: 1fr; }
  .electric-diagram .diag-flex{ grid-template-columns: 1fr; }
}

@media (max-width: 768px){
  .container{ padding: 2.6rem 0; }
  .hero-cta{ flex-wrap: wrap; }
}

@media (max-width: 560px){
  .badge{ font-size:.78rem; }
  .btn{ width: 100%; }
}

/* Accessibility contrast tweak on focus */
a:focus-visible, .btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* Desktop mediu (≈ 1024–1399px): forțăm 3 coloane ⇒ aranjament 3 + 2 */
@media (min-width: 1024px) and (max-width: 1399px){
  .card-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1200px;      /* ține grila compactă */
    margin-inline: auto;    /* centrează grila în container */
  }
}

/* Desktop mare (≥ 1400px): toate cele 5 pe un singur rând */
@media (min-width: 1400px){
  .card-grid{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}