/* ═══════════════════════════════════════════════════════════
   BENNY'S MOTORWORKS — MAIN STYLESHEET
   ═══════════════════════════════════════════════════════════ */

:root {
  --red:        #dc2626;
  --red-dark:   #b91c1c;
  --red-light:  #ef4444;
  --bg:         #09090b;
  --bg2:        #18181b;
  --bg3:        #27272a;
  --border:     #3f3f46;
  --text:       #fafafa;
  --text-muted: #a1a1aa;
  --sidebar-w:  260px;
  --radius:     8px;
  --shadow:     0 4px 24px rgba(0,0,0,.5);
}

/* ── Page Loader ─────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease, visibility .4s ease;
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--bg3);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Reset ───────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
a { color:var(--red-light); text-decoration:none; }
a:hover { color:var(--text); }
img { max-width:100%; display:block; }
input,select,textarea,button { font-family:inherit; }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }

/* ══════════════════════════════════════════
   PUBLIC SITE
   ══════════════════════════════════════════ */

/* ── Navbar ──────────────────────────────── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 2rem;
  background: rgba(9,9,11,.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(220,38,38,.2);
  box-shadow: 0 1px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03) inset;
  transition: background .3s, border-color .3s;
}
.navbar.scrolled {
  background: rgba(9,9,11,.88);
  border-bottom-color: rgba(220,38,38,.3);
  box-shadow: 0 4px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.navbar-brand { display:flex; align-items:center; gap:.6rem; font-size:1.2rem; font-weight:700; color:var(--text); }
.navbar-brand .logo { width:36px; height:36px; }
.navbar-brand span { color:var(--red); }
.navbar-links { display:flex; align-items:center; gap:1.5rem; }
.navbar-links a { color:var(--text-muted); font-size:.9rem; font-weight:500; transition:color .2s; }
.navbar-links a:hover { color:var(--text); }
.navbar-links .btn-nav {
  background:var(--red); color:#fff; padding:.4rem 1rem; border-radius:var(--radius);
  font-weight:600; transition:background .2s;
}
.navbar-links .btn-nav:hover { background:var(--red-dark); color:#fff; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.hamburger span { width:24px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* ── Hero ────────────────────────────────── */
.hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  overflow:hidden;
  background: linear-gradient(135deg, #09090b 0%, #1a0000 50%, #09090b 100%);
  padding: 6rem 1.5rem 4rem;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(220,38,38,.15) 0%, transparent 70%);
}
.hero-grid {
  position:absolute; inset:0; opacity:.04;
  background-image: linear-gradient(var(--border) 1px,transparent 1px),
                    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size: 60px 60px;
}
.hero-content { position:relative; max-width:820px; }
.hero-badge {
  display:inline-block; background:rgba(220,38,38,.15); border:1px solid rgba(220,38,38,.3);
  color:var(--red-light); padding:.3rem 1rem; border-radius:100px; font-size:.8rem;
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.5rem;
}
.hero h1 { font-size:clamp(2.5rem,6vw,5rem); font-weight:800; line-height:1.1; margin-bottom:1.2rem; }
.hero h1 .accent { color:var(--red); }
.hero p { font-size:clamp(1rem,2vw,1.2rem); color:var(--text-muted); max-width:560px; margin:0 auto 2.5rem; line-height:1.7; }
.hero-cta { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-scroll {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  color:var(--text-muted); font-size:.75rem; animation:bounce 2s infinite;
}
.hero-scroll svg { width:20px; height:20px; }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── Buttons ─────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.65rem 1.4rem; border-radius:var(--radius);
  font-size:.9rem; font-weight:600; cursor:pointer;
  border:none; transition:all .2s; white-space:nowrap;
}
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { background:var(--red-dark); color:#fff; transform:translateY(-1px); box-shadow:0 4px 16px rgba(220,38,38,.4); }
.btn-outline { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-outline:hover { background:var(--bg3); color:var(--text); border-color:var(--text-muted); }
.btn-sm { padding:.4rem .9rem; font-size:.82rem; }
.btn-danger { background:#7f1d1d; color:#fecaca; }
.btn-danger:hover { background:#991b1b; color:#fff; }
.btn-success { background:#14532d; color:#86efac; }
.btn-success:hover { background:#166534; color:#fff; }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid transparent; }
.btn-ghost:hover { background:var(--bg3); color:var(--text); border-color:var(--border); }

/* ── Section Shared ──────────────────────── */
.section { padding:5rem 1.5rem; }
.section-alt { background:var(--bg2); }
.section-header { text-align:center; margin-bottom:3.5rem; }
.section-header .label {
  display:inline-block; background:rgba(220,38,38,.12); color:var(--red-light);
  border:1px solid rgba(220,38,38,.25); padding:.25rem .85rem;
  border-radius:100px; font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin-bottom:.8rem;
}
.section-header h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:.75rem; }
.section-header p { color:var(--text-muted); max-width:520px; margin:0 auto; line-height:1.7; }

/* ── Stats Bar ───────────────────────────── */
.stats-bar { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:2rem 1.5rem; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:2rem; max-width:1100px; margin:0 auto; text-align:center; }
.stat-item h3 { font-size:2.5rem; font-weight:800; color:var(--red); line-height:1; }
.stat-item p { color:var(--text-muted); font-size:.85rem; margin-top:.3rem; }

/* ── Services Grid ───────────────────────── */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:1200px; margin:0 auto; }
.service-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:2rem; transition:all .3s;
}
.service-card:hover { border-color:var(--red); transform:translateY(-4px); box-shadow:0 12px 40px rgba(220,38,38,.15); }
.service-icon { width:48px; height:48px; background:rgba(220,38,38,.12); border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.service-icon svg { width:24px; height:24px; color:var(--red); }
.service-card h3 { font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.service-card p { color:var(--text-muted); font-size:.9rem; line-height:1.6; }

/* ── Gallery Grid ────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 1.5rem; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem; }
.gallery-card {
  position:relative; border-radius:10px; overflow:hidden;
  background:var(--bg2); border:1px solid var(--border);
  aspect-ratio:4/3; cursor:pointer;
}
.gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.gallery-card:hover img { transform:scale(1.05); }
.gallery-card .overlay {
  position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85),transparent);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1rem;
  opacity:0; transition:opacity .3s;
}
.gallery-card:hover .overlay { opacity:1; }
.gallery-card .overlay h4 { font-weight:700; font-size:.95rem; }
.gallery-card .overlay span { font-size:.8rem; color:var(--text-muted); }

/* ── Team Grid ───────────────────────────── */
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }
.team-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:2rem 1.5rem; text-align:center; transition:all .3s;
}
.team-card:hover { border-color:var(--red); transform:translateY(-4px); }
.team-avatar { width:80px; height:80px; border-radius:50%; object-fit:cover; margin:0 auto 1rem; border:3px solid var(--red); }
.team-avatar-placeholder { width:80px; height:80px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; border:3px solid var(--border); font-size:2rem; color:var(--text-muted); }
.team-card h3 { font-weight:700; margin-bottom:.3rem; }
.team-card .role { color:var(--red-light); font-size:.85rem; font-weight:600; }

/* ── Location ────────────────────────────── */
.location-wrap { display:grid; grid-template-columns:1fr 1fr; gap:3rem; max-width:1100px; margin:0 auto; align-items:center; }
.location-info h2 { font-size:2rem; font-weight:800; margin-bottom:1rem; }
.location-info p { color:var(--text-muted); line-height:1.7; margin-bottom:.6rem; }
.location-map { background:var(--bg2); border:1px solid var(--border); border-radius:12px; height:280px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.9rem; }

/* ── CTA Section ─────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #1a0000 0%, var(--bg) 100%);
  border-top:1px solid rgba(220,38,38,.2); border-bottom:1px solid rgba(220,38,38,.2);
  text-align:center; padding:5rem 1.5rem;
}
.cta-section h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:1rem; }
.cta-section p { color:var(--text-muted); max-width:480px; margin:0 auto 2rem; }

/* ── Public Footer ───────────────────────── */
.site-footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:3rem 1.5rem 2rem;
  text-align:center;
}
.footer-logo { font-size:1.3rem; font-weight:800; margin-bottom:.5rem; }
.footer-logo span { color:var(--red); }
.footer-tagline { color:var(--text-muted); font-size:.85rem; margin-bottom:2rem; }
.footer-links { display:flex; justify-content:center; gap:2rem; flex-wrap:wrap; margin-bottom:2rem; }
.footer-links a { color:var(--text-muted); font-size:.85rem; transition:color .2s; }
.footer-links a:hover { color:var(--red-light); }
.footer-legal { color:#52525b; font-size:.72rem; max-width:760px; margin:0 auto; line-height:1.6; border-top:1px solid var(--border); padding-top:1.5rem; }

/* ── Forms (public) ──────────────────────── */
.form-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:6rem 1.5rem 3rem; }
.form-card { background:var(--bg2); border:1px solid var(--border); border-radius:16px; padding:2.5rem; width:100%; max-width:600px; }
.form-card h1 { font-size:1.6rem; font-weight:800; margin-bottom:.4rem; }
.form-card .subtitle { color:var(--text-muted); margin-bottom:2rem; font-size:.9rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-size:.85rem; font-weight:600; color:var(--text-muted); margin-bottom:.4rem; }
.form-group label span { color:var(--red); }
.form-control {
  width:100%; background:var(--bg3); border:1px solid var(--border);
  color:var(--text); border-radius:var(--radius); padding:.65rem .9rem;
  font-size:.9rem; transition:border-color .2s, box-shadow .2s;
}
.form-control:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.15); }
textarea.form-control { resize:vertical; min-height:100px; }
.alert { padding:.85rem 1rem; border-radius:var(--radius); margin-bottom:1.2rem; font-size:.9rem; }
.alert-danger { background:rgba(220,38,38,.12); border:1px solid rgba(220,38,38,.3); color:#fca5a5; }
.alert-success { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); color:#86efac; }

/* ── Kategorie Filters ───────────────────── */
.filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.filter-btn { padding:.4rem .9rem; border-radius:100px; border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:.82rem; font-weight:500; cursor:pointer; transition:all .2s; }
.filter-btn:hover,.filter-btn.active { background:var(--red); color:#fff; border-color:var(--red); }

/* ── Login Page ──────────────────────────── */
.login-bg {
  position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.login-bg::before {
  content:''; position:absolute; border-radius:50%;
  width:700px; height:700px;
  background:radial-gradient(circle at center,rgba(220,38,38,.15) 0%,transparent 60%);
  top:-200px; left:-150px;
}
.login-bg::after {
  content:''; position:absolute; border-radius:50%;
  width:500px; height:500px;
  background:radial-gradient(circle at center,rgba(124,58,237,.1) 0%,transparent 65%);
  bottom:-120px; right:-80px;
}
.login-page {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:2rem; position:relative; z-index:1;
}
.login-card {
  background:rgba(24,24,27,.78);
  backdrop-filter:blur(28px); -webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 32px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius:20px; padding:3rem 2.5rem;
  width:100%; max-width:430px; text-align:center;
}
.login-icon {
  width:68px; height:68px;
  background:rgba(220,38,38,.1); border:1px solid rgba(220,38,38,.2);
  border-radius:16px; display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.75rem;
  box-shadow:0 0 24px rgba(220,38,38,.12);
}
.login-icon svg { width:32px; height:32px; color:var(--red); }
.login-card h1 { font-size:1.75rem; font-weight:800; margin-bottom:.35rem; letter-spacing:-.02em; }
.login-card > p { color:var(--text-muted); margin-bottom:2rem; font-size:.88rem; line-height:1.55; }
.login-error-msg {
  background:rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3);
  color:#fca5a5; padding:.7rem 1rem; border-radius:10px;
  margin-bottom:1.25rem; font-size:.83rem; text-align:left; line-height:1.4;
}
.btn-discord {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background:linear-gradient(135deg,#5865F2,#4752C4);
  color:#fff; width:100%; padding:.82rem; font-size:.95rem; font-weight:600;
  border-radius:12px; border:none; cursor:pointer; transition:all .2s;
  box-shadow:0 4px 16px rgba(88,101,242,.3);
}
.btn-discord:hover { background:linear-gradient(135deg,#4752C4,#3a43b0); color:#fff; transform:translateY(-1px); box-shadow:0 6px 20px rgba(88,101,242,.4); }
.login-divider {
  display:flex; align-items:center; gap:.75rem; margin:1.4rem 0;
}
.login-divider::before,.login-divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.07); }
.login-divider span { font-size:.7rem; color:#3f3f46; flex-shrink:0; letter-spacing:.05em; text-transform:uppercase; }
.login-input-group { display:flex; flex-direction:column; gap:.6rem; margin-bottom:.9rem; }
.login-input {
  display:block; width:100%;
  background:rgba(9,9,11,.5); border:1px solid rgba(255,255,255,.08);
  color:var(--text); padding:.72rem 1rem; border-radius:10px;
  font-size:.9rem; font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.login-input:focus { outline:none; border-color:rgba(220,38,38,.45); box-shadow:0 0 0 3px rgba(220,38,38,.1); }
.login-input::placeholder { color:#3f3f46; }
.login-submit {
  width:100%; padding:.75rem; font-size:.95rem; font-weight:700;
  background:linear-gradient(135deg,var(--red),var(--red-dark));
  color:#fff; border:none; border-radius:12px; cursor:pointer;
  transition:all .2s; box-shadow:0 4px 16px rgba(220,38,38,.25);
}
.login-submit:hover { transform:translateY(-1px); box-shadow:0 6px 22px rgba(220,38,38,.35); }
.login-note { color:#3f3f46; font-size:.73rem; margin-top:1.25rem; line-height:1.5; }

/* ── Member Grid (Team Panel) ───────────── */
.member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; padding:1.25rem; }
.member-card {
  background:rgba(24,24,27,.65);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:1.1rem;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s,box-shadow .2s;
  display:flex; flex-direction:column; gap:.85rem;
}
.member-card:hover { border-color:rgba(220,38,38,.22); box-shadow:0 4px 24px rgba(220,38,38,.06); }
.member-card.is-hidden { opacity:.45; border-style:dashed; }
.member-card-head { display:flex; align-items:center; gap:.75rem; }
.member-card-avatar { width:50px; height:50px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(220,38,38,.25); }
.member-card-initials {
  width:50px; height:50px; border-radius:50%;
  background:rgba(220,38,38,.1); border:2px solid rgba(220,38,38,.2);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.15rem; color:var(--red-light); flex-shrink:0;
}
.member-card-info { flex:1; min-width:0; }
.member-card-name { font-weight:700; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-card-id { font-size:.68rem; color:#3f3f46; font-family:monospace; margin-top:.1rem; }
.member-card-meta { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.member-desc-form { display:flex; gap:.4rem; }
.member-desc-input {
  flex:1; background:rgba(9,9,11,.4); border:1px solid rgba(255,255,255,.07);
  color:var(--text); padding:.38rem .6rem; border-radius:8px; font-size:.8rem; font-family:inherit;
}
.member-desc-input:focus { outline:none; border-color:rgba(220,38,38,.4); }
.member-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; flex-wrap:wrap;
  padding-top:.75rem; border-top:1px solid rgba(255,255,255,.05);
}
.rang-form { display:flex; align-items:center; gap:.4rem; }
.rang-input {
  width:70px; background:rgba(9,9,11,.4); border:1px solid rgba(255,255,255,.07);
  color:var(--text); padding:.35rem .5rem; border-radius:8px; font-size:.8rem;
  text-align:center;
}
.rang-input:focus { outline:none; border-color:rgba(220,38,38,.4); }

/* ── Role Preview (Admin) ───────────────── */
.role-tabs-bar { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.role-tab-btn {
  padding:.45rem 1.1rem; border-radius:100px;
  border:1px solid var(--border); background:transparent;
  color:var(--text-muted); font-size:.82rem; font-weight:600;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:.5rem;
}
.role-tab-btn:hover { border-color:var(--red); color:var(--text); }
.role-tab-btn.rp-active { background:rgba(220,38,38,.12); color:var(--red-light); border-color:rgba(220,38,38,.3); }
.role-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.role-dot-gold { background:#f59e0b; }
.role-dot-blue { background:#60a5fa; }
.role-dot-green { background:#4ade80; }
.preview-shell {
  display:flex; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:var(--bg); min-height:340px;
  box-shadow:0 8px 40px rgba(0,0,0,.45);
}
.preview-sidebar-pane {
  width:180px; flex-shrink:0;
  background:rgba(24,24,27,.95);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex; flex-direction:column; overflow:hidden;
}
.preview-sb-header { padding:.75rem .7rem .5rem; border-bottom:1px solid rgba(255,255,255,.06); }
.preview-sb-brand { font-size:.75rem; font-weight:800; color:var(--text); }
.preview-sb-brand span { color:var(--red); }
.preview-sb-sub { font-size:.58rem; color:#3f3f46; margin-top:.1rem; }
.preview-nav { flex:1; padding:.4rem 0; }
.preview-nav-section { padding:.35rem .65rem .1rem; font-size:.52rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#3f3f46; }
.preview-nav-item {
  display:flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem; font-size:.7rem;
  color:#71717a; border-left:2px solid transparent;
  transition:opacity .2s;
}
.preview-nav-item.pni-active { background:rgba(220,38,38,.07); color:var(--red-light); border-left-color:var(--red); font-weight:600; }
.preview-nav-item.pni-locked { opacity:.2; }
.preview-nav-dot { width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.preview-sb-footer { padding:.55rem .7rem; border-top:1px solid rgba(255,255,255,.05); display:flex; align-items:center; gap:.4rem; }
.preview-user-orb { width:20px; height:20px; border-radius:50%; background:rgba(220,38,38,.15); display:flex; align-items:center; justify-content:center; font-size:.52rem; font-weight:800; color:var(--red-light); flex-shrink:0; }
.preview-user-label { font-size:.6rem; color:#52525b; }
.preview-main-pane { flex:1; padding:.85rem; display:flex; flex-direction:column; gap:.5rem; overflow:hidden; }
.preview-topbar-fake { background:rgba(24,24,27,.5); border:1px solid rgba(255,255,255,.05); border-radius:7px; padding:.45rem .7rem; font-size:.7rem; color:var(--text-muted); font-weight:600; margin-bottom:.2rem; }
.preview-access-title { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#52525b; margin:.2rem 0 .3rem; }
.preview-access-item {
  background:rgba(24,24,27,.4); border:1px solid rgba(255,255,255,.04);
  border-radius:7px; padding:.4rem .6rem; font-size:.7rem;
  color:#52525b; display:flex; align-items:center; gap:.45rem;
}
.preview-access-item.pai-yes { border-color:rgba(34,197,94,.2); color:var(--text); }
.preview-access-item .pai-icon { font-size:.6rem; flex-shrink:0; }

/* ══════════════════════════════════════════
   PANEL LAYOUT
   ══════════════════════════════════════════ */

.panel-layout { display:flex; min-height:100vh; }

/* ── Sidebar ─────────────────────────────── */
.sidebar {
  width:var(--sidebar-w); background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; left:0; top:0; bottom:0;
  z-index:50; transition:transform .3s;
  overflow-y:auto; overflow-x:hidden;
}
.sidebar-header {
  padding:1.2rem 1.2rem .8rem; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:.7rem;
}
.sidebar-logo { width:36px; height:36px; flex-shrink:0; }
.sidebar-title { font-size:1rem; font-weight:800; }
.sidebar-title span { color:var(--red); }
.sidebar-subtitle { font-size:.7rem; color:var(--text-muted); }
.sidebar-nav { flex:1; padding:.8rem 0; }
.nav-section { padding:.6rem 1rem .2rem; font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#52525b; }
.nav-item {
  display:flex; align-items:center; gap:.7rem;
  padding:.6rem 1.2rem; color:var(--text-muted); font-size:.88rem; font-weight:500;
  transition:all .2s; border-left:3px solid transparent; cursor:pointer;
}
.nav-item:hover { background:var(--bg3); color:var(--text); border-left-color:var(--border); }
.nav-item.active { background:rgba(220,38,38,.08); color:var(--red-light); border-left-color:var(--red); font-weight:600; }
.nav-item svg { width:18px; height:18px; flex-shrink:0; }
.nav-item .badge {
  margin-left:auto; background:var(--red); color:#fff;
  font-size:.65rem; font-weight:700; padding:.1rem .45rem; border-radius:100px; min-width:18px; text-align:center;
}
.sidebar-footer { padding:1rem 1.2rem; border-top:1px solid var(--border); }
.user-mini { display:flex; align-items:center; gap:.7rem; }
.user-mini img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.user-mini-avatar { width:32px; height:32px; border-radius:50%; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:.8rem; }
.user-mini-info { flex:1; min-width:0; }
.user-mini-name { font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-mini-role { font-size:.7rem; color:var(--text-muted); }
.user-mini .logout { color:var(--text-muted); transition:color .2s; }
.user-mini .logout:hover { color:var(--red-light); }
.user-mini .logout svg { width:16px; height:16px; }

/* ── Main Content ────────────────────────── */
.panel-main { flex:1; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }
.panel-topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.5rem; background:var(--bg2); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.panel-topbar h1 { font-size:1.1rem; font-weight:700; }
.panel-topbar .breadcrumb { font-size:.8rem; color:var(--text-muted); margin-top:.1rem; }
.panel-topbar .breadcrumb a { color:var(--text-muted); }
.panel-topbar .breadcrumb a:hover { color:var(--text); }
.topbar-actions { display:flex; align-items:center; gap:.7rem; }
.panel-content { flex:1; padding:1.5rem; max-width:1400px; }

/* ── Mobile sidebar toggle ───────────────── */
.sidebar-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:.4rem; }
.sidebar-toggle svg { width:22px; height:22px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:49; }

/* ── Cards / Panels ──────────────────────── */
.card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }
.card-header h2 { font-size:1rem; font-weight:700; }
.card-body { padding:1.25rem; }
.card-footer { padding:.9rem 1.25rem; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:flex-end; gap:.5rem; }

/* ── Stats Grid (dashboard) ──────────────── */
.stats-grid-panel { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card {
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
  padding:1.25rem; display:flex; flex-direction:column; gap:.4rem;
  transition:border-color .2s;
}
.stat-card:hover { border-color:var(--red); }
.stat-card .stat-label { font-size:.75rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat-card .stat-value { font-size:2rem; font-weight:800; color:var(--text); line-height:1; }
.stat-card .stat-value.red { color:var(--red); }
.stat-card .stat-value.green { color:#22c55e; }
.stat-card .stat-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:.2rem; }
.stat-card .stat-icon.red-bg { background:rgba(220,38,38,.12); color:var(--red); }
.stat-card .stat-icon.green-bg { background:rgba(34,197,94,.1); color:#22c55e; }
.stat-card .stat-icon.blue-bg { background:rgba(59,130,246,.1); color:#60a5fa; }
.stat-card .stat-icon svg { width:20px; height:20px; }

/* ── Table ───────────────────────────────── */
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
thead th { padding:.7rem 1rem; text-align:left; font-size:.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--border); white-space:nowrap; }
tbody tr { border-bottom:1px solid rgba(63,63,70,.4); transition:background .15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.02); }
tbody td { padding:.75rem 1rem; vertical-align:middle; }
tbody td.muted { color:var(--text-muted); font-size:.82rem; }

/* ── Status Badges ───────────────────────── */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:100px; font-size:.72rem; font-weight:700; }
.badge-red { background:rgba(220,38,38,.15); color:#fca5a5; border:1px solid rgba(220,38,38,.25); }
.badge-green { background:rgba(34,197,94,.1); color:#86efac; border:1px solid rgba(34,197,94,.2); }
.badge-yellow { background:rgba(234,179,8,.1); color:#fde047; border:1px solid rgba(234,179,8,.2); }
.badge-blue { background:rgba(59,130,246,.1); color:#93c5fd; border:1px solid rgba(59,130,246,.2); }
.badge-gray { background:rgba(113,113,122,.15); color:var(--text-muted); border:1px solid var(--border); }

/* ── Color Swatch ────────────────────────── */
.color-swatch { display:inline-flex; align-items:center; gap:.5rem; }
.swatch { width:28px; height:28px; border-radius:6px; border:1px solid rgba(255,255,255,.1); flex-shrink:0; }
.swatch-sm { width:18px; height:18px; border-radius:4px; }

/* ── Panel Form Controls ─────────────────── */
.panel-form .form-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1rem; }
.panel-form .form-group { margin-bottom:0; }
.panel-form .form-group label { font-size:.8rem; font-weight:600; color:var(--text-muted); display:block; margin-bottom:.35rem; }
.panel-form .form-control { background:var(--bg3); border:1px solid var(--border); color:var(--text); padding:.6rem .85rem; border-radius:var(--radius); font-size:.88rem; width:100%; }
.panel-form .form-control:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
select.form-control { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .8rem center; padding-right:2rem; }

/* ── Org Cards ───────────────────────────── */
.org-card { background:var(--bg2); border:1px solid var(--border); border-radius:12px; margin-bottom:1rem; overflow:hidden; }
.org-card-header { padding:1rem 1.25rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.org-card-body { padding:1.25rem; }
.org-badge { display:inline-block; background:rgba(220,38,38,.12); color:var(--red-light); border:1px solid rgba(220,38,38,.25); padding:.15rem .55rem; border-radius:4px; font-size:.7rem; font-weight:700; text-transform:uppercase; }
.farben-grid { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
.farbe-chip { display:inline-flex; align-items:center; gap:.4rem; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:.3rem .7rem; font-size:.8rem; }

/* ── Lager Progress ──────────────────────── */
.stock-bar { background:var(--bg3); border-radius:100px; height:6px; margin-top:.4rem; overflow:hidden; }
.stock-bar-fill { height:100%; border-radius:100px; background:var(--red); transition:width .3s; }
.stock-bar-fill.ok { background:#22c55e; }
.stock-bar-fill.low { background:#eab308; }
.stock-bar-fill.critical { background:var(--red); }

/* ── Pagination ──────────────────────────── */
.pagination { display:flex; align-items:center; gap:.4rem; margin-top:1.5rem; }
.page-btn { padding:.45rem .8rem; border-radius:var(--radius); border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:.85rem; cursor:pointer; transition:all .2s; }
.page-btn:hover { border-color:var(--red); color:var(--text); }
.page-btn.active { background:var(--red); border-color:var(--red); color:#fff; }
.page-btn:disabled { opacity:.3; cursor:not-allowed; }

/* ── Chart container ─────────────────────── */
.chart-container { position:relative; height:220px; }

/* ── Tooltip ─────────────────────────────── */
.tooltip-wrap { position:relative; }
.tooltip-wrap .tooltip-text {
  display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  background:#000; color:#fff; font-size:.75rem; padding:.3rem .6rem; border-radius:5px; white-space:nowrap; z-index:999;
}
.tooltip-wrap:hover .tooltip-text { display:block; }

/* ── Modal ───────────────────────────────── */
.modal-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:200; align-items:center; justify-content:center; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:2rem; width:100%; max-width:480px; max-height:90vh; overflow-y:auto; }
.modal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.modal-header h3 { font-size:1.1rem; font-weight:700; }
.modal-close { background:none; border:none; color:var(--text-muted); cursor:pointer; transition:color .2s; }
.modal-close:hover { color:var(--text); }
.modal-close svg { width:20px; height:20px; }

/* ── Toast / Flash ───────────────────────── */
.flash { position:fixed; top:1rem; right:1rem; z-index:300; display:flex; flex-direction:column; gap:.5rem; }
.flash-msg { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem 1.1rem; font-size:.88rem; display:flex; align-items:center; gap:.6rem; min-width:240px; box-shadow:var(--shadow); animation:slideIn .3s; }
.flash-msg.success { border-color:rgba(34,197,94,.3); }
.flash-msg.error { border-color:rgba(220,38,38,.3); }
@keyframes slideIn { from{transform:translateX(100%);opacity:0} to{transform:translateX(0);opacity:1} }

/* ── Empty State ─────────────────────────── */
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state svg { width:48px; height:48px; margin:0 auto 1rem; opacity:.4; }
.empty-state p { font-size:.9rem; }

/* ── Farben Picker ───────────────────────── */
#colorPreview { display:flex; align-items:center; gap:.75rem; margin-top:.5rem; }
#colorBox { width:40px; height:40px; border-radius:8px; border:1px solid var(--border); transition:background .2s; }
#hexDisplay { font-family:monospace; font-size:.9rem; color:var(--text-muted); }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */

@media (max-width:900px) {
  .location-wrap { grid-template-columns:1fr; }
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay.open { display:block; }
  .panel-main { margin-left:0; }
  .sidebar-toggle { display:flex; }
  .hamburger { display:flex; }
  .navbar-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--border); flex-direction:column; padding:1rem 1.5rem; gap:.8rem; }
  .navbar-links.open { display:flex; }
}

@media (max-width:600px) {
  .stats-grid-panel { grid-template-columns:1fr 1fr; }
  .panel-content { padding:1rem; }
  .card-header { flex-direction:column; align-items:flex-start; }
  .gallery-grid { grid-template-columns:1fr 1fr; }
  .team-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width:400px) {
  .gallery-grid { grid-template-columns:1fr; }
  .team-grid { grid-template-columns:1fr; }
  .stats-grid-panel { grid-template-columns:1fr; }
}

/* ── Animations ──────────────────────────── */
.fade-in { animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.delay-1 { animation-delay:.1s; animation-fill-mode:backwards; }
.delay-2 { animation-delay:.2s; animation-fill-mode:backwards; }
.delay-3 { animation-delay:.3s; animation-fill-mode:backwards; }

/* ── Misc Utilities ──────────────────────── */
.text-red { color:var(--red-light); }
.text-muted { color:var(--text-muted); }
.text-sm { font-size:.82rem; }
.fw-bold { font-weight:700; }
.gap-sm { gap:.5rem; }
.flex { display:flex; }
.flex-center { display:flex; align-items:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.w-full { width:100%; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mb-1 { margin-bottom:.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.p-0 { padding:0 !important; }
.truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mono { font-family:monospace; }

/* ══════════════════════════════════════════
   GLASSMORPHISM & MODERN LANDING PAGE
   ══════════════════════════════════════════ */

/* ── Glass Effect ────────────────────────── */
.glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255,255,255,.08);
}
.glass-red {
  background: rgba(220,38,38,.06);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(220,38,38,.18);
}

/* ── Hero Orbs ───────────────────────────── */
.hero-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter: blur(80px); opacity:.35;
}
.hero-orb-1 {
  width:600px; height:600px; top:-150px; left:-100px;
  background: radial-gradient(circle, rgba(220,38,38,.6) 0%, transparent 70%);
  animation: orbFloat1 12s ease-in-out infinite;
}
.hero-orb-2 {
  width:500px; height:500px; bottom:-100px; right:-80px;
  background: radial-gradient(circle, rgba(120,0,0,.5) 0%, transparent 70%);
  animation: orbFloat2 15s ease-in-out infinite;
}
.hero-orb-3 {
  width:300px; height:300px; top:40%; left:50%; transform:translateX(-50%);
  background: radial-gradient(circle, rgba(220,38,38,.25) 0%, transparent 70%);
  animation: orbFloat3 9s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(40px,-30px) scale(1.05); }
  66%{ transform:translate(-20px,20px) scale(.95); }
}
@keyframes orbFloat2 {
  0%,100%{ transform:translate(0,0) scale(1); }
  40%{ transform:translate(-35px,25px) scale(1.08); }
  70%{ transform:translate(20px,-15px) scale(.97); }
}
@keyframes orbFloat3 {
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-50%) scale(1.2); opacity:.15; }
}

/* ── Hero enhanced ───────────────────────── */
.hero-title-line { display:block; }
.hero-highlight {
  background: linear-gradient(135deg, var(--red) 0%, #ff6b6b 50%, var(--red-dark) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-particles { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-particle {
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(220,38,38,.6);
  animation: particleFly linear infinite;
}
@keyframes particleFly {
  0%{ transform:translateY(100vh) translateX(0); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.6; }
  100%{ transform:translateY(-10vh) translateX(var(--drift)); opacity:0; }
}

/* ── Scroll Reveal ───────────────────────── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(40px); transition:opacity .7s ease, transform .7s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.9); transition:opacity .6s ease, transform .6s ease; }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.delay-100 { transition-delay:.1s; }
.delay-200 { transition-delay:.2s; }
.delay-300 { transition-delay:.3s; }
.delay-400 { transition-delay:.4s; }
.delay-500 { transition-delay:.5s; }

/* ── Glass Service Cards ─────────────────── */
.service-card-glass {
  background: rgba(24,24,27,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63,63,70,.6);
  border-radius:16px; padding:2rem;
  transition: all .4s cubic-bezier(.175,.885,.32,1.275);
  position:relative; overflow:hidden;
}
.service-card-glass::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg, rgba(220,38,38,.08) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.service-card-glass:hover::before { opacity:1; }
.service-card-glass:hover {
  border-color: rgba(220,38,38,.4);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(220,38,38,.12), 0 0 0 1px rgba(220,38,38,.1);
}
.service-icon-glass {
  width:52px; height:52px;
  background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.2);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem;
  transition:all .3s;
}
.service-card-glass:hover .service-icon-glass {
  background: rgba(220,38,38,.2);
  box-shadow: 0 0 20px rgba(220,38,38,.25);
  transform:scale(1.1);
}
.service-icon-glass svg { width:26px; height:26px; color:var(--red); }

/* ── Glass Stat Items ────────────────────── */
.stat-item-glass {
  background: rgba(24,24,27,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63,63,70,.5);
  border-radius:16px; padding:1.5rem 2rem; text-align:center;
  position:relative; overflow:hidden;
  transition: all .3s;
}
.stat-item-glass::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity:0; transition:opacity .3s;
}
.stat-item-glass:hover::after { opacity:1; }
.stat-item-glass:hover { border-color:rgba(220,38,38,.3); transform:translateY(-3px); }
.stat-item-glass h3 {
  font-size:2.8rem; font-weight:800; line-height:1;
  background: linear-gradient(135deg, #fff 0%, var(--red-light) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-item-glass p { color:var(--text-muted); font-size:.88rem; margin-top:.4rem; font-weight:500; }

/* ── Glassmorphism Stats Bar ─────────────── */
.stats-bar-glass {
  padding:3rem 1.5rem;
  background: linear-gradient(180deg, rgba(220,38,38,.04) 0%, transparent 100%);
  border-top:1px solid rgba(220,38,38,.1);
  border-bottom:1px solid rgba(220,38,38,.1);
  position:relative;
}
.stats-bar-glass::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 100% at 50% 0%, rgba(220,38,38,.06) 0%, transparent 70%);
  pointer-events:none;
}
.stats-grid-glass {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.5rem; max-width:1100px; margin:0 auto;
}

/* ── Team Card Glass ─────────────────────── */
.team-card-glass {
  background: rgba(24,24,27,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(63,63,70,.5);
  border-radius:16px; padding:2rem 1.5rem; text-align:center;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275);
  position:relative; overflow:hidden;
}
.team-card-glass::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(220,38,38,.4), transparent);
  opacity:0; transition:opacity .3s;
}
.team-card-glass:hover::before { opacity:1; }
.team-card-glass:hover {
  border-color:rgba(220,38,38,.3);
  transform:translateY(-8px);
  box-shadow:0 24px 60px rgba(0,0,0,.4), 0 0 40px rgba(220,38,38,.08);
}
.team-avatar-glass {
  width:88px; height:88px; border-radius:50%; object-fit:cover;
  margin:0 auto 1rem;
  border:2px solid rgba(220,38,38,.4);
  box-shadow:0 0 20px rgba(220,38,38,.15);
  transition:all .3s;
}
.team-card-glass:hover .team-avatar-glass {
  border-color:var(--red);
  box-shadow:0 0 30px rgba(220,38,38,.35);
}
.team-avatar-placeholder-glass {
  width:88px; height:88px; border-radius:50%;
  background: rgba(39,39,42,.8);
  border:2px solid rgba(220,38,38,.3);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem;
  font-size:2.2rem; color:var(--red-light);
  transition:all .3s;
}
.team-card-glass:hover .team-avatar-placeholder-glass { border-color:var(--red); }
.team-card-glass h3 { font-weight:700; margin-bottom:.35rem; font-size:1rem; }
.team-card-glass .role {
  color:var(--red-light); font-size:.82rem; font-weight:600;
  background:rgba(220,38,38,.1); padding:.2rem .65rem; border-radius:100px;
  display:inline-block;
}

/* ── CTA Glass ───────────────────────────── */
.cta-glass {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, rgba(26,0,0,.9) 0%, rgba(9,9,11,.95) 50%, rgba(26,0,0,.9) 100%);
  border-top:1px solid rgba(220,38,38,.2);
  border-bottom:1px solid rgba(220,38,38,.2);
  text-align:center; padding:6rem 1.5rem;
}
.cta-glass::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 50%, rgba(220,38,38,.08) 0%, transparent 70%);
  animation:ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%,100%{ opacity:.6; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.05); }
}
.cta-glass-inner { position:relative; }
.cta-glass h2 { font-size:clamp(2rem,5vw,3.2rem); font-weight:800; margin-bottom:1rem; }
.cta-glass p { color:var(--text-muted); max-width:480px; margin:0 auto 2.5rem; font-size:1.05rem; line-height:1.7; }

/* ── Gallery Card enhanced ───────────────── */
.gallery-card-glass {
  position:relative; border-radius:14px; overflow:hidden;
  border:1px solid rgba(63,63,70,.5);
  aspect-ratio:4/3; cursor:pointer;
  transition:all .4s;
}
.gallery-card-glass img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gallery-card-glass:hover img { transform:scale(1.08); }
.gallery-card-glass .overlay-glass {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.3) 50%, transparent 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.25rem;
  opacity:0; transition:opacity .35s;
}
.gallery-card-glass:hover .overlay-glass { opacity:1; }
.gallery-card-glass:hover {
  border-color:rgba(220,38,38,.4);
  box-shadow:0 16px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(220,38,38,.15);
  transform:translateY(-4px);
}
.gallery-card-glass .overlay-glass h4 { font-weight:700; font-size:1rem; }
.gallery-card-glass .overlay-glass span { font-size:.8rem; color:var(--red-light); }

/* ── Section divider glow ────────────────── */
.section-glow {
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(220,38,38,.4), transparent);
}

/* ── Animated number counter ─────────────── */
.count-num { display:inline-block; }

/* ── Hero typing cursor ──────────────────── */
.cursor-blink {
  display:inline-block; width:3px; height:.9em;
  background:var(--red); margin-left:4px; vertical-align:middle;
  animation:cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }