: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; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--bg);
    color:var(--white);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
  }
  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);
  }


  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    padding-bottom:100px;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute; inset:0;
    background:url('promo stage 1.jpg') center 10%/cover no-repeat;
    filter: blur(0.01px);
    filter: contrast(108%);
  }
  .hero-scrim{
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(8,8,10,0.55) 0%, 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.75) 0%, rgba(8, 8, 10, 0.1) 45%);
  }
  .beam{
    position:absolute;
    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;
  }
  .hero-inner{ position:relative; top: 1.5vh; z-index:2; width:100%; }
  .hero-sub{
    font-size:17px;
    color:var(--grey);
    max-width:480px;
    margin:22px 0 36px;
  }
  .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
  .hero-badge{
    position:absolute;
    top:130px; right:32px;
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono);
    font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--grey);
  }


  /* ---------- MARQUEE ---------- */
  .marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:var(--bg-alt);
    padding:16px 0;
    overflow:hidden;
    white-space:nowrap;
  }
  .marquee-track{
    display:inline-flex;
    animation:scroll 28s linear infinite;
  }
  .marquee span{
    font-family:var(--font-mono);
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--grey-dim);
    padding:0;
    padding-right:14px;
    padding-left: 14px;
    display:inline-flex;
    align-items:center;
    gap:28px;
  }
  .marquee span::after{ content:'/'; color:var(--red); }
  @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- ABOUT ---------- */
  .about{ padding:140px 0 120px; position:relative; }
  .about-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:80px;
    align-items:start;
  }
  .about h2{ font-size:clamp(34px,4vw,52px); text-transform:uppercase; margin-bottom:26px; }
  .about p{ color:var(--grey); font-size:16px; max-width:480px; margin-bottom:16px; }
  .stat-col{ display:flex; flex-direction:column; gap:0; }
  .stat-row{
    display:flex; align-items:baseline; gap:20px;
    padding:26px 0;
    border-bottom:1px solid var(--line);
  }
  .stat-row:first-child{ border-top:1px solid var(--line); }
  .stat-num{ font-family:var(--font-display); font-size:44px; color:var(--red-bright); min-width:110px; }
  .stat-label{ font-family:var(--font-mono); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--grey); }

  /* ---------- SERVICES ---------- */
  .services{ padding:100px 0 140px; background:var(--bg-alt); position:relative; }
  .services-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:60px; gap:40px; flex-wrap:wrap; }
  .services-head h2{ font-size:clamp(34px,4vw,52px); text-transform:uppercase; max-width:560px; }
  .services-head p{ color:var(--grey); max-width:340px; font-size:15px; }
  .service-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:var(--bg-alt);
    padding:40px 28px;
    transition:background .25s ease;
    position:relative;
    min-height:260px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .service-card:hover{ background:var(--surface); }
  .service-num{ font-family:var(--font-mono); font-size:13px; color:var(--red); }
  .service-card h3{ font-size:24px; text-transform:uppercase; margin:24px 0 10px; }
  .service-card p{ color:var(--grey); font-size:14px; }

  /* ---------- SHOWCASE ---------- */
  .showcase{ padding:140px 0; position:relative; }
  .showcase-head{ margin-bottom:50px; display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px; }
  .showcase-head h2{ font-size:clamp(34px,4vw,52px); text-transform:uppercase; }
  .showcase-frame{
    position:relative;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
    border:1px solid var(--line);
  }
  .showcase-frame img{ width:100%; height:auto; display:block; }
  .showcase-cap{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:20px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--grey);
  }
  .showcase-cap .live{ color:var(--red-bright); display:flex; align-items:center; gap:8px; }
  .showcase-cap .live::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--red-bright); animation:pulse 1.6s infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }

  .gallery-teaser{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
    margin-top:60px;
  }
  .teaser-card{
    aspect-ratio:3/4;
    background:var(--surface);
    border:1px solid var(--line);
    display:flex; align-items:flex-end;
    padding:18px;
    position:relative;
    overflow:hidden;
  }
  .teaser-card::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(160deg, var(--red-deep) 0%, transparent 60%);
    opacity:0.5;
  }
  .teaser-card span{
    position:relative;
    font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--white);
  }

  /* ---------- CTA ---------- */
  .cta{
    padding:140px 0;
    background:var(--bg-alt);
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .cta h2{
    font-size:clamp(38px,7vw,86px);
    text-transform:uppercase;
    max-width:900px;
    margin:0 auto 30px;
  }
  .cta h2 span{ color:var(--red-bright);}
  .cta p{ color:var(--grey); max-width:460px; margin:0 auto 40px; }
  .cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

  /* ---------- 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){
    .hero-badge{ display:none; }
    .menu-toggle{ display:flex; }
    .about-grid{ grid-template-columns:1fr; gap:50px; }
    .service-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery-teaser{ grid-template-columns:repeat(2,1fr); }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .hero-bg {
      height: 90%;
    }

    .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%;
    }

  }
  @media (max-width:550px) {
    .hero-bg {
      height: 80%;
    }
  }
  @media (max-width:400px) {
    .hero-bg {
      height: 70%;
    }
  }