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

    :root{
      --bg:#050505;
      --red:#ff1f1f;
      --dark-red:#6e0000;
      --soft:#c9c9c9;
      --white:#ffffff;
      --glass:rgba(255,255,255,0.04);
      --border:rgba(255,255,255,0.08);
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      font-family:'Inter Tight', sans-serif;
      background:var(--bg);
      color:var(--white);
      overflow-x:hidden;
      cursor:none;
    }

    /* ========================= */
    /* CUSTOM CURSOR */
    /* ========================= */

    .cursor{
      width:18px;
      height:18px;
      border-radius:50%;
      position:fixed;
      pointer-events:none;
      background:rgba(255,40,40,0.9);
      box-shadow:
      0 0 20px rgba(255,0,0,.8),
      0 0 50px rgba(255,0,0,.5),
      0 0 80px rgba(255,0,0,.3);
      transform:translate(-50%, -50%);
      z-index:9999;
      mix-blend-mode:screen;
    }

    .cursor-trail{
      width:80px;
      height:80px;
      border-radius:50%;
      position:fixed;
      pointer-events:none;
      background:radial-gradient(circle, rgba(255,0,0,.35) 0%, transparent 70%);
      filter:blur(20px);
      transform:translate(-50%, -50%);
      z-index:9998;
    }

    /* ========================= */
    /* BACKGROUND */
    /* ========================= */

    .background{
      position:fixed;
      inset:0;
      overflow:hidden;
      z-index:-10;
      background:#050505;
    }

    .blob{
      position:absolute;
      border-radius:50%;
      filter:blur(100px);
      opacity:.75;
      animation:float 18s infinite ease-in-out alternate;
      mix-blend-mode:screen;
    }

    .blob:nth-child(1){
      width:600px;
      height:600px;
      background:#ff0000;
      top:-10%;
      left:-10%;
    }

    .blob:nth-child(2){
      width:500px;
      height:500px;
      background:#7e0000;
      bottom:-10%;
      right:-10%;
      animation-duration:24s;
    }

    .blob:nth-child(3){
      width:400px;
      height:400px;
      background:#ff2a2a;
      top:40%;
      left:40%;
      animation-duration:20s;
    }

    @keyframes float{
      from{
        transform:translateY(-50px) translateX(-30px) scale(1);
      }
      to{
        transform:translateY(50px) translateX(30px) scale(1.2);
      }
    }

    .noise{
      position:fixed;
      inset:0;
      opacity:.07;
      background-image:url('https://grainy-gradients.vercel.app/noise.svg');
      z-index:-1;
      pointer-events:none;
      animation:noise 0.3s infinite;
    }

    @keyframes noise{
      0%{transform:translate(0,0)}
      25%{transform:translate(1px,-1px)}
      50%{transform:translate(-1px,1px)}
      75%{transform:translate(1px,1px)}
      100%{transform:translate(0,0)}
    }

    /* ========================= */
    /* LAYOUT */
    /* ========================= */

    nav{
      position:fixed;
      left:40px;
      top:50%;
      transform:translateY(-50%);
      z-index:100;
    }

    nav ul{
      list-style:none;
      display:flex;
      flex-direction:column;
      gap:22px;
    }

    nav a{
      color:rgba(255,255,255,.55);
      text-decoration:none;
      font-size:.75rem;
      text-transform:uppercase;
      letter-spacing:.25em;
      transition:.4s;
    }

    nav a:hover{
      color:white;
      text-shadow:0 0 12px rgba(255,0,0,.8);
    }

    section{
      width:min(1200px, calc(100% - 160px));
      margin:auto;
      position:relative;
      z-index:5;
    }

    /* ========================= */
    /* HERO */
    /* ========================= */

    .hero{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:80px;
    }

    .hero-text{
      flex:1;
    }

    .eyebrow{
      font-size:.75rem;
      letter-spacing:.35em;
      text-transform:uppercase;
      color:rgba(255,255,255,.5);
      margin-bottom:20px;
    }

    h1{
      font-weight:800;
      text-transform:uppercase;
      font-size:clamp(4rem, 10vw, 9rem);
      line-height:.9;
      letter-spacing:-0.07em;
      margin-bottom:30px;
      max-width:700px;
    }

    .hero p{
      font-size:1.05rem;
      color:rgba(255,255,255,.65);
      font-size:1rem;
      line-height:1.8;
      max-width:500px;
    }

    .hero-image{
      width:420px;
      aspect-ratio:1/1;
      border-radius:50%;
      overflow:hidden;
      position:relative;
      border:1px solid rgba(255,255,255,.1);
      box-shadow:
      0 0 100px rgba(255,0,0,.35),
      inset 0 0 40px rgba(255,255,255,.05);
    }

    .hero-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      filter:contrast(1.05) saturate(.9);
    }

    /* ========================= */
    /* CARDS */
    /* ========================= */

    /* ========================= */
    /* PANELS */
    /* ========================= */

    .panel{
      position:relative;
      overflow:hidden;
      transition:transform .5s ease, border-color .5s ease, background .5s ease;

      margin-bottom:140px;
      background:var(--glass);
      border:1px solid var(--border);
      backdrop-filter:blur(20px);
      isolation:isolate;
      border-radius:32px;
      padding:50px;
      box-shadow:
      inset 0 0 30px rgba(255,255,255,.02),
      0 0 80px rgba(255,0,0,.06);
    }

    .panel::before{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 20%, rgba(255,0,0,.08), transparent 80%);
      opacity:0;
      transition:.6s ease;
      pointer-events:none;
    }

    .panel:hover{
      transform:translateY(-6px);
      border-color:rgba(255,0,0,.25);
      background:rgba(255,255,255,.05);
    }

    .panel:hover::before{
      opacity:1;
    }

    .panel-title{
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.3em;
      margin-bottom:55px;
      font-weight:700;
      color:rgba(255,255,255,.55);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
      gap:40px;
    }

    .grid > div{
      position:relative;
      padding:28px;
      border-radius:24px;
      border:1px solid transparent;
      transition:all .45s ease;
      background:rgba(255,255,255,.015);
    }

    .grid > div:hover{
      border-color:rgba(255,0,0,.2);
      background:rgba(255,255,255,.03);
      transform:translateY(-4px);
      box-shadow:0 0 40px rgba(255,0,0,.08);
    }

    .grid > div::after{
      content:'';
      position:absolute;
      inset:0;
      border-radius:24px;
      background:linear-gradient(140deg, rgba(255,255,255,.04), transparent 50%);
      opacity:0;
      transition:.5s;
      pointer-events:none;
    }

    .grid > div:hover::after{
      opacity:1;
    }

    .grid h3{
      font-size:.78rem;
      text-transform:uppercase;
      letter-spacing:.2em;
      margin-bottom:16px;
      font-weight:700;
      color:rgba(255,255,255,.5);
    }

    .grid p,
    .grid strong,
    .grid span,
    .grid li{
      color:rgba(255,255,255,.82);
      font-size:1rem;
      line-height:1.8;
    }

    ul.clean{
      list-style:none;
    }

    footer{
      padding:80px 0 120px;
      color:rgba(255,255,255,.45);
      font-size:.9rem;
      line-height:1.8;
    }

    /* ========================= */
    /* RESPONSIVE */
    /* ========================= */

    @media(max-width:900px){

      nav{
        display:none;
      }

      section{
        width:calc(100% - 40px);
      }

      .hero{
        flex-direction:column;
        justify-content:center;
        padding:120px 0;
      }

      .hero-image{
        width:300px;
      }

      h1{
        font-size:4rem;
      }

      .panel{
        padding:30px;
      }

    }

    .title-link {
  text-decoration: none;
  color: white;
  display: inline-block;
}
.title-link:hover {
  opacity: .8;
  transform: translateX(5px);
  transition: .4s ease;
}

.title-link,
.title-link:visited,
.title-link:hover,
.title-link:active {
  color: white;
  text-decoration: none;
}

.glitch-title span {
  display: block;
}