:root{
  --bg: #f5f6f4;
  --ink: #0b0b0c;
  --muted: #6b7076;
  --white: #ffffff;
  --elev: rgba(15,18,21,.06);
  --ring: rgba(15,18,21,.12);
  --shadow: rgba(15,18,21,.12);
  --radius: 18px;
  --chip-bg: rgba(255,255,255,.9);
  --chip-blur: 6px;

  /* Cursor reveal dial-in (tuned to match the video) */
  --spot-r: 150px;          /* reveal radius */
  --spot-hard: 55%;         /* inner hard circle */
  --spot-soft: 88%;         /* feather end */
  --trail-ease: 0.14;       /* lerp factor in JS */
}
@font-face {
    font-family: 'apercu-regular';
    src: url('/apercu-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
  

*{ box-sizing: border-box }
html,body{ height: 100% }
body{
  margin:0;
  font-family: 'apercu-regular', 'Helvetica', sans-serif;
  color: var(--ink);
  /* background: var(--bg); */

  background: 
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 3px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 3px),
    url('download.webp');
  background-size: 100px 100px, 100px 100px, cover;
  background-position: top left, top left, center;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed; /* Optional if you want parallax effect */


  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

/* Subtle 40px grid like the original */
.bg-grid{
  position: fixed; inset: 0; z-index: -2;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  opacity: .18;
  filter: saturate(.9);
}

/* Soft edge vignette */
.bg-vignette{
  position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(125, 200, 160, .22), transparent 60%),
              radial-gradient(1100px 900px at 95% 120%, rgba(255, 200, 150, .20), transparent 60%),
              radial-gradient(1000px 700px at 5% 110%, rgba(170, 210, 240, .16), transparent 60%);
}

/* Top nav */
.nav{
  position: fixed; top: 18px; left: 24px; right: 24px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 8px;
}
.brand{ letter-spacing: .2rem; font-weight: 800; font-size: 28px }
.brand-word{ display:inline-block; transform: translateY(1px); font-family: 'apercu-regular', 'Helvetica', sans-serif; }
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  margin-left:10px; padding:4px 8px; font-size:12px; font-weight:600;
  color:#4f5bd5; background: rgba(79,91,213,.12); border:1px solid rgba(79,91,213,.24);
  border-radius: 999px; box-shadow: 0 1px 0 var(--ring) inset;
}
.nav-actions{ display:flex; align-items:center; gap:22px }
.nav-link{ color:#2b2f34; text-decoration:none; font-weight:500 }
.cta{
  text-decoration:none; color:#0f1113; font-weight:700;
  background: #2c2d2f; color:#fff; padding:12px 18px; border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.15), 0 2px 0 rgba(255,255,255,.12) inset;
}

/* Hero layout */
.hero{
  height: 100vh;
  display:grid;
  grid-template-rows: 1fr auto auto auto 2fr;
  place-items: center;
  text-align:center;
}

/* Product Hunt badge */
.ph-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.8); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  margin-top: 70px;
}
.ph-dot{
  background:#f64d2f; color:#fff; font-weight:800; width:22px; height:22px; display:grid; place-items:center; border-radius:6px;
}
.ph-copy{ color:#7a7f86; font-size:12px; font-weight:700; letter-spacing:.04em }
.ph-name{ font-weight:700 }
.ph-score{ font-weight:700; background:#ffe7e1; color:#e04523; padding:4px 8px; border-radius:999px; }
.ph-caret{ color:#e04523; font-weight:700 }

/* Headline */
.headline{
  font-size: clamp(42px, 6.5vw, 96px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 18px 0 8px;
  padding: 0 16px;
}
.logo-spotify{ display:inline-grid; place-items:center; transform: translateY(6px) }
.spot{ width: clamp(40px, 5vw, 70px); height: auto; fill: #000 }

/* Subhead */
.subhead{
  color: var(--muted);
  font-size: clamp(16px, 1.9vw, 20px);
  margin: 8px 0 24px;
}

/* Search */
.search-wrap{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  padding: 14px 16px;
  border-radius: 16px;
  width: min(640px, 86vw);
  z-index: 9999;
}
.search-wrap:hover{
  cursor: pointer;
  transform: scale(1.06,1.06);
  transition: all 0.5s;
}
.search-icon{ width:22px; height:22px; color:#7a7f86; display:grid; place-items:center }
.search-icon svg{ width:100%; height:100% }
.search-input{
  flex:1; border:0; outline:0; background:transparent;
  font-size:16px; font-weight:500; color:#2b2f34;
}
.kbd{
  padding:6px 10px; border-radius:10px; font-weight:600; font-size:13px; color:#2b2f34;
  background:#f1f2f4; border:1px solid rgba(0,0,0,.08);
}
.searches{ color:#7a7f86; font-weight:500; margin-top: 12px; user-select:none }
.searches-icon{ margin-right:8px }

/* LOGOS FIELD (only visible through cursor mask) */
.logos-field{
  position: fixed;
  inset: 0;
  pointer-events: none; /* clicks go through */
  display: grid;
  grid-template-columns: repeat(5, max-content);
  grid-auto-rows: max-content;
  gap: 14px 18px;
  align-content: end;
  justify-content: start;
  padding: 0 0 120px 96px; /* bottom-left cluster like the reference */
  opacity: 1;
  /* Mask defaults keep it “hidden” until JS moves the spotlight under the cursor */
  --mx: -400px; --my: -400px;
  -webkit-mask-image: radial-gradient(
    var(--spot-r) var(--spot-r) at var(--mx) var(--my),
    rgba(0,0,0,1) var(--spot-hard),
    rgba(0,0,0,.6) calc((var(--spot-hard) + var(--spot-soft))/2),
    rgba(0,0,0,0) var(--spot-soft)
  );
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(
    var(--spot-r) var(--spot-r) at var(--mx) var(--my),
    rgba(0,0,0,1) var(--spot-hard),
    rgba(0,0,0,.6) calc((var(--spot-hard) + var(--spot-soft))/2),
    rgba(0,0,0,0) var(--spot-soft)
  );
  mask-repeat: no-repeat;
}

/* Logo chips */
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  background: var(--chip-bg);
  backdrop-filter: blur(var(--chip-blur));
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  font-weight: 600;
  color: #202327;
  margin-top: 15px;
}
.chip-icon{
  width: 28px; height: 28px; border-radius: 8px;
  display:grid; place-items:center; font-weight:800; color:#fff;
  font-size: 16px;
}
.uber{ background:#171A20 }
.sp{ background:#1DB954 }
.abnb{ background:#FF5A5F }
.tsla{ background:#E82127 }
.msft{ background:#F3F3F3; color:#111; border:1px solid rgba(0,0,0,.08) }
.aapl{ background:#111 }
.goog{ background:#4285F4 }
.amzn{ background:#232f3e }
.nvda{ background:#76B900; color:#111 }
.meta{ background:#1877F2 }
.ticker{ color:#7a7f86; font-weight:600; margin-left:6px }

/* Footer */
.footer{
  position: fixed; inset-inline: 24px; bottom: 18px;
  display:flex; align-items:center; justify-content:space-between;
  color:#6b7076; font-weight:500;
}
.footer .left .terms{ color:#6b7076; text-decoration:none; margin-left:12px }
.footer .right{ display:flex; align-items:center; gap:14px }
.soc{ width:22px; height:22px; color:#6b7076 }
.soc svg{ width:22px; height:22px }

/* Responsive niceties */
@media (max-width: 720px){
  .logos-field{ padding-left: 24px; padding-bottom: 140px; gap: 10px 12px }
  .nav{ left: 14px; right: 14px }
}