:root{
  --blue-950:#040b16;
  --blue-900:#071426;
  --blue-800:#0b1e3d;
  --blue-700:#0f2a57;

  --gold-500:#CFAE4E;
  --gold-600:#B7912C;

  --text-100:#eaf1ff;
  --text-200:#d7e2ff;
  --text-300:#b9c5e3;
  --text-400:#98a7c7;
  --text-500:#7c8bb0;

  --border-700:#22314f;
  --border-800:#1a2640;
}

body.bg-deep{
  background: linear-gradient(180deg, var(--blue-800), var(--blue-950));
  color: var(--text-100);
}

/* Header */
.logo-img{ height:120px; width:auto; object-fit:contain; }
.logo-mini{ height:40px; width:auto; object-fit:contain; filter: drop-shadow(0 0 6px rgba(207,174,78,.25)); }
.socials .social-link{ color:var(--text-400); opacity:.9; transition:all .2s ease; }
.socials .social-link:hover{ color:var(--gold-500); opacity:1; transform:translateY(-1px); }

/* Hero */
.hero-full{ min-height: 88vh; }
.hero-art{ position:absolute; inset:0; pointer-events:none; }
.hero-art::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(60% 50% at 75% 20%, rgba(15,42,87,.55), transparent 70%),
    radial-gradient(70% 60% at 10% 90%, rgba(15,42,87,.45), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    linear-gradient(180deg, transparent, rgba(0,0,0,.35));
  filter: blur(2px);
}
.hero-art::after{
  content:""; position:absolute; left:55%; top:35%;
  width:700px; height:700px; transform:translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(34,139,230,.18), rgba(34,139,230,.05), transparent 70%);
  mix-blend-mode: screen; border-radius:50%;
}

/* preview ball */
.preview-ball{
  width:320px; height:320px; border-radius:50%;
  margin:0 auto; position:relative;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.15), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.08), transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='1'><stop offset='0%' stop-color='%23CFAE4E' stop-opacity='0.9'/><stop offset='100%' stop-color='%23CFAE4E' stop-opacity='0.4'/></linearGradient></defs><g fill='none' stroke='url(%23g)' stroke-width='2'><path d='M20,100c30,-60 130,-60 160,0c-30,60 -130,60 -160,0z'/><path d='M100,20c60,30 60,130 0,160c-60,-30 -60,-130 0,-160z'/><g stroke-opacity='0.6'><circle cx='100' cy='100' r='78'/><circle cx='100' cy='100' r='58'/><circle cx='100' cy='100' r='38'/></g><g stroke='%238bbcff' stroke-opacity='0.5'><path d='M0,100h200M100,0v200'/></g></g></svg>") center/90% 90% no-repeat,
    radial-gradient(circle at 50% 50%, rgba(19,88,180,.65), rgba(6,20,38,1));
  box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 60px rgba(0,153,255,.2);
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }

.hero-stats span{ color: var(--gold-500); }
.text-gold{ color: var(--gold-500); }

/* Buttons */
.btn-gold{
  --bs-btn-color:#0b1326;
  --bs-btn-bg:var(--gold-500);
  --bs-btn-border-color:var(--gold-500);
  --bs-btn-hover-bg:var(--gold-600);
  --bs-btn-hover-border-color:var(--gold-600);
  --bs-btn-focus-shadow-rgb:207,174,78;
  box-shadow:0 6px 18px rgba(207,174,78,.35);
  border-radius:12px; font-weight:700; letter-spacing:.2px;
}
.btn-outline-gold{
  --bs-btn-color:var(--gold-500);
  --bs-btn-border-color:var(--gold-500);
  --bs-btn-hover-color:#0b1326;
  --bs-btn-hover-bg:var(--gold-500);
  --bs-btn-hover-border-color:var(--gold-500);
  border-radius:12px; font-weight:600; letter-spacing:.15px;
}

/* Utilities */
.soft{ border-radius:12px; border:1px solid var(--border-700); }
.border-secondary-700{ border-color: var(--border-700) !important; }
.border-secondary-800{ border-color: var(--border-800) !important; }
.text-secondary-200{ color:#ced7ee !important; }
.text-secondary-300{ color:var(--text-300) !important; }
.text-secondary-400{ color:var(--text-400) !important; }
.text-secondary-500{ color:var(--text-500) !important; }
.link-muted{ color:var(--text-300); text-decoration:none; }
.link-muted:hover{ color:var(--gold-500); text-decoration:underline; }

/* Badge + pills */
.badge-pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .85rem;
  border:1px solid var(--border-700);
  border-radius:999px;
  background: rgba(10,22,45,.55);
  color: var(--text-300);
  font-size:.9rem;
}
.badge-pill .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--gold-500);
  box-shadow:0 0 0 6px rgba(207,174,78,.12);
}

.pill{
  display:inline-flex; align-items:center;
  padding:.35rem .7rem;
  border:1px solid var(--border-700);
  border-radius:999px;
  color: var(--text-300);
  background: rgba(255,255,255,.02);
  font-size:.85rem;
}

/* Cards */
.glass{ background: rgba(10,22,45,.8); color:#fff; border:1px solid var(--border-700); }
.glass-card{
  background: linear-gradient(180deg, rgba(10,22,45,.55), rgba(10,22,45,.35));
  border: 1px solid var(--border-700);
}
.feature-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  transition: transform .18s ease, border-color .18s ease;
}
.feature-card:hover{
  transform: translateY(-2px);
  border-color: rgba(207,174,78,.35);
}
.icon-bubble{
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background: rgba(207,174,78,.14);
  border: 1px solid rgba(207,174,78,.25);
  color: var(--gold-500);
}
.chip{
  font-size:.75rem; font-weight:700;
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid rgba(207,174,78,.35);
  color: var(--gold-500);
  background: rgba(207,174,78,.08);
}

/* Footer */
footer{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.15)); }

/* Cookies */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(10,22,45,.92), rgba(7,20,38,.92));
  border-top:1px solid var(--border-700);
  z-index:1080;
}

/* Modal close button contrast */
.modal .btn-close{
  filter: invert(1) grayscale(1) brightness(1.2);
  opacity: .8;
}
.modal .btn-close:hover{ opacity: 1; }

@media (max-width:576px){
  .logo-img{ height:90px; }
  .preview-ball{ width:240px; height:240px; }
}