/* Enforce solid, readable titles (no gradient text for compatibility) */
.card.cc .tron { color: var(--cc); }
.card.ci .tron { color: var(--ci); }
.card.itsm .tron { color: var(--itsm); }
/* Core – Apple-inspirierter, luftiger Stil */
:root {
  --bg: #0b0b0c;
  --bg-alt: #111113;
  --text: #f5f7fa;
  --muted: #a8b0ba;
  --card: #151518;
  --border: #1f2023;
  --brand: #7bd4ff; /* zartes, kühles Blau */
  --accent: #7bffcc; /* frischer Akzent */
  --radius: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 12px 30px rgba(0,0,0,0.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.45);
  /* Per-product accents (hooks for future) */
  --cc: #7bd4ff; /* CoreControl */
  --ci: #7bffcc; /* CoreInventory */
  --itsm: #a078ff; /* CoreITSM */
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-alt: #f6f7f9;
    --text: #0c0d10;
    --muted: #5a6069;
    --card: #ffffff;
    --border: #e6e7eb;
    --brand: #0077ff;
    --accent: #00c28b;
  }
}

/* Per-page theme hooks */
body.theme-cc { --brand: var(--cc); --accent: color-mix(in oklab, var(--cc) 60%, var(--accent)); }
body.theme-ci { --brand: var(--ci); --accent: color-mix(in oklab, var(--ci) 60%, var(--accent)); }
body.theme-itsm { --brand: var(--itsm); --accent: color-mix(in oklab, var(--itsm) 60%, var(--brand)); }

* { box-sizing: border-box; }
html, body { height: 100%; }
/* Prevent horizontal scroll caused by glows/filters on ultra-wide layouts */
html { overflow-x: hidden; }
body { overflow-x: hidden; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(123,212,255,0.08), transparent 60%),
              radial-gradient(800px 500px at -10% 0%, rgba(123,255,204,0.08), transparent 50%),
              var(--bg);
  color: var(--text);
  font: 400 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  letter-spacing: -0.01em;
}

/* Fluid container: use full window width with safe side padding */
.container { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 6vw, 72px); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(16px);
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 700; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.brand::before { content: "◦"; color: var(--brand); margin-right: 6px; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: var(--text); text-decoration: none; opacity: .85; }
.nav-links a:hover { opacity: 1; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; min-height: 78vh; overflow: visible; isolation: isolate; padding-bottom: 24px; }
.hero-copy { max-width: 72ch; padding-right: 8px; }
.display { font-size: clamp(42px, 6vw, 72px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.04em; }
.lead { font-size: clamp(18px, 2vw, 22px); opacity: .9; margin: 0 0 24px; }
.tron { font-family: "Orbitron", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; letter-spacing: 0.02em; font-weight: 700; -webkit-background-clip: initial; background-clip: initial; }
/* Fallback: readable solid color text */
.tron { color: var(--brand); background: none; -webkit-text-fill-color: initial; text-shadow: 0 0 2px color-mix(in oklab, var(--brand) 25%, transparent), 0 0 6px color-mix(in oklab, var(--brand) 12%, transparent); }
.card .tron { font-weight: 600; }
.actions { display: flex; gap: 12px; }
.btn { position: relative; overflow: hidden; border-radius: 999px; padding: 10px 18px; border: 1px solid var(--border); text-decoration: none; color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .2s ease; }
.btn.primary { background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 45%, transparent), transparent 120%); border-color: color-mix(in oklab, var(--brand) 25%, var(--border)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-sm); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-md); }
.btn.primary::before { content: ""; position: absolute; inset: -20% -60%; transform: translateX(-120%) rotate(20deg); background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.45) 50%, transparent 100%); filter: blur(2px); }
.btn.primary:hover::before { animation: sheen 1.2s ease; }
@keyframes sheen { to { transform: translateX(220%) rotate(20deg); } }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: color-mix(in oklab, var(--text) 6%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, var(--border)); }
.btn.ghost::before { content: ""; position: absolute; inset: -20% -60%; transform: translateX(-120%) rotate(20deg); background: linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%); filter: blur(2px); opacity: .7; }
.btn.ghost:hover::before { animation: sheen 1.2s ease; }
.btn.text { background: transparent; border: 0; color: var(--brand); padding-left: 0; }
.btn.text:hover { text-decoration: underline; }
.btn[aria-disabled="true"] { opacity: .6; pointer-events: none; }

.hero-media { position: relative; height: clamp(300px, 40vw, 520px); z-index: 1; }
.hero-copy { position: relative; z-index: 1; }
.orb { position: absolute; border-radius: 50%; filter: blur(16px); opacity: .8; will-change: transform; }
.orb.big { width: 48%; aspect-ratio: 1; right: 14%; top: 6%; background: radial-gradient(circle at 30% 30%, rgba(123,212,255,.55), transparent 60%), radial-gradient(circle at 70% 70%, rgba(123,255,204,.45), transparent 60%); box-shadow: var(--shadow-lg); }
.orb.small { width: 22%; aspect-ratio: 1; left: 16%; bottom: 16%; background: radial-gradient(circle at 30% 30%, rgba(123,255,204,.6), transparent 60%), radial-gradient(circle at 70% 70%, rgba(123,212,255,.4), transparent 60%); box-shadow: var(--shadow-md); }

/* Section */
.section { padding: clamp(48px, 7vw, 96px) 0; }
.section.alt { background: var(--bg-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { margin-bottom: 28px; padding: 0 clamp(16px, 3vw, 36px); }
.section-head h2 { margin: 0 0 6px; font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -0.02em; }
.section-head p { margin: 0; color: var(--muted); max-width: 80ch; }

/* Cards */
/* Cards scale wider but keep readable column width; center on ultra-wide */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 520px)); justify-content: center; gap: clamp(16px, 2.2vw, 28px); }
/* Visually indent cards within sections to align with section headings */
.section > .cards { padding: 0 clamp(16px, 3vw, 36px); }

/* Community page: give cards more surrounding space and max two columns */
.page-community .section > .cards {
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(24px, 6vw, 96px);
  gap: clamp(20px, 3vw, 36px);
}
.page-community .cards {
  justify-content: center;
  grid-template-columns: minmax(320px, 560px);
}
.page-community .cards > .card {
  max-width: 560px;
}
.card { position: relative; overflow: hidden; border-radius: var(--radius); padding: 22px; background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card)); border: 1px solid var(--border); box-shadow: var(--shadow-sm); min-height: 220px; isolation: isolate; transform-style: preserve-3d; }
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px color-mix(in oklab, var(--brand) 15%, transparent), var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease; }
.card.tilt { transition: transform .12s ease; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card.tilt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(300px 200px at var(--px,50%) var(--py,50%), color-mix(in oklab, var(--brand) 16%, transparent) 0%, transparent 60%); opacity: .6; mix-blend-mode: screen; }
.card h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.card p { margin: 0 0 12px; color: var(--muted); }
.card ul { margin: 0; padding-left: 18px; color: var(--muted); }
.card ul li { margin: 6px 0; }
.card .tron { position: relative; display: inline-block; padding-bottom: 3px; }
.card .tron::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: currentColor; border-radius: 2px; opacity: .7;
  box-shadow: 0 0 10px currentColor; transition: width .35s ease;
}
.card:hover .tron::after, .card:focus-within .tron::after { width: 100%; }
.card .card-tag { position: absolute; top: 12px; right: 12px; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 3%, transparent); color: var(--text); opacity: .9; }
.card .card-actions { margin-top: 6px; }
.card .card-media { aspect-ratio: 16/9; overflow: hidden; border-radius: 12px; margin: -6px -6px 12px; border: 1px solid var(--border); background: color-mix(in oklab, var(--text) 3%, transparent); box-shadow: 0 0 0 1px var(--border), 0 0 22px rgba(123,212,255,0.15); animation: neonPulse 3.2s ease-in-out infinite alternate; }
.card .card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes neonPulse { from { box-shadow: 0 0 0 1px var(--border), 0 0 14px rgba(123,212,255,0.12); } to { box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 40%, var(--border)), 0 0 28px rgba(123,255,204,0.26); } }

/* Per-product accents */
.card.cc .btn.primary { border-color: color-mix(in oklab, var(--cc) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--cc) 45%, transparent), transparent 120%); }
.card.ci .btn.primary { border-color: color-mix(in oklab, var(--ci) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--ci) 45%, transparent), transparent 120%); }
.card.itsm .btn.primary { border-color: color-mix(in oklab, var(--itsm) 30%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--itsm) 45%, transparent), transparent 120%); }
.card.cc .card-media { animation-duration: 3s; box-shadow: 0 0 0 1px var(--border), 0 0 22px color-mix(in oklab, var(--cc) 30%, transparent); }
.card.ci .card-media { animation-duration: 3.4s; box-shadow: 0 0 0 1px var(--border), 0 0 22px color-mix(in oklab, var(--ci) 30%, transparent); }
.card.itsm .card-media { animation-duration: 3.8s; box-shadow: 0 0 0 1px var(--border), 0 0 22px color-mix(in oklab, var(--itsm) 30%, transparent); }

/* Community teaser */
.community-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(16px, 2.2vw, 28px); align-items: center; }
.community-card { border: 1px solid var(--border); background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card)); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.pill { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); margin-bottom: 8px; background: color-mix(in oklab, var(--text) 3%, transparent); }
.teaser-art { position: relative; height: 220px; }
.teaser-art .glass { position: absolute; inset: 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); backdrop-filter: blur(12px) saturate(160%); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.teaser-art .gradient { position: absolute; inset: -10px; background: radial-gradient(500px 180px at 20% 10%, rgba(123,212,255,.18), transparent 60%), radial-gradient(600px 220px at 90% 40%, rgba(123,255,204,.18), transparent 60%); filter: blur(10px); opacity: .9; z-index: -1; }

/* Neon divider */
.divider.neon { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand) 50%, transparent), color-mix(in oklab, var(--accent) 50%, transparent), transparent); filter: drop-shadow(0 0 10px color-mix(in oklab, var(--brand) 30%, transparent)); opacity: .9; overflow: hidden; margin: 0 clamp(16px, 3vw, 36px); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: color-mix(in oklab, var(--bg) 80%, transparent); margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; padding: 22px 0; }
.site-footer .container { padding-left: clamp(24px, 6vw, 80px); padding-right: clamp(24px, 6vw, 80px); }
.footer-nav { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); }
.muted { color: var(--muted); }

/* Form */
.form { padding: 0 clamp(16px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .field { display: flex; flex-direction: column; gap: 8px; }
.form .field:nth-child(3), .form .field:nth-child(4) { grid-column: 1 / -1; }
.form label { font-size: 14px; color: var(--muted); }
.input { background: linear-gradient(180deg, color-mix(in oklab, var(--card) 92%, transparent), var(--card)); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; color: var(--text); outline: none; box-shadow: var(--shadow-sm); }
.input:focus { border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 16%, transparent); }
.input::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
@media (max-width: 980px) { .form { grid-template-columns: 1fr; } }

/* Product hero media */
.product-hero { margin: 8px 0 24px; }
.product-hero .media { width: 100%; aspect-ratio: 21/9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-md); background: color-mix(in oklab, var(--text) 3%, transparent); }
.product-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Starfield canvas */
.starfield { position: absolute; inset: 0; z-index: -1; opacity: .4; overflow: hidden; }
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background:
    repeating-linear-gradient(0deg, color-mix(in oklab, var(--brand) 18%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--accent) 16%, transparent) 0 1px, transparent 1px 28px);
  animation: grid-drift 28s linear infinite;
  mask-image: radial-gradient(1200px 600px at 60% 0%, #000 30%, transparent 90%);
  z-index: 0;
}
@keyframes grid-drift { to { background-position: 0 200px, 200px 0; } }

/* Motion safety */
@media (prefers-reduced-motion: reduce) {
  .btn.primary::before { display: none; }
  .card.tilt { transform: none !important; }
  .card .card-media { animation: none; }
  .hero::after { animation: none; }
  .card .tron::after { transition: none; width: 100%; }
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Utilities */
[data-elevate] { box-shadow: var(--shadow-sm); }

/* Responsive */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; gap: 20px; padding-top: 20px; }
  .hero-media { order: -1; height: 260px; }
  .cards { grid-template-columns: 1fr; }
  .community-teaser { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}