:root {
  color-scheme: light dark;
  --accent: #0a7cff;
  --accent-rgb: 10, 124, 255;
  --accent-strong: #005ed1;
  --accent-soft: rgba(var(--accent-rgb), 0.12);
  --mobile-header-offset: 96px;

  --bg: #f6f8fc;
  --bg-elev: #edf3fb;
  --bg-deep: #dfeafb;

  --text: #152238;
  --text-strong: #091321;
  --muted: #667791;
  --muted-strong: #4a5d76;

  --surface: rgba(255, 255, 255, 0.72);
  --surface-strong: rgba(255, 255, 255, 0.84);
  --surface-solid: rgba(255, 255, 255, 0.94);
  --surface-pop: rgba(255, 255, 255, 0.98);

  --header-top: rgba(255, 255, 255, 0.88);
  --header-bottom: rgba(255, 255, 255, 0.74);
  --pill-top: rgba(255, 255, 255, 0.46);
  --pill-bottom: rgba(255, 255, 255, 0.22);
  --menu-top: rgba(255, 255, 255, 0.96);
  --menu-bottom: rgba(245, 249, 255, 0.92);
  --drawer-top: rgba(255, 255, 255, 0.94);
  --drawer-bottom: rgba(243, 247, 255, 0.90);

  --border: rgba(10, 20, 40, 0.08);
  --border-strong: rgba(10, 20, 40, 0.14);
  --line-soft: rgba(10, 20, 40, 0.05);

  --shadow-soft: 0 16px 38px rgba(15, 23, 42, 0.08);
  --shadow: 0 30px 90px rgba(15, 23, 42, 0.13);
  --shadow-float: 0 18px 52px rgba(15, 23, 42, 0.10);

  --glass-highlight: rgba(255, 255, 255, 0.68);
  --glass-highlight-soft: rgba(255, 255, 255, 0.26);
  --glass-edge: rgba(255, 255, 255, 0.52);
  
  --card-highlight-w: 210px;
  --card-highlight-h: 72px;
  --card-highlight-x: 18%;
  --card-highlight-y: 1%;

  --card-highlight-core: 0.24;
  --card-highlight-soft: 0.10;
  --card-edge-top: 0.16;
  --card-edge-left: 0.08;
  --card-sheen: 0.08;

  --card-depth-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
  --card-depth-shadow-hover: 0 24px 58px rgba(15, 23, 42, 0.14);

  --page-cloud-a: rgba(var(--accent-rgb), 0.15);
  --page-cloud-b: rgba(123, 92, 255, 0.10);
  --page-cloud-c: rgba(56, 189, 248, 0.08);

  --hero-glow-a: rgba(var(--accent-rgb), 0.16);
  --hero-glow-b: rgba(123, 92, 255, 0.12);
  --hero-glow-c: rgba(56, 189, 248, 0.08);

  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #53a8ff;
    --accent-rgb: 83, 168, 255;
    --accent-strong: #8bc7ff;
    --accent-soft: rgba(var(--accent-rgb), 0.18);

    --bg: #07111f;
    --bg-elev: #0c1830;
    --bg-deep: #122547;

    --text: #edf4ff;
    --text-strong: #ffffff;
    --muted: #aec0d8;
    --muted-strong: #d5e1f1;

    --surface: rgba(10, 19, 37, 0.72);
    --surface-strong: rgba(16, 28, 50, 0.84);
    --surface-solid: rgba(14, 24, 44, 0.94);
    --surface-pop: rgba(17, 30, 54, 0.98);

    --header-top: rgba(17, 31, 57, 0.90);
    --header-bottom: rgba(10, 21, 40, 0.78);
    --pill-top: rgba(255, 255, 255, 0.11);
    --pill-bottom: rgba(255, 255, 255, 0.04);
    --menu-top: rgba(18, 32, 58, 0.96);
    --menu-bottom: rgba(10, 21, 40, 0.92);
    --drawer-top: rgba(16, 29, 54, 0.95);
    --drawer-bottom: rgba(9, 20, 37, 0.92);

    --border: rgba(176, 196, 223, 0.12);
    --border-strong: rgba(195, 213, 237, 0.18);
    --line-soft: rgba(176, 196, 223, 0.08);

    --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.24);
    --shadow: 0 34px 96px rgba(0, 0, 0, 0.34);
    --shadow-float: 0 22px 58px rgba(0, 0, 0, 0.26);

    --glass-highlight: rgba(255, 255, 255, 0.24);
    --glass-highlight-soft: rgba(255, 255, 255, 0.10);
    --glass-edge: rgba(255, 255, 255, 0.22);
    
    --card-highlight-core: 0.15;
    --card-highlight-soft: 0.06;
    --card-edge-top: 0.10;
    --card-edge-left: 0.05;
    --card-sheen: 0.045;

    --card-depth-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    --card-depth-shadow-hover: 0 28px 70px rgba(0, 0, 0, 0.34);

    --page-cloud-a: rgba(var(--accent-rgb), 0.22);
    --page-cloud-b: rgba(124, 92, 255, 0.14);
    --page-cloud-c: rgba(56, 189, 248, 0.08);

    --hero-glow-a: rgba(var(--accent-rgb), 0.24);
    --hero-glow-b: rgba(124, 92, 255, 0.16);
    --hero-glow-c: rgba(56, 189, 248, 0.08);
  }
}

html[data-page="support.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.12);
  --page-cloud-b: rgba(96, 165, 250, 0.08);
  --page-cloud-c: rgba(148, 163, 184, 0.06);
  --hero-glow-a: rgba(var(--accent-rgb), 0.14);
  --hero-glow-b: rgba(96, 165, 250, 0.10);
  --hero-glow-c: rgba(148, 163, 184, 0.05);
}

html[data-page="siri.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.12);
  --page-cloud-b: rgba(139, 92, 246, 0.10);
  --page-cloud-c: rgba(96, 165, 250, 0.06);
  --hero-glow-a: rgba(var(--accent-rgb), 0.12);
  --hero-glow-b: rgba(139, 92, 246, 0.12);
  --hero-glow-c: rgba(96, 165, 250, 0.05);
}

html[data-page="widgets.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.14);
  --page-cloud-b: rgba(14, 165, 233, 0.10);
  --page-cloud-c: rgba(99, 102, 241, 0.06);
  --hero-glow-a: rgba(var(--accent-rgb), 0.16);
  --hero-glow-b: rgba(14, 165, 233, 0.10);
  --hero-glow-c: rgba(99, 102, 241, 0.06);
}

html[data-page="privacy.html"],
html[data-page="terms.html"],
html[data-page="imprint.html"],
html[data-page="dpa.html"],
html[data-page="beta.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.08);
  --page-cloud-b: rgba(123, 92, 255, 0.05);
  --page-cloud-c: rgba(56, 189, 248, 0.04);

  --card-highlight-w: 160px;
  --card-highlight-h: 50px;
  --card-highlight-core: 0.08;
  --card-highlight-soft: 0.025;
  --card-edge-top: 0.05;
  --card-edge-left: 0.02;
  --card-sheen: 0.02;
}

@media (prefers-color-scheme: dark) {
  html[data-page="privacy.html"],
  html[data-page="terms.html"],
  html[data-page="imprint.html"],
  html[data-page="dpa.html"],
  html[data-page="beta.html"] {
    --page-cloud-a: rgba(var(--accent-rgb), 0.14);
    --page-cloud-b: rgba(123, 92, 255, 0.08);
    --page-cloud-c: rgba(56, 189, 248, 0.04);

    --card-highlight-core: 0.05;
    --card-highlight-soft: 0.018;
    --card-edge-top: 0.03;
    --card-edge-left: 0.012;
    --card-sheen: 0.012;
  }
}

html[data-page="privacy.html"] .header-bar::after,
html[data-page="terms.html"] .header-bar::after,
html[data-page="imprint.html"] .header-bar::after,
html[data-page="dpa.html"] .header-bar::after,
html[data-page="beta.html"] .header-bar::after {
  background:
    radial-gradient(180px 62px at 18% 0%, rgba(255, 255, 255, 0.18), transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%, transparent 78%, rgba(255, 255, 255, 0.02) 100%);
  opacity: 0.42;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  line-height: 1.65;
  position: relative;
  background:
    radial-gradient(circle at 12% 8%, var(--page-cloud-a), transparent 24%),
    radial-gradient(circle at 84% 12%, var(--page-cloud-b), transparent 22%),
    radial-gradient(circle at 52% 92%, var(--page-cloud-c), transparent 18%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 58%, var(--bg) 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  filter: blur(96px);
  opacity: 0.72;
  z-index: -1;
}

body::before {
  width: 360px;
  height: 360px;
  top: -120px;
  left: -100px;
  background: var(--page-cloud-a);
}

body::after {
  width: 320px;
  height: 320px;
  right: -100px;
  bottom: -100px;
  background: var(--page-cloud-b);
}

body.drawer-open {
  overflow: hidden;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration-color: rgba(var(--accent-rgb), 0.35);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  color: inherit;
}

:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb), 0.55);
  outline-offset: 3px;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.92em;
  padding: 0.16em 0.36em;
  border-radius: 0.55em;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
}

.container {
  width: min(1680px, calc(100% - 40px));
  margin: 0 auto;
}

.legal-shell .container {
  width: min(1480px, calc(100% - 40px));
}

.glass {
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    var(--shadow-soft);
}

.page-shell {
  padding: 24px 0 56px;
}

.section {
  padding: 54px 0;
}

.section-tight {
  padding-top: 30px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.01em;
  background: rgba(var(--accent-rgb), 0.05);
}

.lead {
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.8vw, 1.18rem);
  line-height: 1.78;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 22px;
}

.section-heading h2 {
  margin: 16px 0 12px;
  color: var(--text-strong);
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -0.052em;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  color: #ffffff;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.82));
  box-shadow: 0 14px 28px rgba(var(--accent-rgb), 0.22);
}

.btn-primary:hover {
  text-decoration: none;
  box-shadow: 0 18px 34px rgba(var(--accent-rgb), 0.26);
}

.btn-secondary {
  color: var(--text);
  border-color: var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.44));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 6px 18px rgba(15, 23, 42, 0.05);
}

.btn-secondary:hover {
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.50));
  border-color: rgba(var(--accent-rgb), 0.18);
}

@media (prefers-color-scheme: dark) {
  .btn-secondary {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 10px 24px rgba(0, 0, 0, 0.16);
  }

  .btn-secondary:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 0 0;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 320ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.site-header.is-hidden {
  opacity: 0;
  transform: translate3d(0, calc(-100% - 18px), 0);
  pointer-events: none;
}

body.drawer-open .site-header {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

@media (min-width: 961px) {
  .site-header.is-hidden {
    transform: none;
  }
}

.header-bar {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  border-radius: 30px;
  transition: box-shadow 220ms ease, border-color 220ms ease;
}

.header-bar.glass {
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-bar::before,
.header-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.header-bar::before {
  background: linear-gradient(180deg, var(--header-top), var(--header-bottom));
  backdrop-filter: blur(32px) saturate(160%);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    var(--shadow-float);
  z-index: 0;
}

.header-bar::after {
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 2px);
  background:
    radial-gradient(220px 78px at 18% 0%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14) 34%, transparent 76%),
    radial-gradient(170px 70px at 0% 18%, rgba(255, 255, 255, 0.16), transparent 74%),
    radial-gradient(120px 54px at 88% 8%, rgba(255, 255, 255, 0.10), transparent 78%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 22%, transparent 76%, rgba(255, 255, 255, 0.04) 100%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.10), transparent 42%, rgba(255, 255, 255, 0.035) 100%);
  opacity: 0.72;
  z-index: 1;
  filter: url(#managed-liquid-distort);
}

.header-bar > * {
  position: relative;
  z-index: 2;
}

.site-header.is-scrolled .header-bar::before {
  background: linear-gradient(180deg, var(--surface-pop), var(--surface-solid));
  border-color: var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    var(--shadow-soft);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text-strong);
  text-decoration: none;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #ffffff;
  font-weight: 800;
  font-size: 1.1rem;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.10)),
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.96), rgba(var(--accent-rgb), 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 12px 26px rgba(var(--accent-rgb), 0.22);
}

.brand-mark-image {
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.brand-mark-image picture,
.brand-mark-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-mark-image img {
  object-fit: cover;
  border-radius: inherit;
}

.brand-copy {
  display: inline-grid;
  min-width: 0;
}

.brand-copy strong {
  color: var(--text-strong);
  font-size: 1rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-copy span {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.15;
}

.top-nav {
  display: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav-link,
.nav-dropdown summary,
.menu-btn,
.drawer-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.nav-link,
.nav-dropdown summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--text);
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bottom));
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.nav-link::before,
.nav-dropdown summary::before,
.menu-btn::before,
.drawer-close::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(68px 26px at 18% 2%, rgba(255, 255, 255, 0.46), transparent 72%),
    linear-gradient(130deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(255, 255, 255, 0.06) 100%);
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
  filter: url(#managed-liquid-distort);
}

.nav-link > *,
.nav-dropdown summary > *,
.menu-btn > *,
.drawer-close > * {
  position: relative;
  z-index: 1;
}

.nav-link:hover,
.nav-dropdown summary:hover {
  text-decoration: none;
  border-color: rgba(var(--accent-rgb), 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.28));
}

.nav-link.active,
.nav-link[aria-current="page"],
.nav-dropdown.active-parent > summary {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.09));
  border-color: rgba(var(--accent-rgb), 0.22);
  color: var(--text-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 10px 26px rgba(var(--accent-rgb), 0.10);
}

.nav-dropdown {
  position: relative;
  isolation: isolate;
  z-index: 20;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 180ms ease;
  color: var(--muted);
  flex: 0 0 auto;
  opacity: 0.92;
}

.nav-dropdown[open] summary::after {
  transform: rotate(225deg);
}

.nav-menu,
.drawer {
  background: linear-gradient(180deg, var(--menu-top), var(--menu-bottom));
  backdrop-filter: blur(30px) saturate(165%);
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  border: 1px solid var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    var(--shadow);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 250px;
  padding: 10px;
  border-radius: 24px;
  display: grid;
  gap: 6px;
  z-index: 90;
  overflow: hidden;
}

.nav-menu::before,
.drawer::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    radial-gradient(120px 46px at 12% 0%, rgba(255, 255, 255, 0.40), transparent 72%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%, rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
  filter: url(#managed-liquid-distort);
}

.nav-menu a {
  position: relative;
  z-index: 1;
  display: block;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--text);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  border: 1px solid transparent;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.14);
}

.menu-btn {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--pill-top), var(--pill-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30);
  cursor: pointer;
}

.menu-lines {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
}

.menu-lines span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-strong);
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 10, 22, 0.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
  z-index: 70;
}

.drawer {
  position: fixed;
  top: 12px;
  left: 12px;
  bottom: 12px;
  width: min(380px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 30px;
  transform: translateX(calc(-100% - 20px));
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 71;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.drawer-open .drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

body.drawer-open .drawer {
  transform: translateX(0);
}

.drawer-top,
.drawer-nav,
.drawer-footer {
  position: relative;
  z-index: 1;
}

.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 8px 18px;
}

.drawer-title {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.drawer-close {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.08);
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

.drawer-nav {
  display: grid;
  gap: 6px;
  padding-top: 8px;
  overflow: auto;
}

.drawer-nav a,
.drawer-details summary {
  display: block;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.00);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.drawer-nav a:hover,
.drawer-nav a[aria-current="page"],
.drawer-details summary:hover {
  background: rgba(var(--accent-rgb), 0.08);
  border-color: rgba(var(--accent-rgb), 0.12);
}

.drawer-details {
  margin-top: 4px;
}

.drawer-details summary {
  list-style: none;
  cursor: pointer;
}

.drawer-details summary::-webkit-details-marker {
  display: none;
}

.drawer-sub {
  display: grid;
  gap: 6px;
  padding: 10px 0 0 12px;
}

.drawer-sub a {
  padding: 12px 14px;
}

.drawer-footer {
  margin-top: auto;
  padding: 18px 8px 6px;
}

.drawer-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.10);
  font-size: 0.84rem;
  font-weight: 700;
}

.drawer-mail {
  display: block;
  margin-top: 12px;
  color: var(--text-strong);
  font-weight: 700;
  text-decoration: none;
}

.hero {
  position: relative;
  padding: 48px 0 28px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -50px 0 auto 0;
  height: min(72vw, 620px);
  pointer-events: none;
  background:
    radial-gradient(540px 300px at 14% 16%, var(--hero-glow-a), transparent 72%),
    radial-gradient(460px 260px at 84% 20%, var(--hero-glow-b), transparent 72%),
    radial-gradient(360px 220px at 54% 88%, var(--hero-glow-c), transparent 72%);
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: 34px;
  align-items: center;
}

.hero-grid-compact {
  align-items: start;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  margin: 18px 0 16px;
  color: var(--text-strong);
  font-size: clamp(3.05rem, 7.2vw, 5.85rem);
  line-height: 0.94;
  letter-spacing: -0.072em;
  max-width: 10ch;
}

.hero-copy h1 span {
  color: var(--accent);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-points {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted-strong);
}

.hero-points li {
  position: relative;
  padding-left: 28px;
}

.hero-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.92), rgba(var(--accent-rgb), 0.56));
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), 0.08);
}

.hero-home .hero-media {
  position: relative;
  min-height: 600px;
  display: grid;
  align-items: center;
  padding: 32px;
  border-radius: 38px;
  background:
    radial-gradient(220px 160px at 76% 22%, rgba(var(--accent-rgb), 0.14), transparent 72%),
    radial-gradient(180px 140px at 18% 80%, rgba(123, 92, 255, 0.11), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.18));
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .hero-home .hero-media {
    background:
      radial-gradient(220px 160px at 76% 22%, rgba(var(--accent-rgb), 0.16), transparent 72%),
      radial-gradient(180px 140px at 18% 80%, rgba(123, 92, 255, 0.12), transparent 72%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  }
}

.hero-spotlight {
  position: absolute;
  inset: 18px 18px auto auto;
  width: min(100%, 296px);
  padding: 22px;
  border-radius: 28px;
  z-index: 3;
}

.spotlight-copy {
  display: grid;
  gap: 8px;
}

.spotlight-copy strong,
.media-stage-copy strong,
.tips-card h3,
.hero-side-card strong,
.content-panel h2,
.feature-card h3,
.step-card h3,
.command-card h3,
.showcase-card h3,
.cta-banner h2,
.footer-column h3,
.side-card h1,
.side-card h2,
.toc-head h2,
.legal-title,
.legal-body h2,
.legal-body h3,
.legal-body h4 {
  color: var(--text-strong);
}

.spotlight-copy strong {
  font-size: 1.1rem;
}

.spotlight-copy span:last-child,
.media-stage-copy span:last-child,
.hero-side-card span:last-child,
.tips-card p,
.content-panel p,
.feature-card p,
.step-card p,
.command-card p,
.showcase-card p,
.cta-banner p,
.footer-copy,
.footer-note,
.footer-column p,
.sidebar-copy,
.compare-note,
.legal-body p,
.legal-body li,
.meta-row span,
.legal-meta-label,
.legal-toc-hint {
  color: var(--muted);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: 0.58;
  pointer-events: none;
}

.hero-orb-a {
  width: 200px;
  height: 200px;
  right: 6%;
  top: 8%;
  background: rgba(var(--accent-rgb), 0.22);
}

.hero-orb-b {
  width: 170px;
  height: 170px;
  left: 2%;
  bottom: 10%;
  background: rgba(123, 92, 255, 0.16);
}

.mockup-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 20px;
  z-index: 2;
}

.mockup-stage-hero {
  min-height: 520px;
}

.phone-mockup {
  position: relative;
  padding: 0;
  border-radius: 30px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.phone-screen {
  position: relative;
  height: auto;
  overflow: hidden;
  border-radius: 30px;
  border: 0;
  background: transparent;
  display: block;
  padding: 0;
}

.phone-screen > picture,
.phone-screen > img {
  width: 100%;
  display: block;
}

.phone-screen > picture > img,
.phone-screen > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 28px;
  border: 6px solid rgba(14, 22, 39, 0.18);
  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.36) inset;
  background: #ffffff;
  display: block;
}

@media (prefers-color-scheme: dark) {
  .phone-screen > picture > img,
  .phone-screen > img {
    border-color: rgba(255, 255, 255, 0.20);
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    background: rgba(255, 255, 255, 0.04);
  }

  .phone-screen {
    background:
      linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(var(--accent-rgb), 0.02) 34%, transparent 100%),
      linear-gradient(180deg, rgba(10, 18, 34, 0.90), rgba(16, 24, 39, 0.82));
  }
}

.screen-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 24px;
  text-align: center;
  border-radius: 28px;
  border: 1px dashed rgba(var(--accent-rgb), 0.20);
  background:
    radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.10), transparent 30%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.38));
}

@media (prefers-color-scheme: dark) {
  .screen-placeholder {
    background:
      radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.12), transparent 30%),
      linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  }
}

.screen-kicker {
  color: var(--muted);
  font-size: 0.84rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.screen-placeholder strong {
  color: var(--text-strong);
  font-size: 1.3rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.screen-placeholder span:last-child {
  color: var(--muted);
  max-width: 18ch;
}

.mockup-left {
  transform: translateY(32px) rotate(-5deg);
}

.mockup-right {
  transform: translateY(-8px) rotate(6deg);
}

.floating-note {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  z-index: 3;
}

.note-top {
  top: 44px;
  left: 24px;
}

.note-bottom {
  right: 22px;
  bottom: 34px;
}

.feature-grid,
.steps-grid,
.command-grid,
.widget-grid {
  display: grid;
  column-gap: 18px;
  row-gap: 8px;
}

.feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feature-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.steps-grid,
.command-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.widget-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-card,
.step-card,
.command-card,
.showcase-card,
.content-panel,
.media-stage,
.hero-side-card,
.tips-card,
.cta-banner,
.side-card,
.legal-document,
.footer-grid,
.compare-wrap {
  border-radius: 30px;
}

.feature-card,
.step-card,
.command-card,
.showcase-card,
.content-panel,
.media-stage,
.hero-side-card,
.tips-card,
.cta-banner,
.side-card,
.footer-grid {
  padding: 24px;
}

.feature-card,
.step-card,
.command-card,
.showcase-card,
.content-panel,
.media-stage,
.hero-side-card,
.tips-card,
.cta-banner,
.side-card,
.compare-wrap,
.legal-document,
.footer-grid {
  position: relative;
  overflow: hidden;
}

.feature-card::before,
.step-card::before,
.command-card::before,
.showcase-card::before,
.content-panel::before,
.media-stage::before,
.hero-side-card::before,
.tips-card::before,
.cta-banner::before,
.side-card::before,
.compare-wrap::before,
.legal-document::before,
.footer-grid::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(
      var(--card-highlight-w) var(--card-highlight-h)
      at var(--card-highlight-x) var(--card-highlight-y),
      rgba(255, 255, 255, var(--card-highlight-core)) 0%,
      rgba(255, 255, 255, var(--card-highlight-soft)) 34%,
      transparent 76%
    ),
    radial-gradient(
      170px 96px at 0% 18%,
      rgba(255, 255, 255, var(--card-edge-left)) 0%,
      transparent 72%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, var(--card-edge-top)) 0%,
      rgba(255, 255, 255, 0.03) 18%,
      transparent 36%,
      transparent 74%,
      rgba(255, 255, 255, 0.02) 100%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, var(--card-sheen)) 0%,
      transparent 44%,
      rgba(255, 255, 255, 0.02) 100%
    );
  z-index: 0;
}

.feature-card,
.step-card,
.command-card,
.showcase-card,
.content-panel,
.media-stage,
.hero-side-card,
.tips-card,
.cta-banner,
.compare-wrap {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    var(--card-depth-shadow);
}

.feature-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    var(--card-depth-shadow-hover);
}

.feature-card > *,
.step-card > *,
.command-card > *,
.showcase-card > *,
.content-panel > *,
.media-stage > *,
.hero-side-card > *,
.tips-card > *,
.cta-banner > *,
.side-card > *,
.compare-wrap > *,
.legal-document > *,
.footer-grid > * {
  position: relative;
  z-index: 1;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 252px;
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.feature-card:hover {
  text-decoration: none;
  transform: translateY(-4px) scale(1.012);
  border-color: rgba(var(--accent-rgb), 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 28px 64px rgba(15, 23, 42, 0.16);
}

@media (prefers-color-scheme: dark) {
  .feature-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.02),
      0 30px 70px rgba(0, 0, 0, 0.30);
  }
}

.feature-icon,
.step-number {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  font-size: 1.1rem;
  font-weight: 700;
}

.step-number {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-weight: 800;
}

.feature-label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.feature-card h3,
.step-card h3,
.command-card h3,
.showcase-card h3 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.card-arrow {
  margin-top: auto;
  color: var(--accent);
  font-size: 1.1rem;
}

.split-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 8px;
  align-items: stretch;
}

.content-panel h2 {
  margin: 16px 0 12px;
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  line-height: 1.07;
  letter-spacing: -0.045em;
}

.media-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.12), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(123, 92, 255, 0.10), transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36));
}

@media (prefers-color-scheme: dark) {
  .media-stage {
    background:
      radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.14), transparent 30%),
      radial-gradient(circle at 82% 72%, rgba(123, 92, 255, 0.12), transparent 26%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  }
}

.media-stage::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px dashed rgba(var(--accent-rgb), 0.16);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent);
}

.media-stage-copy {
  max-width: 360px;
  display: grid;
  gap: 8px;
  text-align: center;
}

.media-stage-copy strong {
  font-size: 1.5rem;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

.compare-wrap {
  padding: 0;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
}

.compare-table th,
.compare-table td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  vertical-align: middle;
}

.compare-table thead th {
  background: rgba(var(--accent-rgb), 0.05);
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 700;
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
}

.compare-table td:first-child {
  width: 36%;
  color: var(--text);
  font-weight: 600;
}

.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-status {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
}

.compare-status.is-yes {
  color: #0f8a4b;
  background: rgba(16, 185, 129, 0.14);
  border: 1px solid rgba(16, 185, 129, 0.24);
}

.compare-status.is-no {
  color: #c2410c;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.18);
}

.compare-inline-text {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 700;
}

.compare-cell-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.compare-muted {
  color: var(--muted);
  font-weight: 600;
}

.compare-note {
  margin: 16px 0 0;
  font-size: 0.95rem;
}

.cta-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cta-banner h2 {
  margin: 14px 0 10px;
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.command-card ul,
.tips-list,
.phrase-list {
  margin: 16px 0 0;
  padding-left: 1.2rem;
}

.phrase-list li + li,
.tips-list li + li {
  margin-top: 0.5rem;
}

.showcase-media {
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 25px;
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  background:
    radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.10), transparent 26%),
    linear-gradient(160deg, rgba(123, 92, 255, 0.05), rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.26);
  color: var(--muted);
  text-align: center;
  padding: 14px;
}

.showcase-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 25px;
  border: 6px solid rgba(12, 20, 37, 0.18);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.35) inset;
  background: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .showcase-media {
    background:
      radial-gradient(circle at 20% 18%, rgba(var(--accent-rgb), 0.12), transparent 24%),
      linear-gradient(160deg, rgba(123, 92, 255, 0.08), rgba(255, 255, 255, 0.02)),
      rgba(255, 255, 255, 0.03);
  }

  .showcase-media img {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    background: rgba(255, 255, 255, 0.04);
  }
}

.hero-side-card {
  display: grid;
  gap: 10px;
  align-self: center;
  max-width: 420px;
  justify-self: end;
}

.hero-side-card strong {
  font-size: 1.28rem;
}

.site-footer {
  padding: 22px 0 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, minmax(0, 0.8fr));
  gap: 16px;
  background: linear-gradient(180deg, var(--surface-pop), var(--surface-solid));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 22px 54px rgba(15, 23, 42, 0.12);
}

.footer-brand-block,
.footer-column {
  display: grid;
  align-content: start;
  gap: 10px;
}

.footer-brand {
  width: fit-content;
}

.footer-column a {
  color: var(--text);
  text-decoration: none;
}

.footer-column a:hover {
  color: var(--accent);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 2px 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.legal-shell {
  padding-top: 30px;
}

.legal-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 16px;
}

.side-card {
  padding: 22px;
}

.side-card h1,
.side-card h2,
.toc-head h2 {
  margin: 12px 0 0;
  font-size: 1.45rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.96rem;
}

.meta-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.meta-row strong {
  color: var(--text-strong);
  text-align: right;
}

.toc-card code {
  font-size: 0.82em;
}

.legal-toc {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.legal-toc a {
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}

.legal-toc a.level-3 {
  padding-left: 24px;
  font-size: 0.94rem;
}

.legal-toc a:hover,
.legal-toc a.active {
  background: rgba(var(--accent-rgb), 0.09);
  color: var(--text);
}

.legal-toc-hint {
  margin: 14px 0 0;
  font-size: 0.92rem;
}

.legal-document {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background: linear-gradient(180deg, var(--surface-pop), var(--surface-solid));
}

.legal-header {
  display: grid;
  gap: 18px;
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}

.legal-title {
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.legal-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.legal-meta-card {
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(var(--accent-rgb), 0.06);
  border: 1px solid rgba(var(--accent-rgb), 0.10);
}

.legal-meta-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.legal-meta-card strong,
.legal-body strong {
  color: var(--text-strong);
}

.legal-note {
  padding: 18px 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.08), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(var(--accent-rgb), 0.12);
  color: var(--text);
}

@media (prefers-color-scheme: dark) {
  .legal-note {
    background:
      radial-gradient(circle at 14% 16%, rgba(var(--accent-rgb), 0.10), transparent 34%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  }
}

.legal-body {
  font-size: 1.03rem;
}

.legal-body p {
  margin: 0 0 1rem;
}

.legal-body ul,
.legal-body ol {
  margin: 0 0 1.2rem;
  padding-left: 1.32rem;
}

.legal-body li + li {
  margin-top: 0.45rem;
}

.legal-body section {
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}

.legal-body section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal-body h2,
.legal-body h3,
.legal-body h4 {
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.legal-body h2 {
  margin: 0 0 1rem;
  font-size: 1.62rem;
  scroll-margin-top: 110px;
}

.legal-body h3 {
  margin: 1.5rem 0 0.8rem;
  font-size: 1.2rem;
  scroll-margin-top: 110px;
}

.legal-body h4 {
  margin: 1.2rem 0 0.7rem;
  font-size: 1.04rem;
  scroll-margin-top: 110px;
}

.legal-body hr {
  height: 1px;
  margin: 2rem 0;
  border: 0;
  background: var(--line-soft);
}

.legal-placeholder {
  padding: 22px;
  border-radius: 24px;
  border: 1px dashed rgba(var(--accent-rgb), 0.24);
  background: rgba(var(--accent-rgb), 0.05);
}

.legal-placeholder-copy {
  margin-bottom: 0.9rem;
  color: var(--muted-strong);
}

.legal-toc-hint {
  display: none;
}

@media (max-width: 1180px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 980px) {
  .top-nav {
    display: flex;
  }

  .menu-btn {
    display: none;
  }
}

@media (max-width: 979px) {
  .brand-copy span {
    display: none;
  }
}

@media (max-width: 960px) {
    .page-shell {
      padding-top: 16px;
    }

    .section {
      padding: 42px 0;
    }

    .section-tight {
      padding-top: 22px;
    }

  .hero-grid,
  .split-layout,
  .legal-layout,
  .steps-grid,
  .command-grid,
  .widget-grid {
    grid-template-columns: 1fr;
  }

  .hero-home .hero-media,
  .hero-media {
    min-height: auto;
  }

  .mockup-stage-hero,
  .mockup-stage {
    min-height: auto;
  }

  .hero-spotlight {
    position: relative;
    inset: auto;
    width: 100%;
    margin-bottom: 18px;
  }

  .mockup-left,
  .mockup-right {
    transform: none;
  }

  .floating-note {
    display: none;
  }

  .legal-sidebar {
    position: static;
  }

  .legal-meta-grid {
    grid-template-columns: 1fr;
  }

  .cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .compare-wrap {
    padding: 8px 0;
  }

  .compare-table,
  .compare-table thead,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tr {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--line-soft);
  }

  .compare-table tbody tr:last-child {
    border-bottom: 0;
  }

  .compare-table td {
    border-bottom: 0;
    padding: 8px 0;
    text-align: left;
  }

  .compare-table td:first-child {
    width: 100%;
    padding-bottom: 10px;
    color: var(--text-strong);
  }

  .compare-table td:not(:first-child) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .compare-table td:not(:first-child)::before {
    content: attr(data-plan);
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
  }
}

@media (max-width: 720px) {
  .hero {
    padding-top: 24px;
  }

  .hero-copy h1 {
    font-size: clamp(2.4rem, 12vw, 3.55rem);
    max-width: 100%;
  }

  .hero-actions,
  .cta-actions {
    width: 100%;
  }

  .hero-actions .btn,
  .cta-actions .btn {
    flex: 1 1 100%;
  }

  .feature-grid,
  .feature-grid-two {
    grid-template-columns: 1fr;
  }

  .container,
  .legal-shell .container {
    width: min(100%, calc(100% - 24px));
  }

  .header-bar,
  .feature-card,
  .content-panel,
  .media-stage,
  .hero-side-card,
  .tips-card,
  .cta-banner,
  .side-card,
  .step-card,
  .command-card,
  .showcase-card,
  .compare-wrap,
  .legal-document,
  .footer-grid {
    border-radius: 24px;
  }

  .feature-card,
  .step-card,
  .command-card,
  .showcase-card,
  .content-panel,
  .media-stage,
  .hero-side-card,
  .tips-card,
  .cta-banner,
  .side-card,
  .footer-grid {
    padding: 22px;
  }

  .phone-mockup {
    max-width: 320px;
    margin: 0 auto;
  }
}

@media (max-width: 960px) {
  .legal-shell .container {
    width: min(100%, calc(100% - 24px));
  }

  .legal-layout,
  .legal-layout > *,
  .legal-sidebar,
  .legal-document,
  .legal-meta-grid,
  .legal-meta-card,
  .legal-note,
  .meta-row,
  .meta-row a,
  .meta-row strong,
  .legal-body,
  .legal-body section {
    min-width: 0;
  }

  .legal-document,
  .legal-note,
  .legal-body p,
  .legal-body li,
  .legal-body h2,
  .legal-body h3,
  .meta-row strong,
  .meta-row a,
  .legal-meta-card strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 960px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
  }

  .hero {
    padding-top: calc(22px + var(--mobile-header-offset));
  }

  .page-shell {
    padding-top: calc(12px + var(--mobile-header-offset));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   FEINJUSTIERUNG:
   - Header im Widget-/Liquid-Glass-Stil mit hellerem Außenrand
   - Tabs gedimmter, aktiver Tab klarer sichtbar
   - Hintergrund auf Start/Hilfe/Siri/Widgets farbiger / malerischer
   - Karten etwas weniger weiss / weniger hart angestrahlt
   Ganz unten in style.css anhängen
========================================================= */

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) {
  --header-shell-outline: rgba(255, 255, 255, 0.72);
  --header-shell-outline-soft: rgba(255, 255, 255, 0.26);
  --header-inner-glow: rgba(255, 255, 255, 0.12);

  --nav-pill-ring: rgba(255, 255, 255, 0.22);
  --nav-pill-fill-top: rgba(255, 255, 255, 0.16);
  --nav-pill-fill-bottom: rgba(255, 255, 255, 0.07);
  --nav-pill-highlight: rgba(255, 255, 255, 0.10);

  --nav-pill-active-ring: rgba(255, 255, 255, 0.40);
  --nav-pill-active-fill-top: rgba(var(--accent-rgb), 0.22);
  --nav-pill-active-fill-bottom: rgba(var(--accent-rgb), 0.10);
  --nav-pill-active-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.14);

  --menu-top: rgba(255, 255, 255, 0.97);
  --menu-bottom: rgba(245, 249, 255, 0.92);

  /* Karten etwas weniger weiss */
  --card-highlight-core: 0.18;
  --card-highlight-soft: 0.07;
  --card-edge-top: 0.11;
  --card-edge-left: 0.05;
  --card-sheen: 0.04;
}

@media (prefers-color-scheme: dark) {
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) {
    --header-shell-outline: rgba(255, 255, 255, 0.42);
    --header-shell-outline-soft: rgba(255, 255, 255, 0.16);
    --header-inner-glow: rgba(255, 255, 255, 0.08);

    --nav-pill-ring: rgba(255, 255, 255, 0.16);
    --nav-pill-fill-top: rgba(255, 255, 255, 0.08);
    --nav-pill-fill-bottom: rgba(255, 255, 255, 0.03);
    --nav-pill-highlight: rgba(255, 255, 255, 0.06);

    --nav-pill-active-ring: rgba(255, 255, 255, 0.26);
    --nav-pill-active-fill-top: rgba(var(--accent-rgb), 0.24);
    --nav-pill-active-fill-bottom: rgba(var(--accent-rgb), 0.12);
    --nav-pill-active-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.18);

    --menu-top: rgba(18, 31, 55, 0.97);
    --menu-bottom: rgba(10, 20, 38, 0.92);

    /* Karten etwas weniger weiss */
    --card-highlight-core: 0.11;
    --card-highlight-soft: 0.045;
    --card-edge-top: 0.07;
    --card-edge-left: 0.03;
    --card-sheen: 0.028;
  }
}

/* ---- Farbigerer, malerischer Hintergrund nur auf den nicht-rechtlichen Seiten ---- */

html[data-page="index.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.24);
  --page-cloud-b: rgba(123, 92, 255, 0.16);
  --page-cloud-c: rgba(56, 189, 248, 0.12);
  --hero-glow-a: rgba(var(--accent-rgb), 0.24);
  --hero-glow-b: rgba(123, 92, 255, 0.18);
  --hero-glow-c: rgba(56, 189, 248, 0.10);
}

html[data-page="support.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.18);
  --page-cloud-b: rgba(96, 165, 250, 0.12);
  --page-cloud-c: rgba(168, 85, 247, 0.08);
  --hero-glow-a: rgba(var(--accent-rgb), 0.18);
  --hero-glow-b: rgba(96, 165, 250, 0.14);
  --hero-glow-c: rgba(168, 85, 247, 0.08);
}

html[data-page="siri.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.18);
  --page-cloud-b: rgba(139, 92, 246, 0.14);
  --page-cloud-c: rgba(96, 165, 250, 0.08);
  --hero-glow-a: rgba(var(--accent-rgb), 0.16);
  --hero-glow-b: rgba(139, 92, 246, 0.16);
  --hero-glow-c: rgba(96, 165, 250, 0.08);
}

html[data-page="widgets.html"] {
  --page-cloud-a: rgba(var(--accent-rgb), 0.20);
  --page-cloud-b: rgba(14, 165, 233, 0.14);
  --page-cloud-c: rgba(99, 102, 241, 0.08);
  --hero-glow-a: rgba(var(--accent-rgb), 0.20);
  --hero-glow-b: rgba(14, 165, 233, 0.14);
  --hero-glow-c: rgba(99, 102, 241, 0.08);
}

@media (prefers-color-scheme: dark) {
  html[data-page="index.html"] {
    --page-cloud-a: rgba(var(--accent-rgb), 0.30);
    --page-cloud-b: rgba(123, 92, 255, 0.20);
    --page-cloud-c: rgba(56, 189, 248, 0.12);
  }

  html[data-page="support.html"] {
    --page-cloud-a: rgba(var(--accent-rgb), 0.24);
    --page-cloud-b: rgba(96, 165, 250, 0.16);
    --page-cloud-c: rgba(168, 85, 247, 0.10);
  }

  html[data-page="siri.html"] {
    --page-cloud-a: rgba(var(--accent-rgb), 0.24);
    --page-cloud-b: rgba(139, 92, 246, 0.18);
    --page-cloud-c: rgba(96, 165, 250, 0.10);
  }

  html[data-page="widgets.html"] {
    --page-cloud-a: rgba(var(--accent-rgb), 0.26);
    --page-cloud-b: rgba(14, 165, 233, 0.18);
    --page-cloud-c: rgba(99, 102, 241, 0.10);
  }
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body {
  background:
    radial-gradient(58rem 34rem at 8% -6%, var(--page-cloud-a), transparent 60%),
    radial-gradient(42rem 28rem at 92% 8%, var(--page-cloud-b), transparent 58%),
    radial-gradient(34rem 24rem at 50% 82%, var(--page-cloud-c), transparent 58%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 56%, var(--bg) 100%);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body::before {
  width: 440px;
  height: 440px;
  top: -140px;
  left: -120px;
  opacity: 0.78;
  background: var(--page-cloud-a);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body::after {
  width: 420px;
  height: 420px;
  right: -130px;
  bottom: -130px;
  opacity: 0.76;
  background: var(--page-cloud-b);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .hero::before {
  background:
    radial-gradient(40rem 22rem at 12% 14%, var(--hero-glow-a), transparent 70%),
    radial-gradient(28rem 18rem at 84% 20%, var(--hero-glow-b), transparent 72%),
    radial-gradient(24rem 15rem at 52% 88%, var(--hero-glow-c), transparent 74%);
}

/* ---- Header wie ein Apple-Widget: heller Rand, innen weich auslaufend ---- */

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .header-bar::before {
  border-color: var(--header-shell-outline-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px var(--header-shell-outline),
    var(--shadow-float, var(--shadow-soft));
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .header-bar::after {
  inset: 1px;
  border-radius: calc(var(--radius-xl) - 2px);
  background:
    radial-gradient(180px 60px at 16% 0%, rgba(255, 255, 255, 0.22), transparent 74%),
    radial-gradient(150px 54px at 0% 20%, rgba(255, 255, 255, 0.10), transparent 76%),
    linear-gradient(180deg, var(--header-inner-glow), transparent 26%, transparent 80%, rgba(255, 255, 255, 0.03) 100%);
  opacity: 0.78;
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .site-header.is-scrolled .header-bar::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px var(--header-shell-outline),
    var(--shadow-soft);
}

/* ---- Tabs / Header-Buttons: gedimmter, aktiver Tab deutlicher ---- */

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-dropdown summary,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .menu-btn {
  border-color: var(--nav-pill-ring);
  background: linear-gradient(180deg, var(--nav-pill-fill-top), var(--nav-pill-fill-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link::before,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-dropdown summary::before,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .menu-btn::before {
  background:
    radial-gradient(96px 24px at 50% -6%, var(--nav-pill-highlight), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 46%);
  opacity: 0.72;
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link:hover,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-dropdown summary:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.10));
  border-color: rgba(var(--accent-rgb), 0.18);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link.active,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link[aria-current="page"],
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-dropdown.active-parent > summary {
  background: linear-gradient(180deg, var(--nav-pill-active-fill-top), var(--nav-pill-active-fill-bottom));
  border-color: var(--nav-pill-active-ring);
  color: var(--text-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    var(--nav-pill-active-shadow);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link.active::before,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-link[aria-current="page"]::before,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-dropdown.active-parent > summary::before {
  background:
    radial-gradient(84px 22px at 50% 0%, rgba(255, 255, 255, 0.14), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%);
  opacity: 0.62;
}

/* ---- Dropdown oben etwas dichter / weniger durchsichtig ---- */

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-menu {
  background: linear-gradient(180deg, var(--menu-top), var(--menu-bottom));
  border-color: var(--border-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    var(--shadow-soft);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .nav-menu::before {
  background:
    radial-gradient(140px 44px at 14% 0%, rgba(255, 255, 255, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 44%);
  opacity: 0.78;
}

/* =========================================================
   WATERCOLOR-HINTERGRUND + dünnerer Header-Rand
   ganz unten nach dem aktuellen Feinjustierungs-Block
========================================================= */

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) {
  --header-shell-outline: rgba(255, 255, 255, 0.56);
  --header-shell-outline-soft: rgba(255, 255, 255, 0.18);
}

@media (prefers-color-scheme: dark) {
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) {
    --bg: #0f1b34;
    --bg-elev: #182a4b;

    --header-shell-outline: rgba(255, 255, 255, 0.28);
    --header-shell-outline-soft: rgba(255, 255, 255, 0.10);
  }
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body {
  background:
    radial-gradient(78rem 42rem at -12% -10%, var(--page-cloud-a), transparent 58%),
    radial-gradient(54rem 32rem at 112% 2%, var(--page-cloud-b), transparent 56%),
    radial-gradient(42rem 26rem at 24% 42%, var(--page-cloud-a), transparent 64%),
    radial-gradient(46rem 26rem at 78% 66%, var(--page-cloud-c), transparent 60%),
    radial-gradient(38rem 22rem at 48% 98%, var(--page-cloud-b), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 56%, var(--bg) 100%);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body::before {
  width: 500px;
  height: 500px;
  top: -170px;
  left: -150px;
  opacity: 0.76;
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body::after {
  width: 460px;
  height: 460px;
  right: -150px;
  bottom: -150px;
  opacity: 0.74;
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .hero::before {
  background:
    radial-gradient(46rem 26rem at 12% 14%, var(--hero-glow-a), transparent 72%),
    radial-gradient(32rem 20rem at 84% 18%, var(--hero-glow-b), transparent 72%),
    radial-gradient(28rem 18rem at 52% 88%, var(--hero-glow-c), transparent 74%);
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .header-bar::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 0.75px var(--header-shell-outline),
    var(--shadow-float, var(--shadow-soft));
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .site-header.is-scrolled .header-bar::before {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 0.75px var(--header-shell-outline),
    var(--shadow-soft);
}

/* =========================================================
   Text-Refresh Begleitstyles
   ganz unten in style.css anhängen
========================================================= */

/* Feature-/Info-Karten heben sich beim Hover etwas stärker nach vorne */
.feature-card,
.step-card,
.command-card,
.showcase-card {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease;
}

.feature-card:hover,
.step-card:hover,
.command-card:hover,
.showcase-card:hover {
  transform: translateY(-4px) scale(1.012);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 28px 64px rgba(15, 23, 42, 0.16);
}

@media (prefers-color-scheme: dark) {
  .feature-card:hover,
  .step-card:hover,
  .command-card:hover,
  .showcase-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.02),
      0 30px 70px rgba(0, 0, 0, 0.30);
  }
}

/* Weniger Luft, wenn die Icons in den Karten entfernt sind */
.feature-card,
.command-card {
  gap: 10px;
}

/* Untere Footer-Karte etwas kräftiger und klarer */
.footer-grid {
  background: linear-gradient(180deg, var(--surface-pop), var(--surface-solid));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 22px 54px rgba(15, 23, 42, 0.12);
}

.footer-grid::before {
  background:
    radial-gradient(180px 58px at 14% 0%, rgba(255, 255, 255, 0.18), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%);
  opacity: 0.72;
}

.footer-copy,
.footer-note {
  color: var(--muted-strong);
}

.footer-column a {
  color: var(--text);
}

/* =========================================================
   iPhone Header / Radius Cleanup
   ganz ans Ende von style.css
========================================================= */

:root {
  --header-shell-radius: 30px;
  --header-shell-inner-radius: 29px;

  --menu-btn-radius: 18px;
  --menu-btn-inner-radius: 17px;

  --drawer-close-radius: 14px;
  --drawer-close-inner-radius: 13px;

  --brand-mark-radius: 14px;
  --nav-menu-radius: 24px;
  --nav-menu-inner-radius: 23px;

  --drawer-radius: 30px;
  --drawer-inner-radius: 29px;
}

/* Header-Shell exakt ausrichten */
.header-bar {
  border-radius: var(--header-shell-radius);
}

.header-bar::before {
  border-radius: var(--header-shell-radius);
}

.header-bar::after {
  inset: 1px;
  border-radius: var(--header-shell-inner-radius);
}

/* Brand/Icon */
.brand-mark,
.brand-mark-image,
.brand-mark-image img {
  border-radius: var(--brand-mark-radius);
}

/* Pills oben */
.nav-link,
.nav-dropdown summary {
  border-radius: 999px;
}

.nav-link::before,
.nav-dropdown summary::before {
  inset: 1px;
  border-radius: 999px;
}

/* Hamburger */
.menu-btn {
  border-radius: var(--menu-btn-radius);
}

.menu-btn::before {
  inset: 1px;
  border-radius: var(--menu-btn-inner-radius);
}

/* Close-Button im Drawer */
.drawer-close {
  border-radius: var(--drawer-close-radius);
}

.drawer-close::before {
  inset: 1px;
  border-radius: var(--drawer-close-inner-radius);
}

/* Dropdown */
.nav-menu {
  border-radius: var(--nav-menu-radius);
}

.nav-menu::before {
  inset: 1px;
  border-radius: var(--nav-menu-inner-radius);
}

/* Drawer */
.drawer {
  border-radius: var(--drawer-radius);
}

.drawer::before {
  inset: 1px;
  border-radius: var(--drawer-inner-radius);
}

/* Mobile kompakter machen */
@media (max-width: 960px) {
  :root {
    --mobile-header-offset: 84px;

    --header-shell-radius: 26px;
    --header-shell-inner-radius: 25px;

    --menu-btn-radius: 16px;
    --menu-btn-inner-radius: 15px;

    --drawer-close-radius: 13px;
    --drawer-close-inner-radius: 12px;

    --brand-mark-radius: 12px;
  }

  .site-header {
    padding-top: max(4px, env(safe-area-inset-top, 0px));
  }

  .header-bar {
    padding: 10px 12px;
    min-height: 70px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .menu-btn {
    width: 46px;
    height: 46px;
  }

  .hero {
    padding-top: calc(14px + var(--mobile-header-offset));
  }

  .page-shell {
    padding-top: calc(8px + var(--mobile-header-offset));
  }
}

/* Ganz wichtig:
   auf sehr kleinen Screens NICHT mehr den Header pauschal mit den
   anderen Karten auf 24px zwingen – die Karten ja, der Header nein. */
@media (max-width: 720px) {
  .feature-card,
  .content-panel,
  .media-stage,
  .hero-side-card,
  .tips-card,
  .cta-banner,
  .side-card,
  .step-card,
  .command-card,
  .showcase-card,
  .compare-wrap,
  .legal-document,
  .footer-grid {
    border-radius: 24px;
  }
}

/* =========================================================
   FINAL CLEANUP: Orange-Akzent, Hover, Mobile
   ab hier bis Dateiende ersetzen
========================================================= */

:root {
  --accent-warm: #ff8c2f;
  --accent-warm-rgb: 255, 140, 47;
  --accent-warm-strong: #ff6a00;

  /* Orange ca. 15–20 % kräftiger */
  --page-cloud-warm: rgba(var(--accent-warm-rgb), 0.12);
  --page-cloud-warm-soft: rgba(var(--accent-warm-rgb), 0.07);

  /* Blau nur minimal kräftiger */
  --page-cloud-cool-soft: rgba(var(--accent-rgb), 0.055);

  --warm-ring: rgba(var(--accent-warm-rgb), 0.24);
  --warm-shadow: 0 28px 64px rgba(var(--accent-warm-rgb), 0.14);
  --warm-shadow-strong: 0 34px 78px rgba(var(--accent-warm-rgb), 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-warm: #ff9d57;
    --accent-warm-rgb: 255, 157, 87;
    --accent-warm-strong: #ff7a1a;

    /* Orange ca. 15–20 % kräftiger */
    --page-cloud-warm: rgba(var(--accent-warm-rgb), 0.14);
    --page-cloud-warm-soft: rgba(var(--accent-warm-rgb), 0.09);

    /* Blau nur minimal kräftiger */
    --page-cloud-cool-soft: rgba(var(--accent-rgb), 0.075);

    --warm-ring: rgba(var(--accent-warm-rgb), 0.28);
    --warm-shadow: 0 30px 70px rgba(var(--accent-warm-rgb), 0.16);
    --warm-shadow-strong: 0 36px 82px rgba(var(--accent-warm-rgb), 0.20);
  }
}

/* Mehr orangefarbene Wolken im Hintergrund – aber weiter dezent */
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) body {
  background:
    radial-gradient(38rem 22rem at 84% 30%, var(--page-cloud-warm), transparent 58%),
    radial-gradient(22rem 14rem at 14% 18%, var(--page-cloud-warm-soft), transparent 60%),
    radial-gradient(24rem 16rem at 18% 74%, var(--page-cloud-warm-soft), transparent 62%),
    radial-gradient(20rem 14rem at 68% 78%, var(--page-cloud-warm-soft), transparent 60%),
    radial-gradient(18rem 12rem at 92% 66%, var(--page-cloud-warm-soft), transparent 58%),

    radial-gradient(82rem 44rem at -12% -10%, var(--page-cloud-a), transparent 58%),
    radial-gradient(56rem 34rem at 112% 2%, var(--page-cloud-b), transparent 56%),
    radial-gradient(44rem 28rem at 24% 42%, var(--page-cloud-a), transparent 64%),
    radial-gradient(48rem 28rem at 78% 66%, var(--page-cloud-c), transparent 60%),
    radial-gradient(40rem 24rem at 48% 98%, var(--page-cloud-b), transparent 60%),
    radial-gradient(26rem 18rem at 52% 54%, var(--page-cloud-cool-soft), transparent 62%),

    linear-gradient(180deg, var(--bg) 0%, var(--bg-elev) 56%, var(--bg) 100%);
}

/* Orange kleine Überschriften / Pills */
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .section-heading .eyebrow,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .eyebrow-warm {
  border-color: rgba(var(--accent-warm-rgb), 0.22);
  background: rgba(var(--accent-warm-rgb), 0.10);
  color: var(--text-strong);
}

/* Orange Utility-Klassen */
.btn-warm {
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-warm-rgb), 0.96),
    rgba(var(--accent-warm-rgb), 0.82)
  );
  box-shadow: 0 14px 28px rgba(var(--accent-warm-rgb), 0.24);
}

.btn-warm:hover {
  text-decoration: none;
  box-shadow: 0 18px 34px rgba(var(--accent-warm-rgb), 0.28);
}

.chip-warm {
  background: rgba(var(--accent-warm-rgb), 0.10);
  border-color: rgba(var(--accent-warm-rgb), 0.18);
  color: var(--text-strong);
}

/* Einzelne große CTA-Buttons unten orange */
.cta-banner .btn-primary {
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-warm-rgb), 0.96),
    rgba(var(--accent-warm-rgb), 0.82)
  );
  box-shadow: 0 14px 28px rgba(var(--accent-warm-rgb), 0.24);
}

.cta-banner .btn-primary:hover {
  text-decoration: none;
  box-shadow: 0 18px 34px rgba(var(--accent-warm-rgb), 0.28);
}

/* Kleine orange Labels / Pfeile überall auf den Produktseiten */
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .feature-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .step-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .command-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .showcase-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .hero-side-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .tips-card .feature-label,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .feature-card .card-arrow {
  color: var(--accent-warm);
}

/* Hover jetzt überall warm/orange – nicht mehr nur punktuell */
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .feature-card,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .step-card,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .command-card,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .showcase-card {
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease;
}

html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .feature-card:hover,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .step-card:hover,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .command-card:hover,
html:is(
  [data-page="index.html"],
  [data-page="support.html"],
  [data-page="siri.html"],
  [data-page="widgets.html"]
) .showcase-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--warm-ring);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 1px rgba(var(--accent-warm-rgb), 0.08),
    var(--warm-shadow);
}

@media (prefers-color-scheme: dark) {
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) .feature-card:hover,
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) .step-card:hover,
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) .command-card:hover,
  html:is(
    [data-page="index.html"],
    [data-page="support.html"],
    [data-page="siri.html"],
    [data-page="widgets.html"]
  ) .showcase-card:hover {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -1px 0 rgba(255, 255, 255, 0.02),
      0 0 0 1px rgba(var(--accent-warm-rgb), 0.10),
      var(--warm-shadow-strong);
  }
}

/* Widgets etwas luftiger */
html[data-page="widgets.html"] .widget-grid {
  column-gap: 24px;
  row-gap: 20px;
}

html[data-page="widgets.html"] .showcase-card .showcase-media {
  margin-bottom: 16px;
}

/* Mobile kompakter */
@media (max-width: 960px) {
  :root {
    --mobile-header-offset: 82px;
  }

  .page-shell {
    padding: 10px 0 40px;
  }

  .section {
    padding: 34px 0;
  }

  .section-tight {
    padding-top: 14px;
  }

  .hero {
    padding: calc(16px + var(--mobile-header-offset)) 0 18px;
  }

  .hero-grid,
  .hero-grid-compact {
    gap: 18px;
  }

  .hero-actions {
    margin-top: 18px;
  }

  .hero-points {
    margin-top: 18px;
    gap: 8px;
  }

  .hero-home .hero-media,
  .mockup-stage-hero {
    display: none;
  }

  .feature-grid,
  .steps-grid,
  .command-grid,
  .widget-grid,
  .split-layout {
    row-gap: 10px;
  }

  .footer-grid {
    gap: 12px;
  }

  .menu-lines span {
    background: var(--accent-warm);
  }

  .drawer-title {
    color: var(--accent-warm);
  }

  .menu-btn {
    border-color: rgba(var(--accent-warm-rgb), 0.20);
  }

  .drawer-nav a[aria-current="page"] {
    color: var(--accent-warm);
  }
}

/* =========================================================
   Mobile: klarere Abschnittstrennung + etwas ruhigere Typo
========================================================= */

@media (max-width: 960px) {
  .hero-copy h1 {
    font-size: clamp(2.15rem, 9vw, 3.15rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
  }

  .section-heading {
    margin-bottom: 18px;
  }

  .section-heading .eyebrow {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
  }

  .section-heading h2 {
    font-size: clamp(1.85rem, 7.6vw, 2.65rem);
    line-height: 1.03;
    letter-spacing: -0.045em;
  }

  .lead,
  .section-heading p,
  .feature-card p,
  .step-card p,
  .command-card p,
  .showcase-card p,
  .tips-card p,
  .content-panel p,
  .hero-side-card span:last-child {
    font-size: 0.98rem;
    line-height: 1.68;
  }

  .feature-label {
    font-size: 0.80rem;
    letter-spacing: 0.09em;
  }
}

/* =========================================================
   Compact Navigation nur für iPhone / iPad
   Mac bleibt Desktop
========================================================= */

.mobile-detail-block {
  display: block !important;
}

.mobile-only-block,
.mobile-only-inline,
.mobile-only-card {
  display: none !important;
}

.desktop-only-inline {
  display: inline-flex !important;
}

html.compact-nav .mobile-detail-block {
  display: none !important;
}

html.compact-nav .mobile-only-block {
  display: block !important;
}

html.compact-nav .mobile-only-inline {
  display: inline-flex !important;
}

html.compact-nav .mobile-only-card {
  display: flex !important;
}

html.compact-nav .desktop-only-inline {
  display: none !important;
}

html.compact-nav .overview-link-grid .feature-card p,
html.compact-nav .quicklink-grid .feature-card p {
  display: none;
}

html.compact-nav .overview-link-grid .feature-card,
html.compact-nav .quicklink-grid .feature-card {
  min-height: 0;
  gap: 8px;
  padding: 20px 20px 18px;
}

html.compact-nav .overview-link-grid .feature-card h3,
html.compact-nav .quicklink-grid .feature-card h3 {
  font-size: 1.18rem;
  line-height: 1.14;
}

html.compact-nav .mobile-subpage-grid {
  row-gap: 10px;
}

/* =========================================================
   Card Corner Fill Fix
   - gleicht äußeren Radius und inneren Fill sauber an
   - schließt den kleinen dunklen Keil in den Rundungen
   ganz ans Ende von style.css
========================================================= */

:root {
  --card-shell-radius: 30px;
  --card-shell-inner-radius: 29px;

  --showcase-media-radius: 25px;
  --showcase-media-inner-radius: 24px;
}

.feature-card,
.step-card,
.command-card,
.showcase-card,
.content-panel,
.media-stage,
.hero-side-card,
.tips-card,
.cta-banner,
.side-card,
.compare-wrap,
.legal-document,
.footer-grid {
  border-radius: var(--card-shell-radius);
}

/* Wichtig: NICHT mehr border-radius: inherit bei inset: 1px */
.feature-card::before,
.step-card::before,
.command-card::before,
.showcase-card::before,
.content-panel::before,
.media-stage::before,
.hero-side-card::before,
.tips-card::before,
.cta-banner::before,
.side-card::before,
.compare-wrap::before,
.legal-document::before,
.footer-grid::before {
  inset: 1px;
  border-radius: var(--card-shell-inner-radius);
}

/* Für die inneren Widget-/Bildflächen ebenfalls leicht enger */
.showcase-media {
  border-radius: var(--showcase-media-radius);
}

.showcase-media img {
  border-radius: var(--showcase-media-inner-radius);
}

@media (max-width: 720px) {
  :root {
    --card-shell-radius: 24px;
    --card-shell-inner-radius: 23px;

    --showcase-media-radius: 21px;
    --showcase-media-inner-radius: 20px;
  }
}