:root {  --color-primary: #0f172a;  --color-primary-hover: #1e293b;  --color-bg-base: #f8fafc;  --color-bg-surface: #ffffff;  --color-bg-alt: #f1f5f9;   --color-text-dark: #0f172a;  --color-text-muted: #475569;  --color-text-light: #94a3b8;  --color-text-white: #ffffff;  --color-border: #e2e8f0; --color-border-subtle: #f1f5f9;  --spacing-section-py: 6rem;  --spacing-gap-grid: 2rem;  --radius-card: 0.75rem;  --radius-btn: 0.375rem;  }  body { font-family: 'Inter', sans-serif; background-color: var(--color-bg-base); color: var(--color-text-dark); -webkit-font-smoothing: antialiased; }  .heading-1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--color-text-dark); margin-bottom: 1.5rem; } .heading-2 { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-text-dark); margin-bottom: 1.5rem; } .heading-3 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--color-text-dark); margin-bottom: 1rem; } .text-lead { font-size: 1.25rem; font-weight: 300; line-height: 1.6; color: var(--color-text-muted); } .text-body { font-size: 1rem; line-height: 1.6; color: var(--color-text-muted); }  .section-default { padding: var(--spacing-section-py) 1.5rem; background-color: var(--color-bg-surface); } .section-alt { padding: var(--spacing-section-py) 1.5rem; background-color: var(--color-bg-base); } .section-dark { padding: var(--spacing-section-py) 1.5rem; background-color: var(--color-primary); color: var(--color-text-white); } .container-main { max-width: 80rem;  margin: 0 auto; width: 100%; } .container-narrow { max-width: 48rem;  margin: 0 auto; width: 100%; }  .grid-3-cols { display: grid; grid-template-columns: 1fr; gap: var(--spacing-gap-grid); } @media (min-width: 768px) { .grid-3-cols { grid-template-columns: repeat(3, 1fr); } } .grid-2-cols { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .grid-2-cols { grid-template-columns: repeat(2, 1fr); gap: 4rem; } }  .card-base { background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 2.5rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); transition: box-shadow 0.3s ease, transform 0.3s ease; display: flex; flex-direction: column; height: 100%; } .card-base:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05); transform: translateY(-2px); } .card-alt { background-color: var(--color-bg-base); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 2rem; } .btn-primary { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-primary); color: var(--color-text-white); padding: 0.75rem 1.5rem; border-radius: var(--radius-btn); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease; } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-white { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-bg-surface); color: var(--color-primary); padding: 0.75rem 1.5rem; border-radius: var(--radius-btn); font-weight: 600; text-decoration: none; transition: background-color 0.2s ease; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .btn-white:hover { background-color: var(--color-bg-base); } .badge-label { display: inline-block; padding: 0.25rem 0.75rem; background-color: var(--color-border); color: var(--color-text-muted); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 9999px; margin-bottom: 1.5rem; } .icon-box { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }  .premium-border { border-left: 4px solid var(--color-primary); padding-left: 1.5rem; margin-bottom: 2rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }  .timeline-line { position: relative; } .timeline-line::before { content: ''; position: absolute; left: 1.5rem; top: 0; bottom: 0; width: 2px; background-color: var(--color-border); z-index: 0; }  .page-view { display: none; opacity: 0; transition: opacity 0.4s ease-in-out; } .page-view.active { display: block; opacity: 1; }