/* =================================================================
   LIGHT-ART VERANSTALTUNGSTECHNIK — Design System
   Dark · technical · immersive light-show aesthetic
   ================================================================= */

:root{
  /* Base / surfaces */
  --ink:        #0B0B0F;   /* deepest background */
  --ink-2:      #0E0E13;
  --panel:      #17171D;   /* anthracite panels */
  --panel-2:    #1E1E26;   /* raised cards */
  --panel-3:    #262630;   /* hover / inputs */
  --line:       rgba(255,255,255,.09);
  --line-2:     rgba(255,255,255,.16);

  /* Text */
  --white:      #FFFFFF;
  --text:       rgba(255,255,255,.74);
  --muted:      rgba(255,255,255,.50);
  --faint:      rgba(255,255,255,.34);

  /* Accents — tuned to the chrome / electric-blue logo */
  --blue:       #00AEEF;   /* logo electric blue */
  --blue-deep:  #0072C6;   /* deep signal blue */
  --ice:        #AEE3FA;   /* chrome / ice highlight */
  --purple:     #2C93D6;   /* (legacy name) mid blue */
  --amber:      #7FCFF0;   /* (legacy name) light cyan */
  --beam:       linear-gradient(90deg, #0072C6 0%, #00AEEF 48%, #AEE3FA 100%);
  --beam-soft:  linear-gradient(90deg, rgba(0,114,198,.16), rgba(0,174,239,.16), rgba(174,227,250,.16));



  /* Type */
  --head: "Manrope", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;

  /* Layout */
  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 9px;

  --shadow: 0 24px 70px -28px rgba(0,0,0,.85);
  --glow-blue: 0 0 0 1px rgba(0,174,239,.5), 0 14px 50px -14px rgba(0,174,239,.55);
  --glow-shadow: 0 12px 38px -12px rgba(0,135,215,.55);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--ink);
  color:var(--text);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:rgba(0,174,239,.32); color:#fff; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--head); color:var(--white); margin:0; line-height:1.04; letter-spacing:-.02em; font-weight:800; }
.h-display{ font-size:clamp(40px, 7vw, 86px); }
.h1{ font-size:clamp(34px, 5.2vw, 60px); }
.h2{ font-size:clamp(27px, 3.4vw, 40px); }
.h3{ font-size:clamp(20px, 2vw, 25px); font-weight:700; }
.lead{ font-size:clamp(18px,1.5vw,21px); color:var(--text); max-width:60ch; }
.eyebrow{
  font-family:var(--head); font-weight:700; font-size:13px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--beam); border-radius:2px; }
.gradient-text{
  background:var(--beam); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(64px, 9vw, 130px); position:relative; }
.section--tight{ padding-block:clamp(48px,6vw,80px); }
.center{ text-align:center; }
.stack{ display:flex; flex-direction:column; }
.muted{ color:var(--muted); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--head); font-weight:700; font-size:15px; letter-spacing:.01em;
  padding:15px 27px; border-radius:12px; border:1px solid transparent;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .2s cubic-bezier(.34,1.2,.4,1), box-shadow .28s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn svg{ width:18px; height:18px; transition:transform .25s ease; }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(0,174,239,.45); }
/* light-sweep sheen */
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-135%; width:55%; z-index:3; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:skewX(-20deg); transition:left .6s cubic-bezier(.4,0,.2,1);
}
.btn:hover::after{ left:150%; }

.btn--primary{
  background:var(--beam);
  color:#06121c;
  box-shadow:0 10px 30px -14px rgba(0,140,225,.7);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -16px rgba(0,165,245,.85); }

.btn--solid{
  background:#fff; color:#0b0b0f;
  box-shadow:0 10px 26px -16px rgba(0,0,0,.6);
}
.btn--solid:hover{ transform:translateY(-2px); box-shadow:0 16px 36px -16px rgba(0,0,0,.65); }

.btn--ghost{
  background:rgba(255,255,255,.045); color:#fff; border-color:var(--line-2);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.09); border-color:rgba(174,227,250,.55);
  box-shadow:inset 0 0 0 1px rgba(0,174,239,.2), 0 12px 32px -16px rgba(0,174,239,.55); transform:translateY(-2px); }
.btn--ghost::after{ background:linear-gradient(100deg, transparent, rgba(174,227,250,.22), transparent); }

.btn--sm{ padding:11px 18px; font-size:14px; border-radius:10px; }
.link-arrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--head); font-weight:700; color:#fff; font-size:15px; }
.link-arrow svg{ width:17px; height:17px; transition:transform .2s; color:var(--blue); }
.link-arrow:hover svg{ transform:translateX(5px); }

/* ---------- Chips ---------- */
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:99px; border:1px solid var(--line-2);
  font-size:13px; font-weight:500; color:var(--text); background:rgba(255,255,255,.03);
}
.chip-dot{ width:6px; height:6px; border-radius:50%; background:var(--blue); }

/* ---------- Light beams (decorative, abstract) ---------- */
.beams{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.beams::before, .beams::after{
  content:""; position:absolute; mix-blend-mode:screen; filter:blur(8px); opacity:.55;
}
.beams::before{
  top:-22%; left:8%; width:46%; height:150%;
  background:
    conic-gradient(from 200deg at 50% 0%, transparent 0deg, rgba(0,174,239,.45) 6deg, transparent 14deg);
  transform:rotate(8deg); animation:sway 12s ease-in-out infinite alternate;
}
.beams::after{
  top:-22%; right:6%; width:46%; height:150%;
  background:
    conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(120,205,245,.38) 7deg, transparent 15deg);
  transform:rotate(-9deg); animation:sway 14s ease-in-out infinite alternate-reverse;
}
.beam-amber{
  position:absolute; top:-18%; left:46%; width:30%; height:140%;
  background:conic-gradient(from 182deg at 50% 0%, transparent 0deg, rgba(0,114,198,.36) 5deg, transparent 11deg);
  mix-blend-mode:screen; filter:blur(10px); opacity:.5; pointer-events:none;
  animation:sway 16s ease-in-out infinite alternate;
}
.haze{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0,174,239,.20), transparent 70%),
    radial-gradient(50% 40% at 12% 8%, rgba(0,114,198,.18), transparent 70%),
    radial-gradient(45% 45% at 90% 16%, rgba(174,227,250,.10), transparent 70%);
}
.grid-floor{
  position:absolute; left:0; right:0; bottom:0; height:42%; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:54px 54px;
  transform:perspective(420px) rotateX(64deg); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
          mask-image:linear-gradient(to top, #000, transparent);
  opacity:.5;
}
@keyframes sway{ from{ transform:rotate(8deg) translateX(-8px);} to{ transform:rotate(11deg) translateX(14px);} }

@media (prefers-reduced-motion: reduce){
  .beams::before, .beams::after, .beam-amber{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Image placeholders ---------- */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 11px, rgba(255,255,255,0) 11px 22px),
    linear-gradient(135deg, #16161d, #0e0e13);
  border:1px solid var(--line);
  display:flex; align-items:flex-end; min-height:220px;
  color:var(--faint);
}
.ph::after{
  content:attr(data-label);
  position:absolute; top:12px; left:12px;
  font-family:"Manrope", monospace; font-size:11px; letter-spacing:.06em;
  color:var(--muted); background:rgba(11,11,15,.6); border:1px solid var(--line);
  padding:5px 9px; border-radius:6px;
}
.ph__hint{ padding:14px; font-size:12px; font-family:var(--head); color:var(--faint); }
.ph--glow{ box-shadow:inset 0 -60px 90px -40px rgba(0,174,239,.25); }

/* ---------- Cards ---------- */
.card{
  position:relative; --mx:50%; --my:0%;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card > *{ position:relative; z-index:1; }
.card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:2; pointer-events:none;
  background:radial-gradient(280px circle at var(--mx) var(--my), rgba(120,205,245,.20), transparent 60%);
  opacity:0; transition:opacity .35s ease; mix-blend-mode:screen;
}
.card:hover::after{ opacity:1; }
.card:hover{ border-color:var(--line-2); transform:translateY(-4px); box-shadow:var(--shadow); }

/* ---------- Navigation ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(11,11,15,.62); border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:24px; height:74px; }
.nav__logo{ display:flex; align-items:center; height:74px; }
.nav__logo img{ height:34px; width:auto; filter:drop-shadow(0 2px 10px rgba(0,174,239,.4)); }
.nav__menu{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav__menu a{
  font-family:var(--head); font-weight:600; font-size:15px; color:var(--text);
  padding:9px 14px; border-radius:9px; transition:color .15s, background .15s;
}
.nav__menu a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.nav__menu a.active{ color:#fff; }
.nav__menu a.active::after{ content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--beam); }
.nav__menu > .btn{ display:none; }
.nav__cta{ margin-left:8px; }
.nav__burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line-2); border-radius:9px; padding:9px 11px; }
.nav__burger span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; }
.nav__burger span+span{ margin-top:5px; }

@media (max-width: 940px){
  .nav__cta{ display:none; }
  .nav__burger{ display:block; }
  .nav__menu{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(11,11,15,.97); border-bottom:1px solid var(--line); padding:10px var(--pad) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.2s;
  }
  .nav__menu.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__menu a{ padding:14px 6px; font-size:17px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav__menu > .btn{ display:inline-flex; margin-top:14px; border-radius:11px; justify-content:center; }
  .nav__menu .btn{ margin-top:14px; border-radius:11px; }
}

/* ---------- Page hero (interior pages) ---------- */
.phero{ position:relative; padding-block:clamp(90px,12vw,150px) clamp(40px,6vw,70px); overflow:hidden; }
.phero .wrap{ position:relative; z-index:2; }
.breadcrumb{ font-size:13px; color:var(--muted); margin-bottom:20px; font-family:var(--head); font-weight:600; }
.breadcrumb a:hover{ color:#fff; }

/* ---------- Footer ---------- */
.foot{ background:var(--ink-2); border-top:1px solid var(--line); position:relative; overflow:hidden; }
.foot__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:48px; padding-block:64px 40px; position:relative; z-index:2; }
.foot__logo img{ height:38px; margin-bottom:18px; }
.foot h4{ font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:18px; font-weight:700; }
.foot a{ color:var(--text); font-size:15px; }
.foot a:hover{ color:#fff; }
.foot__links{ display:flex; flex-direction:column; gap:11px; }
.foot__contact{ display:flex; flex-direction:column; gap:12px; font-size:15px; }
.foot__contact strong{ color:#fff; font-weight:600; }
.foot__bar{ display:flex; flex-wrap:wrap; gap:14px 26px; justify-content:space-between; align-items:center;
  padding-block:22px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); position:relative; z-index:2; }
.foot__bar a{ font-size:13px; }
@media (max-width:840px){ .foot__grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr; } }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--head); font-weight:600; font-size:14px; color:var(--white); }
.field label .req{ color:var(--amber); }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:16px; color:#fff;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:10px;
  padding:13px 15px; width:100%; transition:border-color .15s, box-shadow .15s, background .15s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,174,239,.22); background:var(--panel-3);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff80' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }

/* ---------- Utility: section number / labels ---------- */
.tag-soft{ display:inline-block; font-family:var(--head); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 12px; border-radius:7px; background:var(--beam-soft); color:#fff; border:1px solid var(--line); }

/* ---------- Section heading + CTA band (shared) ---------- */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.sec-head .lead{ margin-top:16px; }
.ctaband{ position:relative; overflow:hidden; border-radius:22px; padding:clamp(40px,6vw,72px); border:1px solid var(--line-2);
  background:radial-gradient(120% 130% at 0% 0%, rgba(0,114,198,.30), transparent 55%),
            radial-gradient(120% 130% at 100% 100%, rgba(0,174,239,.22), transparent 55%),
            var(--panel); }
.ctaband__inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.3fr auto; gap:40px; align-items:center; }
.ctaband h2{ margin-bottom:16px; }
@media (max-width:1000px){ .ctaband__inner{ grid-template-columns:1fr; gap:26px; } }

/* ---------- Kinetic marquee band ---------- */
.marquee{ position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--ink-2);
  padding-block:26px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 32s linear infinite; }
.marquee__track span{ font-family:var(--head); font-weight:800; font-size:clamp(22px,3vw,38px);
  letter-spacing:-.01em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.28); display:inline-flex; align-items:center; }
.marquee__track span::after{ content:"·"; margin:0 30px; color:var(--blue); -webkit-text-stroke:0; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span.solid{ color:#fff; -webkit-text-stroke:0; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- Equalizer (audio motif) ---------- */
.eq{ display:flex; align-items:flex-end; gap:4px; height:46px; }
.eq i{ width:5px; background:var(--beam); border-radius:3px; height:30%; transform-origin:bottom;
  animation:eqb 1.1s ease-in-out infinite; opacity:.85; }
.eq i:nth-child(2){ animation-delay:.18s; } .eq i:nth-child(3){ animation-delay:.36s; }
.eq i:nth-child(4){ animation-delay:.54s; } .eq i:nth-child(5){ animation-delay:.12s; }
.eq i:nth-child(6){ animation-delay:.42s; } .eq i:nth-child(7){ animation-delay:.30s; }
.eq i:nth-child(8){ animation-delay:.50s; } .eq i:nth-child(9){ animation-delay:.22s; }
@keyframes eqb{ 0%,100%{ transform:scaleY(.28);} 50%{ transform:scaleY(1);} }

@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation:none; }
  .eq i{ animation:none; height:60%; }
}

/* reveal on scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }