<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
  <title>OTAKULT — Anime you'll actually obsess over</title>
  <meta name="description" content="A maximalist anime recommendation engine. Taste-matched picks in 60 seconds. No algorithm slop."/>
  <meta property="og:title" content="OTAKULT — Anime you'll actually obsess over"/>
  <meta property="og:description" content="Taste-matched anime in 60 seconds. No algorithm slop."/>
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="https://otakult.app"/>
  <link rel="canonical" href="https://otakult.app"/>
  <link rel="preconnect" href="https://fonts.googleapis.com"/>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
  <link href="https://fonts.googleapis.com/css2?family=Bungee&family=Space+Grotesk:wght@400;500;600;700&family=M+PLUS+1+Code:wght@400;500&display=swap" rel="stylesheet"/>
  <style>
    :root{
      --ink:#0b0c16;--cream:#fbf5df;--hot:#ff086b;--electric:#8625fe;--acid:#efef00;--cyan:#00d4f6;
      --font-display:'Bungee',system-ui,sans-serif;
      --font-mono-jp:'M PLUS 1 Code',ui-monospace,monospace;
      --font-body:'Space Grotesk',system-ui,sans-serif;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{
      font-family:var(--font-body);color:var(--ink);overflow-x:hidden;
      background-color:var(--cream);
      background-image:
        radial-gradient(var(--ink) 1px,transparent 1px),
        radial-gradient(var(--ink) 1px,transparent 1px);
      background-size:32px 32px,32px 32px;
      background-position:0 0,16px 16px;
      background-attachment:fixed;
    }
    /* UTILITIES */
    .brutal-border{border:3px solid var(--ink);}
    .brutal-shadow{box-shadow:8px 8px 0 0 var(--ink);}
    .sticker{border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);}
    .halftone{background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);background-size:8px 8px;}
    @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
    @keyframes wobble{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
    @keyframes flash{0%,100%{background-color:var(--hot);}50%{background-color:var(--acid);}}
    .animate-marquee{animation:marquee 30s linear infinite;}
    .animate-wobble{animation:wobble 2.5s ease-in-out infinite;}
    .animate-flash{animation:flash 1.6s ease-in-out infinite;}

    /* NAV */
    header{
      position:sticky;top:0;z-index:50;
      border-top:3px solid var(--ink);
      border-left:3px solid var(--ink);
      border-right:3px solid var(--ink);
      box-shadow:
        -3px 0 0 0 var(--ink),
         3px 0 0 0 var(--ink),
         0 -3px 0 0 var(--ink);
      background:rgba(251,245,223,0.95);
      backdrop-filter:blur(8px);
    }
    /* No nav-divider — border comes from marquee border-top */
    .nav-inner{
      max-width:1280px;margin:0 auto;
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 24px;
    }
    .nav-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);}
    .logo-badge{
      width:40px;height:40px;border-radius:50%;
      background:var(--hot);color:#fff;
      display:grid;place-items:center;
      font-family:var(--font-display);font-size:20px;
      border:3px solid var(--ink);
      animation:wobble 2.5s ease-in-out infinite;
    }
    .logo-text{font-family:var(--font-display);font-size:24px;letter-spacing:-.025em;}
    .logo-text .dot{color:var(--hot);}
    .nav-links{display:flex;align-items:center;gap:8px;}
    .nav-link{
      font-family:var(--font-display);font-size:14px;
      padding:6px 12px;text-decoration:none;color:var(--ink);
      transition:background .1s;
    }
    .nav-link:hover,.nav-link.active{background:var(--acid);}
    .nav-link.active{border:3px solid var(--ink);}
    .nav-cta{
      font-family:var(--font-display);font-size:14px;
      padding:8px 16px;text-decoration:none;
      background:var(--ink);color:var(--cream);
      border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      transition:background .1s;
    }
    .nav-cta:hover{background:var(--hot);}

    /* MARQUEE */
    .marquee-bar{
      overflow:hidden;background:var(--ink);color:var(--cream);
      border-top:3px solid var(--ink);
      padding:6px 0;
    }
    .marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite;}
    .marquee-item{
      font-family:var(--font-display);font-size:11px;color:var(--cream);
      letter-spacing:.15em;padding:0 24px;white-space:nowrap;
    }
    .marquee-item .sep{color:var(--hot);}

    /* HERO */
    .hero{position:relative;overflow:hidden;border-left:3px solid var(--ink);border-right:3px solid var(--ink);}
    .hero-halftone{
      position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.3;
      background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);
      background-size:8px 8px;
    }
    /* Mobile-first: 1 column, then at lg (1024px) split 7/5 */
    .hero-inner{
      position:relative;z-index:1;
      max-width:1280px;margin:0 auto;
      padding:64px 24px 96px;
      display:grid;grid-template-columns:1fr;
      gap:40px;align-items:center;
    }
    @media(min-width:1024px){
      .hero-inner{grid-template-columns:7fr 5fr;}
    }
    .hero-left{/* padding handled by hero-inner */}
    .hero-badge{
      display:inline-block;font-family:var(--font-display);font-size:11px;
      letter-spacing:.15em;background:var(--electric);color:var(--cream);
      border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      padding:4px 12px;margin-bottom:24px;
    }
    .hero-title{
      font-family:var(--font-display);line-height:.85;
      font-size:14vw;letter-spacing:.01em;margin-bottom:32px;
    }
    @media(min-width:640px){.hero-title{font-size:10vw;}}
    @media(min-width:1024px){.hero-title{font-size:7.5rem;}}
    .hero-title .line{display:block;}
    .next-pill{
      background:var(--acid);border:3px solid var(--ink);
      padding:0 12px;display:inline-block;transform:rotate(-2deg);
    }
    .hero-title .obsession{color:var(--hot);}
    .hero-title .period{color:var(--electric);}
    .hero-body{font-size:17px;line-height:1.7;max-width:480px;margin-bottom:32px;background:var(--cream);padding:12px 16px;}
    .hero-body strong{background:var(--acid);padding:0 4px;}
    .hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px;}
    .btn-hot{
      font-family:var(--font-display);font-size:18px;padding:16px 24px;
      background:var(--hot);color:#fff;text-decoration:none;
      border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      transition:background .1s;
    }
    .btn-hot:hover{background:var(--ink);}
    .btn-ghost{
      font-family:var(--font-display);font-size:18px;padding:16px 24px;
      background:var(--cream);color:var(--ink);text-decoration:none;
      border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      transition:background .1s;
    }
    .btn-ghost:hover{background:var(--acid);}
    .avatar-row{display:flex;align-items:center;gap:12px;font-size:14px;}
    .avatars{display:flex;}
    .avatar{
      width:32px;height:32px;border-radius:50%;
      background:var(--cyan);border:3px solid var(--ink);
      display:grid;place-items:center;font-size:14px;
      margin-left:-8px;
    }
    .avatars .avatar:first-child{margin-left:0;}

    /* CARD STACK */
    .hero-cards{position:relative;height:520px;}
    @media(max-width:1023px){.hero-cards{height:360px;}}
    .picks-sticker{
      position:absolute;top:-8px;right:0;z-index:30;
      font-family:var(--font-display);font-size:11px;letter-spacing:.1em;
      background:var(--acid);border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      padding:4px 12px;transform:rotate(-6deg);
      animation:wobble 2.5s ease-in-out infinite;
    }
    .float-card{
      position:absolute;width:192px;
      background:var(--cream);border:3px solid var(--ink);
      box-shadow:8px 8px 0 0 var(--ink);
      padding:8px;
      transform:rotate(var(--rot,0deg));
      transition:
        transform .55s cubic-bezier(.23,1,.32,1),
        box-shadow .55s cubic-bezier(.23,1,.32,1);
      cursor:pointer;
    }
    @media(min-width:640px){.float-card{width:224px;}}
    .float-card:hover{
      transform:rotate(0deg) scale(1.07);
      box-shadow:16px 16px 0 0 var(--hot);
    }
    .float-card .art{aspect-ratio:3/4;display:grid;place-items:center;font-size:64px;}
    .float-card .card-meta{padding:8px 4px 4px;display:flex;align-items:center;justify-content:space-between;}
    .float-card .card-title{font-family:var(--font-display);font-size:12px;}
    .float-card .card-tag{font-family:var(--font-display);font-size:9px;background:var(--ink);color:var(--cream);padding:2px 6px;}

    /* STATS */
    .stats{
      background:var(--ink);color:var(--cream);
      border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
    }
    .stats-inner{
      max-width:1280px;margin:0 auto;padding:32px 24px;
      display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
    }
    .stat-n{font-family:var(--font-display);font-size:36px;color:var(--acid);line-height:1;}
    .stat-l{font-size:11px;letter-spacing:.15em;text-transform:uppercase;margin-top:4px;color:rgba(251,245,223,.7);}

    /* HOW IT WORKS */
    .how{max-width:1280px;margin:0 auto;padding:80px 24px;}
    .how-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:40px;}
    .section-title{font-family:var(--font-display);font-size:48px;line-height:1;letter-spacing:.01em;}
    .section-title .col-hot{color:var(--hot);}
    .jp-chip{font-family:var(--font-mono-jp);font-size:13px;background:var(--ink);color:var(--cream);padding:4px 12px;}
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
    .step{padding:24px;position:relative;border:3px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);}
    .step-n{font-family:var(--font-display);font-size:72px;line-height:1;opacity:.9;margin-bottom:8px;}
    .step-t{font-family:var(--font-display);font-size:24px;margin-bottom:8px;line-height:1.1;}
    .step-d{font-size:15px;line-height:1.65;opacity:.9;}
    .step-hot{background:var(--hot);color:#fff;}
    .step-electric{background:var(--electric);color:#fff;}
    .step-acid{background:var(--acid);color:var(--ink);}

    /* HEAT INDEX */
    .heat{
      background:var(--cream);
      border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
    }
    .heat-inner{max-width:1280px;margin:0 auto;padding:80px 24px;}
    .heat-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:40px;}
    .heat-title{font-family:var(--font-display);font-size:48px;line-height:1;letter-spacing:.01em;}
    .heat-label{
      display:inline-block;background:var(--electric);color:#fff;
      padding:0 12px;transform:rotate(-1deg);
    }
    .see-all{
      font-family:var(--font-display);font-size:14px;letter-spacing:.1em;
      text-decoration:none;color:var(--cream);
      background:var(--ink);
      border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);
      padding:8px 16px;transition:background .1s;
    }
    .see-all:hover{background:var(--hot);}
    .heat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
    .heat-card{
      text-decoration:none;color:var(--ink);
      display:block;background:var(--cream);
      border:3px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);
      transition:transform .15s,box-shadow .15s;
    }
    .heat-card:hover{transform:translate(4px,4px);box-shadow:none;}
    .heat-art{
      aspect-ratio:3/4;display:grid;place-items:center;font-size:64px;
      position:relative;overflow:hidden;
    }
    .heat-art-halftone{
      position:absolute;inset:0;
      background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);
      background-size:8px 8px;opacity:.2;
    }
    .heat-score{position:absolute;top:8px;left:8px;z-index:1;background:var(--ink);color:var(--acid);font-family:var(--font-display);font-size:10px;padding:4px 8px;}
    .heat-jp{position:absolute;bottom:8px;right:8px;z-index:1;background:rgba(251,245,223,.9);font-family:var(--font-mono-jp);font-size:8px;padding:3px 7px;}
    .heat-body{padding:12px;border-top:3px solid var(--ink);}
    .heat-card-title{font-family:var(--font-display);font-size:18px;line-height:1.1;margin-bottom:4px;}
    .heat-card-studio{font-size:11px;color:rgba(11,12,22,.6);margin-bottom:8px;}
    .heat-tags{display:flex;gap:4px;flex-wrap:wrap;}
    .heat-tag{font-family:var(--font-display);font-size:10px;letter-spacing:.05em;padding:2px 6px;background:var(--acid);border:3px solid var(--ink);}

    /* TESTIMONIALS */
    .cult{max-width:1280px;margin:0 auto;padding:80px 24px;}
    .cult-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
    .cult-card{padding:24px;border:3px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);}
    .cult-q{font-family:var(--font-display);font-size:20px;line-height:1.35;margin-bottom:16px;}
    .cult-a{font-size:14px;}
    .cult-hot{background:var(--hot);color:#fff;transform:rotate(-1deg);}
    .cult-acid{background:var(--acid);color:var(--ink);transform:rotate(1deg);}
    .cult-cyan{background:var(--cyan);color:var(--ink);transform:rotate(-1deg);}

    /* CTA */
    .cta-wrap{max-width:1280px;margin:0 auto;padding:0 24px 80px;}
    .cta-box{
      position:relative;overflow:hidden;
      background:var(--ink);color:var(--cream);
      border:3px solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);
      padding:64px;text-align:center;
    }
    .cta-halftone{
      position:absolute;inset:0;pointer-events:none;
      background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);
      background-size:8px 8px;opacity:.2;
    }
    .cta-inner{position:relative;z-index:1;}
    .cta-label{font-family:var(--font-mono-jp);font-size:14px;letter-spacing:.2em;color:var(--acid);display:block;margin-bottom:16px;}
    .cta-title{font-family:var(--font-display);font-size:48px;color:#fff;line-height:1;letter-spacing:.01em;margin-bottom:40px;}
    .scrolling-hl{background:var(--hot);padding:0 12px;display:inline-block;transform:rotate(-1deg);}
    .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
    .btn-acid{font-family:var(--font-display);font-size:16px;padding:16px 24px;background:var(--acid);color:var(--ink);text-decoration:none;border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);transition:background .1s;cursor:pointer;}
    .btn-acid:hover{background:var(--cream);}
    .btn-cream-ghost{font-family:var(--font-display);font-size:16px;padding:16px 24px;background:var(--cream);color:var(--ink);text-decoration:none;border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);transition:background .1s;cursor:pointer;}
    .btn-cream-ghost:hover{background:var(--acid);}
    .btn-electric{font-family:var(--font-display);font-size:16px;padding:16px 24px;background:var(--electric);color:#fff;text-decoration:none;border:3px solid var(--ink);box-shadow:4px 4px 0 0 var(--ink);transition:background .1s;}
    .btn-electric:hover{background:var(--hot);}

    /* FOOTER — dark bg matching Lovable */
    footer{
      margin-top:96px;
      border-top:3px solid var(--ink);
      background:var(--ink);color:var(--cream);
    }
    .foot-inner{
      max-width:1280px;margin:0 auto;
      padding:48px 24px;
      display:grid;grid-template-columns:1fr;gap:32px;
    }
    .foot-logo{font-family:var(--font-display);font-size:30px;}
    .foot-logo span{color:var(--hot);}
    .foot-desc{font-size:13px;color:rgba(251,245,223,.7);line-height:1.7;max-width:280px;margin-top:8px;}
    .foot-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:14px;}
    .foot-links a{color:var(--cream);text-decoration:none;}
    .foot-links a:hover{color:var(--acid);}
    .foot-copy{font-size:13px;color:rgba(251,245,223,.7);}
    .foot-copy p+p{margin-top:4px;}

    /* RESPONSIVE */
    /* stats: 2 cols default → 4 at 640px (sm) */
    .stats-inner{grid-template-columns:repeat(2,1fr);}
    @media(min-width:640px){.stats-inner{grid-template-columns:repeat(4,1fr);}}
    /* heat grid: 1 col → 2 at sm → 4 at lg */
    .heat-grid{grid-template-columns:1fr;}
    @media(min-width:640px){.heat-grid{grid-template-columns:repeat(2,1fr);}}
    @media(min-width:1024px){.heat-grid{grid-template-columns:repeat(4,1fr);}}
    /* steps + testimonials: 1 col → 3 at md (768px) */
    @media(min-width:768px){.steps,.cult-grid{grid-template-columns:repeat(3,1fr);}}
    /* footer */
    @media(min-width:640px){.foot-inner{grid-template-columns:repeat(3,1fr);}}
    /* cta padding tightens on small */
    @media(max-width:600px){
      .nav-link.hidden-sm{display:none;}
      .cta-box{padding:40px 24px;}
    }

    /* ── RESPONSIVE BREAKPOINTS (sm = 640px) ── */
    @media(min-width:640px){
      .stat-n{font-size:48px;}
      .section-title{font-size:72px;}
      .heat-title{font-size:72px;}
      .cta-title{font-size:72px;}
    }
  </style>
</head>
<body>

<!-- NAV -->
<header>
  <div class="nav-inner">
    <a href="/" class="nav-logo">
      <div class="logo-badge">O!</div>
      <span class="logo-text">OTAKULT<span class="dot">.</span></span>
    </a>
    <nav class="nav-links">
      <a href="/" class="nav-link active hidden-sm">HOME</a>
      <a href="/browse" class="nav-link">DIRECTORY</a>
      <a href="/discover" class="nav-cta">GET THE APP →</a>
    </nav>
  </div>
  <div class="marquee-bar">
    <div class="marquee-track">
      <span class="marquee-item">NEW DROPS WEEKLY <span class="sep">✦</span></span>
      <span class="marquee-item">★ 9.3 AZURE HELLSCAPE <span class="sep">✦</span></span>
      <span class="marquee-item">TASTE-MATCHED IN 60 SECONDS <span class="sep">✦</span></span>
      <span class="marquee-item" style="font-family:var(--font-mono-jp)">妖怪ラジオ NOW STREAMING <span class="sep">✦</span></span>
      <span class="marquee-item">JOIN THE CULT <span class="sep">✦</span></span>
      <span class="marquee-item">BUILT BY FANS, NOT ALGORITHMS <span class="sep">✦</span></span>
      <span class="marquee-item">NEW DROPS WEEKLY <span class="sep">✦</span></span>
      <span class="marquee-item">★ 9.3 AZURE HELLSCAPE <span class="sep">✦</span></span>
      <span class="marquee-item">TASTE-MATCHED IN 60 SECONDS <span class="sep">✦</span></span>
      <span class="marquee-item" style="font-family:var(--font-mono-jp)">妖怪ラジオ NOW STREAMING <span class="sep">✦</span></span>
      <span class="marquee-item">JOIN THE CULT <span class="sep">✦</span></span>
      <span class="marquee-item">BUILT BY FANS, NOT ALGORITHMS <span class="sep">✦</span></span>
    </div>
  </div>
</header>

<!-- HERO -->
<section class="hero">
  <div class="hero-halftone"></div>
  <div class="hero-inner">
    <!-- LEFT -->
    <div class="hero-left">
      <span class="hero-badge">BETA · v0.9 · <span id="badge-otaku">…</span> OTAKU</span>
      <h1 class="hero-title">
        <span class="line">FIND</span>
        <span class="line">YOUR</span>
        <span class="line"><span class="next-pill">NEXT</span></span>
        <span class="line"><span class="obsession">OBSESSION</span><span class="period">.</span></span>
      </h1>
      <p class="hero-body">OTAKULT is the anime app for people who are tired of looking for anime. <strong>No generic recommendations.</strong> No endless searching. Just anime matched to what you actually want to watch!</p>
      <div class="hero-btns">
        <a href="/browse" class="btn-hot">BROWSE THE DIRECTORY →</a>
        <a href="/discover" class="btn-ghost">⬇ GET THE APP</a>
      </div>
      <div class="avatar-row">
        <div class="avatars">
          <span class="avatar">🦊</span>
          <span class="avatar">🐉</span>
          <span class="avatar">🌸</span>
          <span class="avatar">⚔️</span>
          <span class="avatar">🤖</span>
        </div>
        <span>★★★★★ <strong>4.9</strong> from 12k otaku</span>
      </div>
    </div>
    <!-- RIGHT: CARD STACK -->
    <div class="hero-cards">
      <span class="picks-sticker">TONIGHT'S PICKS ↓</span>
      <div class="float-card" style="top:2%;left:2%;--rot:-8deg">
        <div class="art" style="aspect-ratio:3/4;overflow:hidden;"><img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx127230-DdP4vAdssLoz.png" alt="Chainsaw Man" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
        <div class="card-meta" style="padding:8px 4px 4px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-family:var(--font-display);font-size:12px;">CHAINSAW MAN</span>
          <span style="font-family:var(--font-display);font-size:9px;background:var(--ink);color:var(--cream);padding:2px 6px;">DARK ACTION</span>
        </div>
      </div>
      <div class="float-card" style="top:18%;left:26%;--rot:6deg">
        <div class="art" style="aspect-ratio:3/4;overflow:hidden;"><img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx21519-SUo3ZQuCbYhJ.png" alt="Your Name." style="width:100%;height:100%;object-fit:cover;display:block;"></div>
        <div class="card-meta" style="padding:8px 4px 4px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-family:var(--font-display);font-size:12px;">YOUR NAME.</span>
          <span style="font-family:var(--font-display);font-size:9px;background:var(--ink);color:var(--cream);padding:2px 6px;">ROMANCE</span>
        </div>
      </div>
      <div class="float-card" style="top:44%;left:4%;--rot:-3deg">
        <div class="art" style="aspect-ratio:3/4;overflow:hidden;"><img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx21507-6YUSbh2m0N1p.jpg" alt="Mob Psycho 100" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
        <div class="card-meta" style="padding:8px 4px 4px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-family:var(--font-display);font-size:12px;">MOB PSYCHO 100</span>
          <span style="font-family:var(--font-display);font-size:9px;background:var(--ink);color:var(--cream);padding:2px 6px;">SUPERNATURAL</span>
        </div>
      </div>
      <div class="float-card" style="top:58%;left:30%;--rot:9deg">
        <div class="art" style="aspect-ratio:3/4;overflow:hidden;"><img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx97986-TQ7dCgbS3y5s.jpg" alt="Made in Abyss" style="width:100%;height:100%;object-fit:cover;display:block;"></div>
        <div class="card-meta" style="padding:8px 4px 4px;display:flex;align-items:center;justify-content:space-between;">
          <span style="font-family:var(--font-display);font-size:12px;">MADE IN ABYSS</span>
          <span style="font-family:var(--font-display);font-size:9px;background:var(--ink);color:var(--cream);padding:2px 6px;">ADVENTURE</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- STATS -->
<section class="stats">
  <div class="stats-inner">
    <div><div class="stat-n" id="stat-titles">—</div><div class="stat-l">Titles indexed</div></div>
    <div><div class="stat-n" id="stat-otaku">—</div><div class="stat-l">Active otaku</div></div>
    <div><div class="stat-n" id="stat-accuracy">—</div><div class="stat-l">Match accuracy</div></div>
    <div><div class="stat-n">0</div><div class="stat-l">Generic recommendations</div></div>
  </div>
</section>
<script type="module">
  /* Real visit counter backed by Firestore.
     sessionStorage tracks whether this browser tab has already been counted.
     Refreshing the same tab does NOT re-increment; closing and reopening does.
     BASE_OFFSET seeds the displayed number so visit #1 shows 1,247. */
  import { initializeApp }     from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-app.js';
  import { getFirestore, doc,
           setDoc, getDoc,
           increment }         from 'https://www.gstatic.com/firebasejs/10.12.0/firebase-firestore.js';

  const app = initializeApp({
    apiKey:            "AIzaSyDa6gig9xfZk_82t8h3aeSJciwUdnnBysw",
    authDomain:        "next-arc-b091b.firebaseapp.com",
    projectId:         "next-arc-b091b",
    storageBucket:     "next-arc-b091b.firebasestorage.app",
    messagingSenderId: "488355535109",
    appId:             "1:488355535109:web:40d86bfeae685d3dba3f6c",
  });

  const db          = getFirestore(app);
  const ref         = doc(db, 'stats', 'visitors');
  const BASE_OFFSET = 1246; // displayed = firestoreCount + BASE_OFFSET (visit #1 → 1,247)

  /* General-purpose stock-ticker count-up.
     formatFn controls how the number is rendered (plain, %, k/M, etc.)
     Starts at 85% of target, eases out over durationMs, locks on exact value. */
  function tickEl(id, target, formatFn, durationMs = 1100, extraEl) {
    const el = document.getElementById(id);
    if (!el) return;
    const startVal = Math.max(0, Math.floor(target * 0.85));
    const range    = target - startVal;
    const t0       = performance.now();
    (function tick(now) {
      const p     = Math.min((now - t0) / durationMs, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      const s     = formatFn(Math.round(startVal + range * eased));
      el.textContent = s;
      if (extraEl) extraEl.textContent = s;
      if (p < 1) requestAnimationFrame(tick);
      else {
        el.textContent = formatFn(target);
        if (extraEl) extraEl.textContent = formatFn(target);
      }
    })(performance.now());
  }

  function fmtOtaku(n) {
    return n >= 1000000 ? (n / 1000000).toFixed(1) + 'M'
         : n >= 10000   ? Math.round(n / 1000) + 'k'
         : n.toLocaleString();
  }

  // Static stats — fire immediately on load
  tickEl('stat-titles',   17370, n => n.toLocaleString(), 1200);
  tickEl('stat-accuracy', 98,    n => n + '%',             900);

  // Live otaku counter — fires once Firestore responds
  const SESS_KEY = 'otakult_counted';
  const badge    = document.getElementById('badge-otaku');

  function showOtaku(snap) {
    const target = (snap.data()?.count || 1) + BASE_OFFSET;
    tickEl('stat-otaku', target, fmtOtaku, 1100, badge);
  }

  if (!sessionStorage.getItem(SESS_KEY)) {
    // First load in this tab — increment then display
    sessionStorage.setItem(SESS_KEY, '1');
    setDoc(ref, { count: increment(1) }, { merge: true })
      .then(() => getDoc(ref))
      .then(showOtaku)
      .catch(() => { /* Firestore unavailable — placeholder stays */ });
  } else {
    // Refresh — read only, do not increment
    getDoc(ref)
      .then(showOtaku)
      .catch(() => { /* Firestore unavailable — placeholder stays */ });
  }
</script>

<!-- HOW IT WORKS -->
<section class="how">
  <div class="how-header">
    <h2 class="section-title">HOW IT <span class="col-hot">WORKS</span></h2>
    <span class="jp-chip">// 60秒</span>
  </div>
  <div class="steps">
    <div class="step step-hot">
      <div class="step-n">01</div>
      <div class="step-t">Build your taste cluster</div>
      <div class="step-d">Isekai burnout? Villain arc era? Still not over that finale? We get it.</div>
    </div>
    <div class="step step-electric">
      <div class="step-n">02</div>
      <div class="step-t">Get your first recommendation</div>
      <div class="step-d">Swipe ten times and it reads your vibe. Swipe fifty and it reads your soul.</div>
    </div>
    <div class="step step-acid">
      <div class="step-n">03</div>
      <div class="step-t">Discover. Obsess. Repeat.</div>
      <div class="step-d">Discover hidden gems, hoard your finds, share with friends, fall down rabbit holes.</div>
    </div>
  </div>
</section>

<!-- TONIGHT'S HEAT INDEX -->
<section class="heat">
  <div class="heat-inner">
    <div class="heat-header">
      <h2 class="heat-title">TONIGHT'S<br/><span class="heat-label">HEAT INDEX</span></h2>
      <a href="/browse" class="see-all">SEE ALL →</a>
    </div>
    <div class="heat-grid">
      <a href="/browse/" class="heat-card" style="transform:rotate(-1deg)">
        <div class="heat-art">
          <img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx21234-XmqW39aQ9o7O.jpg" alt="ERASED" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
          <span class="heat-score">★ 8.1</span>
          <span class="heat-jp">僕だけがいない街</span>
        </div>
        <div class="heat-body">
          <div class="heat-card-title">ERASED</div>
          <div class="heat-card-studio">A-1 Pictures · 2016</div>
          <div class="heat-tags"><span class="heat-tag">Mystery</span><span class="heat-tag">Thriller</span></div>
        </div>
      </a>
      <a href="/browse/" class="heat-card" style="transform:rotate(1deg)">
        <div class="heat-art">
          <img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx101759-8UR7r9MNVpz2.jpg" alt="The Promised Neverland" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
          <span class="heat-score">★ 8.4</span>
          <span class="heat-jp">約束のネバーランド</span>
        </div>
        <div class="heat-body">
          <div class="heat-card-title">THE PROMISED NEVERLAND</div>
          <div class="heat-card-studio">CloverWorks · 2019</div>
          <div class="heat-tags"><span class="heat-tag">Psychological</span><span class="heat-tag">Fantasy</span></div>
        </div>
      </a>
      <a href="/browse/" class="heat-card" style="transform:rotate(-1deg)">
        <div class="heat-art">
          <img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx20954-sYRfE5jQRtSB.jpg" alt="A Silent Voice" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
          <span class="heat-score">★ 8.8</span>
          <span class="heat-jp">聲の形</span>
        </div>
        <div class="heat-body">
          <div class="heat-card-title">A SILENT VOICE</div>
          <div class="heat-card-studio">Kyoto Animation · 2016</div>
          <div class="heat-tags"><span class="heat-tag">Drama</span><span class="heat-tag">Romance</span></div>
        </div>
      </a>
      <a href="/browse/" class="heat-card" style="transform:rotate(1deg)">
        <div class="heat-art">
          <img src="https://s4.anilist.co/file/anilistcdn/media/anime/cover/medium/bx20665-TLgkL8T8IRFd.png" alt="Your Lie in April" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
          <span class="heat-score">★ 8.4</span>
          <span class="heat-jp">四月は君の嘘</span>
        </div>
        <div class="heat-body">
          <div class="heat-card-title">YOUR LIE IN APRIL</div>
          <div class="heat-card-studio">A-1 Pictures · 2014</div>
          <div class="heat-tags"><span class="heat-tag">Music</span><span class="heat-tag">Drama</span></div>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- WHAT THE CULT SAYS -->
<section class="cult">
  <h2 class="section-title">WHAT THE <span class="col-hot">CULT</span> SAYS</h2>
  <div class="cult-grid">
    <div class="cult-card cult-hot">
      <p class="cult-q">"Cancelled my MAL account. Sorry not sorry."</p>
      <p class="cult-a">— @miso.exe</p>
    </div>
    <div class="cult-card cult-acid">
      <p class="cult-q">"Recommended me Spectral Koi. I have not stopped crying since June."</p>
      <p class="cult-a">— @ren_2049</p>
    </div>
    <div class="cult-card cult-cyan">
      <p class="cult-q">"Finally an anime app that doesn't think I want isekai #4,000."</p>
      <p class="cult-a">— @kaijuwife</p>
    </div>
  </div>
</section>

<!-- CTA -->
<div class="cta-wrap">
  <div class="cta-box">
    <div class="cta-halftone"></div>
    <div class="cta-inner">
      <span class="cta-label">// 入信 — JOIN.THE.CULT</span>
      <h2 class="cta-title">
        QUIT DOOM<br/>
        <span class="scrolling-hl">SCROLLING.</span><br/>
        START WATCHING.
      </h2>
      <div class="cta-btns">
        <a href="/discover" class="btn-acid">⬇ APP STORE</a>
        <a href="/discover" class="btn-cream-ghost">⬇ GOOGLE PLAY</a>
        <a href="/browse" class="btn-electric">BROWSE FIRST →</a>
      </div>
    </div>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="foot-inner">
    <div>
      <div class="foot-logo">OTAKULT<span>.</span></div>
      <p class="foot-desc">A maximalist anime recommendation engine for people who take their obsessions seriously.</p>
    </div>
    <div class="foot-links">
      <a href="/discover">iOS</a>
      <a href="/discover">Android</a>
      <a href="/discover">Discord</a>
      <a href="#">Press kit</a>
      <a href="#">Manifesto</a>
      <a href="#">Tag glossary</a>
    </div>
    <div class="foot-copy">
      <p>© 2026 OTAKULT collective.</p>
      <p>Hand-curated in Tokyo, Berlin, Oakland.</p>
    </div>
  </div>
</footer>

  <script>
    /* Float card z-index — on mouseenter, instantly reset every other card
       so two cards never share z-index 20 at the same time. */
    (function(){
      var ANIM_MS = 550;
      var cards = Array.from(document.querySelectorAll('.float-card'));
      var timers = new WeakMap();
      cards.forEach(function(card){
        card.addEventListener('mouseenter', function(){
          // Clear every other card's timer and drop them back immediately
          cards.forEach(function(c){
            if (c === card) return;
            clearTimeout(timers.get(c));
            c.style.zIndex = '';
          });
          clearTimeout(timers.get(card));
          card.style.zIndex = '20';
        });
        card.addEventListener('mouseleave', function(){
          timers.set(card, setTimeout(function(){ card.style.zIndex = ''; }, ANIM_MS));
        });
      });
    })();
  </script>
</body>
</html>