:root {
  --primary: #6a11cb;
  --primary-2: #7b2bc0;
  --primary-3: #5b1aa7;
}

body {
  background-color: #fff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding-top: 64px;
}

footer { font-size: 0.95rem; }

.full-bleed { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; }
.hero { color: #fff; background: radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%), linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 35%, #6e1fb8 60%, var(--primary-3) 100%); position: relative; }
.hero .container { position: relative; z-index: 3; }
.hero .hero-pad { padding-top: 6rem; padding-bottom: 4rem; }
.hero .particles { pointer-events: none; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.25; }
.hero .vignette { position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 160px rgba(0,0,0,0.35); }
.hero .hero-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.35)); opacity: .4; z-index: 2; }
.hero .hero-gradient, .hero .hero-gradient-2, .hero .hero-gradient-3 { position: absolute; filter: blur(80px); opacity: .25; z-index: 0; }
.hero .hero-gradient { width: 380px; height: 380px; border-radius: 50%; background: #a78bfa; top: 10%; left: 5%; }
.hero .hero-gradient-2 { width: 420px; height: 420px; border-radius: 50%; background: #9333ea; bottom: -60px; right: 10%; }
.hero .hero-gradient-3 { width: 320px; height: 320px; border-radius: 50%; background: #7c3aed; top: 30%; right: 40%; }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:140px; z-index:2; background: radial-gradient(120% 100% at 50% 0, rgba(0,0,0,.45), rgba(0,0,0,0)); opacity:.35; }

.orb { width: 140px; height: 140px; border-radius: 50%; position: relative; border: 3px solid rgba(255,255,255,.65); box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 0 40px rgba(255,255,255,.25) inset; }
.orb::before, .orb::after { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.45); animation: spin 14s linear infinite; }
.orb::after { inset: 36px; border-style: solid; opacity: .55; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.cta-group .btn { border-radius: 999px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; font-size: .775rem; }
.btn-white { background:#fff; color:#4b0082; border:1px solid #fff; }
.btn-white:hover { background:#f8f9fa; color:#4b0082; border-color:#f8f9fa; }
.btn-ghost-light { background: transparent; border:1px solid rgba(255,255,255,.45); color:#fff; }
.btn-ghost-light:hover { background:#fff; color:#6a11cb; }

.btn-shine { position: relative; overflow: hidden; isolation: isolate; }
.btn-shine::after { content: ""; position: absolute; top: -120%; left: -40%; width: 60%; height: 340%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 100%); transform: rotate(18deg) translateX(-120%); transition: transform .6s ease-in-out, opacity .3s ease-in-out; pointer-events: none; z-index: 1; opacity: .85; }
.btn-shine:hover::after, .btn-shine:focus-visible::after { transform: rotate(18deg) translateX(220%); }
.btn-shine { transition: box-shadow .2s ease, transform .06s ease; }
.btn-shine:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.18); }
.btn-shine:active { transform: translateY(1px); }

.nav-glass { background: rgba(10, 10, 10, 0.25); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,0.08); }
.nav-glass .navbar-nav .nav-link { color: rgba(255,255,255,.9); }
.nav-glass .navbar-nav .nav-link:hover, .nav-glass .navbar-nav .nav-link:focus { color: #fff; }
.brand-logo { height: 24px; width: auto; display: inline-block; }
@media (min-width: 576px) { .brand-logo { height: 26px; } }
@media (min-width: 768px) { .brand-logo { height: 28px; } }
@media (min-width: 992px) { .brand-logo { height: 32px; } }
@media (min-width: 1200px) { .brand-logo { height: 36px; } }

@media (max-width: 991.98px) { body { padding-top: 56px; } .hero .hero-pad { padding-top: 5rem; padding-bottom: 3rem; } .hero .min-vh-75 { min-height: 60vh; } .hero .cta-group { justify-content: center; } .hero .cta-group .btn { width: 100%; max-width: 280px; } .hero .col-lg-6 { text-align: center; } .orb { width: 96px; height: 96px; } }
@media (max-width: 575.98px) { .hero h1.display-5 { font-size: 2rem; } .hero p { font-size: .95rem; } .hero .cta-group .btn { padding: .6rem 1.1rem; font-size: .72rem; } }