:root{
  --bg:#070b10;
  --panel:#0d1420;
  --panel2:#0b1220;
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.72);
  --line:rgba(255,255,255,.10);

  /* culori din fulger */
  --cyan:#59dcfc;
  --cyan2:#30d9f2;
  --teal:#37f1c6;
  --aqua:#94eae9;

  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --r:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 12% 8%, rgba(89,220,252,.14), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(55,241,198,.12), transparent 55%),
    var(--bg);
}
a{color:inherit}
img{max-width:100%; display:block}

.container{width:min(1120px, 92vw); margin:0 auto}

/* HEADER */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(7,11,16,.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:14px 0;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand__logo{
  width:48px;
  height:48px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--line);
  background:#000;
}
.brand__name{font-weight:900; letter-spacing:.2px}
.brand__tag{font-size:12px; color:var(--muted); margin-top:2px}

.nav{display:flex; gap:8px; align-items:center}
.nav__link{
  text-decoration:none;
  color:var(--muted);
  padding:10px 12px;
  border-radius:12px;
}
.nav__link:hover{background: rgba(255,255,255,.06); color:var(--text)}
.nav__cta{
  color:#061018;
  font-weight:900;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
  border: none;
}
.nav__cta:hover{filter:brightness(1.03)}

/* mobile menu button */
.menuBtn{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  cursor:pointer;
}
.menuBtn span{
  display:block;
  width:18px; height:2px;
  background: var(--text);
  margin:5px auto;
  border-radius:2px;
}

/* HERO */
.hero{padding:46px 0 18px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.kicker{
  display:inline-flex;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--muted);
  font-size:12px;
  margin-bottom:12px;
}
.hero__copy h1{
  margin:0 0 12px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height:1.03;
}
.hero__copy p{
  margin:0 0 14px;
  color:var(--muted);
  line-height:1.6;
  font-size:16px;
}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
.chip{
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color:var(--text);
}
.hero__actions{display:flex; gap:10px; flex-wrap:wrap}
.hero__mini{
  margin-top:14px;
  color:var(--muted);
  font-size:14px;
}
.hero__mini a{color:var(--text); opacity:.9}
.hero__mini a:hover{opacity:1; text-decoration:underline}

.hero__media{
  position:relative;
  border-radius: 24px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.03);
}
.hero__media img{
  width:100%;
  height:420px;
  object-fit:cover;
}
.hero__glow{
  position:absolute; inset:-40px;
  background: radial-gradient(closest-side, rgba(89,220,252,.18), transparent 65%);
  pointer-events:none;
}

/* SECTIONS */
.section{padding: 48px 0}
.section--alt{
  background: rgba(255,255,255,.03);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
h2{margin:0 0 10px; font-size:30px}
.sub{margin:0 0 22px; color:var(--muted); line-height:1.6}

/* CARDS PRICING */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.card{
  border:1px solid var(--line);
  border-radius: 22px;
  padding:18px;
  background: rgba(13,20,32,.72);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.card h3{margin:0}
.pill{
  font-size:12px;
  font-weight:900;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  white-space:nowrap;
}
.pill--neutral{color:var(--muted); background: rgba(255,255,255,.03)}
.pill--brand{
  color:#041017;
  border:none;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}

.money{display:flex; align-items:baseline; gap:10px; margin:14px 0 6px}
.money__value{font-size:46px; font-weight:1000; letter-spacing:-.6px}
.money__meta{color:var(--muted); font-weight:800}
.fine{color:var(--muted); margin: 6px 0 14px; font-size:13px}
.list{margin:0; padding-left:18px; color:var(--muted); line-height:1.7}
.list li{margin:6px 0}

.card--featured{
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(89,220,252,.18), transparent 55%),
    rgba(13,20,32,.80);
}
.card--featured2{
  background:
    radial-gradient(900px 220px at 90% 0%, rgba(55,241,198,.16), transparent 55%),
    rgba(13,20,32,.80);
}

/* BUTTONS */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{background: rgba(255,255,255,.08)}
.btn--primary{
  border:none;
  color:#041017;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}
.btn--primary:hover{filter:brightness(1.03)}
.btn--ghost{background: transparent}
.btn--full{width:100%; margin-top:14px}

/* SPLIT / PANELS */
.split{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  align-items:start;
}
.panel{
  border:1px solid var(--line);
  border-radius: 22px;
  padding:18px;
  background: rgba(13,20,32,.60);
}
.panel--brand{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(89,220,252,.18), transparent 60%),
    rgba(13,20,32,.72);
}

.miniForm{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
input, select, textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(89,220,252,.55);
}

.ok{margin-top:10px; color: rgba(55,241,198,.95); font-weight:800; font-size:13px}

/* FORM */
.form{margin-top:12px}
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}
label{display:block; font-size:12px; color:var(--muted); margin:0 0 6px}

/* MINI CARDS */
.miniCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.miniCard{
  border:1px solid var(--line);
  border-radius: 18px;
  padding:14px;
  background: rgba(13,20,32,.55);
  color:var(--muted);
  line-height:1.5;
}

/* FOOTER */
.footer{
  margin-top:30px;
  padding:18px 0;
  border-top:1px solid var(--line);
  background: rgba(7,11,16,.85);
}
.footer__inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.footer__brand{font-weight:1000}
.footer__muted{color:var(--muted); font-size:13px; margin-top:4px}
.footer__links{display:flex; gap:12px; flex-wrap:wrap}
.footer__links a{color:var(--muted); text-decoration:none}
.footer__links a:hover{color:var(--text); text-decoration:underline}

/* RESPONSIVE */
@media (max-width: 980px){
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .miniCards{grid-template-columns:1fr}
  .hero__grid{grid-template-columns:1fr}
  .hero__media img{height:320px}
}

@media (max-width: 760px){
  .menuBtn{display:block}
  .nav{
    position:fixed;
    left:14px; right:14px; top:74px;
    display:none;
    flex-direction:column;
    gap:6px;
    padding:12px;
    border-radius: 18px;
    border:1px solid var(--line);
    background: rgba(13,20,32,.92);
    box-shadow: var(--shadow);
  }
  .nav.isOpen{display:flex}
}
.features{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.feature{
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  background: rgba(13,20,32,.60);
}
.feature h3{margin:10px 0 8px}
.feature p{margin:0; color:var(--muted); line-height:1.6}

.iconDot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
  box-shadow: 0 0 0 6px rgba(89,220,252,.10);
}

.how{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  margin-top:14px;
}

.steps{display:flex; flex-direction:column; gap:12px; margin-top:10px}
.step{display:flex; gap:12px; align-items:flex-start}
.stepNum{
  width:34px; height:34px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  color:#041017;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}
.mutedLine{color:var(--muted); font-size:13px; margin-top:3px}

@media (max-width: 980px){
  .features{grid-template-columns:1fr}
  .how{grid-template-columns:1fr}
}
.cookie{
  position:fixed;
  left:14px; right:14px; bottom:14px;
  display:none;
  z-index:80;
}
.cookie.show{display:block}
.cookie__inner{
  width:min(1120px, 92vw);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(13,20,32,.92);
  box-shadow: var(--shadow);
}
.cookie__text{color:var(--muted); font-size:13px; margin-top:4px; line-height:1.4}
.cookie__actions{display:flex; gap:10px; flex-wrap:wrap}

@media (max-width: 760px){
  .cookie__inner{flex-direction:column; align-items:flex-start}
}
.hero__subtext{
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.hero__cred{
  margin-top: 16px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.hero__cred strong{ color: var(--text); }

.hero__copy h1{
  letter-spacing: -.6px;
}

@media (max-width: 980px){
  .hero__cred{ font-size: 12.5px; }
}

.pageTitle h1 { margin: 0 0 8px; letter-spacing: -0.6px; }
.pageTitle p { margin: 0; opacity: .8; max-width: 70ch; }

.signupGrid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 900px){
  .signupGrid{ grid-template-columns: 1fr; }
}

.signupCard, .infoCard{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

.signupForm__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .signupForm__grid{ grid-template-columns: 1fr; }
}

.signupForm label{ display:block; margin: 10px 0 6px; opacity:.85; font-size: 13px; }
.signupForm input, .signupForm select, .signupForm textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: inherit;
  outline: none;
}
.signupForm input:focus, .signupForm select:focus, .signupForm textarea:focus{
  border-color: rgba(0, 210, 255, .9);
  box-shadow: 0 0 0 4px rgba(0, 210, 255, .12);
}

.signupOk{
  margin-top: 10px;
  min-height: 20px;
  font-weight: 700;
}

.infoCard ul{ margin: 10px 0 0 18px; }
.infoNote{ margin-top: 10px; opacity:.75; font-size: 13px; }
.signupTeaser{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 16px;
}
.signupTeaser h2{ margin: 0 0 8px; }
.signupTeaser p{ margin: 0 0 12px; opacity:.85; }
/* ===========================
   SIGNUP PAGE — Champ palette
   (SCOPED: nu strică restul)
   =========================== */

.signupPage{
  --champ-bg: #0b0c10;
  --champ-panel: rgba(255,255,255,.04);
  --champ-line: rgba(255,255,255,.12);
  --champ-text: rgba(255,255,255,.92);
  --champ-muted: rgba(255,255,255,.70);
  --champ-yellow: #ffcc00;     /* fulger */
  --champ-cyan: #00d2ff;       /* electric */
  --champ-cyan2: rgba(0,210,255,.18);
  --champ-yellow2: rgba(255,204,0,.16);
  color: var(--champ-text);
}

.signupWrap{
  padding: 34px 0 56px;
}

.signupTop{
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 16px;
  align-items: start;
  margin: 12px 0 16px;
}
@media (max-width: 900px){
  .signupTop{ grid-template-columns: 1fr; }
}

.signupTitle{
  margin: 0 0 8px;
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: -0.9px;
  line-height: 1.05;
}
.signupLead{
  margin: 0;
  color: var(--champ-muted);
  max-width: 70ch;
  line-height: 1.6;
}

.signupBadges{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.badge{
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--champ-line);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.badge::after{
  content:"";
  position:absolute; inset:-40% -40% auto auto;
  width:120px; height:120px;
  background: radial-gradient(circle at 30% 30%, var(--champ-yellow2), transparent 60%);
  transform: rotate(20deg);
}

.signupSideCard{
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid var(--champ-line);
  padding: 14px 14px 12px;
  position: relative;
  overflow: hidden;
}
.signupSideCard::before{
  content:"";
  position:absolute; inset:-120px auto auto -120px;
  width: 220px; height: 220px;
  background: radial-gradient(circle at 30% 30%, var(--champ-cyan2), transparent 60%);
  transform: rotate(-10deg);
}
.sideTitle{
  font-weight: 950;
  letter-spacing: -0.4px;
  margin-bottom: 8px;
}
.sideSteps{
  margin: 0 0 10px 18px;
  color: rgba(255,255,255,.84);
  line-height: 1.6;
}
.sideNote{
  color: var(--champ-muted);
  font-size: 13px;
}

.signupCard{
  border-radius: 24px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--champ-line);
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.signupCard::before{
  content:"";
  position:absolute; inset:-200px -180px auto auto;
  width: 320px; height: 320px;
  background: radial-gradient(circle at 35% 35%, var(--champ-yellow2), transparent 62%);
}
.signupCard::after{
  content:"";
  position:absolute; inset:auto auto -220px -220px;
  width: 380px; height: 380px;
  background: radial-gradient(circle at 35% 35%, var(--champ-cyan2), transparent 64%);
}

/* Header inside card */
.cardHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.cardKicker{
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.cardTitle{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.4px;
}
.cardBolt{
  width: 44px; height: 44px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--champ-line);
  position: relative;
}
.cardBolt::before{
  content:"⚡";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 20px;
  color: var(--champ-yellow);
  filter: drop-shadow(0 10px 20px rgba(255,204,0,.22));
}

.signupForm{
  position: relative;
  z-index: 2;
}

.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .grid2{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  margin: 10px 0 6px;
  color: rgba(255,255,255,.74);
  font-size: 13px;
  font-weight: 850;
}

.signupForm input,
.signupForm select,
.signupForm textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.signupForm textarea{
  resize: vertical;
  min-height: 110px;
}

.signupForm input:focus,
.signupForm select:focus,
.signupForm textarea:focus{
  border-color: rgba(0,210,255,.8);
  box-shadow: 0 0 0 5px rgba(0,210,255,.14);
  transform: translateY(-1px);
}

/* Actions row */
.actions{
  display:flex;
  align-items:center;
  gap: 14px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .actions{ flex-direction: column; align-items: stretch; }
}

.btnBolt{
  position: relative;
  width: 320px;
  max-width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,204,0,.30);
  background: linear-gradient(180deg, rgba(255,204,0,1), rgba(255,204,0,.86));
  color: #12121a;
  font-weight: 950;
  letter-spacing: -0.2px;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(255,204,0,.16);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  overflow: hidden;
}
.btnBolt:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 22px 64px rgba(255,204,0,.22);
}
.btnBolt:disabled{
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btnGlow{
  position:absolute;
  inset:-40px -80px auto auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(0,210,255,.28), transparent 62%);
  transform: rotate(18deg);
  pointer-events:none;
}
.btnBolt.isLoading span:first-child{
  opacity: .9;
}
.btnBolt.isLoading::after{
  content:"";
  position:absolute;
  right: 14px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 999px;
  border: 2px solid rgba(18,18,26,.35);
  border-top-color: rgba(18,18,26,.9);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.miniTrust{
  flex: 1;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.84);
}
.miniLine{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.78); }
.miniLine b{ color: rgba(255,255,255,.92); }

.ok{
  margin-top: 10px;
  min-height: 22px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.finePrint{
  margin-top: 10px;
  color: rgba(255,255,255,.60);
  font-size: 12.5px;
  line-height: 1.55;
}
section {
  scroll-margin-top: 90px;
}
#race { scroll-margin-top: 90px; }
/* =========================
   RACE teaser (Acasă) — premium
   ========================= */

.raceTeaser {
  position: relative;
}

.raceTeaser .container {
  max-width: 1000px;
}

.raceTeaser .container.center {
  text-align: left;
  padding: 42px 48px;
  border-radius: 28px;
  background:
    linear-gradient(
      135deg,
      rgba(89,220,252,0.12),
      rgba(89,220,252,0.02) 55%,
      rgba(255,255,255,0.02)
    );
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 20px 50px rgba(0,0,0,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* titlu */
.raceTeaser h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
}

.raceTeaser h2::before {
  content: "⚡";
  font-size: 1.2em;
  line-height: 1;
}

/* text */
.raceTeaser .sub {
  max-width: 70ch;
  margin-bottom: 26px;
  opacity: 0.95;
}

/* buton */
.raceTeaser .btn.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(8px);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.raceTeaser .btn.btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.28);
}

.raceTeaser .btn.btn--ghost::after {
  content: "→";
  opacity: 0.9;
  transform: translateY(1px);
}
/* =========================
   RACE page polish (premium)
   ========================= */

.racePage main {
  position: relative;
  isolation: isolate;
}

/* fundal subtil cu "fulgere" very faded (fără imagini externe) */
.racePage main::before {
  content: "";
  position: absolute;
  inset: -120px 0 0 0;
  z-index: -1;
  opacity: 0.10;
  pointer-events: none;
  background-image:
    radial-gradient(1200px 700px at 12% 20%, rgba(89,220,252,0.22), transparent 60%),
    radial-gradient(900px 520px at 88% 10%, rgba(89,220,252,0.14), transparent 60%),
    radial-gradient(900px 600px at 60% 85%, rgba(89,220,252,0.10), transparent 65%),
    linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
}

/* mic pattern "bolt" (foarte discret) */
.racePage main{
  position: relative;
  z-index: 0;
}

/* RACE background pattern (fulgere) — variantă sigură */
.racePage{
  position: relative;
  isolation: isolate; /* face z-index-urile predictibile */
}

.racePage::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* mai faded */
  opacity: 0.022;

  /* mai dese + mai mici */
  background-size: 96px 96px;
  background-position: 0 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2359dcfc' stroke-width='2.2'%3E%3Cpath d='M68 8 L42 60 H62 L52 112 L88 54 H64 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.racePage .hero h1{
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.racePage .hero__actions{
  gap: 12px;
}
.racePage .hero{
  padding-bottom: 36px;
}
.racePage .section:first-of-type{
  padding-top: 36px;
}

/* HERO mai "elite": un pic mai compact, mai curat */
.racePage .hero {
  padding-top: 56px;
  padding-bottom: 34px;
}

.racePage .hero__copy {
  max-width: 66ch;
}

.racePage .hero .kicker {
  letter-spacing: 0.6px;
  opacity: 0.95;
}

.racePage .hero h1 {
  line-height: 1.05;
  margin-bottom: 14px;
}

.racePage .hero p {
  opacity: 0.95;
}

.racePage .hero__actions {
  gap: 12px;
}

/* Secțiuni: titluri mai așezate, spațiere premium */
.racePage .section {
  padding-top: 64px;
  padding-bottom: 64px;
}

.racePage .section h2 {
  margin-bottom: 10px;
}

.racePage .section .sub {
  max-width: 72ch;
}

/* Panel-uri mai "scumpe" */
.racePage .panel {
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
}

.racePage .panel.panel--brand {
  border-color: rgba(89,220,252,0.20);
  box-shadow: 0 18px 60px rgba(0,0,0,0.30);
}

/* Cards (prețuri): mai consistente */
.racePage .cards {
  align-items: stretch;
}

.racePage .card {
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  transform: translateZ(0);
}

.racePage .card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
}

.racePage .card--featured,
.racePage .card--featured2 {
  border-color: rgba(89,220,252,0.20);
}

/* Preț (money) mai clar, premium */
.racePage .money__value {
  letter-spacing: -0.5px;
}

.racePage .money__meta {
  opacity: 0.9;
}

/* CTA final centrat (dacă ai .center) */
.racePage .center {
  text-align: center;
}
.racePage .center .sub {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile polish */
@media (max-width: 640px) {
  .racePage .section {
    padding-top: 54px;
    padding-bottom: 54px;
  }
  .racePage main::after {
    background-size: 160px 160px;
    opacity: 0.045;
  }
}
/* RACE: hero copy + padding, să nu înceapă lipit de margine */
.raceHero .hero__copy{
  padding-left: 28px;   /* ~ “jumate de cm” */
}
.raceHero + .section{
  padding-top: 40px;
}


/* pe ecrane mari, îi dăm puțin mai mult */
@media (min-width: 1100px){
  .raceHero .hero__copy{
    padding-left: 40px;
  }
}
/* RACE: hero mai înalt ca să nu se vadă secțiunea următoare imediat */
.raceHero{
  padding-bottom: 90px; /* mărește “hero-ul” */
}

/* pe desktop mare, încă puțin */
@media (min-width: 1100px){
  .raceHero{
    padding-bottom: 120px;
  }
}
.raceHero { outline: 6px solid lime; }
.page-race {
  background-image: url("assets/fulgere-bg.png"); /* sau ce ai ales */
  background-repeat: repeat;
  background-size: 300px;
  background-attachment: fixed;
}
html.racePage{
  background: #0b0f14; /* dacă ai deja un dark, lasă-l cum e */
}

html.racePage::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  /* mai faded */
  opacity: 0.022;

  /* mai dese + mai mici */
  background-size: 96px 96px;
  background-position: 0 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2359dcfc' stroke-width='2.2'%3E%3Cpath d='M68 8 L42 60 H62 L52 112 L88 54 H64 Z'/%3E%3C/g%3E%3C/svg%3E");
}


html.racePage body{
  position: relative;
  z-index: 1;
}
/* ===== RACE: fundal cu fulgere (variantă 100% sigură) ===== */
.raceBg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: 0.022;
  background-size: 96px 96px;
  background-position: 0 0;
  background-repeat: repeat;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2359dcfc' stroke-width='2.2'%3E%3Cpath d='M68 8 L42 60 H62 L52 112 L88 54 H64 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* tot conținutul paginii peste fundal */
.racePage header,
.racePage main,
.racePage footer{
  position: relative;
  z-index: 1;
}

/* dacă ai fundal pe body, îl lăsăm, dar fulgerele rămân vizibile peste el */
/* =========================
   HOME — Premium polish
   (override, fără să schimbe texte)
   ========================= */

:root{
  --bg:#060a0f;
  --panel:#0b1220;
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.72);
  --line:rgba(255,255,255,.10);

  --cyan:#59dcfc;
  --teal:#37f1c6;

  --shadow: 0 22px 70px rgba(0,0,0,.45);
  --shadow2: 0 12px 30px rgba(0,0,0,.28);
  --r:22px;
}

html, body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection{ background: rgba(89,220,252,.22); }

a{ text-underline-offset: 3px; }
a:hover{ text-decoration-thickness: 2px; }

.container{ width:min(1160px, 92vw); }

/* Header mai “premium”: puțin mai compact, hover-uri mai fine */
.header{
  background: rgba(7,11,16,.64);
  backdrop-filter: blur(14px);
}
.header__inner{ padding: 12px 0; }
.nav__link{
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav__link:hover{ transform: translateY(-1px); }

.nav__cta{
  box-shadow: 0 14px 34px rgba(55,241,198,.12);
}
.nav__cta:hover{ filter: brightness(1.02); }

/* HERO layout real (acum folosește container + grid) */
.hero{
  padding: 54px 0 26px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 28px;
  align-items: center;
}

.kicker{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.hero__copy{
  max-width: 68ch;
}
.hero__copy h1{
  letter-spacing: -0.9px;
  text-wrap: balance;
}
.hero__copy p{
  font-size: 16.5px;
}

.hero__actions{
  margin-top: 8px;
  gap: 12px;
}

.btn{
  transition: transform .16s ease, background .16s ease, filter .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
}
.btn--primary{
  box-shadow: 0 18px 50px rgba(89,220,252,.14);
}
.btn--primary:hover{
  box-shadow: 0 22px 70px rgba(89,220,252,.18);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
}

.hero__cred{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}

/* HERO media ca “platformă premium” */
.hero__media{
  border-radius: 28px;
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  transform: translateZ(0);
}
.hero__media::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)),
    radial-gradient(900px 420px at 30% 10%, rgba(89,220,252,.18), transparent 60%);
  pointer-events:none;
}
.hero__media img{
  height: 460px;
  filter: saturate(1.05) contrast(1.02);
}
.hero__glow{
  background: radial-gradient(closest-side, rgba(55,241,198,.16), transparent 68%);
}

/* Sections: aerisite + titluri mai elegante */
.section{ padding: 64px 0; }
h2{ font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.3px; }
.sub{ max-width: 78ch; }

/* Cards: mai “scumpe” + hover */
.card, .panel, .feature, .miniCard{
  border-color: rgba(255,255,255,.12);
  background: rgba(13,20,32,.62);
  box-shadow: var(--shadow2);
}
.card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 90px rgba(0,0,0,.52);
}
.money__value{ letter-spacing: -1px; }

/* Feature cards */
.feature{
  transition: transform .18s ease, border-color .18s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(89,220,252,.22);
}

/* Footer un pic mai “clean” */
.footer{
  background: rgba(7,11,16,.78);
}

/* Responsive */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .hero__media img{ height: 340px; }
  .section{ padding: 54px 0; }
}
/* =========================
   PREMIUM++ polish (HOME)
   ========================= */

/* Header: underline glow + nav mai “tight” */
.header{
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(89,220,252,.55), rgba(55,241,198,.45), transparent);
  opacity:.55;
  pointer-events:none;
}

.nav__link{
  font-weight: 800;
  letter-spacing: .1px;
}
.nav__link:not(.nav__cta){
  border: 1px solid transparent;
}
.nav__link:not(.nav__cta):hover{
  border-color: rgba(255,255,255,.10);
}

/* Buttons: mai “platform”, mai clicky */
.btn{
  border-color: rgba(255,255,255,.12);
}
.btn:active{
  transform: translateY(0px) scale(.99);
}
.btn--ghost{
  border-color: rgba(255,255,255,.14);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.06);
}

/* Section separators: gradient fin între blocuri */
.section--alt{
  background:
    radial-gradient(1100px 320px at 15% 10%, rgba(89,220,252,.06), transparent 55%),
    radial-gradient(900px 280px at 85% 40%, rgba(55,241,198,.05), transparent 60%),
    rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Pricing: featured “premium” (lift + glow discret) */
.card--featured,
.card--featured2{
  position: relative;
  border-color: rgba(89,220,252,.22);
}
.card--featured,
.card--featured2{
  box-shadow:
    0 0 0 1px rgba(89,220,252,.35),
    0 22px 70px rgba(0,0,0,.55);
}

.card--featured:hover,
.card--featured2:hover{
  border-color: rgba(89,220,252,.30);
}

/* Pills: mai sharp */
.pill{
  border-color: rgba(255,255,255,.12);
}

/* Links in hero mini: underline subtil */
.hero__mini a{
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.22);
  text-decoration-thickness: 1px;
}
.hero__mini a:hover{
  text-decoration-color: rgba(89,220,252,.55);
}

/* Panels: mai consistente */
.panel--brand{
  border-color: rgba(89,220,252,.18);
}
.iconDot{
  box-shadow: 0 0 0 7px rgba(89,220,252,.09);
}
/* =========================
   PREMIUM TUNE (SAFE)
   Micro-polish, fără să schimbe vibe-ul
   ========================= */

/* 1) Ritm vertical: mai aerisit + mai “designer” */
.section { padding: 64px 0; }
@media (max-width: 980px){
  .section { padding: 54px 0; }
}

/* 2) Titluri și text: ierarhie mai clară, fără schimbări dramatice */
.hero__copy h1 { letter-spacing: -0.8px; line-height: 1.03; }
h2 { letter-spacing: -0.35px; }
.sub { max-width: 78ch; }

/* 3) Header: nav mai “tight” și mai premium la hover */
.nav__link{
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.nav__link:hover{
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.nav__cta{
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
}

/* 4) Butoane: mai “clicky”, dar discret */
.btn{
  border-color: rgba(255,255,255,.12);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
}
.btn:active{ transform: translateY(0) scale(.99); }

/* 5) HERO media: rama mai curată + imagine mai “premium” (foarte subtil) */
.hero__media{
  border-color: rgba(255,255,255,.12);
}
.hero__media img{
  filter: saturate(1.03) contrast(1.01);
}

/* 6) Cards/panels: consistență + hover elegant (fără “glow”) */
.card, .panel, .feature, .miniCard{
  border-color: rgba(255,255,255,.12);
}
.card{
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
}
.feature{
  transition: transform .18s ease, border-color .18s ease;
}
.feature:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
}

/* 7) Pricing: featured să fie “un pic” mai evident, fără efecte ciudate */
.card--featured, .card--featured2{
  border-color: rgba(89,220,252,.20);
}

/* 8) Liste: spacing mai curat */
.list li{ margin: 8px 0; }

/* 9) Mobile menu: mai “app-like” */
@media (max-width: 760px){
  .nav{
    border-color: rgba(255,255,255,.12);
  }
}
/* =========================
   RACE — Premium layout polish (scoped)
   ========================= */

.racePage .container{ width:min(1120px, 92vw); }

/* HERO: mai “platform”, mai aliniat, mai aerisit */
.racePage .hero{
  padding: 64px 0 34px;
}
.racePage .hero__grid{
  gap: 32px;
  align-items: center;
}
.racePage .hero__copy{
  max-width: 68ch;
}
.racePage .hero__copy h1{
  letter-spacing: -0.9px;
  line-height: 1.04;
  margin-bottom: 14px;
}
.racePage .hero__copy p{
  font-size: 16.5px;
  line-height: 1.65;
}
.racePage .hero__actions{
  margin-top: 10px;
  gap: 12px;
}

/* Secțiuni: ritm vertical mai “lux” */
.racePage .section{
  padding: 68px 0;
}
.racePage .section .sub{
  max-width: 80ch;
}

/* Panels & cards: consistență + hover discret, fără glow agresiv */
.racePage .panel,
.racePage .card{
  border-color: rgba(255,255,255,.12);
}
.racePage .panel{
  background: rgba(13,20,32,.62);
}
.racePage .cards{
  gap: 16px;
  align-items: stretch;
}
.racePage .card{
  border-radius: 24px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.racePage .card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.34);
}

/* Preț: mai “premium” la aliniere */
.racePage .money{
  margin: 16px 0 8px;
}
.racePage .money__value{
  letter-spacing: -1px;
}
.racePage .fine{
  margin-top: 6px;
}

/* Liste: spacing mai curat */
.racePage .list li{ margin: 8px 0; }

/* CTA buttons: mai “clicky” */
.racePage .btn{
  border-color: rgba(255,255,255,.12);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, filter .16s ease;
}
.racePage .btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
}
.racePage .btn:active{ transform: translateY(0) scale(.99); }

/* Mobile: mai multă claritate */
@media (max-width: 980px){
  .racePage .hero{ padding: 54px 0 26px; }
  .racePage .section{ padding: 54px 0; }
}
/* RACE — Niveluri în carduri (scoped) */
.racePage .raceLevels{
  margin-top: 16px;
}

.racePage .raceLevels.cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.racePage .raceLevels .card .mutedLine{
  margin: 10px 0 12px;
  font-size: 14px;
}

@media (max-width: 980px){
  .racePage .raceLevels.cards{
    grid-template-columns: 1fr;
  }
}
/* RACE — Final CTA panel (scoped) */
.racePage .raceCta{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.racePage .raceCta .list{
  display: inline-block;
  text-align: left;
  margin: 0;
  padding-left: 18px;
}

.racePage .raceCta__actions{
  margin-top: 14px;
}
/* =========================
   RACE — Editorial Levels (SCOPED)
   nu afectează alte pagini
   ========================= */

.racePage .raceLevelsLayout{
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}

.racePage .raceLevelsGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.racePage .raceTier{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(13,20,32,.58);
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.racePage .raceTier__head{
  padding: 16px 16px 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.racePage .raceTier__title{
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.25px;
}

.racePage .raceTier__lead{
  margin: 0;
  color: rgba(234,242,255,.74);
  line-height: 1.55;
  font-size: 14px;
  max-width: 56ch;
}

.racePage .raceTier__badge{
  font-size: 12px;
  font-weight: 950;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: rgba(234,242,255,.78);
  white-space: nowrap;
  margin-top: 2px;
}

.racePage .raceTier__badge--brand{
  border: none;
  color: #061018;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}

.racePage .raceTier__body{
  padding: 14px 16px 8px;
}

.racePage .raceTier__list{
  margin: 0;
  padding-left: 18px;
  color: rgba(234,242,255,.72);
  line-height: 1.65;
}

.racePage .raceTier__list li{
  margin: 10px 0;
}

.racePage .raceTier__foot{
  margin-top: auto;
  padding: 14px 16px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: rgba(255,255,255,.01);
}

.racePage .raceTier__fitLabel{
  font-size: 12px;
  font-weight: 950;
  color: rgba(234,242,255,.78);
  margin-bottom: 6px;
}

.racePage .raceTier__fitText{
  color: rgba(234,242,255,.72);
  line-height: 1.55;
  font-size: 13.5px;
}

.racePage .raceTier__note{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(234,242,255,.70);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.racePage .raceTier__price{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
}

.racePage .raceTier__priceValue{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -0.8px;
}

.racePage .raceTier__priceMeta{
  color: rgba(234,242,255,.70);
  font-weight: 900;
}

/* Featured (Advanced) — discret, premium */
.racePage .raceTier--featured{
  border-color: rgba(89,220,252,.22);
  box-shadow:
    0 0 0 1px rgba(89,220,252,.12),
    0 16px 46px rgba(0,0,0,.30);
  transform: translateY(-4px);
}

@media (max-width: 980px){
  .racePage .raceLevelsLayout{
    grid-template-columns: 1fr;
  }
  .racePage .raceLevelsGrid{
    grid-template-columns: 1fr;
  }
  .racePage .raceTier--featured{
    transform: none;
  }
}

/* Side panel */
.racePage .raceSide{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(13,20,32,.48);
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  padding: 16px;
  position: sticky;
  top: 92px;
}

.racePage .raceSide__title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.25px;
}

.racePage .raceSide__p{
  margin: 0 0 10px;
  color: rgba(234,242,255,.74);
  line-height: 1.6;
  font-size: 14px;
}

@media (max-width: 980px){
  .racePage .raceSide{
    position: static;
  }
}
/* =========================
   RACE — Layout fix for Levels (SCOPED)
   3 cards sus + panel jos
   ========================= */

.racePage .raceLevelsLayout{
  grid-template-columns: 1fr !important;   /* scoatem side-ul din dreapta */
  gap: 16px;
}

.racePage .raceLevelsGrid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Side panel devine rândul 2, full width */
.racePage .raceSide{
  position: static !important;
  top: auto !important;
  max-width: 980px;
  margin: 0 auto;
}

/* Carduri: mai aerisite, mai ușor de citit */
.racePage .raceTier__head{ padding: 18px 18px 14px; }
.racePage .raceTier__body{ padding: 16px 18px 10px; }
.racePage .raceTier__foot{ padding: 14px 18px 18px; }

.racePage .raceTier__lead{
  font-size: 14.5px
}/* =========================
   RACE — Niveluri ca Abonamente (same feel)
   ========================= */

/* Card look identic cu .card */
.racePage .raceTier{
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(13,20,32,.72);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

/* Hover identic cu .card:hover */
.racePage .raceTier:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  background: rgba(13,20,32,.78);
}

/* Header/footer separators să fie mai “clean”, ca la cards */
.racePage .raceTier__head{
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: transparent;
}
.racePage .raceTier__foot{
  border-top: 1px solid rgba(255,255,255,.10);
  background: transparent;
}

/* Featured = ca .card--featured (subtil, fără artificii) */
.racePage .raceTier--featured{
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(89,220,252,.18), transparent 55%),
    rgba(13,20,32,.80);
  border-color: rgba(89,220,252,.20);
}

/* Badge style ca .pill */
.racePage .raceTier__badge{
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
}
.racePage .raceTier__badge--brand{
  color:#041017;
  border:none;
  background: linear-gradient(90deg, var(--cyan), var(--teal));
}

/* Tipografie: să semene cu cards (nu prea înghesuit) */
.racePage .raceTier__title{
  font-weight: 950;
}
.racePage .raceTier__lead{
  color: var(--muted);
}
.racePage .raceTier__list{
  color: var(--muted);
}
.racePage .raceTier__fitText{
  color: var(--muted);
}

/* Preț: mai “card-like” */
.racePage .raceTier__priceValue{
  font-size: 40px;
  font-weight: 1000;
  letter-spacing: -0.6px;
}
.racePage .raceTier__priceMeta{
  color: var(--muted);
  font-weight: 800;
}

/* Note box (număr limitat) — ca un mini panel */
.racePage .raceTier__note{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
/* =========================
   RACE — polish final (scoped)
   ========================= */

/* 1) Scoatem badge-urile "Nivel" + "Recomandat" */
.racePage .raceTier__badge{
  display: none !important;
}

/* 2) Cardurile un pic mai luminoase + mai premium */
.racePage .raceTier{
  background: rgba(13,20,32,.80) !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 14px 44px rgba(0,0,0,.32) !important;
}

.racePage .raceTier:hover{
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.40) !important;
}

/* 3) Facem cardul 2 și cardul 3 la fel ca "featured" (premium look) */
.racePage .raceLevelsGrid > .raceTier:nth-child(2),
.racePage .raceLevelsGrid > .raceTier:nth-child(3){
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(89,220,252,.18), transparent 55%),
    rgba(13,20,32,.82) !important;
  border-color: rgba(89,220,252,.22) !important;
}

/* 4) Fără "lift" special pe featured (să fie uniform) */
.racePage .raceTier--featured{
  transform: none !important;
}

/* 5) "Cum alegi nivelul potrivit" fără chenar + în stânga */
.racePage .raceSide{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;

  max-width: 72ch !important;
  margin: 18px 0 0 !important;  /* stânga, nu centrat */
  text-align: left !important;
}
/* =========================
   RACE — brighter cards + hover fix (scoped)
   ========================= */

/* Mai luminoase by default */
.racePage .raceTier{
  background: rgba(13,20,32,.88) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.34) !important;
}

/* Premium highlight (card 2 + 3) mai vizibil */
.racePage .raceLevelsGrid > .raceTier:nth-child(2),
.racePage .raceLevelsGrid > .raceTier:nth-child(3){
  background:
    radial-gradient(900px 260px at 12% 0%, rgba(89,220,252,.26), transparent 58%),
    radial-gradient(900px 260px at 88% 0%, rgba(55,241,198,.18), transparent 60%),
    rgba(13,20,32,.90) !important;

  border-color: rgba(89,220,252,.30) !important;
  box-shadow:
    0 0 0 1px rgba(89,220,252,.14),
    0 18px 60px rgba(0,0,0,.38) !important;
}

/* Hover: aplicat EXPLICIT inclusiv pe card 2 */
.racePage .raceTier:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(255,255,255,.30) !important;
  background: rgba(13,20,32,.92) !important;
  box-shadow: 0 22px 78px rgba(0,0,0,.46) !important;
}

/* Hover pentru card 2 + 3 (peste styling-ul lor) */
.racePage .raceLevelsGrid > .raceTier:nth-child(2):hover,
.racePage .raceLevelsGrid > .raceTier:nth-child(3):hover{
  transform: translateY(-4px) !important;
  border-color: rgba(89,220,252,.42) !important;
  box-shadow:
    0 0 0 1px rgba(89,220,252,.20),
    0 26px 90px rgba(0,0,0,.55) !important;
}

/* Asigurăm că hover-ul se simte “clicky” */
.racePage .raceTier{
  cursor: default;
}
/* =========================
   RACE — title as badge + price cyan (scoped)
   ========================= */

/* 1) Titlul ca “buton/badge” */
.racePage .raceTier__title{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 12px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);

  font-weight: 1000;
  letter-spacing: -.2px;
  line-height: 1.1;

  box-shadow: 0 12px 34px rgba(0,0,0,.22);
}

/* Titlul “iese” un pic în evidență la hover pe card */
.racePage .raceTier:hover .raceTier__title{
  border-color: rgba(89,220,252,.28);
  background: rgba(89,220,252,.06);
}

/* 2) Prețul pe cyan (test) */
.racePage .raceTier__priceValue{
  color: var(--cyan);
  text-shadow: 0 10px 30px rgba(89,220,252,.18);
}

/* “lei / lună” puțin mai clar */
.racePage .raceTier__priceMeta{
  color: rgba(234,242,255,.74);
}

/* Opțional: la cardurile 2+3 (premium) titlul să fie și mai “brand” */
.racePage .raceLevelsGrid > .raceTier:nth-child(2) .raceTier__title,
.racePage .raceLevelsGrid > .raceTier:nth-child(3) .raceTier__title{
  border-color: rgba(89,220,252,.22);
  background: rgba(89,220,252,.05);
}
/* =========================
   RACE — price inline fix (scoped)
   ========================= */

/* revenim la culoarea normală */
.racePage .raceTier__priceValue{
  color: var(--text);
  text-shadow: none;
}

/* aliniere preț + unitate, mai compact */
.racePage .raceTier__price{
  justify-content: flex-start;
  gap: 8px;
}

/* "lei / lună" mai apropiat și mai elegant */
.racePage .raceTier__priceMeta{
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
}
/* =========================
   RACE — CTA final: text stânga / buton dreapta
   ========================= */

.racePage .raceCta{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 24px;

  align-items: center;
  text-align: left;

  max-width: 1100px;
  margin: 0 auto;
}

/* textul rămâne aerisit */
.racePage .raceCta h2{
  margin-top: 0;
}

.racePage .raceCta .sub{
  margin-bottom: 12px;
}

/* acțiunea în dreapta */
.racePage .raceCta__actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* butonul să nu pară pierdut */
.racePage .raceCta__actions .btn{
  min-width: 260px;
}

/* Mobile: totul revine frumos pe coloană */
@media (max-width: 900px){
  .racePage .raceCta{
    grid-template-columns: 1fr;
    text-align: left;
  }

  .racePage .raceCta__actions{
    justify-content: flex-start;
    margin-top: 12px;
  }
}
/* =========================
   RACE — CTA final polish (scoped)
   ========================= */

/* panel: mai “tight”, mai premium */
.racePage .raceCta{
  padding: 34px 38px;
  border-radius: 28px;
}

/* grid mai echilibrat: dreapta mai îngustă, ca să nu pară goală */
.racePage .raceCta{
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
}

/* pe dreapta: bloc compact, aliniat frumos */
.racePage .raceCta__actions{
  justify-content: flex-start;      /* nu mai fuge */
  align-self: start;
  margin-top: 6px;
}

/* butonul: să stea “ancorat” și să fie consistent */
.racePage .raceCta__actions .btn{
  width: 100%;
  min-width: 0;
  max-width: 340px;
}

/* textul mic (mutedLine) să se așeze sub buton, nu să plutească aiurea */
.racePage .raceCta .mutedLine{
  max-width: 52ch;
}

/* bullets: puțin mai aproape și mai “curate” */
.racePage .raceCta .list{
  margin-top: 8px;
}
.racePage .raceCta .list li{
  margin: 10px 0;
}

/* =========================
   OFFSET SCROLL HEADER
   ========================= */

#antrenamente { scroll-margin-top: 10px; }
#tabere       { scroll-margin-top: 30px; }
#evenimente   { scroll-margin-top: 100px; }
#inscriere    { scroll-margin-top: 120px; }
/* =========================
   RACE — fade background bolts a bit more
   ========================= */

.racePage .raceBg,
html.racePage::before{
  opacity: 0.003 !important; /* era ~0.001 */
}
/* ===== FUNDAL GENERAL (Acasă, Signup, Contact) ===== */
.pageBg {
  position: relative;
}

.pageBg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  opacity: 0.022;

  background-size: 96px 96px;
  background-position: 0 0;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2359dcfc' stroke-width='2.2'%3E%3Cpath d='M68 8 L42 60 H62 L52 112 L88 54 H64 Z'/%3E%3C/g%3E%3C/svg%3E");
}