:root{
    --bg:#08080a;
    --bg-alt:#0f0f12;
    --surface:#17171b;
    --surface-2:#1e1f24;
    --line:#2a2b30;
    --red:#e8203c;
    --red-bright:#ff3355;
    --red-deep:#7a0f24;
    --white:#f6f6f2;
    --grey:#9a9aa2;
    --grey-dim:#5c5c64;
    --font-display: 'Anton', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'Space Mono', monospace;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  body{
    background:var(--bg);
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
    scroll-behavior:smooth;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }

  .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

  h1,h2,h3{ font-family:var(--font-display); font-weight:400; letter-spacing:0.5px; line-height:1.05; }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--red-bright);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:'';
    width:28px; height:2px;
    background:var(--red);
    display:inline-block;
    transform:skewX(-20deg);
  }

  .slash-btn{
    display:inline-flex;
    position: relative;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--white);
    background: var(--red-deep);
    padding:7px 15px;
    border:1px solid var(--red);
    border-radius: 25px;
    box-shadow: var(--red-bright) 0 0 20px -5px;
    transition: .5s, background .2s ease, transform .2s ease;
    cursor:pointer;
  }

  .slash-btn:hover{ background:var(--red-deep); transform:translateY(-2px); box-shadow: var(--red-bright) 0 0 35px -7px;}
  .slash-btn.ghost{
    background:transparent;
    clip-path:none;
    border:1px solid var(--line);
    box-shadow: none;
    padding:12px 20px;
  }
  .slash-btn.ghost::after, .slash-btn.ghost::before {box-shadow: none; }
  .slash-btn.ghost:hover{ border-color:var(--red); background:rgba(232,32,60,0.06); transform:none; }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(8,8,10,0.7);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    box-shadow: #000000 0 0 20px -1px;
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px;
    max-width:1240px; margin:0 auto;
  }
  .logo{ display:flex; align-items:center; gap:10px; }
  .logo img{ height:34px; width:auto; }
  .nav-links{ display:flex; gap:36px; }
  .nav-links a{
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--grey);
    transition:color .2s ease;
    position:relative;
  }
  .nav-links a:hover{ color:var(--red-bright); }
  .nav-cta{ display:flex; align-items:center; gap:24px; }

  .menu-toggle{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; z-index: 10; }

  .bar1, .bar2, .bar3 {
    width: 22px;
    height: 2px;
    background:var(--white);
    transition: 0.4s;
  }
  
  /* Rotate first bar */
  .change .bar1 {
    transform: translate(0, 7px) rotate(-45deg);
  }
  
  /* Fade out the second bar */
  .change .bar2 {opacity: 0;}
  
  /* Rotate last bar */
  .change .bar3 {
    transform: translate(0, -7px) rotate(45deg);
  }

  /* ---------- CTA ---------- */
  .cta{
    padding:140px 0;
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .cta .bg {
    display: flex;
    position: fixed;
    inset: 0;
    background: url('promo stage 1.jpg') center 10%/cover no-repeat;
    width: 100%;
    height: 100vh;
    z-index: -3;
  }

  .cta .bg1 {
    display: flex;
    width: 100%;
    height: 100vh;
    position:fixed; inset:0;
    background:
      linear-gradient(180deg, rgba(8,8,10,0.55) 2%, rgba(8, 8, 10, 0.35) 35%, rgba(8,8,10,0.92) 92%, var(--bg) 100%),
      linear-gradient(90deg, rgba(8,8,10,0.2) 0%, rgba(8, 8, 10, 0.1) 50%, rgba(8, 8, 10, 0.2) 100%);
    z-index: -2;

  }

  .beam{
    position:fixed;
    top:-10%;
    width:2px;
    height:130%;
    background:linear-gradient(180deg, rgba(255,60,90,0) 0%, rgba(255,60,90,0.35) 40%, rgba(255,60,90,0) 100%);
    transform-origin:top center;
    pointer-events:none;
    z-index: -1;
  }
  
  .cta .wrap {
    background:rgba(8, 8, 10, 0.5);
    width: 450px;
    max-width: 85%;
    /*max-width: 1240px;*/
    backdrop-filter:blur(5px);
    padding: 25px;
    border:1px solid var(--line);
    box-shadow: #000000 0 0 20px -1px;
    border-radius: 25px;
  }

  .cta h2{
    font-size: 180%;
    text-transform:uppercase;
    max-width:900px;
    margin:-10px auto 0;
  }
  .cta h2 span{ color:var(--red-bright); font-weight: bold;}
  .cta p{ color:var(--grey); max-width:460px; margin:0 auto 40px; }
  .cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

  .lighting p {
    margin-bottom: 20px;
  }
  
  .brake p {
    margin: 0;
  }
  .brake {
    display:flex;
    align-items:center;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
    margin-bottom: 5px;
  }
  .brake #line {
    width: 75px;
    height: 2px;
    background: var(--grey-dim);
  }

  form {
    display: grid;
  }

  form div {
    display: grid;
  } 

  form .box, form .box2 {
    display: flex;
    gap: 5px;
    justify-content: space-evenly;
    margin-bottom: -5px;
  }
  form .box {
    flex-wrap: wrap;
  }

  label {
    color: var(--white);
    font-size: 1rem;
    text-align: left;
    margin-top: 2px;
    font-weight: bold;
  }

  .box label {
    margin: 5px 0 20px 0;
    font-weight: 100;
    color: var(--grey);
  }

  .targetbudget {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 7px;
  }
  .targetbudget label {
    font-weight: 100;
  }

  input {
    accent-color: var(--red-bright);
  }
  input:not([type="checkbox"], [type="radio"]) {
    color: var(--white);
    width: 100%;
    padding: 10px;
    margin: 5px 0 20px 0;
    background:rgba(219, 219, 219, 0.2);
    backdrop-filter:blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: rgba(255, 255, 255, 0.2) 0 0 20px -5px;
    border-radius: 7px;
    outline: none;
  }
  input[type="radio"] {  
    margin: 5px 0 20px 0;  
  }
  input[type="checkbox"] {
    margin: 5px 0 5px 0;
  }
  .boxitem {
    display: flex;
    flex-direction: column;
    background-color: #2a2b30;
    margin-top: 5px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7px;
    box-shadow: rgba(255, 255, 255, 0.2) 0 0 20px -5px;
    background:rgba(219, 219, 219, 0.2);
    backdrop-filter:blur(5px);
    margin-bottom: 17px;
    color: var(--grey);
  }
  .boxitem div {
    line-height: 1.2;
  }

  form .listcheck {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    margin-bottom: 7px;
  }



  .listcheck .li {
    display: flex;
    padding-left: 4ch;
    gap: 7px;
    color: var(--grey);
  }

  form button {
    display:inline-flex;
    position: relative;
    align-items:center;
    gap:10px;
    font-family:var(--font-mono);
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--white);
    background: var(--red-deep);
    padding:7px 15px;
    border:1px solid var(--red);
    border-radius: 25px;
    box-shadow: var(--red-bright) 0 0 20px -5px;
    transition: .5s, background .2s ease, transform .2s ease;
    cursor:pointer;
    margin-bottom: 10px;
  }
  form button:hover { background:var(--red-deep); transform:translateY(-2px); box-shadow: var(--red-bright) 0 0 35px -7px;}

  .lastnote {
    margin-top: 50px;
  }

  .ledwall, .lighting, .sounds, .sfx {
    display: none;
  }

  /* ---------- FOOTER ---------- */
  footer{ padding:80px 0 40px; background:var(--bg); }
  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:60px;
    border-bottom:1px solid var(--line);
  }
  .footer-brand img{ height:38px; margin-bottom:18px; }
  .footer-brand p{ color:var(--grey); font-size:14px; max-width:280px; }
  .footer-col h4{
    font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--grey-dim); margin-bottom:18px;
  }
  .footer-col a, .footer-col p{ display:block; color:var(--grey); font-size:14px; margin-bottom:12px; }
  .footer-col a:hover{ color:var(--red-bright); }
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:28px;
    font-family:var(--font-mono); font-size:12px; color:var(--grey-dim);
    flex-wrap:wrap; gap:12px;
  }
  .footer-social{ display:flex; gap:18px; }

  @media (max-width:700px){
    .menu-toggle{ display:flex; }
    .footer-grid{ grid-template-columns:1fr 1fr; }

    .nav-cta {
      display: none;
    }
    
    .nav-links {
        position: absolute;
        width: 100%;
        height: 100vh;
        top: 0px;
        display: inline-block;
        text-align: center;
        right: 100%;
        transition: all .5s;
        overflow: hidden;
        background:rgba(8, 8, 10, 0.9);
        backdrop-filter:blur(10px);
        z-index: 9;
    }

    .nav-links a {
        position: relative;
        top: 70px;
        width: 80%;
        padding: 20px ;
        margin-top: 10px;
        display: block;
        left: 10%;
        font-size: 110%;
    }

    .change ul{
        right: 0%;
    }


  }