/* ═══════════════════════════════════════════════════════
   DARK THEME (default)
═══════════════════════════════════════════════════════ */
:root,
html[data-theme="dark"] {
  --bg:          #060606;
  --bg1:         #0d0d0d;
  --bg2:         #141414;
  --bg3:         #222222;
  --bg4:         #3a3a3a;
  --mid:         #aaaaaa;
  --fg:          #f0f0ec;
  --rule:        rgba(240,240,236,0.08);
  --glow:        rgba(240,240,236,0.18);
  --card-bg:     #060606;
  --card-hover:  #0d0d0d;
  --feat-bg:     #f0f0ec;
  --feat-fg:     #060606;
  --feat-mid:    rgba(6,6,6,0.5);
  --nav-bg:      rgba(6,6,6,0.88);
  --terminal-bg: #0d0d0d;
  --green:       #39ff6e;
  --green-dim:   rgba(57,255,110,0.35);
  --green-faint: rgba(57,255,110,0.07);
  --particle-r:  240; --particle-g: 240; --particle-b: 236;
  --scan-opacity: 0.022;
  --dash-grid-bg: rgba(57,255,110,0.015);
  --shadow: 0 4px 30px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg:          #f0f0ec;
  --bg1:         #e8e8e4;
  --bg2:         #e0e0dc;
  --bg3:         #ccccca;
  --bg4:         #aaaaaa;
  --mid:         #444444;
  --fg:          #0a0a0a;
  --rule:        rgba(10,10,10,0.10);
  --glow:        rgba(10,10,10,0.18);
  --card-bg:     #f4f4f0;
  --card-hover:  #ebebE7;
  --feat-bg:     #0a0a0a;
  --feat-fg:     #f0f0ec;
  --feat-mid:    rgba(240,240,236,0.6);
  --nav-bg:      rgba(240,240,236,0.92);
  --terminal-bg: #e8e8e4;
  --green:       #008833;
  --green-dim:   rgba(0,136,51,0.35);
  --green-faint: rgba(0,136,51,0.07);
  --particle-r:  10; --particle-g: 10; --particle-b: 10;
  --scan-opacity: 0.018;
  --dash-grid-bg: rgba(0,136,51,0.015);
  --shadow: 0 4px 30px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════
   THEME TRANSITION
═══════════════════════════════════════════════════════ */
*, *::before, *::after {
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
  box-sizing: border-box; margin: 0; padding: 0;
}
canvas, .cursor, .cursor-ring, .g-scan { transition: none !important; }

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Syne', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: auto;
}

/* ── FONTS ── */
:root {
  --font-disp: 'Bebas Neue', Impact, sans-serif;
  --font-hud:  'Orbitron', monospace;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-ui:   'Syne', sans-serif;
  --tr: all 0.34s cubic-bezier(0.16,1,0.3,1);
  --tr-fast: all 0.18s ease;
}

/* ── CUSTOM CURSOR — DISABLED ── */
.cursor, .cursor-ring { display: none !important; }

/* ── NOISE OVERLAY ── */
body::after {
  content:''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--scan-opacity); pointer-events: none; z-index: 9990;
}

/* ── GLOBAL SCANLINE ── */
.g-scan {
  position: fixed; left:0; right:0; height:1px;
  background: linear-gradient(to right, transparent 0%, var(--glow) 30%, rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.5) 50%, var(--glow) 70%, transparent 100%);
  z-index: 9000; pointer-events:none;
  animation: gscan 14s linear infinite; top: -2px;
}
@keyframes gscan {
  0%   { top:-2px; opacity:0; } 2% { opacity:1; }
  98%  { opacity:1; } 100% { top:100vh; opacity:0; }
}

/* ══════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
══════════════════════════════════════════════════════ */
.theme-toggle {
  display: flex; align-items: center; gap: 8px;
  background: none;
  border: 1.5px solid var(--rule);
  color: var(--mid);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--tr) !important;
}
.theme-toggle:hover { border-color: var(--fg); color: var(--fg); }
.theme-toggle::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fg); transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1) !important;
  z-index: 0; mix-blend-mode: difference;
}
.theme-toggle:hover::before { transform: scaleX(1); transform-origin: left; }
.theme-icon { font-size: 12px; position: relative; z-index: 1; transition: transform 0.4s ease !important; }
.theme-label { position: relative; z-index: 1; }
html[data-theme="light"] .theme-icon { transform: rotate(180deg); }
.theme-badge {
  font-family: var(--font-mono); font-size: 6px; letter-spacing: 0.2em;
  padding: 2px 5px; border: 1px solid var(--green); color: var(--green);
  text-transform: uppercase; position: relative; z-index: 1;
}

/* ══════════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════════ */
.pe-nav {
  position: fixed; top:0; left:0; right:0;
  height: 52px; z-index: 500;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 36px;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(20px);
}
.nav-logo { display: flex; align-items:center; gap:10px; text-decoration: none; }
.nav-logo-bar { width: 3px; height: 22px; background: var(--green); }
.nav-logo-text { font-family: var(--font-hud); font-size: 11px; font-weight:700; color: var(--fg); letter-spacing: 0.28em; }
.nav-logo-sub { font-family: var(--font-mono); font-size: 7px; color: var(--mid); letter-spacing: 0.22em; margin-top:2px; }
.nav-center { display:flex; align-items:center; gap:6px; }
.nav-dot { width:5px; height:5px; border-radius:50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.6)} }
.nav-status { font-family: var(--font-mono); font-size: 7px; color: var(--green); opacity: 0.7; letter-spacing: 0.22em; text-transform: uppercase; }
.nav-links { display:flex; align-items:center; gap:28px; }
.nav-link { font-family: var(--font-mono); font-size: 9px; color: var(--mid); text-decoration:none; letter-spacing: 0.18em; text-transform: uppercase; transition: var(--tr-fast) !important; position: relative; }
.nav-link::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:1px; background: var(--fg); transform: scaleX(0); transform-origin:right; transition: transform .3s ease !important; }
.nav-link:hover { color: var(--fg); }
.nav-link:hover::after { transform:scaleX(1); transform-origin:left; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.nav-clock { font-family: var(--font-hud); font-size: 12px; color: var(--fg); letter-spacing: 0.1em; }

/* ══════════════════════════════════════════════════════
   HAMBURGER BURGER BUTTON
══════════════════════════════════════════════════════ */
.nav-burger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none; border: 1px solid var(--rule);
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: var(--tr-fast) !important;
  position: relative; z-index: 600;
}
.nav-burger:hover { border-color: var(--fg); }
.burger-line {
  display: block; width: 18px; height: 1.5px;
  background: var(--fg);
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease !important;
  transform-origin: center;
}
.burger-line--2 { width: 12px; align-self: flex-end; margin-right: 9px; }
.nav-burger.is-open .burger-line--1 { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.is-open .burger-line--2 { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open .burger-line--3 { transform: translateY(-6.5px) rotate(-45deg); }

/* ══════════════════════════════════════════════════════
   MOBILE FULLSCREEN OVERLAY NAV
══════════════════════════════════════════════════════ */
.mob-nav {
  position: fixed; inset: 0; z-index: 800;
  background: var(--bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), visibility 0.4s ease !important;
  overflow-y: auto;
}
.mob-nav.is-open { opacity: 1; visibility: visible; pointer-events: all; }

/* CLOSE BUTTON — always on top */
.mob-nav-close {
  position: fixed; top: 16px; right: 20px;
  z-index: 900;
  width: 44px; height: 44px;
  background: var(--bg1); border: 1px solid var(--rule);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0;
  transition: var(--tr-fast) !important;
  opacity: 0; pointer-events: none;
}
.mob-nav.is-open .mob-nav-close { opacity: 1; pointer-events: all; }
.mob-nav-close:hover { border-color: var(--fg); background: var(--bg2); }
.mob-close-line {
  display: block; width: 18px; height: 1.5px; background: var(--fg);
  transform-origin: center; position: absolute;
}
.mob-close-line--1 { transform: rotate(45deg); }
.mob-close-line--2 { transform: rotate(-45deg); }

.mob-nav-inner {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: 80px 36px 48px;
  max-width: 960px; margin: 0 auto;
}
.mob-nav-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.mob-nav-logo { display: flex; align-items: center; gap: 10px; }
.mob-nav-status { display: flex; align-items: center; gap: 6px; }

.mob-nav-divider {
  width: 100%; height: 1px; background: var(--rule);
  margin: 20px 0; position: relative; overflow: hidden;
}
.mob-nav-divider::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 60%; height: 100%;
  background: linear-gradient(to right, transparent, var(--green-dim), transparent);
  animation: scanLine 3s ease-in-out infinite;
}
@keyframes scanLine { 0%{left:-60%} 100%{left:160%} }

/* Two column layout */
.mob-nav-links {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 48px; padding: 8px 0;
}
.mob-nav-col { display: flex; flex-direction: column; gap: 2px; }

.mob-nav-section-label {
  font-family: var(--font-mono); font-size: 7px;
  color: var(--green); opacity: 0.6;
  letter-spacing: .28em; text-transform: uppercase;
  margin-bottom: 8px; margin-top: 4px;
}

/* BASE link */
.mob-nav-link {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: var(--tr-fast) !important;
}
.mob-nav-link::before {
  content: attr(data-num);
  font-family: var(--font-mono); font-size: 8px;
  color: var(--green); opacity: 0.4;
  letter-spacing: .1em; width: 20px; flex-shrink: 0;
  transition: opacity 0.2s ease !important;
}
.mob-nav-link:hover::before { opacity: 1; }

/* BIG — primary nav items */
.mob-nav-link--big {
  font-family: var(--font-disp); font-size: clamp(26px, 4vw, 36px);
  color: var(--mid); letter-spacing: .04em; line-height: 1.1;
  padding: 6px 0;
}
.mob-nav-link--big:hover { color: var(--fg); border-bottom-color: var(--rule); padding-left: 6px; }

/* SMALL — service links */
.mob-nav-link--sm {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--mid); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 0;
}
.mob-nav-link--sm:hover { color: var(--fg); border-bottom-color: var(--rule); padding-left: 4px; }

.mob-nav-footer { display: flex; flex-direction: column; gap: 10px; }
.mob-nav-contact {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--mid); letter-spacing: .1em; line-height: 2;
}
.mob-nav-copy {
  font-family: var(--font-mono); font-size: 7px;
  color: var(--mid); opacity: 0.3; letter-spacing: .2em; text-transform: uppercase;
}

/* Staggered entry animation */
.mob-nav.is-open .mob-nav-link {
  animation: mobLinkIn 0.45s cubic-bezier(0.16,1,0.3,1) both;
}
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(2)  { animation-delay:.04s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(3)  { animation-delay:.08s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(4)  { animation-delay:.11s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(5)  { animation-delay:.14s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(6)  { animation-delay:.17s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(7)  { animation-delay:.20s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(8)  { animation-delay:.23s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(9)  { animation-delay:.26s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(10) { animation-delay:.29s }
.mob-nav.is-open .mob-nav-col:nth-child(1) .mob-nav-link:nth-child(11) { animation-delay:.32s }
.mob-nav.is-open .mob-nav-col:nth-child(2) .mob-nav-link              { animation-delay:.12s }
@keyframes mobLinkIn {
  from { opacity:0; transform:translateX(-12px); }
  to   { opacity:1; transform:translateX(0); }
}

/* Show burger on mobile, hide desktop links */
@media (max-width: 900px) {
  .nav-burger { display: flex; }
  .nav-links  { display: none; }
  .nav-center { display: none; }
}

/* Single column on small phones */
@media (max-width: 520px) {
  .mob-nav-links { grid-template-columns: 1fr; }
  .mob-nav-inner { padding: 72px 24px 40px; }
}

/* ══════════════════════════════════════════════════════
   DAY/NIGHT INDICATOR BANNER
══════════════════════════════════════════════════════ */
.time-banner {
  position: fixed; top: 52px; left: 0; right: 0; height: 22px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 7px;
  letter-spacing: 0.24em; text-transform: uppercase;
  z-index: 490; border-bottom: 1px solid var(--rule);
  background: var(--nav-bg); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-22px);
  transition: opacity 0.6s ease, transform 0.6s ease !important;
}
.time-banner.visible { opacity: 1; transform: translateY(0); }
.time-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--green); animation: pulse 3s infinite; }
.time-text { color: var(--mid); }
.time-mode { color: var(--green); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
.hero {
  position: relative; width: 100%; height: 100svh; min-height: 600px;
  overflow: hidden; background: var(--bg);
}
html[data-theme="light"] .hero::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 30%, rgba(160,158,154,0.18) 60%, rgba(120,118,114,0.38) 80%, rgba(90,88,84,0.52) 100%);
}
#heroCanvas { position:absolute; inset:0; width:100% !important; height:100% !important; z-index:1; }
.hero-dotgrid {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: radial-gradient(rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.05) 1px, transparent 1px);
  background-size: 38px 38px;
}
.hud-corner { position:absolute; width:24px; height:24px; border-style:solid; border-color:rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.25); z-index:10; pointer-events:none; }
.hud-tl { top:68px; left:20px; border-width:1.5px 0 0 1.5px; }
.hud-tr { top:68px; right:20px; border-width:1.5px 1.5px 0 0; }
.hud-bl { bottom:52px; left:20px; border-width:0 0 1.5px 1.5px; }
.hud-br { bottom:52px; right:20px; border-width:0 1.5px 1.5px 0; }

/* Side panels */
.hero-side {
  position: absolute; top: 82px; bottom: 46px; width: 148px;
  z-index: 10; display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.hero-side--l { left: 16px; }
.hero-side--r { right: 16px; align-items: flex-end; }
.hpanel { border:1px solid var(--rule); padding:8px 10px; background:var(--nav-bg); backdrop-filter:blur(10px); position:relative; overflow:hidden; }
.hpanel::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background: linear-gradient(to right, transparent, rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.25), transparent); }
.hpanel-title { font-family: var(--font-mono); font-size: 6px; color:var(--mid); opacity:0.6; letter-spacing:0.26em; text-transform:uppercase; margin-bottom:5px; }
.hpanel-val { font-family: var(--font-hud); font-size: 15px; font-weight:700; color: var(--fg); letter-spacing:0.04em; line-height:1; }
.hpanel-unit { font-family: var(--font-mono); font-size: 7px; color:var(--mid); letter-spacing:0.14em; margin-top:3px; }
.hpanel-bar { width:100%; height:3px; background:rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.06); margin-top:8px; }
.hpanel-bar-fill { height:100%; background:var(--fg); transition: width 1s ease !important; }
.hlog { display:flex; flex-direction:column; gap:3px; }
.hlog-row { font-family: var(--font-mono); font-size: 6.5px; color:var(--mid); opacity:0.5; letter-spacing:0.06em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .5s !important; }
.hlog-row.hi { color:var(--green); opacity:1; }

/* Hero center */
.hero-content {
  position: absolute; top: 52px; bottom: 46px; left: 168px; right: 168px;
  z-index: 10; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; text-align: center; padding-bottom: 72px; pointer-events: none;
}
.hero-content a, .hero-content button { pointer-events: auto; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 9px; color: var(--fg); opacity: 0.3;
  letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 10px;
  animation: fadeUp .7s ease .3s both; text-align: center;
}
#atomLogoContainer {
  position: absolute; top: 52px; bottom: 38%; left: 0; right: 0;
  z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none;
}
#atomLogoCanvas { display: block; }

.hero-title {
  font-family: var(--font-disp); line-height: .88; letter-spacing: .03em;
  color: var(--fg); margin-bottom: 10px; animation: fadeUp .7s ease .5s both;
}
.htl { display: block; }
.htl-1 { font-size: clamp(52px,7.5vw,88px); display: block; }
.htl-2 {
  font-size: clamp(44px,6.5vw,76px);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--fg);
}
/* EXPERT sits inline in htl-1 — must exactly match htl-1 size */
.htl-1 .htl-expert {
  font-size: inherit;
  display: inline;
}
.hero-tagline {
  font-family: var(--font-mono); font-size: 10px; color: var(--mid);
  letter-spacing: 0.3em; text-transform: uppercase; margin-bottom: 16px; animation: fadeUp .7s ease .7s both;
}
.hero-typein {
  font-family: var(--font-mono); font-size: 11px; color: var(--green); opacity: 0.85;
  letter-spacing: 0.08em; min-height: 20px; margin-bottom: 28px; animation: fadeUp .7s ease .9s both;
}
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation: fadeUp .7s ease 1.1s both; }

@keyframes fadeUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
@keyframes blink { 50%{opacity:0} }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--fg); color: var(--bg); font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; padding: 13px 28px; position: relative; overflow: hidden;
  transition: var(--tr) !important;
}
.btn-primary span { position: relative; z-index: 1; }
.btn-primary::before {
  content:''; position:absolute; inset:0; background:var(--green);
  transform:scaleX(0); transform-origin:right; transition:transform .35s cubic-bezier(0.16,1,0.3,1) !important; z-index:0;
}
.btn-primary:hover::before { transform:scaleX(1); transform-origin:left; }
.btn-primary:hover { color: var(--bg); }
.btn-ghost {
  display:inline-flex; align-items:center; font-family:var(--font-mono);
  font-size:9px; color:var(--mid); text-decoration:none; letter-spacing:0.22em;
  text-transform:uppercase; padding:13px 28px; border:1.5px solid var(--rule);
  transition:var(--tr) !important;
}
.btn-ghost:hover { color:var(--fg); border-color:var(--fg); }

/* Bottom HUD */
.hero-hud-bot {
  position:absolute; bottom:0; left:0; right:0; height:46px; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--rule); background:var(--nav-bg); backdrop-filter:blur(10px);
  padding:0 24px; overflow:hidden;
}
.hbot-ticker {
  font-family:var(--font-mono); font-size:10px; color:var(--mid); opacity:0.5;
  letter-spacing:0.22em; text-transform:uppercase; white-space:nowrap;
  overflow:hidden; flex:1; display:flex;
}
.hbot-ticker-track {
  display: flex; flex-shrink: 0;
  animation: ticker 35s linear infinite;
  will-change: transform;
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-33.333%)} }
.hbot-right { font-family:var(--font-mono); font-size:7px; color:var(--mid); opacity:0.3; letter-spacing:0.18em; flex-shrink:0; margin-left:24px; }

/* ══════════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════════ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ══════════════════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════════════════ */
.sec-header { margin-bottom: 60px; }
.sec-meta { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.sec-num { font-family:var(--font-hud); font-size:10px; color:var(--mid); opacity:0.4; letter-spacing:0.22em; }
.sec-tag { font-family:var(--font-mono); font-size:9px; color:var(--mid); letter-spacing:0.22em; text-transform:uppercase; }
.sec-title { font-family:var(--font-disp); font-size:clamp(52px,7.5vw,96px); line-height:.88; letter-spacing:.03em; color:var(--fg); margin-bottom:16px; }
.sec-sub { font-family:var(--font-ui); font-size:14px; color:var(--mid); line-height:1.6; max-width:520px; }

/* ══════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════ */
.services { padding:120px 0; border-bottom:1px solid var(--rule); }
.srv-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); margin-top:0; }
.srv-card {
  display:block; padding:32px 24px 28px; background:var(--card-bg); text-decoration:none;
  position:relative; transition:var(--tr) !important; overflow:hidden;
}
.srv-card:hover { background:var(--card-hover); }
.srv-card--feat { background:var(--feat-bg); }
.srv-card--feat .srv-title, .srv-card--feat .srv-desc, .srv-card--feat .srv-link { color:var(--feat-fg); }
.srv-card--feat .srv-desc { color:var(--feat-mid); }
.srv-card--feat:hover { background:var(--feat-bg); opacity:.92; }
.feat-badge {
  position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:6.5px;
  padding:3px 7px; border:1px solid currentColor; letter-spacing:.18em; text-transform:uppercase;
  color:var(--feat-fg); opacity:.5;
}
.srv-corner { position:absolute; top:10px; left:10px; width:12px; height:12px; border-top:1.5px solid var(--rule); border-left:1.5px solid var(--rule); }
.srv-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.srv-num { font-family:var(--font-hud); font-size:9px; color:var(--mid); opacity:0.3; letter-spacing:.18em; }
.srv-ico { font-size:22px; }
.srv-title { font-family:var(--font-disp); font-size:22px; letter-spacing:.04em; color:var(--fg); margin-bottom:10px; line-height:1; }
.srv-desc { font-family:var(--font-ui); font-size:12.5px; color:var(--mid); line-height:1.6; margin-bottom:20px; }
.srv-link { font-family:var(--font-mono); font-size:8.5px; color:var(--mid); letter-spacing:.2em; text-transform:uppercase; transition:var(--tr-fast) !important; }
.srv-card:hover .srv-link { color:var(--green); }

/* ══════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════ */
.dashboard-sec { padding:120px 0; border-bottom:1px solid var(--rule); }
.dash-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); margin-top:60px; }
.dash-widget { padding:24px 20px; background:var(--bg); }
.dw-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.dw-title { font-family:var(--font-mono); font-size:9px; color:var(--fg); letter-spacing:.1em; }
.dw-status { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:7.5px; color:var(--green); opacity:0.75; letter-spacing:.16em; text-transform:uppercase; }
.dw-dot { width:5px; height:5px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2s infinite; }

/* Security widget */
.threat-bars { display:flex; flex-direction:column; gap:8px; }
.threat-row { display:flex; align-items:center; gap:8px; }
.threat-label { font-family:var(--font-mono); font-size:7.5px; color:var(--mid); letter-spacing:.08em; width:80px; flex-shrink:0; }
.threat-track { flex:1; height:4px; background:var(--rule); }
.threat-fill { height:100%; background:var(--green); }
.threat-fill.red { background:#dd3333; }
html[data-theme="dark"] .threat-fill.red { background:#ff4444; }
.threat-fill.yellow { background:#cc9900; }
html[data-theme="dark"] .threat-fill.yellow { background:#ffaa00; }
.threat-pct { font-family:var(--font-mono); font-size:7.5px; color:var(--mid); width:28px; text-align:right; }

/* Uptime widget */
.uptime-grid { display:flex; align-items:flex-end; gap:2px; height:48px; margin-bottom:10px; }
.uptime-bar { flex:1; background:var(--green-dim); border-radius:1px 1px 0 0; transition:background .3s; }
.uptime-bar.down { background:rgba(255,68,68,0.5); }
.uptime-bar.warn { background:rgba(255,165,0,0.45); }
.uptime-meta { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:7px; color:var(--mid); opacity:.45; letter-spacing:.1em; }

/* AI models */
.ai-models { display:flex; flex-direction:column; gap:8px; }
.ai-model-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--rule); }
.ai-model-name { font-family: var(--font-mono); font-size: 8.5px; color: var(--fg); flex: 1; letter-spacing: .08em; }
.ai-model-badge { font-family: var(--font-mono); font-size: 6.5px; padding: 2px 6px; letter-spacing: .12em; text-transform: uppercase; }
.badge-live { background: var(--green-faint); color: var(--green); border: 1px solid var(--green-dim); }
.badge-beta { background: rgba(204,153,0,.1); color: #aa8800; border: 1px solid rgba(204,153,0,.25); }
html[data-theme="dark"] .badge-beta { color: #ffa500; border-color: rgba(255,165,0,.25); }
.badge-dev  { background: rgba(100,149,237,.1); color: #4477cc; border: 1px solid rgba(100,149,237,.25); }
html[data-theme="dark"] .badge-dev { color: #6495ed; }

/* Cloud */
.cloud-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmet { padding: 10px; border: 1px solid var(--rule); background: rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.02); }
.cmet-val { font-family: var(--font-hud); font-size: 20px; font-weight: 700; color: var(--fg); line-height: 1; }
.cmet-lbl { font-family: var(--font-mono); font-size: 7px; color: var(--mid); letter-spacing: .14em; text-transform: uppercase; margin-top: 4px; }

/* DevOps */
.pipeline { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.pipe-step { flex: 1; text-align: center; }
.pipe-ico { font-size: 16px; margin-bottom: 4px; }
.pipe-name { font-family: var(--font-mono); font-size: 7px; color: var(--mid); letter-spacing: .1em; text-transform: uppercase; }
.pipe-arrow { color: var(--rule); font-size: 14px; flex-shrink: 0; }
.pipe-status { font-family: var(--font-mono); font-size: 7px; text-align: center; letter-spacing: .1em; }
.pipe-status.ok { color: var(--green); }

/* ERP */
.erp-list { display: flex; flex-direction: column; gap: 6px; }
.erp-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; background: rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.02); border-left: 2px solid var(--rule); transition: var(--tr-fast) !important; }
.erp-item:hover { border-left-color: var(--green); }
.erp-ico { font-size: 14px; }
.erp-name { font-family: var(--font-mono); font-size: 9px; color: var(--fg); flex: 1; letter-spacing: .06em; }
.erp-tag  { font-family: var(--font-mono); font-size: 6.5px; color: var(--green); opacity: 0.8; letter-spacing: .12em; }

/* API feed */
.api-feed { display: flex; flex-direction: column; gap: 5px; }
.api-call { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 8px; }
.api-method { padding: 2px 5px; font-size: 7px; font-weight: 600; letter-spacing: .08em; flex-shrink: 0; }
.method-get  { background: var(--green-faint); color: var(--green); }
.method-post { background: rgba(100,149,237,.15); color: #4477cc; }
html[data-theme="dark"] .method-post { color: #6495ed; }
.method-put  { background: rgba(204,153,0,.12); color: #aa8800; }
html[data-theme="dark"] .method-put { color: #ffa500; }
.api-path { color: var(--mid); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-ms { color: var(--mid); }
.api-ms.fast { color: var(--green); opacity: 0.8; }

/* Mobile apps */
.app-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.app-plat { padding: 12px; border: 1px solid var(--rule); text-align: center; }
.app-plat-ico { font-size: 22px; margin-bottom: 6px; }
.app-plat-name { font-family: var(--font-mono); font-size: 8px; color: var(--mid); letter-spacing: .12em; }
.app-plat-count { font-family: var(--font-hud); font-size: 15px; color: var(--fg); }

/* E-Commerce */
.shop-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.shop-stat { text-align: center; padding: 10px 6px; border: 1px solid var(--rule); }
.shop-stat-val { font-family: var(--font-hud); font-size: 18px; font-weight: 700; color: var(--fg); line-height: 1; }
.shop-stat-lbl { font-family: var(--font-mono); font-size: 6.5px; color: var(--mid); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; }
.shop-mini-chart { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 12px; }
.smc-bar { flex: 1; background: var(--green-dim); border-radius: 1px 1px 0 0; }
.smc-bar:hover { background: var(--green); opacity: 0.8; }

/* Tickets */
.ticket-list { display: flex; flex-direction: column; gap: 5px; }
.ticket { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.02); border: 1px solid var(--rule); }
.tick-prio { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.tick-prio.crit { background: #dd3333; }
html[data-theme="dark"] .tick-prio.crit { box-shadow: 0 0 6px rgba(255,68,68,.5); }
.tick-prio.high { background: #cc9900; }
html[data-theme="dark"] .tick-prio.high { background: #ffa500; }
.tick-prio.med  { background: #999900; }
html[data-theme="dark"] .tick-prio.med  { background: #ffd700; }
.tick-prio.low  { background: var(--green); }
.tick-id   { font-family: var(--font-mono); font-size: 7.5px; color: var(--mid); letter-spacing: .1em; flex-shrink: 0; width: 50px; }
.tick-desc { font-family: var(--font-mono); font-size: 8px; color: var(--fg); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tick-status { font-family: var(--font-mono); font-size: 6.5px; color: var(--green); opacity:0.8; letter-spacing: .1em; flex-shrink: 0; }

/* Software stack */
.software-stack { display: flex; flex-direction: column; gap: 6px; }
.stack-row { display: flex; align-items: center; gap: 8px; }
.stack-lang { font-family: var(--font-mono); font-size: 8.5px; color: var(--fg); width: 70px; letter-spacing: .06em; }
.stack-bar-wrap { flex: 1; height: 5px; background: var(--rule); }
.stack-fill { height: 100%; border-radius: 2px; }
.stack-pct { font-family: var(--font-mono); font-size: 8px; color: var(--mid); width: 28px; text-align: right; }

/* Consulting scores */
.consult-scores { display: flex; flex-direction: column; gap: 6px; }
.cscore { display: flex; align-items: center; gap: 6px; }
.cscore-name { font-family: var(--font-mono); font-size: 7.5px; color: var(--mid); letter-spacing: .08em; width: 90px; }
.cscore-bar { flex:1; height: 3px; background: var(--rule); }
.cscore-fill { height: 100%; background: var(--green); }
.cscore-val { font-family: var(--font-mono); font-size: 8px; color: var(--fg); margin-left: 4px; }

/* ══════════════════════════════════════════════════════
   STATS
══════════════════════════════════════════════════════ */
.stats { position:relative; background:var(--bg1); padding:100px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; }
.stats-grid-bg { position:absolute; inset:0; pointer-events:none; opacity:.03; background-image: linear-gradient(var(--fg) 1px, transparent 1px), linear-gradient(90deg, var(--fg) 1px, transparent 1px); background-size: 60px 60px; animation: gridfloat 20s linear infinite; }
@keyframes gridfloat { 0%{background-position:0 0} 100%{background-position:0 60px} }
.stats-code-rain { position:absolute; right:0; top:0; bottom:0; width:180px; pointer-events:none; overflow:hidden; opacity:.06; }
.stats-code-rain pre { font-family:var(--font-mono); font-size:10px; color:var(--fg); line-height:1.6; padding:20px 12px; animation: codeSlide 12s linear infinite; }
@keyframes codeSlide { 0%{transform:translateY(-50%)} 100%{transform:translateY(0%)} }
.stats-row { display:flex; align-items:center; justify-content:center; }
.stat { flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 36px; }
.stat-rule { width:1px; height:80px; background:var(--rule); flex-shrink:0; }
.stat-numrow { display:flex; align-items:baseline; justify-content:center; gap:4px; }
.stat-num { font-family:var(--font-disp); font-size:clamp(60px,8vw,108px); line-height:1; color:var(--fg); letter-spacing:.04em; }
.stat-sfx { font-family:var(--font-disp); font-size:clamp(28px,4vw,52px); color:var(--mid); line-height:1; }
.stat-lbl { font-family:var(--font-mono); font-size:9px; color:var(--mid); letter-spacing:.26em; text-transform:uppercase; margin-top:8px; }
.stat-live { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:7px; color:var(--green); opacity:0.7; letter-spacing:.18em; text-transform:uppercase; margin-top:6px; }
.stat-live-dot { width:4px; height:4px; border-radius:50%; background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse 2s infinite; }

/* ══════════════════════════════════════════════════════
   ABOUT / TERMINAL
══════════════════════════════════════════════════════ */
.about { background:var(--bg); padding:120px 0; border-bottom:1px solid var(--rule); }
.about-inner { display:grid; grid-template-columns:1fr 400px; gap:80px; align-items:center; }
.about-body { font-size:15px; font-weight:400; color:var(--mid); line-height:1.8; max-width:520px; margin-bottom:36px; }
.about-links { display:flex; flex-direction:column; gap:0; }
.alink { font-family:var(--font-mono); font-size:10px; color:var(--mid); text-decoration:none; letter-spacing:.16em; text-transform:uppercase; padding:12px 0; border-bottom:1px solid var(--rule); transition:var(--tr-fast) !important; display:flex; align-items:center; justify-content:space-between; }
.alink:hover { color:var(--fg); padding-left:8px; }
.alink span { opacity:.4; }
.alink:hover span { opacity:1; }
.terminal { background:var(--terminal-bg); border:1px solid var(--rule); position:relative; overflow:hidden; }
.terminal::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--green-dim),transparent); }
.terminal-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--rule); background:rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.05); }
.t-dot { width:9px; height:9px; border-radius:50%; }
.t-dot-r { background:#ff5f56; } .t-dot-y { background:#ffbd2e; } .t-dot-g { background:#27c93f; }
.terminal-title { font-family:var(--font-mono); font-size:9px; color:var(--mid); letter-spacing:.16em; text-transform:uppercase; flex:1; text-align:center; margin-left:-48px; }
.terminal-body { padding:20px; font-family:var(--font-mono); font-size:11.5px; line-height:1.7; min-height:220px; }
.t-line { display:flex; gap:8px; margin-bottom:2px; }
.t-prompt { color:var(--green); opacity:0.7; flex-shrink:0; }
.t-cmd    { color:var(--fg); opacity:0.85; }
.t-comment{ color:var(--mid); opacity:0.4; }
.t-out    { color:var(--mid); opacity:0.7; padding-left:20px; }
.t-cursor-line { display:flex; gap:8px; }
.t-cursor { display:inline-block; width:8px; height:14px; background:var(--green); margin-left:2px; animation:blink .8s step-end infinite; }

/* ══════════════════════════════════════════════════════
   PROCESS
══════════════════════════════════════════════════════ */
.process { background:var(--bg1); padding:120px 0; border-bottom:1px solid var(--rule); }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); margin-top:60px; }
.proc-step { padding:36px 28px; background:var(--bg1); position:relative; transition:var(--tr) !important; }
.proc-step:hover { background:var(--bg2); }
.proc-step::before,.proc-step::after { content:''; position:absolute; width:12px; height:12px; border-style:solid; border-color:var(--rule); }
.proc-step::before { top:10px; left:10px; border-width:1px 0 0 1px; }
.proc-step::after  { bottom:10px; right:10px; border-width:0 1px 1px 0; }
.proc-step:hover::before,.proc-step:hover::after { border-color:var(--bg4); }
.proc-n { font-family:var(--font-hud); font-size:9px; font-weight:700; color:var(--mid); opacity:0.4; letter-spacing:.2em; margin-bottom:20px; display:flex; align-items:center; gap:8px; }
.proc-n::after { content:''; flex:1; height:1px; background:var(--rule); }
.proc-ico { font-size:28px; margin-bottom:16px; }
.proc-title { font-family:var(--font-disp); font-size:20px; letter-spacing:.04em; margin-bottom:10px; color:var(--fg); }
.proc-desc  { font-family:var(--font-ui); font-size:12.5px; color:var(--mid); line-height:1.6; }

/* ══════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════ */
.cta-sec { background:var(--bg); padding:140px 0; position:relative; overflow:hidden; }
.cta-ghost { position:absolute; bottom:-10%; right:-2%; font-family:var(--font-disp); font-size:32vw; line-height:.8; color:rgba(var(--particle-r),var(--particle-g),var(--particle-b),0.03); pointer-events:none; user-select:none; white-space:nowrap; }
.cta-box { max-width:720px; position:relative; z-index:2; }
.cta-title { font-family:var(--font-disp); font-size:clamp(60px,9vw,116px); line-height:.9; letter-spacing:.03em; color:var(--fg); margin-bottom:24px; }
.cta-sub { font-family:var(--font-ui); font-size:14px; color:var(--mid); line-height:1.65; margin-bottom:48px; max-width:400px; }
.cta-btns { display:flex; gap:16px; flex-wrap:wrap; }
.cta-binary { position:absolute; top:0; right:0; bottom:0; width:220px; overflow:hidden; opacity:.04; pointer-events:none; }
.cta-binary pre { font-family:var(--font-mono); font-size:10px; color:var(--fg); line-height:1.5; animation:codeSlide 18s linear infinite; }

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.pe-footer { background:var(--bg1); border-top:1px solid var(--rule); padding:60px 0 30px; }
.footer-inner { display:grid; grid-template-columns:200px 1fr auto; gap:60px; align-items:start; margin-bottom:48px; }
.footer-brand p { font-family:var(--font-ui); font-size:12px; color:var(--mid); line-height:1.6; margin-top:12px; }
.footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.footer-col-title { font-family:var(--font-mono); font-size:8px; color:var(--mid); opacity:0.5; letter-spacing:.26em; text-transform:uppercase; margin-bottom:14px; }
.footer-col a { display:block; font-family:var(--font-ui); font-size:12.5px; color:var(--mid); text-decoration:none; margin-bottom:8px; transition:var(--tr-fast) !important; }
.footer-col a:hover { color:var(--fg); }
.footer-contact { font-family:var(--font-mono); font-size:10px; color:var(--mid); letter-spacing:.08em; line-height:2.2; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); padding-top:24px; }
.footer-copy { font-family:var(--font-mono); font-size:8px; color:var(--mid); opacity:0.3; letter-spacing:.14em; text-transform:uppercase; }
.footer-copy a { color:inherit; text-decoration:none; }
.footer-hud-status { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:7.5px; color:var(--green); opacity:0.6; letter-spacing:.2em; text-transform:uppercase; }

/* MISC */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(0.16,1,0.3,1) !important; }
.reveal.vis { opacity:1; transform:translateY(0); }

/* ══════════════════════════════════════════════════════
   REFERENZEN — CLIENT LOGO TICKER
══════════════════════════════════════════════════════ */
.referenzen { background: var(--bg1); padding: 120px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; }

.ref-ticker-wrap { position: relative; overflow: hidden; margin: 60px 0 48px; }
.ref-ticker-fade { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none; }
.ref-ticker-fade--l { left: 0; background: linear-gradient(to right, var(--bg1), transparent); }
.ref-ticker-fade--r { right: 0; background: linear-gradient(to left, var(--bg1), transparent); }

.ref-ticker { overflow: hidden; }
.ref-ticker-inner { display: flex; gap: 16px; width: max-content; animation: refScroll 32s linear infinite; }
.ref-ticker-inner:hover { animation-play-state: paused; }
@keyframes refScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.ref-logo-card {
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-width: 200px; padding: 20px 28px;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  transition: var(--tr-fast) !important;
  position: relative; overflow: hidden;
  cursor: default;
}
.ref-logo-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--green-dim), transparent);
  transform: scaleX(0); transition: transform 0.4s ease;
}
.ref-logo-card:hover { border-color: var(--green-dim); background: var(--card-hover); transform: translateY(-3px); }
.ref-logo-card:hover::before { transform: scaleX(1); }

.ref-logo-domain {
  font-family: var(--font-hud);
  font-size: 13px; font-weight: 700;
  color: var(--fg); letter-spacing: .06em;
  text-align: center; margin-bottom: 6px;
  line-height: 1.2;
}
.ref-logo-tag {
  font-family: var(--font-mono);
  font-size: 6.5px; color: var(--green); opacity: 0.65;
  letter-spacing: .2em; text-transform: uppercase; text-align: center;
}



.ref-counter-row { display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 48px; }
.ref-cnt { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 32px; }
.ref-cnt-val { font-family: var(--font-disp); font-size: clamp(36px, 5vw, 64px); line-height: 1; color: var(--fg); display: block; margin-bottom: 6px; }
.ref-cnt-lbl { font-family: var(--font-mono); font-size: 8px; color: var(--mid); letter-spacing: .22em; text-transform: uppercase; }
.ref-cnt-rule { width: 1px; height: 48px; background: var(--rule); flex-shrink: 0; }


.bewertungen { background: var(--bg); padding: 120px 0; border-bottom: 1px solid var(--rule); }

.bew-summary {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 48px; align-items: center;
  background: var(--bg1);
  border: 1px solid var(--rule);
  padding: 36px 40px;
  margin-bottom: 60px;
  position: relative; overflow: hidden;
}
.bew-summary::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--green-dim), transparent);
}

.bew-score-block { text-align: center; }
.bew-score-num {
  font-family: var(--font-disp); font-size: 80px; line-height: 1;
  color: var(--fg); letter-spacing: .04em;
}
.bew-stars { font-size: 24px; color: #ffdf5e; letter-spacing: .06em; margin: 4px 0; }
html[data-theme="light"] .bew-stars { text-shadow: 0 0 8px rgba(200,160,0,0.4); }
html[data-theme="dark"]  .bew-stars { text-shadow: 0 0 10px rgba(255,223,94,0.4); }
.bew-score-sub { font-family: var(--font-mono); font-size: 7.5px; color: var(--green); opacity: 0.7; letter-spacing: .22em; text-transform: uppercase; margin-top: 6px; }

.bew-score-bars { display: flex; flex-direction: column; gap: 7px; }
.bew-bar-row { display: flex; align-items: center; gap: 10px; }
.bew-bar-lbl { font-family: var(--font-mono); font-size: 8px; color: var(--mid); width: 26px; letter-spacing: .06em; }
.bew-bar-track { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.bew-bar-fill { height: 100%; background: linear-gradient(to right, var(--green-dim), var(--green)); border-radius: 2px; }
.bew-bar-n { font-family: var(--font-mono); font-size: 8px; color: var(--mid); width: 14px; text-align: right; }

.bew-summary-meta { text-align: center; }
.bew-meta-num { font-family: var(--font-disp); font-size: 56px; line-height: 1; color: var(--fg); }
.bew-meta-lbl { font-family: var(--font-mono); font-size: 7.5px; color: var(--mid); letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; line-height: 1.8; }

.bew-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; }

.bew-card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative; overflow: hidden;
  transition: var(--tr) !important;
}
.bew-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,223,94,0.4), transparent);
  transform: scaleX(0); transition: transform 0.4s ease;
}
.bew-card:hover { border-color: rgba(255,223,94,0.25); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
.bew-card:hover::before { transform: scaleX(1); }

.bew-card-head { display: flex; align-items: center; gap: 12px; }
.bew-avatar {
  width: 40px; height: 40px; border-radius: 0;
  background: var(--fg); color: var(--bg);
  font-family: var(--font-hud); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; letter-spacing: .06em;
}
.bew-id { flex: 1; min-width: 0; }
.bew-name { font-family: var(--font-hud); font-size: 11px; color: var(--fg); letter-spacing: .08em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bew-date { font-family: var(--font-mono); font-size: 7.5px; color: var(--mid); letter-spacing: .1em; margin-top: 2px; }
.bew-stars-sm { font-size: 13px; color: #ffdf5e; letter-spacing: .04em; flex-shrink: 0; }

.bew-body { font-family: var(--font-ui); font-size: 13.5px; color: var(--mid); line-height: 1.75; flex: 1; }

.bew-project {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  background: var(--green-faint);
  border-left: 2px solid var(--green);
  font-family: var(--font-mono); font-size: 8.5px; color: var(--mid);
  letter-spacing: .06em;
}
.bew-proj-ico { font-size: 12px; }
.bew-proj-link { color: var(--green); text-decoration: none; transition: var(--tr-fast) !important; }
.bew-proj-link:hover { opacity: 0.7; }
.bew-proj-tag { margin-left: auto; letter-spacing: .14em; opacity: 0.5; font-size: 7px; }

.bew-cta { display: flex; align-items: center; justify-content: center; gap: 16px; }

@media(max-width:900px) {
  .bew-summary { grid-template-columns: 1fr 1fr; gap: 28px; }
  .bew-summary-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; justify-content: center; }
  .bew-grid { grid-template-columns: 1fr; }
  .ref-counter-row { flex-wrap: wrap; gap: 16px 0; }
  .ref-cnt { flex-basis: 33.33%; }
  .ref-cnt-rule { display: none; }
  .referenzen { padding: 80px 0; }
  .bewertungen { padding: 80px 0; }
}
@media(max-width:600px) {
  .bew-summary { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .bew-score-block { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
  .bew-score-num { font-size: 56px; }
  .bew-grid { gap: 14px; }
  .bew-card { padding: 20px 16px 18px; }
  .bew-body { font-size: 13px; }
  .bew-cta { flex-direction: column; gap: 10px; width: 100%; }
  .bew-cta .btn-primary, .bew-cta .btn-ghost { width: 100%; justify-content: center; }
  .ref-cnt { flex-basis: 100%; padding: 8px 0; }
  .ref-logo-card { min-width: 160px; padding: 16px 20px; }
  .ref-logo-domain { font-size: 11px; }
  .referenzen { padding: 64px 0; }
  .bewertungen { padding: 64px 0; }
}


@media(max-width:1300px) {
  .hero-side { display:none; }
  .hero-content { left:60px; right:60px; }
  #atomLogoContainer { bottom: 36%; }
}
@media(max-width:1100px) {
  .srv-grid { grid-template-columns:repeat(3,1fr); }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .dash-grid { grid-template-columns:repeat(2,1fr); }
  .footer-links { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:900px) {
  .pe-nav { padding:0 20px; height:48px; }
  .nav-logo-text { font-size:9px; letter-spacing:0.18em; }
  .nav-logo-sub { display:none; }
  .nav-links { display:none; }
  .nav-clock { font-size:10px; }
  .theme-label { display:none; }
  .time-banner { font-size:6px; }
  .hero { height:100svh; min-height:520px; }
  .hero-content { left:24px; right:24px; padding-bottom:40px; top:52px; }
  #atomLogoContainer { top: 64px; bottom: 34%; }
  .htl-1 { font-size:clamp(44px,10vw,76px); }
  .htl-2 { font-size:clamp(40px,9vw,68px) !important; }
  .hero-tagline { font-size:9px; letter-spacing:0.18em; }
  .hero-typein { font-size:9px; }
  .hero-cta { gap:10px; }
  .hero-eyebrow { font-size:7px; letter-spacing:0.25em; }
  .hbot-right { display:none; }
  .hero-hud-bot { padding:0 16px; }
  .container { padding:0 20px; }
  .srv-grid { grid-template-columns:repeat(2,1fr); }
  .services { padding:80px 0; }
  .sec-title { font-size:clamp(40px,7vw,72px); }
  .dash-grid { grid-template-columns:1fr; }
  .dashboard-sec { padding:80px 0; }
  .stats { padding:80px 0; }
  .stats-row { flex-wrap:wrap; gap:28px 0; }
  .stat { flex-basis:50%; padding:0 20px; }
  .stat-rule { display:none; }
  .stats-code-rain { display:none; }
  .about { padding:80px 0; }
  .about-inner { grid-template-columns:1fr; gap:48px; }
  .process { padding:80px 0; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
  .cta-sec { padding:100px 0; }
  .cta-title { font-size:clamp(48px,8vw,90px); }
  .pe-footer { padding:48px 0 24px; }
  .footer-inner { grid-template-columns:1fr; gap:28px; margin-bottom:32px; }
  .footer-links { grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media(max-width:600px) {
  .pe-nav { padding:0 16px; height:46px; }
  .nav-logo-text { font-size:8px; letter-spacing:0.14em; }
  .nav-center { display:none; }
  .nav-clock { font-size:9px; }
  .theme-toggle { padding:5px 9px; }
  .theme-badge { display:none; }
  .hero { min-height:100svh; }
  .hero-content { left:16px; right:16px; top: 46px; padding-bottom:36px; justify-content:flex-end; }
  #atomLogoContainer { top: 60px; bottom: 36%; }
  .hero-title { margin-bottom: 6px; }
  .hero-tagline { margin-bottom: 10px; }
  .hero-typein { margin-bottom: 18px; }
  .htl-1 { font-size:clamp(38px,14vw,64px); white-space:normal; }
  .htl-2 { font-size:clamp(34px,12vw,56px) !important; }
  .hero-title { white-space:normal; text-align:center; }
  .hero-tagline { font-size:8px; letter-spacing:0.14em; }
  .hero-typein { font-size:8px; }
  .hero-eyebrow { font-size:6.5px; letter-spacing:0.18em; }
  .hero-cta { flex-direction:column; gap:10px; width:100%; padding-bottom:8px; }
  .btn-primary, .btn-ghost { width:100%; justify-content:center; font-size:9px; padding:12px 20px; }
  .hbot-right { display:none; }
  .hero-hud-bot { padding:0 12px; height:38px; }
  .hbot-ticker span { font-size:7px; letter-spacing:0.14em; }
  .container { padding:0 16px; }
  .sec-title { font-size:clamp(36px,12vw,60px); }
  .sec-sub { font-size:13px; }
  .services { padding:64px 0; }
  .srv-grid { grid-template-columns:1fr; }
  .srv-card { padding:24px 20px 20px; }
  .srv-title { font-size:19px; }
  .dashboard-sec { padding:64px 0; }
  .dash-grid { grid-template-columns:1fr; }
  .dash-widget { padding:22px 18px; }
  .pipeline { gap:2px; }
  .pipe-ico { font-size:13px; }
  .pipe-name { font-size:6px; }
  .pipe-arrow { font-size:11px; }
  .stats { padding:64px 0; }
  .stats-row { flex-direction:column; gap:24px; }
  .stat { flex-basis:auto; width:100%; padding:0 0; }
  .stat-num { font-size:clamp(52px,16vw,88px); }
  .about { padding:64px 0; }
  .about-body { font-size:14px; }
  .terminal-body { font-size:10px; padding:14px; min-height:160px; }
  .process { padding:64px 0; }
  .process-grid { grid-template-columns:1fr; }
  .proc-step { padding:28px 20px; }
  .cta-sec { padding:80px 0; }
  .cta-title { font-size:clamp(42px,13vw,80px); line-height:.92; }
  .cta-btns { flex-direction:column; gap:10px; }
  .cta-binary { display:none; }
  .pe-footer { padding:40px 0 20px; }
  .footer-inner { gap:24px; margin-bottom:24px; }
  .footer-links { grid-template-columns:1fr 1fr; gap:16px; }
  .footer-bottom { flex-direction:column; gap:10px; text-align:center; }
  .footer-contact { font-size:9px; line-height:2; }
}
@media(max-width:400px) {
  .htl-1 { font-size:clamp(32px,12vw,52px); }
  .htl-2 { font-size:clamp(28px,10vw,46px) !important; }
  .sec-title { font-size:clamp(30px,10vw,48px); }
  .nav-clock { display:none; }
  .footer-links { grid-template-columns:1fr; }
  .cta-title { font-size:clamp(36px,11vw,64px); }
}