/* ============================================================
BrainzLab landing — combined design-system stylesheet.
Generated from the BrainzLab Design System bundle:
colors_and_type.css (tokens) + marketing.css + brainzlab.css.
Loaded ONLY by layouts/brainzlab.html.erb (global element
selectors are intentional and scoped to that layout).
============================================================ */
/* ---- tokens (colors_and_type.css) ---- */
/* ============================================================
Sondea Design System — core tokens
Link this file in on every page.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* ─── PRIMARY — violet ─────────────────────────────────────── */
--violet-50: #F5F3FF;
--violet-100: #EDE9FE;
--violet-200: #DDD6FE;
--violet-300: #C4B5FD;
--violet-400: #A78BFA;
--violet-500: #7C3AED; /* gradient end / hover */
--violet-600: #6D28D9; /* PRIMARY brand */
--violet-700: #5B21B6; /* hover-on-primary */
--violet-800: #4C1D95;
--violet-900: #2E1065;
/* ─── ACCENT — cyan ────────────────────────────────────────── */
--cyan-50: #ECFEFF;
--cyan-100: #CFFAFE;
--cyan-200: #A5F3FC;
--cyan-300: #67E8F9;
--cyan-400: #22D3EE; /* ACCENT brand */
--cyan-500: #06B6D4;
--cyan-600: #0891B2;
/* ─── SECONDARY — warm (human / consulting · Brainz Advisory) ─ */
--warm-50: #FEF6EE;
--warm-100: #FBE6D2;
--warm-300: #F6BD86;
--warm-400: #F2A65A; /* WARM secondary brand */
--warm-500: #E8854A;
--warm-600: #C76A35;
--warm-bg: rgba(242,166,90,.12);
--warm-border: rgba(242,166,90,.30);
/* ─── INK — near-blacks for dark surfaces ──────────────────── */
--ink-950: #0B0B12; /* dark hero / footer canvas */
--ink-900: #131321;
--ink-800: #1C1C2E;
--ink-700: #262640;
--ink-600: #34344F;
/* ─── PAPER + slate (text on light) ────────────────────────── */
--paper: #F7F7FB; /* light body background */
--white: #FFFFFF;
--slate-50: #F8FAFC;
--slate-100: #F1F5F9;
--slate-200: #E2E8F0;
--slate-300: #CBD5E1;
--slate-400: #94A3B8;
--slate-500: #64748B;
--slate-600: #475569;
--slate-700: #334155;
--slate-800: #1E293B;
--slate-900: #0F172A;
/* ─── SEMANTIC ─────────────────────────────────────────────── */
--success: #10B981; /* ACTIVA, success */
--success-bg: #ECFDF5;
--warning: #F59E0B; /* pending, warning */
--warning-bg: #FFFBEB;
--error: #F43F5E; /* error, INACTIVA */
--error-bg: #FFF1F2;
--info: #22D3EE; /* uses accent */
--info-bg: #ECFEFF;
/* ─── SEMANTIC ROLES (use these in components) ─────────────── */
--fg-primary: var(--slate-900);
--fg-secondary: var(--slate-600);
--fg-muted: var(--slate-400);
--fg-inverse: #FFFFFF;
--fg-on-dark: var(--slate-100);
--fg-on-dark-muted: var(--slate-400);
--fg-accent: var(--violet-600);
--fg-accent-warm: var(--warm-500); /* human / advisory */
--fg-link: var(--violet-600);
--bg-page: var(--paper);
--bg-surface: var(--white);
--bg-dark: var(--ink-950);
--bg-dark-elevated: var(--ink-900);
--bg-subtle: var(--slate-50);
--border-default: var(--slate-200);
--border-strong: var(--slate-300);
--border-dark: rgba(255,255,255,.08);
--border-dark-strong:rgba(255,255,255,.16);
--border-focus: var(--violet-500);
/* ─── GRADIENTS ────────────────────────────────────────────── */
--gradient-brand: linear-gradient(135deg, #6D28D9 0%, #7C3AED 45%, #22D3EE 100%); /* @kind color */
--gradient-brand-soft: linear-gradient(135deg, rgba(109,40,217,.85) 0%, rgba(124,58,237,.7) 45%, rgba(34,211,238,.6) 100%); /* @kind color */
--gradient-hero: radial-gradient(ellipse 80% 60% at 70% 20%, rgba(124,58,237,.35), transparent 60%),
radial-gradient(ellipse 60% 80% at 10% 80%, rgba(34,211,238,.22), transparent 60%),
linear-gradient(180deg, #0B0B12 0%, #131321 100%); /* @kind color */
--gradient-cta-band: linear-gradient(95deg, #2E1065 0%, #6D28D9 40%, #7C3AED 70%, #22D3EE 110%); /* @kind color */
/* ─── TYPOGRAPHY ───────────────────────────────────────────── */
--font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
/* Font sizes — fluid for hero, fixed for the rest */
--fs-display-1: clamp(48px, 7vw, 88px); /* @kind font */
--fs-display-2: clamp(40px, 5.5vw, 64px); /* @kind font */
--fs-h1: clamp(36px, 4.5vw, 56px); /* @kind font */
--fs-h2: clamp(28px, 3.2vw, 40px); /* @kind font */
--fs-h3: clamp(22px, 2.2vw, 28px); /* @kind font */
--fs-h4: 20px; /* @kind font */
--fs-h5: 18px; /* @kind font */
--fs-body-lg: 18px; /* @kind font */
--fs-body: 16px; /* @kind font */
--fs-body-sm: 14px; /* @kind font */
--fs-caption: 13px; /* @kind font */
--fs-micro: 12px; /* @kind font */
--fs-eyebrow: 12px; /* @kind font */
/* Line heights */
--lh-tight: 1.05; /* @kind font */
--lh-snug: 1.2; /* @kind font */
--lh-normal: 1.5; /* @kind font */
--lh-relaxed: 1.65; /* @kind font */
/* Letter spacing */
--ls-tight: -0.02em; /* @kind font */
--ls-snug: -0.01em; /* @kind font */
--ls-normal: 0; /* @kind font */
--ls-eyebrow: 0.14em; /* @kind font */
/* ─── SPACING (8px grid) ───────────────────────────────────── */
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 32px;
--s-8: 40px;
--s-9: 48px;
--s-10: 64px;
--s-11: 80px;
--s-12: 96px;
--s-13: 120px;
--s-14: 160px;
--container-max: 1200px;
--container-pad: 24px;
--section-y-desktop: 120px;
--section-y-mobile: 64px;
/* ─── RADII ────────────────────────────────────────────────── */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-pill: 9999px;
/* ─── SHADOWS ──────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(11,11,18,.06);
--shadow-md: 0 4px 12px rgba(11,11,18,.06), 0 1px 2px rgba(11,11,18,.04);
--shadow-lg: 0 12px 32px rgba(11,11,18,.08), 0 2px 6px rgba(11,11,18,.04);
--shadow-xl: 0 24px 64px rgba(11,11,18,.12), 0 4px 12px rgba(11,11,18,.06);
--shadow-glow: 0 0 0 1px rgba(124,58,237,.18), 0 8px 24px rgba(124,58,237,.18);
--shadow-glow-cyan: 0 0 0 1px rgba(34,211,238,.24), 0 8px 24px rgba(34,211,238,.20);
--shadow-inner-dark: inset 0 0 0 1px rgba(255,255,255,.06);
/* ─── MOTION ───────────────────────────────────────────────── */
--ease-out: cubic-bezier(.2,.7,.2,1); /* @kind other */
--ease-snap: cubic-bezier(.5,0,.2,1); /* @kind other */
--dur-tap: 120ms; /* @kind other */
--dur-hover: 200ms; /* @kind other */
--dur-entry: 320ms; /* @kind other */
--dur-hero: 720ms; /* @kind other */
/* ─── Z-INDEX ──────────────────────────────────────────────── */
--z-nav: 100; /* @kind other */
--z-modal: 200; /* @kind other */
--z-toast: 300; /* @kind other */
}
/* ============================================================
SEMANTIC TYPE STYLES — apply these via class
============================================================ */
html, body {
margin: 0; /* kill the browser's default 8px body margin — it left a
light "frame" around the dark page (body bg = --paper) */
padding: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-normal);
color: var(--fg-primary);
background: var(--bg-page);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv11", "ss01", "ss03";
}
* { box-sizing: border-box; }
.display-1, h1.display, .hero-h1 {
font-family: var(--font-display);
font-size: var(--fs-display-1);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-weight: 600;
text-wrap: balance;
}
.display-2 {
font-family: var(--font-display);
font-size: var(--fs-display-2);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-weight: 600;
text-wrap: balance;
}
h1, .h1 {
font-family: var(--font-display);
font-size: var(--fs-h1);
line-height: var(--lh-tight);
letter-spacing: var(--ls-tight);
font-weight: 600;
margin: 0 0 var(--s-5);
text-wrap: balance;
}
h2, .h2 {
font-family: var(--font-display);
font-size: var(--fs-h2);
line-height: var(--lh-snug);
letter-spacing: var(--ls-snug);
font-weight: 600;
margin: 0 0 var(--s-4);
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
line-height: var(--lh-snug);
font-weight: 600;
margin: 0 0 var(--s-3);
}
h4, .h4 {
font-family: var(--font-body);
font-size: var(--fs-h4);
line-height: var(--lh-snug);
font-weight: 600;
margin: 0 0 var(--s-2);
}
h5, .h5 {
font-family: var(--font-body);
font-size: var(--fs-h5);
line-height: var(--lh-snug);
font-weight: 600;
margin: 0 0 var(--s-2);
}
p, .body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-relaxed);
margin: 0 0 var(--s-4);
color: var(--fg-secondary);
text-wrap: pretty;
}
.body-lg, .lead {
font-family: var(--font-body);
font-size: var(--fs-body-lg);
line-height: var(--lh-relaxed);
color: var(--fg-secondary);
text-wrap: pretty;
}
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.caption { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--fg-muted); }
.eyebrow {
font-family: var(--font-body);
font-size: var(--fs-eyebrow);
font-weight: 600;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--violet-600);
}
.eyebrow.on-dark { color: var(--cyan-400); }
code, .mono {
font-family: var(--font-mono);
font-feature-settings: "calt" 0;
font-size: 0.92em;
}
pre {
font-family: var(--font-mono);
font-size: var(--fs-body-sm);
line-height: 1.6;
padding: var(--s-5);
border-radius: var(--radius-md);
background: var(--ink-900);
color: var(--slate-100);
overflow-x: auto;
}
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }
.text-mono-tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
/* Utility */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Selection */
::selection {
background: var(--violet-200);
color: var(--violet-900);
}
/* ---- marketing UI kit (marketing.css) ---- */
/* Marketing UI kit — shared styles. Imports the core tokens. */
/* ─── Layout primitives ───────────────────────────────────── */
.m-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.m-section { padding: var(--s-13) 0; }
.m-section--tight { padding: var(--s-10) 0; }
.m-section--dark { background: var(--ink-950); color: var(--fg-on-dark); }
.m-section--dark p { color: var(--slate-400); }
.m-section--paper { background: var(--paper); }
.m-section--hero {
background: var(--gradient-hero);
color: var(--fg-on-dark);
position: relative;
overflow: hidden;
}
.m-section--hero p { color: var(--slate-300); }
/* ─── Nav ─────────────────────────────────────────────────── */
.m-nav {
position: sticky; top: 0; z-index: var(--z-nav);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
background: rgba(11,11,18,.72);
border-bottom: 1px solid rgba(255,255,255,.06);
height: 64px;
display: flex; align-items: center;
}
.m-nav__inner { display: flex; align-items: center; gap: var(--s-7); width: 100%; }
.m-nav__logo img { height: 28px; filter: brightness(0) invert(1); display: block; }
.m-nav__links { display: flex; gap: var(--s-6); }
.m-nav__link {
font-size: 14px; font-weight: 500; color: var(--slate-300);
cursor: pointer; padding: 6px 0; border-radius: 4px;
transition: color var(--dur-hover) var(--ease-out);
}
.m-nav__link:hover, .m-nav__link.is-active { color: #fff; }
.m-nav__cta { margin-left: auto; display: flex; gap: var(--s-2); }
/* on light pages */
.m-nav--light {
background: rgba(247,247,251,.85);
border-bottom-color: var(--slate-200);
}
.m-nav--light .m-nav__logo img { filter: none; }
.m-nav--light .m-nav__link { color: var(--slate-600); }
.m-nav--light .m-nav__link:hover, .m-nav--light .m-nav__link.is-active { color: var(--slate-900); }
/* ─── Buttons ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-body); font-weight: 600; cursor: pointer; border: 0; transition: all var(--dur-hover) var(--ease-out); white-space: nowrap; }
.btn:active { transform: scale(.98); transition-duration: var(--dur-tap); }
.btn--lg { font-size: 15px; padding: 14px 22px; border-radius: var(--radius-md); }
.btn--md { font-size: 14px; padding: 11px 18px; border-radius: var(--radius-md); }
.btn--sm { font-size: 13px; padding: 8px 14px; border-radius: var(--radius-sm); }
.btn--primary { background: var(--violet-600); color: #fff; box-shadow: var(--shadow-glow); }
.btn--primary:hover { background: var(--violet-700); }
.btn--ghost-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.16); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
.btn--ghost { background: transparent; color: var(--slate-900); border: 1px solid var(--slate-300); }
.btn--ghost:hover { background: var(--slate-100); }
.btn--text { background: transparent; color: var(--violet-600); padding-left: 0; padding-right: 0; box-shadow: none; }
.btn--text:hover { text-decoration: underline; }
.btn--white { background: #fff; color: var(--ink-950); }
.btn--white:hover { background: var(--slate-100); }
/* ─── Cards ───────────────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
.card:hover { box-shadow: var(--shadow-md); }
.card--dark { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08); color: #fff; box-shadow: none; }
.card--dark:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.card--feature { padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3); }
.card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; background: var(--violet-50); color: var(--violet-600); }
.card--dark .card__icon { background: rgba(124,58,237,.18); color: var(--cyan-400); }
/* ─── Pill / chip ─────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.chip--violet { background: var(--violet-100); color: var(--violet-700); }
.chip--success { background: var(--success-bg); color: #065F46; border: 1px solid rgba(16,185,129,.2); }
.chip--warning { background: var(--warning-bg); color: #92400E; border: 1px solid rgba(245,158,11,.2); }
.chip--error { background: var(--error-bg); color: #9F1239; border: 1px solid rgba(244,63,94,.2); }
.chip--mono { font-family: var(--font-mono); background: var(--ink-950); color: var(--cyan-400); border-radius: var(--radius-xs); font-size: 11px; letter-spacing: 0; }
.chip--ghost-dark { background: rgba(255,255,255,.06); color: var(--slate-200); border: 1px solid rgba(255,255,255,.10); }
.chip--gradient { background: var(--gradient-brand); color: #fff; }
/* ─── Hero search bar ─────────────────────────────────────── */
.hero-search {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-pill);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
display: flex; align-items: center;
padding: 8px 8px 8px 28px; gap: var(--s-3);
box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
width: 100%;
}
.hero-search input {
flex: 1; background: transparent; border: 0; outline: none;
color: #fff; font-family: var(--font-body); font-size: 17px;
padding: 14px 0;
}
.hero-search input::placeholder { color: rgba(255,255,255,.55); }
.hero-search__icon { color: rgba(255,255,255,.7); display: inline-flex; }
.hero-search button {
background: #fff; color: var(--violet-700);
border: 0; border-radius: var(--radius-pill);
padding: 12px 22px; font-family: var(--font-body); font-weight: 600; font-size: 15px;
cursor: pointer; transition: all var(--dur-hover) var(--ease-out);
}
.hero-search button:hover { background: var(--violet-100); }
/* ─── CTA band ────────────────────────────────────────────── */
.cta-band {
background: var(--gradient-cta-band);
color: #fff; padding: var(--s-12) 0;
text-align: center; position: relative; overflow: hidden;
}
/* ─── Footer ──────────────────────────────────────────────── */
.m-footer { background: var(--ink-950); color: var(--slate-400); padding: var(--s-12) 0 var(--s-7); }
.m-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-9); }
.m-footer h5 { font-family: var(--font-body); color: #fff; font-size: 13px; font-weight: 600; margin: 0 0 var(--s-3); letter-spacing: .04em; text-transform: uppercase; }
.m-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.m-footer li, .m-footer a { color: var(--slate-400); font-size: 14px; }
.m-footer a:hover { color: #fff; text-decoration: none; }
.m-footer__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: var(--s-9); padding-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; color: var(--slate-500); }
/* ─── Grid patterns ───────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 880px) {
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.m-footer__grid { grid-template-columns: 1fr 1fr; }
.m-section { padding: var(--s-10) 0; }
.m-nav__links { display: none; }
}
/* ─── Page entry animation ────────────────────────────────── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp var(--dur-entry) var(--ease-out) both; }
.fade-up-1 { animation-delay: 40ms; }
.fade-up-2 { animation-delay: 80ms; }
.fade-up-3 { animation-delay: 120ms; }
.fade-up-4 { animation-delay: 160ms; }
.fade-up-5 { animation-delay: 200ms; }
/* ─── Misc ────────────────────────────────────────────────── */
.text-grad { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.divider { height: 1px; background: var(--slate-200); margin: var(--s-7) 0; }
.divider--dark { background: rgba(255,255,255,.08); }
/* Floating gradient orbs for hero */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; }
.orb--violet { background: rgba(124,58,237,.55); }
.orb--cyan { background: rgba(34,211,238,.35); }
/* ---- BrainzLab landing additions (brainzlab.css) ---- */
/* ============================================================
BrainzLab — landing page styles
Reuses the core tokens + marketing component CSS, then adds
BrainzLab-specific brand additions (warm accent, lab motifs,
architecture/diagram blocks).
============================================================ */
:root {
/* ── Warm secondary — human / consulting warmth (Brainz Advisory) ── */
--warm-500: #E8854A;
--warm-400: #F2A65A; /* advisory accent */
--warm-300: #F6BD86;
--warm-bg: rgba(242,166,90,.12);
--warm-border: rgba(242,166,90,.30);
/* slightly deeper hero tuned for the lab */
--gradient-lab: radial-gradient(ellipse 70% 60% at 78% 8%, rgba(124,58,237,.34), transparent 58%),
radial-gradient(ellipse 56% 70% at 6% 92%, rgba(34,211,238,.20), transparent 60%),
linear-gradient(180deg, #0B0B12 0%, #0E0E18 60%, #0B0B12 100%); /* @kind color */
}
/* ── Page baseline ───────────────────────────────────────── */
body { background: var(--paper); }
.bl-page { background: var(--paper); }
.bl-sec-white { background: #fff; }
.bl-sec-paper { background: var(--paper); }
/* ── Subtle engineering grid motif (dark sections) ───────── */
.grid-overlay {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
background-size: 52px 52px;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
mask-image: radial-gradient(ellipse 75% 65% at 50% 35%, #000, transparent 78%);
}
/* ── Hero ────────────────────────────────────────────────── */
.bl-hero { background: var(--gradient-hero); color: var(--fg-on-dark); position: relative; overflow: hidden; }
.bl-hero__inner { position: relative; z-index: 1; padding: 96px 0 84px; }
.bl-tag {
display: inline-flex; align-items: center; gap: 10px;
padding: 7px 14px 7px 10px; border-radius: var(--radius-pill);
background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
font-size: 13px; color: var(--slate-200); font-weight: 500;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bl-tag__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--cyan-400); box-shadow: 0 0 12px var(--cyan-400); }
/* quiet credibility strip */
.bl-cred {
display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
padding-top: 30px; margin-top: 40px; border-top: 1px solid rgba(255,255,255,.07);
}
.bl-cred__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-500); }
.bl-cred__items { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.bl-cred__item { display: inline-flex; align-items: center; gap: 8px; color: var(--slate-300); font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.bl-cred__item .d { width: 6px; height: 6px; border-radius: 99px; background: var(--violet-400); }
/* ── Eyebrow rule (mono ticked) ──────────────────────────── */
.bl-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono); font-size: 12px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase; color: var(--violet-600);
}
.bl-eyebrow::before { content: ''; width: 24px; height: 1px; background: linear-gradient(90deg, var(--violet-600), transparent); }
.bl-eyebrow--cyan { color: var(--cyan-600); }
.bl-eyebrow--cyan::before { background: linear-gradient(90deg, var(--cyan-600), transparent); }
.bl-eyebrow--warm { color: var(--warm-500); }
.bl-eyebrow--warm::before { background: linear-gradient(90deg, var(--warm-400), transparent); }
/* ── Big stat / counter ──────────────────────────────────── */
.bl-stat__value {
font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em;
font-variant-numeric: tabular-nums; color: var(--slate-900); line-height: 1;
font-size: clamp(44px, 5vw, 64px);
}
.bl-stat__value .u { color: var(--violet-600); }
.bl-stat__label { margin-top: 12px; font-size: 14px; color: var(--slate-600); line-height: 1.5; max-width: 220px; }
.bl-stat__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); margin-bottom: 14px; }
/* ── Build-log "receipts" ────────────────────────────────── */
.bl-log {
background: #08080F; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg);
overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.bl-log__bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); }
.bl-log__dot { width: 11px; height: 11px; border-radius: 99px; }
.bl-log__title { margin-left: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--slate-500); }
.bl-log__body { padding: 8px 0; }
.bl-log__row { display: grid; grid-template-columns: 130px 1fr auto; gap: 18px; align-items: baseline; padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.04); }
.bl-log__row:last-child { border-bottom: 0; }
.bl-log__when { font-family: var(--font-mono); font-size: 12.5px; color: var(--cyan-400); white-space: nowrap; }
.bl-log__what { font-size: 15px; color: var(--slate-200); line-height: 1.5; }
.bl-log__what b { color: #fff; font-weight: 600; }
.bl-log__chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--success); padding: 3px 9px; border: 1px solid rgba(16,185,129,.28); border-radius: var(--radius-pill); background: rgba(16,185,129,.08); white-space: nowrap; }
/* ── Plexus engine diagram ───────────────────────────────── */
.bl-engine { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bl-engine__row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.bl-node {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 20px; border-radius: var(--radius-md);
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10);
color: #fff; font-weight: 600; font-size: 15px; letter-spacing: -.01em;
}
.bl-node .mk { width: 8px; height: 8px; border-radius: 2px; background: var(--violet-400); }
.bl-node--cap { color: var(--slate-300); font-weight: 500; font-size: 14px; }
.bl-node--cap .mk { background: var(--cyan-400); border-radius: 99px; }
.bl-connector { width: 1px; height: 38px; background: linear-gradient(180deg, rgba(124,58,237,.0), rgba(124,58,237,.55), rgba(34,211,238,.55)); margin: 6px 0; }
.bl-connector--fan { width: 60%; max-width: 520px; height: 38px; position: relative; }
.bl-core {
position: relative; width: 100%; max-width: 560px; text-align: center;
padding: 30px 32px; border-radius: var(--radius-xl);
background: linear-gradient(180deg, rgba(124,58,237,.14), rgba(34,211,238,.06));
border: 1px solid rgba(34,211,238,.32);
box-shadow: 0 0 0 1px rgba(34,211,238,.10), 0 24px 70px rgba(34,211,238,.18), inset 0 1px 0 rgba(255,255,255,.06);
}
.bl-core__name { font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: -.02em; color: #fff; }
.bl-core__sub { margin-top: 6px; font-size: 14px; color: var(--cyan-300); font-family: var(--font-mono); letter-spacing: .02em; }
/* ── 5-layer architecture stack ──────────────────────────── */
.bl-stack { display: flex; flex-direction: column; gap: 10px; }
.bl-layer {
display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 24px;
padding: 20px 24px; border-radius: var(--radius-md);
background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.bl-layer:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateX(4px); }
.bl-layer__id { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--slate-400); letter-spacing: .04em; }
.bl-layer__name { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--slate-900); letter-spacing: -.01em; }
.bl-layer__desc { font-size: 14px; color: var(--slate-500); margin-top: 3px; }
.bl-layer__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--slate-500); padding: 5px 11px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); white-space: nowrap; }
.bl-layer--ai { background: linear-gradient(180deg, var(--violet-50), var(--cyan-50)); border-color: var(--violet-200); }
.bl-layer--ai .bl-layer__id { color: var(--violet-600); }
.bl-layer--ai .bl-layer__tag { color: var(--violet-700); border-color: var(--violet-200); }
/* ── Product cards ───────────────────────────────────────── */
.bl-prod {
display: flex; flex-direction: column; gap: 16px; padding: 28px;
background: #fff; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
border-radius: var(--radius-lg); transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
cursor: pointer; text-decoration: none;
}
.bl-prod:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; }
.bl-prod__top { display: flex; align-items: center; justify-content: space-between; }
.bl-prod__mark { width: 44px; height: 44px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff; }
.bl-prod__name { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--slate-900); letter-spacing: -.01em; }
.bl-prod__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-500); }
.bl-prod__desc { font-size: 15px; color: var(--slate-600); line-height: 1.55; flex: 1; }
.bl-prod__link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--violet-600); }
.bl-prod--more { align-items: flex-start; justify-content: center; border-style: dashed; border-color: var(--border-strong); background: var(--slate-50); box-shadow: none; }
/* ── Sub-brand family cards ──────────────────────────────── */
.bl-family { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bl-brand {
display: flex; flex-direction: column; gap: 18px; padding: 32px;
border-radius: var(--radius-lg); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm);
background: #fff; position: relative; overflow: hidden;
}
.bl-brand__chip { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 6px 13px 6px 10px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; }
.bl-brand--ai .bl-brand__chip { background: var(--cyan-50); border: 1px solid var(--cyan-200); color: var(--cyan-600); }
.bl-brand--human .bl-brand__chip { background: var(--warm-50); border: 1px solid var(--warm-border); color: var(--warm-600); }
.bl-brand__mk { width: 9px; height: 9px; border-radius: 99px; }
.bl-brand--ai .bl-brand__mk { background: var(--cyan-500); }
.bl-brand--human .bl-brand__mk { background: var(--warm-400); }
.bl-brand__name { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--slate-900); letter-spacing: -.02em; }
.bl-brand__desc { font-size: 15px; color: var(--slate-600); line-height: 1.6; }
.bl-brand--ai { background: linear-gradient(180deg, var(--cyan-50), #fff); border-color: var(--cyan-200); }
.bl-brand--human { background: linear-gradient(180deg, var(--warm-50), #fff); border-color: var(--warm-border); }
/* ── Academy block ───────────────────────────────────────── */
.bl-academy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.bl-academy__card { background: #08080F; border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.bl-academy__card pre { margin: 0; background: transparent; padding: 22px; font-size: 13px; line-height: 1.75; }
/* ── CTA band: single dominant action ────────────────────── */
.bl-ctaband { background: var(--gradient-cta-band); color: #fff; padding: var(--s-13) 0; text-align: center; position: relative; overflow: hidden; }
.bl-login { color: rgba(255,255,255,.85); font-family: var(--font-mono); font-size: 13px; }
.bl-login a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* ── Footer entity line ──────────────────────────────────── */
.bl-entity { font-size: 13px; color: var(--slate-500); line-height: 1.7; }
.bl-entity b { color: var(--slate-300); font-weight: 600; }
/* ── Section header helper ───────────────────────────────── */
.bl-shead { max-width: 760px; }
.bl-shead h2 { margin-top: 16px; }
.bl-shead p { margin-top: 14px; color: var(--slate-600); }
.bl-shead--center { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
/* ── Responsive ──────────────────────────────────────────── */
.bl-prodgrid { }
@media (max-width: 1040px) {
.bl-prodgrid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 940px) {
.bl-academy { grid-template-columns: 1fr; gap: 32px; }
.bl-family { grid-template-columns: 1fr; }
.bl-platgrid { grid-template-columns: 1fr !important; gap: 36px !important; }
.bl-statgrid { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
}
@media (max-width: 560px) {
.bl-prodgrid { grid-template-columns: 1fr !important; }
.bl-statgrid { grid-template-columns: 1fr !important; }
.bl-engine__row { gap: 10px; }
}
@media (max-width: 880px) {
.bl-hero__inner { padding: 64px 0 56px; }
.bl-log__row { grid-template-columns: 1fr; gap: 6px; }
.bl-layer { grid-template-columns: 56px 1fr; }
.bl-layer__tag { display: none; }
.bl-cred { gap: 16px; }
}
/* ============================================================
Landing layout classes — replace the prototype's inline styles.
Native integration: partials use these classes, no style="".
============================================================ */
/* Wordmark + inline icon (helpers: bl_wordmark / bl_icon) */
.bl-wordmark { display:inline-flex; align-items:center; gap:10px; }
.bl-wordmark__mark { height: calc(var(--bl-wm-size, 22px) * 1.16); width:auto; display:block; flex-shrink:0; }
.bl-wordmark__text { font-family:var(--font-display); font-weight:700; font-size:var(--bl-wm-size, 22px); letter-spacing:-.02em; color:#fff; }
.bl-svg { display:inline-flex; vertical-align:middle; flex-shrink:0; }
/* Small utilities */
.bl-mt-16 { margin-top:16px; }
.bl-mt-14 { margin-top:14px; }
.bl-hl { color:#fff; }
/* Hero */
.bl-hero__orb--a { width:560px; height:560px; top:-240px; right:-160px; }
.bl-hero__orb--b { width:420px; height:420px; bottom:-220px; left:-160px; }
.bl-hero__copy { max-width:920px; }
.bl-hero__title { color:#fff; margin:24px 0 22px; letter-spacing:-.03em; }
.bl-hero__sub { color:var(--slate-300); max-width:660px; margin:0 0 36px; }
.bl-hero__actions { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.bl-cred__item--muted { color:var(--slate-500); font-weight:500; }
/* Thesis */
.bl-statgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-bottom:56px; }
.bl-stat__unit { font-size:.5em; font-weight:500; }
.bl-log__dot--r { background:#F43F5E; opacity:.5; }
.bl-log__dot--y { background:#F59E0B; opacity:.5; }
.bl-log__dot--g { background:#10B981; opacity:.5; }
.bl-log__chip--running { color:var(--cyan-400); border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.08); }
/* Plexus engine */
.bl-engine__intro { text-align:center; max-width:760px; margin:0 auto 56px; }
.bl-engine__wrap { background:var(--ink-950); border-radius:var(--radius-xl); border:1px solid var(--slate-200); padding:48px 32px; position:relative; overflow:hidden; }
.bl-engine { position:relative; z-index:1; }
.bl-engine__label { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:var(--slate-500); text-transform:uppercase; margin-bottom:6px; }
.bl-engine__label--up { margin-top:24px; }
.bl-connector--up { transform:rotate(180deg); }
/* Platform */
.bl-platgrid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.bl-chiprow { display:flex; gap:10px; margin-top:28px; flex-wrap:wrap; }
/* Products */
.bl-prodgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.bl-prod__mark--legal { background:linear-gradient(135deg,#6D28D9,#7C3AED); }
.bl-prod__mark--growth { background:linear-gradient(135deg,#7C3AED,#22D3EE); }
.bl-prod__mark--ops { background:linear-gradient(135deg,#22D3EE,#06B6D4); }
.bl-prod__mark--more { background:var(--slate-100); border:1px solid var(--border-default); color:var(--slate-500); }
.bl-prod__top--full { width:100%; }
.bl-prod__name--sm { font-size:19px; }
.bl-prod__link--bottom { margin-top:auto; }
.bl-prod__link--warm { margin-top:auto; color:var(--warm-600); }
/* Academy */
.bl-row { display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.tok-cmd { color:#A78BFA; }
.tok-str { color:#A78BFA; }
.tok-com { color:#94A3B8; }
.tok-kw { color:#22D3EE; }
.tok-fn { color:#67E8F9; }
.tok-bool { color:#10B981; }
.tok-ok { color:#10B981; }
/* CTA band */
.bl-cta__orb--a { width:380px; height:380px; left:-120px; top:-140px; }
.bl-cta__orb--b { width:300px; height:300px; right:-110px; bottom:-120px; }
.bl-ctaband__inner { position:relative; z-index:1; }
.bl-cta__title { font-size:clamp(36px,4.6vw,58px); margin:0 0 14px; color:#fff; }
.bl-cta__title-dim { color:rgba(255,255,255,.78); }
.bl-cta__sub { font-size:19px; color:rgba(255,255,255,.85); margin:0 0 32px; }
.bl-cta__actions { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.bl-cta__login-row { margin-top:26px; }
/* Footer */
.bl-footer__brand { margin-bottom:16px; }
.bl-footer__blurb { color:var(--slate-400); font-size:14px; max-width:320px; line-height:1.6; }
.bl-footer__family { margin-top:20px; display:inline-flex; align-items:center; gap:10px; font-size:13px; color:var(--slate-400); }
.bl-footer__fam { display:inline-flex; align-items:center; gap:6px; color:var(--slate-300); font-weight:600; }
.bl-dot { width:6px; height:6px; border-radius:99px; display:inline-block; }
.bl-dot--violet { background:var(--violet-400); }
.bl-dot--cyan { background:var(--cyan-400); }
.m-footer__bottom--top { align-items:flex-start; }
.bl-footer__legal { display:flex; gap:24px; }
/* ============================================================
Marketing pages (pricing · about · legal) — design-system classes
============================================================ */
.bl-pricegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:start; }
.bl-price { display:flex; flex-direction:column; gap:6px; padding:28px 24px; background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); position:relative; }
.bl-price--popular { border:2px solid var(--violet-500); box-shadow:0 18px 50px rgba(124,58,237,.16); }
.bl-price__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--violet-600); padding:5px 12px; border-radius:var(--radius-pill); white-space:nowrap; }
.bl-price__name { font-family:var(--font-display); font-weight:600; font-size:20px; color:var(--slate-900); }
.bl-price__desc { font-size:13px; color:var(--slate-500); min-height:34px; }
.bl-price__amount { margin:10px 0 6px; padding-bottom:18px; border-bottom:1px solid var(--slate-200); }
.bl-price__amount b { font-family:var(--font-display); font-size:32px; font-weight:700; color:var(--slate-900); letter-spacing:-.02em; }
.bl-price__amount span { font-size:13px; color:var(--slate-500); }
.bl-price__features { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px; flex:1; }
.bl-price__features li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--slate-600); line-height:1.45; }
.bl-price__features li::before { content:''; flex-shrink:0; margin-top:6px; width:7px; height:7px; border-radius:2px; background:var(--violet-400); }
.bl-price .btn { margin-top:22px; justify-content:center; }
@media (max-width:1040px){ .bl-pricegrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bl-pricegrid{ grid-template-columns:1fr; } }
/* Feature grid */
.bl-featgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bl-feat { padding:26px; background:#fff; border:1px solid var(--border-default); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.bl-feat__icon { width:44px; height:44px; border-radius:var(--radius-md); display:inline-flex; align-items:center; justify-content:center; background:var(--violet-50); color:var(--violet-600); margin-bottom:16px; }
.bl-feat__name { font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--slate-900); margin-bottom:7px; }
.bl-feat__desc { font-size:14px; color:var(--slate-600); line-height:1.55; }
@media (max-width:880px){ .bl-featgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .bl-featgrid{ grid-template-columns:1fr; } }
/* Long-form prose (about · privacy · terms) */
.bl-prose { max-width:760px; margin:0 auto; }
.bl-prose h2 { font-family:var(--font-display); font-size:24px; color:var(--slate-900); margin:36px 0 12px; letter-spacing:-.01em; }
.bl-prose h3 { font-size:18px; color:var(--slate-900); margin:24px 0 8px; }
.bl-prose p, .bl-prose li { font-size:16px; color:var(--slate-600); line-height:1.7; }
.bl-prose p { margin:0 0 14px; }
.bl-prose ul { margin:0 0 14px; padding-left:22px; }
.bl-prose strong { color:var(--slate-900); }
/* Pricing "what you replace" cards */
.bl-replace__tool { font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--slate-900); }
.bl-replace__price { font-size:20px; text-decoration:line-through; color:var(--slate-400); margin:10px 0; }
/* ============================================================
Auth pages (login / signup) — design-system
============================================================ */
.bl-authpage { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:48px 24px; background:var(--gradient-hero); position:relative; overflow:hidden; }
.bl-authpage__inner { width:100%; max-width:420px; position:relative; z-index:1; }
.bl-authcard { background:#08080F; border:1px solid rgba(255,255,255,.08); border-radius:var(--radius-xl); padding:36px 32px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.bl-authcard__head { text-align:center; margin-bottom:28px; }
.bl-authcard__logo { display:inline-flex; margin-bottom:18px; }
.bl-authcard__title { font-family:var(--font-display); font-weight:600; font-size:22px; color:#fff; letter-spacing:-.01em; }
.bl-authcard__sub { font-size:14px; color:var(--slate-400); margin-top:4px; }
.bl-form { display:flex; flex-direction:column; gap:18px; }
.bl-field { display:flex; flex-direction:column; gap:7px; }
.bl-label { font-size:13px; font-weight:500; color:var(--slate-300); }
.bl-input { width:100%; padding:12px 14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); color:#fff; font-family:var(--font-body); font-size:15px; transition:border-color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out); }
.bl-input::placeholder { color:var(--slate-500); }
.bl-input:focus { outline:none; border-color:var(--violet-400); background:rgba(255,255,255,.06); }
/* Keep browser autofill on-theme: Chrome/Safari paint a white box over the dark
field on saved credentials. The inset shadow repaints the input background and
the long transition defers the UA background swap, so it stays dark. */
.bl-input:-webkit-autofill,
.bl-input:-webkit-autofill:hover,
.bl-input:-webkit-autofill:focus,
.bl-input:-webkit-autofill:active {
-webkit-text-fill-color:#fff;
caret-color:#fff;
-webkit-box-shadow:0 0 0 1000px #101018 inset;
box-shadow:0 0 0 1000px #101018 inset;
border:1px solid rgba(255,255,255,.12);
transition:background-color 5000s ease-in-out 0s;
}
.bl-btn-full { width:100%; justify-content:center; }
.bl-divider { display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--slate-500); font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.bl-divider::before, .bl-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.bl-oauthgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bl-oauth-form { display:flex; width:100%; }
.bl-oauth { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); color:var(--slate-200); font-weight:600; font-size:15px; cursor:pointer; transition:all var(--dur-hover) var(--ease-out); }
.bl-oauth:hover { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); }
.bl-oauth svg { width:20px; height:20px; }
.bl-authfoot { margin-top:26px; text-align:center; font-size:14px; color:var(--slate-400); }
.bl-authfoot a { color:var(--violet-300); font-weight:600; }
.bl-authfoot a:hover { color:var(--violet-200); }
.bl-alert-error { margin-bottom:16px; padding:11px 14px; border-radius:var(--radius-md); background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.25); color:#FDA4AF; font-size:14px; }
.bl-hint { font-size:12px; color:var(--slate-500); }
.bl-authfine { margin-top:18px; text-align:center; font-size:12px; color:var(--slate-500); line-height:1.6; }
.bl-authfine a { color:var(--slate-300); text-decoration:underline; text-underline-offset:2px; }