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

:root {
    --bg-deep: #020617;
    --bg-surface: #081225;
    --line-subtle: rgba(148, 163, 184, 0.16);
    --accent-cyan: #06b6d4;
    --text-main: #e2e8f0;
    --text-muted: #94a3b8;
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    color: var(--text-main);
    background:
        radial-gradient(circle at 12% 8%, rgba(6, 182, 212, 0.14), transparent 32%),
        radial-gradient(circle at 84% 18%, rgba(59, 130, 246, 0.12), transparent 34%),
        linear-gradient(120deg, #020617 0%, #081126 45%, #030712 100%);
}

.display-face {
    font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
}

.mono-face {
    font-family: 'Chakra Petch', 'Segoe UI', sans-serif;
    letter-spacing: 0.02em;
}

.signal-panel {
    background: linear-gradient(180deg, rgba(8, 18, 37, 0.92), rgba(2, 6, 23, 0.88));
    border: 1px solid var(--line-subtle);
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.45);
}

.panel-lift {
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.panel-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(2, 6, 23, 0.5);
    border-color: rgba(6, 182, 212, 0.45);
}

.plan-feature {
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}