@font-face {
        font-family: 'MiSans-Regular';
        src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Regular.ttf')
          format('truetype');
      }
      @font-face {
        font-family: 'MiSans-Bold';
        src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Bold.ttf')
          format('truetype');
      }
      @font-face {
        font-family: 'MiSans-Semibold';
        src: url('https://assets-persist.lovart.ai/agent-static-assets/MiSans-Semibold.ttf')
          format('truetype');
      }

      :root {
        --primary-blue: #3b82f6;
        --primary-purple: #8b5cf6;
        --accent-green: #10b981;
        --bg-light: #f8fafc;
        --text-main: #0f172a;
        --text-sub: #475569;
        --border-light: rgba(148, 163, 184, 0.2);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'MiSans-Regular', sans-serif;
        color: var(--text-main);
        background: var(--bg-light);
        overflow-x: hidden;
      }

      .container {
        width: 100%;
        position: relative;
        background: #ffffff;
        overflow: hidden;
        min-height: 100vh;
      }

      /* Background blur elements */
      .blur-circle {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.15;
        z-index: 1;
      }
      .blur-circle.blue {
        width: 600px;
        height: 600px;
        background: var(--primary-blue);
        top: -200px;
        right: -200px;
      }
      .blur-circle.purple {
        width: 500px;
        height: 500px;
        background: var(--primary-purple);
        bottom: -150px;
        left: -200px;
      }

      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32px clamp(24px, 6vw, 120px);
        position: relative;
        z-index: 10;
        flex-wrap: wrap;
        gap: 16px;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        font-family: 'MiSans-Bold';
        font-size: 24px;
      }
      .logo img {
        width: 40px;
        height: 40px;
      }
      .logo a {
        color: inherit!important;
        text-decoration: none!important;
      }

      nav {
        flex: 1 1 320px;
        display: flex;
        justify-content: center;
      }

      nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: clamp(16px, 3vw, 40px);
        list-style: none;
      }
      nav a {
        text-decoration: none;
        color: var(--text-main);
        font-weight: 500;
        font-size: 18px;
        transition: color 0.2s;
      }
      nav a:hover {
        color: var(--primary-blue);
      }

      .version-tag {
        background: rgba(16, 185, 129, 0.1);
        color: var(--accent-green);
        padding: 8px 16px;
        border-radius: 999px;
        font-size: 14px;
        font-family: 'MiSans-Semibold';
      }

      /* Hero section */
      .hero {
        display: flex;
        align-items: center;
        padding: 80px 120px;
        position: relative;
        z-index: 5;
      }

      .hero-content {
        width: 50%;
        padding-right: 40px;
      }

      h1 {
        font-family: 'MiSans-Bold';
        font-size: clamp(40px, 7vw, 84px);
        line-height: 1.1;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .hero-subtitle {
        font-size: 22px;
        line-height: 1.6;
        color: var(--text-sub);
        margin-bottom: 32px;
        max-width: 560px;
      }

      .cta-group {
        display: flex;
        gap: 24px;
      }

      .btn-primary,
      .btn-secondary {
        padding: 20px 48px;
        border-radius: 999px;
        font-family: 'MiSans-Semibold';
        font-size: 18px;
        cursor: pointer;
        transition: all 0.3s;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
      }

      .btn-primary {
        background: var(--primary-blue);
        white-space: nowrap;
        color: white;
        border: none;
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
      }
      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(59, 130, 246, 0.4);
      }

      .btn-secondary {
        background: white;
        white-space: nowrap;
        color: var(--text-main);
        border: 1px solid var(--border-light);
      }
      .btn-secondary:hover {
        background: var(--bg-light);
        transform: translateY(-2px);
      }

      /* Visual/logo area */
      .hero-visual {
        width: 45%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .logo-container {
        position: relative;
        width: min(500px, 80vw);
        height: min(500px, 80vw);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .orbit {
        position: absolute;
        border-radius: 50%;
        border: 1px solid rgba(59, 130, 246, 0.2);
        animation: rotate 20s linear infinite;
      }
      .orbit-1 {
        width: 70%;
        height: 70%;
      }
      .orbit-2 {
        width: 95%;
        height: 95%;
        border-color: rgba(139, 92, 246, 0.1);
        animation-duration: 30s;
      }
      .orbit-3 {
        width: 120%;
        height: 120%;
        border-style: dashed;
        opacity: 0.3;
        animation-duration: 40s;
      }

      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      /* Simple SVG/TM mark in center */
      .center-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 5;
      }

      .center-logo svg {
        width: 100px;
        height: 100px;
      }

      /* Features */
      .features {
        padding: 80px 120px;
        background: var(--bg-light);
        position: relative;
        z-index: 5;
      }

      .section-title {
        font-family: 'MiSans-Bold';
        font-size: 48px;
        text-align: center;
        margin-bottom: 16px;
      }

      .section-subtitle {
        font-size: 20px;
        color: var(--text-sub);
        text-align: center;
        margin-bottom: 64px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
      }

      .feature-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
      }

      .feature-card {
        background: white;
        border-radius: 24px;
        padding: 32px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
        border: 1px solid var(--border-light);
        transition: all 0.3s;
        position: relative;
        overflow: hidden;
      }

      .feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: linear-gradient(
          90deg,
          var(--primary-blue),
          var(--primary-purple)
        );
        opacity: 0;
        transition: opacity 0.3s;
      }

      .feature-card.active {
        transform: translateY(-10px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
          0 10px 10px -5px rgba(0, 0, 0, 0.02);
      }
      .feature-card.active::before {
        opacity: 1;
      }

      .feature-icon {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        margin: 0;
        padding: 0;
      }
      .feature-icon.purple,
      .feature-icon.green {
        background: transparent;
        color: inherit;
      }
      .feature-icon img {
        display: block;
        width: min(120px, 60%);
        height: auto;
      }

      .feature-title {
        font-family: 'MiSans-Semibold';
        font-size: 20px;
        margin-bottom: 12px;
      }

      .feature-desc {
        font-size: 16px;
        line-height: 1.6;
        color: var(--text-sub);
      }

      /* Code Preview */
      .code-preview {
        background: #1e293b;
        border-radius: 24px;
        padding: 28px;
        width: 100%;
        max-width: 500px;
        color: #e2e8f0;
        font-family: monospace;
        font-size: 15px;
        line-height: 1.5;
        position: relative;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
      }
      .code-dots {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
      }
      .code-dots span {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #475569;
      }
      .code-line {
        margin-bottom: 6px;
      }

      /* Footer */
      .footer-simple {
        border-top: 1px solid var(--border-light);
        padding: 48px 120px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: var(--text-sub);
        font-size: 14px;
        background: #fff;
      }

      .footer-left,
      .footer-right {
        display: flex;
        align-items: center;
        gap: 24px;
      }

      .social-links {
        display: flex;
        gap: 24px;
        font-size: 20px;
      }
      .social-links a {
        color: var(--text-sub);
        transition: color 0.2s;
      }
      .social-links a:hover {
        color: var(--primary-blue);
      }

      /* Fluent horizontal padding */
      header,
      .hero,
      .features,
      .footer-simple,
      .example-section {
        padding-left: clamp(20px, 6vw, 120px);
        padding-right: clamp(20px, 6vw, 120px);
      }
      .examples-gallery {
        padding-left: clamp(20px, 6vw, 120px);
        padding-right: clamp(20px, 6vw, 120px);
        padding-top: 40px;
        padding-bottom: 60px;
        position: relative;
        z-index: 5;
      }

      /* Real hover (active class still supported) */
      .feature-card:hover::before {
        opacity: 1;
      }
      .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05),
          0 10px 10px -5px rgba(0, 0, 0, 0.02);
      }

      /* Keyboard focus */
      a,
      button {
        outline: none;
      }
      a:focus-visible,
      button:focus-visible {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.35);
        border-radius: 999px;
      }

      /* Example section */
      .example-section {
        padding-top: 20px;
        padding-bottom: 40px;
        position: relative;
        z-index: 5;
      }
      .example-inner {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 32px;
        align-items: center;
      }
      .example-copy h2 {
        font-family: 'MiSans-Bold';
        font-size: clamp(24px, 3.2vw, 36px);
        margin-bottom: 12px;
        color: var(--text-main);
      }
      .example-copy p {
        font-size: 18px;
        line-height: 1.7;
        color: var(--text-sub);
        margin-bottom: 16px;
      }
      .example-bullets {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 8px;
        font-size: 16px;
        color: var(--text-main);
      }
      .example-bullets i {
        color: var(--primary-blue);
        margin-right: 8px;
      }

      .examples-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
      }

      .example-card {
        border: 1px solid var(--border-light);
        background: rgba(255, 255, 255, 0.65);
        border-radius: 16px;
        padding: 18px;
        backdrop-filter: blur(4px);
        display: grid;
        gap: 10px;
        min-height: 180px;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
      }

      .example-card__media {
        border-radius: 14px;
        overflow: hidden;
        aspect-ratio: 16 / 9;
        background: rgba(15, 23, 42, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .example-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .example-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 24px rgba(15, 23, 42, 0.08);
      }

      .example-card h3 {
        font-size: 18px;
        margin: 0;
        color: var(--text-main);
      }

      .example-card p {
        margin: 0;
        color: var(--text-sub);
        line-height: 1.5;
      }

      .example-card__meta {
        font-size: 13px;
        color: var(--text-sub);
      }

      .example-card__link {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: var(--primary-blue);
      }

      .examples-page {
        padding-top: 120px;
      }

      .doc-page {
        padding: 120px clamp(20px, 6vw, 120px) 80px;
        display: grid;
        gap: 24px;
        position: relative;
        z-index: 5;
      }

      .doc-hero h1 {
        font-family: 'MiSans-Bold';
        font-size: clamp(32px, 4vw, 48px);
        margin-bottom: 8px;
        color: var(--text-main);
      }

      .doc-hero p {
        font-size: 18px;
        color: var(--text-sub);
        line-height: 1.6;
      }

      .doc-card {
        border: 1px solid var(--border-light);
        border-radius: 16px;
        padding: 20px;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(6px);
        display: grid;
        gap: 12px;
      }

      .doc-card h2 {
        margin: 0;
        font-size: 20px;
        color: var(--text-main);
      }

      .doc-card pre {
        margin: 0;
        background: #0f172a;
        color: #e2e8f0;
        padding: 14px 16px;
        border-radius: 12px;
        overflow-x: auto;
      }

      .doc-card code {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
      }

      .doc-toc {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 16px;
        border: 1px solid var(--border-light);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(6px);
      }

      .doc-toc a {
        color: var(--text-main);
        font-weight: 600;
        font-size: 14px;
      }

      .doc-links {
        list-style: none;
        padding: 0;
        margin: 0;
        display: grid;
        gap: 8px;
      }

      .doc-links a {
        color: var(--primary-blue);
        font-weight: 600;
      }

      /* Responsive layout */
      @media (max-width: 1024px) {
        .feature-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .hero-content {
          width: 55%;
        }
        .hero-visual {
          width: 40%;
          pointer-events: none;
        }
        .example-inner {
          grid-template-columns: 1fr;
        }
      }

      @media (max-width: 768px) {
        header {
          flex-wrap: wrap;
          gap: 16px;
        }
        nav ul {
          gap: 20px;
          font-size: 16px;
        }

        .hero {
          flex-direction: column;
          padding-top: 40px;
          gap: 40px;
        }
        .hero-content,
        .hero-visual {
          width: 100%;
          padding-right: 0;
        }
        .cta-group {
          flex-direction: column;
          align-items: flex-start;
        }
        .feature-grid {
          grid-template-columns: 1fr;
        }

        .blur-circle {
          filter: blur(48px);
          opacity: 0.12;
        }
      }
/* =========================================================
   BEBOP OVERRIDES for Turbomini (paste at end of app.css)
   ========================================================= */

/* Type: add a sharp serif lead + mono comping */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Roboto+Mono:wght@400;600&display=swap");

:root{
  /* keep your existing vars, but add bebop ones */
  --bebop-bg: #0b0c10;
  --bebop-panel: rgba(244,241,234,.06);
  --bebop-fg: #f4f1ea;
  --bebop-muted: rgba(244,241,234,.72);
  --bebop-border: rgba(244,241,234,.14);
  --bebop-grid: rgba(244,241,234,.10);

  /* One accent (swap in JS if you want) */
  --bebop-accent: #00E5A8;
  --bebop-accent-2: #FFD84A;
}

/* Base flip: nocturnal */
body{
  background: var(--bebop-bg) !important;
  color: var(--bebop-fg) !important;
}

/* Your container is white; neutralize it */
.container{
  background: transparent !important;
}

/* Staff-line grid + stage lights */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    
    radial-gradient(circle at 18% 22%, rgba(0,229,168,.12), transparent 48%),
    radial-gradient(circle at 82% 12%, rgba(255,216,74,.10), transparent 45%);
  opacity: .95;
}

/* Make your blur circles moodier (keep them!) */
.blur-circle{
  opacity: .22 !important;
  filter: blur(70px) saturate(140%) contrast(125%) !important;
  mix-blend-mode: screen;
  z-index: 0;
  position: fixed;
}

/* Header: less "nav bar", more "club marquee" */
header{
  border-bottom: 1px solid rgba(244,241,234,.18);
  padding-top: 26px;
  padding-bottom: 18px;
}

/* Brand becomes the lead */
.logo{
  font-family: "Instrument Serif", serif !important;
  font-size: 22px !important;
  letter-spacing: .02em;
}

/* Nav becomes crisp pills */
nav a{
  color: var(--bebop-muted) !important;
  font-size: 15px !important;
  border: 1px solid var(--bebop-border);
  padding: 7px 10px;
  border-radius: 999px;
  transition: transform 90ms linear, background 90ms linear, color 90ms linear;
}
nav a:hover{
  color: var(--bebop-fg) !important;
  background: rgba(244,241,234,.08);
  transform: translateX(2px);
}

/* Version tag: no "SaaS green", use nocturnal badge with accent */
.version-tag{
  background: rgba(244,241,234,.06) !important;
  color: var(--bebop-fg) !important;
  border: 1px solid var(--bebop-border);
}



/* Your h1 currently has a light gradient; replace with punchy monochrome + accent */
h1{
  font-family: "Instrument Serif", serif !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--bebop-fg) !important;
  line-height: .92 !important;
  letter-spacing: .01em;
  transform: translateX(-6px); /* intentional “wrong” */
  position: relative;
}

/* If you applied the <span>/<em> change */
h1 em{
  font-style: italic;
  opacity: .95;
}
h1::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -10px;
  width: 92px;
  height: 2px;
  background: var(--bebop-accent);
  opacity: .9;
}

/* Subhead: muted + a bit tighter */
.hero-subtitle{
  color: var(--bebop-muted) !important;
  font-size: 18px !important;
  max-width: 62ch;
}

/* Buttons: percussive */
.btn-primary,
.btn-secondary{
  font-family: "Roboto Mono", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: .02em;
  padding: 16px 26px !important;
  transition: transform 70ms linear, background 70ms linear, border-color 70ms linear !important;
}

.btn-primary{
  background: var(--bebop-accent) !important;
  color: #06110f !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.25) !important;
}
.btn-secondary{
  background: rgba(244,241,234,.06) !important;
  color: var(--bebop-fg) !important;
  border: 1px solid var(--bebop-border) !important;
}
.btn-primary:hover,
.btn-secondary:hover{
  transform: translateY(-1px) translateX(2px) !important;
}
.btn-primary:active,
.btn-secondary:active{
  transform: scale(.985) !important;
}

/* Stop the visual interferring with buttons */
.hero-visual{
  pointer-events:none;
}

/* Orbits: less airy pastel, more graphic ink */
.orbit{
  border-color: rgba(244,241,234,.16) !important;
}
.orbit-2{ border-color: rgba(244,241,234,.10) !important; }
.orbit-3{
  opacity: .45 !important;
  border-style: dashed;
}

/* Example section: editorial contrast */
.example-copy h2,
.section-title{
  font-family: "Instrument Serif", serif !important;
  color: var(--bebop-fg) !important;
}

.example-copy p,
.section-subtitle{
  color: var(--bebop-muted) !important;
}

/* Bullets: switch check color to accent */
.example-bullets{
  color: rgba(244,241,234,.88) !important;
}
.example-bullets i{
  color: var(--bebop-accent) !important;
}

/* Code preview: deep ink + subtle accent wash */
.code-preview{
  background: #06070a !important;
  border: 1px solid rgba(244,241,234,.16) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.55) !important;
}
.code-preview pre,
.code-preview code{
  font-family: "Roboto Mono", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
  font-size: 12.5px !important;
}
.code-preview::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(0,229,168,.10), transparent 40%, rgba(255,216,74,.08));
}

/* Features: break the polite grid */
.features{
  background: transparent !important;
}

.feature-card{
  background: rgba(244,241,234,.05) !important;
  border: 1px solid var(--bebop-border) !important;
  box-shadow: none !important;
  transition: transform 90ms linear, background 90ms linear, border-color 90ms linear !important;
}



.feature-card:hover{
  transform: translateY(-2px) translateX(2px) !important;
  background: rgba(244,241,234,.07) !important;
  border-color: rgba(244,241,234,.28) !important;
  box-shadow: none !important;
}



.feature-icon{
  background: transparent !important;
  color: var(--bebop-accent) !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.feature-icon.purple,
.feature-icon.green{
  background: transparent !important;
  color: var(--bebop-accent) !important;
}
.feature-icon img{
  display: block !important;
  width: min(120px, 60%) !important;
  height: auto !important;
}
.feature-title{
  color: rgba(244,241,234,.92) !important;
  font-family: "Roboto Mono", ui-monospace, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: .02em;
}
.feature-desc{
  color: var(--bebop-muted) !important;
}

/* Examples gallery cards: less glass, more ink */
.example-card{
  background: rgba(244,241,234,.04) !important;
  border: 1px solid var(--bebop-border) !important;
  backdrop-filter: none !important;
}
.example-card__media{
  background: rgba(244,241,234,.06) !important;
  border: 1px solid rgba(244,241,234,.16);
}
.example-card h3{ color: rgba(244,241,234,.92) !important; }
.example-card p{ color: var(--bebop-muted) !important; }
.example-card__meta{ color: rgba(244,241,234,.70) !important; }
.example-card__link{
  color: var(--bebop-accent) !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,229,168,.35);
}

/* Doc pages: keep same structure, match theme */
.doc-page{ color: var(--bebop-fg) !important; }
.doc-hero h1{ color: var(--bebop-fg) !important; background: none !important; }
.doc-hero p{ color: var(--bebop-muted) !important; }

.doc-card,
.doc-toc{
  background: rgba(244,241,234,.04) !important;
  border: 1px solid var(--bebop-border) !important;
  backdrop-filter: none !important;
}
.doc-card h2{ color: rgba(244,241,234,.92) !important; }

.doc-toc a{ color: rgba(244,241,234,.85) !important; }
.doc-links a{ color: var(--bebop-accent) !important; }

/* Footer */
.footer-simple{
  background: transparent !important;
  border-top: 1px solid rgba(244,241,234,.18) !important;
  color: rgba(244,241,234,.70) !important;
}
.social-links a{ color: rgba(244,241,234,.70) !important; }
.social-links a:hover{ color: var(--bebop-accent) !important; }

/* Focus: crisp accent */
a:focus-visible,
button:focus-visible{
  box-shadow: 0 0 0 3px rgba(0,229,168,.35) !important;
  border-radius: 999px;
}