* {
    box-sizing: border-box;
  }
  
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
  }
  
  body {
    overflow: hidden;
    background: #1DA998;
    color: #ffffff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  /* Layout */
  
  .site {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  .topbar {
    position: absolute;
    top: 5vh;
    left: 5vw;
    right: 5vw;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .logo {
    width: 120px;
    height: auto;
    display: block;
  }
  
  .email {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 250;
    margin-right: 30px;
  }
  
  .email:hover {
    color: #ffffff;
  }
  
  /* Hero */
  
  .hero {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 2vw;
    padding: 14vh 5vw 8vh;
  }
  
  .copy-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
  .text-stage {
    width: min(100%, 700px);
    min-height: 18em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: -20px;
  }
  
  .line {
    width: 100%;
    opacity: 0;
    font-size: clamp(1.7rem, 2.35vw, 2.8rem);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 300;
  }
  
  .line + .line {
    margin-top: 1.15em;
  }
  
  .video-panel {
    width: 100%;
  }
  
  .video-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  
  .video-frame {
    width: 720px;
    height: 320px;
    max-width: 100%;
    overflow: hidden;
    position: relative;
  }

  .video-frame video {
    position: absolute;
    width: 720px;
    max-width: none;
    height: auto;
    top: -60px;
    left: 0;
  }
  
  /* Mobile */
  
  @media (max-width: 768px) {
    body {
      overflow: auto;
    }
  
    .topbar {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      padding: 2rem 1.4rem 0;
    }
  
    .logo {
      width: 120px;
    }
  
    .hero {
      height: auto;
      min-height: 100%;
      grid-template-columns: 1fr;
      gap: 2.5rem;
      padding: 4rem 1.4rem 3rem;
    }
  
    .text-stage {
      width: 100%;
      min-height: 20em;
    }
  
    .line {
      font-size: clamp(1.55rem, 7vw, 2.35rem);
      line-height: 1.14;
    }
  
    .video-frame {
      width: 100%;
      height: 260px;
    }
      
    .video-frame video {
      width: 100%;
      top: 0;
      left: 0;
    }  
  }
  
  /* Texture */
  
  @keyframes grainShift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-1%, 1%); }
    100% { transform: translate(1%, -1%); }
  }
  
  /* --- TEXTURE LAYER --- */
  
  @keyframes grainShift {
    0%   { transform: translate(0, 0); }
    50%  { transform: translate(-1.5%, 1%); }
    100% { transform: translate(1%, -1.5%); }
  }
  
  body::before {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
  
    background-image:
      repeating-radial-gradient(
        circle at 20% 30%,
        rgba(255, 255, 255, 0.1) 0 1px,
        transparent 1px 7px
      ),
      repeating-radial-gradient(
        circle at 70% 60%,
        rgba(0, 0, 0, 0.03) 0 1px,
        transparent 1px 9px
      );
  
    opacity: 1;
    animation: grainShift 18s linear infinite;
  }
  .static-copy h1 {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.2rem);
    line-height: 1.08;
    font-weight: 300;
    letter-spacing: -0.03em;
  }
  
  .static-copy p:not(.tagline) {
    margin: 1.5rem 0 0 0;
    font-size: clamp(0.8rem, 0.9vw, 1rem);
    line-height: 1.45;
    font-weight: 330;
    max-width: 42rem;
    color: rgba(255,255,255,0.9);
  }

  .tagline {
    margin-top: 2rem;
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    font-weight: 500;
    line-height: 1.4;
    color: #ffffff;
  }