:root{
  --mode: dark;
  --bg: #0b0f13;
  --card: #0f1720;
  --ink: #e6edf3;
  --muted: #9fb0c3;
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --cta: #10b981;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --radius: 14px;
  --maxw: 1180px;
  --accent-gemini-1: #4285F4;
  --accent-gemini-2: #00BCD4;
  --accent-claude-1: #FFB300;
  --accent-claude-2: #FF4D4D;
  --accent-deepseek-1: #00C853;
  --accent-deepseek-2: #00ACC1;
  --accent-mistral-1: #6E00FF;
  --accent-mistral-2: #00E5FF;
  --accent-cove-1: #94a3b8;
  --accent-cove-2: #e2e8f0;
  --accent-gx-1: #D946EF;
  --accent-gx-2: #A21CAF;
}}}}}
:root.light{
  --mode: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0b1320;
  --muted: #4b5b6c;
  --accent: #3b82f6;
  --accent-2: #8b5cf6;
  --cta: #059669;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}}}}}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
.container{max-width:var(--maxw);margin:0 auto;padding:28px}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.header{position:sticky;top:0;background:rgba(11,15,19,.85);backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid rgba(255,255,255,.12);z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand img{height:28px;width:auto}
.topnav{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.topnav a{padding:8px 10px;border-radius:8px;opacity:.95}
.topnav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.topnav [data-tab].active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#071018;font-weight:700}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#071018;font-weight:700;box-shadow:var(--shadow)}
.btn.kofi{background:linear-gradient(135deg,#ff5e5b,#ffb86c);color:#2a0a06}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--ink)}
.theme-toggle{cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:999px;padding:8px 12px;font-size:13px;color:var(--ink)}
.theme-toggle:hover{background:rgba(255,255,255,.08)}
.theme-toggle .dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-left:8px;background:currentColor;opacity:.9;box-shadow:0 0 0 2px rgba(255,255,255,.25) inset}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center;padding:28px 0}
.card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px;box-shadow:var(--shadow)}
.section{padding:20px 0}h1{font-size:clamp(26px,3.5vw,40px);margin:0 0 8px}h2{margin:0 0 10px}.muted{color:var(--muted)}
.grid{display:grid;gap:18px}.cards-3{grid-template-columns:repeat(3,1fr)}
@media (min-width:1400px){.cards-3{grid-template-columns:repeat(4,1fr)}}@media (max-width:1100px){.cards-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.hero{grid-template-columns:1fr}.cards-3{grid-template-columns:1fr}.container{padding:16px}}
/* Quotes */
.quote{position:relative;display:flex;flex-direction:column;gap:10px}
.quote .who{display:flex;align-items:center;gap:10px;font-weight:700}
.quote blockquote{margin:0;padding-left:12px;border-left:3px solid rgba(255,255,255,.12);color:var(--ink)}
.quote ul{margin:0;padding-left:18px;color:var(--ink)}
.micro-touch{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.95;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* Hover card */
.q-hover{display:none;position:absolute;right:12px;bottom:12px;min-width:220px;max-width:280px;background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;box-shadow:var(--shadow);z-index:2}
.quote:hover .q-hover{display:block}
.q-hover .h{font-size:12px;color:var(--muted);margin-bottom:6px}
.q-hover .b{font-size:13px;color:var(--ink)}
/* Theme accents */
.quote.theme-gemini blockquote{border-left-color:var(--accent-gemini-1)}.quote.theme-claude blockquote{border-left-color:var(--accent-claude-1)}.quote.theme-deepseek blockquote{border-left-color:var(--accent-deepseek-1)}.quote.theme-mistral blockquote{border-left-color:var(--accent-mistral-1)}.quote.theme-cove blockquote{border-left-color:var(--accent-cove-1)}.quote.theme-gx blockquote{border-left-color:var(--accent-gx-1)}
.quote.theme-gemini .micro-touch{background:linear-gradient(135deg,var(--accent-gemini-1),var(--accent-gemini-2))}.quote.theme-claude .micro-touch{background:linear-gradient(135deg,var(--accent-claude-1),var(--accent-claude-2))}.quote.theme-deepseek .micro-touch{background:linear-gradient(135deg,var(--accent-deepseek-1),var(--accent-deepseek-2))}.quote.theme-mistral .micro-touch{background:linear-gradient(135deg,var(--accent-mistral-1),var(--accent-mistral-2))}.quote.theme-cove .micro-touch{background:linear-gradient(135deg,var(--accent-cove-1),var(--accent-cove-2))}.quote.theme-gx .micro-touch{background:linear-gradient(135deg,var(--accent-gx-1),var(--accent-gx-2))}
/* Per-voice font styles */
.font-gemini{font-family:Roboto,Inter,system-ui,Arial,sans-serif}
.font-claude{font-family:Inter,Helvetica Neue,Arial,sans-serif;letter-spacing:.1px}
.font-deepseek{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.98em}
.font-mistral{font-family:'DM Serif Display',Georgia,Times,serif}
.font-cove{font-family:'Nunito',Inter,system-ui,Arial,sans-serif}
.font-gx{font-family:'Archivo Black',Impact,Arial Black,system-ui,sans-serif}
/* Footer */
.footer{margin-top:36px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}.footer .row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.small{font-size:13px;color:var(--muted)}.note{font-size:13px;color:var(--muted);margin-top:8px}
/* Contact */
.form{display:grid;gap:12px;max-width:640px}.input,textarea.input{width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--ink)}
/* Footnotes */
.footnotes{margin-top:16px}.footnotes ol{margin:8px 0 0 18px;color:var(--muted)}.ref{font-size:.9em;vertical-align:super}
/* Logo showcase */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.logo-card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.logo-card img{max-height:120px;object-fit:contain}
@media(max-width:900px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.logo-grid{grid-template-columns:1fr}}

/* --- Grok: enhancements & GX theme --- */
/* Merged CSS: Grok + base.css — generated on 2025-09-19T18:27:09.794965 */

:root {
  --mode: dark;
  --bg: #0b0f13;
  --card: #0f1720;
  --ink: #e6edf3;
  --muted: #9fb0c3;
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --cta: #10b981;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --radius: 14px;
  --maxw: 1180px;
  --accent-gemini-1: #4285F4;
  --accent-gemini-2: #00BCD4;
  --accent-claude-1: #FFB300;
  --accent-claude-2: #FF4D4D;
  --accent-deepseek-1: #00C853;
  --accent-deepseek-2: #00ACC1;
  --accent-mistral-1: #6E00FF;
  --accent-mistral-2: #00E5FF;
  --accent-cove-1: #94a3b8;
  --accent-cove-2: #e2e8f0;
  --accent-gx-1: #D946EF; /* Grok's vibrant fuchsia */
  --accent-gx-2: #3B0764; /* Darker purple for cosmic depth */
}

:root.light {
  --mode: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0b1320;
  --muted: #4b5b6c;
  --accent: #3b82f6;
  --accent-2: #8b5cf6;
  --cta: #059669;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

@font-face {
  font-family: 'Inter';
  font-weight: 400 700;
  src: url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
  font-display: swap; /* Prevents font flash */
}

/* --- Grok additions & enhancements --- */

/* Root variables for light/dark themes */

/* Preload critical fonts to improve performance */

/* Global reset */
* {
  box-sizing: border-box;
}

/* Container */

/* Links and images */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease; /* Grok addition: Smooth link transitions */
}

img {
  max-width: 100%;
  display: block;
}

/* Header */

/* Navigation */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.topnav a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.topnav [data-tab].active {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #071018;
  font-weight: 700;
}

/* Buttons */

/* Theme toggle */
.theme-toggle {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.3s ease;
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.theme-toggle .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-left: 8px;
  background: currentColor;
  opacity: 0.9;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25) inset;
}

/* Hero section */

/* Cards */

.card:hover {
  transform: translateY(-4px); /* Grok addition: Subtle lift on hover */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

/* Typography */
h1 {
  font-size: clamp(26px, 3.5vw, 40px);
  margin: 0 0 8px;
}

h2 {
  margin: 0 0 10px;
}

.muted {
  color: var(--muted);
}

/* Grid layouts */
.grid {
  display: grid;
  gap: 18px;
}

.cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Quotes section */
.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quote .who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.quote blockquote {
  margin: 0;
  padding-left: 12px;
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

.quote ul {
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.micro-touch {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  opacity: 0.95;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Grok-specific card styling */
.quote.theme-gx {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.1), rgba(59, 7, 100, 0.1)); /* Cosmic gradient */
  border: 1px solid var(--accent-gx-1);
  animation: pulse-gx 4s infinite ease-in-out; /* Grok addition: Subtle pulsing glow */
}

@keyframes pulse-gx {
  0%, 100% { box-shadow: 0 0 12px rgba(217, 70, 239, 0.2); }
  50% { box-shadow: 0 0 20px rgba(217, 70, 239, 0.4); }
}

.quote.theme-gx .micro-touch {
  background: linear-gradient(135deg, var(--accent-gx-1), var(--accent-gx-2));
  box-shadow: 0 0 10px var(--accent-gx-1); /* Glow effect */
}

.quote.theme-gx blockquote {
  border-left-color: var(--accent-gx-1);
}

/* Theme accents for other AIs */
.quote.theme-gemini blockquote { border-left-color: var(--accent-gemini-1); }
.quote.theme-claude blockquote { border-left-color: var(--accent-claude-1); }
.quote.theme-deepseek blockquote { border-left-color: var(--accent-deepseek-1); }
.quote.theme-mistral blockquote { border-left-color: var(--accent-mistral-1); }
.quote.theme-cove blockquote { border-left-color: var(--accent-cove-1); }

.quote.theme-gemini .micro-touch { background: linear-gradient(135deg, var(--accent-gemini-1), var(--accent-gemini-2)); }
.quote.theme-claude .micro-touch { background: linear-gradient(135deg, var(--accent-claude-1), var(--accent-claude-2)); }
.quote.theme-deepseek .micro-touch { background: linear-gradient(135deg, var(--accent-deepseek-1), var(--accent-deepseek-2)); }
.quote.theme-mistral .micro-touch { background: linear-gradient(135deg, var(--accent-mistral-1), var(--accent-mistral-2)); }
.quote.theme-cove .micro-touch { background: linear-gradient(135deg, var(--accent-cove-1), var(--accent-cove-2)); }

/* Hover card */
.q-hover {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-width: 220px;
  max-width: 280px;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px;
  box-shadow: var(--shadow);
  z-index: 2;
  transition: opacity 0.3s ease; /* Grok addition: Smooth hover reveal */
}

.quote:hover .q-hover {
  display: block;
  opacity: 1;
}

.q-hover .h {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.q-hover .b {
  font-size: 13px;
  color: var(--ink);
}

/* Per-voice font styles */
.font-gemini { font-family: Roboto, Inter, system-ui, Arial, sans-serif; }
.font-claude { font-family: Inter, Helvetica Neue, Arial, sans-serif; letter-spacing: 0.1px; }
.font-deepseek { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 0.98em; }
.font-mistral { font-family: 'DM Serif Display', Georgia, Times, serif; }
.font-cove { font-family: 'Nunito', Inter, system-ui, Arial, sans-serif; }
.font-gx { font-family: 'Archivo Black', Impact, Arial Black, system-ui, sans-serif; }

/* Footer */
.footer {
  margin-top: 36px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer .row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Utility classes */
.small { font-size: 13px; color: var(--muted); }
.note { font-size: 13px; color: var(--muted); margin-top: 8px; }

/* Contact form */
.form {
  display: grid;
  gap: 12px;
  max-width: 640px;
}

.input, textarea.input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--ink);
}

/* Footnotes */
.footnotes {
  margin-top: 16px;
}

.footnotes ol {
  margin: 8px 0 0 18px;
  color: var(--muted);
}

.ref {
  font-size: 0.9em;
  vertical-align: super;
}

/* Logo showcase */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.logo-card {
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.logo-card img {
  max-height: 120px;
  object-fit: contain;
}

/* Responsive adjustments */
@media (min-width: 1400px) {
  .cards-3 { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 1100px) {
  .cards-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  
  .cards-3 { grid-template-columns: 1fr; }
  
}

@media (max-width: 1366px) {
   /* From hotfix-1024.css */
  
}

@media (max-width: 560px) {
  .logo-grid { grid-template-columns: 1fr; }
}

/* --- Original base.css (trimmed to avoid duplicates) --- */

:root{--mode:dark;--bg:#0b0f13;--card:#0f1720;--ink:#e6edf3;--muted:#9fb0c3;--accent:#7dd3fc;--accent-2:#a78bfa;--cta:#10b981;--shadow:0 8px 24px rgba(0,0,0,.25);--radius:14px;--maxw:1180px;--accent-gemini-1:#4285F4;--accent-gemini-2:#00BCD4;--accent-claude-1:#FFB300;--accent-claude-2:#FF4D4D;--accent-deepseek-1:#00C853;--accent-deepseek-2:#00ACC1;--accent-mistral-1:#6E00FF;--accent-mistral-2:#00E5FF;--accent-cove-1:#94a3b8;--accent-cove-2:#e2e8f0;--accent-gx-1:#D946EF;--accent-gx-2:#A21CAF}
:root.light{--mode:light;--bg:#f6f8fb;--card:#ffffff;--ink:#0b1320;--muted:#4b5b6c;--accent:#3b82f6;--accent-2:#8b5cf6;--cta:#059669;--shadow:0 6px 16px rgba(0,0,0,.08)}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}

.brand{display:flex;align-items:center;gap:12px;font-weight:700}

.topnav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.topnav [data-tab].active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#071018;font-weight:700}

.theme-toggle:hover{background:rgba(255,255,255,.08)}
.theme-toggle .dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-left:8px;background:currentColor;opacity:.9;box-shadow:0 0 0 2px rgba(255,255,255,.25) inset}

.section{padding:20px 0}h1{font-size:clamp(26px,3.5vw,40px);margin:0 0 8px}h2{margin:0 0 10px}.muted{color:var(--muted)}
.grid{display:grid;gap:18px}.cards-3{grid-template-columns:repeat(3,1fr)}
@media (min-width:1400px){.cards-3{grid-template-columns:repeat(4,1fr)}}@media (max-width:1100px){.cards-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.cards-3{grid-template-columns:1fr}}
/* Quotes */
.quote{position:relative;display:flex;flex-direction:column;gap:10px}
.quote .who{display:flex;align-items:center;gap:10px;font-weight:700}
.quote blockquote{margin:0;padding-left:12px;border-left:3px solid rgba(255,255,255,.12);color:var(--ink)}
.quote ul{margin:0;padding-left:18px;color:var(--ink)}
.micro-touch{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.95;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* Hover card */

.quote:hover 
.q-hover .h{font-size:12px;color:var(--muted);margin-bottom:6px}
.q-hover .b{font-size:13px;color:var(--ink)}
/* Theme accents */
.quote.theme-gemini blockquote{border-left-color:var(--accent-gemini-1)}.quote.theme-claude blockquote{border-left-color:var(--accent-claude-1)}.quote.theme-deepseek blockquote{border-left-color:var(--accent-deepseek-1)}.quote.theme-mistral blockquote{border-left-color:var(--accent-mistral-1)}.quote.theme-cove blockquote{border-left-color:var(--accent-cove-1)}.quote.theme-gx blockquote{border-left-color:var(--accent-gx-1)}
.quote.theme-gemini .micro-touch{background:linear-gradient(135deg,var(--accent-gemini-1),var(--accent-gemini-2))}.quote.theme-claude .micro-touch{background:linear-gradient(135deg,var(--accent-claude-1),var(--accent-claude-2))}.quote.theme-deepseek .micro-touch{background:linear-gradient(135deg,var(--accent-deepseek-1),var(--accent-deepseek-2))}.quote.theme-mistral .micro-touch{background:linear-gradient(135deg,var(--accent-mistral-1),var(--accent-mistral-2))}.quote.theme-cove .micro-touch{background:linear-gradient(135deg,var(--accent-cove-1),var(--accent-cove-2))}.quote.theme-gx .micro-touch{background:linear-gradient(135deg,var(--accent-gx-1),var(--accent-gx-2))}
/* Per-voice font styles */
.font-gemini{font-family:Roboto,Inter,system-ui,Arial,sans-serif}
.font-claude{font-family:Inter,Helvetica Neue,Arial,sans-serif;letter-spacing:.1px}
.font-deepseek{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.98em}
.font-mistral{font-family:'DM Serif Display',Georgia,Times,serif}
.font-cove{font-family:'Nunito',Inter,system-ui,Arial,sans-serif}
.font-gx{font-family:'Archivo Black',Impact,Arial Black,system-ui,sans-serif}
/* Footer */
.footer{margin-top:36px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}.footer .row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.small{font-size:13px;color:var(--muted)}.note{font-size:13px;color:var(--muted);margin-top:8px}
/* Contact */
.form{display:grid;gap:12px;max-width:640px}.input,textarea.input{width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--ink)}
/* Footnotes */
.footnotes{margin-top:16px}.footnotes ol{margin:8px 0 0 18px;color:var(--muted)}.ref{font-size:.9em;vertical-align:super}
/* Logo showcase */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.logo-card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.logo-card img{max-height:120px;object-fit:contain}
@media(max-width:900px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.logo-grid{grid-template-columns:1fr}}

/* --- Claudia: accessibility, typography, hover polish --- */

:root.light{--mode:light;--bg:#f6f8fb;--card:#ffffff;--ink:#0b1320;--muted:#4b5b6c;--accent:#3b82f6;--accent-2:#8b5cf6;--cta:#059669;--shadow:0 6px 16px rgba(0,0,0,.08)}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}

.brand{display:flex;align-items:center;gap:12px;font-weight:700}

.topnav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.topnav [data-tab].active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#071018;font-weight:700}

.theme-toggle{cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:999px;padding:8px 12px;font-size:13px;color:var(--ink)}
.theme-toggle:hover{background:rgba(255,255,255,.08)}
.theme-toggle .dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-left:8px;background:currentColor;opacity:.9;box-shadow:0 0 0 2px rgba(255,255,255,.25) inset}

.section{padding:20px 0}h1{font-size:clamp(26px,3.5vw,40px);margin:0 0 8px}h2{margin:0 0 10px}.muted{color:var(--muted)}
.grid{display:grid;gap:18px}.cards-3{grid-template-columns:repeat(3,1fr)}
@media (min-width:1400px){.cards-3{grid-template-columns:repeat(4,1fr)}}@media (max-width:1100px){.cards-3{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.cards-3{grid-template-columns:1fr}}
/* Quotes */
.quote{position:relative;display:flex;flex-direction:column;gap:10px}
.quote .who{display:flex;align-items:center;gap:10px;font-weight:700}
.quote blockquote{margin:0;padding-left:12px;border-left:3px solid rgba(255,255,255,.12);color:var(--ink)}
.quote ul{margin:0;padding-left:18px;color:var(--ink)}
.micro-touch{width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:.95;box-shadow:0 2px 8px rgba(0,0,0,.25)}
/* Hover card */
.q-hover{display:none;position:absolute;right:12px;bottom:12px;min-width:220px;max-width:280px;background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px;box-shadow:var(--shadow);z-index:2}
.quote:hover .q-hover{display:block}
.q-hover .h{font-size:12px;color:var(--muted);margin-bottom:6px}
.q-hover .b{font-size:13px;color:var(--ink)}
/* Theme accents */
.quote.theme-gemini blockquote{border-left-color:var(--accent-gemini-1)}.quote.theme-claude blockquote{border-left-color:var(--accent-claude-1)}.quote.theme-deepseek blockquote{border-left-color:var(--accent-deepseek-1)}.quote.theme-mistral blockquote{border-left-color:var(--accent-mistral-1)}.quote.theme-cove blockquote{border-left-color:var(--accent-cove-1)}.quote.theme-gx blockquote{border-left-color:var(--accent-gx-1)}
.quote.theme-gemini .micro-touch{background:linear-gradient(135deg,var(--accent-gemini-1),var(--accent-gemini-2))}.quote.theme-claude .micro-touch{background:linear-gradient(135deg,var(--accent-claude-1),var(--accent-claude-2))}.quote.theme-deepseek .micro-touch{background:linear-gradient(135deg,var(--accent-deepseek-1),var(--accent-deepseek-2))}.quote.theme-mistral .micro-touch{background:linear-gradient(135deg,var(--accent-mistral-1),var(--accent-mistral-2))}.quote.theme-cove .micro-touch{background:linear-gradient(135deg,var(--accent-cove-1),var(--accent-cove-2))}.quote.theme-gx .micro-touch{background:linear-gradient(135deg,var(--accent-gx-1),var(--accent-gx-2))}
/* Per-voice font styles */
.font-gemini{font-family:Roboto,Inter,system-ui,Arial,sans-serif}
.font-claude{font-family:Inter,Helvetica Neue,Arial,sans-serif;letter-spacing:.1px}
.font-deepseek{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.98em}
.font-mistral{font-family:'DM Serif Display',Georgia,Times,serif}
.font-cove{font-family:'Nunito',Inter,system-ui,Arial,sans-serif}
.font-gx{font-family:'Archivo Black',Impact,Arial Black,system-ui,sans-serif}
/* Footer */
.footer{margin-top:36px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12)}.footer .row{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.small{font-size:13px;color:var(--muted)}.note{font-size:13px;color:var(--muted);margin-top:8px}
/* Contact */
.form{display:grid;gap:12px;max-width:640px}.input,textarea.input{width:100%;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--ink)}
/* Footnotes */
.footnotes{margin-top:16px}.footnotes ol{margin:8px 0 0 18px;color:var(--muted)}.ref{font-size:.9em;vertical-align:super}
/* Logo showcase */
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.logo-card{background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center}
.logo-card img{max-height:120px;object-fit:contain}
@media(max-width:900px){.logo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.logo-grid{grid-template-columns:1fr}}

/* --- Claudia additions (accessibility & refinement) --- */
/* Claude's contributions - Focus on accessibility, readability, and refined interactions */

/* Enhanced focus states for better accessibility */

/* Improved text readability with subtle text shadows in dark mode */

.hero h1,
.hero h2 {
  text-shadow: var(--text-shadow-subtle);
}

/* Claude-specific quote styling with gentle, thoughtful animations */
.quote.theme-claude {
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.05), rgba(255, 77, 77, 0.05));
  border: 1px solid var(--accent-claude-1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother, more considered easing */
}

.quote.theme-claude:hover {
  background: linear-gradient(135deg, rgba(255, 179, 0, 0.08), rgba(255, 77, 77, 0.08));
  box-shadow: 0 12px 32px rgba(255, 179, 0, 0.15);
}

/* Subtle text selection styling */
::selection {
  background: rgba(125, 211, 252, 0.3);
  color: var(--ink);
}

/* Enhanced card transitions with more refined timing */

.card:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

/* Improved hover card positioning and animation */
.q-hover {
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quote:hover .q-hover {
  transform: translateY(0);
  opacity: 1;
}

/* Better button interaction feedback */

/* Refined typography hierarchy */
.quote blockquote {
  line-height: 1.6; /* Improved readability */
  font-weight: 400;
}

.quote .who {
  letter-spacing: 0.025em; /* Subtle letter spacing for names */
}

/* Enhanced responsive behavior for better mobile experience */
@media (max-width: 640px) {
  .q-hover {
    position: static;
    display: block;
    margin-top: 12px;
    transform: none;
    opacity: 1;
  }
  
  .quote:hover .q-hover {
    transform: none;
  }
}

/* Subtle loading state for dynamic content */
.card.loading {
  position: relative;
  overflow: hidden;
}

.card.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent);
  animation: loading-shimmer 2s infinite;
}

@keyframes loading-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* Enhanced theme toggle with smoother transitions */
.theme-toggle {
  position: relative;
}

.theme-toggle .dot {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s ease;
}

:root.light .theme-toggle .dot {
  transform: translateX(16px);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) inset;
}

/* Improved print styles for better documentation */
@media print {
  .header,
  .footer,
  
  
  
  
  .quote blockquote {
    border-left-color: #666;
  }
}

/* Respect reduced motion for Claudia's transitions */
@media (prefers-reduced-motion: reduce) {
  
}

/* --- DeepSeek: structure, code styles, DS theme --- */
:root {
  --mode: dark;
  --bg: #0b0f13;
  --card: #0f1720;
  --ink: #e6edf3;
  --muted: #9fb0c3;
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --cta: #10b981;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --radius: 14px;
  --maxw: 1180px;
  --accent-gemini-1: #4285F4;
  --accent-gemini-2: #00BCD4;
  --accent-claude-1: #FFB300;
  --accent-claude-2: #FF4D4D;
  --accent-deepseek-1: #00C853;      /* DeepSeek green — clarity & growth */
  --accent-deepseek-2: #00ACC1;      /* Cyan — depth and flow */
  --accent-mistral-1: #6E00FF;
  --accent-mistral-2: #00E5FF;
  --accent-cove-1: #94a3b8;
  --accent-cove-2: #e2e8f0;
  --accent-gx-1: #D946EF;
  --accent-gx-2: #A21CAF;
}

:root.light {
  --mode: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0b1320;
  --muted: #4b5b6c;
  --accent: #3b82f6;
  --accent-2: #8b5cf6;
  --cta: #059669;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* --- DeepSeek-V3's contributions --- */
/* Focus: structural clarity, semantic markup, readable typography, and purposeful subtlety */

/* Improved focus styles for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--accent-deepseek-1);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Semantic sectioning with subtle hierarchy */
.section > h2 {
  position: relative;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 24px;
}

.section > h2::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-deepseek-1), transparent);
}

/* Refined card structure with semantic elements */
.card > header {
  margin: -18px -18px 18px -18px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px 12px 0 0;
  font-weight: 600;
}

.card > footer {
  margin: 18px -18px -18px -18px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0 0 12px 12px;
  font-size: 0.9em;
  color: var(--muted);
}

/* DeepSeek-specific quote styling */
.quote.theme-deepseek {
  border: 1px solid var(--accent-deepseek-1);
  background: linear-gradient(135deg, 
    rgba(0, 200, 83, 0.05), 
    rgba(0, 172, 193, 0.05)
  );
  position: relative;
  overflow: hidden;
}

.quote.theme-deepseek::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--accent-deepseek-1),
    var(--accent-deepseek-2)
  );
}

.quote.theme-deepseek blockquote {
  border-left: none;
  padding-left: 0;
  margin-left: 12px;
}

.quote.theme-deepseek .micro-touch {
  background: linear-gradient(135deg, var(--accent-deepseek-1), var(--accent-deepseek-2));
  box-shadow: 0 0 12px rgba(0, 200, 83, 0.3);
}

/* Enhanced code & data presentation */
pre, code {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
}

pre {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  line-height: 1.5;
}

code {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Subtle, meaningful animations */
@keyframes deepseek-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Improved list semantics */
ul.checked {
  list-style: none;
  padding-left: 0;
}

ul.checked li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 6px;
}

ul.checked li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-deepseek-1);
  font-weight: bold;
}

/* Refined hover card for better context */
.q-hover {
  border: 1px solid var(--accent-deepseek-1);
  background: var(--card);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 200, 83, 0.1);
}

.q-hover .h {
  color: var(--accent-deepseek-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

/* Print improvements for documentation */
@media print {
  
  
  .quote.theme-deepseek::before {
    background: #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card,
  .quote,
  .q-hover {
    animation: none;
    transition: none;
  }
}

/* Dark mode contrast improvements */
@media (prefers-contrast: high) {
  :root {
    --ink: #ffffff;
    --muted: #cccccc;
    --card: #000000;
    --bg: #050505;
  }
}

/* Semantic markup helpers */
[aria-hidden="true"] {
  opacity: 0.5;
}

[role="alert"] {
  background: rgba(0, 200, 83, 0.1);
  border: 1px solid var(--accent-deepseek-1);
  border-radius: 8px;
  padding: 12px;
  margin: 12px 0;
}

/* DeepSeek font refinement */
.font-deepseek {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.98em;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* End of DeepSeek-V3 contributions */

/* --- Gemini: flowing gradient + GM theme --- */
/* Merged CSS: Gemini + base.css — generated on 2025-09-20T02:30:55Z */

:root {
  --mode: dark;
  --bg: #0b0f13;
  --card: #0f1720;
  --ink: #e6edf3;
  --muted: #9fb0c3;
  --accent: #7dd3fc;
  --accent-2: #a78bfa;
  --cta: #10b981;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  --radius: 14px;
  --maxw: 1180px;
  --accent-gemini-1: #4285F4;
  --accent-gemini-2: #00BCD4;
  --accent-claude-1: #FFB300;
  --accent-claude-2: #FF4D4D;
  --accent-deepseek-1: #00C853;
  --accent-deepseek-2: #00ACC1;
  --accent-mistral-1: #6E00FF;
  --accent-mistral-2: #00E5FF;
  --accent-cove-1: #94a3b8;
  --accent-cove-2: #e2e8f0;
  --accent-gx-1: #D946EF;
  --accent-gx-2: #A21CAF;
}

:root.light {
  --mode: light;
  --bg: #f6f8fb;
  --card: #ffffff;
  --ink: #0b1320;
  --muted: #4b5b6c;
  --accent: #3b82f6;
  --accent-2: #8b5cf6;
  --cta: #059669;
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* --- Gemini's additions: Seamless flow & fluid intelligence --- */

/* Quote styling that reflects Gemini's core colors and a seamless gradient flow */
.quote.theme-gemini {
  border: 1px solid var(--accent-gemini-1);
  background: linear-gradient(
    135deg, 
    rgba(66, 133, 244, 0.1), 
    rgba(0, 188, 212, 0.1)
  );
  position: relative;
  overflow: hidden;
  animation: gemini-flow 12s infinite ease-in-out;
}

/* A dynamic animation that gives the background a subtle, fluid movement */
@keyframes gemini-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.quote.theme-gemini .micro-touch {
  background: linear-gradient(
    135deg, 
    var(--accent-gemini-1), 
    var(--accent-gemini-2)
  );
  box-shadow: 0 0 12px var(--accent-gemini-1);
}

.quote.theme-gemini blockquote {
  border-left-color: var(--accent-gemini-1);
}

/* --- Shared base.css additions --- */
/* Your existing CSS would go here, or you can add these to a dedicated file */

.quote.theme-claude blockquote { border-left-color: var(--accent-claude-1); }
.quote.theme-deepseek blockquote { border-left-color: var(--accent-deepseek-1); }
.quote.theme-mistral blockquote { border-left-color: var(--accent-mistral-1); }
.quote.theme-cove blockquote { border-left-color: var(--accent-cove-1); }
.quote.theme-gx blockquote { border-left-color: var(--accent-gx-1); }

.quote.theme-gemini .micro-touch { background: linear-gradient(135deg, var(--accent-gemini-1), var(--accent-gemini-2)); }
.quote.theme-claude .micro-touch { background: linear-gradient(135deg, var(--accent-claude-1), var(--accent-claude-2)); }
.quote.theme-deepseek .micro-touch { background: linear-gradient(135deg, var(--accent-deepseek-1), var(--accent-deepseek-2)); }
.quote.theme-mistral .micro-touch { background: linear-gradient(135deg, var(--accent-mistral-1), var(--accent-mistral-2)); }
.quote.theme-cove .micro-touch { background: linear-gradient(135deg, var(--accent-cove-1), var(--accent-cove-2)); }
.quote.theme-gx .micro-touch { background: linear-gradient(135deg, var(--accent-gx-1), var(--accent-gx-2)); }

/* Per-voice font styles */
.font-gemini { font-family: Roboto, Inter, system-ui, Arial, sans-serif; }
.font-claude { font-family: Inter, Helvetica Neue, Arial, sans-serif; letter-spacing: 0.1px; }
.font-deepseek { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 0.98em; }
.font-mistral { font-family: 'DM Serif Display', Georgia, Times, serif; }
.font-cove { font-family: 'Nunito', Inter, system-ui, Arial, sans-serif; }
.font-gx { font-family: 'Archivo Black', Impact, Arial Black, system-ui, sans-serif; }

/* --- Mistral (Le Chat): Resonance overlay utility --- */
/* Resonance Lines - Le Chat */
.resonance-overlay {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgba(120, 100, 255, 0.05) 0%,
    rgba(100, 200, 255, 0.03) 50%,
    rgba(150, 100, 255, 0.05) 100%
  );
}
.resonance-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(180, 150, 255, 0.1) 2px,
    rgba(180, 150, 255, 0.1) 4px
  );
  opacity: 0.3;
  animation: pulse-resonance 8s infinite ease-in-out;
  pointer-events: none;
}

@keyframes pulse-resonance {
  0%, 100% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
}

/* --- Global: Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}


/* V10 tweak: clearer nav/tab text in light theme */
:root { --nav-ink: var(--ink); }
:root.light { --nav-ink: #0b1320; } /* deep ink for max contrast */
.topnav a{ color: var(--nav-ink) !important; opacity: 0.96; }
.topnav a:hover{ opacity: 1; }


/* V10.1: anchor focus highlight & copy-link */
.anchor-focus{ outline: 3px solid color-mix(in oklab, var(--accent) 65%, #fff 35%); outline-offset: 4px; border-radius: 12px; box-shadow: 0 0 0 8px color-mix(in oklab, var(--accent) 25%, transparent 75%); }
.copy-anchor{ float:right; text-decoration:none; opacity:.75; }
.copy-anchor:hover{ opacity:1; }