HTML _landing.css.html

<style nonce="{{ csp_nonce }}">
    /* ═══════════════════════════════════════════════════════════
       HERO
       ═══════════════════════════════════════════════════════════ */
    .hero {
        padding: 80px 0 60px;
        text-align: center;
    }
    .hero h1 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1.08;
        margin-bottom: 16px;
        color: var(--text);
    }
    .hero .subtitle {
        font-size: clamp(16px, 2vw, 19px);
        color: var(--text-muted);
        max-width: 560px;
        margin: 0 auto 32px;
        line-height: 1.5;
    }
    .hero .hero-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    /* FEATURES GRID */
    .features-grid {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    }
    .feature {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 28px 24px;
        transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .feature:hover {
        border-color: var(--border-light);
        box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }
    .feature-icon {
        width: 44px; height: 44px; border-radius: 10px;
        background: var(--accent-dim);
        display: flex; align-items: center;
        justify-content: center; margin-bottom: 16px;
        font-size: 18px; color: var(--accent);
    }
    .feature h3 { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .feature p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

    /* STEPS */
    .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
    .step {
        text-align: center;
        padding: 24px;
    }
    .step-number {
        width: 48px; height: 48px; border-radius: 50%;
        background: var(--accent); color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 20px; font-weight: 700;
        margin: 0 auto 16px;
    }
    .step h3 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
    .step p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

    /* CODE BLOCK */
    .code-section { padding: 60px 0; }
    .code-block {
        background: #1e1e2e;
        border: 1px solid #313244;
        border-radius: 10px;
        overflow: hidden;
        max-width: 640px; margin: 0 auto;
        box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .code-header {
        display: flex; align-items: center; gap: 8px;
        padding: 10px 20px;
        border-bottom: 1px solid #313244;
        background: #181825;
    }
    .code-lang {
        font-size: 12px; color: #89b4fa;
        font-family: var(--mono);
        font-weight: 500;
    }
    pre {
        padding: 24px; overflow-x: auto; font-family: var(--mono);
        font-size: 13.5px; line-height: 1.65; color: #cdd6f4;
    }
    pre .kw { color: #cba6f7; }
    pre .str { color: #a6e3a1; }
    pre .cm { color: #6c7086; }
    pre .fn { color: #89b4fa; }
    pre .num { color: #f9e2af; }

    /* PRICING GRID */
    .pricing-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
    .pricing-grid .feature {
        text-align: center;
    }
    .pricing-grid .feature h3 {
        font-size: 13px;
        text-transform: none;
        letter-spacing: 0;
        margin-bottom: 8px;
        font-family: var(--font);
    }

    /* ═══════════════════════════════════════════════════════════
       MOBILE
       ═══════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
        .nav-links { gap: 16px; }
        .nav-links a.hide-mobile { display: none; }
        .steps { grid-template-columns: 1fr; gap: 16px; }
        .features-grid { grid-template-columns: 1fr; }
        .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    }

    @media (max-width: 480px) {
        .nav-links .btn { padding: 7px 14px; font-size: 13px; }
        .pricing-grid { grid-template-columns: 1fr; }
    }
</style>