@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --bg-color-light: #ffffff;
  --bg-color-alt: #f5f5f7;
  --bg-color-dark: #000000;
  --bg-color-dark-alt: #1d1d1f;
  
  --text-dark: #1d1d1f;
  --text-dark-muted: #86868b;
  --text-light: #f5f5f7;
  --text-light-muted: #86868b;
  
  --blue: #0071e3;
  --blue-hover: #0077ed;
  
  --nav-bg: rgba(0, 0, 0, 0.8);
  --local-nav-bg: rgba(255, 255, 255, 0.72);
  --local-nav-border: #e8e8ed;
  
  --radius-bento: 24px;
  --shadow-bento: 0 4px 24px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0,0,0,0.02);
  --from-bento: #ffffff;
  --to-bento: #f5f5f7;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  color: var(--text-dark);
  background-color: var(--bg-color-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.47059;
  font-weight: 400;
  letter-spacing: -0.022em;
  touch-action: manipulation;
}

img {
  max-width: 100%;
  display: block;
  border-radius: 20px;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 768px) {
  img {
    border-radius: 6px;
  }
}

a {
  text-decoration: none;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
}

/* Typography Apple Style */
.hero-display {
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}

.hero-display span {
  display: block;
  color: var(--text-dark-muted);
}

.hero-lead {
  font-size: clamp(21px, 4vw, 28px);
  line-height: 1.14286;
  font-weight: 600;
  letter-spacing: .007em;
  margin-bottom: 30px;
  max-width: 800px;
}

.section-eyebrow {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.012em;
  color: var(--text-dark-muted);
  margin-bottom: 10px;
  display: block;
}

.section-title {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.0625;
  font-weight: 600;
  letter-spacing: -0.009em;
  margin-bottom: 20px;
}

/* Global Navigation */
#global-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 9999;
  display: flex;
  justify-content: center;
}

.global-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  padding: 0 22px;
  margin: 0 auto;
  position: relative;
}

.global-nav-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(245, 245, 247, 0.92);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.014em;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.global-nav-logo:hover { opacity: 0.8; }

.global-nav-logo img {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: block;
}

.global-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.main-nav-link {
  color: rgba(245, 245, 247, 0.76);
  font-size: 13px;
  letter-spacing: -0.01em;
  transition: color 0.18s;
  white-space: nowrap;
}

.main-nav-link:hover { color: #f5f5f7; }

.global-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.global-nav-avail {
  font-size: 12px;
  font-weight: 500;
  color: rgba(245, 245, 247, 0.52);
  letter-spacing: -0.01em;
}

/* Hamburger button */
.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
}

.hamburger-line {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(245, 245, 247, 0.88);
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.2s ease;
  transform-origin: center;
}

.nav-hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Mobile nav overlay */
.mobile-nav-overlay {
  position: fixed;
  inset: 52px 0 0 0;
  background: rgba(0, 0, 0, 0.96);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-content {
  padding: 36px 28px 80px;
}

.mobile-nav-link {
  display: block;
  color: rgba(245, 245, 247, 0.88);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.022em;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.15s;
  text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link:active { color: #fff; }

.mobile-nav-divider { height: 28px; }

body.nav-open { overflow: hidden; }

@media (max-width: 834px) {
  .global-nav-links,
  .global-nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

/* Legacy list nav (kept for compatibility) */
.global-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 20px;
  max-width: 1000px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.global-nav-list a {
  color: #f5f5f7;
  font-size: 12px;
  letter-spacing: -0.01em;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.global-nav-list a:hover {
  opacity: 1;
}

/* Local Navigation */
#local-nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--local-nav-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--local-nav-border);
  z-index: 9998;
  display: flex;
  justify-content: center;
}

.local-nav-content {
  display: flex;
  max-width: 980px;
  width: 100%;
  padding: 0 22px;
  justify-content: space-between;
  align-items: center;
}

.local-nav-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.011em;
}

.local-nav-menu {
  display: flex;
  gap: 24px;
  align-items: center;
}

.local-nav-menu a {
  font-size: 12px;
  color: var(--text-dark);
  opacity: 0.8;
}

.local-nav-menu a:hover {
  opacity: 1;
}

/* Buttons */
.button-pill {
  background: var(--blue);
  color: #fff !important;
  border-radius: 980px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  display: inline-block;
  opacity: 1 !important;
}

.button-pill:hover {
  background: var(--blue-hover);
}

.button-large {
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 980px;
  display: inline-block;
  background: var(--blue);
  color: #ffffff;
}

.button-large:hover {
  background: var(--blue-hover);
}

.text-link {
  color: var(--blue);
  font-size: 17px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
}
.text-link::after {
  content: '>';
  font-size: 14px;
  margin-left: 6px;
  font-weight: 600;
}
.text-link:hover {
  text-decoration: underline;
}

/* Layout Core */
.page-shell {
  padding-top: 52px; /* global nav height */
  overflow: hidden;
}

.home-page {
  padding-top: 108px; /* 52px global + 56px subnav */
}

/* Hero Section */
.hero-section {
  text-align: center;
  padding: 80px 20px 40px;
  background: var(--bg-color-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-media-container {
  max-width: 1100px;
  width: 100%;
  margin: 60px auto 0;
}

.hero-cta-group {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 10px;
}

/* Bentos / Highlights */
.highlights-section {
  background: var(--bg-color-alt);
  padding: 80px 20px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.bento-card {
  background: var(--bg-color-light);
  border-radius: var(--radius-bento);
  box-shadow: var(--shadow-bento);
  padding: 40px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  min-height: 400px;
  transition: transform 0.3s ease;
}

.bento-card:hover {
  transform: scale(1.01);
}

.bento-card h3 {
  font-size: 28px;
  line-height: 1.14286;
  font-weight: 600;
  margin-bottom: 12px;
  z-index: 2;
}

.bento-card p {
  font-size: 17px;
  line-height: 1.47059;
  color: var(--text-dark-muted);
  z-index: 2;
  max-width: 80%;
}

/* Story sections */
.story-section {
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}

.story-section.theme-dark {
  background-color: var(--bg-color-dark);
  color: var(--text-light);
}

.story-section.theme-dark .section-title {
  color: #fff;
}

.story-section.theme-dark p {
  color: var(--text-light-muted);
}

.story-container {
  max-width: 1200px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.story-container.reverse {
  grid-template-columns: 1fr 1fr;
}

.story-container.reverse .story-content {
  order: 2;
}
.story-container.reverse .story-media {
  order: 1;
}

.story-content {
  max-width: 480px;
}

.story-content p {
  font-size: 21px;
  line-height: 1.381;
  font-weight: 400;
  margin-bottom: 24px;
}

.story-media {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-bento);
  background: var(--bg-color-alt);
}

.use-case-story {
  margin-bottom: 40px;
  padding: 80px 20px;
}

.use-case-story .story-content {
  max-width: 520px;
}

.use-case-story .section-title {
  font-size: 40px;
  line-height: 1.1;
  margin-bottom: 24px;
}

.use-case-story .story-content p {
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-dark-muted);
  margin-bottom: 0;
}

.use-case-eyebrow {
  margin-bottom: 14px;
}

.use-case-media {
  padding: 0;
  background: transparent;
}

.use-case-visual {
  width: 100%;
  min-height: 420px;
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.use-case-visual svg {
  width: 100%;
  height: 100%;
  display: block;
}

.visual-private {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.96), rgba(255,255,255,0) 32%),
    radial-gradient(circle at 82% 16%, rgba(104,137,255,0.18), rgba(104,137,255,0) 28%),
    linear-gradient(135deg, #eef4ff 0%, #f7f8fb 48%, #ffffff 100%);
}

.visual-business {
  background:
    radial-gradient(circle at 18% 18%, rgba(49,104,255,0.24), rgba(49,104,255,0) 30%),
    radial-gradient(circle at 84% 16%, rgba(112,213,255,0.18), rgba(112,213,255,0) 26%),
    radial-gradient(circle at 76% 84%, rgba(59,198,164,0.18), rgba(59,198,164,0) 28%),
    linear-gradient(140deg, #0d1015 0%, #131926 42%, #1b2231 100%);
}

.visual-lawfirm {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 82% 18%, rgba(122,177,255,0.2), rgba(122,177,255,0) 26%),
    linear-gradient(135deg, #f4f7fd 0%, #eef3fb 46%, #ffffff 100%);
}

/* CSS Mockups */
.mockup-frame {
  width: 100%;
  aspect-ratio: 16/10;
  position: relative;
  background: linear-gradient(135deg, #e5e5ea, #f5f5f7);
  overflow: hidden;
}

.theme-glass .mockup-frame {
  background: radial-gradient(circle at top left, rgba(255,255,255,0.8), rgba(255,255,255,0.2)),
              linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
}

.theme-dark .mockup-frame {
  background: linear-gradient(135deg, #1d1d1f, #000000);
}

/* Let's build a beautiful abstract visual for mockups */
.mock-shape-1, .mock-shape-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
}

.mock-shape-1 {
  width: 300px; height: 300px;
  background: rgba(0, 113, 227, 0.4);
  top: -50px; right: -50px;
}

.mock-shape-2 {
  width: 200px; height: 200px;
  background: rgba(191, 72, 255, 0.4);
  bottom: -50px; left: -50px;
}

.mock-window {
  position: absolute;
  top: 10%; bottom: 10%;
  left: 10%; right: 10%;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.theme-dark .mock-window {
  background: rgba(40, 40, 40, 0.6);
  border: 1px solid rgba(255,255,255,0.1);
}

.mock-header {
  height: 38px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
}

.theme-dark .mock-header {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mock-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff5f56;
}
.mock-dot:nth-child(2) { background: #ffbd2e; }
.mock-dot:nth-child(3) { background: #27c93f; }

.mock-content-flex {
  flex: 1;
  display: flex;
  padding: 12px;
  gap: 12px;
}

.mock-sidebar {
  width: 25%;
  background: rgba(255,255,255,0.4);
  border-radius: 6px;
}
.theme-dark .mock-sidebar {
  background: rgba(0,0,0,0.2);
}

.mock-main {
  flex: 1;
  background: rgba(255,255,255,0.8);
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-dark .mock-main {
  background: rgba(0,0,0,0.4);
}

.mock-line {
  height: 8px;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}
.theme-dark .mock-line {
  background: rgba(255,255,255,0.1);
}

.mock-line.short { width: 40%; }
.mock-line.long { width: 80%; }
.mock-line.fat { height: 20px; }

/* Footer */
#global-footer {
  background: var(--bg-color-alt);
  padding: 40px 20px;
  border-top: 1px solid #d2d2d7;
}

.footer-content {
  max-width: 980px;
  margin: 0 auto;
}

.footer-directory {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}

.footer-column {
  flex: 1;
  min-width: 150px;
}

.footer-column h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 8px;
}

.footer-column a {
  font-size: 12px;
  color: var(--text-dark-muted);
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-legal {
  border-top: 1px solid #d2d2d7;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dark-muted);
}

.footer-legal-links {
  display: flex;
  gap: 12px;
}

.footer-legal-links a {
  border-right: 1px solid #d2d2d7;
  padding-right: 12px;
}

.footer-legal-links a:last-child {
  border-right: none;
  padding-right: 0;
}

/* Feature Grid */
.feature-grid-section {
  background: var(--bg-color-light);
  padding: 100px 20px;
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 980px;
  margin: 60px auto 0;
  text-align: left;
}

.feature-item h3 {
  font-size: 21px;
  margin-bottom: 10px;
}

.feature-item p {
  font-size: 17px;
  color: var(--text-dark-muted);
}

/* Responsiveness */
@media (max-width: 834px) {
  .story-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .story-container.reverse {
    grid-template-columns: 1fr;
  }
  .story-container.reverse .story-content {
    order: 1;
  }
  .story-container.reverse .story-media {
    order: 2;
  }
  .story-content {
    margin: 0 auto;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .use-case-story .section-title {
    font-size: 34px;
  }
  .use-case-story .story-content p {
    font-size: 18px;
  }
  .use-case-visual {
    min-height: 320px;
  }
}

/* Legal Pages */
.legal-sheet {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 50px 60px;
  background: var(--glass-bg);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
@media (max-width: 768px) {
  .legal-sheet { padding: 40px 20px; border-radius: 16px; }
}
.legal-block { margin-bottom: 30px; }
.legal-block h2 { font-size: 21px; margin-bottom: 12px; }
.legal-block p { font-size: 15px; margin-bottom: 8px; color: var(--text-dark-muted); }
.legal-block strong { color: var(--text-dark); }

/* Support Page */
.support-page {
  background: var(--bg-color-light);
}

.support-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 22px 36px;
  text-align: center;
}

.support-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto 90px;
  padding: 0 22px;
}

.support-form,
.support-aside {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

.support-form {
  padding: 34px;
}

.support-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.support-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.support-field span,
.support-check span {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}

.support-field input,
.support-field select,
.support-field textarea {
  width: 100%;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  padding: 13px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text-dark);
  background: #fbfbfd;
  outline: none;
}

.support-field textarea {
  resize: vertical;
  min-height: 180px;
}

.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12);
  background: #fff;
}

.support-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 8px 0 24px;
}

.support-check input {
  margin-top: 3px;
}

.support-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.support-mail-link {
  color: var(--blue);
  font-size: 15px;
  font-weight: 600;
}

.support-note {
  margin: 18px 0 0;
  color: var(--text-dark-muted);
  font-size: 14px;
}

.support-aside {
  align-self: start;
  padding: 28px;
}

.support-aside h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.support-aside p,
.support-aside li {
  color: var(--text-dark-muted);
  font-size: 15px;
}

.support-aside ul {
  margin: 18px 0 0;
  padding-left: 20px;
}

.support-aside li {
  margin-bottom: 10px;
}

@media (max-width: 880px) {
  .support-shell,
  .support-form-grid {
    grid-template-columns: 1fr;
  }

  .support-form,
  .support-aside {
    border-radius: 18px;
  }

  .support-form {
    padding: 24px;
  }
}

.carousel-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-section {
  padding: 80px 0;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px 40px 40px;
  scroll-padding: 0 40px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-card {
  scroll-snap-align: center;
  flex: 0 0 calc(90vw - 80px);
  max-width: 400px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.4);
  transition: transform 0.3s ease;
}

.carousel-card:hover {
  transform: translateY(-4px);
}

/* Apple Style Navigation Buttons Grouped Below */
.carousel-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 40px;
  margin-top: 10px;
}

.carousel-nav-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(220, 220, 225, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  color: var(--text-dark);
  transition: all 0.2s ease;
  opacity: 1;
}

.carousel-nav-button:hover {
  background: rgba(200, 200, 205, 0.6);
}

.carousel-nav-button.hidden {
  opacity: 0.2;
  pointer-events: none;
  cursor: default;
}

.carousel-nav-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

@media (max-width: 768px) {
  .carousel-controls {
    padding: 0 20px;
  }
  .carousel-track {
    padding: 20px;
  }
}

@media (min-width: 768px) {
  .carousel-card {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333vw - 40px);
  }
}

/* ============================================================
   APPLE KEYNOTE REDESIGN
   ============================================================ */

/* Frosted Sub-Nav */
.home-subnav {
  position: sticky;
  top: 52px;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(245, 245, 247, 0.72);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 9998;
  display: flex;
  justify-content: center;
}

.subnav-content {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1100px;
  width: 100%;
  padding: 0 22px;
}

.subnav-title {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-dark);
  flex-shrink: 0;
}

.subnav-links {
  display: flex;
  gap: 22px;
  flex: 1;
}

.subnav-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dark);
  opacity: 0.78;
  transition: opacity 0.2s ease, color 0.2s ease;
  letter-spacing: -0.01em;
}

.subnav-link:hover { opacity: 1; }

.subnav-link.active {
  color: var(--blue);
  opacity: 1;
}

.subnav-cta {
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.subnav-cta:hover { color: var(--blue-hover); }

@media (max-width: 768px) {
  .subnav-content { gap: 16px; padding: 0 16px; }
  .subnav-links { gap: 14px; overflow-x: auto; scrollbar-width: none; }
  .subnav-links::-webkit-scrollbar { display: none; }
  .subnav-title { font-size: 17px; }
}

/* Keynote Hero */
.keynote-hero {
  text-align: center;
  padding: 96px 22px 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 113, 227, 0.04), transparent 60%),
    var(--bg-color-light);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--blue);
  background: rgba(0, 113, 227, 0.08);
  padding: 6px 14px;
  border-radius: 980px;
  margin-bottom: 28px;
}

.keynote-display {
  font-size: clamp(56px, 9vw, 112px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 auto 26px;
  max-width: 1100px;
}

.keynote-display .hero-title {
  display: block;
  color: var(--text-dark);
}

.keynote-display .hero-emphasis {
  display: block;
  background: linear-gradient(120deg, #0071e3 0%, #5e9bff 60%, #6f6fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.keynote-lead {
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-dark-muted);
  max-width: 760px;
  margin: 0 auto 60px;
}

.hero-media-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.hero-media-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.18),
    0 12px 30px -10px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #f5f7fb, #e7ecf5);
}

.hero-media-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
}

@media (max-width: 768px) {
  .keynote-hero { padding-top: 56px; }
  .keynote-display { letter-spacing: -0.022em; }
  .hero-media-frame { border-radius: 16px; }
}

.updates-stage {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.updates-headline {
  font-size: clamp(40px, 8vw, 96px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(
    90deg,
    #606070 0%,
    #606070 30%,
    #d0d0dc 42%,
    #f2f2f6 50%,
    #d0d0dc 58%,
    #606070 70%,
    #606070 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 8s linear infinite;
}

@keyframes shimmerText {
  0% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Numbers Section */
.numbers-section {
  background: var(--bg-color-light);
  padding: 140px 22px;
}

.numbers-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.numbers-section .section-eyebrow {
  display: block;
  margin-bottom: 60px;
  color: var(--blue);
}

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

.number-card {
  text-align: center;
  padding: 24px 12px;
}

.number-value {
  font-size: clamp(72px, 11vw, 144px);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #1d1d1f 0%, #4b5060 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 14px;
}

.number-label {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.number-note {
  font-size: 15px;
  color: var(--text-dark-muted);
  letter-spacing: -0.005em;
}

@media (max-width: 768px) {
  .numbers-section { padding: 80px 22px; }
  .numbers-grid { grid-template-columns: 1fr; gap: 50px; }
}

/* Highlights Header */
.highlights-section {
  background: var(--bg-color-alt);
  padding: 120px 22px;
}

.highlights-header {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
}

.highlights-header .section-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--blue);
}

.highlights-header .section-title {
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.022em;
}

/* Bento Mosaic */
.bento-grid-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
}

.bento-grid-mosaic .bento-card {
  min-height: 320px;
  padding: 0;
}

.bento-grid-mosaic .bento-inner {
  padding: 36px 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  z-index: 2;
  position: relative;
}

.bento-grid-mosaic .bento-card h3 {
  font-size: 26px;
  letter-spacing: -0.018em;
  margin-bottom: 10px;
}

.bento-grid-mosaic .bento-card p {
  font-size: 15px;
  line-height: 1.46;
  max-width: 100%;
  color: var(--text-dark-muted);
}

.bento-normal { grid-column: span 1; }
.bento-wide   { grid-column: span 2; }
.bento-tall   { grid-column: span 1; grid-row: span 2; }

.bento-theme-dark {
  background: linear-gradient(155deg, #1a1d24 0%, #0d0f14 100%);
  color: var(--text-light);
}

.bento-theme-dark h3 { color: #fff; }
.bento-theme-dark p { color: rgba(245, 245, 247, 0.72); }

.bento-theme-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(0, 113, 227, 0.32), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(94, 155, 255, 0.18), transparent 55%);
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .bento-grid-mosaic { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 2; }
}

@media (max-width: 640px) {
  .bento-grid-mosaic { grid-template-columns: 1fr; }
  .bento-wide, .bento-normal, .bento-tall { grid-column: span 1; }
  .bento-grid-mosaic .bento-card { min-height: 240px; }
}

/* Sticky-Pin Stories */
.story-section {
  padding: 140px 22px;
}

.story-section .story-container {
  max-width: 1200px;
  gap: 80px;
}

.story-section .section-title {
  font-size: clamp(40px, 5.6vw, 76px);
  letter-spacing: -0.024em;
  line-height: 1.04;
  margin-bottom: 24px;
  white-space: pre-line;
}

.story-section .story-content p {
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--text-dark-muted);
}

.story-section.theme-dark .story-content p {
  color: rgba(245, 245, 247, 0.72);
}

.story-section .section-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 17px;
  letter-spacing: 0.005em;
}

.story-section.theme-dark .section-eyebrow {
  color: #6db3ff;
}

.story-media-wrap {
  position: relative;
  width: 100%;
}

.story-pin .story-media-wrap {
  position: sticky;
  top: 120px;
  align-self: start;
}

.story-section .story-media {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.22), 0 10px 28px -10px rgba(0, 0, 0, 0.14);
  background: var(--bg-color-alt);
  aspect-ratio: auto;
  width: 100%;
}

.story-section.theme-dark .story-media {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.story-section .story-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
}

@media (max-width: 834px) {
  .story-pin .story-media-wrap {
    position: relative;
    top: auto;
  }
  .story-section { padding: 80px 22px; }
  .story-section .story-container { gap: 40px; }
  .story-section .section-title { white-space: normal; }
}

/* Closer Section */
.closer-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 113, 227, 0.18), transparent 60%),
    linear-gradient(180deg, #000 0%, #0a0a0c 100%);
  color: #fff;
  padding: 160px 22px 140px;
  text-align: center;
}

.closer-inner {
  max-width: 900px;
  margin: 0 auto;
}

.closer-eyebrow {
  display: block;
  color: #6db3ff;
  margin-bottom: 24px;
}

.closer-title {
  font-size: clamp(56px, 8vw, 104px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
  color: #fff;
}

.closer-lead {
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  color: rgba(245, 245, 247, 0.72);
  max-width: 640px;
  margin: 0 auto 56px;
}

.closer-platforms {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-bottom: 56px;
}

.platform-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(245, 245, 247, 0.6);
  font-size: 14px;
  letter-spacing: -0.005em;
}

.platform-icon svg {
  height: 56px;
  width: auto;
  display: block;
}

.closer-button {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 980px;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, transform 0.2s ease;
}

.closer-button:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .closer-section { padding: 100px 22px 80px; }
  .closer-platforms { gap: 32px; margin-bottom: 40px; }
  .platform-icon svg { height: 44px; }
}

/* Scroll Reveals */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Type-System Sharpen */
body { letter-spacing: -0.022em; }
h1, h2, h3 { letter-spacing: -0.022em; }
.hero-display { letter-spacing: -0.03em; }

/* Carousel header tightening */
.carousel-section { padding: 100px 0 120px; }
.carousel-section h2 {
  letter-spacing: -0.022em;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 600 !important;
}

/* ============================================================
   LEGAL PAGES (v9)
   ============================================================ */

.legal-page {
  background: var(--bg-color-light);
  min-height: 100vh;
}

.legal-stack {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 22px;
}

.page-hero {
  padding: 100px 0 60px;
  text-align: center;
}

.legal-hero {
  padding: 100px 0 56px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 113, 227, 0.04), transparent 60%),
    var(--bg-color-light);
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 20px;
}

.page-title {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--text-dark);
  margin-bottom: 20px;
}

.page-lead {
  font-size: 19px;
  line-height: 1.52;
  color: var(--text-dark-muted);
  max-width: 600px;
  margin: 0 auto;
}

/* Improved legal sheet */
.legal-sheet {
  max-width: 100%;
  margin: 0 auto 80px;
  padding: 52px 60px;
  background: #fff;
  border-radius: 24px;
  box-shadow:
    0 2px 24px rgba(0, 0, 0, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.04);
}

.legal-block {
  margin-bottom: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #f2f2f4;
}

.legal-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.legal-block h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
  color: var(--text-dark);
}

.legal-block p {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 10px;
  color: var(--text-dark-muted);
}

.legal-block p:last-child { margin-bottom: 0; }

.legal-block strong {
  color: var(--text-dark);
  font-weight: 600;
}

.legal-block a {
  color: var(--blue);
  text-decoration: none;
}

.legal-block a:hover { text-decoration: underline; }

@media (max-width: 834px) {
  .legal-sheet {
    padding: 32px 24px;
    border-radius: 18px;
    margin-bottom: 60px;
  }
  .page-hero,
  .legal-hero {
    padding: 72px 0 40px;
  }
  .page-title { font-size: 30px; }
  .page-lead { font-size: 17px; }
  .legal-block h2 { font-size: 17px; }
  .legal-block p { font-size: 14px; }
}

/* ============================================================
   VERBESSERTE MOBILE-RESPONSIVITÄT (v9)
   ============================================================ */

/* Bessere Touch-Ziele */
@media (max-width: 768px) {
  .button-large {
    font-size: 15px;
    padding: 14px 24px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .text-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Hero auf Mobile */
  .keynote-hero { padding-top: 48px; }
  .keynote-lead {
    font-size: 17px;
    margin-bottom: 40px;
  }
  .hero-badge { margin-bottom: 20px; }

  /* Numbers auf Mobile */
  .numbers-section { padding: 80px 22px; }
  .numbers-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .number-value { font-size: 80px; }

  /* Bento-Grid auf Mobile */
  .bento-grid-mosaic { gap: 14px; }
  .bento-grid-mosaic .bento-card { min-height: 200px; }
  .bento-grid-mosaic .bento-inner {
    padding: 28px 24px 32px;
  }
  .bento-grid-mosaic .bento-card h3 { font-size: 21px; }

  /* Closer auf Mobile */
  .closer-section { padding: 80px 22px 80px; }
  .closer-title { font-size: 52px; }
  .closer-lead { font-size: 17px; }

  /* Feature-Grid auf Mobile */
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 40px;
  }

  /* Story sections auf Mobile */
  .story-section { padding: 72px 22px; }
  .story-section .section-title { font-size: 32px; }
  .story-section .story-content p { font-size: 17px; }

  /* Carousel auf Mobile */
  .carousel-card { padding: 24px; }
  .carousel-section { padding: 64px 0 80px; }

  /* Footer auf Mobile */
  .footer-directory {
    flex-direction: column;
    gap: 24px;
  }
  .footer-legal {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-legal-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Subnav-Position für neue Nav-Höhe */
@media (max-width: 768px) {
  .home-subnav { top: 52px; }
  .home-page { padding-top: 108px; }
  .page-shell { padding-top: 52px; }
  .subnav-title { font-size: 16px; }
}

/* Bilder ohne überflüssige border-radius in bestimmten Kontexten */
.story-section .story-media img,
.hero-media-image {
  border-radius: 0;
}

/* Responsive-Verbesserungen für Tablet (834px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .bento-grid-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-wide { grid-column: span 2; }
  .bento-tall { grid-column: span 1; grid-row: span 1; }
}

/* Smooth scrolling für Anker-Links */
html { scroll-behavior: smooth; }

/* Fokus-Stile für bessere Accessibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* iPhone-Notch / Safe Area */
@supports (padding: max(0px)) {
  #global-nav {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .mobile-nav-content {
    padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
  }
  #global-footer {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom)));
  }
}

/* ============================================================
   APPLE iOS STYLE VISUAL OVERHAUL (v10)
   Dunkel · Cinematic · Minimalistisch
   ============================================================ */

/* --- HERO: Dunkel, cinematisch, volle Bildschirmhöhe --- */
.keynote-hero {
  min-height: 100svh !important;
  padding-top: 96px !important;
  background:
    radial-gradient(ellipse at 50% -5%, rgba(0, 113, 227, 0.30) 0%, transparent 52%),
    linear-gradient(180deg, #000 0%, #06060a 60%, #0a0a10 100%) !important;
  justify-content: center !important;
  padding-bottom: 96px !important;
}

.keynote-hero .hero-badge {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(245,245,247,0.72) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(10px);
}

.keynote-display .hero-title { color: #ffffff !important; }

.keynote-display .hero-emphasis {
  background: linear-gradient(120deg, #5eb5ff 0%, #a78bff 55%, #70d4ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.keynote-lead { color: rgba(245,245,247,0.65) !important; }

/* Hero-Bild: größer, dramatischer */
.hero-media-container {
  max-width: 1400px !important;
  padding: 0 !important;
}

.hero-media-frame {
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06),
    0 60px 120px -30px rgba(0,0,0,0.9),
    0 0 80px rgba(0,113,227,0.15) !important;
  background: #111318 !important;
  margin-top: 40px;
}

/* Subnav: weiß auf dunklem hero sichtbar machen */
.home-subnav {
  background: rgba(0,0,0,0.76) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}
.subnav-title { color: rgba(245,245,247,0.9) !important; }
.subnav-link { color: rgba(245,245,247,0.72) !important; }
.subnav-link:hover { color: #fff !important; }
.subnav-link.active { color: #5eb5ff !important; }
.subnav-cta { color: #5eb5ff !important; }

/* --- NUMBERS: Schwarz mit weißen Ziffern --- */
.numbers-section {
  background: #000 !important;
  padding: 140px 22px !important;
}

.numbers-section .section-eyebrow {
  color: #5eb5ff !important;
}

.number-value {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.48) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.number-label { color: rgba(245,245,247,0.88) !important; }
.number-note  { color: rgba(245,245,247,0.44) !important; }

/* --- CAROUSEL: Klares Weiß auf grauem Grund --- */
.carousel-section {
  background: #f5f5f7 !important;
  padding: 100px 0 100px !important;
}

.carousel-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.carousel-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04) !important;
}

/* --- HIGHLIGHTS/BENTO: Feature-Tiles mit Icons --- */
.highlights-section {
  background: #f5f5f7 !important;
  padding: 120px 22px !important;
}

.highlights-header .section-eyebrow { color: var(--blue) !important; }

.bento-grid-mosaic {
  gap: 16px !important;
}

.bento-grid-mosaic .bento-card {
  min-height: 420px !important;
  border-radius: 28px !important;
}

.bento-grid-mosaic .bento-inner {
  padding: 36px 36px 42px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

/* Icon-Bereich oben in der Karte */
.bento-icon-cap {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
  margin-bottom: 32px;
}

.bento-feature-icon {
  width: 48px;
  height: 48px;
  color: var(--blue);
  display: block;
  flex-shrink: 0;
}

.bento-theme-dark .bento-feature-icon { color: #70c0ff; }

.bento-grid-mosaic .bento-card h3 {
  font-size: 28px !important;
  letter-spacing: -0.022em !important;
  margin-bottom: 12px !important;
  line-height: 1.1 !important;
}

.bento-grid-mosaic .bento-card p {
  font-size: 16px !important;
  line-height: 1.55 !important;
}

/* Helle Karten: subtiler Gradient statt blankes Weiß */
.bento-grid-mosaic .bento-card:not(.bento-theme-dark) {
  background: linear-gradient(145deg, #ffffff 0%, #f0f2f7 100%) !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
}

/* --- STORY SECTIONS: Cinematischer --- */
.story-section {
  padding: 120px 0 !important;
}

.story-section .story-container {
  max-width: 1380px !important;
  padding: 0 40px !important;
  gap: 60px !important;
}

.story-section .story-media {
  border-radius: 24px !important;
  overflow: hidden !important;
}

.story-section.theme-light .story-media {
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18) !important;
}

/* Story-Text etwas größer */
.story-section .section-title {
  font-size: clamp(44px, 5.8vw, 80px) !important;
  line-height: 1.04 !important;
}

/* --- FEATURE-PAGE-SECTIONS (Mittlere Story-Sektionen) --- */
.feature-grid-section {
  background: #000 !important;
  padding: 120px 22px !important;
}

.feature-grid-section .section-eyebrow { color: #6db3ff !important; }
.feature-grid-section .section-title   { color: #ffffff !important; }
.feature-grid-section .feature-item h3 { color: #ffffff !important; font-size: 22px !important; }
.feature-grid-section .feature-item p  { color: rgba(245,245,247,0.58) !important; font-size: 16px !important; }

.feature-grid {
  margin-top: 80px !important;
  gap: 48px 60px !important;
}

/* Feature-Icon */
.feature-item-icon {
  width: 36px;
  height: 36px;
  color: #6db3ff;
  display: block;
  margin-bottom: 18px;
}

/* --- CLOSER: Mehr Tiefe --- */
.closer-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,113,227,0.26), transparent 58%),
    linear-gradient(180deg, #000 0%, #05050a 100%) !important;
  padding: 160px 22px 140px !important;
}

/* --- MOBILE ANPASSUNGEN für neues Design --- */
@media (max-width: 768px) {
  .keynote-hero {
    min-height: 100svh !important;
    padding-top: 72px !important;
  }

  .hero-media-frame { border-radius: 16px !important; margin-top: 32px; }

  .numbers-section { padding: 96px 22px !important; }
  .number-value { font-size: 72px !important; }

  .highlights-section { padding: 80px 16px !important; }
  .bento-grid-mosaic { gap: 12px !important; }
  .bento-grid-mosaic .bento-card { min-height: 280px !important; border-radius: 22px !important; }
  .bento-grid-mosaic .bento-inner { padding: 28px 24px 32px !important; }
  .bento-grid-mosaic .bento-card h3 { font-size: 22px !important; }
  .bento-icon-cap { margin-bottom: 20px; }
  .bento-feature-icon { width: 38px; height: 38px; }

  .story-section { padding: 80px 0 !important; }
  .story-section .story-container { padding: 0 20px !important; gap: 32px !important; }
  .story-section .section-title { font-size: 34px !important; }

  .feature-grid-section { padding: 80px 22px !important; }
  .feature-grid { margin-top: 48px !important; gap: 32px !important; }

  .closer-section { padding: 96px 22px 80px !important; }
  .closer-title { font-size: 52px !important; }
}

/* ============================================================
   APPLE-STYLE FOOTER (v10)
   ============================================================ */

/* ── Apple-style footer ── */
.footer-apple {
  background: #f5f5f7;
  border-top: 1px solid #d2d2d7;
}

.footer-apple .footer-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px;
}

/* Desktop: side-by-side columns */
.footer-apple .footer-directory {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0;
  padding: 40px 0 24px;
  border-bottom: 1px solid #d2d2d7;
  margin: 0;
}

.footer-apple .footer-column {
  flex: 1;
  min-width: 0;
  padding-right: 24px;
  text-align: left;
}

/* Toggle – plain heading on desktop */
.footer-col-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 16px 0;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #1d1d1f;
  letter-spacing: 0;
  text-align: left;
  font-family: inherit;
  cursor: default;
  pointer-events: none;
}

.footer-chevron {
  display: none;
}

/* Links */
.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
}

.footer-col-links li {
  margin-bottom: 11px;
}

.footer-col-links li:last-child {
  margin-bottom: 0;
}

.footer-col-links a {
  display: block;
  font-size: 12px;
  color: #6e6e73;
  text-decoration: none;
  text-align: left;
  letter-spacing: 0;
  transition: color 0.15s ease;
}

.footer-col-links a:hover {
  color: #1d1d1f;
}

/* Bottom bar */
.footer-bottom {
  padding: 16px 0 22px;
  text-align: left;
}

.footer-copy {
  font-size: 12px;
  color: #6e6e73;
  letter-spacing: 0;
}

/* ── Mobile: accordion ── */
@media (max-width: 768px) {
  .footer-apple .footer-content {
    padding: 0;
  }

  .footer-apple .footer-directory {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    border-bottom: none;
    margin: 0;
  }

  .footer-apple .footer-column {
    flex: none;
    width: 100%;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid #d2d2d7;
  }

  .footer-col-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .footer-chevron {
    display: block;
    flex-shrink: 0;
    color: #6e6e73;
    transition: transform 0.22s ease;
  }

  .footer-col-toggle[aria-expanded="true"] .footer-chevron {
    transform: rotate(180deg);
  }

  .footer-col-links {
    display: none;
    padding: 4px 0 10px;
    margin: 0;
  }

  .footer-col-toggle[aria-expanded="true"] + .footer-col-links {
    display: block;
  }

  .footer-col-links li {
    margin: 0;
    padding: 0;
  }

  .footer-col-links a {
    display: block;
    padding: 7px 22px;
    font-size: 12px;
    color: #6e6e73;
    text-align: left;
  }

  .footer-bottom {
    padding: 16px 22px 24px;
    border-top: 1px solid #d2d2d7;
    text-align: left;
  }
}

/* ============================================================
   STORY-SECTION MEDIA: kein border-radius auf äußeren Ebenen
   ============================================================ */
.story-section .story-media img {
  border-radius: 0;
}

/* ============================================================
   HERO: dunkel & cinematisch auch auf iPad/macOS
   ============================================================ */
@media (min-width: 769px) {
  .keynote-hero {
    min-height: 100svh !important;
  }
}

/* Übergang von dunklem Hero zur weißen nächsten Sektion */
.numbers-section {
  position: relative;
}

/* Subnav-Linie für dunklen Hintergrund */
.home-subnav {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* Carousel-Header auf grauem Grund */
.carousel-section h2,
.carousel-section .section-eyebrow {
  color: var(--text-dark) !important;
}

/* ============================================================
   MOBILE OVERFLOW HARDENING
   ============================================================ */

@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  section,
  article,
  div,
  form,
  aside,
  nav,
  header,
  footer {
    max-width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  a,
  span,
  label,
  input,
  select,
  textarea,
  button {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .page-hero-container {
    padding: 68px 18px 48px !important;
  }

  .page-hero-container .hero-display,
  .hero-section .hero-display {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.08 !important;
  }

  .page-hero-container .hero-lead,
  .hero-section .hero-lead {
    font-size: 18px !important;
    line-height: 1.38 !important;
  }

  .faq-contact {
    padding: 26px 20px !important;
    border-radius: 18px !important;
  }

  .support-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .support-actions .button-large,
  .support-mail-link {
    width: 100%;
    text-align: center;
  }

  .closer-platforms {
    grid-template-columns: 1fr !important;
  }
}