:root {
  --bg:#0d0b14;
  --bg-alt:#161325;
  --bg-alt2:#1f1a33;
  --text:#e9e6f5;
  --text-dim:#b5afcc;
  --accent:#9552ff;
  --accent-rgb:149 82 255;
  --accent-alt:#c28aff;
  --danger:#ff4d61;
  --warn:#ffbb33;
  --ok:#3ddc8d;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 4px 16px -4px rgba(0 0 0 / .5),0 2px 4px -1px rgba(0 0 0 / .4);
  --gradient:linear-gradient(135deg,var(--accent) 0%,var(--accent-alt) 100%);
  font-size:16px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
body { min-height:100dvh; display:flex; flex-direction:column; }
/* Dynamic animated global background layers */
body::before { content:""; position:fixed; inset:0; background:
  radial-gradient(circle at 15% 20%, rgba(var(--accent-rgb)/.18), transparent 60%),
  radial-gradient(circle at 85% 70%, rgba(90 40 180 / .22), transparent 65%),
  linear-gradient(125deg,#0d0b14,#1a1430 55%,#120f22);
  filter:saturate(1.15) brightness(1.05);
  animation:bg-shift 18s ease-in-out infinite alternate;
  z-index:-2; }
body::after { content:""; position:fixed; inset:0; background:
  repeating-linear-gradient(60deg,rgba(255 255 255 / .015) 0 2px,transparent 2px 6px),
  linear-gradient(0deg,rgba(255 255 255 / .04),transparent);
  mix-blend-mode:overlay; pointer-events:none; animation:grid-fade 22s linear infinite; z-index:-1; }
@keyframes bg-shift { 0% { filter:hue-rotate(0deg) saturate(1); transform:scale(1); }
  50% { filter:hue-rotate(25deg) saturate(1.15); }
  100% { filter:hue-rotate(-20deg) saturate(1.05); transform:scale(1.02); } }
@keyframes grid-fade { 0% {opacity:.55;} 50% {opacity:.3;} 100% {opacity:.55;} }
img { max-width:100%; display:block; }

.container { width:min(1260px,100% - 2rem); margin-inline:auto; }
.flex { display:flex; }
.center-y { align-items:center; }
.between { justify-content:space-between; }
.wrap { flex-wrap:wrap; }

h1,h2,h3 { font-weight:700; line-height:1.15; letter-spacing:.5px; }
.lead { font-size:1.125rem; max-width:52ch; color:var(--text-dim); }

.accent { color:var(--accent-alt); }
.accent-gradient { background:var(--gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }

.site-header { position:sticky; top:0; backdrop-filter:blur(14px); background:rgba(13,11,20,.72); border-bottom:1px solid #241d39; z-index:50; }
.logo { font-weight:800; font-size:1.25rem; letter-spacing:.5px; }
.logo span { color:var(--accent); }
.nav { position:relative; }
.nav-toggle { display:none; background:none; border:1px solid #30264a; color:var(--text); padding:.5rem .75rem; border-radius:var(--radius-sm); font-size:1.05rem; cursor:pointer; }
.nav-links { list-style:none; margin:0; padding:0; display:flex; gap:1.25rem; }
.nav-links a { text-decoration:none; color:var(--text-dim); font-weight:500; padding:.75rem .9rem; border-radius:var(--radius-sm); display:block; transition:.25s; }
.nav-links a:hover,.nav-links a:focus { background:var(--bg-alt2); color:var(--text); }
.lang-switch { display:flex; gap:.25rem; margin-left:1rem; }
.lang-switch button { background:#231b39; border:1px solid #372b55; color:var(--text-dim); font:600 .6rem/1 'Inter'; padding:.4rem .55rem .35rem; border-radius:6px; cursor:pointer; letter-spacing:.5px; }
.lang-switch button.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.lang-switch button:hover { filter:brightness(1.15); }

.hero { position:relative; padding:clamp(4rem,9vw,8rem) 0 4rem; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background:radial-gradient(circle at 30% 40%,rgba(var(--accent-rgb)/.35),transparent 60%),radial-gradient(circle at 70% 60%,rgba(90 40 180 /.35),transparent 65%); pointer-events:none; transform:translate3d(var(--hx,0),var(--hy,0),0); transition:transform .6s cubic-bezier(.25,.6,.3,1); }
.hero-bg::after { content:""; position:absolute; inset:-10%; background:
  conic-gradient(from 0deg,rgba(var(--accent-rgb)/.15),transparent 40%,rgba(var(--accent-rgb)/.25) 60%,transparent 85%);
  mix-blend-mode:overlay; animation:spin-slow 38s linear infinite; filter:blur(14px); opacity:.85; }
@keyframes spin-slow { to { transform:rotate(360deg);} }
.hero h1 { font-size:clamp(2.5rem,6vw,4.2rem); margin:0 0 1.25rem; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }

.btn { --btn-bg:var(--bg-alt2); --btn-color:var(--text); position:relative; font:600 0.95rem/1 'Inter'; letter-spacing:.5px; border:none; padding:.9rem 1.25rem; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; background:var(--btn-bg); color:var(--btn-color); box-shadow:var(--shadow); transform:translateY(0); transition:.3s; }
.btn.primary { --btn-bg:var(--gradient); }
.btn.cta-main { font-size:1.05rem; padding:1.05rem 1.6rem; box-shadow:0 0 0 3px rgba(var(--accent-rgb)/.35),0 6px 28px -6px rgba(var(--accent-rgb)/.55); position:relative; animation:pulse-glow 4.5s ease-in-out infinite; }
.btn.cta-main::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255 255 255 / .15),transparent 60%); mix-blend-mode:overlay; pointer-events:none; }
.btn.cta-main:hover { transform:translateY(-3px); box-shadow:0 0 0 3px rgba(var(--accent-rgb)/.55),0 10px 32px -6px rgba(var(--accent-rgb)/.65); }
.btn.cta-main:active { transform:translateY(1px); }
@keyframes pulse-glow { 0%,100% { box-shadow:0 0 0 3px rgba(var(--accent-rgb)/.35),0 6px 28px -6px rgba(var(--accent-rgb)/.55);} 50% { box-shadow:0 0 0 5px rgba(var(--accent-rgb)/.55),0 10px 36px -6px rgba(var(--accent-rgb)/.8);} }
.btn.ghost { background:transparent; border:1px solid #3a2e58; }
.btn.outline { background:transparent; border:1px solid var(--accent); color:var(--accent); }
.btn.small { padding:.55rem .85rem; font-size:.8rem; }
.btn:hover { filter:brightness(1.1); transform:translateY(-2px); }
.btn:active { transform:translateY(1px); }

.section { padding:4.5rem 0; position:relative; }
.section.alt { background:var(--bg-alt); }
.section-head { margin-bottom:2rem; }
.section h2 { margin:0 0 1.25rem; font-size:2.2rem; }

.grid { display:grid; gap:1.5rem; }
.features-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.feature-card { background:linear-gradient(145deg,#1d1830,#171428 60%); padding:1.25rem 1.25rem 1.45rem; border-radius:var(--radius); position:relative; overflow:hidden; border:1px solid #2a2241; opacity:0; transform:translateY(18px); transition:.85s cubic-bezier(.16,.6,.3,1); }
.feature-card.reveal-visible { opacity:1; transform:translateY(0); }
.feature-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(var(--accent-rgb)/.35),transparent 55%); opacity:.6; mix-blend-mode:plus-lighter; }
.feature-card h3 { margin:.25rem 0 .75rem; font-size:1.05rem; letter-spacing:.5px; }
.feature-card p { margin:0; font-size:.9rem; color:var(--text-dim); }

.status-embed-wrapper { aspect-ratio:16/9; background:#09070f; border:1px solid #2c2344; border-radius:var(--radius); overflow:hidden; position:relative; }
.status-embed-wrapper iframe { width:100%; height:100%; border:0; }

/* Status summary cards */
.status-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.status-card { background:#18132a; border:1px solid #2a2240; padding:1rem .95rem 1.1rem; border-radius:var(--radius-sm); display:flex; flex-direction:column; gap:.5rem; position:relative; opacity:0; transform:translateY(14px); transition:.6s ease; }
.status-card.reveal-visible { opacity:1; transform:translateY(0); }
.status-card.online { border-color:var(--ok); }
.status-card.partial { border-color:var(--warn); }
.status-card.down { border-color:var(--danger); }
.status-card.unknown { border-color:#44405a; }
.status-card h3 { margin:0; font-size:.9rem; font-weight:600; letter-spacing:.5px; }
.status-meta { font-size:.65rem; color:var(--text-dim); letter-spacing:.5px; }
.status-indicator { width:.75rem; height:.75rem; border-radius:50%; background:var(--text-dim); box-shadow:0 0 0 4px rgba(255 255 255 / .04); }
.status-card.online .status-indicator { background:var(--ok); }
.status-card.partial .status-indicator { background:var(--warn); }
.status-card.down .status-indicator { background:var(--danger); }
.status-card.unknown .status-indicator { background:var(--text-dim); }

.node-grid { grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); }
.node-card { background:linear-gradient(145deg,#1d182e,#19142f 55%); padding:1rem 1.05rem 1.15rem; border-radius:var(--radius); border:1px solid #2d2345; position:relative; display:flex; flex-direction:column; gap:.65rem; opacity:0; transform:translateY(22px); transition:.7s cubic-bezier(.16,.6,.3,1), box-shadow .5s; }
.node-card.reveal-visible { opacity:1; transform:translateY(0); }
.node-card:hover { transform:translateY(-6px) scale(1.015); box-shadow:0 10px 26px -8px rgba(0 0 0 / .6),0 0 0 1px rgba(var(--accent-rgb)/.25); }
.node-card.online { border-color:var(--ok); }
.node-card.offline { border-color:var(--danger); }
.node-card.wartung { border-color:var(--warn); }
.node-card header { display:flex; gap:.6rem; align-items:center; }
.node-status-dot { width:.75rem; height:.75rem; border-radius:50%; background:var(--text-dim); box-shadow:0 0 0 4px rgba(255 255 255 / .05); }
.node-card.online .node-status-dot { background:var(--ok); }
.node-card.offline .node-status-dot { background:var(--danger); }
.node-card.wartung .node-status-dot { background:var(--warn); }
.node-card h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:.5px; display:flex; gap:.4rem; align-items:center; }
.node-meta { font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--accent-alt); background:#261d3d; padding:.3rem .5rem .25rem; border-radius:var(--radius-sm); }
.node-spec { display:grid; grid-template-columns:1fr; gap:.25rem; font-size:.75rem; line-height:1.3; }
.node-spec span { color:var(--text-dim); }
.node-footer { display:flex; justify-content:space-between; align-items:center; font-size:.65rem; margin-top:.5rem; color:var(--text-dim); }
.tag { font-size:.6rem; padding:.35rem .5rem .3rem; background:#2b2242; border-radius:var(--radius-sm); letter-spacing:.5px; text-transform:uppercase; color:var(--accent-alt); }

.hint { font-size:.75rem; color:var(--text-dim); margin-top:1rem; }
.hint.tiny { font-size:.65rem; }

.faq details { background:#18132a; border:1px solid #281f41; padding:1rem 1.1rem; border-radius:var(--radius); margin-bottom:.9rem; }
.faq summary { cursor:pointer; font-weight:600; }
.faq p { margin:.75rem 0 0; font-size:.85rem; color:var(--text-dim); }

.site-footer { margin-top:auto; padding:2.25rem 0; background:#0a0810; border-top:1px solid #241d39; font-size:.8rem; }
.site-footer a { color:var(--text-dim); text-decoration:none; margin-left:1rem; }
.site-footer a:hover { color:var(--accent); }


@media (max-width:880px) {
  .nav-toggle { display:block; }
  .nav-links { position:absolute; top:calc(100% + .75rem); right:0; flex-direction:column; background:#161127; padding:.75rem; border:1px solid #2c2344; border-radius:var(--radius); width:220px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transform:translateY(-6px); transition:.3s; }
  .nav-links.open { opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links a { padding:.7rem .75rem; }
}

@media (max-width:640px) {
  .hero h1 { font-size:clamp(2.2rem,10vw,3.2rem); }
  .section h2 { font-size:1.8rem; }
  /* node-toolbar removed */
}

/* node-toolbar styles removed */

.fade-in { animation:fade .5s ease; }
@keyframes fade { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:translateY(0);} }
/* Generic reveal utility for any element (add reveal class in markup or JS) */
.reveal { opacity:0; transform:translateY(20px); transition:.75s cubic-bezier(.18,.7,.3,1); }
.reveal.reveal-visible { opacity:1; transform:translateY(0); }
/* Subtle shimmer for outline / ghost buttons */
.btn.outline::after,.btn.ghost::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(110deg,transparent,rgba(255 255 255 / .09),transparent); opacity:0; transition:.6s; background-size:220% 100%; }
.btn.outline:hover::after,.btn.ghost:hover::after { opacity:1; animation:shine 1.2s linear; }
@keyframes shine { from { background-position:200% 0; } to { background-position:-200% 0; } }

/* === Extra Effects Added === */
/* Particle canvas already positioned in hero (see .fx-canvas) */
.fx-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; mix-blend-mode:screen; }
.hero > .container { position:relative; z-index:2; }
.hero-bg { z-index:1; }

/* Status indicator glow pulse */
.status-indicator { position:relative; }
.status-indicator::after { content:""; position:absolute; inset:-4px; border-radius:inherit; background:radial-gradient(circle,currentColor,transparent 65%); opacity:0; animation:ping 3s ease-out infinite; }
@keyframes ping { 0% { transform:scale(.4); opacity:.9; } 70% { transform:scale(1); opacity:0; } 100% { opacity:0; transform:scale(1); } }

/* Node dot pulse */
.node-status-dot { position:relative; }
.node-status-dot::before { content:""; position:absolute; inset:-5px; border-radius:inherit; background:radial-gradient(circle,currentColor,transparent 70%); opacity:0; animation:node-pulse 4s ease-out infinite; }
@keyframes node-pulse { 0% { transform:scale(.3); opacity:.85; } 80% { transform:scale(1); opacity:0; } 100% { opacity:0; transform:scale(1); } }

/* Optional tilt hover (apply class 'tilt-hover') */
.tilt-hover { transition:transform .5s cubic-bezier(.2,.8,.3,1); transform-style:preserve-3d; }
.tilt-hover:hover { transform:perspective(1100px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px); }

/* Animated gradient border utility (add class 'border-anim') */
.border-anim { position:relative; }
.border-anim::before { content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background:linear-gradient(140deg,var(--accent),#5630a0,#b689ff,var(--accent)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:border-flow 8s linear infinite; }
@keyframes border-flow { 0% { filter:hue-rotate(0deg); } 100% { filter:hue-rotate(360deg); } }