:root {  
      --max: 1200px;  
      --radius: 22px;  
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;  
    }  
  
    html[data-theme="dark"] {  
      --bg: #0d1117;  
      --bg-2: #010409;  
      --surface: #161b22;  
      --surface-2: #0f1720;  
      --card: rgba(22, 27, 34, 0.78);  
      --text: #e6edf3;  
      --muted: #8b949e;  
      --border: rgba(240, 246, 252, 0.12);  
      --accent: #2f81f7;  
      --accent-2: #a371f7;  
      --accent-3: #3fb950;  
      --danger: #ff7b72;
      --fg: #e6edf3;
      --accent-rgb: 47, 129, 247;
      --shadow: 0 30px 100px rgba(0,0,0,0.45);
      --hero-bg:  
        radial-gradient(circle at 75% 14%, rgba(47,129,247,0.32), transparent 32%),  
        radial-gradient(circle at 20% 20%, rgba(163,113,247,0.22), transparent 32%),  
        radial-gradient(circle at 50% 105%, rgba(63,185,80,0.10), transparent 38%),  
        linear-gradient(180deg, #010409 0%, #0d1117 55%, #0d1117 100%);  
    }  
  
    html[data-theme="light"] {  
      --bg: #ffffff;  
      --bg-2: #f6f8fa;  
      --surface: #ffffff;  
      --surface-2: #f6f8fa;  
      --card: rgba(255,255,255,0.88);  
      --text: #0f172a;  
      --muted: #57606a;  
      --border: rgba(27,31,36,0.14);  
      --accent: #0969da;  
      --accent-2: #8250df;  
      --accent-3: #1a7f37;  
      --danger: #cf222e;
      --fg: #0f172a;
      --accent-rgb: 9, 105, 218;
      --shadow: 0 30px 80px rgba(31,35,40,0.13);
      --hero-bg:  
        radial-gradient(circle at 75% 14%, rgba(9,105,218,0.16), transparent 32%),  
        radial-gradient(circle at 20% 20%, rgba(130,80,223,0.14), transparent 32%),  
        linear-gradient(180deg, #f6f8fa 0%, #ffffff 65%);  
    }  
  
    * {  
      box-sizing: border-box;  
      margin: 0;  
      padding: 0;  
    }  
  
    html {  
      scroll-behavior: smooth;  
      overflow-x: hidden;  
    }  
  
    body {  
      font-family: var(--font);  
      background: var(--bg);  
      color: var(--text);  
      line-height: 1.6;  
      overflow-x: hidden;  
      -webkit-font-smoothing: antialiased;  
    }  
  
    a {  
      color: inherit;  
      text-decoration: none;  
    }  
  
    button,  
    input {  
      font-family: inherit;  
    }  
  
    a:focus-visible,  
    button:focus-visible,  
    input:focus-visible {  
      outline: 3px solid rgba(47,129,247,0.45);  
      outline-offset: 4px;  
    }  
  
    .container {  
      max-width: var(--max);  
      width: 100%;  
      margin: 0 auto;  
      padding: 0 24px;  
    }  
  
    .section {  
      padding: 110px 0;  
      position: relative;  
    }  
  
    .section-dark {  
      background:  
        radial-gradient(circle at top right, rgba(47,129,247,0.12), transparent 36%),  
        linear-gradient(180deg, var(--bg), var(--bg-2));  
    }  
  
    .section-soft {  
      background:  
        radial-gradient(circle at top left, rgba(163,113,247,0.10), transparent 32%),  
        var(--surface-2);  
    }  
  
    h1,  
    h2,  
    h3 {  
      color: var(--text);  
      line-height: 1.05;  
      letter-spacing: -0.055em;  
    }  
  
    h1 {  
      font-size: clamp(3rem, 8vw, 6.8rem);  
    }  
  
    h2 {  
      font-size: clamp(2.15rem, 5vw, 4.4rem);  
      margin-bottom: 18px;  
    }  
  
    h3 {  
      font-size: 1.35rem;  
      letter-spacing: -0.03em;  
      margin-bottom: 10px;  
    }  
  
    p {  
      color: var(--muted);  
      font-size: 1.06rem;  
    }  
  
    .lead {  
      max-width: 820px;  
      margin: 0 auto;  
      font-size: 1.2rem;  
      color: var(--muted);  
    }  
  
    .text-center {  
      text-align: center;  
    }  
  
    .gradient-text {  
      background: linear-gradient(135deg, #fff, var(--accent), var(--accent-2), #fff);  
      -webkit-background-clip: text;  
      background-clip: text;  
      color: transparent;  
    }  
  
    html[data-theme="light"] .gradient-text {  
      background: linear-gradient(135deg, #0f172a, var(--accent), var(--accent-2));  
      -webkit-background-clip: text;  
      background-clip: text;  
      color: transparent;  
    }  
  
    .tag {  
      display: inline-flex;  
      align-items: center;  
      gap: 9px;  
      padding: 8px 14px;  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 78%, transparent);  
      color: var(--muted);  
      font-size: 0.9rem;  
      font-weight: 700;  
      margin-bottom: 22px;  
    }  

    .stat-strip {  
      display: grid;  
      grid-template-columns: repeat(3, minmax(0, 1fr));  
      gap: 14px;  
      max-width: 860px;  
      margin: 32px auto 0;  
    }  

    .stat-item {  
      padding: 18px 16px;  
      border: 1px solid var(--border);  
      border-radius: 20px;  
      background: color-mix(in srgb, var(--surface) 78%, transparent);  
      box-shadow: 0 12px 30px rgba(0,0,0,0.08);  
    }  

    .stat-item strong {  
      display: block;  
      font-size: clamp(1.5rem, 3vw, 2.2rem);  
      letter-spacing: -0.06em;  
      color: var(--text);  
      margin-bottom: 4px;  
    }  

    .stat-item span {  
      display: block;  
      color: var(--muted);  
      font-size: 0.9rem;  
      font-weight: 700;  
    }  
  
    .tag::before {  
      content: "";  
      width: 8px;  
      height: 8px;  
      background: var(--accent-3);  
      border-radius: 50%;  
      box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-3) 18%, transparent);  
    }  
  
    .skip-link {  
      position: fixed;  
      top: 8px;  
      left: 8px;  
      z-index: 9999;  
      transform: translateY(-140%);  
      background: var(--accent);  
      color: white;  
      padding: 10px 14px;  
      border-radius: 10px;  
      transition: 0.2s;  
    }  
  
    .skip-link:focus {  
      transform: translateY(0);  
    }  
  
    /* NAV */  
    .nav {  
      position: fixed;  
      top: 16px;  
      left: 0;  
      right: 0;  
      z-index: 1000;  
      pointer-events: none;  
    }  
  
    .nav-inner {  
      pointer-events: auto;  
      max-width: var(--max);  
      width: calc(100% - 32px);  
      margin: 0 auto;  
      padding: 12px 14px;  
      display: flex;  
      align-items: center;  
      justify-content: space-between;  
      gap: 14px;  
      border: 1px solid var(--border);  
      background: color-mix(in srgb, var(--bg) 80%, transparent);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border-radius: 999px;  
      box-shadow: 0 18px 55px rgba(0,0,0,0.18);  
    }  
  
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 850;
      letter-spacing: -0.03em;
      white-space: nowrap;
    }

    .footer .brand {
      margin-bottom: 18px;
    }
  
    .brand-mark {  
      width: 36px;  
      height: 36px;  
      border-radius: 12px;  
      display: grid;  
      place-items: center;  
      background: linear-gradient(135deg, var(--accent), var(--accent-2));  
      color: white;  
      font-size: 0.82rem;  
      box-shadow: 0 12px 30px color-mix(in srgb, var(--accent) 30%, transparent);  
    }  
  
    .nav-links {  
      display: flex;  
      align-items: center;  
      gap: 4px;  
      list-style: none;  
    }  
  
    .nav-item {  
      position: relative;  
    }  
  
    .nav-link,  
    .nav-drop-btn {  
      border: none;  
      background: transparent;  
      color: var(--muted);  
      padding: 10px 12px;  
      border-radius: 999px;  
      cursor: pointer;  
      font-size: 0.94rem;  
      font-weight: 700;  
    }  
  
    .nav-link:hover,  
    .nav-drop-btn:hover {  
      color: var(--text);  
      background: color-mix(in srgb, var(--surface) 60%, transparent);  
    }  
  
    .mega {  
      position: absolute;  
      top: 48px;  
      left: 0;  
      width: min(760px, calc(100vw - 48px));  
      display: none;  
      grid-template-columns: repeat(3, 1fr);  
      gap: 18px;  
      padding: 22px;  
      border: 1px solid var(--border);  
      border-radius: 24px;  
      background: color-mix(in srgb, var(--surface) 96%, transparent);  
      box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(20px);
      backdrop-filter: blur(20px);
    }  
  
    .nav-item:hover .mega,
    .nav-item:focus-within .mega,
    .nav-item .mega.open {
      display: grid;
    }
  
    .mega-title {  
      color: var(--muted);  
      font-size: 0.75rem;  
      font-weight: 850;  
      letter-spacing: 0.08em;  
      text-transform: uppercase;  
      margin-bottom: 10px;  
    }  
  
    .mega a {  
      display: block;  
      padding: 10px 8px;  
      border-radius: 12px;  
      color: var(--text);  
      font-weight: 750;  
      font-size: 0.96rem;  
    }  
  
    .mega a span {  
      display: block;  
      color: var(--muted);  
      font-size: 0.84rem;  
      font-weight: 500;  
      margin-top: 2px;  
    }  
  
    .mega a:hover {  
      background: color-mix(in srgb, var(--bg) 55%, transparent);  
    }  
  
    .nav-actions {  
      display: flex;  
      align-items: center;  
      gap: 8px;  
    }  
  
    .icon-btn {
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: color-mix(in srgb, var(--surface) 70%, transparent);
      color: var(--text);
      cursor: pointer;
      display: grid;
      place-items: center;
      font-weight: 900;
    }

    #langToggle {
      font-size: 0.74rem;
      letter-spacing: 0.02em;
    }
  
    .menu-btn {  
      display: none;  
    }  
  
    /* BUTTONS */  
    .btn {  
      min-height: 48px;  
      padding: 0 20px;  
      display: inline-flex;  
      align-items: center;  
      justify-content: center;  
      gap: 8px;  
      border: 1px solid transparent;  
      border-radius: 999px;  
      font-size: 0.98rem;  
      font-weight: 850;  
      cursor: pointer;  
      transition: 0.22s ease;  
      white-space: nowrap;  
    }  
  
    .btn-primary {  
      color: white;  
      background: linear-gradient(135deg, var(--accent), var(--accent-2));  
      box-shadow: 0 18px 45px color-mix(in srgb, var(--accent) 30%, transparent);  
    }  
  
    .btn-primary:hover {  
      transform: translateY(-2px);  
      box-shadow: 0 24px 60px color-mix(in srgb, var(--accent) 42%, transparent);  
    }  
  
    .btn-secondary {  
      border-color: var(--border);  
      color: var(--text);  
      background: color-mix(in srgb, var(--surface) 76%, transparent);  
    }  
  
    .btn-secondary:hover {  
      transform: translateY(-2px);  
      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));  
    }  
  
    /* HERO */  
    .hero {  
      min-height: 100vh;  
      padding: 160px 0 90px;  
      position: relative;  
      overflow: hidden;  
      background: var(--hero-bg);  
    }  
  
    .hero::before {  
      content: "";  
      position: absolute;  
      inset: 0;  
      background-image:  
        linear-gradient(rgba(125,125,125,0.08) 1px, transparent 1px),  
        linear-gradient(90deg, rgba(125,125,125,0.08) 1px, transparent 1px);  
      background-size: 44px 44px;
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 72%);
      mask-image: linear-gradient(to bottom, black, transparent 72%);
      pointer-events: none;  
    }  
  
    .hero-inner {  
      position: relative;  
      z-index: 2;  
      text-align: center;  
      max-width: 1040px;  
      margin: 0 auto;  
    }  
  
    .hero h1 {  
      margin-bottom: 26px;  
    }  
  
    .hero-sub {  
      max-width: 860px;  
      margin: 0 auto;  
      font-size: clamp(1.1rem, 2vw, 1.35rem);  
      color: var(--muted);  
    }  
  
    .hero-form {  
      max-width: 780px;  
      margin: 34px auto 0;  
      display: grid;  
      grid-template-columns: 1fr auto auto;  
      gap: 10px;  
      padding: 8px;  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 86%, transparent);  
      box-shadow: var(--shadow);  
    }  
  
    .hero-form input {  
      min-height: 52px;  
      border: none;  
      outline: none;  
      padding: 0 18px;  
      background: transparent;  
      color: var(--text);  
      font-size: 1rem;  
    }  
  
    .hero-form input::placeholder {  
      color: var(--muted);  
    }  
  
    .trust-row {  
      margin-top: 28px;  
      display: flex;  
      flex-wrap: wrap;  
      justify-content: center;  
      gap: 10px;  
    }  
  
    .trust-pill {  
      padding: 9px 13px;  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 62%, transparent);  
      color: var(--muted);  
      font-weight: 700;  
      font-size: 0.92rem;  
    }  
  
    /* DEMO */  
    .demo {  
      margin: 78px auto 0;  
      max-width: 1080px;  
      position: relative;  
      z-index: 2;  
    }  
  
    .demo-shell {  
      border: 1px solid var(--border);  
      border-radius: 34px;  
      overflow: hidden;  
      background:  
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--bg) 92%, transparent));  
      box-shadow: var(--shadow);  
    }  
  
    .demo-topbar {  
      height: 54px;  
      display: flex;  
      align-items: center;  
      gap: 8px;  
      padding: 0 18px;  
      border-bottom: 1px solid var(--border);  
    }  
  
    .dot {  
      width: 11px;  
      height: 11px;  
      border-radius: 50%;  
    }  
  
    .red { background: #ff7b72; }  
    .yellow { background: #d29922; }  
    .green { background: #3fb950; }  
  
    .demo-grid {  
      display: grid;  
      grid-template-columns: 0.9fr 1.1fr;  
      min-height: 430px;  
    }  
  
    .demo-side {  
      padding: 22px;  
      border-right: 1px solid var(--border);  
      background: color-mix(in srgb, var(--surface-2) 75%, transparent);  
    }  
  
    .demo-main {  
      padding: 28px;  
      position: relative;  
      overflow: hidden;  
    }  
  
    .demo-main::after {  
      content: "";  
      position: absolute;  
      width: 360px;  
      height: 360px;  
      right: -150px;  
      bottom: -180px;  
      border-radius: 50%;  
      background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);  
    }  
  
    .demo-card {  
      padding: 16px;  
      border: 1px solid var(--border);  
      border-radius: 18px;  
      background: color-mix(in srgb, var(--bg) 70%, transparent);  
      margin-bottom: 12px;  
    }  
  
    .demo-card strong {  
      display: block;  
      color: var(--text);  
      margin-bottom: 4px;  
    }  
  
    .demo-card span {  
      color: var(--muted);  
      font-size: 0.92rem;  
    }  
  
    .code-window {  
      position: relative;  
      z-index: 2;  
      display: grid;  
      gap: 10px;  
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;  
    }  
  
    .code-line {  
      padding: 12px 14px;  
      border: 1px solid var(--border);  
      border-radius: 14px;  
      background: rgba(255,255,255,0.055);  
      color: var(--text);  
      font-size: 0.92rem;  
    }  
  
    html[data-theme="light"] .code-line {  
      background: #f6f8fa;  
    }  
  
    .code-line b {  
      color: var(--accent);  
    }  
  
    .tabs {  
      margin-top: 28px;  
      display: flex;  
      flex-wrap: wrap;  
      justify-content: center;  
      gap: 8px;  
    }  
  
    .tab {  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 75%, transparent);  
      color: var(--muted);  
      padding: 11px 16px;  
      font-weight: 850;  
      cursor: pointer;  
    }  
  
    .tab.active {  
      background: var(--text);  
      color: var(--bg);  
      border-color: var(--text);  
    }  
  
    .mobile-demo-menu {  
      display: none;  
      max-width: 360px;  
      margin: 24px auto 0;  
      position: relative;  
      z-index: 10;  
    }  
  
    .mobile-demo-trigger {  
      width: 100%;  
      min-height: 50px;  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 84%, transparent);  
      color: var(--text);  
      display: flex;  
      align-items: center;  
      justify-content: space-between;  
      gap: 12px;  
      padding: 0 18px;  
      font-weight: 850;  
      cursor: pointer;  
      box-shadow: 0 18px 45px rgba(0,0,0,0.16);  
    }  
  
    .mobile-demo-options {  
      display: none;  
      position: absolute;  
      top: calc(100% + 10px);  
      left: 0;  
      right: 0;  
      padding: 8px;  
      border: 1px solid var(--border);  
      border-radius: 18px;  
      background: var(--surface);  
      box-shadow: var(--shadow);  
    }  
  
    .mobile-demo-options.open {  
      display: grid;  
      gap: 4px;  
    }  
  
    .mobile-demo-options button {  
      border: none;  
      background: transparent;  
      color: var(--text);  
      text-align: left;  
      padding: 12px 14px;  
      border-radius: 12px;  
      cursor: pointer;  
      font-weight: 750;  
    }  
  
    .mobile-demo-options button:hover {  
      background: color-mix(in srgb, var(--bg) 58%, transparent);  
    }  
  
    /* MARQUEE */  
    .marquee {  
      margin-top: 60px;  
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }  
  
    .marquee-track {  
      display: flex;  
      gap: 12px;  
      width: max-content;  
      animation: marquee 28s linear infinite;  
    }  
  
    .marquee span {  
      padding: 12px 18px;  
      border: 1px solid var(--border);  
      border-radius: 999px;  
      background: color-mix(in srgb, var(--surface) 70%, transparent);  
      color: var(--muted);  
      font-weight: 850;  
      white-space: nowrap;  
    }  
  
    @keyframes marquee {  
      from { transform: translateX(0); }  
      to { transform: translateX(-50%); }  
    }  
  
    /* CARDS */  
    .grid-4 {  
      margin-top: 46px;  
      display: grid;  
      grid-template-columns: repeat(4, 1fr);  
      gap: 18px;  
    }  
  
    .feature-card,  
    .price-card,  
    .target-card,
    .testimonial-card,
    .process-card,
    .mini-form {  
      border: 1px solid var(--border);  
      border-radius: 26px;  
      padding: 26px;  
      background: var(--card);  
      box-shadow: 0 16px 40px rgba(0,0,0,0.10);  
      transition: 0.22s ease;  
    }  
  
    .feature-card:hover,  
    .price-card:hover,  
    .target-card:hover,
    .testimonial-card:hover,
    .process-card:hover {  
      transform: translateY(-6px);  
      border-color: color-mix(in srgb, var(--accent) 50%, var(--border));  
    }  

    .testimonial-grid,
    .process-grid {  
      display: grid;  
      grid-template-columns: repeat(3, minmax(0, 1fr));  
      gap: 18px;  
      margin-top: 42px;  
    }  

    .testimonial-card {
      padding: 24px;  
    }  

    .testimonial-card .stars {
      color: #f9b93d;
      letter-spacing: 0.12em;
      margin-bottom: 14px;
      font-size: 1rem;
    }

    .testimonial-card p {
      margin-bottom: 18px;
    }

    .person {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
    }

    .person-badge {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-weight: 900;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: white;
      font-size: 0.8rem;
    }

    .person strong {
      display: block;
      color: var(--text);
      font-size: 0.98rem;
    }

    .person span {
      color: var(--muted);
      font-size: 0.85rem;
    }

    .process-card {
      padding: 24px;
    }

    .process-number {
      display: inline-flex;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      justify-content: center;
      align-items: center;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      color: var(--accent);
      font-weight: 900;
      margin-bottom: 18px;
    }

    .mini-form {
      display: grid;
      gap: 16px;
      padding: 28px;
      margin-top: 32px;
    }

    .mini-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .mini-form input,
    .mini-form textarea {
      width: 100%;
      min-height: 52px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: color-mix(in srgb, var(--bg) 68%, transparent);
      color: var(--text);
      padding: 0 16px;
      font-size: 1rem;
      outline: none;
    }

    .mini-form textarea {
      min-height: 120px;
      resize: vertical;
      padding: 14px 16px;
    }

    .mini-form input:focus,
    .mini-form textarea:focus {
      border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    }
  
    .icon {  
      width: 52px;  
      height: 52px;  
      border-radius: 16px;  
      display: grid;  
      place-items: center;  
      background: color-mix(in srgb, var(--accent) 16%, transparent);  
      color: var(--accent);  
      font-size: 1.35rem;  
      margin-bottom: 20px;  
    }  
  
    /* WORKFLOW */  
    .two-col {  
      display: grid;  
      grid-template-columns: 1fr 1fr;  
      gap: 34px;  
      align-items: center;  
      margin-top: 52px;  
    }  
  
    .visual-panel {  
      min-height: 420px;  
      border: 1px solid var(--border);  
      border-radius: 34px;  
      padding: 28px;  
      background:  
        radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 34%),  
        color-mix(in srgb, var(--surface) 84%, transparent);  
      box-shadow: var(--shadow);  
      display: grid;  
      place-items: center;  
    }  
  
    .accordion {  
      display: grid;  
      gap: 12px;  
    }  
  
    .acc-item {  
      border: 1px solid var(--border);  
      border-radius: 20px;  
      overflow: hidden;  
      background: color-mix(in srgb, var(--surface) 82%, transparent);  
    }  
  
    .acc-btn {  
      width: 100%;  
      border: none;  
      background: transparent;  
      color: var(--text);  
      padding: 18px;  
      text-align: left;  
      display: flex;  
      justify-content: space-between;  
      gap: 16px;  
      cursor: pointer;  
      font-weight: 900;  
      font-size: 1rem;  
    }  
  
    .acc-body {  
      display: none;  
      padding: 0 18px 18px;  
      color: var(--muted);  
    }  
  
    .acc-item.active .acc-body {  
      display: block;  
    }  
  
    .acc-item.active .acc-btn {  
      color: var(--accent);  
    }  
  
    /* CALCULATOR */  
    .calculator-layout {  
      max-width: 1080px;  
      margin: 56px auto 0;  
      display: grid;  
      grid-template-columns: 1fr 1fr;  
      gap: 22px;  
      align-items: stretch;  
    }  
  
    .calculator-input-card,  
    .calculator-result-card {  
      border: 1px solid var(--border);  
      border-radius: 34px;  
      background: var(--card);  
      box-shadow: var(--shadow);  
    }  
  
    .calculator-input-card {  
      padding: 30px;  
    }  
  
    .calculator-input-card p {  
      margin-bottom: 22px;  
    }  
  
    .calculator-fields {  
      display: grid;  
      gap: 16px;  
    }  
  
    .calc-field label {  
      display: block;  
      color: var(--text);  
      font-weight: 850;  
      margin-bottom: 8px;  
    }  
  
    .calc-field input {  
      width: 100%;  
      min-height: 52px;  
      border: 1px solid var(--border);  
      border-radius: 16px;  
      background: color-mix(in srgb, var(--bg) 68%, transparent);  
      color: var(--text);  
      padding: 0 16px;  
      font-size: 1rem;  
      outline: none;  
    }  
  
    .calc-field input:focus {  
      border-color: color-mix(in srgb, var(--accent) 70%, var(--border));  
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);  
    }  
  
    .calc-disclaimer {  
      margin-top: 18px;  
      font-size: 0.92rem;  
      color: var(--muted);  
    }  
  
    .calculator-result-card {  
      position: relative;  
      overflow: hidden;  
      padding: 34px;  
      background:  
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 32%, transparent), transparent 36%),  
        radial-gradient(circle at bottom left, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 34%),  
        var(--surface);  
    }  
  
    .result-glow {  
      position: absolute;  
      width: 320px;  
      height: 320px;  
      right: -140px;  
      bottom: -150px;  
      border-radius: 999px;  
      background: radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);  
      pointer-events: none;  
    }  
  
    .result-eyebrow,  
    .result-main,  
    .result-sub,  
    .result-list,  
    .result-cta {  
      position: relative;  
      z-index: 2;  
    }  
  
    .result-eyebrow {  
      color: var(--muted);  
      font-weight: 800;  
      margin-bottom: 8px;  
    }  
  
    .result-main {  
      color: var(--text);  
      font-size: clamp(2.8rem, 6vw, 5rem);  
      line-height: 0.95;  
      font-weight: 950;  
      letter-spacing: -0.075em;  
    }  
  
    .result-sub {  
      color: var(--muted);  
      margin-top: 8px;  
      margin-bottom: 28px;  
    }  
  
    .result-list {  
      display: grid;  
      gap: 12px;  
      margin-top: 20px;  
    }  
  
    .result-row {  
      display: flex;  
      align-items: center;  
      justify-content: space-between;  
      gap: 18px;  
      padding: 14px 0;  
      border-bottom: 1px solid var(--border);  
    }  
  
    .result-row span {  
      color: var(--muted);  
    }  
  
    .result-row strong {  
      color: var(--text);  
      white-space: nowrap;  
      font-size: 1.08rem;  
    }  
  
    .result-cta {  
      margin-top: 28px;  
      width: 100%;  
    }  
  
    /* PRICING */  
    .pricing-grid {  
      display: grid;  
      grid-template-columns: repeat(3, 1fr);  
      gap: 18px;  
      margin-top: 48px;  
    }  
  
    .price {
      color: var(--text);
      font-size: 2.2rem;
      font-weight: 950;
      letter-spacing: -0.06em;
      margin: 18px 0 4px;
    }

    .price-monthly {
      font-size: 1.8rem;
    }

    .price-card--featured {
      border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
      position: relative;
    }

    .price-card .badge {
      position: absolute;
      top: -12px;
      left: 24px;
      background: var(--accent);
      color: white;
      padding: 4px 12px;
      border-radius: 4px;
      font-size: 0.85rem;
      font-weight: 600;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
  
    .small {  
      color: var(--muted);  
      font-size: 0.95rem;  
    }  
  
    .list {  
      list-style: none;  
      margin-top: 22px;  
      display: grid;  
      gap: 11px;  
    }  
  
    .list li {  
      color: var(--muted);  
      position: relative;  
      padding-left: 28px;  
    }  
  
    .list li::before {  
      content: "✓";  
      position: absolute;  
      left: 0;  
      color: var(--accent-3);  
      font-weight: 900;  
    }  
  
    .cta-box {  
      border: 1px solid var(--border);  
      border-radius: 34px;  
      padding: 58px 34px;  
      text-align: center;  
      background:  
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 32%),  
        radial-gradient(circle at 80% 75%, color-mix(in srgb, var(--accent-2) 25%, transparent), transparent 32%),  
        var(--surface);  
      box-shadow: var(--shadow);  
    }  
  
    .cta-actions {  
      margin-top: 24px;  
      display: flex;  
      flex-wrap: wrap;  
      gap: 12px;  
      justify-content: center;  
    }  
  
    .footer {  
      padding: 70px 0 28px;  
      border-top: 1px solid var(--border);  
      background: var(--bg-2);  
    }  
  
    .footer-grid {  
      display: grid;  
      grid-template-columns: 1.6fr repeat(3, 1fr);  
      gap: 34px;  
      margin-bottom: 38px;  
    }  
  
    .footer h4 {  
      margin-bottom: 14px;  
      color: var(--text);  
    }  
  
    .footer p,  
    .footer a {  
      color: var(--muted);  
      font-size: 0.95rem;  
    }  
  
    .footer a {  
      display: block;  
      margin-bottom: 8px;  
    }  
  
    .footer a:hover {  
      color: var(--text);  
    }  
  
    .footer-bottom {  
      border-top: 1px solid var(--border);  
      padding-top: 22px;  
      display: flex;  
      justify-content: space-between;  
      gap: 16px;  
      flex-wrap: wrap;  
      color: var(--muted);  
      font-size: 0.9rem;  
    }  
  
    /* REVEAL */  
    .reveal {  
      opacity: 1;  
      transform: none;  
    }  
  
    .js .reveal {  
      opacity: 0;  
      transform: translateY(24px);  
      transition: 0.75s ease;  
    }  
  
    .js .reveal.active {  
      opacity: 1;  
      transform: translateY(0);  
    }  
  
/* FAQ + CHATBOT */  
.faq-chat-layout {  
  max-width: 1080px;  
  margin: 56px auto 0;  
  display: grid;  
  grid-template-columns: 1fr 1fr;  
  gap: 22px;  
  align-items: stretch;  
}  
  
.faq-list-card,  
.chatbot-card {  
  border: 1px solid var(--border);  
  border-radius: 34px;  
  background: var(--card);  
  box-shadow: var(--shadow);  
}  
  
.faq-list-card {  
  padding: 30px;  
}  
  
.faq-list {  
  display: grid;  
  gap: 12px;  
  margin-top: 22px;  
}  
  
.faq-item {  
  border: 1px solid var(--border);  
  border-radius: 18px;  
  overflow: hidden;  
  background: color-mix(in srgb, var(--surface) 82%, transparent);  
}  
  
.faq-question {  
  width: 100%;  
  border: none;  
  background: transparent;  
  color: var(--text);  
  padding: 17px 18px;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  gap: 14px;  
  text-align: left;  
  cursor: pointer;  
  font-weight: 850;  
  font-size: 1rem;  
}  
  
.faq-question .faq-plus {
  color: var(--accent);
  font-weight: 900;
}
  
.faq-answer {  
  display: none;  
  padding: 0 18px 18px;  
  color: var(--muted);  
  font-size: 0.98rem;  
}  
  
.faq-item.active .faq-answer {  
  display: block;  
}  
  
.faq-item.active .faq-question {  
  color: var(--accent);  
}  
  
.chatbot-card {  
  padding: 0;  
  overflow: hidden;  
  display: flex;  
  flex-direction: column;  
  min-height: 620px;  
  background:  
    radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 24%, transparent), transparent 36%),  
    var(--surface);  
}  
  
.chatbot-header {  
  padding: 22px;  
  border-bottom: 1px solid var(--border);  
  display: flex;  
  align-items: center;  
  gap: 14px;  
  background: color-mix(in srgb, var(--surface) 85%, transparent);  
}  
  
.chatbot-avatar {  
  width: 44px;  
  height: 44px;  
  border-radius: 15px;  
  display: grid;  
  place-items: center;  
  background: linear-gradient(135deg, var(--accent), var(--accent-2));  
  color: white;  
  font-size: 0.82rem;  
  font-weight: 900;  
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 30%, transparent);  
}  
  
.chatbot-header strong {  
  display: block;  
  color: var(--text);  
  line-height: 1.2;  
}  
  
.chatbot-header span {  
  display: block;  
  color: var(--muted);  
  font-size: 0.9rem;  
  margin-top: 2px;  
}  
  
.chatbot-messages {  
  flex: 1;  
  padding: 22px;  
  display: flex;  
  flex-direction: column;  
  gap: 12px;  
  max-height: 410px;  
  overflow-y: auto;  
  scroll-behavior: smooth;  
}  
  
.chat-message {  
  max-width: 86%;  
  padding: 13px 15px;  
  border-radius: 18px;  
  font-size: 0.96rem;  
  line-height: 1.45;  
  border: 1px solid var(--border);  
}  
  
.chat-message.bot {  
  align-self: flex-start;  
  color: var(--text);  
  background: color-mix(in srgb, var(--bg) 62%, transparent);  
}  
  
.chat-message.user {  
  align-self: flex-end;  
  color: white;  
  background: linear-gradient(135deg, var(--accent), var(--accent-2));  
  border-color: transparent;  
}  
  
.chatbot-suggestions {  
  padding: 0 22px 16px;  
  display: flex;  
  flex-wrap: wrap;  
  gap: 8px;  
}  
  
.chatbot-suggestions button {  
  border: 1px solid var(--border);  
  background: color-mix(in srgb, var(--surface) 82%, transparent);  
  color: var(--text);  
  border-radius: 999px;  
  padding: 8px 12px;  
  cursor: pointer;  
  font-weight: 750;  
  font-size: 0.88rem;  
}  
  
.chatbot-suggestions button:hover {  
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));  
}  
  
.chatbot-input-row {  
  border-top: 1px solid var(--border);  
  padding: 16px;  
  display: grid;  
  grid-template-columns: 1fr auto;  
  gap: 10px;  
  background: color-mix(in srgb, var(--surface) 90%, transparent);  
}  
  
.chatbot-input-row input {  
  min-height: 48px;  
  border: 1px solid var(--border);  
  border-radius: 999px;  
  background: color-mix(in srgb, var(--bg) 70%, transparent);  
  color: var(--text);  
  padding: 0 16px;  
  outline: none;  
  font-size: 0.96rem;  
}  
  
.chatbot-input-row input:focus {  
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));  
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);  
}  
  
.chatbot-input-row button {  
  min-height: 48px;  
  border: none;  
  border-radius: 999px;  
  padding: 0 18px;  
  background: linear-gradient(135deg, var(--accent), var(--accent-2));  
  color: white;  
  cursor: pointer;  
  font-weight: 850;  
}  
  
.chatbot-note {
  padding: 0 22px 18px;
  font-size: 0.82rem;
  color: var(--muted);
}

.chat-message.is-typing {
  display: flex;
  align-items: center;
  padding: 15px 18px;
}

.typing-dots {
  display: inline-flex;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: autoki-typing-bounce 1.1s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes autoki-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-sources {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.source-chip {
  display: inline-block;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--accent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
}

.source-chip:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.chat-message.is-fallback {
  border-color: color-mix(in srgb, orange 40%, var(--border));
}
  
/* Mobile FAQ/Chatbot */  
@media (max-width: 1024px) {  
  .faq-chat-layout {  
    grid-template-columns: 1fr;  
  }  
  
  .chatbot-card {  
    min-height: 560px;  
  }  
}  
  
@media (max-width: 680px) {  
  .faq-chat-layout {  
    margin-top: 36px;  
  }  
  
  .faq-list-card,  
  .chatbot-card {  
    border-radius: 24px;  
  }  
  
  .faq-list-card {  
    padding: 22px;  
  }  
  
  .chatbot-header {  
    padding: 18px;  
  }  
  
  .chatbot-messages {  
    padding: 18px;  
    max-height: 360px;  
  }  
  
  .chat-message {  
    max-width: 94%;  
  }  
  
  .chatbot-input-row {  
    grid-template-columns: 1fr;  
  }  
  
  .chatbot-input-row button {  
    width: 100%;  
  }  
}  

    /* RESPONSIVE */  
    @media (max-width: 1024px) {  
      .nav-links,  
      .nav-cta {  
        display: none;  
      }  
  
      .menu-btn {  
        display: grid;  
      }  
  
      .nav-links.open {  
        position: absolute;  
        top: 76px;  
        left: 16px;  
        right: 16px;  
        display: flex;  
        flex-direction: column;  
        align-items: stretch;  
        padding: 14px;  
        border: 1px solid var(--border);  
        border-radius: 24px;  
        background: var(--surface);  
        box-shadow: var(--shadow);  
      }  
  
      .nav-links.open .nav-link,  
      .nav-links.open .nav-drop-btn {  
        width: 100%;  
        text-align: left;  
        border-radius: 14px;  
      }  
  
      .nav-links.open .mega {  
        position: static;  
        width: 100%;  
        display: none;  
        box-shadow: none;  
        margin-top: 8px;  
        grid-template-columns: 1fr;  
      }  
  
      .nav-links.open .nav-item:focus-within .mega,
      .nav-links.open .nav-item .mega.open {
        display: grid;
      }
  
      .grid-4 {  
        grid-template-columns: repeat(2, 1fr);  
      }  
  
      .two-col,  
      .pricing-grid,  
      .demo-grid,  
      .footer-grid,  
      .calculator-layout {  
        grid-template-columns: 1fr;  
      }  
  
      .demo-side {  
        border-right: none;  
        border-bottom: 1px solid var(--border);  
      }  
    }  
  
    @media (max-width: 680px) {  
      .container {  
        padding: 0 18px;  
      }  
  
      .section {  
        padding: 78px 0;  
      }  
  
      .hero {  
        padding-top: 132px;  
      }  
  
      h1 {  
        font-size: clamp(2.65rem, 14vw, 4rem);  
      }  
  
      h2 {  
        font-size: clamp(2rem, 10vw, 3rem);  
      }  
  
      .hero-form {  
        grid-template-columns: 1fr;  
        border-radius: 28px;  
        padding: 14px;  
      }  
  
      .hero-form .btn,  
      .hero-form input {  
        width: 100%;  
      }  

      .stat-strip {  
        grid-template-columns: 1fr;  
      }  
  
      .grid-4 {  
        grid-template-columns: 1fr;  
      }  
  
      .demo-shell,  
      .visual-panel,  
      .cta-box,  
      .calculator-input-card,  
      .calculator-result-card {  
        border-radius: 24px;  
      }  
  
      .demo-side,  
      .demo-main {  
        padding: 16px;  
      }  
  
      .tabs {  
        display: none;  
      }  
  
      .mobile-demo-menu {  
        display: block;  
      }  
  
      .marquee {
        -webkit-mask-image: none;
        mask-image: none;
      }
  
      .calculator-layout {  
        margin-top: 36px;  
      }  
  
      .calculator-input-card,  
      .calculator-result-card {  
        padding: 22px;  
      }  
  
      .result-row {  
        align-items: flex-start;  
        flex-direction: column;  
        gap: 4px;  
      }  
  
      .result-main {  
        font-size: 3rem;  
      }  
  
      .footer-bottom {  
        flex-direction: column;  
      }  
    }  
  
    @media (min-width: 681px) {  
      .mobile-demo-menu {  
        display: none !important;  
      }  
    }  
  
/* HERO TEXT FIX */
.hero h1 {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

.gradient-text {
  display: inline;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Auf kleinen Geräten Hero-Schrift etwas kontrollierter */
@media (max-width: 680px) {
  .hero h1 {
    font-size: clamp(2.35rem, 12vw, 3.65rem);
    line-height: 0.98;
    letter-spacing: -0.065em;
  }

  .hero-sub {
    font-size: 1.02rem;
  }
}

@media (max-width: 420px) {
  .hero h1 {
    font-size: clamp(2.1rem, 11vw, 3.1rem);
    letter-spacing: -0.055em;
  }
}

/* ==========================================================================
   RESPONSIVE — grids, email examples, forms
   ========================================================================== */

/* Testimonials → Email examples grid responsive */
@media (max-width: 1024px) {
  .testimonial-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  .mini-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Process steps ("So arbeiten wir") — stack on mobile like the email cards */
@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .process-card {
    padding: 20px;
  }

  /* Keep the section stable on small screens */
  .process-card:hover {
    transform: none;
    border-color: var(--border);
  }

  .js .process-card.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Email example cards — desktop */
.email-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}

.email-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
  transition: 0.22s ease;
}

.email-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.email-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.email-meta {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-subject {
  font-weight: 800;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-message {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-analysis {
  padding: 18px 24px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  display: grid;
  gap: 8px;
  font-size: 0.98rem;
}

.email-analysis-text {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-meta strong {
  color: var(--text);
}

.email-analysis-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  line-height: 1.4;
  flex-wrap: wrap;
  align-items: flex-start;
}

.email-analysis-label {
  color: var(--muted);
}

.email-analysis-value {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-analysis-next {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-example-demo {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

/* Email example responsive */
@media (max-width: 1024px) {
  .email-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Treat 768px as mobile/tablet: stack cards */
@media (max-width: 768px) {
  .email-grid {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }

  .email-card-body {
    padding: 20px;
  }

  .email-analysis {
    padding: 16px 20px;
  }

  /* Keep the example section stable on small screens */
  .email-card:hover {
    transform: none;
    border-color: var(--border);
  }

  .js .email-card.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 680px) {
  .mini-form-grid {
    grid-template-columns: 1fr;
  }
}

    @media (prefers-reduced-motion: reduce) {  
      *,  
      *::before,  
      *::after {  
        animation: none !important;  
        transition: none !important;  
        scroll-behavior: auto !important;  
      }  
  
      .js .reveal {
        opacity: 1;
        transform: none;
      }
    }

/* ------------------------------------------------------------------ */
/* Floating Chat Launcher & Global AI Components                      */
/* ------------------------------------------------------------------ */

.chat-launcher-bubble {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  z-index: 999;
}

.chat-launcher-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: var(--accent-2);
}

.chat-launcher-bubble:active {
  transform: scale(0.95);
}

.search-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4rem;
}

.search-overlay.open {
  display: flex;
}

.search-overlay-content {
  width: 90%;
  max-width: 600px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.search-overlay-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-overlay-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--fg);
}

.search-overlay-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}

.search-overlay-close:hover {
  color: var(--fg);
}

.search-overlay-input {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.search-overlay-input input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--surface);
  color: var(--fg);
}

.search-overlay-input input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.search-overlay-results {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
}

#searchResults {
  list-style: none;
  margin: 0;
  padding: 0;
}

#searchResults li {
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--card);
  border-radius: 4px;
  border-left: 4px solid var(--accent);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

#searchResults li:hover {
  background: var(--border);
  transform: translateX(4px);
}

#searchResults li strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent);
}

#searchResults li small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.ai-settings-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1001;
  justify-content: center;
  align-items: center;
}

.ai-settings-modal.open {
  display: flex;
}

.ai-settings-modal-content {
  width: 90%;
  max-width: 500px;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.ai-settings-modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-settings-modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--fg);
}

.ai-settings-modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}

.ai-settings-modal-close:hover {
  color: var(--fg);
}

.ai-settings-form {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ai-settings-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ai-settings-group label {
  font-weight: 500;
  color: var(--fg);
  font-size: 0.95rem;
}

.ai-settings-group select,
.ai-settings-group input {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--fg);
  font-size: 0.95rem;
  font-family: inherit;
}

.ai-settings-group select:focus,
.ai-settings-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.1);
}

.ai-settings-group small {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.ai-settings-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.ai-settings-actions button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.ai-settings-actions button.primary {
  background: var(--accent);
  color: white;
}

.ai-settings-actions button.primary:hover {
  background: var(--accent-2);
}

.ai-settings-actions button.secondary {
  background: var(--card);
  color: var(--fg);
  border: 1px solid var(--border);
}

.ai-settings-actions button.secondary:hover {
  background: var(--border);
}

.ai-test-result {
  padding: 1rem;
  background: var(--card);
  border-radius: 4px;
  border-left: 4px solid var(--accent);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--fg);
  margin-top: 0.5rem;
}

.ai-test-result.success {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.ai-test-result.error {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Responsive adjustments for floating launcher and modals */
@media (max-width: 680px) {
  .chat-launcher-bubble {
    width: 48px;
    height: 48px;
    bottom: 1.5rem;
    right: 1.5rem;
    font-size: 1.25rem;
  }

  .search-overlay-content,
  .ai-settings-modal-content {
    width: 95%;
    max-height: 85vh;
  }

  .ai-settings-form {
    padding: 1rem;
    gap: 1rem;
  }
}

@media (max-width: 420px) {
  .chat-launcher-bubble {
    width: 44px;
    height: 44px;
    bottom: 1rem;
    right: 1rem;
    font-size: 1.1rem;
  }

  .search-overlay {
    padding-top: 1rem;
  }

  .search-overlay-content,
  .ai-settings-modal-content {
    width: 98%;
    max-height: 90vh;
  }

  .ai-settings-modal-header,
  .search-overlay-header {
    padding: 1rem;
  }

  .ai-settings-form {
    padding: 1rem;
    gap: 0.75rem;
  }

  .ai-settings-actions {
    flex-direction: column-reverse;
  }

  .ai-settings-actions button {
    width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* Assistant-Controller: gerenderte Bausteine                          */
/* ------------------------------------------------------------------ */

body.search-open,
body.modal-open {
  overflow: hidden;
}

.search-result {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  text-align: left;
  margin-bottom: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  transition: background 0.2s ease, transform 0.2s ease;
}

.search-result:hover {
  background: var(--surface-2);
  transform: translateX(4px);
}

.search-result-title {
  font-weight: 600;
  color: var(--accent);
}

.search-result-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

.search-answer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--border);
}

.search-answer-text {
  white-space: pre-wrap;
  line-height: 1.6;
  color: var(--text);
}

.search-answer-text.is-thinking {
  color: var(--muted);
}

.search-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-bottom: 0.5rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: search-spin 0.8s linear infinite;
}

@keyframes search-spin {
  to { transform: rotate(360deg); }
}

.search-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.search-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.source-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.ai-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.ai-status-text {
  font-size: 0.85rem;
  color: var(--muted);
}

.ai-test-result.is-ok {
  border-left-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.ai-test-result.is-error {
  border-left-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* Floating AI-Werkzeugleiste (Suche + Einstellungen + Chat) */
.ai-dock {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 999;
}

.ai-dock .chat-launcher-bubble {
  position: static;
}

.ai-dock-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background 0.2s ease;
}

.ai-dock-btn:hover {
  transform: scale(1.08);
  background: var(--surface-2);
}

@media (max-width: 680px) {
  .ai-dock {
    right: 1.5rem;
    bottom: 1.5rem;
  }

  .ai-dock-btn {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
  }
}

@media (max-width: 420px) {
  .ai-dock {
    right: 1rem;
    bottom: 1rem;
  }
}

/* ==========================================================================
   TEASER-KARTEN (Startseite verweist auf die dedizierten Unterseiten)
   ========================================================================== */
.teaser-grid {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.teaser-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--card);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
  text-decoration: none;
  color: inherit;
  transition: 0.22s ease;
}

.teaser-card:hover,
.teaser-card:focus-visible {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}

.teaser-card .icon {
  font-size: 1.6rem;
}

.teaser-card h3 {
  margin: 0;
}

.teaser-card p {
  color: var(--muted);
  margin: 0;
}

.teaser-link {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 600;
  color: var(--accent);
}

/* ==========================================================================
   FOOTER-SPALTEN (einheitlich auf allen Seiten)
   ========================================================================== */
.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 1.05rem;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 8px;
}

.footer-col li a {
  margin-bottom: 0;
}

/* ==========================================================================
   RECHTSTEXTE (Impressum, Datenschutzerklärung)
   ========================================================================== */
.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 132px 24px 96px;
}

.legal-page h1 {
  font-size: clamp(2.2rem, 6vw, 3rem);
  margin-bottom: 8px;
}

.legal-page h2 {
  margin-top: 40px;
  margin-bottom: 12px;
  font-size: 1.25rem;
}

.legal-page h3 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 1.02rem;
}

.legal-page p,
.legal-page li {
  color: var(--muted);
  line-height: 1.7;
}

.legal-page ul {
  margin: 0 0 16px 20px;
  padding: 0;
}

.legal-page li {
  margin-bottom: 8px;
}

.legal-page a {
  color: var(--accent);
  word-break: break-word;
}

.legal-page code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-2);
  font-size: 0.92em;
}

.legal-updated {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 24px;
  margin: 20px 0 28px;
}

.legal-card p {
  margin: 0;
  color: var(--text);
}

.legal-toc {
  margin: 28px 0 8px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-2);
}

.legal-toc ul {
  margin: 12px 0 0 18px;
}

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

@media (max-width: 680px) {
  .legal-page {
    padding: 118px 18px 72px;
  }

  .legal-card,
  .legal-toc {
    padding: 18px;
    border-radius: 16px;
  }
}

/* ============================================================
   FORMULAR-RUECKMELDUNG
   ============================================================ */
.form-status {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.form-status.is-error {
  border-color: color-mix(in srgb, #e5484d 45%, var(--border));
  color: #e5484d;
}