<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Animatrics — Send us the stress. We'll send back done.</title>
<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=Space+Grotesk:wght@400;500;600;700&family=Sora:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root {
    --bg: #070912;
    --bg-2: #0C1120;
    --panel: #0F1424;
    --ink: #E7ECF7;
    --muted: #8B93AC;
    --line: #202A44;
    --cyan: #4FF3D6;
    --violet: #9B7BFF;
    --magenta: #FF5FB8;
    --grad: linear-gradient(120deg, var(--cyan), var(--violet));
    font-family: 'Sora', system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  :root[data-theme="light"] {
    --bg: #F5F6FA; --bg-2: #ECEFF8; --panel: #FFFFFF; --ink: #10131E;
    --muted: #565F78; --line: #DCE1F0;
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); scroll-behavior: smooth; }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background:
      radial-gradient(1100px 560px at 82% -8%, rgba(155,123,255,0.10), transparent 60%),
      radial-gradient(900px 500px at -8% 12%, rgba(79,243,214,0.07), transparent 55%),
      var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    background-attachment: fixed;
  }
  :root[data-theme="light"] body {
    background: var(--bg);
  }
  img, svg { max-width: 100%; }
  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; position: relative; }
  h1, h2, h3 { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; line-height: 1.08; }
  a { color: inherit; }
  .mono { font-family: 'JetBrains Mono', monospace; }
  .grad-text {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .section-head h2 { }

  /* faint circuit-grid backdrop */
  .grid-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(to right, rgba(155,123,255,0.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(155,123,255,0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(700px 420px at 50% 0%, black, transparent 75%);
  }

  header.site {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; max-width: 1120px; margin: 0 auto; }
  .brand { display:flex; align-items:center; gap:10px; font-family:'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 700; }
  .brand-orb { width: 26px; height: 26px; border-radius: 50%; background: var(--grad); position: relative; flex-shrink:0; box-shadow: 0 0 14px rgba(155,123,255,0.4); }
  .brand-orb::after { content:""; position:absolute; inset: 6px; border-radius:50%; background: var(--bg); }
  .nav-links { display: flex; gap: 32px; font-size: 0.92rem; }
  .nav-links a { text-decoration: none; color: var(--muted); transition: color .15s; position: relative; }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
  .status-chip { display:flex; align-items:center; gap:8px; font-size: 0.78rem; color: var(--cyan); border: 1px solid var(--line); padding: 7px 12px; border-radius: 20px; }
  .status-chip .dot { width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); animation: blink 2s ease-in-out infinite; }
  @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  @media (prefers-reduced-motion: reduce) { .status-chip .dot { animation: none; } }
  .nav-cta { background: var(--grad); color: #06080D; padding: 9px 18px; border-radius: 4px; text-decoration: none; font-size: 0.88rem; font-weight: 600; white-space: nowrap; }

  .hero { padding: 88px 0 84px; position: relative; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
  .eyebrow { color: var(--cyan); font-size: 0.85rem; margin-bottom: 18px; display:block; }
  .hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.8rem); max-width: 15ch; }
  .hero p.lede { margin-top: 22px; font-size: 1.12rem; color: var(--muted); max-width: 46ch; line-height: 1.6; }
  .hero-ctas { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }
  .btn-primary { background: var(--grad); color: #06080D; padding: 15px 28px; text-decoration: none; border-radius: 4px; font-size: 1rem; font-weight: 600; display:inline-block; border: none; cursor: pointer; box-shadow: 0 0 20px rgba(155,123,255,0.25); transition: transform .15s, box-shadow .15s; }
  .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(155,123,255,0.35); }
  .btn-ghost { border: 1px solid var(--line); color: var(--ink); padding: 15px 28px; text-decoration: none; border-radius: 4px; font-size: 1rem; display:inline-block; transition: border-color .15s, background .15s; }
  .btn-ghost:hover { border-color: var(--violet); background: rgba(155,123,255,0.06); }

  .hero-visual { position: relative; }
  .hero-visual svg { width: 100%; height: auto; display:block; filter: drop-shadow(0 0 16px rgba(79,243,214,0.12)); }
  .core-ring { fill: none; stroke: var(--line); stroke-width: 1; }
  .core-ring-active { fill: none; stroke: url(#ringGrad); stroke-width: 2; stroke-dasharray: 8 6; animation: spin 18s linear infinite; transform-origin: 160px 130px; }
  .core-ring-active.rev { animation-direction: reverse; animation-duration: 26s; opacity: 0.6; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .node { fill: var(--cyan); filter: drop-shadow(0 0 5px var(--cyan)); animation: pulse 2.4s ease-in-out infinite; }
  .node.v { fill: var(--violet); filter: drop-shadow(0 0 5px var(--violet)); animation-delay: 0.8s; }
  .node.m { fill: var(--magenta); filter: drop-shadow(0 0 5px var(--magenta)); animation-delay: 1.4s; }
  @keyframes pulse { 0%,100%{opacity:0.5; r:3;} 50%{opacity:1; r:4.5;} }
  .link-line { stroke: rgba(139,147,172,0.35); stroke-width: 1; }
  @media (prefers-reduced-motion: reduce) { .core-ring-active { animation: none; } .node { animation: none; } }

  section { padding: 80px 0; border-bottom: 1px solid var(--line); position: relative; }
  section:last-of-type { border-bottom: none; }
  .section-head { max-width: 62ch; margin-bottom: 48px; }
  .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .section-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }

  .stress-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 8px; }
  .stress-item { background: var(--panel); padding: 26px; }
  .stress-item h3 { font-size: 1.02rem; font-weight: 600; font-family: 'Sora'; margin-bottom: 8px; color: var(--ink); }
  .stress-item p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

  .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 8px; }
  .step { border: 1px solid var(--line); border-radius: 6px; padding: 26px; background: var(--panel); position:relative; overflow:hidden; transition: border-color .2s; }
  .step:hover { border-color: var(--violet); }
  .step::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background: var(--grad); }
  .step .num { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--violet); display:block; margin-bottom: 14px; }
  .step h3 { font-size: 1.1rem; margin-bottom: 10px; }
  .step p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; }

  .agents-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
  .agent-card { background: var(--panel); border: 1px solid var(--line); padding: 26px; border-radius: 6px; transition: border-color .2s; }
  .agent-card:hover { border-color: var(--violet); }
  .agent-card .status { display:flex; align-items:center; gap:8px; margin-bottom: 14px; }
  .agent-card .status .dot { width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow: 0 0 5px var(--cyan); }
  .agent-card .status span { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted); }
  .agent-card h3 { font-size: 1.08rem; font-family: 'Space Grotesk'; margin-bottom: 10px; }
  .agent-card p { color: var(--muted); font-size: 0.95rem; line-height: 1.55; }

  .why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; margin-top: 8px; }
  .why-item { display: flex; gap: 18px; }
  .why-item .mark { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; color: var(--cyan); flex-shrink: 0; width: 34px; }
  .why-item h3 { font-size: 1.03rem; margin-bottom: 6px; font-family: 'Sora'; font-weight: 600; }
  .why-item p { color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

  .transform { background: var(--bg-2); }
  .transform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); margin-top: 8px; border-radius: 6px; overflow:hidden; }
  .transform-col { padding: 32px; background: var(--panel); }
  .transform-col.before { border-right: 1px solid var(--line); }
  .transform-col .tag { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); display:block; margin-bottom: 14px; }
  .transform-col p.quote { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; line-height: 1.45; font-weight: 500; }
  .transform-col.after { background: #0E1830; }
  .transform-col.after p.quote { color: var(--cyan); }
  .transform-col.after .tag { color: var(--cyan); }

  .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
  .price-card { border: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; background: var(--panel); border-radius: 6px; transition: border-color .2s; }
  .price-card:hover { border-color: var(--violet); }
  .price-card.featured { border-image: var(--grad) 1; }
  .price-card h3 { font-size: 1.08rem; font-family: 'Sora'; font-weight: 600; margin-bottom: 6px; }
  .price-card .amount { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; margin: 14px 0; }
  .price-card .amount span { font-size: 0.92rem; font-family: 'Sora'; color: var(--muted); }
  .price-card ul { list-style: none; margin: 18px 0 26px; flex-grow: 1; }
  .price-card li { color: var(--muted); font-size: 0.9rem; padding: 8px 0; border-top: 1px solid var(--line); }
  .price-card li:first-child { border-top: none; }

  .cta-band { background: linear-gradient(160deg, #0B0F1E, #120A22); text-align: left; padding: 84px 0; border-bottom: none; position: relative; overflow: hidden; }
  .cta-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); max-width: 16ch; }
  .cta-band p { color: var(--muted); margin-top: 16px; font-size: 1.05rem; max-width: 44ch; }
  .cta-form { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; position: relative; z-index: 1; }
  .cta-form input { background: rgba(255,255,255,0.03); border: 1px solid var(--line); color: var(--ink); padding: 15px 16px; font-size: 1rem; min-width: 260px; flex: 1; border-radius: 4px; transition: border-color .15s; }
  .cta-form input:focus { outline: none; border-color: var(--cyan); }
  .cta-form input::placeholder { color: var(--muted); }

  footer.site { padding: 44px 0; padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px)); }
  .footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
  .footer-links { display: flex; gap: 26px; font-size: 0.9rem; color: var(--muted); }
  .footer-links a { text-decoration: none; }
  .footer-links a:hover { color: var(--ink); }
  .copyright { font-size: 0.82rem; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-visual { order: -1; max-width: 320px; }
    .stress-list, .steps, .agents-grid, .why-grid, .pricing-grid { grid-template-columns: 1fr; }
    .transform-grid { grid-template-columns: 1fr; }
    .transform-col.before { border-right: none; border-bottom: 1px solid var(--line); }
    .nav-links { display: none; }
  }
</style>
</head>
<body>

<header class="site">
  <nav class="nav">
    <div class="brand"><span class="brand-orb"></span>Animatrics</div>
    <div class="nav-links">
      <a href="#agents">Agents</a>
      <a href="#how">How it works</a>
      <a href="#pricing">Pricing</a>
      <a href="#contact">Contact</a>
    </div>
    <div style="display:flex; align-items:center; gap:14px;">
      <span class="status-chip"><span class="dot"></span>agents online</span>
      <a class="nav-cta" href="#contact">Send a task</a>
    </div>
  </nav>
</header>

<section class="hero">
  <div class="grid-bg"></div>
  <div class="wrap hero-grid">
    <div>
      <span class="eyebrow mono">ai agents · always running</span>
      <h1>Your work doesn't have to be your problem.</h1>
      <p class="lede">Animatrics runs AI agents that pick up the repetitive, tangled, stressful parts of your day — the inbox, the scheduling, the reports — and hand them back <span class="grad-text">done</span>, not just started.</p>
      <div class="hero-ctas">
        <a class="btn-primary" href="#contact">Send us a task</a>
        <a class="btn-ghost" href="#how">See how it works</a>
      </div>
    </div>
    <div class="hero-visual" aria-hidden="true">
      <svg viewBox="0 0 320 260" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stop-color="#4FF3D6"/>
            <stop offset="100%" stop-color="#9B7BFF"/>
          </linearGradient>
        </defs>
        <circle class="core-ring" cx="160" cy="130" r="100"/>
        <circle class="core-ring-active" cx="160" cy="130" r="100"/>
        <circle class="core-ring-active rev" cx="160" cy="130" r="76"/>
        <line class="link-line" x1="160" y1="130" x2="60" y2="60"/>
        <line class="link-line" x1="160" y1="130" x2="260" y2="55"/>
        <line class="link-line" x1="160" y1="130" x2="255" y2="195"/>
        <line class="link-line" x1="160" y1="130" x2="55" y2="200"/>
        <line class="link-line" x1="160" y1="130" x2="160" y2="20"/>
        <circle class="node" cx="60" cy="60" r="4"/>
        <circle class="node v" cx="260" cy="55" r="4"/>
        <circle class="node m" cx="255" cy="195" r="4"/>
        <circle class="node v" cx="55" cy="200" r="4"/>
        <circle class="node" cx="160" cy="20" r="4"/>
        <circle class="node m" cx="160" cy="130" r="6"/>
      </svg>
    </div>
  </div>
</section>

<section id="problem">
  <div class="wrap">
    <div class="section-head">
      <h2>The stress isn't the work. It's the backlog.</h2>
      <p>None of these tasks are hard on their own. There are just too many of them, and they never stop arriving.</p>
    </div>
    <div class="stress-list">
      <div class="stress-item"><h3>Inbox overload</h3><p>Fifty emails deep and half of them just need a routine reply.</p></div>
      <div class="stress-item"><h3>Endless scheduling</h3><p>Back-and-forth over a meeting time that should take ten seconds.</p></div>
      <div class="stress-item"><h3>Manual reports</h3><p>The same weekly summary, assembled by hand, every single week.</p></div>
      <div class="stress-item"><h3>Repetitive replies</h3><p>Answering the same customer question for the hundredth time.</p></div>
      <div class="stress-item"><h3>Data entry</h3><p>Moving numbers from one spreadsheet to another, carefully, slowly.</p></div>
      <div class="stress-item"><h3>Research rabbit holes</h3><p>An hour of reading to get to one paragraph you actually needed.</p></div>
    </div>
  </div>
</section>

<section id="how">
  <div class="wrap">
    <div class="section-head">
      <h2>How it gets off your desk</h2>
      <p>Three steps, and the middle one isn't yours.</p>
    </div>
    <div class="steps">
      <div class="step"><span class="num">STEP_01</span><h3>Hand it over</h3><p>Forward an email thread, drop in a task, or connect a tool. No brief or handoff document required.</p></div>
      <div class="step"><span class="num">STEP_02</span><h3>An agent takes it on</h3><p>The right agent works through it end to end, checking its own output as it goes.</p></div>
      <div class="step"><span class="num">STEP_03</span><h3>It comes back done</h3><p>You get a finished result, not a task added to a list. Review it, or don't — it's already ready.</p></div>
    </div>
  </div>
</section>

<section id="agents">
  <div class="wrap">
    <div class="section-head">
      <h2>Agents for the work you already have</h2>
      <p>Each one is built for a specific job, not a general assistant that does everything a little.</p>
    </div>
    <div class="agents-grid">
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Inbox Agent</h3><p>Triages, drafts and answers routine email so your inbox stops behaving like a queue.</p></div>
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Scheduling Agent</h3><p>Finds times, books meetings, and rearranges everything the moment something changes.</p></div>
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Reporting Agent</h3><p>Pulls the numbers together into the update, formatted and on time, every cycle.</p></div>
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Support Agent</h3><p>Answers the questions you get every day, in your tone, with your answers.</p></div>
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Data Agent</h3><p>Cleans, sorts and enters the data nobody on the team wants to touch.</p></div>
      <div class="agent-card"><div class="status"><span class="dot"></span><span>active</span></div><h3>Research Agent</h3><p>Reads through the sources so you only have to read the summary.</p></div>
    </div>
  </div>
</section>

<section id="why">
  <div class="wrap">
    <div class="section-head">
      <h2>Why hand it to Animatrics</h2>
    </div>
    <div class="why-grid">
      <div class="why-item"><span class="mark">01</span><div><h3>Always on</h3><p>Agents work nights, weekends, and whatever hour "urgent" happens to land on.</p></div></div>
      <div class="why-item"><span class="mark">02</span><div><h3>A person still checks</h3><p>Nothing ships without a review step you control — you set how much oversight you want.</p></div></div>
      <div class="why-item"><span class="mark">03</span><div><h3>Plugs into what you use</h3><p>Email, calendar, spreadsheets, your helpdesk — no new system to learn.</p></div></div>
      <div class="why-item"><span class="mark">04</span><div><h3>Start with one task</h3><p>No migration, no six-week rollout. Send the first task today and see what comes back.</p></div></div>
    </div>
  </div>
</section>

<section class="transform">
  <div class="wrap">
    <div class="section-head">
      <h2>What it feels like</h2>
      <p>Replace this with a real client's words once you have one — it's a placeholder for now.</p>
    </div>
    <div class="transform-grid">
      <div class="transform-col before">
        <span class="tag">before_animatrics</span>
        <p class="quote">"I lose the first two hours of every day just clearing what came in overnight."</p>
      </div>
      <div class="transform-col after">
        <span class="tag">after_animatrics</span>
        <p class="quote">"I open my inbox to things that are already handled, not a list of things to start."</p>
      </div>
    </div>
  </div>
</section>

<section id="pricing">
  <div class="wrap">
    <div class="section-head">
      <h2>Simple pricing, start small</h2>
      <p>Every plan starts with a free first task, so you see the result before you commit.</p>
    </div>
    <div class="pricing-grid">
      <div class="price-card">
        <h3>Starter</h3>
        <div class="amount">$49<span> / mo</span></div>
        <ul>
          <li>1 active agent</li>
          <li>Up to 100 tasks / mo</li>
          <li>Email support</li>
        </ul>
        <a class="btn-ghost" href="#contact">Start here</a>
      </div>
      <div class="price-card featured">
        <h3>Growth</h3>
        <div class="amount">$149<span> / mo</span></div>
        <ul>
          <li>Up to 4 active agents</li>
          <li>Up to 750 tasks / mo</li>
          <li>Priority support</li>
          <li>Tool integrations included</li>
        </ul>
        <a class="btn-primary" href="#contact">Start here</a>
      </div>
      <div class="price-card">
        <h3>Scale</h3>
        <div class="amount">Let's talk</div>
        <ul>
          <li>Unlimited agents</li>
          <li>Custom volume</li>
          <li>Dedicated onboarding</li>
        </ul>
        <a class="btn-ghost" href="#contact">Contact us</a>
      </div>
    </div>
  </div>
</section>

<section class="cta-band" id="contact">
  <div class="grid-bg"></div>
  <div class="wrap">
    <h2>Send us your next stressful task.</h2>
    <p>Tell us what's piling up. We'll tell you which agent takes it off your hands, and how fast.</p>
    <form class="cta-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Sent — we\'ll be in touch';">
      <input type="email" placeholder="you@company.com" required>
      <button class="btn-primary" type="submit">Send a task</button>
    </form>
  </div>
</section>

<footer class="site">
  <div class="wrap footer-grid">
    <div class="brand"><span class="brand-orb"></span>Animatrics</div>
    <div class="footer-links">
      <a href="#agents">Agents</a>
      <a href="#how">How it works</a>
      <a href="#pricing">Pricing</a>
      <a href="#contact">Contact</a>
    </div>
    <div class="copyright">© 2026 Animatrics</div>
  </div>
</footer>

</body>
</html>
