/* ============================================================
Haidi marketing site — v2 core skin
Canvas #14161D · accent teal #47B9BB · brand palette only.
Dark, technical, product-led. Class contract is shared with
haidi-chrome.js / haidi-mocks.js / haidi-site.js.
============================================================ */
/* Fonts (Inter + JetBrains Mono) are loaded via a single in BaseLayout's . */
:root {
/* brand (Haidi design system) */
--teal: #47B9BB;
--teal-bright: #5FD0D2;
--teal-deep: #2E8E90;
--coral: #F08989;
--navy: #1D203E;
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
--mono: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
--maxw: 1280px;
--pad: 40px;
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--ease-io: cubic-bezier(0.4, 0, 0.2, 1);
}
/* dark theme (default) */
html[data-theme="dark"],
html:not([data-theme]) {
color-scheme: dark;
--bg: #14161D;
--bg-1: #181B24;
--bg-2: #1C2029;
--bg-elevated: #1F232E;
--text: #FAFBFD;
--text-body: #C8CFD9;
--text-muted: #97A1AE;
--text-faint: #788393;
--line: rgba(255,255,255,0.08);
--line-2: rgba(255,255,255,0.13);
--glow: rgba(71,185,187,0.16);
--teal-06: rgba(71,185,187,0.06);
--teal-08: rgba(71,185,187,0.08);
--teal-12: rgba(71,185,187,0.12);
--teal-16: rgba(71,185,187,0.16);
--teal-22: rgba(71,185,187,0.22);
--coral-12: rgba(240,137,137,0.12);
--surface-hover: rgba(255,255,255,0.05);
--surface-subtle: rgba(255,255,255,0.02);
--surface-muted: rgba(255,255,255,0.03);
--frame-dot: rgba(255,255,255,0.13);
--grid-dot: rgba(255,255,255,0.035);
--grid-teal: rgba(71,185,187,0.10);
--shadow-frame: 0 60px 120px -50px rgba(0,0,0,0.9);
--shadow-card: 0 30px 60px -36px rgba(0,0,0,0.8);
--hero-scrim-1: rgba(20,22,29,0.58);
--hero-scrim-2: rgba(20,22,29,0.18);
--hero-scrim-3: rgba(20,22,29,0.32);
--logo-filter: none;
}
/* light theme */
html[data-theme="light"] {
color-scheme: light;
--bg: #F4F5F7;
--bg-1: #FFFFFF;
--bg-2: #ECEEF2;
--bg-elevated: #FFFFFF;
--text: #0E1117;
--text-body: #2A3140;
--text-muted: #4E5868;
--text-faint: #6B7585;
--line: rgba(0,0,0,0.08);
--line-2: rgba(0,0,0,0.13);
--glow: rgba(71,185,187,0.14);
--teal-06: rgba(71,185,187,0.06);
--teal-08: rgba(71,185,187,0.10);
--teal-12: rgba(71,185,187,0.14);
--teal-16: rgba(71,185,187,0.18);
--teal-22: rgba(71,185,187,0.28);
--coral-12: rgba(240,137,137,0.14);
--surface-hover: rgba(0,0,0,0.04);
--surface-subtle: rgba(0,0,0,0.02);
--surface-muted: rgba(0,0,0,0.05);
--frame-dot: rgba(0,0,0,0.12);
--grid-dot: rgba(0,0,0,0.06);
--grid-teal: rgba(71,185,187,0.12);
--shadow-frame: 0 40px 80px -40px rgba(15,23,42,0.18);
--shadow-card: 0 24px 48px -28px rgba(15,23,42,0.14);
--hero-scrim-1: rgba(244,245,247,0.78);
--hero-scrim-2: rgba(244,245,247,0.42);
--hero-scrim-3: rgba(244,245,247,0.55);
--logo-filter: brightness(0) saturate(100%);
}
/* canvas darkness variants (Tweaks — dark theme only) */
html[data-theme="dark"][data-canvas="black"],
html:not([data-theme])[data-canvas="black"] { --bg:#0A0C12; --bg-1:#0F121A; --bg-2:#12151E; --bg-elevated:#161A24; }
html[data-theme="dark"][data-canvas="graphite"],
html:not([data-theme])[data-canvas="graphite"] { --bg:#14161D; --bg-1:#181B24; --bg-2:#1C2029; --bg-elevated:#1F232E; }
html[data-theme="dark"][data-canvas="navy"],
html:not([data-theme])[data-canvas="navy"] { --bg:#1A1E33; --bg-1:#20243C; --bg-2:#242843; --bg-elevated:#2A2F4E;
--line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.16); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.skip-link {
position: absolute; left: -9999px; top: auto; z-index: 200;
padding: 12px 18px; background: var(--teal); color: #06181a;
font-weight: 600; font-size: 14px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; outline: none; }
body {
margin: 0;
font-family: var(--font);
background: var(--bg);
color: var(--text-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { color: var(--text); margin: 0; line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; }
p { margin: 0; }
::selection { background: var(--teal); color: #06181a; }
/* ── scrollbar (slim, theme-aware) ── */
html { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--line-2);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--teal); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* ── display typography ── */
.display { font-weight: 500; letter-spacing: -0.035em; }
.accent, .line2 { color: var(--teal); }
/* Body-font choices (Tweaks: data-font on ). "inter" is the :root default.
Alternates lazy-load their webfont when picked; "system" uses no webfont. */
html[data-font="geist"] { --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="plex"] { --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="manrope"] { --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="system"] { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; }
/* ── page background: faint drafting grid + center rails ──── */
body::before {
content: "";
position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
radial-gradient(var(--grid-dot) 1px, transparent 1px),
radial-gradient(var(--grid-teal) 1px, transparent 1.4px);
background-size: 92px 92px, 252px 252px;
background-position: 0 0, 46px 78px;
opacity: 0.9;
}
/* ── layout ──────────────────────────────────────────────── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
.wrap-wide { max-width: 1520px; margin: 0 auto; padding: 0 var(--pad); position: relative; z-index: 1; }
section { position: relative; z-index: 1; }
.section-pad { padding: 150px 0; }
@media (max-width: 900px) { .section-pad { padding: 90px 0; } :root { --pad: 22px; } }
/* numbered section rule */
.sec-rule { border-top: 1px solid var(--line); }
.sec-rule .wrap, .sec-rule .wrap-wide {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
padding-top: 16px;
font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--text-muted);
}
.sec-rule .sr-num { color: var(--teal); }
/* mono micro-label */
.eyebrow {
display: inline-flex; align-items: center; gap: 9px;
font-family: var(--mono); font-size: 12px; font-weight: 400;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal);
white-space: nowrap;
}
.eyebrow::before { content: "["; color: var(--text-muted); }
.eyebrow::after { content: "]"; color: var(--text-muted); }
.eyebrow--wrap { white-space: normal; }
.eyebrow .dot { width: 5px; height: 5px; background: var(--coral); flex: 0 0 auto; }
.section-head { max-width: 760px; }
.section-head.center { margin: 0 auto; text-align: center; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 56px); margin: 24px 0 22px; }
.section-head p { font-size: 18px; color: var(--text-body); max-width: 540px; text-wrap: pretty; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.lead { font-size: clamp(19px, 2vw, 24px); color: var(--text-body); line-height: 1.5; text-wrap: pretty; }
/* ── buttons ─────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
padding: 13px 24px; border-radius: 999px;
border: 1px solid transparent; cursor: pointer;
transition: transform .25s var(--ease), box-shadow .25s, background .2s, border-color .2s, color .2s;
white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--teal); color: #06181A; box-shadow: 0 10px 30px -12px rgba(71,185,187,0.55); }
.btn-primary:hover { background: var(--teal-bright); transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(71,185,187,0.6); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-secondary:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text-body); padding: 13px 16px; }
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 9px 18px; font-size: 13px; }
.btn-lg { padding: 16px 30px; font-size: 15px; }
/* Header CTAs ("Book a meeting" + "Prepare to launch") render at equal size.
min-width equalizes width; line-height:1 equalizes height across the