/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui);
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Header ─── */
.header {
    background: var(--bg-white);
    padding: var(--space-20) var(--space-120);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border-light);
}

.header-logo {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
}

.header-nav {
    display: flex;
    gap: var(--space-32);
    align-items: center;
}

.header-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .15s;
}

.header-nav a:hover { color: var(--text-primary); }

.header-nav .btn-primary {
    color: var(--text-on-accent);
    font-size: 14px;
    font-weight: 600;
}

.header-nav .btn-primary:hover { color: var(--text-on-accent); }

/* ─── Buttons ─── */
.btn-primary {
    display: inline-block;
    background: var(--accent);
    color: var(--text-on-accent);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-primary--lg {
    font-size: 16px;
    padding: 14px var(--space-32);
    border-radius: var(--radius-lg);
}

.btn-inverted {
    display: inline-block;
    background: var(--bg-white);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 600;
    padding: var(--space-16) var(--space-40);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: opacity .15s;
}

.btn-inverted:hover { opacity: .9; }

.link-accent {
    color: var(--text-accent);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity .15s;
}

.link-accent:hover { opacity: .7; }

/* ─── Hero ─── */
.hero {
    background: var(--bg-white);
    padding: var(--space-80) var(--space-120) var(--space-64);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-32);
}

.hero-title {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    max-width: 900px;
}

.hero-sub {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.5;
    text-align: center;
    max-width: 720px;
}

.hero-ctas {
    display: flex;
    gap: var(--space-16);
    align-items: center;
}

.hero-screenshot {
    width: 960px;
    max-width: 100%;
    height: 540px;
    background: var(--surface-muted);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-screenshot span {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
}

/* ─── Section ─── */
.section { padding: var(--space-80) var(--space-120); }
.section--white { background: var(--bg-white); }
.section--gray  { background: var(--bg); }
.section--accent { background: var(--accent); }
.section--dark  { background: var(--text-primary); }

.section-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    align-items: center;
    margin-bottom: var(--space-48);
}

.section-header--left { align-items: flex-start; }

.section-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-accent);
}

.section-title {
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}

.section-header--left .section-title { text-align: left; }

.section-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 800px;
}

/* ─── Cards ─── */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-24);
}

.card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.card--compact { padding: 28px; gap: var(--space-12); }

.card-num {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--text-accent);
}

.card-title { font-size: 20px; font-weight: 600; }
.card-title--sm { font-size: 16px; }

.card-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ─── Steps ─── */
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-32);
}

.step {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.step-num {
    width: 48px;
    height: 48px;
    background: var(--accent-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-accent);
}

.step-title { font-size: 18px; font-weight: 600; }

.step-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ─── Zero Value ─── */
.zero {
    display: flex;
    gap: var(--space-64);
    align-items: center;
}

.zero-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.zero-title { font-size: 32px; font-weight: 600; }

.zero-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.zero-visual {
    width: 400px;
    min-width: 400px;
    height: 240px;
    background: var(--accent-light);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    justify-content: center;
}

.zero-icon {
    font-family: var(--font-mono);
    font-size: 64px;
    font-weight: 700;
    color: var(--text-accent);
}

.zero-caption {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-accent);
}

/* ─── Integrations ─── */
.integrations {
    display: flex;
    gap: var(--space-24);
    justify-content: center;
}

.int-card {
    width: 180px;
    height: 120px;
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
}

.int-card span {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.int-card span.int-sm { font-size: 14px; font-weight: 600; }

/* ─── Security cards ─── */
.sec-card {
    background: var(--bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-light);
    padding: var(--space-32);
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.sec-icon {
    width: 28px;
    height: 28px;
    color: var(--text-accent);
}

.sec-title { font-size: 18px; font-weight: 600; }

.sec-desc {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ─── FAQ ─── */
.faq-section { padding: var(--space-80) 200px; }

.faq-list { display: flex; flex-direction: column; }

.faq-item {
    padding: var(--space-24) 0;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    user-select: none;
}

.faq-item:last-child { border-bottom: none; }

.faq-q {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-16);
}

.faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform .2s;
    flex-shrink: 0;
}

.faq-item.open .faq-chevron { transform: rotate(180deg); }

.faq-a {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, margin-top .3s ease;
    margin-top: 0;
}

.faq-item.open .faq-a {
    max-height: 200px;
    margin-top: var(--space-8);
}

/* ─── Final CTA ─── */
.final-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-24);
}

.final-cta-title {
    font-size: 36px;
    font-weight: 600;
    color: var(--text-on-accent);
    text-align: center;
}

.final-cta-sub {
    color: rgba(255, 255, 255, .8);
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    max-width: 600px;
}

/* ─── Footer ─── */
.footer {
    padding: var(--space-48) var(--space-120);
    background: var(--text-primary);
    color: rgba(255, 255, 255, .8);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-40);
}

.footer-logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--bg-white);
    margin-bottom: var(--space-8);
}

.footer-tagline { font-size: 13px; color: rgba(255, 255, 255, .53); }

.footer-nav { display: flex; gap: var(--space-64); }

.footer-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.footer-col-title {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .53);
}

.footer-col a {
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: 14px;
    transition: color .15s;
}

.footer-col a:hover { color: #fff; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: var(--space-24);
    font-size: 13px;
    color: rgba(255, 255, 255, .4);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
    .header  { padding: var(--space-16) var(--space-40); }
    .section { padding: 60px var(--space-40); }
    .hero    { padding: 60px var(--space-40) var(--space-48); }
    .faq-section { padding: 60px var(--space-40); }
    .footer  { padding: var(--space-40); }

    .hero-title    { font-size: 36px; }
    .hero-sub      { font-size: 16px; }
    .section-title { font-size: 28px; }

    .cards-3 { grid-template-columns: 1fr; }
    .steps   { grid-template-columns: repeat(2, 1fr); }
    .integrations { flex-wrap: wrap; }

    .zero { flex-direction: column; }
    .zero-visual { width: 100%; min-width: 0; }

    .footer-top { flex-direction: column; gap: var(--space-32); }
}

@media (max-width: 640px) {
    .header { padding: 14px var(--space-20); }
    .header-nav a:not(.btn-primary) { display: none; }
    .section { padding: var(--space-48) var(--space-20); }
    .hero    { padding: var(--space-48) var(--space-20) var(--space-40); }
    .faq-section { padding: var(--space-48) var(--space-20); }
    .footer  { padding: var(--space-32) var(--space-20); }

    .hero-title { font-size: 28px; }
    .hero-screenshot { height: 280px; }
    .final-cta-title { font-size: 28px; }

    .steps { grid-template-columns: 1fr; }
    .int-card { width: 140px; height: 90px; }
    .footer-nav { gap: var(--space-32); }
}