/* Shared concept styles - imports design tokens */
@import url("../colors_and_type.css");

html, body { margin: 0; padding: 0; background: transparent; color: var(--fg-1); font-family: var(--slipstream-font); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }

/* Glass utilities */
.glass { background: rgb(255 255 255 / 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / 0.10); }
.glass-heavy { background: rgb(255 255 255 / 0.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgb(255 255 255 / 0.12); }

/* Scrims */
.scrim-bottom { background: linear-gradient(to top, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0.6) 30%, rgb(0 0 0 / 0.2) 70%, transparent 100%); }
.scrim-top { background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), transparent); }

/* Animations */
@keyframes pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes count-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes grid-shift { from { background-position: 0 0; } to { background-position: 80px 80px; } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 40px rgb(217 36 42 / 0.35), 0 0 120px rgb(217 36 42 / 0.15); } 50% { box-shadow: 0 0 60px rgb(217 36 42 / 0.55), 0 0 160px rgb(217 36 42 / 0.2); } }
@keyframes wave { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 50% { opacity: 0.25; } }

.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--color-primary); animation: pulse-live 2s ease-in-out infinite; box-shadow: 0 0 12px rgb(217 36 42 / 0.6); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 500; border-radius: var(--radius-lg); padding: 0 18px; height: 42px; cursor: pointer; border: 1px solid transparent; transition: all 150ms var(--ease-standard); white-space: nowrap; text-decoration: none; color: inherit; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn-primary:hover { background: oklch(0.54 0.23 27 / 0.9); box-shadow: var(--shadow-lg); }
.btn-outline { background: rgb(255 255 255 / 0.04); border-color: rgb(255 255 255 / 0.15); color: var(--fg-1); backdrop-filter: blur(8px); }
.btn-outline:hover { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.25); }
.btn-ghost { color: var(--fg-2); }
.btn-ghost:hover { background: rgb(255 255 255 / 0.06); color: var(--fg-1); }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15px; border-radius: var(--radius-lg); }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-md); }

/* Eyebrow */
.eyebrow { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3); }

/* Nav (shared header pattern) */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; position: relative; z-index: 30; }
.nav-logo { height: 22px; display: block; }
.nav-links { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--fg-2); }
.nav-links a { padding: 8px 12px; color: inherit; text-decoration: none; border-radius: 8px; transition: background 150ms; }
.nav-links a:hover { background: rgb(255 255 255 / 0.06); color: var(--fg-1); }

/* Hero base */
.hero { position: relative; width: 100%; min-height: 760px; overflow: hidden; isolation: isolate; }

/* Tag pill */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); color: var(--fg-2); }

/* Live pill */
.live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; box-shadow: 0 0 20px rgb(217 36 42 / 0.4); }
.live-pill-dot { width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: pulse-live 2s ease-in-out infinite; }

/* Tabular nums */
.tnum { font-variant-numeric: tabular-nums; }