| :root { |
| --page: #f6f8fc; |
| --surface: #ffffff; |
| --surface-soft: #f0f5ff; |
| --text: #0f172a; |
| --muted: #5f6c80; |
| --muted-strong: #334155; |
| --border: #dce5f2; |
| --accent: #2557e8; |
| --accent-dark: #173fba; |
| --accent-soft: #e8efff; |
| --success: #0f9465; |
| --success-soft: #e7f8f1; |
| --shadow: 0 22px 70px rgba(15, 23, 42, 0.12); |
| --radius: 24px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| background: |
| radial-gradient(circle at 15% 0%, rgba(37, 87, 232, 0.14), transparent 34rem), |
| linear-gradient(180deg, #ffffff 0%, var(--page) 44%, #eef3fb 100%); |
| color: var(--text); |
| font-family: |
| Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", |
| sans-serif; |
| font-size: 16px; |
| line-height: 1.6; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| p, |
| h1, |
| h2, |
| h3 { |
| margin-top: 0; |
| } |
|
|
| p { |
| color: var(--muted); |
| } |
|
|
| .shell { |
| width: min(1120px, calc(100% - 48px)); |
| margin: 0 auto; |
| } |
|
|
| .site-header { |
| padding: 22px 0 56px; |
| } |
|
|
| .nav { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 24px; |
| min-height: 66px; |
| padding: 0 18px; |
| border: 1px solid rgba(220, 229, 242, 0.86); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.86); |
| box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06); |
| backdrop-filter: blur(16px); |
| } |
|
|
| .brand { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--text); |
| font-weight: 800; |
| } |
|
|
| .brand-mark { |
| display: inline-grid; |
| width: 34px; |
| height: 34px; |
| place-items: center; |
| border-radius: 12px; |
| background: linear-gradient(135deg, var(--accent), #6a8cff); |
| color: #ffffff; |
| font-size: 15px; |
| box-shadow: 0 12px 28px rgba(37, 87, 232, 0.26); |
| } |
|
|
| .nav-links { |
| display: flex; |
| gap: 24px; |
| color: var(--muted); |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .nav-links a:hover, |
| .footer-links a:hover, |
| .text-link:hover { |
| color: var(--accent); |
| } |
|
|
| .nav-cta { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 40px; |
| padding: 0 16px; |
| border-radius: 999px; |
| background: var(--text); |
| color: #ffffff; |
| font-size: 14px; |
| font-weight: 800; |
| } |
|
|
| .nav-cta:hover { |
| background: var(--accent); |
| } |
|
|
| .hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr); |
| gap: 44px; |
| align-items: center; |
| padding: 74px 0 34px; |
| } |
|
|
| .tag-row { |
| display: flex; |
| flex-wrap: wrap; |
| align-items: center; |
| gap: 12px; |
| margin-bottom: 22px; |
| color: var(--muted-strong); |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .pill { |
| display: inline-flex; |
| align-items: center; |
| min-height: 32px; |
| padding: 0 12px; |
| border: 1px solid #bcd0ff; |
| border-radius: 999px; |
| background: var(--accent-soft); |
| color: var(--accent-dark); |
| font-size: 13px; |
| font-weight: 900; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| } |
|
|
| h1 { |
| max-width: 720px; |
| margin-bottom: 22px; |
| color: var(--text); |
| font-size: clamp(42px, 6vw, 68px); |
| line-height: 1.02; |
| letter-spacing: -0.055em; |
| } |
|
|
| h2 { |
| margin-bottom: 14px; |
| color: var(--text); |
| font-size: clamp(28px, 3.4vw, 42px); |
| line-height: 1.12; |
| letter-spacing: -0.04em; |
| } |
|
|
| h3 { |
| margin-bottom: 0; |
| color: var(--text); |
| font-size: 20px; |
| letter-spacing: -0.02em; |
| } |
|
|
| .lead { |
| max-width: 660px; |
| margin-bottom: 0; |
| color: var(--muted); |
| font-size: 19px; |
| line-height: 1.75; |
| } |
|
|
| .cta-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 14px; |
| margin: 32px 0 22px; |
| } |
|
|
| .button { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-height: 48px; |
| padding: 0 22px; |
| border-radius: 14px; |
| font-weight: 900; |
| transition: |
| transform 180ms ease, |
| box-shadow 180ms ease, |
| background 180ms ease, |
| border-color 180ms ease; |
| } |
|
|
| .button:hover { |
| transform: translateY(-1px); |
| } |
|
|
| .button.primary { |
| background: var(--accent); |
| color: #ffffff; |
| box-shadow: 0 16px 34px rgba(37, 87, 232, 0.28); |
| } |
|
|
| .button.primary:hover { |
| background: var(--accent-dark); |
| } |
|
|
| .button.secondary { |
| border: 1px solid var(--border); |
| background: #ffffff; |
| color: var(--text); |
| box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); |
| } |
|
|
| .button.secondary:hover { |
| border-color: #a9bdf8; |
| } |
|
|
| .proof-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| color: var(--muted); |
| font-size: 14px; |
| } |
|
|
| .proof-row span { |
| padding: 7px 10px; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.72); |
| } |
|
|
| .hero-panel { |
| position: relative; |
| padding: 24px; |
| border: 1px solid rgba(220, 229, 242, 0.96); |
| border-radius: 30px; |
| background: rgba(255, 255, 255, 0.92); |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| } |
|
|
| .hero-panel::before { |
| position: absolute; |
| inset: 0 0 auto; |
| height: 8px; |
| background: linear-gradient(90deg, var(--accent), #72d4ae); |
| content: ""; |
| } |
|
|
| .panel-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin: 12px 0 22px; |
| color: var(--muted); |
| font-size: 14px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .panel-header strong { |
| padding: 5px 10px; |
| border-radius: 999px; |
| background: var(--accent-soft); |
| color: var(--accent-dark); |
| letter-spacing: 0; |
| } |
|
|
| .signal-card { |
| padding: 24px; |
| border-radius: 22px; |
| background: linear-gradient(135deg, #102040, #173fba); |
| color: #ffffff; |
| box-shadow: 0 18px 44px rgba(23, 63, 186, 0.22); |
| } |
|
|
| .signal-card p { |
| margin-bottom: 0; |
| color: rgba(255, 255, 255, 0.76); |
| } |
|
|
| .signal-card strong { |
| display: block; |
| margin: 8px 0 4px; |
| font-size: 48px; |
| line-height: 1; |
| letter-spacing: -0.05em; |
| } |
|
|
| .signal-label { |
| color: rgba(255, 255, 255, 0.72); |
| font-size: 13px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .panel-list { |
| display: grid; |
| gap: 14px; |
| margin-top: 20px; |
| } |
|
|
| .panel-list div { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 16px 0; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .panel-list div:last-child { |
| border-bottom: 0; |
| } |
|
|
| .panel-list span { |
| color: var(--muted); |
| } |
|
|
| .panel-list strong { |
| color: var(--text); |
| text-align: right; |
| } |
|
|
| .metric-strip { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 18px; |
| margin: 0 0 78px; |
| } |
|
|
| .metric-card, |
| .info-card, |
| .feature-card, |
| .table-card { |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: rgba(255, 255, 255, 0.9); |
| box-shadow: 0 16px 42px rgba(15, 23, 42, 0.07); |
| } |
|
|
| .metric-card { |
| padding: 24px; |
| } |
|
|
| .metric-value, |
| .metric-label { |
| display: block; |
| } |
|
|
| .metric-value { |
| margin-bottom: 6px; |
| color: var(--text); |
| font-size: 25px; |
| font-weight: 900; |
| letter-spacing: -0.04em; |
| } |
|
|
| .metric-label { |
| color: var(--muted); |
| font-size: 14px; |
| } |
|
|
| .section { |
| margin-bottom: 84px; |
| } |
|
|
| .split { |
| display: grid; |
| grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); |
| gap: 44px; |
| align-items: start; |
| } |
|
|
| .section-kicker { |
| margin-bottom: 12px; |
| color: var(--success); |
| font-size: 13px; |
| font-weight: 900; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| .section-copy p, |
| .section-heading p { |
| max-width: 640px; |
| } |
|
|
| .info-card, |
| .feature-card { |
| padding: 28px; |
| } |
|
|
| .clean-list { |
| display: grid; |
| gap: 12px; |
| margin: 0 0 20px; |
| padding: 0; |
| list-style: none; |
| color: var(--muted); |
| } |
|
|
| .clean-list li { |
| position: relative; |
| padding-left: 24px; |
| } |
|
|
| .clean-list li::before { |
| position: absolute; |
| left: 0; |
| top: 0.68em; |
| width: 9px; |
| height: 9px; |
| border-radius: 999px; |
| background: var(--accent); |
| content: ""; |
| } |
|
|
| .text-link { |
| color: var(--accent); |
| font-weight: 900; |
| } |
|
|
| .section-heading { |
| max-width: 780px; |
| margin-bottom: 28px; |
| } |
|
|
| .benchmark-grid { |
| display: grid; |
| gap: 22px; |
| } |
|
|
| .table-card { |
| padding: 24px; |
| } |
|
|
| .table-title { |
| display: flex; |
| align-items: baseline; |
| justify-content: space-between; |
| gap: 16px; |
| margin-bottom: 16px; |
| } |
|
|
| .table-title span { |
| color: var(--muted); |
| font-size: 13px; |
| font-weight: 800; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| } |
|
|
| .table-wrap { |
| overflow-x: auto; |
| border: 1px solid var(--border); |
| border-radius: 18px; |
| background: #ffffff; |
| } |
|
|
| table { |
| width: 100%; |
| min-width: 680px; |
| border-collapse: collapse; |
| } |
|
|
| th, |
| td { |
| padding: 14px 16px; |
| border-bottom: 1px solid #edf2f8; |
| text-align: right; |
| white-space: nowrap; |
| } |
|
|
| th:first-child, |
| td:first-child { |
| text-align: left; |
| } |
|
|
| th { |
| background: #f7f9fd; |
| color: var(--muted-strong); |
| font-size: 12px; |
| font-weight: 900; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| td { |
| color: var(--muted-strong); |
| font-size: 14px; |
| } |
|
|
| td strong { |
| display: inline-block; |
| min-width: 56px; |
| padding: 4px 9px; |
| border-radius: 999px; |
| background: var(--success-soft); |
| color: var(--success); |
| text-align: center; |
| } |
|
|
| tbody tr:last-child td { |
| border-bottom: 0; |
| } |
|
|
| tbody tr:hover td { |
| background: #fbfdff; |
| } |
|
|
| .feature-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 20px; |
| } |
|
|
| .feature-card h2 { |
| font-size: 26px; |
| } |
|
|
| .footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 24px; |
| padding: 34px 0 52px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .footer p { |
| margin: 4px 0 0; |
| } |
|
|
| .footer-links { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 18px; |
| color: var(--muted); |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| @media (max-width: 900px) { |
| .shell { |
| width: min(100% - 32px, 1120px); |
| } |
|
|
| .nav { |
| border-radius: 24px; |
| padding: 16px; |
| } |
|
|
| .nav, |
| .footer { |
| align-items: flex-start; |
| flex-direction: column; |
| } |
|
|
| .nav-links { |
| order: 3; |
| width: 100%; |
| justify-content: flex-start; |
| } |
|
|
| .hero { |
| grid-template-columns: 1fr; |
| padding-top: 48px; |
| } |
|
|
| .metric-strip, |
| .split, |
| .feature-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .metric-strip, |
| .section { |
| margin-bottom: 56px; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| h1 { |
| font-size: 40px; |
| } |
|
|
| .lead { |
| font-size: 17px; |
| } |
|
|
| .nav-links { |
| gap: 14px; |
| } |
|
|
| .nav-cta, |
| .button { |
| width: 100%; |
| } |
|
|
| .panel-list div { |
| display: grid; |
| } |
|
|
| .panel-list strong { |
| text-align: left; |
| } |
|
|
| .table-card, |
| .info-card, |
| .feature-card, |
| .metric-card { |
| padding: 20px; |
| } |
| } |
|
|
