/* AIVENT — Taxi KI Voice Agent */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --lime: #D4FF00;
  --lime-deep: #A8CC00;
  --lime-glow: rgba(212, 255, 0, 0.35);
  --ink: #0A0B08;
  --ink-2: #111309;
  --ink-3: #1A1C12;
  --ink-line: #23261A;
  --paper: #FFFFFE;
  --paper-2: #F8F8F4;
  --paper-line: #ECEBE4;
  --muted-dark: #8C907B;
  --muted-light: #6E7163;
  --danger: #FF5A3C;
  --ok: oklch(0.92 0.22 128);
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink)}
body{background:var(--ink);color:#F6F5EF;font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
img,svg{display:block;max-width:100%}

/* Layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
@media(max-width:768px){.wrap{padding:0 20px}}

.section{padding:80px 0;position:relative}
.section.tight{padding:56px 0}
@media(max-width:768px){.section{padding:56px 0}}

/* Type */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--lime);display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:6px;height:6px;background:var(--lime);border-radius:50%;box-shadow:0 0 12px var(--lime-glow)}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;letter-spacing:-0.02em;line-height:0.98}
.h-display{font-size:clamp(36px,5vw,80px);font-weight:500;letter-spacing:-0.035em;line-height:0.95}
.h-hero{font-size:clamp(34px,4.2vw,64px)}
.h-section{font-size:clamp(28px,3.2vw,50px);letter-spacing:-0.03em}
.h-sub{font-size:clamp(20px,1.9vw,28px);font-weight:500}

.lede{font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:rgba(246,245,239,0.7);max-width:520px}
.paper .lede{color:rgba(10,11,8,0.65)}
.mono{font-family:var(--f-mono)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;border-radius:0;font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-0.005em;transition:transform .15s ease, background .2s ease, color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--lime);color:var(--ink)}
.btn-primary:hover{background:var(--lime);filter:brightness(1.08)}
.btn-ghost{background:transparent;color:inherit;border:1px solid currentColor}
.btn-ghost:hover{background:rgba(246,245,239,0.06)}
.paper .btn-ghost:hover{background:rgba(10,11,8,0.05)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn .arrow{display:inline-block;transition:transform .2s ease}
.btn:hover .arrow{transform:translate(2px,-2px)}

/* Surfaces */
.paper{background:var(--paper);color:var(--ink)}
.paper-2{background:var(--paper-2);color:var(--ink)}
.ink{background:var(--ink);color:var(--paper)}
.ink-2{background:var(--ink-2);color:var(--paper)}

.grid-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(246,245,239,0.11) 1px, transparent 1px),linear-gradient(90deg, rgba(246,245,239,0.11) 1px, transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 85%);mask-image:radial-gradient(ellipse at center, black 30%, transparent 85%)}
.paper .grid-bg{background-image:linear-gradient(rgba(10,11,8,0.09) 1px, transparent 1px),linear-gradient(90deg, rgba(10,11,8,0.09) 1px, transparent 1px)}

/* Divider */
.rule{height:1px;background:var(--ink-line);width:100%}
.paper .rule{background:var(--paper-line)}

/* Card */
.card{border:1px solid var(--ink-line);padding:28px;background:var(--ink-2)}
.paper .card{border-color:var(--paper-line);background:#fff}

/* Marquee */
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee{overflow:hidden;white-space:nowrap;border:0}
.marquee-track{display:inline-flex;gap:64px;animation:marq 40s linear infinite;padding-right:64px}

/* TrustStrip: stabiler Übergang, kein Strich oben/unten */
.trust-strip{border:0 !important;box-shadow:none !important}
.trust-strip::before, .trust-strip::after{display:none !important}

/* Live dot */
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 var(--lime-glow);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--lime-glow)}100%{box-shadow:0 0 0 18px rgba(0,0,0,0)}}

/* Waveform */
.wave{display:inline-flex;align-items:center;gap:3px;height:28px}
.wave span{display:inline-block;width:3px;background:var(--lime);border-radius:2px;animation:wave 1.2s ease-in-out infinite}
.wave span:nth-child(1){animation-delay:0s}
.wave span:nth-child(2){animation-delay:.1s}
.wave span:nth-child(3){animation-delay:.2s}
.wave span:nth-child(4){animation-delay:.3s}
.wave span:nth-child(5){animation-delay:.4s}
.wave span:nth-child(6){animation-delay:.5s}
.wave span:nth-child(7){animation-delay:.6s}
.wave span:nth-child(8){animation-delay:.7s}
@keyframes wave{0%,100%{height:6px}50%{height:28px}}

/* Number ticker */
.big-num{font-family:var(--f-display);font-size:clamp(64px,9vw,148px);line-height:0.9;letter-spacing:-0.04em;font-weight:500}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:#FFFFFE;border-bottom:1px solid var(--paper-line);color:var(--ink)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-family:var(--f-display);font-weight:600;letter-spacing:-0.02em;font-size:20px;display:flex;align-items:center;gap:10px}
.logo-mark{width:22px;height:22px;background:var(--lime);display:inline-block;position:relative}
.logo-mark::after{content:"";position:absolute;inset:4px;background:var(--paper);clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%)}
.nav-links{display:flex;gap:28px;font-size:14px;color:rgba(10,11,8,0.65);align-items:center}
.nav-links a:hover{color:var(--lime-deep)}
.nav-links .nav-new{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500;line-height:1;cursor:pointer;transition:transform .2s ease}
.nav-links .nav-new:hover{color:var(--ink);transform:translateY(-1px)}
.nav-new-chip{display:inline-flex;align-items:center;padding:7px 12px;background:#fff;border:1.5px solid #128C7E;color:#128C7E;line-height:1;font-size:14px;font-weight:600;transition:background .2s ease, color .2s ease, box-shadow .2s ease}
.nav-links .nav-new:hover .nav-new-chip{background:#128C7E;color:#fff;box-shadow:0 0 0 3px rgba(18,140,126,0.18)}
.nav-links .nav-new:hover .nav-new-arrow{color:#128C7E;animation:none;transform:translateX(3px)}
.nav-new-badge{display:inline-flex;align-items:center;padding:7px 10px;border:1.5px solid transparent;font-family:var(--f-mono);font-size:12px;letter-spacing:0.12em;font-weight:700;background:#128C7E;color:#fff;line-height:1;pointer-events:none}
.nav-new-arrow{color:rgba(10,11,8,0.55);flex-shrink:0;animation:navNewNudge 2.2s ease-in-out infinite;transition:color .2s ease, transform .2s ease}
@keyframes navNewNudge{
  0%,60%,100%{transform:translateX(0)}
  30%{transform:translateX(3px)}
}
@media(max-width:768px){.nav-links{display:none}}

/* Kbd-ish tag */
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;padding:6px 10px;border:1px solid var(--ink-line);background:var(--ink-2);color:rgba(246,245,239,0.75)}
.paper .tag, .paper-2 .tag{border-color:var(--paper-line);background:#fff;color:rgba(10,11,8,0.65)}

/* Numbered list */
.num-row{display:flex;gap:24px;align-items:flex-start;padding:28px 0;border-top:1px solid var(--ink-line)}
.paper .num-row{border-color:var(--paper-line)}
.num-row .n{font-family:var(--f-mono);font-size:12px;color:rgba(246,245,239,0.5);min-width:32px}
.paper .num-row .n{color:rgba(10,11,8,0.45)}

/* utility */
.hl{color:var(--lime)}
.strike{text-decoration:line-through;opacity:.4}

/* Tweaks panel */
.tweaks-panel{position:fixed;right:20px;bottom:20px;width:300px;background:var(--ink);border:1px solid var(--ink-line);z-index:100;font-family:var(--f-mono);font-size:12px;display:none;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.tweaks-panel.visible{display:block}
.tweaks-head{padding:14px 16px;border-bottom:1px solid var(--ink-line);display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:0.1em;font-size:11px}
.tweaks-body{padding:16px;display:flex;flex-direction:column;gap:16px}
.tweak-row{display:flex;flex-direction:column;gap:6px}
.tweak-row label{color:rgba(246,245,239,0.55);font-size:10px;text-transform:uppercase;letter-spacing:0.1em}
.tweak-opts{display:flex;gap:6px;flex-wrap:wrap}
.tweak-opts button{padding:6px 10px;border:1px solid var(--ink-line);background:transparent;color:rgba(246,245,239,0.7);font-family:var(--f-mono);font-size:11px}
.tweak-opts button.active{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.swatch{width:24px;height:24px;padding:0 !important;border:1px solid var(--ink-line) !important}
.swatch.active{border-color:#fff !important;outline:2px solid var(--lime);outline-offset:1px}

/* Inline voice bar */
.voice-orb{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%, var(--lime) 0%, transparent 70%);opacity:0.6;filter:blur(20px)}

/* Accordion */
.acc{border-top:1px solid var(--paper-line)}
.acc-item{border-bottom:1px solid var(--paper-line)}
.acc-q{width:100%;text-align:left;padding:28px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-0.01em}
.acc-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:rgba(10,11,8,0.65);font-size:16px;line-height:1.55}
.acc-item.open .acc-a{max-height:300px;padding-bottom:28px;padding-right:64px}
.acc-q .plus{font-family:var(--f-mono);font-size:22px;transition:transform .2s}
.acc-item.open .plus{transform:rotate(45deg);color:var(--lime-deep)}

/* Hero call-card */
.call-card{border:1px solid var(--ink-line);background:linear-gradient(180deg, var(--ink-2), var(--ink));padding:24px;font-family:var(--f-mono);font-size:13px;position:relative;overflow:hidden}
.call-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, var(--lime), transparent)}

/* Bubble */
.bubble{padding:12px 14px;border-radius:2px;font-size:13px;line-height:1.45;max-width:85%}
.bubble.user{background:var(--ink-3);align-self:flex-start;color:rgba(246,245,239,0.9)}
.bubble.agent{background:var(--lime);color:var(--ink);align-self:flex-end;font-weight:500}
.bubble .who{font-family:var(--f-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;opacity:0.6;margin-bottom:4px;display:block}

/* Spinner */
.spinner{display:inline-block;width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;vertical-align:-1px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ROI */
.roi-range{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--paper-line);outline:none}
.roi-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;background:var(--ink);border:3px solid var(--lime-deep);border-radius:50%;cursor:pointer}
.roi-range::-moz-range-thumb{width:22px;height:22px;background:var(--ink);border:3px solid var(--lime-deep);border-radius:50%;cursor:pointer}

/* Floating badge */
.floating-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:999px;font-family:var(--f-mono);font-size:12px}
.floating-pill .dot-wrap{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--ink);position:relative}

/* tilt fix */
.text-xl-mono{font-family:var(--f-mono);font-size:14px;letter-spacing:-0.005em;line-height:1.55}

.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:960px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}}

/* =====================================================
   MOBILE — global collapse for all component grids
   ===================================================== */

/* Tablet & below: 2 cols -> 1 col for most sections */
@media(max-width:860px){
  .hero-grid,
  .pain-grid,
  .founders-grid,
  .partner-grid,
  .wa-grid,
  .pricing-grid,
  .int-grid,
  .contact-grid,
  .demo-grid,
  .bewerbung-grid,
  .careers-hero-grid,
  .process-grid,
  .honest-grid,
  .role-detail,
  .story-grid,
  .theses-grid,
  .feat-big{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  /* Feature big cards: remove min-height so content breathes */
  .feat-big > div{min-height:0 !important;padding:36px 28px !important}

  /* Theses grid: remove inner borders so stacked cards have clean separators */
  .theses-grid > div{
    border-right:none !important;
    border-bottom:1px solid var(--ink-line) !important;
  }
  .theses-grid > div:last-child{border-bottom:none !important}

  /* Legal sidebar heading -> stacked above body */
  .legal-block{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* UeberUns story: drop the label column */
  .story-grid{gap:20px !important}

  /* Timeline rows: stack year above content */
  .timeline-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:24px 0 !important;
  }

  /* Careers: role header columns */
  .role-card-head{grid-template-columns:40px 1fr auto !important;gap:18px !important;padding:28px 18px !important}
  .role-detail{padding:4px 18px 40px !important}
  .role-block{grid-template-columns:1fr !important;gap:6px !important}

  /* HowItWorks step row: stack number, title, description */
  .step-row{
    grid-template-columns:40px 1fr !important;
    gap:16px !important;
    row-gap:12px !important;
  }
  .step-row > *:nth-child(3),
  .step-row > *:nth-child(4){grid-column:1 / -1 !important}

  /* ROI */
  .roi-grid{grid-template-columns:1fr !important;gap:40px !important}

  /* Form double-column rows */
  form .form-row-2,
  .demo-form-card > div[style*="grid-template-columns"],
  .contact-form-card > div[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }

  /* Demo form & Contact/Bewerbung: lift the form card padding */
  .demo-form-card{padding:36px 24px !important}

  /* Benefits grid (Careers) 3 cols -> 1 */
  .benefits-grid{grid-template-columns:1fr !important}
  .benefits-grid > div{border-right:none !important;border-bottom:1px solid var(--ink-line) !important}
  .benefits-grid > div:last-child{border-bottom:none !important}

  /* Small-features grid (3 col) */
  .feat-small{grid-template-columns:1fr !important}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:36px !important}
}

/* Phone: further tighten */
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr !important;gap:28px !important}
  .hero-grid{gap:32px !important}

  /* WhatsApp chat mockup: hide on phones only, keep on tablets */
  .wa-grid > div:last-child{display:none !important}

  /* Demo form card: edge-to-edge feel on phones */
  .demo-form-card{padding:28px 18px !important}

  /* Buttons on phone: give them breathing room, full width option */
  .btn{padding:14px 18px;font-size:14px}

  /* Section padding tighter */
  .section{padding:48px 0 !important}
}

/* =====================================================
   MOBILE POLISH — specific fixes for landing page
   ===================================================== */
@media(max-width:860px){
  /* Features big cards: when stacked, the 1px "gap line" on the dark
     background shows as a big grey bar between cards. Kill it. */
  .feat-big{
    gap:0 !important;
    background:transparent !important;
  }
  .feat-big > div{
    border-bottom:1px solid var(--ink-line);
  }
  .feat-big > div:last-child{border-bottom:none}

  .feat-small{
    gap:0 !important;
    background:transparent !important;
  }
  .feat-small > div{
    border-bottom:1px solid var(--ink-line);
  }
  .feat-small > div:last-child{border-bottom:none}

  /* Integrations grid: keep 3x3 but use full content width on mobile,
     shrink tile typography so it doesn't clip. */
  .int-grid-items{
    width:100% !important;
  }
  .int-grid-items > div{
    padding:10px 6px !important;
    gap:4px !important;
  }
  .int-grid-items > div > div:first-child{
    font-size:13px !important;
  }
  .int-grid-items > div > div:last-child{
    font-size:8px !important;
    letter-spacing:0.1em !important;
  }

  /* HowItWorks: tighten header-to-content gap */
  #so-funktionierts .reveal[style*="margin-bottom"]{
    margin-bottom:40px !important;
  }

  /* ROI: tighten header gap */
  #roi > .wrap > div:first-child{
    margin-bottom:24px !important;
    gap:16px !important;
  }

  /* Careers: reduce gap between "Vier Schritte" header and step 01 */
  .process-grid{gap:24px !important}

  /* Testimonials -> horizontal swipe carousel on mobile */
  .testi-track{
    display:flex !important;
    grid-template-columns:none !important;
    gap:16px !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
    margin:0 -20px;
    padding-left:20px;
    padding-right:20px;
  }
  .testi-track::-webkit-scrollbar{display:none}
  .testi-card{
    flex:0 0 calc(100% - 40px) !important;
    scroll-snap-align:center;
    min-height:340px !important;
    padding:32px !important;
  }
  .testi-dots{
    display:flex;justify-content:center;gap:8px;margin-top:24px;
  }
  .testi-dots button{
    width:8px;height:8px;border-radius:50%;
    background:rgba(10,11,8,0.18);
    border:none;padding:0;transition:background .2s, width .2s;
  }
  .testi-dots button.active{
    background:var(--lime-deep);width:24px;border-radius:4px;
  }
}
@media(min-width:861px){
  .testi-dots{display:none}

  /* Pricing: scale down tier rows so range + price fit on phones */
  #preise .pricing-grid:last-of-type > div:first-child{
    padding:28px 22px !important;
  }
  #preise .pricing-grid:last-of-type > div:first-child > div[style*="flex:1"] > div{
    grid-template-columns:1fr auto !important;
    gap:14px !important;
    padding:22px 0 !important;
  }
  #preise .pricing-grid:last-of-type > div:first-child > div[style*="flex:1"] > div > div:first-child > div:last-child{
    font-size:19px !important;
    line-height:1.2 !important;
  }
  #preise .pricing-grid:last-of-type > div:first-child > div[style*="flex:1"] > div > div:first-child > div:last-child > span{
    font-size:13px !important;
    display:block;
    margin-top:2px;
  }
  #preise .pricing-grid:last-of-type > div:first-child > div[style*="flex:1"] > div > div:last-child > div:first-child{
    font-size:20px !important;
    white-space:nowrap !important;
    letter-spacing:-0.02em !important;
  }
  #preise .pricing-grid:last-of-type > div:first-child > div[style*="flex:1"] > div > div:last-child > div:last-child{
    font-size:10px !important;
  }
  /* Right card (0 €) on mobile */
  #preise .pricing-grid:last-of-type > div:last-child{
    padding:28px 22px !important;
  }
  #roi > .wrap > div:first-child .lede{
    font-size:14px !important;
    line-height:1.5 !important;
  }
  /* Kill the outer roi-grid gap on mobile so there's no extra space
     before the calculator */
  .roi-grid{gap:24px !important}

  /* WhatsApp benefit rows: shrink check icon + tighten */
  .wa-grid > div:first-child > div[style*="borderTop"] > div{
    gap:12px !important;
    padding:16px 0 !important;
  }
  .wa-grid > div:first-child > div[style*="borderTop"] > div > div:first-child{
    width:22px !important;
    height:22px !important;
  }
  .wa-grid > div:first-child > div[style*="borderTop"] > div > div:first-child svg{
    width:11px !important;
    height:11px !important;
  }
  .wa-grid > div:first-child > div[style*="borderTop"] > div > div:last-child > div:first-child{
    font-size:16px !important;
    margin-bottom:3px !important;
  }
  .wa-grid > div:first-child > div[style*="borderTop"] > div > div:last-child > div:last-child{
    font-size:13px !important;
    line-height:1.45 !important;
  }
}

/* =====================================================
   MOBILE NAV — hamburger menu
   ===================================================== */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  border:1px solid var(--paper-line);
  background:transparent;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:18px;height:1.5px;
  background:var(--ink);
  position:relative;
}
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";position:absolute;left:0;right:0;
  height:1.5px;background:var(--ink);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

.mobile-menu{
  position:fixed;
  top:68px;left:0;right:0;
  background:var(--paper);
  border-bottom:1px solid var(--paper-line);
  transform:translateY(-110%);
  transition:transform .28s ease;
  z-index:49;
  padding:12px 20px 18px;
  display:flex;flex-direction:column;gap:0;
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{
  padding:12px 2px;
  font-size:14px;
  color:var(--ink);
  border-bottom:1px solid var(--paper-line);
  display:flex;justify-content:space-between;align-items:center;
}
.mobile-menu a:last-of-type{border-bottom:none}
.mobile-menu a span{font-size:12px !important}
.mobile-menu .btn{margin-top:12px;justify-content:center;padding:12px 16px;font-size:13px}

@media(max-width:768px){
  .nav-toggle{display:inline-flex}
  .nav-cta-desktop{display:none !important}
  .nav-login-desktop{display:none !important}
}
@media(min-width:769px){
  .mobile-menu{display:none !important}
}