@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap'); :root { --background: #f7f7f7; --surface: #ffffff; --text: #131313; --muted: #7c7c7c; --accent: #008f95; --accent-soft: #c8f0ee; --focus: #006d73; } * { box-sizing: border-box; } body { display: grid; min-height: 100vh; margin: 0; padding: 24px; place-items: center; color: var(--text); background: var(--background); font-family: Roboto, Arial, sans-serif; } .start-page { width: min(100%, 640px); padding: clamp(32px, 8vw, 72px); background: var(--surface); box-shadow: 0 8px 24px rgba(19, 19, 19, 0.08); text-align: center; } .eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 0.75rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } h1 { margin: 0; font-size: clamp(2.5rem, 8vw, 5rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; } .intro { margin: 20px 0 36px; color: var(--muted); font-size: 1.05rem; } .main-actions { display: grid; gap: 12px; } .action-button { display: flex; min-height: 52px; align-items: center; justify-content: center; padding: 13px 20px; color: var(--text); background: var(--accent); border: 2px solid var(--accent); border-radius: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; } .action-button:hover:not(:disabled) { color: #ffffff; background: var(--text); border-color: var(--text); } .action-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } .action-button:disabled { color: var(--muted); background: #eeeeee; border-color: #eeeeee; cursor: not-allowed; } .action-button-secondary { color: var(--text); background: var(--surface); border-color: var(--text); } .action-button-secondary:hover { color: #ffffff; }