/* Font loaded via preload link in HTML — no render-blocking @import */
:root {
--bg: #000000;
--bg-card: #0a0a0a;
--bg-elevated: #111111;
--text: #f5f5f7;
--text-secondary: #86868b;
--accent: #ffd700;
--accent-dim: rgba(255, 215, 0, 0.12);
--border: #1d1d1f;
--green: #30d158;
--red: #ff453a;
--radius: 16px;
--max-w: 1080px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* ─── SKIP LINK ─── */
.skip-link {
position: absolute;
top: -100%;
left: 16px;
z-index: 200;
background: var(--accent);
color: #000;
padding: 8px 20px;
border-radius: 0 0 8px 8px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: top 0.15s;
}
.skip-link:focus {
top: 0;
}
/* ─── SCREEN READER ONLY ─── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
font-size: 17px;
line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }
/* ─── NAV ─── */
.nav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
}
.nav-logo {
font-size: 1.15rem;
font-weight: 800;
letter-spacing: -0.5px;
}
.nav-logo span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
font-size: 0.82rem;
color: var(--text-secondary);
transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
font-size: 0.8rem !important;
color: var(--bg) !important;
background: var(--accent);
padding: 6px 16px;
border-radius: 980px;
font-weight: 600;
transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.88; }
.nav-mobile { display: none; cursor: pointer; background: none; border: none; color: var(--text); font-size: 1.5rem; }
/* ─── HERO ─── */
.hero {
padding: 120px 24px 100px;
text-align: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--accent-dim);
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 980px;
padding: 6px 20px;
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 32px;
}
.hero h1 {
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
max-width: 820px;
margin: 0 auto 24px;
}
.hero h1 .gold { color: var(--accent); }
.hero-sub {
font-size: 1.15rem;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto 48px;
line-height: 1.7;
}
.hero-sub strong { color: var(--text); }
/* ─── BUTTONS ─── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
border-radius: 980px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s;
border: none;
}
.btn-gold {
background: var(--accent);
color: #000;
}
.btn-gold:hover {
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.25);
transform: translateY(-1px);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text);
}
.btn-outline:hover {
border-color: var(--text-secondary);
}
.cta-group {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* ─── SECTIONS ─── */
section {
padding: 100px 24px;
}
section.bordered {
border-top: 1px solid var(--border);
}
.section-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: var(--accent);
margin-bottom: 16px;
}
.section-title {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 20px;
max-width: 720px;
}
.section-desc {
font-size: 1.05rem;
color: var(--text-secondary);
max-width: 620px;
line-height: 1.7;
margin-bottom: 48px;
}
.centered { text-align: center; }
.centered .section-title,
.centered .section-desc { margin-left: auto; margin-right: auto; }
/* ─── GRID CARDS ─── */
.grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.card {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 36px;
transition: border-color 0.3s;
}
.card:hover { border-color: #333; }
.card-icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--accent-dim);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 20px;
}
.card h3 {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 10px;
}
.card p {
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.6;
}
/* ─── LOGO BAR ─── */
.logo-bar {
padding: 48px 24px;
text-align: center;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.logo-bar-label {
font-size: 0.75rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 24px;
}
.logo-bar-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 48px;
flex-wrap: wrap;
}
.logo-bar-logos span {
font-size: 0.95rem;
font-weight: 700;
color: #8e8e93;
letter-spacing: 0.5px;
transition: color 0.3s;
}
.logo-bar-logos span:hover { color: var(--accent); }
/* ─── FEATURE ROW ─── */
.feature-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.feature-row.reverse { direction: rtl; }
.feature-row.reverse > * { direction: ltr; }
.feature-visual {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 48px;
text-align: center;
font-size: 0.9rem;
color: var(--text-secondary);
}
/* ─── STATS ─── */
.stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: center;
}
.stat-item h3 {
font-size: 2.4rem;
font-weight: 800;
color: var(--accent);
margin-bottom: 6px;
}
.stat-item p {
font-size: 0.85rem;
color: var(--text-secondary);
}
/* ─── PRICING CARD ─── */
.pricing-card {
background: var(--bg-elevated);
border: 2px solid var(--accent);
border-radius: 20px;
padding: 48px;
max-width: 480px;
margin: 0 auto;
text-align: center;
}
.pricing-card .plan-name {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--accent);
margin-bottom: 12px;
}
.pricing-card .price {
font-size: 3.2rem;
font-weight: 800;
}
.pricing-card .price-sub {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 32px;
}
.pricing-card ul {
list-style: none;
text-align: left;
margin-bottom: 36px;
}
.pricing-card li {
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 10px;
}
.pricing-card li::before {
content: '✓';
color: var(--accent);
font-weight: 700;
}
/* ─── FAQ ─── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
border-bottom: 1px solid var(--border);
padding: 24px 0;
}
.faq-q {
font-size: 1.05rem;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-q::after { content: '+'; font-size: 1.4rem; color: var(--text-secondary); }
.faq-item.open .faq-q::after { content: '−'; }
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s, padding 0.3s;
color: var(--text-secondary);
font-size: 0.95rem;
line-height: 1.7;
}
.faq-item.open .faq-a {
max-height: 400px;
padding-top: 16px;
}
/* ─── FOOTER ─── */
.footer {
padding: 48px 24px;
border-top: 1px solid var(--border);
text-align: center;
}
.footer-links {
display: flex;
justify-content: center;
gap: 32px;
margin-bottom: 20px;
}
.footer-links a {
font-size: 0.82rem;
color: var(--text-secondary);
transition: color 0.2s;
}
.footer-links a:hover { color: var(--text); }
.footer-copy {
font-size: 0.78rem;
color: #8e8e93;
}
/* ─── MODAL ─── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
z-index: 1000;
align-items: center;
justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 20px;
padding: 48px;
max-width: 440px;
width: 90%;
}
.modal h3 {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 8px;
}
.modal p {
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 28px;
}
.modal label {
display: block;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--accent);
margin-bottom: 6px;
}
.modal input {
width: 100%;
padding: 14px 16px;
background: #000;
border: 1.5px solid #333;
border-radius: 10px;
color: var(--text);
font-size: 1rem;
font-family: inherit;
margin-bottom: 16px;
transition: border-color 0.2s;
}
.modal input:focus {
outline: none;
border-color: var(--accent);
}
.modal .btn { width: 100%; margin-top: 8px; }
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
margin-top: 16px;
width: 100%;
text-align: center;
}
/* ─── PAGE HEADER ─── */
.page-hero {
padding: 100px 24px 60px;
text-align: center;
border-bottom: 1px solid var(--border);
}
.page-hero h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.03em;
margin-bottom: 16px;
}
.page-hero p {
font-size: 1.1rem;
color: var(--text-secondary);
max-width: 640px;
margin: 0 auto;
}
/* ─── CONTENT BLOCKS ─── */
article h2 {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 16px;
}
article h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 12px;
color: var(--accent);
}
article p {
margin-bottom: 16px;
color: var(--text-secondary);
line-height: 1.7;
}
article ul {
list-style: none;
margin-bottom: 24px;
}
article li {
padding: 8px 0;
color: var(--text-secondary);
display: flex;
align-items: flex-start;
gap: 10px;
}
article li::before {
content: '→';
color: var(--accent);
font-weight: 600;
flex-shrink: 0;
}
.content-section {
max-width: 720px;
margin: 0 auto;
padding: 60px 24px;
}
.content-section + .content-section {
border-top: 1px solid var(--border);
}
/* ─── GLOSSARY ─── */
.glossary-item {
padding: 32px 0;
border-bottom: 1px solid var(--border);
}
.glossary-item dfn {
font-style: normal;
font-weight: 700;
font-size: 1.15rem;
color: var(--accent);
}
.glossary-item p {
margin-top: 8px;
color: var(--text-secondary);
}
.glossary-item .version {
font-size: 0.75rem;
color: #8e8e93;
margin-top: 6px;
}
/* ─── FLOW DIAGRAM ─── */
.flow {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
margin: 40px 0;
}
.flow-step {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 32px;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
}
.flow-arrow {
color: var(--accent);
font-size: 1.2rem;
padding: 6px 0;
}
/* ─── SCAN BOX ─── */
.scan-box {
max-width: 580px;
margin: 0 auto;
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 20px;
padding: 32px;
}
.scan-tabs {
display: flex;
gap: 4px;
background: #0a0a0a;
border-radius: 12px;
padding: 4px;
margin-bottom: 24px;
}
.scan-tab {
flex: 1;
padding: 10px 16px;
border: none;
background: transparent;
color: var(--text-secondary);
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
}
.scan-tab.active {
background: var(--accent);
color: #000;
}
.scan-panel { display: none; }
.scan-panel.active { display: block; }
.scan-row {
display: flex;
gap: 8px;
}
.scan-row-stack {
display: flex;
flex-direction: column;
gap: 8px;
}
.scan-input {
flex: 1;
padding: 14px 16px;
background: #000;
border: 1.5px solid #333;
border-radius: 12px;
color: var(--text);
font-size: 1rem;
font-family: inherit;
transition: border-color 0.2s;
}
.scan-input:focus {
outline: none;
border-color: var(--accent);
}
.scan-btn {
white-space: nowrap;
padding: 14px 24px;
flex-shrink: 0;
}
.scan-hint {
font-size: 0.78rem;
color: #8e8e93;
margin-top: 12px;
text-align: center;
}
@media (max-width: 600px) {
.scan-row { flex-direction: column; }
.scan-btn { width: 100%; }
}
/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
.grid-3 { grid-template-columns: 1fr; }
.feature-row { grid-template-columns: 1fr; gap: 40px; }
.feature-row.reverse { direction: ltr; }
.stats-row { grid-template-columns: repeat(2, 1fr); }
.nav-links { display: none; }
.nav-mobile { display: block; }
}
@media (max-width: 600px) {
.hero { padding: 80px 20px 60px; }
section { padding: 60px 20px; }
.stats-row { grid-template-columns: 1fr 1fr; }
}