:root {
  --font-main: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bg: #101a2d;
  --text: #f3f2ed;
  --bg2: #070b12;
  --text-muted: rgba(232,238,252,.72);
  --background: #0b1020;
  --muted: #a8b3c7;
  --surface: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.07);
  --card: rgba(255,255,255,.04);
  --border: #ffffff29;
  --accent: #7c5cff;
  --border-strong: #ffffff3d;
  --accent2: #2bd9ff;
  --input-bg: #ffffff0a;
  --input-border: #665c5c;
  --input-border-focus: #ffffff59;
  --link: rgba(130,190,255,1);
  --link-hover: rgba(170,215,255,1);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 16px 48px rgba(0,0,0,.55);
}

/* generated from DB: sheet_key=app */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');

* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; font-family: var(--font-main); background: radial-gradient(900px 500px at 80% -10%, rgba(124,92,255,.35), transparent 60%), radial-gradient(700px 420px at 10% 10%, rgba(43,217,255,.18), transparent 60%), linear-gradient(180deg, var(--bg), var(--bg2)); color:var(--text); }
a { color:inherit; text-decoration:none; }
.container { max-width:1240px; margin:0 auto; padding:0 20px; }
.navbar { position:sticky; top:0; z-index:999; backdrop-filter: blur(14px); background: rgba(5,7,11,.62); border-bottom:1px solid var(--border); }
.navbar .inner { display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:14px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.02em; }
.brand .dot { width:10px; height:10px; border-radius:999px; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow:0 0 18px rgba(124,92,255,.35); }
.navlinks { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.navlinks a { color:var(--muted); font-size:14px; padding:8px 10px; border-radius:999px; transition: all .15s ease; }
.navlinks a:hover { color:var(--text); background:rgba(255,255,255,.06); }
.navcta { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; border:1px solid var(--border); background: rgba(255,255,255,.04); color:var(--text); font-size:14px; transition: transform .12s ease, background .12s ease, border-color .12s ease; }
.btn:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.btn.primary { border-color: rgba(124,92,255,.55); background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(43,217,255,.35)); box-shadow: 0 12px 30px rgba(124,92,255,.18); }
.btn.ghost { background:transparent; }
.hero { padding:58px 0 22px; }
.hero h1 { margin:0; font-size: clamp(24px, 5vw, 26px); line-height:1.05; letter-spacing:-.02em; }
.hero p { margin:16px 0 0; max-width: 760px; color: var(--muted); font-size: 18px; line-height:1.55; }
.actions { margin-top:22px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.section { padding:32px 0; }
.section h2 { margin:0 0 14px; font-size: 22px; letter-spacing:-.01em; }
.sub { margin:0 0 18px; color:var(--muted); max-width: 820px; line-height:1.55; }
.grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; }
.card { background: linear-gradient(180deg, var(--card), rgba(255,255,255,.02)); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:18px; width:100%; }
.card.soft { box-shadow:none; }
.card h3 { margin:0 0 10px; font-size:16px; }
.card p { margin:0; color:var(--muted); line-height:1.5; font-size:14px; }
.span-12 { grid-column: span 12; }
.span-8 { grid-column: span 8; }
.span-6 { grid-column: span 6; }
.span-4 { grid-column: span 4; }
.span-3 { grid-column: span 3; }
.logo-strip { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.logo-pill { padding:10px 14px; border:1px solid var(--border); border-radius:999px; background: rgba(255,255,255,.03); color: var(--muted); font-size:13px; }
.footer { margin-top:40px; padding:26px 0 40px; border-top:1px solid var(--border); color: var(--muted); font-size:13px; }
.table { width:100%; border-collapse:collapse; }
.table td,.table th { border-bottom:1px solid rgba(255,255,255,.10); padding:10px; text-align:left; font-size:14px; }
.field { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.input, textarea, select { width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.25); color: var(--text); outline:none; }
textarea { min-height:120px; resize:vertical; }
.notice { padding:12px 14px; border:1px solid rgba(43,217,255,.35); border-radius:14px; background: rgba(43,217,255,.08); color: var(--text); }
.notice.error { border-color: rgba(255,80,80,.5); background: rgba(255,80,80,.08); }

@media (max-width: 980px) {
  .span-8,.span-6,.span-4,.span-3 { grid-column: span 12; }
  .navlinks { display:none; }
}