:root {
--bg: #06070A;
--panel: #11141A;
--panel-2: #171B22;
--text: #F5F7FA;
--muted: #A9B2C0;
--line: rgba(255,255,255,0.08);
--signal: #6BA6FF;
--violet: #7A6CFF;
--warm: #E86C52;
--radius: 22px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body {
background: var(--bg);
color: var(--text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3 {
letter-spacing: -0.03em;
line-height: 0.94;
}
p {
color: var(--muted);
line-height: 1.6;
max-width: 42rem;
}
.sv-glass {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(20px);
border-radius: var(--radius);
}
.sv-signal-button {
background: radial-gradient(circle at center, rgba(107,166,255,0.18), rgba(107,166,255,0.04) 50%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.14);
color: var(--text);
border-radius: 999px;
padding: 16px 28px;
transition: transform 600ms var(--ease), box-shadow 600ms var(--ease), border-color 600ms var(--ease);
box-shadow: 0 0 40px rgba(107,166,255,0.08);
}
.sv-signal-button:hover {
transform: translateY(-1px) scale(1.02);
box-shadow: 0 0 80px rgba(107,166,255,0.16);
border-color: rgba(107,166,255,0.35);
}
.sv-section-divider {
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0));
}
.sv-mono {
font-family: "IBM Plex Mono", monospace;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(245,247,250,0.56);
}
.sv-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 1000ms var(--ease), transform 1000ms var(--ease);
}
.sv-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
