:root {
  --bg-dark: #0e0e0f;
  --warm-tint: rgba(255, 207, 145, 0.06);
  --grid-line: rgba(255,255,255,0.08);
  --pipeline-line: rgba(255,255,255,0.32);
  --pipeline-dot: rgba(255,255,255,0.85);
  --text-main: #efefef;
  --text-muted: #999;
  --accent: #4bb8ff;
}

/* base */
* { margin:0; padding:0; box-sizing:border-box; font-family:Inter, sans-serif; }
body { background:var(--bg-dark); color:var(--text-main); overflow-x:hidden; }



body {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  transition: width 0.12s ease, height 0.12s ease, opacity 0.2s ease;
}


/* nav */
.nav-header {
  position:absolute;
  top:0; width:100%; padding:24px 0; z-index:50;
}
.nav-container {
  width:92%; max-width:1280px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
}
.nav-menu { display:flex; gap:32px; }
.nav-logo { width:36px; }
.nav-pill {
  padding:6px 20px; border-radius:24px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:var(--text-main); font-size:0.85rem; text-decoration:none;
}
.nav-link { color:var(--text-muted); font-size:0.85rem; text-decoration:none; }

/* hero */
.hero {
  position:relative; width:100%; height:120vh;
  display:flex; align-items:center; justify-content:center;
}

/* warm grey infra background */
.hero-bg {
  position:absolute; inset:0;
  background:radial-gradient(circle at 40% 40%, #1b1b1c, #0b0b0b 78%);
  z-index:1;
}

/* generated blueprint */
.blueprint-bg {
  position:absolute; inset:0; z-index:2;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity:0.22;
  mix-blend-mode:screen;
}

/* pipeline svg */
.pipeline-layer {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.pipeline-svg {
  width:80%; max-width:1200px;
  opacity:0; /* gsap fade in */
}

/* canvas */
.motion-canvas {
  position:absolute; inset:0; z-index:4;
  pointer-events:none;
  opacity:0.9;
}

/* content */
.hero-content {
  position:relative; z-index:6;
  text-align:center; max-width:720px;
}
.hero-product-logo {
  width:82px; margin-bottom:26px;
}
.hero-title {
  font-size:2rem; font-weight:400; margin-bottom:8px;
}
.hero-sub {
  font-size:1.05rem; margin-bottom:4px;
}
.hero-desc { font-size:0.92rem; color:var(--text-muted); }

/* scroll */
.scroll-indicator {
  position:absolute; bottom:40px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  z-index:7; opacity:0.9;
}
.scroll-wheel {
  width:20px; height:32px; border:2px solid var(--text-muted);
  border-radius:12px; position:relative;
}
.scroll-wheel::after {
  content:""; width:6px; height:6px;
  background:var(--text-muted); border-radius:50%;
  position:absolute; left:50%; top:6px; transform:translateX(-50%);
  animation:wheel 1.6s infinite;
}
@keyframes wheel {
  100% { opacity:0; top:18px; }
}

/* domains */
.domains {
  width:100%; padding:180px 0 180px;
  display:flex; justify-content:center;
}
.domains-inner {
  width:92%; max-width:800px;
  display:flex; flex-direction:column; gap:110px;
}
.domain-item h3 { font-size:1.4rem; margin-bottom:8px; }
.domain-item ul { list-style:none; color:var(--text-muted); line-height:1.6; }
.domain-spine svg { display:block; margin-bottom:18px; }
.spine-dot { fill:var(--pipeline-dot); }
.spine-line { stroke:var(--pipeline-line); stroke-width:2; }

.pipeline-svg { opacity:1; }