:root {
      --cyan: #69CFEA;
      --cyan-light: #E8F7FB;
      --dark: #17212B;
      --grey: #5E6A74;
      --offwhite: #F8F7F3;
      --white: #FFFFFF;
      --border: #DDE6EA;
      --max: 1180px;
      --radius: 18px;
      --shadow: 0 18px 50px rgba(23,33,43,.08);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                   "Segoe UI", sans-serif;
      color: var(--dark);
      background: var(--offwhite);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    .container {
      width: min(calc(100% - 40px), var(--max));
      margin-inline: auto;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(248,247,243,.88);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(221,230,234,.75);
    }

    .nav-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .logo {
      font-size: 1.8rem;
      line-height: 1;
      font-weight: 800;
      letter-spacing: -.065em;
    }
    .logo .me { color: var(--cyan); }
    /* On the light navigation, the accent needs a darker contrast value. */
    .nav .logo .me { color: #08748D; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      font-size: .92rem;
      color: var(--grey);
    }
    .nav-links a:hover { color: var(--dark); }

    .nav-cta {
      padding: 10px 17px;
      border-radius: 999px;
      background: var(--dark);
      color: white;
      transition: .2s ease;
    }
    .nav-cta:hover {
      background: var(--cyan);
      color: var(--dark);
    }

    .menu {
      display: none;
      border: 0;
      background: none;
      font-size: 1.6rem;
      cursor: pointer;
      color: var(--dark);
    }

    .hero {
      padding: 110px 0 100px;
      position: relative;
      overflow: hidden;
      background: #061426;
      color: #F4F8FC;
    }

    .hero::before {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      right: -220px;
      top: 30px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(105,207,234,.23), transparent 68%);
      pointer-events: none;
    }

    /* Scroll-linked network artwork: rendered only when the scroll position changes. */
    .hero::before { z-index: 0; }
    .network-scroll-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      opacity: 1;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background: linear-gradient(90deg, rgba(3,10,23,.78) 0%, rgba(3,10,23,.58) 48%, rgba(3,10,23,.35) 100%);
      opacity: 1;
    }
    .hero-grid { position: relative; z-index: 1; }
    .hero .eyebrow { color: #D9E7F2; }
    .hero h1 { color: #F7FBFF; }
    .hero h1 span { color: #69CFEA; }
    .hero .hero-kicker { color: #F7FBFF; }
    .hero .hero-copy { color: #D3E1ED; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--grey);
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .eyebrow::before {
      content: "";
      width: 24px;
      height: 2px;
      background: var(--cyan);
    }

    h1 {
      max-width: none;
      margin: 24px 0 25px;
      font-size: clamp(2.8rem, 4.6vw, 4.55rem);
      line-height: .94;
      letter-spacing: -.078em;
      font-weight: 800;
    }
    h1 span { color: var(--cyan); }

    .hero-copy {
      max-width: 650px;
      color: var(--grey);
      font-size: clamp(1.05rem, 2vw, 1.25rem);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--dark);
      font-weight: 700;
      font-size: .92rem;
      transition: .2s ease;
    }
    .btn-primary {
      background: var(--dark);
      color: white;
    }
    .btn-primary:hover {
      background: var(--cyan);
      border-color: var(--cyan);
      color: var(--dark);
      transform: translateY(-1px);
    }
    .btn-secondary {
      border-color: var(--border);
      color: var(--grey);
      background: rgba(255,255,255,.5);
    }
    .btn-secondary:hover {
      border-color: var(--cyan);
      color: var(--dark);
    }

    section { padding: 100px 0; }

    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 40px;
      margin-bottom: 45px;
    }

    .section-head h2 {
      margin: 12px 0 0;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .section-intro {
      max-width: 430px;
      color: var(--grey);
    }

    .services {
      background: var(--white);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }

    .card {
      padding: 30px;
      background: var(--offwhite);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      transition: .25s ease;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: rgba(105,207,234,.8);
    }

    .number {
      color: #08748D;
      font-size: .8rem;
      font-weight: 800;
      letter-spacing: .12em;
    }

    .card h3 {
      margin: 32px 0 12px;
      font-size: 1.35rem;
      letter-spacing: -.025em;
    }
    .card p {
      margin: 0;
      color: var(--grey);
      font-size: .95rem;
    }

    .dark-section {
      background: var(--dark);
      color: white;
    }

    .dark-section .eyebrow { color: #AAB7BF; }
    .dark-section .section-intro { color: #AAB7BF; }

    .process {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      border-top: 1px solid rgba(255,255,255,.14);
    }

    .step {
      padding: 30px 25px 10px 0;
      border-right: 1px solid rgba(255,255,255,.14);
    }
    .step + .step { padding-left: 25px; }
    .step:last-child { border-right: 0; }

    .step strong {
      color: var(--cyan);
      font-size: .78rem;
      letter-spacing: .14em;
    }
    .step h3 {
      margin: 16px 0 10px;
      font-size: 1.15rem;
    }
    .step p {
      margin: 0;
      color: #AAB7BF;
      font-size: .9rem;
    }

    .entry-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
      gap: 28px;
      align-items: start;
      min-width: 0;
    }
    .entry-layout > div { min-width: 0; }

    .about {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
    }

    .about h2 {
      margin: 15px 0 22px;
      font-size: clamp(2.2rem, 5vw, 4.3rem);
      line-height: .98;
      letter-spacing: -.065em;
    }
    .about p { color: var(--grey); }

    .quote {
      padding: 38px;
      background: var(--cyan-light);
      border-radius: var(--radius);
      border: 1px solid rgba(105,207,234,.35);
      font-size: 1.2rem;
      line-height: 1.45;
      letter-spacing: -.02em;
    }

    .contact {
      background: var(--cyan-light);
      text-align: center;
    }
    .contact h2 {
      max-width: 750px;
      margin: 15px auto 20px;
      font-size: clamp(2.4rem, 6vw, 5rem);
      line-height: .95;
      letter-spacing: -.07em;
    }
    .contact p {
      max-width: 570px;
      margin: 0 auto;
      color: var(--grey);
    }

    footer {
      background: var(--dark);
      color: #AAB7BF;
      padding: 34px 0;
      font-size: .84rem;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: center;
    }

    .footer-logo { color: white; }
    .footer-logo .me { color: var(--cyan); }

    .footer-links {
      display: flex;
      gap: 22px;
    }
    .footer-links a:hover { color: white; }


    /* --- v3 visual layer --- */
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(380px, .85fr);
      gap: 54px;
      align-items: start;
    }
    .hero-copy-col { min-width: 0; }
    .hero-visual {
      position: relative;
      align-self: start;
      margin-top: 92px;
      min-height: 330px;
      width: 100%;
      min-width: 0;
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 28px;
      background:
        radial-gradient(circle at 85% 15%, rgba(105,207,234,.18), transparent 34%),
        linear-gradient(145deg, #fff, #F4FAFC);
      box-shadow: 0 30px 80px rgba(23,33,43,.08);
      overflow: hidden;
    }
    .hero-visual::before,
    .hero-visual::after {
      content: "";
      position: absolute;
      border: 1px solid rgba(105,207,234,.28);
      border-radius: 50%;
      pointer-events: none;
    }
    .hero-visual::before { width: 250px; height: 250px; right: -120px; top: -110px; }
    .hero-visual::after { width: 420px; height: 420px; right: -210px; top: -195px; }
    .visual-caption {
      position: relative;
      z-index: 1;
      color: var(--grey);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .16em;
    }
    .pipeline {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr;
      align-items: center;
      margin-top: 65px;
    }
    .node {
      min-height: 104px;
      padding: 14px 10px;
      border: 1px solid var(--border);
      border-radius: 15px;
      background: rgba(255,255,255,.86);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      box-shadow: 0 10px 25px rgba(23,33,43,.04);
    }
    .node.active {
      border-color: rgba(105,207,234,.8);
      box-shadow: 0 12px 32px rgba(105,207,234,.16);
    }
    .node.done { background: var(--dark); color: #fff; border-color: var(--dark); }
    .node-icon {
      width: 34px; height: 34px;
      display: grid; place-items: center;
      margin-bottom: 5px;
      border-radius: 10px;
      background: var(--cyan-light);
      color: var(--dark);
      font-weight: 900;
    }
    .node.done .node-icon { background: var(--cyan); }
    .node b { font-size: .78rem; }
    .node small { color: var(--grey); font-size: .62rem; }
    .node.done small { color: #AAB7BF; }
    .wire { position: relative; height: 2px; background: var(--border); overflow: visible; }
    .wire i {
      position: absolute;
      top: -3px;
      left: 0;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--cyan);
      animation: travel 2.7s linear infinite;
    }
    .wire:nth-of-type(2) i { animation-delay: .55s; }
    .wire:nth-of-type(4) i { animation-delay: 1.1s; }
    .wire:nth-of-type(6) i { animation-delay: 1.65s; }
    @keyframes travel {
      from { transform: translateX(0); opacity: .2; }
      15% { opacity: 1; }
      to { transform: translateX(calc(100% - 8px)); opacity: .2; }
    }
    .visual-foot {
      position: absolute;
      left: 28px; right: 28px; bottom: 20px;
      display: flex;
      justify-content: space-between;
      color: var(--grey);
      font-size: .68rem;
    }
    .visual-foot em {
      display: inline-block;
      width: 7px; height: 7px;
      margin-right: 5px;
      border-radius: 50%;
      background: var(--cyan);
      box-shadow: 0 0 0 5px rgba(105,207,234,.13);
    }

    .card-icon {
      width: 42px; height: 42px;
      display: grid; place-items: center;
      border-radius: 12px;
      background: var(--cyan-light);
      color: var(--dark);
      font-size: 1.2rem;
      font-weight: 800;
      transition: .25s ease;
    }
    .card:hover .card-icon {
      transform: rotate(-5deg) scale(1.08);
      background: var(--cyan);
    }

    .mini-map {
      padding: 25px 22px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--offwhite);
      margin-bottom: 18px;
    }
    .mini-step {
      display: grid;
      grid-template-columns: 32px 1fr;
      column-gap: 12px;
      align-items: center;
      padding: 7px 0;
    }
    .mini-step span {
      width: 30px; height: 30px;
      display: grid; place-items: center;
      border-radius: 9px;
      background: var(--white);
      color: #08748D;
      border: 1px solid var(--border);
      font-size: .65rem;
      font-weight: 800;
    }
    .mini-step b { font-size: .84rem; }
    .mini-step small { grid-column: 2; color: var(--grey); font-size: .7rem; }
    .mini-step.accent span { background: var(--dark); border-color: var(--dark); color: var(--cyan); }
    .mini-line {
      width: 1px;
      height: 15px;
      margin-left: 15px;
      background: var(--cyan);
      opacity: .55;
    }

    .architecture {
      padding: 24px;
      border: 1px solid rgba(105,207,234,.22);
      border-radius: 16px;
      background: rgba(255,255,255,.045);
    }
    .arch-label {
      color: var(--cyan);
      font-size: .65rem;
      letter-spacing: .16em;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .arch-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr;
      gap: 8px;
      align-items: center;
    }
    .arch-row span {
      padding: 11px 7px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 9px;
      text-align: center;
      font-size: .68rem;
    }
    .arch-row i {
      color: var(--cyan);
      font-style: normal;
      font-size: .7rem;
    }
    .arch-row.second {
      margin-top: 10px;
      opacity: .65;
    }

    @media (max-width: 1050px) and (min-width: 851px) {
      .hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
        gap: 36px;
      }
      h1 { font-size: clamp(2.8rem, 4.2vw, 4rem); }
      .hero-visual { margin-top: 78px; }
    }

    @media (max-width: 850px) {
      .hero-grid { grid-template-columns: 1fr; gap: 45px; }
      .hero-visual { min-height: 300px; margin-top: 0; }
      .nav-links {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        padding: 20px;
        background: var(--offwhite);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: stretch;
      }
      .nav-links.open { display: flex; }
      .nav-cta { text-align: center; }
      .menu { display: block; }

      .grid { grid-template-columns: 1fr 1fr; }
      .process { grid-template-columns: 1fr 1fr; }
      .step:nth-child(2) { border-right: 0; }
      .step:nth-child(3), .step:nth-child(4) { border-top: 1px solid rgba(255,255,255,.14); }
      .step:nth-child(3) { padding-left: 0; }

      .about { grid-template-columns: 1fr; gap: 35px; }
      .entry-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    }

    @media (max-width: 600px) {
      .hero-grid { gap: 32px; }
      .hero-visual { padding: 18px; min-height: 280px; border-radius: 20px; }
      .pipeline { grid-template-columns: 1fr; gap: 8px; margin-top: 35px; }
      .wire { width: 2px; height: 18px; justify-self: center; }
      .wire i { top: 0; left: -3px; animation-name: travelY; }
      .visual-foot { left: 18px; right: 18px; }
      @keyframes travelY {
        from { transform: translateY(0); opacity: .2; }
        15% { opacity: 1; }
        to { transform: translateY(calc(100% - 8px)); opacity: .2; }
      }
      .container { width: min(calc(100% - 28px), var(--max)); }
      .hero { padding: 80px 0 75px; }
      section { padding: 72px 0; }

      .section-head {
        display: block;
        margin-bottom: 30px;
      }
      .section-intro { margin-top: 20px; }

      .grid, .process { grid-template-columns: 1fr; }
      .step, .step + .step {
        padding: 24px 0;
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,.14);
      }
      .step:first-child { border-top: 0; }

      .footer-inner {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    .hero-kicker {
      margin-top: 24px;
      font-size: clamp(1.35rem, 3vw, 2.1rem);
      font-weight: 700;
      letter-spacing: -.045em;
      max-width: 720px;
    }
    .hero-kicker span { color: var(--cyan); }
.manual-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-top: 40px;
    }
    .manual-box {
      padding: 34px;
      border-radius: var(--radius);
      border: 1px solid var(--border);
    }
    .manual-box.bad { background: #fff; }
    .manual-box.good {
      background: var(--cyan-light);
      border-color: rgba(105,207,234,.45);
    }
    .manual-box h3 { margin-top: 0; }
    .manual-box ul {
      margin: 18px 0 0;
      padding-left: 20px;
      color: var(--grey);
    }
    .manual-box li { margin: 7px 0; }

    .maintenance {
      margin-top: 30px;
      padding: 42px;
      border-radius: var(--radius);
      background: var(--dark);
      color: white;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: center;
    }
    .maintenance h3 {
      margin: 0 0 15px;
      font-size: clamp(1.8rem, 4vw, 3rem);
      letter-spacing: -.055em;
      line-height: 1;
    }
    .maintenance p { color: #AAB7BF; margin: 0; }
    .maintenance .tag {
      color: var(--cyan);
      font-size: .78rem;
      letter-spacing: .14em;
      font-weight: 800;
      text-transform: uppercase;
    }
    .maintenance-copy { min-width: 0; }
    .maintenance-copy p + p { margin-top: 14px; }
    .maintenance .maintenance-secondary { color: #D5E0E8; }
    .architecture-note {
      margin: 16px 0 0;
      color: #AAB7BF;
      font-size: .82rem;
      line-height: 1.5;
    }

    @media (max-width: 850px) {
      .manual-grid, .maintenance { grid-template-columns: 1fr; }
    }


    /* CSS/SVG automation cards */
    .automation-examples { padding: 92px 0; background: #fff; }
    .automation-examples .accent { color: #08748D; }
    .automation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:38px; }
    .automation-card { min-width:0; padding:26px; border:1px solid var(--border); border-radius:18px; background:linear-gradient(145deg,#fff,#f8fcfd); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
    .automation-card:hover { transform:translateY(-3px); border-color:rgba(105,207,234,.8); box-shadow:0 16px 38px rgba(23,33,43,.08); }
    .automation-examples .automation-icon { width:36px; height:36px; min-width:36px; min-height:36px; display:grid; place-items:center; margin-bottom:16px; border-radius:11px; color:#168eaa; background:rgba(105,207,234,.15); border:1px solid rgba(105,207,234,.32); }
    .automation-examples .automation-icon > svg { display:block; width:18px !important; height:18px !important; min-width:18px; min-height:18px; max-width:18px; max-height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
    .automation-number { color:#08748D; font-size:.68rem; font-weight:800; letter-spacing:.13em; }
    .automation-card h3 { margin:7px 0 9px; font-size:1.12rem; line-height:1.3; letter-spacing:-.025em; }
    .automation-card p { margin:0; color:var(--grey); font-size:.92rem; line-height:1.65; }
    .node-icon svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    @media (max-width:900px) { .automation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:580px) { .automation-examples { padding:64px 0; } .automation-grid { grid-template-columns:1fr; gap:12px; } .automation-card { padding:22px; } }

  

/* Audience section: based on the actual experience and services described on relitz.me. */
.audiences { padding: 92px 0; background: #f1f5f6; border-block: 1px solid rgba(221,230,234,.8); }
.audiences .accent { color: #08748D; }
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.audience-card { min-width: 0; padding: 28px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.88); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.audience-card:hover { transform: translateY(-3px); border-color: rgba(105,207,234,.85); box-shadow: 0 16px 38px rgba(23,33,43,.07); }
.audience-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 17px; border: 1px solid rgba(105,207,234,.38); border-radius: 11px; background: rgba(105,207,234,.14); color: #08748D; }
.audience-icon svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.audience-label { color: #08748D; font-size: .68rem; font-weight: 800; letter-spacing: .13em; }
.audience-card h3 { margin: 7px 0 9px; font-size: 1.12rem; line-height: 1.35; letter-spacing: -.025em; }
.audience-card p { margin: 0; color: var(--grey); font-size: .92rem; line-height: 1.7; }
.about-cv-note { margin-top: 20px; font-size: .9rem; }
.about-cv-note a { color: #08748D; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 850px) { .audiences { padding: 72px 0; } .audience-grid { gap: 14px; } .audience-card { padding: 23px; } }
@media (max-width: 600px) { .audiences { padding: 60px 0; } .audience-grid { grid-template-columns: 1fr; gap: 12px; } .audience-card { padding: 22px; } }


/* Mobile refinement: intentional narrow-screen layout rather than a scaled desktop. */
@media (max-width: 600px) {
  html { scroll-padding-top: 68px; }
  body { overflow-x: hidden; font-size: 16px; }
  .container { width: min(calc(100% - 36px), var(--max)); }

  .nav-inner { min-height: 64px; gap: 12px; }
  .logo { font-size: 1.62rem; }
  .menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255,255,255,.78);
    font-size: 1.45rem;
    line-height: 1;
  }
  .nav-links {
    top: 64px;
    left: 0;
    right: 0;
    gap: 0;
    padding: 8px 18px 18px;
    max-height: calc(100svh - 64px);
    overflow-y: auto;
    box-shadow: 0 18px 26px rgba(23,33,43,.08);
  }
  .nav-links a { padding: 13px 4px; border-bottom: 1px solid rgba(221,230,234,.7); }
  .nav-links .nav-cta { margin-top: 10px; padding: 12px 16px; border-bottom: 0; }

  .hero { padding: 56px 0 42px; }
  .hero::after {
    background: linear-gradient(180deg,
      rgba(3,10,23,.78) 0%,
      rgba(3,10,23,.66) 44%,
      rgba(3,10,23,.48) 100%);
    opacity: 1;
  }
  .hero-grid { grid-template-columns: minmax(0,1fr); gap: 27px; }
  .hero-copy-col { min-width: 0; }
  .eyebrow { font-size: .62rem; letter-spacing: .105em; gap: 7px; line-height: 1.5; }
  .eyebrow::before { width: 18px; flex: 0 0 18px; }
  h1 {
    font-size: clamp(1.9rem, 8.7vw, 2.35rem);
    line-height: 1.02;
    letter-spacing: -.07em;
    margin: 20px 0 17px;
    overflow-wrap: normal;
  }
  .hero-kicker {
    margin-top: 0;
    font-size: clamp(1.2rem, 5.7vw, 1.55rem);
    line-height: 1.22;
    letter-spacing: -.04em;
  }
  .hero-copy { margin: 17px 0 0; font-size: 1rem; line-height: 1.65; }
  .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; margin-top: 23px; }
  .btn { width: 100%; min-height: 48px; padding-inline: 16px; font-size: .9rem; }

  .hero-visual {
    min-height: 0;
    margin: 0;
    padding: 16px 12px 44px;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 34px rgba(23,33,43,.065);
  }
  .hero-visual::before { width: 145px; height: 145px; right: -83px; top: -78px; }
  .hero-visual::after { width: 230px; height: 230px; right: -130px; top: -125px; }
  .visual-caption { font-size: .59rem; letter-spacing: .13em; }
  .pipeline {
    grid-template-columns: minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr);
    gap: 3px;
    align-items: center;
    margin-top: 20px;
  }
  .node {
    min-width: 0;
    min-height: 76px;
    padding: 8px 2px;
    gap: 2px;
    border-radius: 10px;
  }
  .node-icon { width: 25px; height: 25px; margin-bottom: 3px; border-radius: 7px; }
  .node-icon svg { width: 16px; height: 16px; }
  .node b { font-size: .61rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
  .node small { font-size: .5rem; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
  .wire { width: auto; min-width: 0; height: 2px; justify-self: stretch; }
  .wire i { display: none; }
  .visual-foot {
    left: 12px; right: 12px; bottom: 13px;
    gap: 8px;
    align-items: center;
    font-size: .57rem;
    line-height: 1.2;
  }
  .visual-foot span { min-width: 0; }
  .visual-foot span:last-child { text-align: right; }
  .visual-foot em { width: 6px; height: 6px; margin-right: 3px; }

  section { padding: 58px 0; }
  .section-head { display: block; margin-bottom: 28px; }
  .section-head h2 { font-size: clamp(1.85rem, 8vw, 2.3rem); line-height: 1.04; letter-spacing: -.05em; }
  .section-intro { margin-top: 16px; font-size: .98rem; line-height: 1.65; }
  .grid, .process, .manual-grid, .maintenance, .automation-grid, .audience-grid { grid-template-columns: minmax(0,1fr); }
  .grid { gap: 12px; }
  .card { padding: 23px; border-radius: 16px; }
  .card h3 { margin-top: 20px; font-size: 1.22rem; }
  .process { display: grid; }
  .step, .step + .step { padding: 21px 0; border-right: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .step:first-child { border-top: 0; }
  .step h3 { margin: 10px 0 7px; }
  .about { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .entry-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .entry-layout .mini-map { width: 100%; min-width: 0; }
  .entry-layout .card, .entry-layout .quote { min-width: 0; overflow-wrap: anywhere; }
  .about h2 { font-size: clamp(2rem, 8vw, 2.5rem); line-height: 1.02; }
  .quote { padding: 24px; font-size: 1.08rem; }
  .manual-grid { gap: 12px; margin-top: 24px; }
  .manual-box { padding: 22px; }
  .maintenance { gap: 22px; padding: 24px; border-radius: 17px; }
  .maintenance h3 { font-size: 2rem; line-height: 1.04; }
  .architecture { padding: 16px; }
  .arch-row { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 4px; }
  .arch-row span { min-width: 0; padding: 9px 3px; font-size: .59rem; overflow-wrap: anywhere; }
  .arch-row i { font-size: .6rem; }
  .automation-examples, .audiences { padding: 58px 0; }
  .automation-grid, .audience-grid { gap: 12px; margin-top: 25px; }
  .automation-card, .audience-card { padding: 22px; border-radius: 16px; }
  .automation-card h3, .audience-card h3 { font-size: 1.08rem; }
  .automation-card p, .audience-card p { font-size: .92rem; line-height: 1.65; }
  .contact h2 { font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1; letter-spacing: -.06em; }
  .contact p { font-size: .98rem; line-height: 1.65; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 15px; }
  .footer-inner > div:nth-child(2) { font-size: .78rem; line-height: 1.5; }
  .footer-links { width: 100%; flex-wrap: wrap; gap: 10px 18px; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 30px); }
  h1 { font-size: 1.85rem; }
  .hero-kicker { font-size: 1.16rem; }
  .hero-visual { padding-inline: 9px; }
  .pipeline { grid-template-columns: minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr) 5px minmax(0,1fr); gap: 2px; }
  .node b { font-size: .57rem; }
  .node small { font-size: .47rem; }
  .visual-foot { left: 9px; right: 9px; font-size: .53rem; }
  .arch-row span { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wire i { animation: none !important; }
  .card, .automation-card, .audience-card, .btn { transition: none !important; }
}


/* Legal notices: readable, responsive dialog */
.legal-modal {
  width: min(760px, calc(100vw - 28px));
  max-width: 760px;
  max-height: min(86dvh, 820px);
  padding: 0;
  border: 1px solid rgba(105,207,234,.3);
  border-radius: 20px;
  color: #eaf4f8;
  background: #101c28;
  box-shadow: 0 28px 100px rgba(0,0,0,.55);
  overflow: hidden;
}
.legal-modal::backdrop { background: rgba(3,10,18,.76); backdrop-filter: blur(7px); }
.legal-modal[open] { animation: legal-pop .16s ease-out; }
@keyframes legal-pop { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.legal-modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:18px 20px 12px; border-bottom:1px solid rgba(255,255,255,.1); }
.legal-modal-head .eyebrow { color: var(--cyan); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.legal-modal-head h2 { margin:5px 0 0; color:#fff; font-size:clamp(1.55rem,4vw,2rem); line-height:1.1; }
.legal-close { width:38px; height:38px; flex:0 0 38px; border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(255,255,255,.06); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; }
.legal-tabs { display:flex; gap:8px; padding:10px 20px 0; }
.legal-tabs button { border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:9px 15px; background:transparent; color:#b8c8d4; font:inherit; font-size:.9rem; cursor:pointer; }
.legal-tabs button[aria-selected="true"] { color:#061522; background:var(--cyan); border-color:var(--cyan); font-weight:700; }
.legal-modal-body { max-height:calc(min(86dvh, 820px) - 132px); overflow-y:auto; overscroll-behavior:contain; padding:15px 20px 18px; }
.legal-panel h3 { margin:22px 0 8px; color:#fff; font-size:1rem; line-height:1.3; }
.legal-panel h3:first-child { margin-top:0; }
.legal-panel p, .legal-panel li { color:#c5d3dd; font-size:.92rem; line-height:1.7; overflow-wrap:anywhere; }
.legal-panel p { margin:0 0 13px; }
.legal-panel strong { color:#f4f9fc; }
.legal-panel a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.legal-required { color:#ffd68a; }
.legal-note { margin-top:22px !important; padding:14px 16px; border-left:3px solid #f0bf69; background:rgba(240,191,105,.08); border-radius:0 10px 10px 0; }
.legal-modal-foot { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:10px 20px; border-top:1px solid rgba(255,255,255,.1); color:#8295a4; font-size:.78rem; }
.legal-modal-foot .btn { cursor:pointer; }
.legal-modal-foot .btn-secondary { padding:8px 14px; }
.legal-modal :focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
@media (max-width:600px) {
  .legal-modal { width:calc(100vw - 18px); max-height:90dvh; border-radius:16px; }
  .legal-modal-head { gap:10px; padding:14px 14px 10px; }
  .legal-tabs { padding:8px 14px 0; }
  .legal-modal-body { max-height:calc(90dvh - 116px); padding:12px 14px 14px; }
  .legal-modal-foot { padding:9px 14px; }
  .legal-panel p, .legal-panel li { font-size:.88rem; }
}
@media (prefers-reduced-motion: reduce) { .legal-modal[open] { animation:none; } }


/* Balanced service pillars: AI is one of three equal offerings, not the entire brand. */
.service-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.service-pillars .card { min-width: 0; display: flex; flex-direction: column; }
.service-pillars .card-icon { margin-bottom: 24px; flex: 0 0 42px; }
.service-pillars .card-icon svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-pillars .card h3 { margin: 14px 0 12px; }
.service-pillars .card p { flex: 1; }
@media (max-width: 900px) { .service-pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .service-pillars { grid-template-columns: minmax(0,1fr); } .service-pillars .card-icon { margin-bottom: 16px; } .service-pillars .card h3 { margin-top: 10px; } }


/* Zusatzangebot: Google Ads, visuell dezent in den Leistungsbereich integriert */
.service-pillars .card p.service-detail {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  color: var(--grey);
  font-size: .94em;
}
.service-pillars .card p.service-detail strong { color: var(--dark); font-weight: 700; }


/* Pipeline: all four nodes use equal dimensions and the same grey typography. */
.pipeline {
  grid-auto-rows: 1fr;
}
.pipeline .node {
  width: 100%;
  height: 104px;
  min-height: 104px;
  color: var(--grey);
  background: rgba(255,255,255,.9);
  border-color: var(--border);
}
.pipeline .node b,
.pipeline .node small,
.pipeline .node.done small {
  color: var(--grey);
}
.pipeline .node.done {
  color: var(--grey);
  background: rgba(255,255,255,.9);
  border-color: var(--border);
}
.pipeline .node.done .node-icon {
  color: var(--grey);
  background: var(--cyan-light);
}
@media (max-width: 767px) {
  .pipeline .node { height: 76px; min-height: 76px; }
}