/* Nocturn — desenul pachetelor de găzduire, în două lumini.
 *
 * Culorile stau toate în variabile pe :root. Varianta de zi le rescrie pe
 * ale ei, sub [data-tema="lumina"]. Restul foii nu știe în ce lumină e:
 * folosește doar variabilele, deci nu există două seturi de reguli care să
 * se depărteze una de alta cu timpul.
 *
 * Fundalul de noapte nu e negru, ci bleumarin adânc: negrul face cifrele să
 * pară că plutesc în gol, iar pe ecranele ieftine se vede în benzi.
 */
:root{
  --nk-fundal:        #151d33;
  --nk-fundal-jos:    #101729;
  --nk-halou-1:       rgba(98,57,189,.42);
  --nk-halou-2:       rgba(116,197,218,.24);
  --nk-grila:         rgba(150,180,255,.075);
  --nk-card:          linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028));
  --nk-card-popular:  linear-gradient(180deg, rgba(116,197,218,.15), rgba(98,57,189,.11));
  --nk-muchie:        linear-gradient(150deg, rgba(116,197,218,.75), rgba(98,57,189,.55) 45%, rgba(255,255,255,.07));
  --nk-text:          #e9edf8;
  --nk-text-stins:    rgba(233,237,248,.66);
  --nk-linie:         rgba(255,255,255,.07);
  --nk-accent:        #74c5da;
  --nk-accent-clar:   #a6e4f2;
  --nk-violet:        #8b63e8;
  --nk-pret:          #ffffff;
  --nk-halou-pret:    0 0 28px rgba(116,197,218,.55);
  --nk-buton-fund:    linear-gradient(100deg, #74c5da, #a6e4f2);
  --nk-buton-text:    #07101a;
  --nk-buton-umbra:   0 14px 32px -14px rgba(116,197,218,.85);
  --nk-comutator:     rgba(255,255,255,.08);
  --nk-arc:           cubic-bezier(.22,.61,.36,1);
}

/* Varianta de zi: același desen, altă lumină. */
:root[data-tema="lumina"]{
  --nk-fundal:        #f7f6fc;
  --nk-fundal-jos:    #eef0fa;
  --nk-halou-1:       rgba(98,57,189,.20);
  --nk-halou-2:       rgba(116,197,218,.26);
  --nk-grila:         rgba(98,57,189,.055);
  --nk-card:          linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  --nk-card-popular:  linear-gradient(180deg, #ffffff, rgba(246,245,252,.9));
  --nk-muchie:        linear-gradient(150deg, rgba(98,57,189,.55), rgba(116,197,218,.5) 55%, rgba(98,57,189,.10));
  --nk-text:          #19233f;
  --nk-text-stins:    #55607a;
  --nk-linie:         rgba(98,57,189,.12);
  --nk-accent:        #6239bd;
  --nk-accent-clar:   #4fa8c4;
  --nk-violet:        #6239bd;
  --nk-pret:          #19233f;
  --nk-halou-pret:    none;
  --nk-buton-fund:    linear-gradient(100deg, #6239bd, #7a52d4 48%, #74c5da);
  --nk-buton-text:    #ffffff;
  --nk-buton-umbra:   0 16px 34px -16px rgba(98,57,189,.75);
  --nk-comutator:     rgba(98,57,189,.09);
}

/* --- banda ------------------------------------------------------------- */
.nocturn{
  position:relative; overflow:hidden; padding:78px 40px;
  background:linear-gradient(180deg, var(--nk-fundal), var(--nk-fundal-jos));
  color:var(--nk-text);
  font-family:'Open Sans', DejaVu Sans, Arial, sans-serif;
  transition:background .45s var(--nk-arc), color .45s var(--nk-arc);
}
.nocturn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 48% at 14% 0%, var(--nk-halou-1), transparent 62%),
    radial-gradient(48% 44% at 90% 18%, var(--nk-halou-2), transparent 64%);
}
.nocturn::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--nk-grila) 1px, transparent 1px),
    linear-gradient(90deg, var(--nk-grila) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 28%, #000, transparent 76%);
          mask-image:radial-gradient(72% 62% at 50% 28%, #000, transparent 76%);
}
.nk-plic{position:relative; z-index:1; max-width:1180px; margin:0 auto}

/* --- capul benzii, cu comutatorul -------------------------------------- */
.nk-antet{display:flex; align-items:flex-start; justify-content:space-between; gap:30px; margin:0 0 44px}
.nk-eticheta{margin:0 0 10px; font-size:12px; letter-spacing:4px; text-transform:uppercase;
  font-weight:700; color:var(--nk-accent)}
.nk-titlu{margin:0 0 8px; font-family:Teko, DejaVu Sans, sans-serif; font-size:50px;
  line-height:1; font-weight:500; color:var(--nk-text)}
.nk-sub{margin:0; max-width:56ch; font-size:15px; line-height:1.7; color:var(--nk-text-stins)}

.nk-comutator{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  padding:7px 8px; border-radius:99px; border:1px solid var(--nk-linie);
  background:var(--nk-comutator); cursor:pointer;
  transition:background .3s var(--nk-arc), border-color .3s var(--nk-arc);
}
.nk-comutator:focus-visible{outline:2px solid var(--nk-accent); outline-offset:3px}
.nk-fata{
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px;
  font-size:12.5px; font-weight:700; letter-spacing:.3px; color:var(--nk-text-stins);
  background:transparent; transition:all .3s var(--nk-arc);
}
.nk-fata svg{width:15px; height:15px; flex:0 0 auto}
/* fața activă e cea a luminii curente */
:root:not([data-tema="lumina"]) .nk-fata--noapte,
:root[data-tema="lumina"] .nk-fata--zi{
  background:var(--nk-buton-fund); color:var(--nk-buton-text);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);
}

/* --- cardurile --------------------------------------------------------- */
.nk-grila{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch}
.nk-card{
  position:relative; display:flex; flex-direction:column;
  padding:30px 28px 28px; border-radius:20px; background:var(--nk-card);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .45s var(--nk-arc), transform .3s var(--nk-arc), box-shadow .3s var(--nk-arc);
}
.nk-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--nk-muchie);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.nk-card:hover{transform:translateY(-4px)}
.nk-card--popular{
  background:var(--nk-card-popular);
  box-shadow:0 0 0 1px rgba(116,197,218,.22), 0 30px 70px -30px rgba(116,197,218,.5);
}
:root[data-tema="lumina"] .nk-card--popular{
  box-shadow:0 1px 2px rgba(9,41,51,.05), 0 34px 80px -34px rgba(98,57,189,.7);
}
.nk-insigna{
  position:absolute; top:-11px; left:28px; padding:5px 12px; border-radius:99px;
  font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; font-weight:700;
  background:var(--nk-buton-fund); color:var(--nk-buton-text);
}
.nk-nume{margin:0 0 14px; font-size:12px; letter-spacing:3.5px; text-transform:uppercase;
  font-weight:700; color:var(--nk-accent)}
.nk-pret{margin:0 0 22px; display:flex; align-items:baseline; gap:2px;
  font-family:Teko, DejaVu Sans, sans-serif}
.nk-intreg{font-size:62px; line-height:.9; font-weight:500; color:var(--nk-pret);
  text-shadow:var(--nk-halou-pret)}
.nk-zecimi{font-size:26px; color:var(--nk-text-stins)}
.nk-moneda{font-size:26px; color:var(--nk-accent); margin-left:5px}
.nk-luna{font-family:'Open Sans', DejaVu Sans, sans-serif; font-size:12.5px;
  color:var(--nk-text-stins); margin-left:7px}
.nk-specs{list-style:none; margin:0 0 26px; padding:0; flex:1}
.nk-specs li{display:flex; align-items:center; gap:11px; padding:9px 0; font-size:13.5px;
  color:var(--nk-text-stins); border-bottom:1px solid var(--nk-linie)}
.nk-specs li:last-child{border-bottom:none}
.nk-bulina{width:6px; height:6px; border-radius:50%; background:var(--nk-accent); flex:0 0 auto;
  box-shadow:0 0 10px var(--nk-accent)}
.nk-buton{
  display:block; text-align:center; padding:14px; border-radius:12px; font-weight:700;
  font-size:14px; letter-spacing:.3px; text-decoration:none;
  background:var(--nk-buton-fund); color:var(--nk-buton-text); box-shadow:var(--nk-buton-umbra);
  transition:transform .2s var(--nk-arc), box-shadow .2s var(--nk-arc);
}
.nk-buton:hover{transform:translateY(-2px)}

/* --- ecrane mici ------------------------------------------------------- */
@media (max-width:1000px){ .nk-grila{grid-template-columns:1fr} .nk-antet{flex-direction:column} }
@media (max-width:800px){ .nocturn{padding:46px 20px} .nk-titlu{font-size:38px} }

/* --- cine nu vrea mișcare ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nocturn, .nk-card, .nk-buton, .nk-fata, .nk-comutator{transition:none}
  .nk-card:hover, .nk-buton:hover{transform:none}
}