:root{
    --kw-bg:#060907;
    --kw-bg-soft:#0b0f0c;
    --kw-line:rgba(255,255,255,0.08);
    --kw-green:#3dff8a;
    --kw-green-soft:rgba(61,255,138,0.10);
    --kw-green-dim:#1c8f52;
    --kw-text:#eef1ec;
    --kw-text-dim:#8a938c;
    --kw-mono:'JetBrains Mono','Courier New',monospace;
    --kw-display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
    --kw-body:'Inter','Helvetica Neue',Arial,sans-serif;
  }

  #kw-cloud{
    position:relative;
    background:var(--kw-bg);
    color:var(--kw-text);
    padding:120px 0 100px;
    overflow:hidden;
    font-family:var(--kw-body);
    isolation:isolate;
  }

  /* ambient embers to echo the site's soft green glow / grain treatment */
  #kw-cloud::before{
    content:"";
    position:absolute;
    inset:-10% -10% auto -10%;
    height:60%;
    background:radial-gradient(60% 60% at 50% 0%, rgba(61,255,138,0.16), transparent 70%);
    pointer-events:none;
    z-index:0;
  }
  #kw-cloud::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size:64px 64px;
    mask-image:radial-gradient(70% 60% at 50% 30%, #000 40%, transparent 90%);
    pointer-events:none;
    z-index:0;
  }

  .kw-head{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto 64px;
    padding:0 32px;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
  }
  .kw-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:var(--kw-mono);
    font-size:13px;
    letter-spacing:0.08em;
    color:var(--kw-green);
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .kw-eyebrow .kw-dot{
    width:6px;height:6px;border-radius:50%;
    background:var(--kw-green);
    box-shadow:0 0 10px 2px var(--kw-green);
  }
  .kw-title{
    font-family:var(--kw-display);
    font-weight:700;
    font-size:clamp(34px,5vw,58px);
    line-height:1.02;
    letter-spacing:-0.01em;
    text-transform:uppercase;
    margin:0;
  }
  .kw-title span{ color:var(--kw-green); }
  .kw-sub{
    max-width:420px;
    font-size:15px;
    line-height:1.6;
    color:var(--kw-text-dim);
  }
  .kw-count{
    font-family:var(--kw-mono);
    font-size:13px;
    color:var(--kw-text-dim);
    letter-spacing:0.04em;
  }
  .kw-count b{ color:var(--kw-green); font-weight:600; }

  /* ---- the infinite rows ---- */
  .kw-rows{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:14px;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  }

  .kw-row{
    display:flex;
    width:max-content;
    gap:12px;
    will-change:transform;
    animation:kw-scroll var(--kw-duration,60s) linear infinite;
    animation-direction:var(--kw-dir,normal);
    contain:content;
    content-visibility:auto;
    contain-intrinsic-size:auto 46px;
    backface-visibility:hidden;
  }
   .kw-row:hover{ animation-play-state:paused; } 

  @keyframes kw-scroll{
    from{ transform:translate3d(0,0,0); }
    to{ transform:translate3d(-50%,0,0); }
  }

  .kw{
    --mx:0px; --my:0px;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:10px 18px;
    border:1px solid var(--kw-line);
    border-radius:6px;
    background:var(--kw-bg-soft);
    color:var(--kw-text-dim);
    font-size:13px;
    letter-spacing:0.01em;
    white-space:nowrap;
    cursor:default;
    transform:translate3d(var(--mx),var(--my),0);
    transition:color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .12s ease-out;
  }
  .kw:hover{
    color:var(--kw-green);
    border-color:var(--kw-green-dim);
    background:var(--kw-green-soft);
    box-shadow:0 0 24px -6px rgba(61,255,138,0.55);
  }
  .kw.kw-major{
    font-family:var(--kw-display);
    font-weight:600;
    text-transform:uppercase;
    font-size:14px;
    color:var(--kw-text);
    border-color:rgba(61,255,138,0.25);
  }
  .kw-tick{ font-family:var(--kw-mono); color:var(--kw-green-dim); font-size:11px; }
  .kw:hover .kw-tick{ color:var(--kw-green); }

  @media (max-width:780px){
    #kw-cloud{ padding:80px 0 70px; }
    .kw-head{ padding:0 20px; }
    .kw{ padding:8px 14px; font-size:12px; }
  }

  @media (prefers-reduced-motion: reduce){
    .kw-row{ animation:none; }
    .kw-rows{ overflow-x:auto; }
  }