:root{
    --bg: #100F28;
    --bg-alt: #14133A;
    --surface: #121132;
    --grid-line: #1A1948;
    --text: #D9E9EB;
    --text-dim: #8BA7AB;
    --text-faint: #63797C;
    --amber: #E4FF80;
    --amber-dim: #CDFA2A;
    --border: #1A195C;
    --max: 1120px;
  }

  *{ box-sizing: border-box; }
  html{ margin: 0; padding: 0; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Sans', -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  a{ color: inherit; }
  ::selection{ background: var(--amber); color: var(--bg); }
  :focus-visible{ outline: 2px solid var(--amber); outline-offset: 3px; }

  h1, h2, h3{
    font-family: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .mono{ font-family: 'IBM Plex Mono', monospace; }
  .wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }

  .eyebrow{
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--amber-dim);
    margin: 0 0 18px 0;
  }

  .grid-bg{
    position: fixed; inset: 0; z-index: -1;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse 900px 700px at 50% 0%, black 0%, transparent 75%);
  }

  /* ---------- NAV ---------- */
  header{
    position: sticky; top: 0; z-index: 30;
    background: var(--text);
    border-bottom: 1px solid var(--border);
  }
  nav.wrap{ display:flex; align-items:center; justify-content: space-between; height: 64px; gap: 20px; }
  .brand{ display:flex; align-items:center; text-decoration: none; flex-shrink: 0; }
  .brand-logo{ height: 36px; width: auto; display: block; }
  .nav-links{
    display:flex; align-items:center; gap: 24px;
    font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  }
  .nav-links a{ text-decoration:none; color: rgba(16,15,40,0.68); white-space: nowrap; transition: color .15s ease; }
  .nav-links a:hover{ color: var(--bg); }
  .nav-right{ display:flex; align-items:center; gap: 12px; flex-shrink: 0; }
  /* Language switcher: lives in .nav-right, so it carries its own type styles.
     DOM order is [CTA, lang, burger] — the CTA hides on mobile and the burger
     hides on desktop, which yields both required header layouts without reordering. */
  .nav-lang{
    display:flex; align-items:center; gap: 2px; flex-shrink: 0;
    font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
  }
  .nav-lang a{
    text-decoration: none; color: rgba(16,15,40,0.68);
    padding: 5px 7px; border-radius: 3px; line-height: 1;
    transition: background .18s ease, color .18s ease;
  }
  /* amber reads as a fill with dark text on the light header — same pattern as
     .nav-cta:hover. amber as a text color would be unreadable on var(--text). */
  .nav-lang a:hover{ background: var(--amber); color: var(--bg); }
  .nav-lang a.active{ background: var(--amber); color: var(--bg); font-weight: 700; }
  .nav-lang .sep{ color: var(--text-dim); }
  .nav-cta{
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 16px; border: 1px solid rgba(16,15,40,0.35); border-radius: 3px;
    text-decoration: none; color: var(--bg); background: transparent;
    transition: all .18s ease; white-space: nowrap;
  }
  .nav-cta:hover{ background: var(--amber); border-color: var(--amber); color: var(--bg); }
  .nav-toggle{
    display:none; background:none; border: 1px solid rgba(16,15,40,0.35); border-radius: 3px;
    width: 38px; height: 38px; color: var(--bg); cursor: pointer;
    align-items:center; justify-content:center; font-size: 16px; padding: 0;
    transition: background .18s ease, border-color .18s ease;
  }
  .nav-toggle:hover{ background: var(--amber); border-color: var(--amber); }

  /* Narrow desktop band: logo + 4 links + the long German CTA + switcher only
     just fit above 850px. Tighten the spacing so the row never overflows
     before the 760px mobile breakpoint takes over. */
  @media (min-width: 761px) and (max-width: 900px){
    nav.wrap{ gap: 12px; }
    .nav-links{ gap: 14px; }
    .nav-right{ gap: 8px; }
    .nav-cta{ padding: 9px 11px; }
  }

  @media (max-width: 760px){
    /* CTA leaves the header entirely on mobile — the row is needed for the
       language switcher and the burger. It is not moved into the dropdown. */
    .nav-cta{ display: none; }
    .nav-links{
      position: fixed; top: 64px; left: 0; right: 0;
      background: var(--text); border-bottom: 1px solid var(--border);
      flex-direction: column; align-items: flex-start;
      padding: 22px 32px 26px; gap: 18px; font-size: 15px;
      transform: translateY(-8px); opacity: 0; pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }
    .nav-links.open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-toggle{ display:flex; }
  }

  /* ---------- HERO ---------- */
  .hero{ padding: 88px 0 88px; position: relative; }
  .hero h1{ font-size: clamp(40px, 6vw, 68px); line-height: 1.06; max-width: 16ch; }
  .hero h1 .accent{ color: var(--amber); }
  .hero p.sub{ margin-top: 26px; font-size: 19px; color: var(--text-dim); max-width: 50ch; line-height: 1.65; }
  .hero-actions{ margin-top: 40px; display:flex; gap: 16px; flex-wrap: wrap; }
  .btn-primary{
    font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600;
    background: var(--amber); color: var(--bg); padding: 14px 26px; border-radius: 3px;
    text-decoration: none; display:inline-block; border: none; cursor: pointer;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-primary:hover{ background: var(--amber-dim); transform: translateY(-1px); }
  .btn-ghost{
    font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--text-dim);
    padding: 14px 6px; text-decoration: none; border-bottom: 1px solid var(--border);
  }
  .btn-ghost:hover{ color: var(--text); border-color: var(--text-dim); }
  .btn-outline{
    font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
    padding: 9px 16px; border: 1px solid var(--border); border-radius: 3px;
    color: var(--text); background: transparent; text-decoration: none;
    display: inline-block; transition: all .18s ease; white-space: nowrap;
  }
  .btn-outline:hover{ background: var(--amber); border-color: var(--amber); color: var(--bg); }

  /* ---------- SIGNATURE ---------- */
  .signature{ margin-top: 44px; padding: 0; border-top: none; }
  .signature-hint{
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-faint);
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 22px;
  }
  .decompose{
    font-family: 'IBM Plex Mono', monospace; font-size: clamp(46px, 11vw, 128px);
    font-weight: 500; line-height: 1; letter-spacing: -0.01em; user-select: none;
    display: flex; flex-wrap: wrap;
  }
  .decompose-word{ position: relative; display: inline-flex; }
  .decompose-mark{
    position: absolute; top: -0.08em; right: -0.62em;
    height: 0.32em; width: auto;
    opacity: 0; transition: opacity .5s ease .2s;
  }
  .decompose.reveal .decompose-mark{ opacity: 1; }
  .decompose span{ position: relative; color: var(--text-faint); transition: color .5s ease, letter-spacing .5s ease; }
  .decompose span.grp-agnt{ transition-delay: 0s; }
  .decompose span.grp-ct{ transition-delay: .08s; }
  .decompose.reveal span.grp-agnt{ color: var(--text); }
  .decompose.reveal span.grp-ct{ color: var(--amber); }
  .decompose.reveal{ letter-spacing: 0.02em; }
  .readings{
    margin-top: 22px; display:flex; gap: 28px; flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-faint);
    opacity: 0; transform: translateY(6px); transition: opacity .6s ease .25s, transform .6s ease .25s;
  }
  .readings.reveal{ opacity: 1; transform: translateY(0); }
  .readings b{ color: var(--text-dim); font-weight: 500; }

  /* ---------- SECTIONS (shared) ---------- */
  section{ padding: 88px 0; border-top: 1px solid var(--border); }
  .section-head{ max-width: 62ch; margin-bottom: 32px; }
  .section-head h2{ font-size: clamp(26px, 3.4vw, 36px); line-height: 1.2; }
  .section-body p{ color: var(--text-dim); max-width: 68ch; font-size: 17px; }

  .channels{ display:flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 34px; }
  .channel-chip{
    font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 999px; padding: 7px 16px;
  }

  .deliverables-label{
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
  }
  .deliverables{ list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 62ch; }
  .deliverables li{ display:flex; gap: 12px; align-items: flex-start; color: var(--text-dim); font-size: 16px; line-height: 1.55; }
  .deliverables li::before{ content: '→'; color: var(--amber); flex-shrink: 0; font-family: 'IBM Plex Mono', monospace; }
  .principle-close{ margin-top: 28px; max-width: 68ch; color: var(--text-dim); font-size: 17px; }

  .principles{
    display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 32px 0; margin-top: 12px;
  }
  .principle{ background: none; padding: 0; }
  .principle .mono{ font-size: 12px; color: var(--amber-dim); letter-spacing: 0.08em; text-transform: uppercase; display:block; margin-bottom: 14px; }
  .principle h3{ font-size: 18px; font-weight: 600; margin-bottom: 10px; }
  .principle p{ color: var(--text-dim); font-size: 15px; margin: 0; }

  .proof{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
  .proof-visual{
    border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    background: none;
    padding: 28px 0; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text-faint);
  }
  .proof-visual .line{ display:flex; align-items:center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--border); }
  .proof-visual .line:last-child{ border-bottom: none; }
  .dot{ width:6px; height:6px; border-radius:50%; background: var(--text-faint); flex-shrink:0; }
  .dot.on{ background: var(--amber); }
  .proof-visual .lbl{ color: var(--text-dim); }

  /* ---------- FÜR WEN + TOGGLE ---------- */
  .for-whom-intro{ max-width: 74ch; }
  .for-whom-intro h2{ font-size: clamp(26px, 3.4vw, 36px); line-height: 1.25; }
  .for-whom-intro p{ color: var(--text-dim); margin-top: 18px; font-size: 17px; max-width: 68ch; }

  .persona-picker{ margin-top: 48px; }
  .persona-label{
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-faint); margin: 0 0 16px;
  }
  .persona-tabs{ display:flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
  .persona-tab{
    font-family: 'IBM Plex Mono', monospace; font-size: 13.5px;
    background: var(--bg-alt); color: var(--text-dim);
    border: 1px solid var(--border); border-radius: 999px;
    padding: 10px 18px; cursor: pointer; transition: all .15s ease;
  }
  .persona-tab:hover{ color: var(--text); border-color: var(--text-dim); }
  .persona-tab.active{ background: var(--amber); color: var(--bg); border-color: var(--amber); font-weight: 500; }

  .persona-panel{
    display:none; border: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    border-radius: 0; background: none; padding: 36px 4px; max-width: 74ch;
  }
  .persona-panel.active{ display:block; }
  .persona-panel h3{ font-size: 22px; margin-bottom: 14px; }
  .persona-panel p{ color: var(--text-dim); font-size: 16.5px; margin: 0; }

  /* ---------- PRICING ---------- */
  .pricing-box{
    border: 1px solid var(--border); border-radius: 6px; background: var(--bg-alt);
    padding: 40px; max-width: 74ch;
  }
  .pricing-box p{ color: var(--text-dim); font-size: 17px; max-width: 60ch; }
  .pricing-box .btn-primary{ margin-top: 22px; }

  /* ---------- PRICING ---------- */
  .pricing-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; align-items: stretch; gap: 20px; max-width: var(--max); }
  .price-card{
    border: 1px solid var(--border); border-radius: 6px;
    background: none;
    padding: 34px 30px; display:flex; flex-direction:column;
  }
  .price-card.featured{ border-color: var(--amber-dim); }
  .price-card .tier-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); margin-bottom:10px; }
  .price-card .tier-price{ font-family:'Space Grotesk',sans-serif; font-size:38px; font-weight:600; color:var(--text); }
  .price-card .tier-price span{ font-family:'IBM Plex Mono',monospace; font-size:14px; color:var(--text-dim); font-weight:400; }
  .price-card .tier-desc{ color:var(--text-dim); font-size:15px; margin: 10px 0 22px; }
  .price-card ul{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:10px; }
  .price-card li{ display:flex; gap:10px; align-items:flex-start; color:var(--text-dim); font-size:14.5px; }
  .price-card li::before{ content:'✓'; color:var(--amber); flex-shrink:0; font-family:'IBM Plex Mono',monospace; }
  .price-card .btn-outline{ margin-top:auto; align-self:flex-start; }
  .btn-enterprise{
    font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600;
    padding: 9px 16px; border: 1px dashed var(--amber-dim); border-radius: 3px;
    color: var(--amber); background: rgba(205,250,42,.06); text-decoration: none;
    display: inline-block; transition: all .18s ease; white-space: nowrap;
  }
  .btn-enterprise:hover{ background: var(--amber); border-style: solid; border-color: var(--amber); color: var(--bg); }
  .price-card .btn-enterprise{ margin-top:auto; align-self:flex-start; }

  .addon-strip{
    max-width: var(--max); margin-top: 18px; padding: 20px 26px;
    border: 1px dashed var(--border); border-radius: 6px;
    display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  }
  .addon-strip .label{ color: var(--text-dim); font-size: 15px; }
  .addon-strip .label b{ color: var(--text); }
  .addon-strip .price{ font-family:'IBM Plex Mono',monospace; color: var(--amber); font-size:15px; white-space:nowrap; }

  .terms-note{ max-width: 900px; margin-top: 24px; color: var(--text-faint); font-size: 14px; line-height:1.7; }
  .terms-note b{ color: var(--text-dim); }

  .pricing-cta{ margin-top: 32px; }

  @media (min-width: 701px) and (max-width: 980px){
    .pricing-grid{ grid-template-columns: 1fr 1fr; }
    .price-card.enterprise{ grid-column: 1 / -1; }
  }
  @media (max-width: 700px){ .pricing-grid{ grid-template-columns: 1fr; } }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width: 74ch; display:grid; gap: 0; border-top: 1px solid var(--border); }
  .faq-item{
    background: none; border-bottom: 1px solid var(--border);
    /* breathing room under an open answer lives here, not on the paragraph:
       vertical padding on the grid item would floor the collapsed track and
       leave the answer 22px tall when shut */
    padding-bottom: 0; transition: padding-bottom .28s ease;
  }
  .faq-item.open{ padding-bottom: 22px; }
  .faq-q{
    width: 100%; text-align:left; background:none; border:none; color: var(--text);
    font-family: 'Space Grotesk', sans-serif; font-size: 16.5px; font-weight: 600;
    padding: 22px 26px; cursor: pointer; display:flex; justify-content:space-between; align-items:center; gap: 16px;
  }
  .faq-q .ind{ font-family: 'IBM Plex Mono', monospace; color: var(--amber); flex-shrink:0; transition: transform .2s ease; }
  .faq-item.open .faq-q .ind{ transform: rotate(45deg); }
  /* Height is derived from the answer itself: the 0fr -> 1fr grid track resolves
     to the content's own height, so long answers are never clipped and no fixed
     pixel cap has to be maintained as copy changes or wraps on narrow screens.
     Browsers that cannot animate an fr track still open/close correctly, just
     without the ease. */
  .faq-a{
    display: grid; grid-template-rows: 0fr;
    overflow: hidden; transition: grid-template-rows .28s ease;
  }
  .faq-item.open .faq-a{ grid-template-rows: 1fr; }
  .faq-a p{
    color: var(--text-dim); font-size: 16px; padding: 0 26px; margin:0; max-width: 62ch;
    min-height: 0; /* let the grid item collapse below its content height */
  }
  @media (prefers-reduced-motion: reduce){
    .faq-a, .faq-item{ transition: none; }
  }

  /* ---------- ÜBER UNS ---------- */
  .about-box{
    border: none; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
    border-radius: 0; padding: 32px 4px; max-width: 74ch;
    background: none;
  }
  .about-box p{ color: var(--text-dim); font-size: 16px; }
  .placeholder-tag{
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--amber-dim); border: 1px solid var(--amber-dim);
    border-radius: 3px; padding: 3px 9px; display:inline-block; margin-bottom: 14px;
  }

  .for-whom{ display:flex; justify-content: space-between; align-items:flex-end; gap: 40px; flex-wrap: wrap; }

  footer{ border-top: 1px solid var(--border); padding: 0; }
  .footer-nav{
    display:flex; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--border);
    font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; flex-wrap: wrap;
  }
  .footer-nav a{ color: var(--text-dim); text-decoration:none; transition: color .15s ease; }
  .footer-nav a:hover{ color: var(--amber); }
  .footer-bottom{ padding-top: 24px; padding-bottom: 40px; }
  footer .wrap{ display:flex; justify-content: space-between; align-items:center; flex-wrap: wrap; gap: 16px; }
  .footer-line{ font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; color: var(--text-faint); }
  .footer-links{ display:flex; gap: 22px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
  .footer-links a{ color: var(--text-dim); text-decoration:none; }
  .footer-links a:hover{ color: var(--amber); }

  @media (max-width: 860px){
    .principles{ grid-template-columns: 1fr; }
    .proof{ grid-template-columns: 1fr; gap: 32px; }
    .for-whom{ flex-direction: column; align-items: flex-start; }
  }

  @media (prefers-reduced-motion: reduce){ *{ transition: none !important; scroll-behavior: auto !important; } }