/* =============================================================================
   Ultra-Tec — Theme System
   Theme A: "Lab"     → Premium Lab Editorial (Ink-Blue + Mint, dark)
   Theme B: "Founder" → Brand-Founder-Look mit UT-CI (Parchment + UT-Blue, light)
   ============================================================================= */

:root, [data-theme="lab"] {
  --ink: #0B1220;
  --ink-700: #0E1626;
  --ink-200: #1F2937;
  --mint: #00E0A4;
  --mint-glow: rgba(0, 224, 164, 0.35);
  --parchment: #F5F2EC;
  --grain-opacity: 0.06;
}

[data-theme="founder"] {
  --ink: #0B2350;            /* Deep Navy fuer Text */
  --ink-700: #F5F2EC;        /* Subtle warmer Surface */
  --ink-200: rgba(11,35,80,0.1);
  --mint: #1A3D8F;           /* UT Corporate Blue */
  --mint-glow: rgba(26, 61, 143, 0.25);
  --parchment: #0B2350;      /* Text auf hellem Grund */
  --grain-opacity: 0.04;
}

/* Founder-Theme: globale Background- und Text-Overrides */
[data-theme="founder"] body {
  background: #FAF7F1 !important;
  color: #0B2350 !important;
}

/* Override Tailwind Color-Utilities */
[data-theme="founder"] .bg-ink-800 { background: #FAF7F1 !important; }
[data-theme="founder"] .bg-ink-700 { background: #F5F2EC !important; }
[data-theme="founder"] .bg-ink-700\/40 { background: rgba(15, 44, 86, 0.04) !important; }
[data-theme="founder"] .from-ink-700 { --tw-gradient-from: #F5F2EC var(--tw-gradient-from-position) !important; }
[data-theme="founder"] .to-ink-800 { --tw-gradient-to: #FAF7F1 var(--tw-gradient-to-position) !important; }

[data-theme="founder"] .text-parchment { color: #0B2350 !important; }
[data-theme="founder"] .text-parchment\/40 { color: rgba(11, 35, 80, 0.45) !important; }
[data-theme="founder"] .text-parchment\/50 { color: rgba(11, 35, 80, 0.55) !important; }
[data-theme="founder"] .text-parchment\/60 { color: rgba(11, 35, 80, 0.65) !important; }
[data-theme="founder"] .text-parchment\/65 { color: rgba(11, 35, 80, 0.7) !important; }
[data-theme="founder"] .text-parchment\/70 { color: rgba(11, 35, 80, 0.72) !important; }
[data-theme="founder"] .text-parchment\/80 { color: rgba(11, 35, 80, 0.85) !important; }
[data-theme="founder"] .text-parchment\/85 { color: rgba(11, 35, 80, 0.88) !important; }
[data-theme="founder"] .text-parchment\/10 { color: rgba(11, 35, 80, 0.12) !important; }

[data-theme="founder"] .text-mint { color: #1A3D8F !important; }
[data-theme="founder"] .bg-mint { background: #1A3D8F !important; color: #fff !important; }
[data-theme="founder"] .bg-mint\/10 { background: rgba(26, 61, 143, 0.08) !important; }
[data-theme="founder"] .bg-mint\/15 { background: rgba(26, 61, 143, 0.1) !important; }
[data-theme="founder"] .border-mint { border-color: #1A3D8F !important; }
[data-theme="founder"] .border-mint\/20 { border-color: rgba(26, 61, 143, 0.22) !important; }
[data-theme="founder"] .border-mint\/40 { border-color: rgba(26, 61, 143, 0.4) !important; }
[data-theme="founder"] .text-ink-800 { color: #fff !important; }

[data-theme="founder"] .border-parchment\/5 { border-color: rgba(11, 35, 80, 0.06) !important; }
[data-theme="founder"] .border-parchment\/10 { border-color: rgba(11, 35, 80, 0.1) !important; }
[data-theme="founder"] .border-parchment\/15 { border-color: rgba(11, 35, 80, 0.15) !important; }
[data-theme="founder"] .border-parchment\/20 { border-color: rgba(11, 35, 80, 0.2) !important; }
[data-theme="founder"] .bg-parchment\/10 { background: rgba(11, 35, 80, 0.1) !important; }

/* Hero-Mesh */
[data-theme="founder"] .hero-mesh {
  background:
    radial-gradient(at 20% 0%, rgba(26, 61, 143, 0.08) 0, transparent 45%),
    radial-gradient(at 80% 100%, rgba(26, 61, 143, 0.05) 0, transparent 50%),
    radial-gradient(at 50% 50%, rgba(26, 61, 143, 0.03) 0, transparent 60%),
    #FAF7F1 !important;
}

/* Bento-Card */
[data-theme="founder"] .bento-card {
  background: linear-gradient(180deg, rgba(15, 44, 86, 0.025), rgba(15, 44, 86, 0.005)) !important;
  border-color: rgba(11, 35, 80, 0.1) !important;
}
[data-theme="founder"] .bento-card::before {
  background: linear-gradient(140deg, rgba(26, 61, 143, 0.5), transparent 40%) !important;
}

/* Buttons */
[data-theme="founder"] .btn-primary { background: #1A3D8F; color: #fff; }
[data-theme="founder"] .btn-primary:hover { box-shadow: 0 12px 40px rgba(26, 61, 143, 0.25); }
[data-theme="founder"] .btn-secondary { border-color: rgba(11, 35, 80, 0.25); color: #0B2350; }
[data-theme="founder"] .btn-secondary:hover { border-color: #1A3D8F; background: rgba(26, 61, 143, 0.04); }

/* Eyebrow / Pill */
[data-theme="founder"] .eyebrow { color: rgba(11, 35, 80, 0.65); }
[data-theme="founder"] .eyebrow::before { background: #1A3D8F; }
[data-theme="founder"] .pill {
  background: rgba(26, 61, 143, 0.06);
  border-color: rgba(26, 61, 143, 0.18);
  color: #1A3D8F;
}
[data-theme="founder"] .pill-dot { background: #1A3D8F; box-shadow: 0 0 8px rgba(26, 61, 143, 0.4); }

/* Hairlines */
[data-theme="founder"] .hairline { background: linear-gradient(90deg, transparent, rgba(11, 35, 80, 0.18), transparent); }
[data-theme="founder"] .hairline-mint { background: linear-gradient(90deg, transparent, rgba(26, 61, 143, 0.4), transparent); }

/* Mint-Glow → UT-Blue-Glow */
[data-theme="founder"] .mint-glow {
  box-shadow: 0 0 0 1px rgba(26, 61, 143, 0.15), 0 8px 30px rgba(26, 61, 143, 0.18);
}

/* Header Backdrop */
[data-theme="founder"] [data-header].is-scrolled {
  background: rgba(250, 247, 241, 0.85) !important;
  border-color: rgba(11, 35, 80, 0.08) !important;
}

/* Form Inputs */
[data-theme="founder"] .ut-input {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(11, 35, 80, 0.15);
  color: #0B2350;
}
[data-theme="founder"] .ut-input::placeholder { color: rgba(11, 35, 80, 0.4); }
[data-theme="founder"] .ut-input:hover { border-color: rgba(11, 35, 80, 0.25); }
[data-theme="founder"] .ut-input:focus {
  background: #fff;
  border-color: #1A3D8F;
  box-shadow: 0 0 0 3px rgba(26, 61, 143, 0.12);
}

/* Selection */
[data-theme="founder"] body.selection\:bg-mint::selection,
[data-theme="founder"] ::selection { background: #1A3D8F; color: #fff; }

/* Mobile Drawer — vollflaechig deckend in beiden Themes */
[data-mobile-drawer].bg-ink-800 { background: #0B1220 !important; }
[data-theme="founder"] [data-mobile-drawer].bg-ink-800 { background: #FAF7F1 !important; }

/* Logo-Switch */
.logo-lab { display: inline-flex; }
.logo-founder { display: none; }
[data-theme="founder"] .logo-lab { display: none; }
[data-theme="founder"] .logo-founder { display: inline-flex; }

/* Prose Override fuer Founder */
[data-theme="founder"] .prose-invert {
  --tw-prose-body: rgba(11, 35, 80, 0.78);
  --tw-prose-headings: #0B2350;
  --tw-prose-lead: rgba(11, 35, 80, 0.7);
  --tw-prose-links: #1A3D8F;
  --tw-prose-bold: #0B2350;
  --tw-prose-bullets: rgba(26, 61, 143, 0.7);
  --tw-prose-hr: rgba(11, 35, 80, 0.12);
  --tw-prose-quotes: #0B2350;
  --tw-prose-quote-borders: #1A3D8F;
}
[data-theme="founder"] .prose-invert a { border-bottom-color: rgba(26, 61, 143, 0.4); }
[data-theme="founder"] .prose-invert a:hover { border-bottom-color: #1A3D8F; }

/* Theme-Toggle-Button — innerhalb Header */
[data-theme="founder"] [data-theme-toggle] {
  border-color: rgba(11, 35, 80, 0.18) !important;
}
[data-theme="founder"] [data-theme-toggle]:hover { border-color: #1A3D8F !important; }

/* SVG Stroke fuer Founder mode */
[data-theme="founder"] .text-mint svg { stroke: #1A3D8F; }

/* Founder-Theme: Sans-Serif Headlines (Bricolage Grotesque)
   Normale Breite (wdth 100), medium Gewicht (~440), luftig statt condensed.
*/
[data-theme="founder"] .font-display,
[data-theme="founder"] .editorial-quote,
[data-theme="founder"] .prose-invert h1,
[data-theme="founder"] .prose-invert h2,
[data-theme="founder"] .prose-invert h3,
[data-theme="founder"] .prose-invert h4 {
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif !important;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 440 !important;
  letter-spacing: -0.022em !important;
  font-feature-settings: 'ss01' on, 'ss03' on;
}
[data-theme="founder"] .font-display em,
[data-theme="founder"] .font-display .italic,
[data-theme="founder"] .editorial-quote em,
[data-theme="founder"] .editorial-quote .italic {
  font-style: italic !important;
  font-variation-settings: 'opsz' 96, 'wdth' 100, 'wght' 360 !important;
  letter-spacing: -0.018em !important;
}
[data-theme="founder"] .editorial-quote {
  font-variation-settings: 'opsz' 72, 'wdth' 100, 'wght' 340 !important;
}
[data-theme="founder"] .prose-invert h2 {
  font-variation-settings: 'opsz' 64, 'wdth' 100, 'wght' 460 !important;
}
[data-theme="founder"] .prose-invert h3 {
  font-variation-settings: 'opsz' 36, 'wdth' 100, 'wght' 480 !important;
}


/* Smooth scroll baseline */
html { scroll-behavior: smooth; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Editorial Typography */
.font-display {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'wght' 350, 'SOFT' 50, 'WONK' 1;
  font-feature-settings: 'ss01' on, 'ss02' on;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.font-display em, .font-display .italic {
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100, 'WONK' 1;
}
.font-mono-tight { font-family: 'JetBrains Mono', monospace; letter-spacing: -0.01em; }

/* Numbers / Tabular */
.tabular { font-variant-numeric: tabular-nums; }

/* Subtle film grain overlay */
.grain::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* Mint accent glow */
.mint-glow { box-shadow: 0 0 0 1px rgba(0,224,164,0.15), 0 8px 30px var(--mint-glow); }

/* Editorial section spacing */
.section { padding-top: clamp(4rem, 10vw, 9rem); padding-bottom: clamp(4rem, 10vw, 9rem); }
.section-tight { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Hero gradient mesh */
.hero-mesh {
  background:
    radial-gradient(at 20% 0%, rgba(0,224,164,0.12) 0, transparent 45%),
    radial-gradient(at 80% 100%, rgba(0,224,164,0.08) 0, transparent 50%),
    radial-gradient(at 50% 50%, rgba(0,224,164,0.04) 0, transparent 60%),
    #0B1220;
}

/* Bento card hover */
.bento-card {
  position: relative;
  isolation: isolate;
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  border: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}
.bento-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(0,224,164,0.4), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.bento-card:hover { transform: translateY(-4px); }
.bento-card:hover::before { opacity: 1; }

/* Underline animation for nav */
.nav-link {
  position: relative;
  padding-bottom: 0.25rem;
}
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 1px; width: 0;
  background: var(--mint);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { width: 100%; }

/* Hairline divider */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,242,236,0.18), transparent);
  border: 0;
}
.hairline-mint {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,224,164,0.4), transparent);
}

/* Vertical mark | for editorial labels */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.6);
}
.eyebrow::before {
  content: ''; width: 1.5rem; height: 1px; background: var(--mint);
}

/* Process timeline rail */
.timeline-rail {
  position: absolute;
  left: 0; right: 0;
  top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(245,242,236,0.08) 0%, rgba(0,224,164,0.5) 50%, rgba(245,242,236,0.08) 100%);
}

/* CTA button — primary */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: var(--mint);
  color: var(--ink);
  font-weight: 600; letter-spacing: -0.01em;
  border-radius: 0.6rem;
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .3s;
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 40px var(--mint-glow); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary svg, .btn-primary .arrow { transition: transform .3s; }
.btn-primary:hover .arrow { transform: translateX(3px); }

/* CTA button — secondary */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.95rem 1.5rem;
  background: transparent;
  border: 1px solid rgba(245,242,236,0.25);
  color: var(--parchment);
  font-weight: 500;
  border-radius: 0.6rem;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover { border-color: var(--mint); background: rgba(0,224,164,0.04); }

/* Reveal animation hooks (used by GSAP/IO) */
[data-reveal] { opacity: 0; transform: translateY(20px); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); transition: opacity 1s, transform 1s cubic-bezier(.2,.8,.2,1); }

/* Marquee for trust badges */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; gap: 4rem;
  animation: marquee 36s linear infinite;
  width: max-content;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Stat number animation */
.stat-number { font-feature-settings: 'tnum'; }

/* Capsule pill */
.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.75rem;
  background: rgba(0,224,164,0.08);
  border: 1px solid rgba(0,224,164,0.2);
  color: var(--mint);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); animation: pulse 2.4s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Editorial blockquote */
.editorial-quote {
  font-family: 'Fraunces', serif;
  font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100, 'WONK' 1;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Form Inputs */
.ut-input {
  display: block;
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(11, 18, 32, 0.6);
  border: 1px solid rgba(245, 242, 236, 0.12);
  border-radius: 0.6rem;
  color: var(--parchment);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.ut-input::placeholder { color: rgba(245, 242, 236, 0.35); }
.ut-input:hover { border-color: rgba(245, 242, 236, 0.22); }
.ut-input:focus {
  outline: none;
  border-color: var(--mint);
  background: rgba(11, 18, 32, 0.85);
  box-shadow: 0 0 0 3px rgba(0, 224, 164, 0.15);
}
textarea.ut-input { resize: vertical; min-height: 7rem; }
.ut-input-error {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.05);
}

/* Tailwind Typography (prose) Dark-Mode-Customizing */
.prose-invert {
  --tw-prose-body: rgba(245, 242, 236, 0.78);
  --tw-prose-headings: var(--parchment);
  --tw-prose-lead: rgba(245, 242, 236, 0.7);
  --tw-prose-links: var(--mint);
  --tw-prose-bold: var(--parchment);
  --tw-prose-counters: rgba(245, 242, 236, 0.5);
  --tw-prose-bullets: rgba(0, 224, 164, 0.6);
  --tw-prose-hr: rgba(245, 242, 236, 0.12);
  --tw-prose-quotes: var(--parchment);
  --tw-prose-quote-borders: var(--mint);
  --tw-prose-captions: rgba(245, 242, 236, 0.5);
  --tw-prose-code: var(--mint);
  --tw-prose-pre-code: var(--parchment);
  --tw-prose-pre-bg: rgba(11, 18, 32, 0.8);
  --tw-prose-th-borders: rgba(245, 242, 236, 0.2);
  --tw-prose-td-borders: rgba(245, 242, 236, 0.1);
}
.prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'opsz' 144, 'wght' 400, 'SOFT' 50, 'WONK' 1;
  letter-spacing: -0.02em;
}
.prose-invert h2 { font-size: 2.5rem; line-height: 1.05; margin-top: 2.5rem; }
.prose-invert h3 { font-size: 1.75rem; line-height: 1.15; margin-top: 2rem; }
.prose-invert a { text-decoration: none; border-bottom: 1px solid rgba(0, 224, 164, 0.4); transition: border-color .2s, color .2s; }
.prose-invert a:hover { border-color: var(--mint); }
.prose-invert img { border-radius: 0.75rem; }
.prose-invert blockquote { border-left-width: 2px; padding-left: 1.5rem; font-style: italic; }
.prose-invert hr { margin: 3rem 0; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}