@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --lb-bg:#070913;
  --lb-bg-2:#0b0e1a;
  --lb-panel:#0f1322;
  --lb-panel-2:#111728;
  --lb-text:#f8f9ff;
  --lb-muted:#9199ad;
  --lb-pink:#f43aa7;
  --lb-pink-2:#ff74c8;
  --lb-blue:#3d7bff;
  --lb-cyan:#52d9ff;
  --lb-line:rgba(255,255,255,.09);
  --lb-line-strong:rgba(255,255,255,.14);
  --lb-grad:linear-gradient(120deg,#f43aa7 0%,#8d57ff 48%,#3d7bff 100%);
  --container:1240px;
  --padx:clamp(1rem,3vw,2.2rem);
  --radius:24px;
  --text:var(--lb-text);
  --muted:var(--lb-muted);
  --grad:var(--lb-grad);
  --border-soft:var(--lb-line);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--lb-bg)}
body{margin:0;background:var(--lb-bg);color:var(--lb-text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
::selection{background:rgba(244,58,167,.36);color:#fff}

body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:
radial-gradient(900px 500px at -10% 5%,rgba(244,58,167,.14),transparent 64%),
radial-gradient(860px 520px at 105% 18%,rgba(61,123,255,.13),transparent 62%),
linear-gradient(180deg,#080a14 0%,#070913 50%,#070913 100%)}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.20;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 70%)}

/* Navigation */
.od-navbar{position:fixed;z-index:1000;top:0;left:0;right:0;height:82px;display:flex;align-items:center;gap:1rem;padding:0 max(1.1rem,calc((100vw - 1320px)/2));background:rgba(7,9,19,.62);border-bottom:1px solid transparent;backdrop-filter:blur(18px);transition:.28s ease}
.od-navbar.scrolled{height:70px;background:rgba(7,9,19,.91);border-bottom-color:var(--lb-line);box-shadow:0 18px 60px rgba(0,0,0,.28)}
.od-nav-brand{display:flex;align-items:center;gap:.75rem;min-width:max-content;font-family:"Space Grotesk",sans-serif;font-size:1rem;font-weight:700;letter-spacing:-.02em}
.lb-brand-logo{width:48px;height:48px;object-fit:cover;border-radius:15px;border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px rgba(244,58,167,.12)}
.od-nav-brand span{font-size:1rem}
.od-nav-links{display:flex;align-items:center;justify-content:center;gap:.1rem;margin:auto}
.od-nav-links a{position:relative;padding:.8rem .72rem;color:#a7adbd;font-size:.78rem;font-weight:700;transition:.2s ease;white-space:nowrap}
.od-nav-links a:hover,.od-nav-links a.active{color:#fff}
.od-nav-links a.active:after{content:"";position:absolute;left:.72rem;right:.72rem;bottom:.46rem;height:2px;border-radius:99px;background:var(--lb-grad)}
.od-nav-actions{display:flex;align-items:center;gap:.55rem;min-width:max-content}
.od-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:42px;padding:.66rem 1rem;border-radius:12px;border:1px solid var(--lb-line-strong);background:rgba(255,255,255,.035);color:#fff;font-size:.83rem;font-weight:800;transition:.2s ease;cursor:pointer}
.od-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.od-btn.primary,.od-nav-actions .od-btn:first-child:last-child{border-color:transparent;background:var(--lb-grad);box-shadow:0 12px 30px rgba(94,82,255,.22)}
.od-btn.primary:hover{filter:brightness(1.08);box-shadow:0 18px 38px rgba(244,58,167,.18),0 15px 35px rgba(61,123,255,.16)}
.od-nav-toggle{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--lb-line);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;cursor:pointer}
.od-chip{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 .35rem;border-radius:999px;background:rgba(255,255,255,.1)!important;border:0!important;font-size:.7rem}

/* Shared panels / pages */
main{min-height:calc(100vh - 80px)}
.od-card,.card,.subcard{background:linear-gradient(150deg,rgba(18,23,40,.88),rgba(10,13,24,.91));border:1px solid var(--lb-line);border-radius:20px;box-shadow:0 22px 70px rgba(0,0,0,.18)}
.od-badge{display:inline-flex;align-items:center;gap:.55rem;padding:.42rem .75rem;border:1px solid rgba(244,58,167,.22);border-radius:999px;background:rgba(244,58,167,.08);color:#fce9f6;font-weight:800;font-size:.78rem}
.page-title,.hero-title,.card-title,h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;color:#fff}
.page-title{letter-spacing:-.04em}.muted,.hero-sub{color:var(--lb-muted)}
.btn-neon{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:12px;background:var(--lb-grad);color:#fff;font-weight:800;padding:.72rem 1rem;box-shadow:0 12px 30px rgba(61,123,255,.16)}
.input{background:#0b0e18!important;color:#fff!important;border-color:var(--lb-line)!important}

/* Footer */
.od-footer{position:relative;border-top:1px solid var(--lb-line);background:#080a13}
.od-footer .inner{max-width:1240px;margin:auto;padding:1.35rem var(--padx);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#7f879a;font-size:.82rem}
.od-footer a{color:#aeb5c5}.od-footer a:hover{color:#fff}

@media(max-width:1120px){
  .od-nav-links{gap:0}.od-nav-links a{padding-inline:.52rem;font-size:.73rem}.od-nav-actions .od-btn{padding-inline:.75rem}.od-nav-brand span{display:none}
}
@media(max-width:900px){
  .od-navbar{height:70px;padding:0 1rem}.od-nav-toggle{display:grid;place-items:center}.od-nav-links{position:absolute;display:none;top:calc(100% + .65rem);left:1rem;right:1rem;margin:0;padding:.6rem;flex-direction:column;align-items:stretch;background:rgba(9,12,23,.98);border:1px solid var(--lb-line);border-radius:18px;box-shadow:0 25px 70px rgba(0,0,0,.45)}
  .od-nav-links.open{display:flex}.od-nav-links a{font-size:.84rem;padding:.85rem .9rem;border-radius:10px}.od-nav-links a:hover,.od-nav-links a.active{background:rgba(255,255,255,.05)}.od-nav-links a.active:after{display:none}
  .od-nav-actions{margin-left:auto}.od-nav-actions .od-btn{font-size:0;width:44px;padding:0}.od-nav-actions .od-btn i{font-size:.95rem}.lb-brand-logo{width:44px;height:44px}
}
@media(max-width:560px){.od-nav-actions .od-btn:not(:last-child){display:none}.od-footer .inner{align-items:flex-start;flex-direction:column}}