:root {
      --bg: #f5f8fb;
      --surface: #ffffff;
      --surface-2: #eef4f8;
      --text: #102033;
      --muted: #607086;
      --border: #dbe5ec;
      --accent: #05b9f2;
      --accent-2: #00d9ff;
      --accent-soft: rgba(5, 185, 242, .12);
      --shadow: 0 18px 50px rgba(30, 60, 85, .10);
      --header-bg: rgba(245, 248, 251, .84);
      --hero-glow: rgba(5, 185, 242, .16);
    }

    [data-theme="dark"] {
      --bg: #020b18;
      --surface: #071426;
      --surface-2: #0a1b31;
      --text: #f5f9fc;
      --muted: #93a8bc;
      --border: #153653;
      --accent: #00bff3;
      --accent-2: #00dfff;
      --accent-soft: rgba(0, 191, 243, .11);
      --shadow: 0 20px 60px rgba(0, 0, 0, .36);
      --header-bg: rgba(2, 11, 24, .84);
      --hero-glow: rgba(0, 191, 243, .20);
    }

    * { 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(--text);
      background:
        radial-gradient(ellipse at 12% 12%, rgba(0, 191, 243, .13), transparent 32rem),
        radial-gradient(ellipse at 88% 30%, rgba(0, 108, 255, .10), transparent 36rem),
        radial-gradient(ellipse at 45% 72%, rgba(0, 223, 255, .07), transparent 42rem),
        radial-gradient(circle at 50% 0%, var(--hero-glow), transparent 34rem),
        var(--bg);
      line-height: 1.6;
      transition: background-color .25s ease, color .25s ease;
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      z-index: -1;
      border-radius: 50%;
      pointer-events: none;
      filter: blur(34px);
      opacity: .72;
    }

    body::before {
      width: 46rem;
      height: 46rem;
      left: -18rem;
      top: 18%;
      background: radial-gradient(circle, rgba(0,191,243,.12), rgba(0,191,243,0) 68%);
      animation: cloudnetzGlowA 15s ease-in-out infinite alternate;
    }

    body::after {
      width: 52rem;
      height: 52rem;
      right: -23rem;
      top: 48%;
      background: radial-gradient(circle, rgba(0,102,255,.10), rgba(0,102,255,0) 70%);
      animation: cloudnetzGlowB 19s ease-in-out infinite alternate;
    }

    @keyframes cloudnetzGlowA {
      from { transform: translate3d(0,-4%,0) scale(.95); opacity: .48; }
      to   { transform: translate3d(12%,10%,0) scale(1.08); opacity: .78; }
    }

    @keyframes cloudnetzGlowB {
      from { transform: translate3d(0,8%,0) scale(.92); opacity: .42; }
      to   { transform: translate3d(-12%,-8%,0) scale(1.10); opacity: .70; }
    }

    @media (prefers-reduced-motion: reduce) {
      body::before, body::after, .hero-orbit-a, .hero-orbit-b { animation: none; }
    }

    a { color: inherit; text-decoration: none; }
    .container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }


    .intro {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 42%, rgba(0,191,243,.12), transparent 26rem),
        #020b18;
      transition: opacity .7s ease, visibility .7s ease;
    }

    .intro.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .intro-inner {
      width: min(760px, 82vw);
      display: grid;
      justify-items: center;
      gap: 22px;
    }

    .intro-logo {
      width: 100%;
      height: auto;
      opacity: 0;
      transform: scale(.92);
      filter: drop-shadow(0 0 0 rgba(0,191,243,0));
      animation: introLogo 1.6s cubic-bezier(.2,.8,.2,1) forwards;
    }

    .intro-line {
      width: 0;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
      box-shadow: 0 0 18px rgba(0,191,243,.55);
      animation: introLine 1.2s .45s ease forwards;
    }

    @keyframes introLogo {
      0%   { opacity: 0; transform: scale(.92); filter: drop-shadow(0 0 0 rgba(0,191,243,0)); }
      55%  { opacity: 1; transform: scale(1.01); filter: drop-shadow(0 0 22px rgba(0,191,243,.28)); }
      100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 10px rgba(0,191,243,.12)); }
    }

    @keyframes introLine {
      from { width: 0; opacity: 0; }
      to   { width: 62%; opacity: 1; }
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(14px);
      background: var(--header-bg);
      border-bottom: 1px solid var(--border);
    }

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

    .brand {
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .brand-logo {
      display: block;
      width: 280px;
      max-width: 45vw;
      height: auto;
      filter: drop-shadow(0 0 18px rgba(0, 190, 255, .08));
    }

    nav {
      display: flex;
      gap: 24px;
      align-items: center;
      color: var(--muted);
      font-size: .95rem;
    }

    nav a:hover { color: var(--text); }

    .theme-toggle {
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      border-radius: 999px;
      padding: 9px 12px;
      cursor: pointer;
      box-shadow: var(--shadow);
    }


    .hero {
      padding: 110px 0 82px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .hero-slider {
      min-height: 640px;
      display: grid;
      align-items: center;
    }

    .slides {
      position: relative;
      min-height: 450px;
      display: grid;
      align-items: center;
    }

    .slide {
      grid-area: 1 / 1;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      filter: blur(2px);
      transition:
        opacity 1.35s cubic-bezier(.22,.61,.36,1),
        transform 1.35s cubic-bezier(.22,.61,.36,1),
        filter 1.15s ease,
        visibility 1.35s ease;
      pointer-events: none;
      will-change: opacity, transform, filter;
    }

    .slide.is-active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      filter: blur(0);
      pointer-events: auto;
    }

    .slider-nav {
      display: flex;
      justify-content: center;
      gap: 10px;
      margin-top: 12px;
    }

    .slider-dot {
      width: 9px;
      height: 9px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      background: var(--border);
      transition: width .55s cubic-bezier(.22,.61,.36,1), background .55s ease, box-shadow .55s ease;
    }

    .slider-dot.is-active {
      width: 30px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 14px var(--accent-soft);
    }

    .hero-orbit {
      position: absolute;
      border: 1px solid rgba(0,191,243,.11);
      border-radius: 50%;
      pointer-events: none;
      opacity: .7;
    }

    .hero-orbit::before,
    .hero-orbit::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px var(--accent);
    }

    .hero-orbit-a {
      width: 430px;
      height: 430px;
      left: -180px;
      top: 80px;
      animation: orbitFloatA 18s ease-in-out infinite alternate;
    }

    .hero-orbit-a::before { right: 55px; top: 46px; }
    .hero-orbit-a::after { right: 14px; bottom: 120px; }

    .hero-orbit-b {
      width: 520px;
      height: 520px;
      right: -230px;
      top: 15px;
      animation: orbitFloatB 22s ease-in-out infinite alternate;
    }

    .hero-orbit-b::before { left: 76px; top: 54px; }
    .hero-orbit-b::after { left: 18px; bottom: 150px; }

    @keyframes orbitFloatA {
      from { transform: rotate(-8deg) translateY(0); }
      to   { transform: rotate(8deg) translateY(20px); }
    }

    @keyframes orbitFloatB {
      from { transform: rotate(7deg) translateY(8px); }
      to   { transform: rotate(-7deg) translateY(-16px); }
    }


    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border: 1px solid var(--border);
      background: var(--accent-soft);
      border-radius: 999px;
      color: var(--accent);
      font-size: .9rem;
      font-weight: 700;
    }

    h1 {
      max-width: 900px;
      margin: 24px auto 18px;
      font-size: clamp(2.8rem, 7vw, 5.4rem);
      line-height: .98;
      letter-spacing: -.055em;
    }

    .gradient-text {
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero p {
      max-width: 720px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 1.15rem;
    }

    .cta-row {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 34px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 13px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-weight: 700;
    }

    .btn-primary {
      color: #03131a;
      border-color: transparent;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 12px 35px var(--accent-soft);
    }

    .section {
      padding: 70px 0;
      position: relative;
    }

    .section:nth-of-type(even)::before {
      content: "";
      position: absolute;
      inset: 8% 0;
      z-index: -1;
      background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
      opacity: .32;
      filter: blur(55px);
      pointer-events: none;
    }
    .section-title { max-width: 700px; margin-bottom: 28px; }

    .section-title h2 {
      margin: 0 0 10px;
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: -.04em;
    }

    .section-title p { color: var(--muted); margin: 0; }

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

    .card {
      padding: 28px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: linear-gradient(180deg, var(--surface), var(--surface-2));
      box-shadow: var(--shadow);
    }

    .icon {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      margin-bottom: 20px;
      background: var(--accent-soft);
      color: var(--accent);
      font-size: 1.25rem;
      font-weight: 800;
    }

    .card h3 { margin: 0 0 8px; }
    .card p { margin: 0; color: var(--muted); }

    .pricing {
      margin-top: 24px;
      padding: 34px;
      border: 1px solid var(--border);
      border-radius: 24px;
      background: var(--surface);
      box-shadow: var(--shadow);
      display: flex;
      justify-content: space-between;
      gap: 30px;
      align-items: center;
    }

    .price {
      font-size: 2.1rem;
      font-weight: 800;
      letter-spacing: -.04em;
    }

    .price small {
      font-size: .95rem;
      font-weight: 500;
      color: var(--muted);
    }


    .launch-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
      padding: 40px;
      border: 1px solid var(--border);
      border-radius: 26px;
      background:
        radial-gradient(circle at 15% 0%, var(--accent-soft), transparent 18rem),
        var(--surface);
      box-shadow: var(--shadow);
    }

    .launch-box h2 {
      margin: 16px 0 10px;
      font-size: clamp(2rem, 4vw, 3rem);
      letter-spacing: -.04em;
    }

    .launch-box p {
      max-width: 700px;
      margin: 0;
      color: var(--muted);
    }

    footer {
      margin-top: 70px;
      border-top: 1px solid var(--border);
      color: var(--muted);
      padding: 28px 0 42px;
      font-size: .92rem;
    }

    .footer-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
    }

    @media (max-width: 820px) {
      .brand-logo { width: 215px; max-width: 58vw; }
      nav a { display: none; }
      .grid { grid-template-columns: 1fr; }
      .launch-box { align-items: flex-start; flex-direction: column; padding: 28px; }
      .hero { padding-top: 78px; }
      .hero-slider { min-height: 590px; }
      .slides { min-height: 430px; }
      .hero-orbit-a { left: -300px; }
      .hero-orbit-b { right: -330px; }
    }

/* Legal pages */
.legal-hero {
  padding: 92px 0 38px;
}
.legal-hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.05em;
}
.legal-hero p {
  max-width: 760px;
  color: var(--muted);
  margin: 0;
}
.legal-card {
  max-width: 900px;
  padding: 34px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}
.legal-card h2 {
  margin-top: 0;
  font-size: 1.45rem;
  letter-spacing: -.02em;
}
.legal-card h3 {
  margin-top: 26px;
  margin-bottom: 8px;
}
.legal-card p,
.legal-card li {
  color: var(--muted);
}
.legal-card a {
  color: var(--accent);
}
.legal-card ul {
  padding-left: 1.2rem;
}
.back-link {
  display: inline-flex;
  margin-bottom: 28px;
  color: var(--accent);
  font-weight: 700;
}