/* ===== MK-Industries – Sci-Fi Alive Theme ===== */
:root{
  --bg: #0b0f14;
  --bg-2: #0f141c;
  --card: #121a24;
  --line: #1d2a39;
  --text: #dbe7ff;
  --muted:#9fb2cc;
  --brand:#43b2ff;
  --brand-2:#7cd0ff;
  --neon:#52c8ff;
  --shadow: 0 12px 40px rgba(67,178,255,.20);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 500 16px/1.55 ui-sans-serif,system-ui,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background: radial-gradient(80rem 40rem at 50% -15%, rgba(15,25,40,.9) 0%, transparent 60%), linear-gradient(#0a0f16,#090c12);
  overflow-x:hidden;
}

/* --- Animated background layers --- */
body::before, body::after{
  content:"";
  position:fixed; inset:-30vmax; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40vmax 30vmax at 12% 18%, rgba(82,200,255,.10), transparent 60%),
    radial-gradient(42vmax 34vmax at 85% 12%, rgba(82,200,255,.06), transparent 62%),
    radial-gradient(50vmax 45vmax at 50% 105%, rgba(82,200,255,.08), transparent 60%);
  animation: nebula 22s linear infinite alternate;
  filter:saturate(1.2);
}
@keyframes nebula{
  from{transform:translate3d(-2rem,-1rem,0) rotate(.5deg)}
  to  {transform:translate3d( 2rem, 1rem,0) rotate(-.5deg)}
}

/* particle sparkles */
body::after{
  z-index:-1;
  background-image:
    radial-gradient(2px 2px at 10% 15%, rgba(255,255,255,.35) 60%, transparent),
    radial-gradient(2px 2px at 17% 60%, rgba(255,255,255,.25) 60%, transparent),
    radial-gradient(2px 2px at 28% 80%, rgba(255,255,255,.3) 60%, transparent),
    radial-gradient(2px 2px at 40% 25%, rgba(255,255,255,.28) 60%, transparent),
    radial-gradient(2px 2px at 70% 35%, rgba(255,255,255,.22) 60%, transparent),
    radial-gradient(2px 2px at 86% 66%, rgba(255,255,255,.26) 60%, transparent),
    radial-gradient(2px 2px at 58% 78%, rgba(255,255,255,.28) 60%, transparent);
  background-repeat:no-repeat;
  animation: stars 14s linear infinite;
  opacity:.45;
  filter: blur(.1px);
}
@keyframes stars{
  from{transform:translateY(0)}
  to  {transform:translateY(20px)}
}

/* subtle grid sweep */
body .grid-sweep{
  position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.35;
  background-image:
    linear-gradient(transparent 97%, rgba(67,178,255,.18) 98%),
    linear-gradient(90deg, transparent 97%, rgba(67,178,255,.12) 98%);
  background-size: 36px 36px, 36px 36px;
  mask-image: radial-gradient(60rem 30rem at 50% -10%, rgba(0,0,0,.8), transparent 70%);
  animation:gridflow 18s linear infinite;
}
@keyframes gridflow{
  from{background-position: 0 0, 0 0}
  to  {background-position: 0 36px, 36px 0}
}

/* Containers */
.container{width:min(1200px,94%);margin-inline:auto}
.inner{display:flex;align-items:center;justify-content:space-between}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: saturate(1.3) blur(8px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;gap:.6rem;align-items:center;text-decoration:none;color:var(--text)}
.brand__logo{height:24px;width:auto;filter:drop-shadow(0 2px 10px rgba(67,178,255,.35))}
.brand__name{font-weight:700;letter-spacing:.2px}
.main-nav{display:flex;gap:.9rem;align-items:center}
.main-nav a{color:var(--muted);text-decoration:none;padding:.6rem .8rem;border-radius:.55rem;transition:.25s}
.main-nav a.is-active,.main-nav a:hover{color:var(--text);background:rgba(67,178,255,.10);box-shadow:0 0 0 1px rgba(67,178,255,.15) inset}
.btn{border:1px solid var(--line);background:transparent;color:var(--text);padding:.6rem .9rem;border-radius:.6rem;cursor:pointer;transition:transform .2s, box-shadow .25s}
.btn--brand{background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0;color:#02121f;box-shadow:var(--shadow)}
.btn--brand:hover{transform:translateY(-2px);filter:saturate(1.06)}
.btn--ghost:hover{background:rgba(255,255,255,.05)}
.hide-mobile{display:block}

/* Magnetic hover aura for .btn--brand */
.btn--brand{position:relative;isolation:isolate}
.btn--brand::after{
  content:""; position:absolute; inset:-2px; z-index:-1;
  background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(124,208,255,.35), transparent 55%);
  border-radius:.7rem; transition:opacity .2s; opacity:.0; filter:blur(14px)
}
.btn--brand:hover::after{opacity:1}

/* Hero */
.hero{padding:3.2rem 0 2rem; position:relative}
.hero--small{padding:2.2rem 0 1.2rem}
.hero__card{
  padding:1.6rem;
  background:linear-gradient(180deg,rgba(2,15,24,.38),rgba(2,15,24,.18));
  border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.hero__card::before{
  content:""; position:absolute; inset:-2px;
  background: conic-gradient(from 120deg at 10% 10%, rgba(124,208,255,.18), transparent 35% 70%, rgba(124,208,255,.12));
  filter: blur(30px); z-index:-1;
  animation: auraflow 10s linear infinite;
}
@keyframes auraflow{from{transform: rotate(0)}to{transform: rotate(360deg)}}

.glow-in{animation:glow .6s ease-out both}
@keyframes glow{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1}}

.chip-row{display:flex;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.chip{font-size:.8rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);backdrop-filter:blur(2px)}
.headline{font-size:clamp(1.8rem,3.8vw,3rem);margin:.2rem 0 .6rem;letter-spacing:.2px}
.headline .accent{color:var(--brand-2); text-shadow:0 0 24px rgba(124,208,255,.25)}
.lead{color:var(--muted);max-width:58ch}
.cta-row{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}

/* KPI */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:1rem}
.kpi{padding:1rem;border:1px solid var(--line);border-radius:.9rem;background:var(--card);position:relative;overflow:hidden}
.kpi::after{
  content:""; position:absolute; inset:-1px; border-radius:.9rem;
  background: conic-gradient(from 180deg, rgba(82,200,255,.18), transparent 30% 65%, rgba(82,200,255,.18));
  filter: blur(16px); opacity:.0; transition:.35s
}
.kpi:hover::after{opacity:.75}
.kpi b{display:block;color:#cfe4ff;margin-bottom:.25rem}

/* Sections & cards */
.section-title{text-align:center;margin:2.4rem 0 .2rem}
.section-sub{text-align:center;color:var(--muted);margin-bottom:1.2rem}
.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem;
  position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.card.hover-up:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card[data-tilt]{transform-style:preserve-3d}
.card[data-tilt] h3{transform:translateZ(18px)}
.card[data-tilt] p, .card[data-tilt] ul{transform:translateZ(10px)}
.card::before{
  /* animated neon border */
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:1; pointer-events:none;
  background: conic-gradient(from var(--rot,0deg), rgba(124,208,255,.0), rgba(124,208,255,.25), rgba(124,208,255,.0) 40%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px; opacity:.0; transition:.35s
}
.card:hover::before{opacity:1}

/* Games */
.gallery .game .tag{display:inline-block;background:rgba(67,178,255,.12);border:1px solid var(--line);border-radius:.5rem;padding:.2rem .5rem;margin-bottom:.35rem;color:var(--brand-2)}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition: .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:1.2rem 0;color:var(--muted);margin-top:2rem}

/* Modal Auth (gleich geblieben) */
.modal{position:fixed;inset:0;background:rgba(3,10,18,.6);display:none;align-items:center;justify-content:center;padding:1rem}
.modal[aria-hidden="false"]{display:flex}
.modal__dialog{width:min(560px,96%);background:var(--card);border:1px solid var(--line);border-radius:1rem;padding:1rem;box-shadow:var(--shadow);position:relative}
.modal__close{position:absolute;inset:12px 12px auto auto;background:transparent;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer}
.tabs{display:flex;gap:.5rem;margin-bottom:.6rem}
.tab{flex:1;text-align:center;padding:.6rem;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:.6rem;cursor:pointer;transition:.25s}
.tab.is-active{color:#06131f;background:linear-gradient(135deg,var(--brand),var(--brand-2));border:0}
.tab-panels .panel{display:none}
.tab-panels .panel.is-active{display:block}
.field{display:grid;gap:.25rem;margin:.6rem 0}
.field span{color:#cfe4ff}
.field input{padding:.7rem .8rem;border-radius:.6rem;border:1px solid var(--line);background:#0d1520;color:var(--text)}
.form-hint{color:var(--muted);font-size:.85rem;margin-top:.4rem}

/* Profile list */
.profile{list-style:none;padding:0;margin:.4rem 0;display:grid;gap:.4rem}
.profile li{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:.35rem 0}
.space{height:.6rem}

/* Responsive */
@media (max-width:980px){
  .services .grid{grid-template-columns:1fr 1fr}
  .grid--2{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .hide-mobile{display:none}
  .services .grid{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr}
}