/* ===================================================== Proof IT — Design System Two themes: dark (default) + light ===================================================== */ /* ---------- Theme tokens ---------- */ :root, [data-theme="dark"] { --bg: #0a0b0d; --bg-elev: #131418; --bg-card: #16181d; --bg-card-hover: #1c1f25; --border: #25272d; --border-strong: #34373f; --text: #ececef; --text-dim: #9ca0aa; --text-muted: #6b6f78; --accent-custom: #8b7cf6; --accent-custom-2: #b3a7ff; --accent-insurance: #5b8def; --accent-insurance-2: #87aaff; --accent-ai: #5ee3a1; --accent-ai-strong: #3ed487; --glow-ai: rgba(94, 227, 161, 0.35); --glow-insurance: rgba(91, 141, 239, 0.35); --glow-custom: rgba(139, 124, 246, 0.30); --grid-line: rgba(255, 255, 255, 0.025); --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.4); --inverse: #ececef; --inverse-text: #0a0b0d; } [data-theme="light"] { --bg: #fafafb; --bg-elev: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f5f6f8; --border: #e6e7eb; --border-strong: #d3d5db; --text: #0a0b0d; --text-dim: #4d5159; --text-muted: #7a7e87; --accent-custom: #6d5bd0; --accent-custom-2: #9a8fe8; --accent-insurance: #3868d8; --accent-insurance-2: #87aaff; --accent-ai: #1f9c66; --accent-ai-strong: #157a4f; --glow-ai: rgba(31, 156, 102, 0.18); --glow-insurance: rgba(56, 104, 216, 0.16); --glow-custom: rgba(109, 91, 208, 0.16); --grid-line: rgba(0, 0, 0, 0.04); --shadow-card: 0 12px 40px rgba(15, 18, 25, 0.06); --inverse: #0a0b0d; --inverse-text: #ffffff; } /* ---------- Page vertical ---------- One class on — vertical-insurance / vertical-ai / vertical-custom — recolours the page-level accents: hero gradient and glow, eyebrow dots, stat numbers, nav hover and CTA buttons, all via --page-accent. Components that are a vertical of their own keep explicit colours: the AI assistant widget and ask-chips stay AI green, form success states stay green, vertical cards keep their per-card --accent. No class on = the site-wide AI green (nothing changes). */ body { --page-accent: var(--accent-ai); --page-accent-2: var(--accent-ai-strong); --page-glow: var(--glow-ai); --page-cta-bg: var(--accent-ai); --page-cta-text: var(--inverse-text); } body.vertical-ai { --page-cta-bg: var(--accent-ai-strong); } body.vertical-insurance { --page-accent: var(--accent-insurance); --page-accent-2: var(--accent-insurance-2); --page-glow: var(--glow-insurance); --page-cta-bg: var(--accent-insurance); } body.vertical-custom { --page-accent: var(--accent-custom); --page-accent-2: var(--accent-custom-2); --page-glow: var(--glow-custom); --page-cta-bg: var(--accent-custom); } /* ---------- Reset ---------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background 0.3s ease, color 0.3s ease; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ---------- Background grid ---------- */ .bg-grid { position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: 64px 64px; z-index: 0; } .bg-glow { position: fixed; width: 800px; height: 800px; top: -200px; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, var(--page-glow) 0%, transparent 60%); filter: blur(80px); opacity: 0.5; pointer-events: none; z-index: 0; } /* ---------- Layout ---------- */ .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; } /* ---------- Navigation ---------- */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(20px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .logo { display: inline-flex; align-items: baseline; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.04em; position: relative; color: var(--text); text-decoration: none; line-height: 1; padding-bottom: 4px; } .logo-mark-text { color: var(--text); } .logo-accent { color: var(--accent-insurance); margin-left: 1px; } .logo::after { content: ''; position: absolute; left: 0; bottom: 0; width: 56%; height: 2px; background: var(--accent-insurance); border-radius: 1px; } .logo-mark { /* legacy hidden — replaced by text logo */ display: none; } .nav-links { display: flex; gap: 28px; align-items: center; } .nav-link { font-size: 13px; color: var(--text-dim); transition: color 0.15s; position: relative; } .nav-link:hover { color: var(--text); } .nav-link.active { color: var(--text); } .nav-link.dropdown::after { content: '↓'; margin-left: 4px; font-size: 9px; opacity: 0.5; } .nav-cta { background: var(--inverse); color: var(--inverse-text); padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; transition: opacity 0.15s, background 0.15s; } .nav-cta:hover { background: var(--page-cta-bg); color: var(--page-cta-text); } .nav-cta.active { color: var(--inverse-text); } /* fix: .nav-link.active was overriding to dark-on-dark */ /* Theme toggle */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text-dim); width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.18s; } .theme-toggle:hover { border-color: var(--border-strong); color: var(--text); } .theme-toggle .sun { display: none; } .theme-toggle .moon { display: block; } [data-theme="light"] .theme-toggle .sun { display: block; } [data-theme="light"] .theme-toggle .moon { display: none; } /* ---------- Page hero (non-home) ---------- */ .page-hero { padding: 56px 0 44px; position: relative; z-index: 1; border-bottom: 1px solid var(--border); } .page-hero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 20px; max-width: 18ch; } .page-hero h1 .accent { background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .page-hero .lead { font-size: 18px; color: var(--text-dim); max-width: 60ch; } .page-hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 24px; background: var(--bg-card); } .page-hero .eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--page-accent); box-shadow: 0 0 10px var(--page-accent); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ---------- Hero (home) ---------- */ .hero { padding: 56px 0 72px; position: relative; z-index: 1; } .hero h1 { font-size: clamp(40px, 6vw, 76px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.02; margin-bottom: 24px; max-width: 16ch; } .hero h1 .accent { background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .hero-sub { font-size: 18px; color: var(--text-dim); max-width: 60ch; margin-bottom: 48px; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); padding: 6px 12px; border: 1px solid var(--border); border-radius: 100px; margin-bottom: 32px; background: var(--bg-card); } .hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--page-accent); box-shadow: 0 0 10px var(--page-accent); animation: pulse 2s ease-in-out infinite; } /* ---------- AI Hero Trigger (compact, replaces inline chat on home) ---------- */ .ai-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; max-width: 640px; cursor: text; transition: all 0.18s; box-shadow: var(--shadow-card); position: relative; overflow: hidden; } .ai-trigger::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--page-accent), transparent); opacity: 0.5; } .ai-trigger:hover { border-color: var(--page-accent); box-shadow: var(--shadow-card), 0 0 0 3px var(--page-glow); } .ai-trigger-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)); display: flex; align-items: center; justify-content: center; color: var(--inverse-text); font-weight: 700; font-size: 14px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; } [data-theme="light"] .ai-trigger-icon { color: #fff; } .ai-trigger-text { flex: 1; font-size: 15px; color: var(--text-muted); } .ai-trigger-cta { background: var(--page-accent); color: var(--inverse-text); border: none; border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; font-weight: 600; } [data-theme="light"] .ai-trigger-cta { color: #fff; } .ai-trigger-presets { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; } .ai-trigger-presets .ai-preset { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 8px 14px; border-radius: 100px; font-size: 12px; font-family: inherit; transition: all 0.15s; white-space: nowrap; cursor: pointer; } .ai-trigger-presets .ai-preset:hover { border-color: var(--page-accent); color: var(--page-accent); background: color-mix(in srgb, var(--page-accent) 8%, transparent); } /* ---------- Sections ---------- */ section { position: relative; z-index: 1; } .section { padding: 60px 0; border-top: 1px solid var(--border); } .section.tight { padding: 44px 0; } .section-head { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; } .section-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 12px; } .section-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--text-muted); } .section-title { font-size: clamp(28px, 4vw, 42px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; max-width: 22ch; color: var(--text); } /* ---------- Verticals stripe ---------- */ .verticals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .vertical-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; min-height: 260px; display: flex; flex-direction: column; gap: 12px; transition: all 0.2s; position: relative; overflow: hidden; } .vertical-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent); } .vertical-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-2px); } .vertical-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); } .vertical-card h3 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; } .vertical-card p { font-size: 14px; color: var(--text-dim); flex: 1; } .vertical-link { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--accent); display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); margin-top: 16px; } .vertical-link::after { content: '↗'; font-size: 14px; transition: transform 0.15s; } .vertical-card:hover .vertical-link::after { transform: translate(2px, -2px); } .v-custom { --accent: var(--accent-custom); } .v-insurance { --accent: var(--accent-insurance); } .v-ai { --accent: var(--accent-ai); } /* ---------- Bento ---------- */ .bento-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 200px; gap: 16px; } .bento-tile { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s; position: relative; overflow: hidden; color: var(--text); } .bento-tile:hover { background: var(--bg-card-hover); border-color: var(--border-strong); transform: translateY(-2px); } .bento-tile.lg { grid-column: span 4; grid-row: span 2; } .bento-tile.md { grid-column: span 3; grid-row: span 1; } .bento-tile.sm { grid-column: span 2; grid-row: span 1; } .bento-tile.tall { grid-column: span 2; grid-row: span 2; } .tile-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .tile-title { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 8px; } .bento-tile.lg .tile-title { font-size: 32px; line-height: 1.15; max-width: 18ch; } .tile-text { font-size: 13px; color: var(--text-dim); max-width: 50ch; } .bento-tile.lg .tile-text { font-size: 15px; } .tile-arrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent, var(--text)); margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 6px; } .tile-arrow::after { content: '↗'; } .bento-tile[data-vertical="ai"] { --accent: var(--accent-ai); } .bento-tile[data-vertical="insurance"] { --accent: var(--accent-insurance); } .bento-tile[data-vertical="custom"] { --accent: var(--accent-custom); } .bento-tile[data-vertical] .tile-tag { color: var(--accent); } /* ---------- Schema canvas ---------- */ .schema-canvas { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 60px 40px; margin-top: 40px; position: relative; min-height: 460px; background-image: radial-gradient(circle at 1px 1px, var(--grid-line) 1px, transparent 0); background-size: 24px 24px; } .schema-svg { width: 100%; height: 380px; overflow: visible; } [data-theme="light"] .schema-svg rect[fill="#16181d"] { fill: #ffffff; } [data-theme="light"] .schema-svg circle[fill="#16181d"] { fill: #ffffff; } [data-theme="light"] .schema-svg text[fill="#ececef"] { fill: #0a0b0d; } [data-theme="light"] .schema-svg text[fill="#9ca0aa"] { fill: #4d5159; } [data-theme="light"] .schema-svg path[stroke="#cfd2d9"] { stroke: #4a4d54; } [data-theme="light"] .schema-svg path[stroke="#444"] { stroke: #d3d5db; } [data-theme="light"] .schema-svg rect[stroke="#cfd2d9"] { stroke: #4a4d54; } [data-theme="light"] .schema-svg text[fill="#cfd2d9"] { fill: #4a4d54; } [data-theme="light"] .schema-svg path[stroke="#5b8def"] { stroke: #3868d8; } [data-theme="light"] .schema-svg rect[stroke="#5b8def"] { stroke: #3868d8; } [data-theme="light"] .schema-svg text[fill="#5b8def"] { fill: #3868d8; } [data-theme="light"] .schema-svg circle[fill="#5b8def"] { fill: #3868d8; } [data-theme="light"] .schema-svg path[stroke="#5ee3a1"] { stroke: #1f9c66; } [data-theme="light"] .schema-svg rect[stroke="#5ee3a1"] { stroke: #1f9c66; } [data-theme="light"] .schema-svg circle[stroke="#5ee3a1"] { stroke: #1f9c66; } [data-theme="light"] .schema-svg circle[fill="#5ee3a1"] { fill: #1f9c66; } [data-theme="light"] .schema-svg text[fill="#5ee3a1"] { fill: #1f9c66; } /* ---------- Trust band ---------- */ .trust-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; } .trust-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 20px; text-align: center; } .trust-num { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; color: var(--page-accent); margin-bottom: 4px; font-feature-settings: "tnum"; } .trust-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } /* ---------- Two column section ---------- */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .two-col-text h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 16px; line-height: 1.2; } .two-col-text p { color: var(--text-dim); font-size: 15px; margin-bottom: 16px; } /* ---------- Industries icons grid ---------- */ .industries-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .industry-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px; text-align: center; transition: all 0.2s; } .industry-card:hover { border-color: var(--border-strong); background: var(--bg-card-hover); } .industry-icon { width: 36px; height: 36px; margin: 0 auto 12px; background: color-mix(in srgb, var(--page-accent) 15%, transparent); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--page-accent); font-size: 18px; } .industry-name { font-size: 13px; color: var(--text); font-weight: 500; } /* ---------- Capabilities list ---------- */ .capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .capability { background: var(--bg-card); padding: 28px; transition: background 0.18s; } .capability:hover { background: var(--bg-card-hover); } .capability h4 { font-size: 16px; font-weight: 500; margin-bottom: 8px; color: var(--text); } .capability p { font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* ---------- Tech stack ---------- */ .tech-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .tech-block { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .tech-block h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; font-weight: 500; } .tech-block p { font-size: 13px; color: var(--text-dim); line-height: 1.6; } .tech-tags { display: flex; flex-wrap: wrap; gap: 6px; } .tech-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 4px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 100px; color: var(--text-dim); } /* ---------- AI products grid (12 cards) ---------- */ .ai-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ai-product { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; transition: all 0.2s; min-height: 220px; } .ai-product:hover { background: var(--bg-card-hover); border-color: var(--page-accent); transform: translateY(-2px); } .ai-product .icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--page-accent) 15%, transparent); display: flex; align-items: center; justify-content: center; color: var(--page-accent); font-size: 18px; } .ai-product h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; } .ai-product p { font-size: 14px; color: var(--text-dim); flex: 1; } .ai-product .arrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--page-accent); display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); } .ai-product .arrow::after { content: '→'; transition: transform 0.15s; } .ai-product:hover .arrow::after { transform: translateX(4px); } /* ---------- Timeline ---------- */ .timeline { position: relative; padding: 20px 0; } .timeline::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 1px; background: var(--border); } .timeline-item { display: grid; grid-template-columns: 80px 1fr; gap: 32px; padding: 20px 0; position: relative; } .timeline-item::before { content: ''; position: absolute; left: 76px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--page-accent); box-shadow: 0 0 0 4px var(--bg); } .timeline-year { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--page-accent); font-weight: 500; } .timeline-text { color: var(--text-dim); font-size: 15px; padding-left: 20px; } /* ---------- Founders ---------- */ .founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .founder-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; } .founder-avatar { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-ai), var(--accent-insurance)); display: flex; align-items: center; justify-content: center; color: var(--inverse-text); font-weight: 600; font-size: 24px; flex-shrink: 0; font-family: 'JetBrains Mono', monospace; } .founder-name { font-size: 18px; font-weight: 500; margin-bottom: 4px; } .founder-role { font-size: 13px; color: var(--text-dim); margin-bottom: 12px; } .founder-contacts { display: flex; flex-direction: column; gap: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .founder-contacts a { color: var(--text-dim); } .founder-contacts a:hover { color: var(--page-accent); } /* ---------- Job listings ---------- */ .jobs-list { display: flex; flex-direction: column; gap: 12px; } .job-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 24px; transition: all 0.2s; } .job-card:hover { border-color: var(--page-accent); background: var(--bg-card-hover); } .job-info h4 { font-size: 17px; font-weight: 500; margin-bottom: 6px; } .job-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 0.05em; display: flex; flex-wrap: wrap; gap: 12px; } .job-meta span { display: inline-flex; align-items: center; gap: 6px; } .job-meta span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); } .job-cta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--page-accent); white-space: nowrap; } .job-cta::after { content: ' →'; } /* ---------- Process steps ---------- */ .process-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .step { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 20px; } .step-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--page-accent); letter-spacing: 0.1em; margin-bottom: 12px; } .step h4 { font-size: 15px; font-weight: 500; margin-bottom: 6px; } .step p { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* ---------- Perks ---------- */ .perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .perk { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; font-size: 14px; color: var(--text-dim); } .perk strong { color: var(--text); font-weight: 500; display: block; margin-bottom: 6px; font-size: 15px; } /* ---------- Contact form ---------- */ .contact-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 36px; display: flex; flex-direction: column; gap: 20px; } .contact-form label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; display: block; } .contact-form input, .contact-form select, .contact-form textarea { width: 100%; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.15s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--page-accent); } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form button[type="submit"] { background: var(--page-accent); color: var(--inverse-text); border: none; padding: 14px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; width: fit-content; transition: transform 0.15s; } [data-theme="light"] .contact-form button[type="submit"] { color: #fff; } .contact-form button[type="submit"]:hover { transform: translateY(-1px); } /* Office cards */ .offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .office { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .office h3 { font-size: 18px; font-weight: 500; margin-bottom: 16px; } .office dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; } .office dt { color: var(--text-muted); } .office dd { color: var(--text); } /* ---------- Product hero (single product page) ---------- */ .product-hero { padding: 80px 0; } .product-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center; } .product-hero-icon { width: 64px; height: 64px; border-radius: 14px; background: linear-gradient(135deg, var(--page-accent), var(--page-accent-2)); display: flex; align-items: center; justify-content: center; color: var(--inverse-text); font-size: 28px; margin-bottom: 24px; } [data-theme="light"] .product-hero-icon { color: #fff; } .product-hero-visual { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; aspect-ratio: 1.2; display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; } .fake-chat { display: flex; flex-direction: column; gap: 10px; } .fake-msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; max-width: 85%; } .fake-msg.in { background: var(--bg-elev); border: 1px solid var(--border); color: var(--text); } .fake-msg.out { background: color-mix(in srgb, var(--page-accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--page-accent) 25%, transparent); color: var(--text); align-self: flex-end; } .fake-msg-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; } /* ---------- Footer ---------- */ footer { border-top: 1px solid var(--border); padding: 60px 0 40px; margin-top: 80px; background: var(--bg-elev); position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; } .footer-col h4 { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 13px; color: var(--text-dim); transition: color 0.15s; } .footer-col a:hover { color: var(--text); } .footer-brand .logo { margin-bottom: 16px; } .footer-brand p { font-size: 13px; color: var(--text-dim); max-width: 36ch; margin-bottom: 20px; } .footer-contact { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 6px; } .footer-bottom { border-top: 1px solid var(--border); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; gap: 16px; } .footer-eu { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 24px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border); } .footer-eu img { height: 88px; width: auto; max-width: 100%; background: #fff; border-radius: 8px; padding: 8px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } @media (max-width: 600px) { .footer-eu img { height: 64px; padding: 6px 10px; } } /* ---------- Use Case Generator ---------- */ .usecase-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 36px; position: relative; overflow: hidden; } .usecase-section::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent, var(--accent-ai)); } .usecase-section h3 { font-size: 22px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.015em; } .usecase-section .usecase-lead { color: var(--text-dim); font-size: 14px; margin-bottom: 20px; max-width: 60ch; } .usecase-input-wrap { display: flex; gap: 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; padding: 14px 14px 14px 18px; transition: border-color 0.18s; align-items: flex-end; margin-bottom: 14px; } .usecase-input-wrap:focus-within { border-color: var(--accent, var(--accent-ai)); box-shadow: 0 0 0 3px var(--glow-ai); } .usecase-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 15px; resize: none; line-height: 1.5; min-height: 24px; max-height: 160px; } .usecase-input::placeholder { color: var(--text-muted); } .usecase-generate-btn { background: var(--accent, var(--accent-ai)); color: var(--inverse-text); border: none; border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 500; font-family: inherit; display: flex; align-items: center; gap: 6px; white-space: nowrap; transition: transform 0.15s; flex-shrink: 0; } [data-theme="light"] .usecase-generate-btn { color: #fff; } .usecase-generate-btn:hover { transform: translateY(-1px); } .usecase-generate-btn::after { content: '↗'; font-size: 14px; } .usecase-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .usecase-preset { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 8px 14px; border-radius: 100px; font-size: 12px; font-family: inherit; transition: all 0.15s; cursor: pointer; white-space: nowrap; } .usecase-preset:hover { border-color: var(--accent, var(--accent-ai)); color: var(--accent, var(--accent-ai)); background: color-mix(in srgb, var(--accent-ai) 6%, transparent); } .usecase-section[data-vertical="custom"] { --accent: var(--accent-custom); } .usecase-section[data-vertical="insurance"] { --accent: var(--accent-insurance); } .usecase-section[data-vertical="ai"] { --accent: var(--accent-ai); } .usecase-hint { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } /* ---------- Use case cards (with checkmark examples) ---------- */ .usecase-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 20px; } @media (max-width: 800px) { .usecase-cards { grid-template-columns: 1fr; } } .usecase-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; display: grid; grid-template-columns: 60px 1fr; gap: 20px; transition: all 0.2s; } .usecase-card:hover { border-color: var(--accent, var(--accent-insurance)); background: var(--bg-card-hover); } .usecase-card-icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent, var(--accent-insurance)) 15%, transparent); color: var(--accent, var(--accent-insurance)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .usecase-card h4 { font-size: 17px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.01em; } .usecase-card p { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.55; font-style: italic; } .usecase-card .examples-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .usecase-card ul { list-style: none; display: flex; flex-direction: column; gap: 6px; } .usecase-card li { padding-left: 22px; position: relative; font-size: 13px; color: var(--text-dim); line-height: 1.5; } .usecase-card li::before { content: '⊙'; position: absolute; left: 0; color: var(--accent, var(--accent-insurance)); font-size: 14px; top: -1px; } .usecase-cards[data-vertical="insurance"] .usecase-card { --accent: var(--accent-insurance); } .usecase-cards[data-vertical="custom"] .usecase-card { --accent: var(--accent-custom); } .usecase-cards[data-vertical="ai"] .usecase-card { --accent: var(--accent-ai); } /* ---------- Stats Row (large numbers) ---------- */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 800px) { .stats-row { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px 24px; text-align: center; } .stat-num { font-size: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--accent-insurance); margin-bottom: 8px; line-height: 1; font-feature-settings: "tnum"; } .stat-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); line-height: 1.3; } /* ---------- Insurance offerings (bordered cards) ---------- */ .offerings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 800px) { .offerings-grid { grid-template-columns: 1fr; } } .offering-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; position: relative; overflow: hidden; } .offering-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent-insurance); } .offering-card h4 { font-size: 18px; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.01em; } .offering-card p { font-size: 14px; color: var(--text-dim); line-height: 1.55; } /* ---------- Clients row ---------- */ .clients-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } @media (max-width: 800px) { .clients-row { grid-template-columns: repeat(2, 1fr); } } .client-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 24px 16px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.05em; color: var(--text-dim); transition: all 0.18s; } .client-card:hover { border-color: var(--accent-insurance); color: var(--text); } /* ---------- Success cases ---------- */ .success-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 800px) { .success-cases { grid-template-columns: 1fr; } } .success-case { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .success-case h4 { font-size: 17px; font-weight: 500; margin-bottom: 12px; letter-spacing: -0.01em; } .success-case p { font-style: italic; color: var(--text-dim); font-size: 14px; line-height: 1.6; } /* ---------- ISO badges (tag style) ---------- */ .iso-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 800px) { .iso-badges { grid-template-columns: 1fr; } } .iso-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 24px 28px; } .iso-badge .iso-tag { display: inline-block; background: var(--accent-insurance); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; font-weight: 600; } .iso-badge h4 { font-size: 17px; font-weight: 500; margin-bottom: 8px; } .iso-badge p { font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* ---------- Universal AI-trigger affordance ---------- */ [data-ai-q] { cursor: pointer; position: relative; transition: transform 0.18s, border-color 0.18s, background 0.18s; } [data-ai-q]:hover { transform: translateY(-2px); } /* Same look and behaviour as .card-ask: a quiet outlined pill at rest, filled with the vertical's colour on hover. */ [data-ai-q] { --ask-accent: var(--page-accent); } [data-ai-q]::after { content: '✦ Ask AI'; position: absolute; top: 8px; right: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--border-strong); padding: 4px 8px; border-radius: 100px; transition: all 0.15s; pointer-events: none; z-index: 5; font-weight: 600; } [data-ai-q]:hover::after { background: var(--ask-accent); border-color: var(--ask-accent); color: var(--inverse-text); } /* Vertical-aware accent for badges on mixed-vertical grids (home tiles); everywhere else the badge follows the page vertical via --page-accent. */ [data-ai-q][data-vertical="insurance"], .usecase-cards[data-vertical="insurance"] [data-ai-q] { --ask-accent: var(--accent-insurance); } [data-ai-q][data-vertical="custom"], .usecase-cards[data-vertical="custom"] [data-ai-q] { --ask-accent: var(--accent-custom); } [data-ai-q][data-vertical="ai"], .usecase-cards[data-vertical="ai"] [data-ai-q] { --ask-accent: var(--accent-ai); } /* ---------- Today / Leadership block ---------- */ .leadership-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 720px) { .leadership-list { grid-template-columns: 1fr; } } .leadership-item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; } .leadership-item .check { width: 24px; height: 24px; border-radius: 6px; background: color-mix(in srgb, var(--accent-insurance) 15%, transparent); color: var(--accent-insurance); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; } .leadership-item p { font-size: 14px; color: var(--text); line-height: 1.5; margin: 0; } /* ---------- Modules grid (16 small cards) ---------- */ .modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } @media (max-width: 800px) { .modules-grid { grid-template-columns: repeat(2, 1fr); } } .module-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 14px; text-align: center; font-size: 13px; font-weight: 500; color: var(--text); transition: all 0.15s; position: relative; } .module-cell:hover { border-color: var(--accent-insurance); background: var(--bg-card-hover); } .module-cell .num { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 4px; } /* ---------- Advanced capabilities (8 small boxes) ---------- */ .capabilities-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .capabilities-8 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .capabilities-8 { grid-template-columns: 1fr; } } .cap-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 18px; text-align: center; font-size: 14px; color: var(--text); font-weight: 500; line-height: 1.4; transition: all 0.18s; min-height: 120px; display: flex; align-items: center; justify-content: center; } .cap-box:hover { border-color: var(--accent-insurance); background: var(--bg-card-hover); } /* ---------- Markets row ---------- */ .markets-row { display: flex; flex-wrap: wrap; gap: 10px; } .market-chip { background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; padding: 10px 18px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; font-weight: 600; color: var(--accent-insurance); } /* ---------- Supported products ---------- */ .products-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.4fr; gap: 16px; } @media (max-width: 1000px) { .products-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .products-grid { grid-template-columns: 1fr; } } .product-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; min-height: 160px; } .product-card.combo { border-style: dashed; border-color: var(--accent-insurance); } .product-card h4 { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: var(--accent-insurance); } .product-card .sub { font-size: 12px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; } .product-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* ---------- Architecture (6 features) ---------- */ .arch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 800px) { .arch-grid { grid-template-columns: 1fr; } } .arch-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; } .arch-item .icon { width: 32px; height: 32px; margin-bottom: 12px; border-radius: 8px; background: color-mix(in srgb, var(--accent-insurance) 12%, transparent); color: var(--accent-insurance); display: flex; align-items: center; justify-content: center; font-size: 14px; } .arch-item h4 { font-size: 14px; font-weight: 500; margin-bottom: 6px; } .arch-item p { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* ---------- Tech stack rows ---------- */ .tech-rows { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .tech-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--border); align-items: baseline; } .tech-row:last-child { border-bottom: none; } .tech-row .label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .tech-row .val { font-size: 14px; color: var(--text); } @media (max-width: 700px) { .tech-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 18px; } } /* ---------- Implementation phases (5-step horizontal) ---------- */ .phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } @media (max-width: 1000px) { .phases { grid-template-columns: repeat(2, 1fr); gap: 12px; } } @media (max-width: 600px) { .phases { grid-template-columns: 1fr; } } .phase { background: var(--bg-card); border: 1px solid var(--border); padding: 24px 20px; position: relative; } .phase:not(:last-child) { border-right: none; } @media (max-width: 1000px) { .phase { border: 1px solid var(--border); border-radius: 12px; } } .phase:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .phase:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .phase-num { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-insurance); letter-spacing: 0.12em; margin-bottom: 12px; } .phase h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.005em; } .phase p { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* ---------- Pricing principles (3 cards) ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } } .price-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px 24px; position: relative; overflow: hidden; } .price-card::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 4px; background: var(--accent-insurance); } .price-card .price-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--accent-insurance); letter-spacing: 0.12em; margin-bottom: 8px; } .price-card h4 { font-size: 17px; font-weight: 500; margin-bottom: 10px; } .price-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; } /* ---------- Quality assurance pyramid ---------- */ .qa-pyramid { display: flex; flex-direction: column; align-items: center; gap: 6px; } .qa-layer { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 14px 24px; text-align: center; font-size: 13px; color: var(--text); font-weight: 500; transition: all 0.15s; } .qa-layer:hover { border-color: var(--accent-insurance); } .qa-layer.l1 { width: 50%; } .qa-layer.l2 { width: 65%; } .qa-layer.l3 { width: 80%; } .qa-layer.l4 { width: 95%; } .qa-layer.l5 { width: 100%; max-width: 600px; } @media (max-width: 600px) { .qa-layer.l1, .qa-layer.l2, .qa-layer.l3, .qa-layer.l4, .qa-layer.l5 { width: 100%; } } /* ---------- Integration areas (8 cells) ---------- */ .integration-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .integration-areas { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .integration-areas { grid-template-columns: 1fr; } } .integration-cell { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px; transition: all 0.15s; } .integration-cell:hover { border-color: var(--accent-insurance); } .integration-cell .icon { font-size: 20px; color: var(--accent-insurance); margin-bottom: 12px; } .integration-cell h5 { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-insurance); margin-bottom: 6px; font-weight: 600; } .integration-cell p { font-size: 12px; color: var(--text-dim); line-height: 1.5; } /* ---------- Partner logos row ---------- */ .partners-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } @media (max-width: 1000px) { .partners-row { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .partners-row { grid-template-columns: repeat(2, 1fr); } } .partner-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 20px 14px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.06em; color: var(--text-dim); } /* ---------- Security sub-navigation ---------- */ .subnav { background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 65px; z-index: 90; backdrop-filter: blur(20px); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); } .subnav-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; gap: 4px; align-items: center; overflow-x: auto; scrollbar-width: none; } .subnav-inner::-webkit-scrollbar { display: none; } .subnav-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 16px; white-space: nowrap; padding: 14px 0; } .subnav-link { padding: 14px 18px; font-size: 13px; color: var(--text-dim); border-bottom: 2px solid transparent; transition: all 0.15s; white-space: nowrap; text-decoration: none; } .subnav-link:hover { color: var(--text); } .subnav-link.active { color: var(--accent-insurance); border-bottom-color: var(--accent-insurance); } /* ---------- Security overview grid ---------- */ .security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 800px) { .security-grid { grid-template-columns: 1fr; } } .security-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; display: flex; gap: 20px; align-items: flex-start; transition: all 0.2s; } .security-card:hover { border-color: var(--accent-insurance); transform: translateY(-2px); } .security-card .sec-icon { width: 44px; height: 44px; border-radius: 10px; background: color-mix(in srgb, var(--accent-insurance) 15%, transparent); color: var(--accent-insurance); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .security-card h3 { font-size: 17px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.01em; } .security-card p { font-size: 14px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.55; } .security-card a.sec-link { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; color: var(--accent-insurance); text-decoration: none; } .security-card a.sec-link::after { content: ' →'; } /* ---------- Controls list (groups of controls) ---------- */ .controls-group { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin-bottom: 16px; } .controls-group h3 { font-size: 18px; font-weight: 500; margin-bottom: 6px; letter-spacing: -0.01em; } .controls-group .grp-tag { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-insurance); margin-bottom: 14px; } .controls-group ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } @media (max-width: 700px) { .controls-group ul { grid-template-columns: 1fr; } } .controls-group li { padding-left: 24px; position: relative; font-size: 13px; color: var(--text-dim); line-height: 1.5; } .controls-group li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-insurance); font-weight: 700; } .controls-group li strong { color: var(--text); font-weight: 500; } /* ---------- Subprocessor table ---------- */ .sub-table { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } .sub-row { display: grid; grid-template-columns: 200px 1.2fr 140px 100px; gap: 24px; padding: 18px 24px; border-bottom: 1px solid var(--border); align-items: baseline; font-size: 13px; } .sub-row.head { background: var(--bg-elev); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } .sub-row:last-child { border-bottom: none; } .sub-row .sub-name { font-weight: 500; color: var(--text); } .sub-row .sub-purpose { color: var(--text-dim); } .sub-row .sub-location { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); } .sub-row .sub-tier { font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-insurance); } @media (max-width: 800px) { .sub-row { grid-template-columns: 1fr; gap: 6px; padding: 16px 20px; } .sub-row.head { display: none; } .sub-row .sub-name::before { content: 'Vendor: '; color: var(--text-muted); font-size: 10px; } .sub-row .sub-purpose::before { content: 'Purpose: '; color: var(--text-muted); font-size: 10px; } .sub-row .sub-location::before { content: 'Location: '; color: var(--text-muted); font-size: 10px; } .sub-row .sub-tier::before { content: 'Tier: '; color: var(--text-muted); font-size: 10px; } } /* ---------- Resources list ---------- */ .resources-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (max-width: 800px) { .resources-list { grid-template-columns: 1fr; } } .resource-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; transition: all 0.18s; text-decoration: none; } .resource-card:hover { border-color: var(--accent-insurance); background: var(--bg-card-hover); } .resource-card .res-info h4 { font-size: 15px; font-weight: 500; margin-bottom: 4px; color: var(--text); } .resource-card .res-info p { font-size: 12px; color: var(--text-dim); } .resource-card .res-action { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent-insurance); white-space: nowrap; } /* ---------- Compliance cert detail card ---------- */ .cert-detail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 32px; margin-bottom: 16px; position: relative; overflow: hidden; } .cert-detail::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent-insurance); } .cert-detail .cert-tag { display: inline-block; background: var(--accent-insurance); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px; font-weight: 600; } .cert-detail h3 { font-size: 20px; font-weight: 500; margin-bottom: 10px; letter-spacing: -0.015em; } .cert-detail p { font-size: 14px; color: var(--text-dim); line-height: 1.6; margin-bottom: 14px; } .cert-detail .cert-meta { display: grid; grid-template-columns: 130px 1fr; gap: 6px 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .cert-detail .cert-meta dt { color: var(--text-muted); } .cert-detail .cert-meta dd { color: var(--text); } .lang-option { background: transparent; border: none; color: var(--text-dim); padding: 8px 12px; border-radius: 6px; font-family: inherit; font-size: 13px; cursor: pointer; text-align: start; display: flex; justify-content: space-between; align-items: center; gap: 12px; transition: background 0.15s, color 0.15s; } .lang-option:hover { background: var(--bg-card); color: var(--text); } .lang-option.active { background: color-mix(in srgb, var(--page-accent) 15%, transparent); color: var(--page-accent); } .lang-option .lang-code { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; } /* ---------- Partner cards ---------- */ .partner-region { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 28px; margin-bottom: 16px; } .partner-region-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; } .partner-region-head h3 { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; } .partner-region-head .reg-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-insurance); } .partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } @media (max-width: 1000px) { .partner-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } } .partner-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; padding: 18px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: all 0.15s; } .partner-card:hover { border-color: var(--accent-insurance); background: var(--bg-card-hover); } .partner-logo { width: 56px; height: 56px; border-radius: 12px; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 18px; color: var(--accent-insurance); border: 1px solid var(--border); letter-spacing: -0.02em; } .partner-name { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; } .partner-role { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } .partner-region-desc { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } /* ---------- CTA banner ---------- */ .cta-banner { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-ai) 8%, var(--bg-card)), color-mix(in srgb, var(--accent-insurance) 6%, var(--bg-card))); border: 1px solid var(--border-strong); border-radius: 16px; padding: 60px 40px; text-align: center; } .cta-banner h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 12px; } .cta-banner p { font-size: 15px; color: var(--text-dim); max-width: 50ch; margin: 0 auto 28px; } .cta-button { display: inline-flex; align-items: center; gap: 10px; background: var(--page-cta-bg); color: var(--page-cta-text); padding: 12px 24px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: transform 0.15s; } .cta-button:hover { transform: translateY(-1px); } .cta-button::after { content: '↗'; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } .ai-products-grid { grid-template-columns: repeat(2, 1fr); } .tech-stack { grid-template-columns: 1fr; } .process-steps { grid-template-columns: repeat(2, 1fr); } .perks-grid { grid-template-columns: repeat(2, 1fr); } .product-hero-grid { grid-template-columns: 1fr; } .two-col { grid-template-columns: 1fr; } } @media (max-width: 720px) { .container { padding: 0 20px; } .hero { padding: 40px 0 60px; } .verticals-grid { grid-template-columns: 1fr; } .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } .bento-tile.lg, .bento-tile.md, .bento-tile.sm, .bento-tile.tall { grid-column: span 2; grid-row: span 1; } .bento-tile.lg { grid-row: span 2; } .trust-row { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 40px; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 9px; margin-left: auto; background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-links { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 20px 20px; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); display: none; } .nav-links.open { display: flex; } .nav-link { font-size: 15px; padding: 10px 2px; } .nav-cta { text-align: center; padding: 12px; margin-top: 6px; } /* Touch targets >=44px (Apple HIG) */ .nav-toggle { width: 44px; height: 44px; } .nav-link { padding: 12px 2px; } .ai-trigger-presets .ai-preset { min-height: 44px; padding: 10px 16px; } .footer-col ul { gap: 2px; } .footer-col ul a { display: inline-block; padding: 14px 0; } .footer-contact a { display: inline-block; padding: 12px 0; } .vertical-link { min-height: 44px; } .mono-link { padding: 14px 0; } .section { padding: 40px 0; } .section.tight { padding: 28px 0; } .section-head { margin-bottom: 22px; } .page-hero { padding: 36px 0 28px; } .hero { padding: 32px 0 44px; } .schema-canvas { padding: 30px 20px; } .ai-products-grid { grid-template-columns: 1fr; } .industries-grid { grid-template-columns: repeat(2, 1fr); } .capabilities { grid-template-columns: 1fr; } .founders { grid-template-columns: 1fr; } .offices { grid-template-columns: 1fr; } .timeline::before { left: 12px; } .timeline-item { grid-template-columns: 60px 1fr; gap: 16px; } .timeline-item::before { left: 8px; } .perks-grid { grid-template-columns: 1fr; } } /* ---------- Flagship product cards ---------- */ .ai-product.flagship { border-color: var(--border-strong); } .flagship-domain { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--page-accent); margin-bottom: 8px; } /* ---------- Card footer + Ask AI button ---------- */ .ai-product-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); } .ai-product-foot .arrow { padding-top: 0; border-top: none; } .card-ask { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); background: transparent; border: 1px solid var(--border-strong); border-radius: 100px; padding: 6px 12px; cursor: pointer; white-space: nowrap; transition: all 0.15s; } .card-ask::before { content: '✦'; margin-right: 5px; opacity: 0.7; } .card-ask:hover { border-color: var(--page-accent); background: var(--page-accent); color: var(--inverse-text); } /* FAQ item with Ask AI button */ .faq-item { display: flex; flex-direction: column; align-items: flex-start; } .faq-ask { margin-top: 14px; } /* ---------- Mobile nav toggle ---------- min-width guard so this never overrides the <=720px display:inline-flex rule */ @media (min-width: 721px) { .nav-toggle { display: none; } } /* ---------- Mono inline links & footer version (were inline styles) ---------- */ .mono-link { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.05em; display: inline-block; padding: 12px 0; } .mono-link--insurance { color: var(--accent-insurance); } .mono-link--ai { color: var(--accent-ai); } .footer-version { font-family: 'JetBrains Mono', monospace; font-size: 11px; } /* ---------- Product page v10 additions ---------- */ .product-badge { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border-strong); color: var(--text-dim); margin-bottom: 16px; } .product-badge.core { color: var(--accent-insurance); border-color: var(--accent-insurance); } .product-badge.standalone { color: var(--page-accent); border-color: var(--page-accent); } .why-callout { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 24px 28px; max-width: 76ch; } .why-callout .why-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 10px; } .why-callout p { font-size: 15px; color: var(--text-dim); line-height: 1.65; } .feature-chips { display: flex; flex-wrap: wrap; gap: 8px; } .feature-chips .chip { font-size: 13px; color: var(--text-dim); border: 1px solid var(--border); background: var(--bg-card); border-radius: 100px; padding: 8px 14px; } .bestfit-tags { display: flex; flex-wrap: wrap; gap: 8px; } .bestfit-tags .tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.05em; color: var(--text-dim); border: 1px solid var(--border-strong); border-radius: 6px; padding: 7px 12px; } .outcome-band { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 16px; padding: 32px 36px; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start; } .outcome-band .outcome-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); padding-top: 4px; } .outcome-band p { font-size: 16px; line-height: 1.6; color: var(--text); max-width: 70ch; } @media (max-width: 600px) { .outcome-band { grid-template-columns: 1fr; gap: 8px; padding: 24px 20px; } } .module-cell.detailed { text-align: left; } .module-cell.detailed h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; } .module-cell.detailed p { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; font-weight: 400; } .hero-chiplist { display: flex; flex-wrap: wrap; gap: 8px; align-content: center; } /* hero visual already draws the card frame — no inner frame, no fixed ratio */ .product-hero-visual:has(.hero-chiplist) { aspect-ratio: auto; min-height: 280px; } .hero-chiplist .chip { font-size: 12px; color: var(--text-dim); border: 1px solid var(--border); border-radius: 100px; padding: 7px 12px; } .lines-note { margin-top: 20px; font-size: 14px; color: var(--text-dim); border-top: 1px dashed var(--border); padding-top: 16px; max-width: 80ch; } /* ---------- Hero platform scheme (PINS) ---------- */ .hero-scheme { display: flex; flex-direction: column; height: 100%; } .hero-scheme svg { width: 100%; height: 100%; flex: 1; min-height: 0; } .hero-scheme-note { text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); padding-top: 8px; } .product-hero-visual:has(.hero-scheme) { aspect-ratio: auto; min-height: 380px; } /* ---------- Contact modal ---------- */ button.cta-button { border: none; font-size: inherit; } .cta-button.cta-ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); } .contact-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 290; display: none; } .contact-modal-backdrop.open { display: block; } .contact-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: min(86vh, 720px); overflow-y: auto; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 16px; padding: 28px; z-index: 300; display: none; } .contact-modal.open { display: block; } .contact-modal h3 { font-size: 20px; margin-bottom: 4px; } .contact-modal .cm-topic { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent); letter-spacing: 0.05em; margin-bottom: 18px; display: block; } .contact-modal label { display: block; font-size: 12px; color: var(--text-dim); margin: 12px 0 6px; } .contact-modal input, .contact-modal textarea { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 12px; } .contact-modal textarea { min-height: 90px; resize: vertical; } .contact-modal input:focus, .contact-modal textarea:focus { outline: none; border-color: var(--accent); } .contact-modal .cm-close { /* The modal itself scrolls, so the button must stick to the visible top edge — absolute positioning scrolls away with the content. */ position: sticky; top: 0; float: right; margin: -14px -14px 0 0; width: 36px; height: 36px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); font-size: 16px; cursor: pointer; z-index: 2; } /* ---------- Shared contact form (inline on contact.html + inside the popup) ---------- */ .pf-fields { display: flex; flex-direction: column; } .contact-form .pf-fields { gap: 20px; } .pf-hp { position: absolute; left: -9999px; height: 0; border: 0; padding: 0; } .pf-captcha { max-width: 140px; } .pf-form .cta-button::after { content: none; } .pf-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; } .pf-alt { font-size: 12px; color: var(--text-dim); } .pf-alt a { color: var(--accent-ai); } .pf-success, .pf-error { display: none; margin-top: 16px; padding: 16px; border-radius: 10px; font-size: 14px; color: var(--text); } .pf-success { border: 1px solid var(--accent-ai); background: color-mix(in srgb, var(--accent-ai) 8%, transparent); } .pf-success strong { color: var(--accent-ai); } .pf-error { border: 1px solid var(--accent-insurance); } .pf-form.sent .pf-success { display: block; } .pf-form.failed .pf-error { display: block; } .pf-form.sent .pf-fields, .pf-form.sent .pf-actions { opacity: 0.35; pointer-events: none; } /* ---------- Accessibility panel ---------- */ .a11y-toggle { background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 34px; height: 30px; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .a11y-toggle:hover { color: var(--text); border-color: var(--border-strong); } .a11y-toggle:focus-visible, .a11y-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .a11y-panel { position: absolute; top: 100%; right: 32px; margin-top: 8px; width: 260px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px; z-index: 280; display: none; box-shadow: var(--shadow-card); } .a11y-panel.open { display: block; } .a11y-panel h4 { font-size: 13px; margin-bottom: 12px; } .a11y-panel label { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); padding: 9px 0; cursor: pointer; } .a11y-panel input { width: 18px; height: 18px; flex: none; accent-color: var(--accent); } .a11y-reset { margin-top: 10px; font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; padding: 4px 0; } /* a11y modes */ /* Font sizes across the site are authored in px (including inline styles on generated product pages), so a root font-size bump reaches only a fraction of the text. Zoom scales the whole layout instead — text and its containers grow together, so nothing overflows. */ html.a11y-large-text body { zoom: 1.15; } /* Media queries still see the unzoomed viewport, so the nav gets ~15% less room than it thinks. Tighten its spacing to keep it on one line. */ html.a11y-large-text .nav-links { gap: 12px; } html.a11y-large-text .nav-inner { gap: 16px; padding-left: 16px; padding-right: 16px; } @supports not (zoom: 1) { html.a11y-large-text { font-size: 118%; } html.a11y-large-text body { font-size: 17px; } } html.a11y-underline a { text-decoration: underline !important; } html.a11y-contrast { --text-dim: var(--text); --text-muted: var(--text); --border: #6f747d; --border-strong: #a8adb6; } [data-theme="light"].a11y-contrast { --border: #9aa0a8; --border-strong: #4d5159; } html.a11y-contrast .bg-grid, html.a11y-contrast .bg-glow { display: none; } html.a11y-motion { scroll-behavior: auto !important; } html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Honour the OS-level setting even before anyone opens the panel. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (max-width: 720px) { /* The toggle sits in the header row next to the burger; it takes over the auto margin so the pair stays together on the right. */ .a11y-toggle { width: 44px; height: 44px; margin-left: auto; } .nav-toggle { margin-left: 0; } .nav-inner { gap: 12px; } .a11y-panel { right: 12px; left: 12px; width: auto; } .a11y-panel label { min-height: 44px; } .a11y-reset { min-height: 44px; } } .contact-modal select { width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 14px; padding: 11px 12px; } .contact-modal select:focus { outline: none; border-color: var(--accent); } /* ---------- Comparison table ---------- */ .compare-table th { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); padding: 12px 14px; border-bottom: 2px solid var(--border-strong); } .compare-table th:nth-child(2) { color: var(--accent-insurance); } .compare-table td { padding: 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-dim); line-height: 1.55; } .compare-table td:nth-child(2) { background: color-mix(in srgb, var(--accent-insurance) 4%, transparent); color: var(--text); } .compare-table tr:hover td { background: var(--bg-card); } .compare-table tr:hover td:nth-child(2) { background: color-mix(in srgb, var(--accent-insurance) 8%, transparent); } /* ---------- "Built on the core" zone ---------- */ .builton-zone { border: 1px dashed var(--border-strong); border-radius: 16px; padding: 24px; background: color-mix(in srgb, var(--accent-insurance) 3%, transparent); } /* ---------- Language switch (header) ---------- */ .lang-switch { position: relative; } .lang-switch > summary { list-style: none; cursor: pointer; background: transparent; border: 1px solid var(--border); color: var(--text-dim); height: 34px; padding: 0 10px; border-radius: 8px; display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; transition: all 0.18s; user-select: none; } .lang-switch > summary::-webkit-details-marker { display: none; } .lang-switch > summary::after { content: '▾'; font-size: 10px; opacity: 0.7; } .lang-switch > summary:hover, .lang-switch[open] > summary { border-color: var(--border-strong); color: var(--text); } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 60; } .lang-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; font-size: 13px; color: var(--text-dim); text-decoration: none; } .lang-opt.active { color: var(--text); background: var(--bg-card-hover); font-weight: 600; } .lang-opt.disabled { color: var(--text-muted); cursor: default; } .lang-opt em { font-style: normal; font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--page-accent); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } /* ===== COOKIE CONSENT BANNER ===== */ .cookie-banner { position: fixed; bottom: 24px; left: 24px; right: 24px; max-width: 760px; margin: 0 auto; z-index: 250; display: none; align-items: center; gap: 20px; padding: 18px 22px; background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-card); } .cookie-banner.show { display: flex; } .cookie-banner p { flex: 1; min-width: 240px; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-dim); } .cookie-banner a { color: var(--text); text-decoration: underline; } .cookie-btn-row { display: flex; gap: 8px; } .cookie-btn { padding: 9px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; } .cookie-btn.accept { background: var(--text); color: var(--bg); border: 1px solid var(--text); } .cookie-btn.reject { background: transparent; color: var(--text-dim); border: 1px solid var(--border-strong); } .cookie-btn.reject:hover { color: var(--text); border-color: var(--text-muted); } @media (max-width: 640px) { .cookie-banner { bottom: 12px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } .cookie-btn-row { width: 100%; } .cookie-btn { flex: 1; padding: 11px 12px; } }