<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Naked Yak — Stop Shaving. Start Shipping.</title>
  <meta name="description" content="Naked Yak is the project planning tool that keeps you focused on what matters. Detect yak shaving before it starts.">
  <style>
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --bg: #0a0a0b;
      --surface: #111113;
      --surface-2: #1a1a1e;
      --border: #27272a;
      --text: #fafafa;
      --text-muted: #a1a1aa;
      --accent: #e4ff54;
      --accent-dim: #c8e040;
      --gradient-1: #e4ff54;
      --gradient-2: #54ffc8;
      --gradient-3: #54b4ff;
      --radius: 16px;
      --radius-sm: 10px;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Noise texture overlay */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 9999;
    }

    /* ---- NAV ---- */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      backdrop-filter: blur(20px) saturate(1.2);
      -webkit-backdrop-filter: blur(20px) saturate(1.2);
      background: rgba(10, 10, 11, 0.7);
      border-bottom: 1px solid rgba(255,255,255,0.04);
      transition: background 0.3s;
    }

    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 700;
      font-size: 18px;
      letter-spacing: -0.02em;
      text-decoration: none;
      color: var(--text);
    }

    .nav-logo svg { flex-shrink: 0; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 32px;
      list-style: none;
    }

    .nav-links a {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.2s;
    }

    .nav-links a:hover { color: var(--text); }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: all 0.2s ease;
    }

    .btn-primary {
      background: var(--accent);
      color: #0a0a0b;
    }

    .btn-primary:hover {
      background: #f0ff80;
      box-shadow: 0 0 30px rgba(228, 255, 84, 0.3);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-ghost:hover {
      border-color: var(--text-muted);
      background: var(--surface);
    }

    /* ---- HERO ---- */
    .hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 120px 24px 80px;
      overflow: hidden;
    }

    .hero-glow {
      position: absolute;
      width: 800px;
      height: 800px;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.15;
      pointer-events: none;
    }

    .hero-glow-1 {
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--gradient-1);
    }

    .hero-glow-2 {
      bottom: -300px;
      right: -200px;
      background: var(--gradient-3);
      width: 600px;
      height: 600px;
      opacity: 0.1;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px 6px 8px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      font-size: 13px;
      color: var(--text-muted);
      margin-bottom: 32px;
      animation: fadeUp 0.8s ease both;
    }

    .hero-badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--accent);
      animation: pulse 2s ease-in-out infinite;
    }

    .hero h1 {
      font-size: clamp(48px, 8vw, 88px);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.05;
      max-width: 900px;
      animation: fadeUp 0.8s ease 0.1s both;
    }

    .hero h1 .gradient-text {
      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2), var(--gradient-3));
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero-sub {
      font-size: clamp(16px, 2vw, 20px);
      color: var(--text-muted);
      max-width: 560px;
      margin: 24px auto 40px;
      line-height: 1.7;
      animation: fadeUp 0.8s ease 0.2s both;
    }

    .hero-cta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      justify-content: center;
      animation: fadeUp 0.8s ease 0.3s both;
    }

    .hero-visual {
      position: relative;
      margin-top: 72px;
      width: 100%;
      max-width: 1000px;
      animation: fadeUp 1s ease 0.5s both;
    }

    .hero-visual-inner {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.03),
        0 20px 60px -20px rgba(0,0,0,0.7),
        0 0 100px -40px rgba(228, 255, 84, 0.1);
    }

    .mock-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 14px 18px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }

    .mock-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--border);
    }

    .mock-dot:nth-child(1) { background: #ff5f57; }
    .mock-dot:nth-child(2) { background: #ffbd2e; }
    .mock-dot:nth-child(3) { background: #28c840; }

    .mock-content {
      padding: 24px;
      min-height: 340px;
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 20px;
    }

    .mock-sidebar {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .mock-sidebar-item {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .mock-sidebar-item.active {
      background: rgba(228, 255, 84, 0.08);
      color: var(--accent);
    }

    .mock-sidebar-icon {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      background: var(--border);
      flex-shrink: 0;
    }

    .mock-sidebar-item.active .mock-sidebar-icon {
      background: var(--accent);
    }

    .mock-main {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .mock-card {
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mock-card-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .mock-card-check {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid var(--border);
      flex-shrink: 0;
    }

    .mock-card-check.done {
      border-color: var(--accent);
      background: var(--accent);
    }

    .mock-card-text {
      font-size: 14px;
      color: var(--text-muted);
    }

    .mock-card.alert {
      border-color: rgba(255, 100, 80, 0.3);
      background: rgba(255, 100, 80, 0.04);
    }

    .mock-card-badge {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    .badge-ok { background: rgba(228,255,84,0.12); color: var(--accent); }
    .badge-warn { background: rgba(255,180,50,0.12); color: #ffb432; }
    .badge-danger { background: rgba(255,80,80,0.12); color: #ff6450; }

    /* ---- FEATURES GRID ---- */
    section { padding: 120px 24px; }

    .container {
      max-width: 1120px;
      margin: 0 auto;
    }

    .section-label {
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      margin-bottom: 12px;
    }

    .section-title {
      font-size: clamp(32px, 4vw, 48px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.15;
      max-width: 600px;
    }

    .section-desc {
      color: var(--text-muted);
      font-size: 17px;
      max-width: 520px;
      margin-top: 16px;
      line-height: 1.7;
    }

    .features-header {
      text-align: center;
      max-width: 600px;
      margin: 0 auto 64px;
    }

    .features-header .section-title { max-width: 100%; }
    .features-header .section-desc { margin: 16px auto 0; }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      border: 1px solid var(--border);
    }

    .feature-card {
      background: var(--surface);
      padding: 40px 32px;
      transition: background 0.3s;
    }

    .feature-card:hover {
      background: var(--surface-2);
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: rgba(228, 255, 84, 0.08);
      border: 1px solid rgba(228, 255, 84, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 20px;
    }

    .feature-card h3 {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .feature-card p {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.7;
    }

    /* ---- HOW IT WORKS ---- */
    .how-section {
      background: var(--surface);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 48px;
      margin-top: 64px;
    }

    .step-number {
      font-size: 56px;
      font-weight: 800;
      letter-spacing: -0.04em;
      background: linear-gradient(180deg, var(--accent) 0%, rgba(228,255,84,0.2) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      line-height: 1;
      margin-bottom: 20px;
    }

    .step h3 {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.01em;
      margin-bottom: 10px;
    }

    .step p {
      color: var(--text-muted);
      font-size: 15px;
      line-height: 1.7;
    }

    /* ---- BENTO ---- */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      margin-top: 64px;
    }

    .bento-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 32px;
      transition: border-color 0.3s, box-shadow 0.3s;
      overflow: hidden;
      position: relative;
    }

    .bento-card:hover {
      border-color: rgba(228, 255, 84, 0.2);
      box-shadow: 0 0 40px -10px rgba(228, 255, 84, 0.06);
    }

    .bento-card h3 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }

    .bento-card p {
      color: var(--text-muted);
      font-size: 14px;
      line-height: 1.7;
    }

    .bento-1 { grid-column: span 7; min-height: 280px; }
    .bento-2 { grid-column: span 5; min-height: 280px; }
    .bento-3 { grid-column: span 4; min-height: 260px; }
    .bento-4 { grid-column: span 4; min-height: 260px; }
    .bento-5 { grid-column: span 4; min-height: 260px; }

    .bento-visual {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 60%;
      height: 60%;
      background: linear-gradient(135deg, rgba(228,255,84,0.04), rgba(84,255,200,0.04));
      border-radius: 200px 0 0 0;
    }

    /* ---- SOCIAL PROOF ---- */
    .logos-section { text-align: center; }

    .logos-label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-muted);
      margin-bottom: 40px;
    }

    .logos-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 56px;
      flex-wrap: wrap;
      opacity: 0.35;
    }

    .logo-placeholder {
      font-size: 20px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    /* ---- CTA ---- */
    .cta-section {
      text-align: center;
    }

    .cta-box {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 24px;
      padding: 80px 40px;
      overflow: hidden;
    }

    .cta-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      filter: blur(100px);
      opacity: 0.12;
      pointer-events: none;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(135deg, var(--gradient-1), var(--gradient-2));
    }

    .cta-box h2 {
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      position: relative;
    }

    .cta-box p {
      color: var(--text-muted);
      font-size: 18px;
      margin: 20px auto 36px;
      max-width: 440px;
      position: relative;
    }

    .cta-box .hero-cta { position: relative; }

    .email-form {
      display: flex;
      gap: 8px;
      max-width: 420px;
      margin: 0 auto;
      position: relative;
    }

    .email-form input {
      flex: 1;
      padding: 14px 20px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
    }

    .email-form input::placeholder { color: var(--text-muted); }

    .email-form input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.1);
    }

    /* ---- FOOTER ---- */
    footer {
      padding: 60px 24px 40px;
      border-top: 1px solid var(--border);
    }

    .footer-inner {
      max-width: 1120px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .footer-copy {
      font-size: 13px;
      color: var(--text-muted);
    }

    .footer-links {
      display: flex;
      gap: 24px;
      list-style: none;
    }

    .footer-links a {
      font-size: 13px;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-links a:hover { color: var(--text); }

    /* ---- ORION SECTION ---- */
    .orion-section {
      position: relative;
      overflow: hidden;
      background: var(--bg);
    }

    .orion-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
      margin-top: 64px;
    }

    .orion-text h3 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      margin-bottom: 16px;
    }

    .orion-text p {
      color: var(--text-muted);
      font-size: 16px;
      line-height: 1.8;
      margin-bottom: 16px;
    }

    .orion-text ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 24px;
    }

    .orion-text li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      font-size: 15px;
      color: var(--text-muted);
      line-height: 1.6;
    }

    .orion-text li svg { flex-shrink: 0; margin-top: 3px; }

    .orion-canvas-wrap {
      position: relative;
      aspect-ratio: 1;
      max-width: 520px;
      justify-self: center;
    }

    .orion-canvas-wrap canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .orion-canvas-glow {
      position: absolute;
      inset: -40%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(84, 180, 255, 0.08) 0%, transparent 70%);
      pointer-events: none;
    }

    @media (max-width: 768px) {
      .orion-layout {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      .orion-canvas-wrap {
        max-width: 360px;
        order: -1;
      }
    }

    /* ---- ANIMATIONS ---- */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .steps { grid-template-columns: 1fr; gap: 32px; }
      .mock-content { grid-template-columns: 1fr; }
      .mock-sidebar { display: none; }
      .bento-grid { grid-template-columns: 1fr; }
      .bento-1, .bento-2, .bento-3, .bento-4, .bento-5 { grid-column: span 1; }
      .footer-inner { flex-direction: column; gap: 20px; text-align: center; }
      .email-form { flex-direction: column; }
    }

    @media (max-width: 1024px) and (min-width: 769px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .steps { grid-template-columns: repeat(2, 1fr); }
      .bento-1 { grid-column: span 12; }
      .bento-2 { grid-column: span 12; }
      .bento-3, .bento-4, .bento-5 { grid-column: span 4; }
    }
  </style>
</head>
<body>

  <!-- NAV -->
  <nav>
    <a href="#" class="nav-logo">
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <rect width="28" height="28" rx="8" fill="#e4ff54"/>
        <path d="M8 14C8 10.5 10 8 14 8C18 8 20 10.5 20 14" stroke="#0a0a0b" stroke-width="2.5" stroke-linecap="round"/>
        <circle cx="11" cy="15" r="1.5" fill="#0a0a0b"/>
        <circle cx="17" cy="15" r="1.5" fill="#0a0a0b"/>
        <path d="M11.5 19C12.3 20 13.1 20.5 14 20.5C14.9 20.5 15.7 20 16.5 19" stroke="#0a0a0b" stroke-width="2" stroke-linecap="round"/>
      </svg>
      Naked Yak
    </a>
    <ul class="nav-links">
      <li><a href="#features">Features</a></li>
      <li><a href="#how">How it works</a></li>
      <li><a href="#orion">Orion View</a></li>
      <li><a href="#more">Why Naked Yak</a></li>
      <li><a href="#" class="btn btn-ghost" style="padding:8px 18px;">Log in</a></li>
      <li><a href="#cta" class="btn btn-primary" style="padding:8px 18px;">Get Early Access</a></li>
    </ul>
  </nav>

  <!-- HERO -->
  <section class="hero">
    <div class="hero-glow hero-glow-1"></div>
    <div class="hero-glow hero-glow-2"></div>

    <div class="hero-badge">
      <span class="hero-badge-dot"></span>
      Now in private beta
    </div>

    <h1>
      Stop shaving yaks.<br>
      <span class="gradient-text">Start shipping.</span>
    </h1>

    <p class="hero-sub">
      Naked Yak maps your project's task dependencies in real&#8209;time,
      detects rabbit holes before you fall in, and keeps every sprint focused on what actually matters.
    </p>

    <div class="hero-cta">
      <a href="#cta" class="btn btn-primary">
        Get Early Access
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </a>
      <a href="#how" class="btn btn-ghost">See how it works</a>
    </div>

    <!-- App mockup -->
    <div class="hero-visual">
      <div class="hero-visual-inner">
        <div class="mock-toolbar">
          <span class="mock-dot"></span>
          <span class="mock-dot"></span>
          <span class="mock-dot"></span>
        </div>
        <div class="mock-content">
          <div class="mock-sidebar">
            <div class="mock-sidebar-item active"><span class="mock-sidebar-icon"></span> Sprint 14</div>
            <div class="mock-sidebar-item"><span class="mock-sidebar-icon"></span> Backlog</div>
            <div class="mock-sidebar-item"><span class="mock-sidebar-icon"></span> Dep. Graph</div>
            <div class="mock-sidebar-item"><span class="mock-sidebar-icon"></span> Yak Radar</div>
            <div class="mock-sidebar-item"><span class="mock-sidebar-icon"></span> Analytics</div>
          </div>
          <div class="mock-main">
            <div class="mock-card">
              <div class="mock-card-left">
                <div class="mock-card-check done"></div>
                <span class="mock-card-text">Set up auth service</span>
              </div>
              <span class="mock-card-badge badge-ok">On track</span>
            </div>
            <div class="mock-card">
              <div class="mock-card-left">
                <div class="mock-card-check done"></div>
                <span class="mock-card-text">Design token refresh flow</span>
              </div>
              <span class="mock-card-badge badge-ok">On track</span>
            </div>
            <div class="mock-card alert">
              <div class="mock-card-left">
                <div class="mock-card-check"></div>
                <span class="mock-card-text">Refactor session manager (3 sub-tasks spawned)</span>
              </div>
              <span class="mock-card-badge badge-danger">Yak Alert</span>
            </div>
            <div class="mock-card">
              <div class="mock-card-left">
                <div class="mock-card-check"></div>
                <span class="mock-card-text">Write integration tests</span>
              </div>
              <span class="mock-card-badge badge-warn">Blocked</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- LOGOS -->
  <section class="logos-section reveal">
    <div class="container">
      <p class="logos-label">Trusted by teams at</p>
      <div class="logos-row">
        <span class="logo-placeholder">Vercel</span>
        <span class="logo-placeholder">Linear</span>
        <span class="logo-placeholder">Stripe</span>
        <span class="logo-placeholder">Notion</span>
        <span class="logo-placeholder">Railway</span>
      </div>
    </div>
  </section>

  <!-- FEATURES -->
  <section id="features">
    <div class="container reveal">
      <div class="features-header">
        <p class="section-label">Features</p>
        <h2 class="section-title">Everything you need to stay on the critical path</h2>
        <p class="section-desc">Naked Yak gives your team x-ray vision into task dependencies so side-quests never derail a deadline again.</p>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <h3>Yak Radar</h3>
          <p>Real-time detection of ballooning task chains. Get warned the moment a task starts spawning unplanned sub-tasks.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
          </div>
          <h3>Dependency Graph</h3>
          <p>Interactive DAG visualization of every task relationship. See the true critical path at a glance and spot cycles instantly.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
          </div>
          <h3>Scope Creep Score</h3>
          <p>A live metric that quantifies how far your sprint has drifted from the original plan. Keep your team honest.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/><path d="M9 21V9"/></svg>
          </div>
          <h3>Smart Sprint Board</h3>
          <p>A kanban board that actually pushes back. Columns auto-reorder by dependency priority so blockers surface first.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M18 20V10"/><path d="M12 20V4"/><path d="M6 20v-6"/></svg>
          </div>
          <h3>Focus Analytics</h3>
          <p>Track how much of your team's effort goes to planned vs. unplanned work. Spot patterns across sprints and quarters.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>
          </div>
          <h3>Integrations</h3>
          <p>Connects to GitHub, Linear, Jira, Notion, and Slack. Your yak alerts show up wherever your team already works.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- HOW IT WORKS -->
  <section class="how-section" id="how">
    <div class="container reveal">
      <div class="features-header">
        <p class="section-label">How it works</p>
        <h2 class="section-title">Three steps to a yak-free sprint</h2>
      </div>
      <div class="steps">
        <div class="step">
          <div class="step-number">01</div>
          <h3>Map your tasks</h3>
          <p>Import from your existing tool or start fresh. Naked Yak auto-discovers dependencies from your descriptions and commit history.</p>
        </div>
        <div class="step">
          <div class="step-number">02</div>
          <h3>Watch the radar</h3>
          <p>As work progresses, the Yak Radar monitors task chains in real-time. The moment a task starts branching into unplanned territory, you get an alert.</p>
        </div>
        <div class="step">
          <div class="step-number">03</div>
          <h3>Stay on course</h3>
          <p>Use actionable insights to prune unnecessary work, re-scope tasks, or consciously accept the trade-off. Every decision is tracked.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ORION VIEW -->
  <section class="orion-section" id="orion">
    <div class="container reveal">
      <div class="features-header">
        <p class="section-label">Orion View</p>
        <h2 class="section-title">See your project like a constellation</h2>
        <p class="section-desc">Every task is a star. Every dependency is a line between them. Orion View renders your entire project as an interactive star map so you can see the big picture at a glance.</p>
      </div>
      <div class="orion-layout">
        <div class="orion-text">
          <h3>Navigate complexity<br>like a night sky</h3>
          <p>Traditional boards hide relationships. Orion View surfaces them. Tasks cluster into constellations by feature area, and dependency lines glow brighter the more critical the path.</p>
          <ul>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
              Critical path stars pulse so blockers are impossible to miss
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
              Zoom from a 10,000-foot view down to individual task details
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              Yak shaving chains light up red so you can prune them fast
            </li>
            <li>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e4ff54" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
              Color-coded by team member to see workload distribution
            </li>
          </ul>
        </div>
        <div class="orion-canvas-wrap">
          <div class="orion-canvas-glow"></div>
          <canvas id="orion-canvas"></canvas>
        </div>
      </div>
    </div>
  </section>

  <!-- BENTO -->
  <section id="more">
    <div class="container reveal">
      <div class="features-header">
        <p class="section-label">Why Naked Yak</p>
        <h2 class="section-title">Built for teams who ship</h2>
        <p class="section-desc">We obsess over the details so you can obsess over your product.</p>
      </div>
      <div class="bento-grid">
        <div class="bento-card bento-1">
          <h3>Blazing fast UI</h3>
          <p>Sub-50ms interactions everywhere. Dependency graphs render instantly even with thousands of nodes. Built on WebGL.</p>
          <div class="bento-visual"></div>
        </div>
        <div class="bento-card bento-2">
          <h3>Privacy first</h3>
          <p>Your data never leaves your infrastructure. Self-host or use our SOC 2 compliant cloud. E2E encryption on every plan.</p>
        </div>
        <div class="bento-card bento-3">
          <h3>Team-aware</h3>
          <p>Understands who owns what. Alerts go to the right people, not everyone.</p>
        </div>
        <div class="bento-card bento-4">
          <h3>API-first</h3>
          <p>Full GraphQL API. Build custom workflows, dashboards, and automations on top of Naked Yak.</p>
        </div>
        <div class="bento-card bento-5">
          <h3>Dark mode native</h3>
          <p>Designed for dark mode from day one. Easy on the eyes during those late-night planning sessions.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA -->
  <section class="cta-section" id="cta">
    <div class="container">
      <div class="cta-box">
        <div class="cta-glow"></div>
        <h2>Ready to stop<br>shaving yaks?</h2>
        <p>Join the beta and get early access. Free during the preview period.</p>
        <div class="email-form">
          <input type="email" placeholder="you@company.com" aria-label="Email address">
          <button class="btn btn-primary">Join Waitlist</button>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <div class="footer-inner">
      <span class="footer-copy">&copy; 2026 Naked Yak. All rights reserved.</span>
      <ul class="footer-links">
        <li><a href="#">Privacy</a></li>
        <li><a href="#">Terms</a></li>
        <li><a href="#">Twitter</a></li>
        <li><a href="#">GitHub</a></li>
      </ul>
    </div>
  </footer>

  <!-- Scroll reveal -->
  <script>
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          observer.unobserve(e.target);
        }
      });
    }, { threshold: 0.15 });

    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
  </script>

  <!-- Orion constellation canvas -->
  <script>
    (function() {
      const canvas = document.getElementById('orion-canvas');
      if (!canvas) return;
      const ctx = canvas.getContext('2d');
      let w, h, dpr, nodes, edges, mouse = { x: -1000, y: -1000 }, raf;

      // Task "stars"
      const taskNames = [
        'Auth Service', 'Token Refresh', 'Session Mgr', 'API Gateway',
        'User Model', 'Permissions', 'Rate Limiter', 'Logging',
        'Dashboard', 'Notifications', 'Search Index', 'Cache Layer',
        'CI Pipeline', 'Deploy Script', 'Monitoring', 'Docs'
      ];

      const colors = ['#e4ff54', '#54ffc8', '#54b4ff', '#ff6450', '#ffb432'];

      function resize() {
        dpr = window.devicePixelRatio || 1;
        const rect = canvas.parentElement.getBoundingClientRect();
        w = rect.width;
        h = rect.width; // square
        canvas.width = w * dpr;
        canvas.height = h * dpr;
        canvas.style.width = w + 'px';
        canvas.style.height = h + 'px';
        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
        initNodes();
      }

      function initNodes() {
        nodes = taskNames.map((name, i) => {
          const angle = (i / taskNames.length) * Math.PI * 2 + Math.random() * 0.4;
          const radius = 80 + Math.random() * (w * 0.32);
          return {
            x: w / 2 + Math.cos(angle) * radius,
            y: h / 2 + Math.sin(angle) * radius,
            baseX: w / 2 + Math.cos(angle) * radius,
            baseY: h / 2 + Math.sin(angle) * radius,
            r: 2.5 + Math.random() * 3,
            color: colors[i % colors.length],
            name: name,
            phase: Math.random() * Math.PI * 2,
            critical: i === 2 || i === 11 // "Session Mgr" and "Cache Layer" pulse
          };
        });

        // Create dependency edges
        edges = [];
        for (let i = 1; i < nodes.length; i++) {
          edges.push([Math.floor(Math.random() * i), i]);
        }
        // Add a few extra cross-links
        for (let i = 0; i < 6; i++) {
          const a = Math.floor(Math.random() * nodes.length);
          let b = Math.floor(Math.random() * nodes.length);
          if (a !== b) edges.push([a, b]);
        }
      }

      function draw(t) {
        ctx.clearRect(0, 0, w, h);

        // Draw edges
        edges.forEach(([a, b]) => {
          const na = nodes[a], nb = nodes[b];
          const dist = Math.hypot(na.x - nb.x, na.y - nb.y);
          const alpha = Math.max(0.04, 0.2 - dist / (w * 1.2));

          // Check if either node is critical for red glow
          const isCritical = na.critical || nb.critical;

          ctx.beginPath();
          ctx.moveTo(na.x, na.y);
          ctx.lineTo(nb.x, nb.y);
          ctx.strokeStyle = isCritical
            ? `rgba(255, 100, 80, ${alpha * 1.5})`
            : `rgba(228, 255, 84, ${alpha})`;
          ctx.lineWidth = isCritical ? 1.2 : 0.6;
          ctx.stroke();
        });

        // Draw nodes
        nodes.forEach((n, i) => {
          // Gentle floating
          const float = Math.sin(t * 0.001 + n.phase) * 3;
          n.x = n.baseX + Math.sin(t * 0.0008 + n.phase) * 4;
          n.y = n.baseY + float;

          // Mouse repel
          const dx = n.x - mouse.x;
          const dy = n.y - mouse.y;
          const md = Math.hypot(dx, dy);
          if (md < 100) {
            const force = (100 - md) / 100 * 12;
            n.x += (dx / md) * force;
            n.y += (dy / md) * force;
          }

          // Pulsing for critical nodes
          let radius = n.r;
          if (n.critical) {
            radius += Math.sin(t * 0.004 + n.phase) * 2;
            // Outer glow
            ctx.beginPath();
            ctx.arc(n.x, n.y, radius + 8, 0, Math.PI * 2);
            const grd = ctx.createRadialGradient(n.x, n.y, radius, n.x, n.y, radius + 8);
            grd.addColorStop(0, 'rgba(255, 100, 80, 0.25)');
            grd.addColorStop(1, 'rgba(255, 100, 80, 0)');
            ctx.fillStyle = grd;
            ctx.fill();
          }

          // Star glow
          ctx.beginPath();
          ctx.arc(n.x, n.y, radius + 4, 0, Math.PI * 2);
          const g = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, radius + 4);
          g.addColorStop(0, n.critical ? 'rgba(255,100,80,0.3)' : n.color + '33');
          g.addColorStop(1, 'transparent');
          ctx.fillStyle = g;
          ctx.fill();

          // Star dot
          ctx.beginPath();
          ctx.arc(n.x, n.y, radius, 0, Math.PI * 2);
          ctx.fillStyle = n.critical ? '#ff6450' : n.color;
          ctx.fill();
        });

        // Draw labels near mouse
        nodes.forEach(n => {
          const dx = n.x - mouse.x;
          const dy = n.y - mouse.y;
          const md = Math.hypot(dx, dy);
          if (md < 80) {
            ctx.font = '500 11px -apple-system, system-ui, sans-serif';
            ctx.fillStyle = `rgba(250,250,250,${Math.max(0, 1 - md / 80)})`;
            ctx.fillText(n.name, n.x + n.r + 6, n.y + 4);
          }
        });

        raf = requestAnimationFrame(draw);
      }

      canvas.addEventListener('mousemove', e => {
        const rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
      });

      canvas.addEventListener('mouseleave', () => {
        mouse.x = -1000;
        mouse.y = -1000;
      });

      window.addEventListener('resize', resize);
      resize();
      raf = requestAnimationFrame(draw);
    })();
  </script>

</body>
</html>
