:root {
      --accent-a:#c026d3;
      --accent-b:#0891b2;
      --fg:#fff;
	  --time-anim: 4s;
	  --delay-anim: 2s;
	
    }
    html,body{
      height:100%;
      margin:0;
      overflow:hidden;
      font-family:"Rajdhani",system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial;
      color:var(--fg);
      background:#000;
      
      * {
          box-sizing: border-box;
      }
    }

    body::before{
      content:"";
      position:fixed;
      inset:0;
      background:url("../images/bg.png") center/cover no-repeat;
      filter:contrast(1.2) brightness(0.6) saturate(1.3);
      animation:bgGlitch 5s infinite steps(1);
      z-index:0;
    }

    @keyframes bgGlitch{
      0%,90%,100%{clip-path:inset(0 0 0 0);}
      20%{clip-path:inset(5% 0 10% 0);}
      50%{clip-path:inset(15% 0 5% 0);}
      70%{clip-path:inset(10% 0 20% 0);}
    }
    

    .stage{
      position:relative;
      z-index:2;
      min-height:100vh;
      display:grid;
      place-items:center;
      padding:4vw;
      text-align:center;
      background:rgba(0,0,0,0.25);
      backdrop-filter:blur(6px);
      transition:opacity 1s ease;
    }

    .line{
      position: relative;
      max-width:72ch;
      font-weight:900;
      line-height:1.1;
      letter-spacing:-0.02em;
      font-size:clamp(2.2rem,7vw,4.5rem);
      font-weight:400;
      text-shadow:0 0 10px rgba(0,0,0,0.4);
      animation-name: glitch-anim-text;
	  animation-duration: var(--time-anim);
	  animation-timing-function: linear;
	  animation-iteration-count: infinite;
	  animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
    }
    
    @keyframes glitch-anim-text {
	0% { 
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	2% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	4% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	7% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	8% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	9% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	9.9% {
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
	}
	10%, 100% {
		transform: translate3d(0,0,0) scale3d(1,1,1);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}


    .glitch-text{
      position:relative;
      display:inline-block;
    }
    .glitch-text::before,
    .glitch-text::after{
      content:attr(data-text);
      position:absolute;
      left:0;top:0;width:100%;height:100%;
      clip:rect(0,0,0,0);
    }
    .glitch-text::before{
      left:2px;
      text-shadow:-2px 0 var(--accent-a);
      animation:glitch-top 2.5s infinite linear alternate-reverse;
    }
    .glitch-text::after{
      left:-2px;
      text-shadow:-2px 0 var(--accent-b);
      animation:glitch-bottom 3s infinite linear alternate-reverse;
    }

    @keyframes glitch-top{
      0%{clip:rect(0,9999px,0,0);}
      20%{clip:rect(5px,9999px,15px,0);}
      40%{clip:rect(20px,9999px,40px,0);}
      60%{clip:rect(10px,9999px,80px,0);}
      80%{clip:rect(50px,9999px,180px,0);}
      100%{clip:rect(0,9999px,0,0);}
    }
    @keyframes glitch-bottom{
      0%{clip:rect(0,9999px,0,0);}
      20%{clip:rect(100px,9999px,140px,0);}
      40%{clip:rect(200px,9999px,230px,0);}
      60%{clip:rect(140px,9999px,300px,0);}
      80%{clip:rect(20px,9999px,360px,0);}
      100%{clip:rect(0,9999px,0,0);}
    }

    #voice-toggle{
      position:fixed;
      bottom:40px;
      right:50%;
      transform:translateX(50%);
      /*background:linear-gradient(90deg,var(--accent-a),var(--accent-b));*/
      background:none;
      /*border:none;*/
      border: 2px solid;
      color:#fff;
      font-size:1.4rem;
      padding:14px 36px;
      border-radius:40px;
      cursor:pointer;
      z-index:10;
      transition:all 0.3s ease;
      box-shadow:0 0 15px rgba(0,0,0,0.5);
    }
    #voice-toggle:hover{
      transform:translateX(50%) scale(1.05);
      box-shadow:0 0 20px var(--accent-b);
    }

    .q { color: var(--accent-a); }
    .a { color: var(--accent-b); }