/* ─────────────────────────────────────────────────────────────────────────── * olano.ai — themed to match dashboard_2.0 (lucide.dev / VitePress style). * Borderless: separation comes from background tone, not outlines. One accent * (Lucide coral) — except the Cortex section, which is deliberately the only * thing in the UI using the neural violet. * * Tokens are copied from olano/dashboard_2.0/src/styles/tokens.css. * Theme: , persisted as `lc-theme` (same key * convention as the dashboard), default dark, applied pre-paint in . * ─────────────────────────────────────────────────────────────────────────── */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #1b1b1f; /* page */ --bg-elev: #161618; /* darker alt */ --surface: #202127; /* cards */ --surface-2: #26262c; /* buttons, soft hovers */ --surface-3: #2e2e34; /* badges, stronger hover */ --surface-4: #3a3a42; /* scrollbar */ --border: #2e2e32; /* hairlines where needed */ --border-strong: #3a3a42; --border-focus: #f1605d; --text: #dfdfd6; /* warm off-white (Lucide) */ --text-2: #98989f; --text-3: #6a6a71; --text-4: #54545a; /* Lucide coral */ --accent: #f1605d; --accent-hover: #f8746f; --accent-soft: rgba(241, 96, 93, 0.14); --accent-muted: rgba(241, 96, 93, 0.08); /* Cortex — neural violet, the only non-coral accent */ --cortex: #a78bfa; --cortex-strong: #c4b5fd; --cortex-glow: rgba(167, 139, 250, 0.7); --cortex-soft: rgba(167, 139, 250, 0.16); --cortex-muted: rgba(167, 139, 250, 0.08); --success: #3ddc97; --success-soft: rgba(61, 220, 151, 0.13); --warn: #e2b341; --warn-soft: rgba(226, 179, 65, 0.13); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.13); --info: #60a5fa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 8px 28px rgba(0, 0, 0, 0.45); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); --shadow-focus: 0 0 0 3px rgba(241, 96, 93, 0.25); } :root[data-theme="light"] { color-scheme: light; --bg: #f3f3f4; --bg-elev: #ffffff; --surface: #ffffff; --surface-2: #e9e9ea; --surface-3: #e1e1e3; --surface-4: #d4d4d6; --border: #e4e4e6; --border-strong: #d4d4d6; --border-focus: #e5484d; --text: #3c3c43; --text-2: #67676c; --text-3: #8e8e93; --text-4: #a8a8ad; --accent: #e5484d; --accent-hover: #d33a40; --accent-soft: rgba(229, 72, 77, 0.1); --accent-muted: rgba(229, 72, 77, 0.06); --cortex: #7c3aed; --cortex-strong: #6d28d9; --cortex-glow: rgba(124, 58, 237, 0.55); --cortex-soft: rgba(124, 58, 237, 0.12); --cortex-muted: rgba(124, 58, 237, 0.06); --success: #18794e; --success-soft: rgba(24, 121, 78, 0.1); --warn: #b45309; --warn-soft: rgba(180, 83, 9, 0.1); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.1); --info: #2563eb; --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05); --shadow: 0 8px 28px rgba(24, 24, 27, 0.08); --shadow-lg: 0 18px 50px rgba(24, 24, 27, 0.12); --shadow-focus: 0 0 0 3px rgba(229, 72, 77, 0.18); } :root { --r-xs: 5px; --r-sm: 7px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --max: 1200px; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; --font-heading: var(--font-sans); --font-body: var(--font-sans); --t-fast: 0.12s; --t: 0.18s; --ease: cubic-bezier(0.32, 0.72, 0, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--text); background: var(--bg); font-optical-sizing: auto; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.nav-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } img { display: block; max-width: 100%; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: var(--surface-4); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; } :is(a, button, input, select, summary):focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: var(--r-xs); } .svg-defs { display: none; } /* Lucide icon defaults: stroke-based, monochrome, inherits currentColor */ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } h1, h2, h3, h4, .brand, .price { font-family: var(--font-heading); } .section { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; } /* Header — full-width sticky bar, hairline bottom (VitePress pattern) */ .site-header { position: sticky; top: 0; z-index: 50; height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; width: 100%; margin: 0; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; color: var(--text); } /* Brand mark — the dashboard's BrandMark: a clean stroke "L" drawn in the lucide style (24-viewBox, currentColor, round caps), on an accent tile. */ .brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--accent); color: #fff; flex-shrink: 0; } .brand-mark svg { width: 19px; height: 19px; } .site-nav { display: flex; align-items: center; justify-content: center; justify-self: center; gap: 6px; color: var(--text-3); font-size: 13.5px; font-weight: 500; } .site-nav a { padding: 7px 11px; border-radius: var(--r-sm); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .site-nav a:hover { background: var(--surface-2); color: var(--text); } .nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px; border: none; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 600; color: #fff; background: var(--accent); transition: background var(--t-fast) var(--ease); } .nav-cta:hover { background: var(--accent-hover); } .nav-cta svg { width: 16px; height: 16px; } .header-actions { justify-self: end; display: inline-flex; align-items: center; gap: 8px; } /* Theme toggle — icon-only ghost button (the dashboard sidebar pattern) */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--text-3); transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .theme-toggle:hover { background: var(--surface-2); color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } .language-control { position: relative; display: inline-flex; align-items: center; } .language-control::after { content: ""; position: absolute; right: 13px; width: 6px; height: 6px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); pointer-events: none; transform: translateY(-2px) rotate(45deg); } .language-control select { min-height: 38px; max-width: 168px; padding: 0 32px 0 12px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--text); background: var(--surface-2); font-size: 13.5px; appearance: none; outline: none; cursor: pointer; transition: border-color var(--t-fast) var(--ease); } .language-control select:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); } .language-control select option { background: var(--surface); color: var(--text); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .menu-button { display: none; justify-self: end; width: 38px; height: 38px; border: none; border-radius: var(--r-sm); color: var(--text-2); background: var(--surface-2); } .menu-button:hover { background: var(--surface-3); color: var(--text); } /* Animations */ @keyframes pulse-glow { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.32; } } /* Hero Section */ .hero { min-height: calc(100vh - 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(500px, 1fr); align-items: center; gap: 60px; padding: 80px 0 100px; } .hero-eyebrow { margin: 0 0 16px; color: var(--accent); font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .hero h1 { margin: 0; font-size: clamp(44px, 6vw, 76px); line-height: 1.06; letter-spacing: -0.025em; font-weight: 700; color: var(--text); } .hero-lede { width: min(640px, 100%); margin: 28px 0 0; color: var(--text-2); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r); font-size: 15px; font-weight: 600; transition: all var(--t-fast) var(--ease); } .button svg { width: 18px; height: 18px; } .button-primary { color: #fff; background: var(--accent); border: none; } .button-primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .button-secondary { color: var(--text); background: var(--surface-2); border: none; } .button-secondary:hover { background: var(--surface-3); } .hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 52px 0 0; } .hero-metrics div { padding-top: 18px; border-top: 1px solid var(--border); } .hero-metrics dt { color: var(--accent); font-family: var(--font-heading); font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .hero-metrics dd { margin: 10px 0 0; color: var(--text-3); font-size: 13.5px; line-height: 1.5; } /* Hero Visual */ .hero-orb-container { position: relative; width: 100%; aspect-ratio: 1; max-width: 460px; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .glowing-orb { position: absolute; width: 62%; height: 62%; border-radius: 50%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); filter: blur(52px); animation: pulse-glow 5s ease-in-out infinite alternate; opacity: 0.22; } /* Hero org chart — SMIL-animated agent team (see index.html). The global `svg` icon defaults (20px, currentColor stroke) must be overridden here. */ .org-chart { position: relative; z-index: 2; width: 100%; height: auto; display: block; fill: none; stroke: none; } .org-line { stroke: var(--border-strong); stroke-width: 1.5; fill: none; } .org-card { fill: var(--surface); stroke: var(--border); stroke-width: 1; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12)); } .org-card.lead { fill: var(--accent-soft); stroke: var(--accent); filter: none; } .org-name { fill: var(--text); font-family: var(--font-sans); font-size: 14px; font-weight: 600; } .org-role { fill: var(--text-3); font-family: var(--font-sans); font-size: 11px; } /* compact tier-3 cards */ .org-chart g.sm .org-name { font-size: 12.5px; } .org-chart g.sm .org-role { font-size: 10.5px; } .org-task { fill: var(--accent); } .org-done circle { fill: var(--success); } .org-done path { stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* The global reduced-motion kill switch doesn't reach SMIL — hide the moving dots instead; the chart itself stays. */ @media (prefers-reduced-motion: reduce) { .org-task, .org-done { display: none; } } /* Sections */ .intro-strip { display: flex; justify-content: center; padding: 70px 0 110px; } .intro-strip > div { width: min(960px, 100%); text-align: center; } .intro-strip h2 { margin: 0; font-size: clamp(26px, 3.2vw, 42px); font-family: var(--font-heading); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: var(--text); } .intro-strip p { margin: 18px auto 0; max-width: 720px; color: var(--text-2); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.65; } .split, .collaboration, .playground { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 70px; align-items: center; padding: 110px 0; } .section-copy h2, .section-heading h2, .security-copy h2, .final-cta h2 { margin: 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: var(--text); } .section-copy p, .section-heading p, .security-copy p, .final-cta p { margin: 20px 0 0; color: var(--text-2); font-size: 17px; line-height: 1.65; } /* Workflow List */ .workflow-list { display: grid; gap: 14px; } .workflow-list article { display: grid; grid-template-columns: 64px 1fr; column-gap: 18px; padding: 26px 28px; border-radius: var(--r-md); background: var(--surface); transition: background var(--t-fast) var(--ease), transform var(--t) var(--ease); } .workflow-list article:hover { transform: translateX(6px); background: var(--surface-2); } .step-number { grid-row: span 2; color: var(--accent); font-family: var(--font-heading); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); } .workflow-list p { margin: 8px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.6; } .capability-band, .audiences, .pricing, .stats-band, .faq, .problem { padding: 110px 0; } /* Problem section — "Sound familiar?" */ .problem { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: radial-gradient(ellipse at 50% 0%, var(--accent-muted), transparent 70%); } .section-heading.problem-heading { display: block; text-align: center; margin-bottom: 56px; } .problem-heading h2 { margin: 0 0 14px; } .problem-heading p { max-width: 720px; margin: 0 auto; color: var(--text-2); font-size: 16px; line-height: 1.6; } .problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1100px; margin: 0 auto; } .problem-card { padding: 28px 26px; border-radius: var(--r-md); background: var(--surface); transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease); } .problem-card:hover { transform: translateY(-3px); background: var(--surface-2); } .problem-icon { display: block; width: 40px; height: 40px; padding: 9px; margin-bottom: 16px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); } .problem-card h3 { margin: 0 0 10px; color: var(--text); font-family: var(--font-heading); font-size: 17px; font-weight: 600; line-height: 1.35; } .problem-card p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.65; } .problem-pivot { max-width: 780px; margin: 56px auto 0; padding: 26px 34px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font-family: var(--font-heading); font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; line-height: 1.55; text-align: center; } @media (max-width: 880px) { .problem-grid { grid-template-columns: minmax(0, 1fr); } } /* FAQ section */ .faq .section-heading { margin-bottom: 48px; } .faq-list { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 880px; margin: 0 auto; } .faq-list details { border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: background var(--t-fast) var(--ease); } .faq-list details[open] { background: var(--surface-2); } .faq-list summary { list-style: none; cursor: pointer; padding: 18px 24px; font-family: var(--font-heading); font-weight: 600; font-size: 15.5px; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 16px; line-height: 1.4; } .faq-list summary:hover { color: var(--accent); } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary::after { content: "+"; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--accent); flex-shrink: 0; transition: transform var(--t) var(--ease); line-height: 1; } .faq-list details[open] summary::after { transform: rotate(45deg); } .faq-list details p { margin: 0; padding: 0 24px 20px; color: var(--text-2); font-size: 14px; line-height: 1.7; } .faq-list details p strong { color: var(--text); } .faq-list details p em { color: var(--accent); font-style: normal; } /* By-the-numbers stats band */ .stats-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: radial-gradient(circle at 50% 0%, var(--accent-muted), transparent 60%); } .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; } .stats-grid div { padding: 28px 24px; border-radius: var(--r-md); background: var(--surface); transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease); } .stats-grid div:hover { transform: translateY(-3px); background: var(--surface-2); } .stats-grid dt { color: var(--accent); font-family: var(--font-heading); font-size: clamp(36px, 4vw, 54px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stats-grid dd { margin: 14px 0 0; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.4; } .stats-grid dd span { display: block; margin-top: 5px; color: var(--text-3); font-size: 12.5px; font-weight: 400; line-height: 1.5; } @media (max-width: 1100px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 540px) { .stats-grid { grid-template-columns: minmax(0, 1fr); } } .section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.6fr); gap: 60px; align-items: end; margin-bottom: 56px; } .feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .feature-card { min-height: 240px; padding: 28px 26px; border-radius: var(--r-md); background: var(--surface); transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t) var(--ease); } .feature-card:hover { transform: translateY(-4px); background: var(--surface-2); box-shadow: var(--shadow); } .feature-card svg { width: 42px; height: 42px; padding: 10px; margin-bottom: 26px; color: var(--accent); background: var(--accent-soft); border-radius: var(--r-sm); } .feature-card h3 { font-size: 17px; } .feature-card p { margin: 10px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; } .collaboration { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } .collab-board { padding: 28px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); } .lane { padding: 20px 24px; border-radius: var(--r); background: var(--surface-2); } .lane h3 { font-size: 15px; } .lane p { margin: 6px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.6; } .lane-owner { box-shadow: inset 3px 0 0 var(--warn); } .lane-agent { box-shadow: inset 3px 0 0 var(--accent); } .lane-result { box-shadow: inset 3px 0 0 var(--success); } .handoff { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 16px 0; color: var(--text-4); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .handoff span { height: 1px; background: var(--border); } .handoff strong { color: var(--accent); } .coming-soon-cta { text-align: center; padding: 72px 24px; background: var(--surface); margin: 60px auto; max-width: 800px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } /* Security */ .security-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; padding: 70px 60px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .security-list { display: grid; gap: 10px; } .security-list div { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 20px; border-radius: var(--r); background: var(--surface-2); font-weight: 500; font-size: 14.5px; transition: transform var(--t) var(--ease), background var(--t-fast) var(--ease); } .security-list div:hover { transform: translateX(4px); background: var(--surface-3); } .security-list div strong { color: var(--text); } .security-list span { color: var(--text-2); } .security-list svg { flex: 0 0 auto; color: var(--accent); } /* Audiences */ .audience-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .tab { min-height: 40px; padding: 0 18px; border: none; border-radius: var(--r-pill); color: var(--text-2); background: var(--surface-2); font-size: 13.5px; font-weight: 500; transition: all var(--t-fast) var(--ease); } .tab:hover { color: var(--text); background: var(--surface-3); } .tab.is-active { color: var(--accent); background: var(--accent-soft); font-weight: 600; } .audience-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.5fr); gap: 48px; align-items: center; min-height: 280px; padding: 44px 48px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); } .audience-panel h3 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -0.02em; margin-bottom: 20px; } .audience-panel p { color: var(--text-2); line-height: 1.65; } .audience-panel ul, .price-card ul { margin: 0; padding: 0; list-style: none; } .audience-panel li, .price-card li { position: relative; padding-left: 32px; margin: 14px 0; color: var(--text-2); line-height: 1.5; font-size: 15px; } .audience-panel li::before, .price-card li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; } .pricing-note { max-width: 720px; margin: -28px auto 44px; padding: 13px 22px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--text); font-size: 13.5px; text-align: center; line-height: 1.5; } .price-tag { margin: 22px 0 12px; color: var(--accent); font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; } .price-cta { margin-top: 26px; width: 100%; justify-content: center; } .pricing-grid-flex-fix { /* CSS-only helper: make cards equal height so the CTA buttons align */ } .price-card { display: flex; flex-direction: column; } .price-card ul { flex: 1; } .pricing-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: 880px; margin: 0 auto; } .pricing-single { display: flex; justify-content: center; margin: 0 auto; max-width: 580px; } .pricing-single .price-card { width: 100%; padding: 44px 40px; } .pricing-single .price-card ul { margin: 28px 0 0; } .price-guarantee { margin: 18px 0 0; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 1.6; } .pricing-footnote { margin: 40px auto 0; max-width: 720px; text-align: center; color: var(--text-2); font-size: 14px; line-height: 1.6; } .pricing-footnote a { color: var(--accent); text-decoration: none; } .pricing-footnote a:hover { color: var(--accent-hover); text-decoration: underline; } .price-card { padding: 36px 32px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); transition: transform var(--t) var(--ease); } .price-card:hover { transform: translateY(-4px); } .price-card-featured { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent), var(--shadow); position: relative; } .price-card-featured::before { content: attr(data-badge-label); position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 4px 14px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .price { margin: 28px 0 14px; color: var(--text); font-size: 48px; line-height: 1; font-weight: 700; letter-spacing: -0.02em; } .price span { color: var(--text-3); font-size: 18px; font-weight: 600; } /* Final CTA */ .final-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 60px; align-items: center; margin-top: 60px; margin-bottom: 100px; padding: 56px 60px; border-radius: var(--r-lg); background: radial-gradient(circle at right, var(--accent-muted) 0%, transparent 65%), var(--surface); box-shadow: var(--shadow-sm); } .final-cta .button { white-space: nowrap; min-height: 54px; font-size: 16px; padding: 0 32px; } .site-footer { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 36px 0 56px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); color: var(--text-3); } /* Responsive Overrides */ @media (max-width: 900px) { .hero, .split, .collaboration, .section-heading, .security-band, .audience-panel, .final-cta { grid-template-columns: 1fr; gap: 40px; } .hero-metrics, .feature-grid, .pricing-grid { grid-template-columns: 1fr; } .site-header { grid-template-columns: 1fr auto auto; padding: 0 24px; } .site-nav { display: none; } .nav-cta { display: none; } .menu-button { display: inline-flex; align-items: center; justify-content: center; } body.nav-open .site-nav { position: absolute; top: calc(100% + 8px); left: 16px; right: 16px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } body.nav-open .site-nav a { padding: 11px 12px; border-radius: var(--r-sm); } .header-actions { gap: 6px; } .language-control select { max-width: 150px; } } /* Contact / waitlist form */ .contact-inner { max-width: 600px; margin: 0 auto; text-align: center; } .contact-lede { color: var(--text-2); margin-bottom: 30px; } .subscribe-form { display: flex; gap: 10px; justify-content: center; max-width: 450px; margin: 0 auto; flex-wrap: wrap; } .subscribe-form input[type="email"] { flex: 1 1 240px; min-width: 0; padding: 13px 16px; border-radius: var(--r-sm); border: 1px solid transparent; background: var(--surface-2); color: var(--text); outline: none; font-size: 15px; font-family: var(--font-sans); transition: all var(--t-fast); } .subscribe-form input[type="email"]::placeholder { color: var(--text-4); } .subscribe-form input[type="email"]:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); } /* Honeypot — visually hidden, bots still fill it */ .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .form-note { margin: 14px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.5; } .form-note a { color: var(--accent); } .form-note a:hover { color: var(--accent-hover); text-decoration: underline; } .form-success { margin: 16px 0 0; color: var(--success); font-size: 14px; } .form-error { margin: 16px 0 0; color: var(--danger); font-size: 14px; } .form-error a { color: inherit; text-decoration: underline; } /* Footer */ .site-footer { flex-wrap: wrap; gap: 24px; } .footer-brand p { margin: 10px 0 0; font-size: 13.5px; } .footer-nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; } .footer-nav a { color: var(--text-3); transition: color var(--t-fast) var(--ease); } .footer-nav a:hover { color: var(--text); } .footer-mail { color: var(--accent); font-size: 13.5px; } .footer-mail:hover { text-decoration: underline; } @media (max-width: 640px) { .site-footer { flex-direction: column; align-items: flex-start; } } /* Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Legal / utility pages (privacy, 404) */ .legal-page { max-width: 720px; padding: 60px 0 100px; } .legal-page h1 { font-size: clamp(30px, 4.5vw, 42px); letter-spacing: -0.025em; margin: 0 0 8px; } .legal-page h2 { font-size: 20px; letter-spacing: -0.015em; margin: 36px 0 8px; } .legal-page p { color: var(--text-2); line-height: 1.7; } .legal-page a { color: var(--accent); } .legal-page a:hover { color: var(--accent-hover); } .legal-updated { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); } .legal-back { margin-top: 48px; } .not-found { text-align: center; padding-top: 100px; } .not-found .button { display: inline-flex; margin-top: 16px; } /* Small phones — keep brand, menu, and language picker from colliding */ @media (max-width: 480px) { .site-header { gap: 8px; } .brand span { font-size: 16px; } .language-control select { max-width: 104px; } } /* Icon bullets (pricing card + note) — replaces emoji prefixes */ .pricing-note svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; color: var(--accent); } .price-card li { padding-left: 0; display: flex; align-items: flex-start; gap: 12px; } .price-card li::before { content: none; } .price-card li svg { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; color: var(--accent); } /* ── Cortex engine section ─────────────────────────────────────────────── The one part of the site that breaks from the coral accent: neural violet with a slow breathing glow, exactly like the Cortex view in the dashboard. */ @keyframes cortex-breathe { 0%, 100% { filter: drop-shadow(0 0 3px var(--cortex-glow)); } 50% { filter: drop-shadow(0 0 9px var(--cortex-glow)); } } @keyframes cortex-dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cortex) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cortex) 0%, transparent); } } .cortex-band { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 60px; align-items: center; margin: 100px auto; padding: 70px 60px; border-radius: var(--r-lg); background: radial-gradient(ellipse at 80% 20%, var(--cortex-muted), transparent 55%), var(--surface); box-shadow: inset 0 0 0 1px var(--cortex-soft); } .cortex-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--cortex); font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; text-shadow: 0 0 12px var(--cortex-glow); } .cortex-eyebrow svg { flex: 0 0 auto; width: 22px; height: 22px; animation: cortex-breathe 3.6s var(--ease) infinite; } .cortex-copy h2 { margin: 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: var(--text); } .cortex-lede { margin: 20px 0 0; color: var(--text-2); font-size: 16.5px; line-height: 1.65; } .cortex-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 32px; } .cortex-chips div { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: var(--r); background: var(--cortex-muted); color: var(--text-2); font-size: 13.5px; line-height: 1.5; } .cortex-chips svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--cortex); } .cortex-log { padding: 26px; border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--shadow); } .cortex-log-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--border); } .cortex-core { flex: 0 0 auto; width: 22px; height: 22px; color: var(--cortex); animation: cortex-breathe 3.6s var(--ease) infinite; } .cortex-log-head strong { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); } .cortex-log-head em { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--cortex-soft); color: var(--cortex); font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .cortex-steps { list-style: none; margin: 0; padding: 6px 0 0; } .cortex-steps li { display: flex; gap: 15px; padding: 13px 0; } .cortex-steps li+li { border-top: 1px solid var(--border); } .cortex-dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--cortex); animation: cortex-dot-pulse 3s ease-out infinite; } .cortex-steps li:nth-child(2) .cortex-dot { animation-delay: 0.6s; } .cortex-steps li:nth-child(3) .cortex-dot { animation-delay: 1.2s; } .cortex-steps li:nth-child(4) .cortex-dot { animation-delay: 1.8s; } .cortex-steps li:nth-child(5) .cortex-dot { animation-delay: 2.4s; } .cortex-steps strong { display: block; margin-bottom: 3px; font-family: var(--font-heading); font-size: 14px; font-weight: 600; color: var(--text); } .cortex-steps p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; } @media (max-width: 900px) { .cortex-band { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 540px) { .cortex-chips { grid-template-columns: 1fr; } .cortex-band { padding: 48px 28px; } }