/* Self-hosted variable fonts. The original shipped one static file per weight;
   those blobs did not survive the source repo, so these reuse the variable cuts
   already vendored for the app - one file per family per subset. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/montserrat-400-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('assets/fonts/montserrat-400-800-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/jetbrains-mono-400-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/jetbrains-mono-400-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

html, body { margin: 0; padding: 0; min-height: 100%; background: #04070c; }
body { font-family: 'Montserrat', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #56c2f0; text-decoration: none; }
::selection { background: rgba(182, 244, 74, .28); color: #eef3f9; }

@keyframes sc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .32; } }
@keyframes sc-rise { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }

.stage {
  position: relative; min-height: 100vh; width: 100%; overflow: hidden; color: #eef3f9;
  background:
    radial-gradient(circle at 22% 16%, rgba(51, 115, 119, .20), transparent 34%),
    radial-gradient(circle at 82% 84%, rgba(40, 96, 86, .15), transparent 42%),
    linear-gradient(140deg, #03060a 0%, #07131d 46%, #05090f 100%);
}

.smoke-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.overlay--radial { background: radial-gradient(52% 46% at 50% 38%, rgba(4, 7, 12, .30), transparent 74%); }
.overlay--linear { background: linear-gradient(to bottom, rgba(4, 7, 12, .34) 0%, rgba(4, 7, 12, 0) 20%, rgba(4, 7, 12, 0) 68%, rgba(4, 7, 12, .55) 100%); }

.content {
  position: relative; z-index: 3; min-height: 100vh; display: flex; flex-direction: column;
  padding: 22px clamp(20px, 4vw, 46px) 20px;
}

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 30px; width: auto; display: block; }
.brand-label { font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .24em; color: #6c7888; text-transform: uppercase; }

.status-cluster { display: flex; align-items: center; gap: 9px; }
.chip {
  display: flex; align-items: center; gap: 7px; font: 600 11px 'JetBrains Mono', monospace;
  padding: 6px 11px; border: 1px solid #1f2735; border-radius: 8px; background: rgba(15, 19, 28, .62);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.chip--nocodb { color: #8693a4; }
.chip--nocodb .chip-dot { background: #b6f44a; box-shadow: 0 0 7px #b6f44a; animation: sc-pulse 2.4s infinite; }
.chip--grow { color: #7a8696; }
.chip--grow .chip-dot { background: #56c2f0; box-shadow: 0 0 7px #56c2f0; }
.chip--clock { color: #cdd6e2; min-width: 74px; text-align: center; }

/* hero */
.hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 34px 0; }

.eyebrow {
  display: inline-block; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .28em; text-transform: uppercase;
  color: #b6f44a; background: rgba(182, 244, 74, .10); border: 1px solid rgba(182, 244, 74, .22);
  padding: 6px 14px; border-radius: 999px; animation: sc-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

.wordmark {
  width: min(560px, 66vw); height: auto; display: block; margin: 26px 0 0;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, .55));
  animation: sc-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .06s;
}

.tagline { text-align: center; max-width: 544px; margin: 22px 0 0; animation: sc-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .12s; }
.tagline-1 { font: 600 19px/1.3 'Montserrat', sans-serif; color: #dfe6ef; letter-spacing: -.01em; }
.tagline-2 { font: 500 14px/1.65 'Montserrat', sans-serif; color: #8693a4; margin-top: 8px; }

.actions { width: 100%; max-width: 940px; margin: 38px 0 0; display: flex; flex-direction: column; gap: 14px; }

/* primary tile */
.tile-primary {
  display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: 18px;
  color: #eef3f9; border: 1px solid rgba(182, 244, 74, .34);
  background: linear-gradient(100deg, rgba(182, 244, 74, .10) 0%, rgba(13, 17, 26, .62) 44%);
  box-shadow: 0 10px 40px rgba(182, 244, 74, .07);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: sc-rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .18s;
}
.tile-primary:hover { transform: translateY(-3px); border-color: rgba(182, 244, 74, .62); box-shadow: 0 18px 54px rgba(182, 244, 74, .18); }
.tile-primary-icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: rgba(182, 244, 74, .12); border: 1px solid rgba(182, 244, 74, .30);
}
.tile-primary-text { flex: 1; min-width: 0; }
.tile-primary-kicker { font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .18em; text-transform: uppercase; color: #9bc766; }
.tile-primary-title { font: 800 24px/1.08 'Montserrat', sans-serif; margin-top: 5px; letter-spacing: -.01em; }
.tile-primary-sub { font: 500 13.5px 'Montserrat', sans-serif; color: #8693a4; margin-top: 4px; }
.tile-begin {
  flex-shrink: 0; display: flex; align-items: center; gap: 9px; background: #b6f44a; color: #0a1400;
  font: 800 14px 'Montserrat', sans-serif; padding: 12px 20px; border-radius: 12px;
  box-shadow: 0 6px 20px rgba(182, 244, 74, .28);
}

/* secondary tiles */
.tiles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 14px; }
.tile-secondary {
  display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 16px;
  color: #eef3f9; border: 1px solid #1c2433; background: rgba(12, 16, 24, .60);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
  animation: sc-rise .7s cubic-bezier(.2, .7, .2, 1) both;
}
.tile-secondary:nth-child(1) { animation-delay: .24s; }
.tile-secondary:nth-child(2) { animation-delay: .30s; }
.tile-secondary:nth-child(3) { animation-delay: .36s; }
.tile-secondary:nth-child(4) { animation-delay: .42s; }
.tile-secondary.accent-blue:hover { transform: translateY(-3px); border-color: rgba(86, 194, 240, .5); background: rgba(17, 22, 32, .8); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 22px rgba(86, 194, 240, .1); color: #7ad0f5; }
.tile-secondary.accent-lime:hover { transform: translateY(-3px); border-color: rgba(182, 244, 74, .5); background: rgba(17, 22, 32, .8); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 22px rgba(182, 244, 74, .12); color: #c7f56a; }

.tile-top { display: flex; align-items: flex-start; justify-content: space-between; }
.tile-badge { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.tile-secondary.accent-blue .tile-badge { background: rgba(86, 194, 240, .10); border: 1px solid rgba(86, 194, 240, .22); }
.tile-secondary.accent-lime .tile-badge { background: rgba(182, 244, 74, .10); border: 1px solid rgba(182, 244, 74, .24); }
.tile-arrow { opacity: .5; margin-top: 3px; color: currentColor; }
.tile-kicker { font: 700 9.5px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #6c7888; }
.tile-title { font: 700 16.5px 'Montserrat', sans-serif; margin-top: 7px; letter-spacing: -.01em; color: inherit; }
.tile-sub { font: 500 12.5px/1.45 'Montserrat', sans-serif; color: #8693a4; margin-top: 5px; }

/* footer */
.footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font: 600 9.5px 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: #4d5866;
}
.footer-left { display: flex; align-items: center; gap: 8px; }
.footer-dot { width: 5px; height: 5px; border-radius: 50%; background: #56c2f0; opacity: .8; }