/* ===== Site-ul COLABO în stilul Be The One — B «Aurora» (2026-11-06) ======================================
   MIXCUT: «update … și la site homepage și pagini. Pe alb, și detectezi tema și poate fi cea întunecată dacă
   utilizatorul are tema așa la dispozitiv» → machete A/B/C → «B»; «C-ul de pe homepage acolo e aiurea» (scos);
   «butoanele să nu fie albastre, să fie translucide».
   Ziua: alb cu aurora (mov, roz, albastru) care curge încet sus, sclipiri, carduri de sticlă; butonul principal în
   gradientul campaniei, celelalte translucide. Noaptea, doar dacă telefonul / calculatorul e pe întunecat
   (prefers-color-scheme: dark): negru cu stele și lumina mov, ca aplicația.
   Se încarcă DUPĂ stilul fiecărei pagini publice (prima pagină, ghidurile din pagini.py, paginile legale); cerul îl
   pune /site-cer.js. Pagina /betheone rămâne neagră (are stilul ei). */

:root {
  color-scheme: light dark;
  --bg: #ffffff; --panou: rgba(255, 255, 255, .5); --card: rgba(255, 255, 255, .62);
  --border: rgba(70, 48, 255, .1); --linie: rgba(70, 48, 255, .08);
  --ink: #0d0b1f; --text2: #4a4764; --muted: #67648a;
  --accent: #5b3df5; --accent-soft: rgba(91, 61, 245, .08);
  --accent-shadow: 0 12px 30px rgba(116, 66, 255, .32);
  --umbra-card: inset 0 1px 0 rgba(255, 255, 255, .9), 0 14px 40px rgba(70, 48, 200, .1);
  --grad: linear-gradient(115deg, #4630ff 0%, #7442ff 42%, #b764ff 72%, #ff86d6 100%);
  --st-pista: rgba(70, 48, 255, .12);
  --rosu: #e0435e;   /* totalul «pe cont propriu» din «Fă calculul»: roșu și ziua, ca noaptea */
}
html { background: var(--bg); }
body { background: transparent; }

/* ---- cerul: aurora care curge încet + sclipiri (stratul îl pune /site-cer.js) ---- */
.cer { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.cer .lum { position: absolute; left: -40%; right: -40%; top: -320px; height: 980px;
  background: radial-gradient(34% 40% at 22% 40%, rgba(124, 92, 255, .4), transparent 70%),
    radial-gradient(30% 36% at 72% 30%, rgba(255, 128, 210, .34), transparent 70%),
    radial-gradient(34% 38% at 52% 70%, rgba(96, 170, 255, .28), transparent 70%);
  filter: blur(8px); animation: cer-aurora 12s ease-in-out infinite alternate; }
@keyframes cer-aurora { 0% { transform: translateX(-5%) scale(1); } 100% { transform: translateX(5%) scale(1.08); } }
.cer i { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(160, 120, 255, .9); opacity: 0;
  animation: cer-clipire var(--d, 4s) ease-in-out var(--t, 0s) infinite; }
@keyframes cer-clipire { 0%, 100% { opacity: 0; } 50% { opacity: var(--o, .6); } }
@keyframes cer-respira { 0%, 100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.06); opacity: 1; } }
.hero::before { display: none; }

/* ---- bara de sus și logo-ul, cu C-ul de sticlă (fix) ---- */
.top { background: rgba(255, 255, 255, .62); border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
.top.scrolled { border-bottom-color: var(--border); }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo::before { content: ""; width: 28px; height: 29px; flex: none; background: url(/betheone-c.webp) center / contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(90, 60, 255, .35)); }
.logo.logo-mic::before { width: 20px; height: 21px; }

/* ---- butoanele: principalul în gradientul campaniei, cu sclipire; restul de sticlă translucidă ---- */
.btn { border-radius: 999px; }
.btn-accent { position: relative; overflow: hidden; color: #fff; background: var(--grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 30px rgba(116, 66, 255, .32); }
.btn-accent:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 16px 36px rgba(116, 66, 255, .42); }
.btn-accent::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  animation: site-sclipire 3.8s ease-in-out .8s infinite; }
@keyframes site-sclipire { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.btn-ghost { color: var(--ink); background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .96), rgba(255, 255, 255, .62) 60%);
  border: 1px solid rgba(70, 48, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(70, 48, 200, .08); }

/* ---- eticheta și titlurile ---- */
.eyebrow { background: rgba(91, 61, 245, .07); border: 1px solid rgba(91, 61, 245, .18); color: #5b3df5; text-transform: uppercase;
  letter-spacing: .14em; font-size: 11.5px; font-weight: 800; }
.eyebrow .dot { background: #ff6fc4; box-shadow: 0 0 10px #ff6fc4; }
h1 { font-weight: 900; letter-spacing: -.045em; }
h1 .acc { background: linear-gradient(90deg, #5b3df5 0%, #8a4df0 25%, #e054c8 45%, #ff7eb0 55%, #8a4df0 75%, #5b3df5 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: site-luciu 7s linear infinite; }
@keyframes site-luciu { from { background-position: 0% 0; } to { background-position: 220% 0; } }
.sec-titlu, .card-final h2, .final h2 { font-weight: 900; letter-spacing: -.035em; }

/* ---- cardurile: sticlă prin care se vede aurora ---- */
.mock-card, .bt, .pas, .fcard, .plan, .comp-card, .faq-item, .sapt, .legat, .card {
  background: var(--card); border-color: rgba(255, 255, 255, .85); box-shadow: var(--umbra-card); }
.card { border: 1px solid rgba(255, 255, 255, .85); }
.mock-video { background: radial-gradient(80% 120% at 0% 0%, rgba(110, 60, 255, .5), transparent 70%), #0b0a13; }
.mock-bara i, .bt.brand, .pas .nr, .plan .badge, .comp-vs { background: var(--grad); }
.bt.brand { box-shadow: 0 14px 34px rgba(116, 66, 255, .32); }
.plan.star, .comp-card.co { border: 2px solid transparent;
  background: linear-gradient(rgba(255, 255, 255, .84), rgba(255, 255, 255, .84)) padding-box, var(--grad) border-box;
  box-shadow: 0 18px 44px rgba(116, 66, 255, .18); }
.plan.elite-plan { background: var(--card); border-color: rgba(255, 255, 255, .85); }
.card-final, .final .card-final { background: var(--grad); box-shadow: 0 24px 60px rgba(116, 66, 255, .32); color: #fff; }
.card-final p { color: rgba(255, 255, 255, .92); }
.card-final .btn, .final .card-final .btn { color: #4630ff; background: radial-gradient(120% 140% at 30% 0%, #fff, rgba(255, 255, 255, .86) 60%);
  box-shadow: 0 10px 26px rgba(30, 10, 90, .25); }
.card-final .btn::after { content: none; }
#primesti, .banda { background: rgba(255, 255, 255, .35); }
.bara-jos { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); }
#ref-bara { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* ---- Enterprise (2026-11-06, MIXCUT: «adaugă în dreapta și Enterprise, fără preț … și buton de contact»): carte neagră pe
   ambele teme, cu linia holografică sus; «La cerere» în locul prețului; butonul de contact de sticlă ---- */
.plan.ent-plan { color: #fff; border: 1px solid rgba(255, 255, 255, .12); overflow: hidden;
  background: radial-gradient(90% 60% at 100% 0%, rgba(124, 92, 255, .38), transparent 70%),
    radial-gradient(70% 50% at 0% 100%, rgba(255, 128, 210, .16), transparent 70%), #0b0a13;
  box-shadow: 0 24px 60px rgba(20, 10, 60, .35), 0 0 60px rgba(110, 60, 255, .18); }
.plan.ent-plan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, #4630ff, #b764ff, #ff86d6, #60aaff); }
.plan.ent-plan .nume, .plan.ent-plan li b { color: #fff; }
.plan.ent-plan .desc, .plan.ent-plan li { color: rgba(255, 255, 255, .74); }
.plan.ent-plan .plus-cap { color: #cbb6ff; }
.plan.ent-plan li.plus::before { color: #ff9edb; }
.plan.ent-plan li::before { color: #33c17c; }
.plan.ent-plan .ent-pret { font-size: 34px; font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(90deg, #fff, #cbb6ff 40%, #ff9edb 70%, #ffd2b0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan.ent-plan .btn-ghost { color: #fff; background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07) 60%);
  border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .4); }

/* ---- subsolul, aliniat frumos (MIXCUT 2026-11-06: «aranjează frumos și pe web și pe tel, aliniate frumos») ----
   calculator: logo-ul stânga și © dreapta, pe un rând; dedesubt linkurile stânga și insigna ANPC dreapta, toate pe
   aceeași linie de mijloc. Telefon: totul centrat, unul sub altul, insigna pe rândul ei. */
footer { align-items: center; }   /* paginile legale: subsolul e un singur rând */
.foot-in { align-items: center; }
.foot-legal { align-items: center; gap: 10px 28px; margin-top: 18px; }
.foot-legal a, footer > a, footer > span { line-height: 1.4; }
footer a[href*="reclamatiisal.anpc.ro"] { margin-left: auto; flex: none; }
footer a[href*="reclamatiisal.anpc.ro"] img { box-shadow: 0 4px 14px rgba(70, 48, 200, .1); }
@media (max-width: 760px) {
  footer, .foot-in, .foot-legal { justify-content: center; text-align: center; }
  .foot-in { flex-direction: column; gap: 10px; }
  .foot-legal { gap: 10px 22px; margin-top: 16px; }
  footer a[href*="reclamatiisal.anpc.ro"] { flex-basis: 100%; display: flex; justify-content: center; margin: 12px 0 0; }
}

/* ================= NOAPTEA: telefonul / calculatorul e pe tema întunecată ================= */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --panou: rgba(255, 255, 255, .035); --card: rgba(9, 8, 16, .78);
    --border: rgba(255, 255, 255, .1); --linie: rgba(255, 255, 255, .07);
    --ink: #ffffff; --text2: #c6c2e0; --muted: #918db3;
    --accent: #b08cff; --accent-soft: rgba(176, 140, 255, .13); --good: #33c17c; --rosu: #ff6b8a;
    --accent-shadow: 0 12px 34px rgba(116, 66, 255, .5), 0 0 70px rgba(183, 100, 255, .22);
    --umbra-card: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 50px rgba(0, 0, 0, .75);
    --st-pista: rgba(255, 255, 255, .12);
  }
  .cer .lum { left: -30%; right: -30%; top: -300px; height: 720px; filter: none;
    background: radial-gradient(closest-side, rgba(110, 60, 255, .42), rgba(110, 60, 255, .12) 55%, transparent);
    animation: cer-respira 6s ease-in-out infinite; }
  .cer i { box-shadow: none; }
  .top { background: rgba(0, 0, 0, .55); }
  .logo::before { filter: drop-shadow(0 0 10px rgba(120, 70, 255, .9)); }
  .btn-accent { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 34px rgba(116, 66, 255, .5), 0 0 70px rgba(183, 100, 255, .25); }
  .btn-ghost { color: #fff; background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07) 60%);
    border-color: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 18px rgba(0, 0, 0, .4); }
  .eyebrow { background: rgba(118, 66, 255, .16); border-color: rgba(185, 140, 255, .32); color: #dccfff; }
  h1 .acc { background-image: linear-gradient(90deg, #fff 0%, #cbb6ff 22%, #ff9edb 44%, #ffd2b0 56%, #cbb6ff 78%, #fff 100%); }
  .mock-card, .bt, .pas, .fcard, .plan, .comp-card, .faq-item, .sapt, .legat, .card, .plan.elite-plan {
    background: radial-gradient(70% 55% at 0% 0%, rgba(110, 60, 255, .14), transparent 70%),
      linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .018)), rgba(7, 6, 12, .86);
    border-color: rgba(255, 255, 255, .08); }
  .mock-card { box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 80px rgba(110, 60, 255, .22); }
  .plan.star, .comp-card.co { background: linear-gradient(#0c0a16, #0c0a16) padding-box, var(--grad) border-box; box-shadow: 0 0 40px rgba(110, 60, 255, .25); }
  #primesti, .banda { background: rgba(255, 255, 255, .02); }
  .bara-jos { background: rgba(6, 5, 12, .78); }
  #ref-bara { background: rgba(12, 10, 22, .95); }
  p, li { color: var(--text2); }   /* paginile legale aveau cerneala gri închis bătută în cuie */
  strong, .plan li b, .comp-rand .pret { color: var(--ink); }
  /* ilustrațiile desenate (pistele lor erau lila deschis, bătute în cuie) */
  .upz { border-color: rgba(255, 255, 255, .22); }
  .upb, .lucru .lin, .lucru .led, .cal i.gol, .plan-demo .lin, .vlin .l, .edit-lin i, .sapt-zi.gol .pct { background: var(--st-pista); }
  .sapt-zi.gol .pct { background: transparent; border-color: var(--st-pista); }
  .inel .fond { stroke: var(--st-pista); }
  .yt i { background: rgba(176, 140, 255, .32); }
  .yt i.acc, .edit-lin i.act, .vlin .t { color: var(--accent); }
  .vlin .t, .ct .pachet { background: #15122a; }
  .ct .fir2 { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px); }
  .ct .nod.e { background: #2a2650; }
  .edit-lin i.act::after { background: #fff; }
  .sapt-zi.gol .c, .fer-rand.pal .v { color: var(--muted); }   /* zilele goale din ghiduri (gri deschis bătut în cuie) */
  @keyframes led1 { 0% { background: rgba(255, 255, 255, .12); } 4%, 26% { background: var(--accent); } 30%, 96% { background: var(--good); } 100% { background: rgba(255, 255, 255, .12); } }
  @keyframes led2 { 0%, 30% { background: rgba(255, 255, 255, .12); } 34%, 58% { background: var(--accent); } 62%, 96% { background: var(--good); } 100% { background: rgba(255, 255, 255, .12); } }
  @keyframes led3 { 0%, 62% { background: rgba(255, 255, 255, .12); } 66%, 88% { background: var(--accent); } 92%, 96% { background: var(--good); } 100% { background: rgba(255, 255, 255, .12); } }
}

/* ---- paginile artiștilor (/@nume) și ale lansărilor (bio.py), în același stil (MIXCUT 2026-11-06: «da, și pe alea») ----
   aurora / noaptea vin de sus; aici: avatarul în gradientul campaniei, cardul videoclipului de sticlă (pulsul roșu al
   butonului YouTube rămâne), butoanele rețelelor de sticlă translucidă, WhatsApp verde, logo-ul COLABO jos. */
body.bio { color: var(--ink); }   /* paginile bio aveau cerneala închisă bătută în cuie — noaptea nu se vedea */
body.bio h1 { font-weight: 900; letter-spacing: -.035em; }
body.bio .avatar { background-color: transparent; background-image: var(--grad);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 14px 34px rgba(116, 66, 255, .38); }
body.bio .avatar[style*="background-image"] { box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 0 5px rgba(124, 92, 255, .55), 0 14px 34px rgba(116, 66, 255, .35); }
body.bio .hero { background: var(--card); border-color: rgba(255, 255, 255, .85); }
body.bio .soc { color: var(--ink); background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6) 60%);
  border: 1px solid rgba(70, 48, 255, .12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 #fff, 0 8px 22px rgba(70, 48, 200, .1); }
body.bio .soc:hover { border-color: rgba(91, 61, 245, .45); }
body.bio .soc.wa { color: #05270f; background: #1ede6e; border-color: #1ede6e; box-shadow: 0 0 18px rgba(30, 222, 110, .35); }
body.bio .artist, body.bio .ct { color: var(--text2); }
body.bio .foot { display: flex; align-items: center; justify-content: center; gap: 8px; }
body.bio .foot::before { content: ""; width: 16px; height: 17px; background: url(/betheone-c.webp) center / contain no-repeat; opacity: .75; }
@keyframes puls-chenar { 0%, 100% { border-color: rgba(255, 255, 255, .85); box-shadow: var(--umbra-card); } 50% { border-color: #ff3040; box-shadow: 0 12px 34px rgba(255, 48, 64, .22); } }
@media (prefers-color-scheme: dark) {
  body.bio .avatar { box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 34px rgba(124, 77, 255, .5); }
  body.bio .avatar[style*="background-image"] { box-shadow: 0 0 0 3px rgba(0, 0, 0, .9), 0 0 0 5px rgba(176, 140, 255, .6), 0 0 34px rgba(124, 77, 255, .45); }
  body.bio .hero { border-color: rgba(255, 255, 255, .1); }
  body.bio .soc { color: #fff; background: radial-gradient(120% 140% at 30% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%);
    border-color: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 22px rgba(0, 0, 0, .45); }
  body.bio .soc .si-tiktok { fill: #fff; }   /* glifa TikTok e neagră — noaptea, albă */
  @keyframes puls-chenar { 0%, 100% { border-color: rgba(255, 255, 255, .1); box-shadow: 0 24px 50px rgba(0, 0, 0, .75); } 50% { border-color: #ff3040; box-shadow: 0 12px 34px rgba(255, 48, 64, .3); } }
}

/* ---- «Fă calculul» într-un singur chenar (MIXCUT 2026-11-06: «ca să nu fie 2 chenare, fă-l să fie 1») ----
   «Pe cont propriu» și «Cu COLABO» stau în același chenar, cu marginea în gradientul campaniei: pe calculator una lângă
   alta, despărțite de o linie fină cu «VS» la mijloc; pe telefon una sub alta. Textele și cifrele rămân. */
.comp { gap: 34px; padding: 30px 34px; border-radius: 28px; border: 2px solid transparent;
  background: linear-gradient(rgba(70, 48, 255, .13), rgba(70, 48, 255, .13)) center / 1px calc(100% - 68px) no-repeat padding-box,
    linear-gradient(#fff, #fff) padding-box, var(--grad) border-box;
  box-shadow: 0 18px 44px rgba(116, 66, 255, .16); }
.comp > .comp-card, .comp > .comp-card.co { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; }
.comp-total .suma { white-space: nowrap; }   /* pe telefon, suma nu se rupe; se rupe eticheta */
.comp-vs { position: relative; z-index: 1; box-shadow: 0 0 0 8px #fff, 0 12px 30px rgba(116, 66, 255, .32); }
@media (max-width: 960px) {
  .comp { gap: 22px; padding: 24px 20px; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
}
@media (prefers-color-scheme: dark) {
  .comp { background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) center / 1px calc(100% - 68px) no-repeat padding-box,
      linear-gradient(#0c0a16, #0c0a16) padding-box, var(--grad) border-box;
    box-shadow: 0 0 40px rgba(110, 60, 255, .25); }
  .comp > .comp-card, .comp > .comp-card.co { background: none; border: 0; box-shadow: none; }
  .comp-vs { box-shadow: 0 0 0 8px #0c0a16, 0 0 30px rgba(116, 66, 255, .5); }
}
@media (prefers-color-scheme: dark) and (max-width: 960px) {
  .comp { background: linear-gradient(#0c0a16, #0c0a16) padding-box, var(--grad) border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .cer .lum, .cer i, .btn-accent::after, h1 .acc { animation: none; }
  .cer i { opacity: var(--o, .5); }
}