/* =========================================================
   5StarWin — LockCar CAN-IMMO
   Paleta: ink / steel / hairline / paper / amber (blocat) / mint (permis)
   ========================================================= */

:root{
  --ink:      #0B1622;
  --steel:    #13253A;
  --steel-2:  #0E1C2C;
  --hair:     #22405C;
  --paper:    #E9F1F8;
  --muted:    #8AA5BE;
  --amber:    #FFB020;
  --mint:     #35E0A1;

  --disp: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1160px;
  --r: 14px;
  --pad-sec: clamp(64px, 9vw, 118px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:84px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img,svg{ max-width:100%; }

a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(18px,4vw,32px); }
.wrap--narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--mint); color:#04150E; padding:10px 16px; border-radius:0 0 8px 0; font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--mint); outline-offset:3px; border-radius:4px; }

/* ---------- Tipografie ---------- */
h1,h2,h3{ font-family:var(--disp); font-weight:700; line-height:1.06; letter-spacing:-0.02em; margin:0; }

h1{ font-size:clamp(36px,5.2vw,56px); }

.h2{
  font-size:clamp(28px,4vw,44px);
  margin:0 0 18px;
  max-width:22ch;
}
.band .h2{ max-width:26ch; }

.h3{ font-size:20px; margin:26px 0 6px; }
.h3:first-of-type{ margin-top:0; }

.hl{ color:var(--mint); }

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
  display:flex; align-items:flex-start; gap:10px;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--hair); flex:0 0 auto; margin-top:.75em;
}

.lead{ font-size:clamp(17px,1.6vw,19px); color:#C3D6E7; max-width:56ch; }
.lead--sm{ font-size:17px; }

.note{
  font-size:15px; color:var(--muted); max-width:64ch;
  border-left:2px solid var(--hair); padding-left:16px; margin-top:34px;
}

p{ margin:0 0 14px; }
p:last-child{ margin-bottom:0; }

/* ---------- Butoane ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--disp); font-weight:700; font-size:15px;
  letter-spacing:0.01em;
  padding:13px 24px;
  border-radius:999px;
  background:var(--mint); color:#04150E;
  text-decoration:none; border:1px solid var(--mint);
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-2px); background:#5BEBB6; }
.btn--ghost{ background:transparent; color:var(--paper); border-color:var(--hair); }
.btn--ghost:hover{ background:rgba(53,224,161,.08); border-color:var(--mint); color:var(--paper); }
.btn--sm{ padding:9px 18px; font-size:14px; }
.btn--full{ width:100%; }

/* ---------- Naviga?ie ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(11,22,34,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(34,64,92,.6);
}
.nav__in{ display:flex; align-items:center; gap:22px; min-height:66px; }

.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; margin-right:auto; }
.brand__mark{ color:var(--mint); display:flex; }
.brand__txt{ font-family:var(--disp); font-weight:700; font-size:19px; letter-spacing:-0.02em; }
.brand__txt em{ font-style:normal; color:var(--mint); }

.nav__links{ display:flex; gap:22px; }
.nav__links a{
  font-size:14.5px; text-decoration:none; color:#B7CCDF; padding:6px 0;
  border-bottom:1px solid transparent;
}
.nav__links a:hover{ color:var(--paper); border-bottom-color:var(--mint); }

.burger{
  display:none; width:42px; height:38px; border:1px solid var(--hair); border-radius:9px;
  background:transparent; cursor:pointer; padding:0; flex-direction:column; gap:4px;
  align-items:center; justify-content:center;
}
.burger span{ width:18px; height:1.6px; background:var(--paper); display:block; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(52px,7vw,96px) 0 clamp(64px,8vw,104px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(760px 420px at 78% 12%, rgba(53,224,161,.10), transparent 62%),
    radial-gradient(620px 380px at 6% 88%, rgba(255,176,32,.06), transparent 60%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px);
  align-items:center;
}
.hero__copy h1{ margin-bottom:20px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.chips{ display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 0; }
.chip{
  border:1px solid var(--hair); border-radius:10px; padding:9px 14px; background:rgba(19,37,58,.5);
}
.chip dt{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.chip dd{ margin:2px 0 0; font-family:var(--disp); font-weight:700; font-size:15px; }

/* ---------- SIGNATURE: panoul de stare ---------- */
.panel{
  border:1px solid var(--hair);
  border-radius:18px;
  background:linear-gradient(180deg, #16293E 0%, #0E1C2C 100%);
  padding:24px;
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
.panel__top{ display:flex; align-items:center; justify-content:space-between; }
.panel__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.panel__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 4px rgba(255,176,32,.16);
  transition:background .25s ease, box-shadow .25s ease;
}
.panel[data-state="ok"] .panel__dot{ background:var(--mint); box-shadow:0 0 0 4px rgba(53,224,161,.16); }

.panel__status{
  font-family:var(--disp); font-weight:700; letter-spacing:-0.02em;
  font-size:clamp(27px,3.4vw,36px); line-height:1.08;
  margin:16px 0 4px; color:var(--amber);
  transition:color .25s ease;
}
.panel[data-state="ok"] .panel__status{ color:var(--mint); }
.panel__sub{ font-size:14.5px; color:var(--muted); margin:0 0 18px; min-height:44px; }

.trace{ position:relative; border:1px solid var(--hair); border-radius:10px; background:rgba(6,14,22,.6); padding:8px 10px 22px; }
.trace svg{ display:block; width:100%; height:44px; }
.trace__base{ stroke:rgba(34,64,92,.9); stroke-width:1; }
.trace__wave{ fill:none; stroke:var(--amber); stroke-width:1.8; stroke-linejoin:round; transition:stroke .25s ease; }
.panel[data-state="ok"] .trace__wave{ stroke:var(--mint); }
.trace__tag{
  position:absolute; left:10px; bottom:5px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted);
}

.checks{ list-style:none; margin:18px 0 0; padding:0; }
.check{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:11px 0; border-bottom:1px solid rgba(34,64,92,.7);
  font-size:14.5px;
}
.check__k{ color:#B7CCDF; }
.check__v{ font-family:var(--mono); font-size:13px; color:var(--amber); white-space:nowrap; }
.check.is-ok .check__v{ color:var(--mint); }

.switch{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.switch__lbl{ font-size:14.5px; color:#B7CCDF; }
.switch__btn{
  flex:0 0 auto; width:56px; height:31px; border-radius:999px; cursor:pointer;
  border:1px solid var(--hair); background:rgba(6,14,22,.8); padding:3px; position:relative;
  transition:background .2s ease, border-color .2s ease;
}
.switch__knob{
  display:block; width:23px; height:23px; border-radius:50%;
  background:var(--muted); transition:transform .2s ease, background .2s ease;
}
.switch__btn[aria-checked="true"]{ background:rgba(53,224,161,.18); border-color:var(--mint); }
.switch__btn[aria-checked="true"] .switch__knob{ transform:translateX(25px); background:var(--mint); }

.panel__hint{ font-size:12.5px; color:var(--muted); margin:10px 0 0; }

/* ---------- Benzi ---------- */
.band{ padding:var(--pad-sec) 0; border-top:1px solid rgba(34,64,92,.45); }
.band--alt{ background:var(--steel-2); }

.grid{ display:grid; gap:18px; margin-top:38px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }

.card{
  border:1px solid var(--hair); border-radius:var(--r); padding:24px;
  background:rgba(19,37,58,.42);
}
.card h3{ font-size:19px; margin-bottom:8px; }
.card p{ font-size:15px; color:#B7CCDF; }

.threats .card{ border-left:2px solid var(--amber); }

.feat{ border-top:1px solid var(--hair); padding-top:20px; }
.feat h3{ font-size:18px; margin-bottom:7px; }
.feat p{ font-size:15px; color:#B7CCDF; }

/* ---------- Doua coloane ---------- */
.two{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.two--wide{ grid-template-columns:1.1fr .9fr; }

.two__viz{
  border:1px solid var(--hair); border-radius:var(--r); background:rgba(19,37,58,.42); padding:18px;
}
.sch rect{ fill:rgba(11,22,34,.7); stroke:var(--hair); stroke-width:1.2; }
.sch rect.sch--acc{ stroke:var(--mint); fill:rgba(53,224,161,.07); }
.sch rect.sch--dash{ stroke-dasharray:5 4; }
.sch path{ stroke:var(--muted); stroke-width:1.3; fill:none; color:var(--muted); }
.sch path.sch--dash{ stroke-dasharray:5 4; }
.sch text{ fill:var(--paper); font-family:var(--disp); font-weight:700; font-size:14px; text-anchor:middle; }
.sch .sch__s{ fill:var(--muted); font-family:var(--mono); font-weight:400; font-size:11px; }
.sch .sch__acc{ fill:var(--mint); }
.sch .sch__out{ fill:var(--muted); font-family:var(--mono); font-weight:400; font-size:11px; }

/* ---------- Specifica?ii ---------- */
.spec{ width:100%; border-collapse:collapse; margin-top:26px; }
.spec th, .spec td{ text-align:left; padding:13px 0; border-bottom:1px solid rgba(34,64,92,.7); vertical-align:top; font-size:15px; }
.spec th{ font-family:var(--mono); font-weight:400; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); width:44%; padding-right:18px; }

.module{ position:sticky; top:96px; }
.module__box{ border:1px solid var(--hair); border-radius:var(--r); background:rgba(19,37,58,.42); padding:14px; }
.mod__body{ fill:rgba(11,22,34,.9); stroke:var(--hair); stroke-width:1.4; }
.mod__glow{ fill:none; stroke:var(--mint); stroke-width:1.4; opacity:.32; }
.mod__pins path{ stroke:var(--muted); stroke-width:2; }
.mod__t{ fill:var(--paper); font-family:var(--disp); font-weight:700; font-size:17px; text-anchor:middle; }
.mod__s{ fill:var(--muted); font-family:var(--mono); font-size:11px; text-anchor:middle; }
.module__cap{ font-size:13.5px; color:var(--muted); margin-top:12px; text-align:center; }

/* ---------- Pa?i ---------- */
.steps{ list-style:none; margin:38px 0 0; padding:0; counter-reset:s; }
.step{
  display:grid; grid-template-columns:74px 1fr; column-gap:22px; row-gap:2px;
  padding:24px 0; border-top:1px solid rgba(34,64,92,.7);
}
.step__n{ font-family:var(--mono); font-size:15px; color:var(--mint); padding-top:5px; grid-column:1; grid-row:1 / span 2; }
.step h3{ grid-column:2; grid-row:1; }
.step p{ grid-column:2; grid-row:2; }
.step h3{ font-size:20px; margin-bottom:6px; }
.step p{ font-size:15.5px; color:#B7CCDF; max-width:62ch; }

/* ---------- Oferta ---------- */
.offer{
  display:grid; grid-template-columns:1.15fr .85fr;
  border:1px solid var(--hair); border-radius:18px; overflow:hidden; margin-top:38px;
  background:rgba(19,37,58,.42);
}
.offer__main{ padding:clamp(24px,3.4vw,38px); }
.offer__main h3{ font-size:26px; }
.offer__tag{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin:6px 0 20px; }

.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:10px; font-size:15.5px; color:#C3D6E7; }
.ticks li::before{
  content:""; position:absolute; left:2px; top:9px;
  width:9px; height:9px; border-radius:2px; border:1.5px solid var(--mint); background:rgba(53,224,161,.2);
}

.offer__side{
  padding:clamp(24px,3.4vw,38px);
  background:rgba(6,14,22,.55);
  border-left:1px solid var(--hair);
  display:flex; flex-direction:column; justify-content:center;
}
.offer__from{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0; }
.offer__price{ font-family:var(--disp); font-weight:700; font-size:clamp(38px,5vw,54px); line-height:1; margin:4px 0 14px; }
.offer__note{ font-size:14px; color:var(--muted); margin-bottom:20px; }

/* ---------- FAQ ---------- */
.faq{ margin-top:32px; }
.faq details{ border-top:1px solid rgba(34,64,92,.7); padding:4px 0; }
.faq details:last-child{ border-bottom:1px solid rgba(34,64,92,.7); }
.faq summary{
  cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
  font-family:var(--disp); font-weight:500; font-size:17.5px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  color:var(--mint); font-family:var(--mono); font-size:19px;
}
.faq details[open] summary::after{ content:"–"; }
.faq details p{ font-size:15.5px; color:#B7CCDF; padding:0 40px 18px 0; margin:0; }

/* ---------- Contact ---------- */
.contacts{ list-style:none; margin:28px 0 0; padding:0; }
.contacts li{
  display:flex; justify-content:space-between; gap:16px;
  padding:13px 0; border-bottom:1px solid rgba(34,64,92,.7); font-size:15.5px;
}
.contacts span:first-child{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.contacts a{ color:var(--mint); text-decoration:none; }
.contacts a:hover{ text-decoration:underline; }

.form{
  border:1px solid var(--hair); border-radius:18px; background:rgba(19,37,58,.42);
  padding:clamp(22px,3vw,30px);
}
.field{ margin-bottom:16px; }
.field label{
  display:block; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:7px;
}
.field .opt{ text-transform:none; letter-spacing:0; }
.field input, .field textarea{
  width:100%; background:rgba(6,14,22,.65); border:1px solid var(--hair); border-radius:9px;
  color:var(--paper); font-family:var(--body); font-size:16px; padding:11px 13px; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--mint); outline:none; }

.form__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.form__msg{ font-size:14px; color:var(--amber); margin:14px 0 0; min-height:20px; }
.form__msg.is-ok{ color:var(--mint); }

/* ---------- Footer ---------- */
.foot{ border-top:1px solid rgba(34,64,92,.6); padding:44px 0; background:var(--steel-2); }
.foot__brand{ font-family:var(--disp); font-weight:700; font-size:19px; margin:0 0 8px; }
.foot__brand em{ font-style:normal; color:var(--mint); }
.foot__txt{ font-size:14px; color:var(--muted); max-width:62ch; }
.foot__small{ font-size:13px; color:var(--muted); margin-top:18px; }
.foot__small a{ color:var(--mint); text-decoration:none; }

/* ---------- Reveal la scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero__in{ grid-template-columns:1fr; }
  .two, .two--wide{ grid-template-columns:1fr; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .offer{ grid-template-columns:1fr; }
  .offer__side{ border-left:none; border-top:1px solid var(--hair); }
  .module{ position:static; }
}

@media (max-width: 760px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--steel); border-bottom:1px solid var(--hair);
    padding:8px clamp(18px,4vw,32px) 16px;
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:12px 0; border-bottom:1px solid rgba(34,64,92,.6); }
  .burger{ display:flex; }
  .nav .btn--sm{ display:none; }
  .grid--3{ grid-template-columns:1fr; }
  .step{ grid-template-columns:1fr; }
  .step__n, .step h3, .step p{ grid-column:1; }
  .step__n{ grid-row:auto; margin-bottom:4px; }
  .step h3, .step p{ grid-row:auto; }
  .spec th{ width:46%; }
  body{ font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   STILURI SUPLIMENTARE PENTRU PAGINILE DE GHID
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.crumbs{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  color:var(--muted); margin:0 0 22px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--mint); }
.crumbs span{ opacity:.5; }

/* ---------- Antetul articolului ---------- */
.artHead{ padding:clamp(38px,6vw,72px) 0 8px; border-bottom:1px solid rgba(34,64,92,.5); }
.artHead h1{ max-width:20ch; margin-bottom:18px; }
.artHead .lead{ max-width:66ch; }
.meta{
  font-family:var(--mono); font-size:12px; letter-spacing:.05em; color:var(--muted);
  margin:24px 0 30px; display:flex; flex-wrap:wrap; gap:8px 18px;
}

/* ---------- Corpul articolului ---------- */
.art{ padding:clamp(38px,5vw,64px) 0 0; }
.art h2{
  font-family:var(--disp); font-size:clamp(24px,3vw,32px); font-weight:700;
  line-height:1.12; letter-spacing:-.02em; margin:54px 0 14px; max-width:24ch; scroll-margin-top:96px;
}
.art h2:first-child{ margin-top:0; }
.art h3{ font-family:var(--disp); font-size:19px; margin:30px 0 8px; }
.art p{ max-width:68ch; color:#D3E2EF; }
.art ul, .art ol{ max-width:66ch; padding-left:20px; margin:0 0 16px; color:#D3E2EF; }
.art li{ margin-bottom:9px; }
.art strong{ color:var(--paper); font-weight:600; }
.art a{ color:var(--mint); text-decoration:none; border-bottom:1px solid rgba(53,224,161,.35); }
.art a:hover{ border-bottom-color:var(--mint); }
.art hr{ border:0; border-top:1px solid rgba(34,64,92,.7); margin:48px 0; }

/* ---------- Cuprins ---------- */
.toc{
  border:1px solid var(--hair); border-radius:var(--r); padding:22px 26px;
  background:rgba(19,37,58,.42); margin:0 0 44px;
}
.toc p{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 12px;
}
.toc ol{ margin:0; padding-left:20px; columns:2; column-gap:34px; }
.toc li{ margin-bottom:7px; font-size:15px; break-inside:avoid; }
.toc a{ color:#C3D6E7; text-decoration:none; border:0; }
.toc a:hover{ color:var(--mint); }
@media (max-width:760px){ .toc ol{ columns:1; } }

/* ---------- Casete ---------- */
.box{
  border:1px solid var(--hair); border-left:2px solid var(--mint); border-radius:0 var(--r) var(--r) 0;
  background:rgba(19,37,58,.42); padding:20px 24px; margin:28px 0; max-width:70ch;
}
.box--warn{ border-left-color:var(--amber); }
.box p{ font-size:15.5px; margin-bottom:10px; }
.box p:last-child{ margin-bottom:0; }
.box b{ font-family:var(--disp); display:block; margin-bottom:6px; font-size:16px; color:var(--paper); }

/* ---------- Cifre / statistici ---------- */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:34px 0; }
.stats div{ border-top:1px solid var(--hair); padding-top:16px; }
.stats b{ display:block; font-family:var(--disp); font-size:clamp(26px,3.4vw,36px); line-height:1; color:var(--mint); }
.stats span{ display:block; font-size:14px; color:var(--muted); margin-top:8px; }
@media (max-width:760px){ .stats{ grid-template-columns:1fr; } }

/* ---------- Tabel de comparatie ---------- */
.cmpWrap{ overflow-x:auto; margin:32px 0; -webkit-overflow-scrolling:touch; }
.cmp{ width:100%; min-width:660px; border-collapse:collapse; }
.cmp th, .cmp td{
  text-align:left; padding:14px 16px; border-bottom:1px solid rgba(34,64,92,.7);
  font-size:14.5px; vertical-align:top;
}
.cmp thead th{
  font-family:var(--disp); font-size:15px; color:var(--paper);
  border-bottom:1px solid var(--hair); white-space:nowrap;
}
.cmp thead th:first-child{ font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:400; }
.cmp tbody th{
  font-family:var(--mono); font-weight:400; font-size:12.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted); width:24%;
}
.cmp .col--us{ background:rgba(53,224,161,.06); }
.cmp thead .col--us{ color:var(--mint); }
.yes{ color:var(--mint); }
.no{ color:var(--amber); }
.scrollHint{ font-size:13px; color:var(--muted); margin:-22px 0 30px; }
@media (min-width:900px){ .scrollHint{ display:none; } }

/* ---------- Banda de CTA ---------- */
.cta{
  border:1px solid var(--hair); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(19,37,58,.6), rgba(11,22,34,.6));
  padding:clamp(26px,4vw,42px); margin:56px 0 0; text-align:center;
}
.cta h2{ margin:0 0 10px; max-width:none; }
.cta p{ max-width:56ch; margin-inline:auto; color:#C3D6E7; }
.cta .btn{ margin-top:20px; }

/* ---------- Ghiduri conexe ---------- */
.related{ margin-top:64px; border-top:1px solid var(--hair); padding-top:34px; }
.related > p{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px;
}
.relGrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.relGrid a{
  display:block; border:1px solid var(--hair); border-radius:var(--r); padding:20px;
  background:rgba(19,37,58,.42); text-decoration:none; color:var(--paper);
  transition:border-color .16s ease, transform .16s ease;
}
.relGrid a:hover{ border-color:var(--mint); transform:translateY(-2px); }
.relGrid b{ display:block; font-family:var(--disp); font-size:16.5px; color:var(--paper); margin-bottom:6px; }
.relGrid span{ font-size:14px; color:var(--muted); }
@media (max-width:980px){ .relGrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .relGrid{ grid-template-columns:1fr; } }

/* ---------- Index de ghiduri (hub) ---------- */
.hubGrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:34px; }
.hubGrid a{
  display:block; border:1px solid var(--hair); border-radius:var(--r); padding:24px;
  background:rgba(19,37,58,.42); text-decoration:none; color:var(--paper);
  border-bottom:1px solid var(--hair);
  transition:border-color .16s ease, transform .16s ease;
}
.hubGrid a:hover{ border-color:var(--mint); transform:translateY(-2px); }
.hubGrid em{
  font-style:normal; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px;
}
.hubGrid b{ display:block; font-family:var(--disp); font-size:19px; color:var(--paper); margin-bottom:7px; line-height:1.2; }
.hubGrid span{ font-size:14.5px; color:#B7CCDF; }
@media (max-width:760px){ .hubGrid{ grid-template-columns:1fr; } }

/* ---------- Nota juridica ---------- */
.legal{
  font-size:13px; color:var(--muted); max-width:74ch; margin-top:40px;
  border-top:1px solid rgba(34,64,92,.7); padding-top:18px;
}
.legal a{ color:var(--muted); }

/* =========================================================
   GAMA LOCKCAR — banda HUD, varianta OPTIMIZATA
   ---------------------------------------------------------
   Acelasi design, dar fara nimic care sa consume procesor:
     - zero animatii
     - zero backdrop-filter (era cauza principala a incetinirii:
       forta browserul sa refaca un blur la fiecare cadru de scroll,
       pe 8 elemente deodata)
     - fara mask / mask-composite
     - fara pseudo-element separat pe fiecare casuta
     - umbre mici, in loc de umbre uriase cu blur de 50px
   Rezultatul se deseneaza o singura data si apoi sta.

   CULOAREA: se schimba dintr-o singura linie, mai jos.
       --hud: 0,240,255;      cyan (acum)
       --hud: 53,224,161;     verdele site-ului
   ========================================================= */
.range{
  --hud: 0,240,255;          /* neon principal (R,G,B) */
  --hud-soft: 122,184,255;   /* albastru pentru text secundar */
  --hud-pale: 208,229,255;   /* text din casute */

  position:relative;
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:clamp(1.8rem,3.4vw,3rem) clamp(1.2rem,2.6vw,2.5rem) clamp(2rem,3vw,2.8rem);
  background:#080e1a;
  border:1px solid rgba(var(--hud),.25);
  border-radius:clamp(2.2rem,3vw,3.5rem);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.75);
  overflow:hidden;
}
.art .range{ margin-top:48px; }
.band .range{ margin-top:26px; }

/* ---------- cadru HUD (static, se deseneaza o data) ----------
   Un singur element, cu tot decorul intr-un singur background:
   4 puncte in colturi + liniile fine orizontale.            */
.range__frame{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 20px 20px, rgba(var(--hud),.18) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 20px) 20px, rgba(var(--hud),.18) 1px, transparent 1.5px),
    radial-gradient(circle at 20px calc(100% - 20px), rgba(var(--hud),.18) 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 20px) calc(100% - 20px), rgba(var(--hud),.18) 1px, transparent 1.5px),
    repeating-linear-gradient(0deg,
      transparent 0 3px,
      rgba(var(--hud),.022) 3px 4px);
}
.range__frame::before{
  content:""; position:absolute; inset:20px; pointer-events:none;
  border:1px solid rgba(var(--hud),.09);
  border-radius:clamp(1.4rem,2.2vw,2.5rem);
}

/* ---------- antet ---------- */
.range__kicker{
  position:relative; z-index:2;
  display:flex; align-items:center;
  font-family:var(--mono);
  font-size:clamp(.65rem,1.4vw,.8rem);
  letter-spacing:.15em; text-transform:uppercase;
  color:rgb(var(--hud-soft));
  border-left:2px solid rgba(var(--hud),.3);
  padding-left:clamp(.6rem,1.4vw,1rem);
  margin:0 0 .6rem;
}
.range__dot{
  display:inline-block; flex:0 0 auto;
  width:9px; height:9px; border-radius:50%;
  background:rgb(var(--hud));
  box-shadow:0 0 8px rgba(var(--hud),.75);
  margin-right:10px;
}

.range__top{
  position:relative; z-index:2;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:1rem 1.5rem; margin-bottom:.75rem;
}
.range__h{
  position:relative; display:inline-block; margin:0; max-width:none;
  font-family:var(--disp); font-weight:700;
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  line-height:1.1; letter-spacing:-.02em;
  color:var(--paper);
  background:linear-gradient(135deg, #e0f0ff 0%, #7abfff 50%, rgb(var(--hud)) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.range__h::after{
  content:""; position:absolute; left:0; bottom:-2px;
  width:60%; height:2px; opacity:.4;
  background:linear-gradient(90deg, rgb(var(--hud)), transparent);
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .range__h{ -webkit-text-fill-color:var(--paper); color:var(--paper); }
}

.range__all{
  position:relative; z-index:2;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.05em;
  color:rgb(var(--hud)); text-decoration:none; white-space:nowrap;
  padding:.6rem 1.6rem; border-radius:40px;
  border:1px solid rgba(var(--hud),.3);
  background:rgba(var(--hud),.05);
}
.range__all:hover{
  background:rgba(var(--hud),.14);
  border-color:rgb(var(--hud));
  color:#fff;
}

.range__sub{
  position:relative; z-index:2;
  font-size:clamp(.95rem,1.8vw,1.1rem);
  color:#b6d4ff; line-height:1.6; letter-spacing:.01em;
  max-width:780px; margin:0 0 2.2rem;
  border-left:2px solid rgba(var(--hud),.15);
  padding-left:clamp(.8rem,1.6vw,1.5rem);
}

/* ---------- grila de module ---------- */
.rangeGrid{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:1.1rem;
  margin:1rem 0 1.5rem;
}

.rangeTile{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.4rem; text-align:center; text-decoration:none;
  min-height:180px;
  padding:1.3rem .7rem 1rem;
  color:rgb(var(--hud-pale));
  background:#0b1526;
  border:1px solid rgba(var(--hud),.22);
  border-radius:1.6rem;
}
.rangeTile:hover{
  background:#0d1c33;
  border-color:rgba(var(--hud),.55);
}

.rangeTile__no{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
  color:rgba(var(--hud),.55);
  background:rgba(var(--hud),.05);
  border:1px solid rgba(var(--hud),.12);
  border-radius:40px; padding:.2rem .8rem; margin-bottom:.2rem;
}

.rangeTile__img{
  display:block;
  width:100%; max-width:110px; aspect-ratio:1/1;
  margin:0 auto .4rem; overflow:hidden;
  border-radius:1.2rem;
  background:#08131f;
  border:1px solid rgba(var(--hud),.10);
}
.rangeTile__img img{
  display:block; width:100%; height:100%; object-fit:cover;
}

.rangeTile__t{
  display:block; font-family:var(--disp); font-weight:700;
  font-size:.92rem; line-height:1.2; letter-spacing:.02em;
  color:rgb(var(--hud-pale));
}
.rangeTile em{
  display:block; width:80%; margin:0 auto; padding-top:.25rem;
  font-style:normal; font-family:var(--mono); font-weight:400;
  font-size:.72rem; letter-spacing:.05em; opacity:.75;
  color:rgb(var(--hud-soft));
  border-top:1px solid rgba(var(--hud),.1);
}

.range__note{
  position:relative; z-index:2; text-align:center;
  font-family:var(--mono); font-size:.68rem; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(var(--hud-soft),.45);
  margin:1.8rem 0 0; padding-top:1.2rem;
  border-top:1px solid rgba(var(--hud),.08);
}
.range__note::before{
  content:""; display:inline-block; vertical-align:middle;
  width:6px; height:6px; border-radius:50%;
  background:rgba(var(--hud),.35); margin-right:.5rem;
  position:relative; top:-1px;
}

/* ---------- varianta compacta, optionala ---------- */
.range--tight{ padding:1.8rem 1.5rem; }
.range--tight .rangeGrid{ gap:.8rem; }
.range--tight .rangeTile{ min-height:150px; padding:1rem .5rem .8rem; }
.range--tight .rangeTile__img{ max-width:80px; }
.range--tight .range__h{ font-size:clamp(1.7rem,3.4vw,2.6rem); }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .rangeGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:600px){
  .range{ padding:1.8rem 1.2rem 2rem; }
  .range__top{ flex-direction:column; align-items:stretch; gap:.5rem; }
  .range__all{ align-self:flex-start; padding:.4rem 1.2rem; font-size:.78rem; }
  .range__sub{ margin-bottom:1.8rem; }
  .rangeGrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:.8rem; }
  .rangeTile{ min-height:150px; padding:1rem .3rem .8rem; }
  .rangeTile__img{ max-width:80px; }
  .range__frame::before{ inset:12px; }
}

/* ---------------------------------------------------------
   Protectie: in articole, regula generala ".art a" (link verde
   cu linie dedesubt) are specificitate mai mare decat
   ".rangeTile" si ar colora casutele in verde. O anulam doar
   in interiorul benzii.
   --------------------------------------------------------- */
.art .rangeTile{
  color:rgb(var(--hud-pale));
  border:1px solid rgba(var(--hud),.22);
}
.art .rangeTile:hover{ border-color:rgba(var(--hud),.55); }
.art .range__all{
  color:rgb(var(--hud));
  border:1px solid rgba(var(--hud),.3);
}
.art .range__all:hover{ color:#fff; border-color:rgb(var(--hud)); }