:root {
    /* ── App palette ── */
    --m-bg:       #03060f;
    --m-card:     #060d1a;
    --m-card2:    #071220;
    --m-border:   #0d2a3a;
    --m-border2:  #0a3a1a;
    --m-green:    #00ff9d;
    --m-green2:   #00e676;
    --m-green3:   #69ffb0;
    --m-blue:     #00b4ff;
    --m-blue2:    #0077cc;
    --m-blue3:    #40c4ff;
    --m-cyan:     #00e5ff;
    --m-dim:      #3a6e7a;
    --m-text:     #b2e8f0;
    --m-text2:    #7ecfdc;
    --m-glow-g:   rgba(0,255,157,0.12);
    --m-glow-b:   rgba(0,180,255,0.12);
    /* ── Landing page palette (aliases + extras) ── */
    --bg-deep:    #03060f;
    --bg-card:    #060d1a;
    --border:     #0d2a3a;
    --text-bright:#e0f7fa;
    --text-dim:   #7b9ca8;
    --accent-cyan:#00e5ff;
    --accent-green:#00ff9d;
    --accent-blue:#00b4ff;
}

body, .q-page, .nicegui-content {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
    font-family: 'Courier New', 'Consolas', monospace !important;
}

/* ── Header ── */
.q-header {
    background: #010810 !important;
    border-bottom: 1px solid var(--m-border) !important;
    box-shadow: 0 2px 20px var(--m-glow-b) !important;
}

/* ── Cards ── */
.q-card {
    background: var(--m-card) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text) !important;
    box-shadow: 0 2px 12px var(--m-glow-b) !important;
}

/* ── Stepper ── */
.q-stepper {
    background: transparent !important;
    border: 1px solid var(--m-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 24px var(--m-glow-b) !important;
}
/* Inactive tabs: visible grey-blue so they're readable */
.q-stepper__tab { color: #7a9aaa !important; }
.q-stepper__tab .q-stepper__dot span {
    background: #1a3a4a !important;
    color: #7a9aaa !important;
}
/* Done (completed) tabs: muted green */
.q-stepper__tab--done .q-stepper__label { color: var(--m-green2) !important; }
.q-stepper__tab--done .q-stepper__dot span {
    background: var(--m-green2) !important;
    color: #000 !important;
}
/* Active tab */
.q-stepper__tab--active .q-stepper__label { color: var(--m-cyan) !important; }
.q-stepper__dot span {
    background: var(--m-border) !important;
    color: var(--m-dim) !important;
}
.q-stepper__tab--active .q-stepper__dot span {
    background: var(--m-blue) !important;
    color: #000 !important;
}
.q-stepper__step-inner { background: var(--m-card) !important; }

/* ── Tables ── */
.q-table {
    background: var(--m-card) !important;
    color: var(--m-text) !important;
}
.q-table__top, .q-table__bottom {
    background: var(--m-card2) !important;
    color: var(--m-text) !important;
}
thead tr th {
    background: #04111e !important;
    color: var(--m-blue3) !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    border-bottom: 1px solid var(--m-border) !important;
}
tbody tr:hover td { background: #071828 !important; }
td { color: var(--m-text) !important; }

/* ── Inputs / Selects ── */
.q-field__control {
    background: #071520 !important;
    border: 1px solid rgba(0,180,255,0.25) !important;
    border-radius: 4px !important;
}
.q-field--outlined .q-field__control:before,
.q-field--outlined .q-field__control:after {
    border-color: rgba(0,180,255,0.28) !important;
}
.q-field--focused .q-field__control,
.q-field--focused .q-field__control:before {
    border-color: var(--m-cyan) !important;
    box-shadow: 0 0 0 1px var(--m-cyan) !important;
}
.q-field__native,
.q-field__input,
.q-field__prefix,
.q-field__suffix,
input,
textarea {
    color: var(--m-text) !important;
    caret-color: var(--m-cyan) !important;
}
/* Dropdown arrow and append icons */
.q-field__append .q-icon,
.q-select__dropdown-icon,
.q-field__append svg {
    color: var(--m-text) !important;
    opacity: 1 !important;
}
.q-field__label { color: var(--m-text2) !important; }
.q-field__bottom { color: var(--m-dim) !important; }

/* Inner padding for input fields so text doesn't touch borders */
.q-field__control-container {
    padding: 0 10px !important;
}
.q-field__native, .q-field__input {
    padding: 4px 10px !important;
}

/* Select popup */
.q-menu { background: #04111e !important; border: 1px solid var(--m-border) !important; }
.q-item { color: var(--m-text) !important; }
.q-item:hover, .q-item--active { background: #071828 !important; color: var(--m-cyan) !important; }

/* ── Checkboxes ── */
.q-checkbox__bg { border-color: var(--m-blue) !important; }
.q-checkbox__inner--truthy .q-checkbox__bg { background: var(--m-blue) !important; }
.q-checkbox__label { color: var(--m-text) !important; }

/* ── Progress / Spinner ── */
.q-linear-progress__track { background: var(--m-border) !important; }
.q-linear-progress__model { background: var(--m-blue) !important; }
.q-spinner { color: var(--m-cyan) !important; }

/* ── Buttons ── */
.q-btn--outline { border-color: var(--m-blue) !important; color: var(--m-blue3) !important; }
/* Force black text on bright accent/green/positive buttons for readability */
.q-btn.bg-accent,
.q-btn.bg-accent .q-btn__content,
.q-btn.bg-accent .q-icon,
.q-btn.bg-positive,
.q-btn.bg-positive .q-btn__content,
.q-btn.bg-positive .q-icon {
    color: #000 !important;
}

/* ── Tree ── */
.q-tree__node-header { color: var(--m-text) !important; }
.q-tree__node-header:hover { background: var(--m-glow-b) !important; }
.q-tree__arrow { color: var(--m-blue) !important; }

/* ── Badges ── */
.q-badge { font-family: monospace !important; }

/* ── Dialogs ── */
.q-dialog__inner > .q-card {
    border: 1px solid var(--m-blue) !important;
    box-shadow: 0 0 32px var(--m-glow-b) !important;
}

/* Tailwind utility overrides */
.text-slate-800, .text-slate-700 { color: var(--m-text) !important; }
.text-slate-600, .text-slate-500 { color: var(--m-text2) !important; }
.text-slate-400 { color: var(--m-dim) !important; }
.text-blue-600, .text-blue-700   { color: var(--m-blue3) !important; }
.text-teal-600                   { color: var(--m-cyan) !important; }
.text-purple-600                 { color: var(--m-green3) !important; }
.text-indigo-600, .text-indigo-700 { color: var(--m-blue3) !important; }
.text-green-600                  { color: var(--m-green2) !important; }
.font-mono                       { color: var(--m-green) !important; }

/* ── Sidebar drawer ── */
.q-drawer { background: var(--m-card) !important; border-right: 1px solid var(--m-border) !important; }
.q-tabs--vertical .q-tab { justify-content: flex-start !important; padding-left: 16px !important; }
.q-tab { color: var(--m-text2) !important; }
.q-tab--active { background: rgba(0,180,255,0.12) !important; color: var(--m-cyan) !important; }
.q-tab__label { font-size: 13px !important; font-family: monospace !important; }
.q-tab-panels { background: transparent !important; }

/* ── Nav links (sidebar pages) ── */
.nav-link { border-radius: 4px !important; }
.nav-link-active {
    background: rgba(0,180,255,0.12) !important;
    color: var(--m-cyan) !important;
}

/* ── Menus ── */
.q-menu .q-item { color: var(--m-text) !important; }
.q-menu .q-item:hover { background: var(--m-glow-b) !important; }

/* ════════════════════════════════════════════════════════════════
   Landing page styles
   ════════════════════════════════════════════════════════════════ */

/* Font override scoped to landing wrapper — target all descendants explicitly
   so it beats the monospace !important on body/.q-page/.nicegui-content */
.landing-page,
.landing-page * {
    font-family: 'Inter', sans-serif !important;
}
/* Restore Material Icons font — the * override above kills icon glyphs */
.landing-page .q-icon,
.landing-page .material-icons,
.landing-page .material-icons-outlined,
.landing-page .material-icons-round,
.landing-page .material-symbols-outlined {
    font-family: 'Material Icons' !important;
}

/* ── Gradient text ── */
.grad-text {
    background: linear-gradient(135deg, #00e5ff 0%, #00ff9d 50%, #e0f7fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Bento cards ── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.bento-card:hover {
    border-color: var(--card-color, var(--border));
    box-shadow: 0 0 30px var(--card-glow, transparent);
}

/* ── Glass card ── */
/* Must use !important on every prop to beat the global .q-card { ... !important } rule */
.glass-card {
    background: rgba(8,18,36,0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0,229,255,0.22) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 40px rgba(0,229,255,0.05) !important;
    color: var(--text-bright) !important;
}

/* ── Pill badge ── */
.pill-badge {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid rgba(0,229,255,0.25);
    color: var(--accent-cyan);
    background: rgba(0,229,255,0.06);
}

/* ── Glow behind hero ── */
.hero-glow {
    position: absolute;
    width: 700px; height: 700px;
    top: -250px; left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle,
        rgba(0,229,255,0.08) 0%,
        rgba(0,255,157,0.04) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ── Stat bar ── */
.stat-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 28px;
    padding: 20px 0;
}
.stat-bar span {
    font-size: 13px;
    color: var(--text-dim);
    font-weight: 500;
}
.stat-bar strong {
    color: var(--text-bright);
    font-weight: 700;
}

/* ── Section label ── */
.section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 8px;
}

/* ── CTA box ── */
.cta-box {
    position: relative;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 56px 40px;
    text-align: center;
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(0,229,255,0.12),
        0 0 60px rgba(0,229,255,0.06);
}

/* ── Full-width sections ── */
.full-width-section {
    width: 100%;
    box-sizing: border-box;
}

/* ── Demo input override ── */
#input-demo-repo .q-field__control {
    border-radius: 8px !important;
    background: rgba(10,28,56,0.95) !important;
}
#input-demo-repo .q-field__control:before,
#input-demo-repo .q-field__control:after {
    border-color: rgba(0,229,255,0.4) !important;
}
#input-demo-repo .q-field__control:hover:before,
#input-demo-repo .q-field__control:focus-within:before,
#input-demo-repo .q-field__control:hover:after,
#input-demo-repo .q-field__control:focus-within:after {
    border-color: var(--accent-cyan) !important;
}
#input-demo-repo input {
    color: #e0f7fa !important;
    font-size: 14px !important;
}
#input-demo-repo input::placeholder {
    color: #587a88 !important;
    opacity: 1 !important;
}

/* ── Waitlist input override ── */
#input-waitlist-email .q-field__control {
    border-radius: 8px !important;
    background: rgba(10,28,56,0.95) !important;
}
#input-waitlist-email .q-field__control:before,
#input-waitlist-email .q-field__control:after {
    border-color: rgba(0,229,255,0.3) !important;
}
#input-waitlist-email .q-field__control:hover:before,
#input-waitlist-email .q-field__control:focus-within:before,
#input-waitlist-email .q-field__control:hover:after,
#input-waitlist-email .q-field__control:focus-within:after {
    border-color: var(--accent-green) !important;
}
#input-waitlist-email input {
    color: #e0f7fa !important;
    font-size: 14px !important;
}
#input-waitlist-email input::placeholder {
    color: #587a88 !important;
    opacity: 1 !important;
}

/* ── Landing responsive (legacy, kept for fallback) ── */
@media (max-width: 768px) {
    .bento-grid { grid-template-columns: 1fr; }
    .hero-glow { width: 400px; height: 400px; top: -150px; }
    .cta-box { padding: 36px 20px; }
    .bot-split { flex-direction: column !important; }
    .bot-split > div { min-width: 100% !important; }
    .landing-kpi-row { flex-direction: column !important; }
    .landing-kpi-row > * { min-width: 100% !important; }
}
@media (max-width: 480px) {
    .landing-page h1 { font-size: 28px !important; letter-spacing: -1px !important; }
    .landing-page h2 { font-size: 24px !important; }
    .stat-bar { gap: 6px 16px; }
    .stat-bar span { font-size: 12px; }
}

/* ── Hero mesh / grid-line background ── */
.hero-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0,229,255,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 45% 45% at 82% 72%, rgba(0,255,157,0.05) 0%, transparent 60%),
        radial-gradient(ellipse 35% 35% at 18% 85%, rgba(180,122,255,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.hero-grid-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,229,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,229,255,0.025) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* ── Feature chips in hero ── */
.feature-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(0,229,255,0.18);
    background: rgba(0,229,255,0.05);
    color: var(--text-dim);
    white-space: nowrap;
}

/* ── Scroll-reveal: layer cards ── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
.anim-card {
    opacity: 0;
    transform: translateY(32px);
}
.anim-card.revealed {
    animation: fadeSlideUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.anim-card-delay-1 { animation-delay: 0.12s; }
.anim-card-delay-2 { animation-delay: 0.24s; }
.anim-card-delay-3 { animation-delay: 0.36s; }

/* ── Scroll-reveal: step items ── */
.step-item {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1),
                transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.step-item.revealed { opacity: 1; transform: translateY(0) scale(1); }
.step-delay-1 { transition-delay: 0.15s; }
.step-delay-2 { transition-delay: 0.30s; }

/* ── Step connector line ── */
.step-connector {
    width: 60px; height: 1px;
    background: rgba(0,229,255,0.15);
    position: relative; overflow: hidden; flex-shrink: 0; margin-top: -40px;
}
.step-connector::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-green));
    transform: translateX(-100%);
    transition: transform 0.8s ease 0.3s;
}
.steps-revealed .step-connector::after { transform: translateX(0); }

/* ── Layer card hover ── */
.layer-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.layer-card:hover { transform: translateY(-4px) scale(1.01); }

/* ── FAQ accordion ── */
.faq-section .q-expansion-item {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
    background: var(--bg-card) !important;
    overflow: hidden;
}
.faq-section .q-expansion-item .q-item {
    color: var(--text-bright) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 16px 20px !important;
}
.faq-section .q-expansion-item__content {
    padding: 0 20px 18px !important;
    color: var(--text-dim) !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
}

/* ── Responsive: hero + steps ── */
@media (max-width: 900px) {
    .hero-split { flex-direction: column !important; }
    .hero-split > * { width: 100% !important; min-width: 0 !important; }
    .step-connector { display: none !important; }
    .steps-row { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; }
    .step-item { min-width: 100% !important; }
}

/* ── Animated gradient border on demo card ── */
@keyframes borderGlow {
    0%   { border-color: rgba(0,229,255,0.22); box-shadow: 0 0 20px rgba(0,229,255,0.05); }
    50%  { border-color: rgba(0,255,157,0.30); box-shadow: 0 0 30px rgba(0,255,157,0.08); }
    100% { border-color: rgba(0,229,255,0.22); box-shadow: 0 0 20px rgba(0,229,255,0.05); }
}
.glass-card-animated {
    background: rgba(8,18,36,0.85) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0,229,255,0.22) !important;
    border-radius: 16px !important;
    color: var(--text-bright) !important;
    animation: borderGlow 4s ease-in-out infinite !important;
}

/* ── Glow pulse on waitlist button ── */
@keyframes glowPulse {
    0%   { box-shadow: 0 0 8px rgba(0,255,157,0.3); }
    50%  { box-shadow: 0 0 20px rgba(0,255,157,0.5), 0 0 40px rgba(0,255,157,0.15); }
    100% { box-shadow: 0 0 8px rgba(0,255,157,0.3); }
}
.btn-glow-pulse {
    animation: glowPulse 2.5s ease-in-out infinite;
}