@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Work+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap');

  :root{
    --ink:#0b0e14;
    --paper:#f4efe2;
    --web-red:#c81e3a;
    --web-blue:#1b3a6b;
    --signal:#f2b807;
    --silver:#b8c4d6;
    --line: rgba(11,14,20,0.14);
    --radius: 14px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans', system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  h1,h2,h3,.display{
    font-family:'Bangers', system-ui, sans-serif;
    letter-spacing:0.02em;
    line-height:0.92;
    font-weight:400;
  }

  .mono{font-family:'JetBrains Mono', monospace; letter-spacing:0.02em;}

  a{color:inherit;}

  :focus-visible{
    outline:3px solid var(--signal);
    outline-offset:3px;
  }

  /* ---------- background web texture ---------- */
  .web-bg{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    opacity:0.10;
  }

  /* halftone dots strip, comic-book texture */
  .halftone{
    background-image: radial-gradient(var(--ink) 1.1px, transparent 1.1px);
    background-size: 9px 9px;
    opacity:0.08;
  }

  /* ---------- nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    padding:16px clamp(20px,5vw,56px);
    background:rgba(244,239,226,0.86);
    backdrop-filter: blur(8px);
    border-bottom:1px solid var(--line);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Bangers'; font-size:1.5rem; color:var(--web-red);
  }
  .brand .dot{
    width:10px;height:10px;border-radius:50%;background:var(--web-red);
    box-shadow:0 0 0 4px rgba(200,30,58,0.15);
  }
  nav.links{display:flex; gap:clamp(14px,3vw,32px); font-size:0.92rem; font-weight:600;}
  nav.links a{text-decoration:none; opacity:0.75; transition:opacity 0.2s;}
  nav.links a:hover{opacity:1;}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:min(92vh, 900px);
    display:flex; align-items:center;
    padding:80px clamp(20px,5vw,56px) 60px;
    overflow:hidden;
  }
  .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns: 1.15fr 0.85fr; gap:40px; align-items:center; width:100%;
  }
  @media (max-width:880px){ .hero-grid{grid-template-columns:1fr;} }

  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'JetBrains Mono'; font-size:0.78rem; font-weight:600;
    color:var(--web-blue); background:rgba(27,58,107,0.08);
    border:1px solid rgba(27,58,107,0.25);
    padding:6px 12px; border-radius:999px; margin-bottom:22px;
  }
  .eyebrow .pulse{
    width:7px;height:7px;border-radius:50%;background:var(--web-red);
    animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.35; transform:scale(0.7);} }

  .hero h1{
    font-size:clamp(3.4rem, 8vw, 6.4rem);
    color:var(--ink);
  }
  .hero h1 .accent{ color:var(--web-red); -webkit-text-stroke:1.5px var(--ink); }
  .hero p.lede{
    max-width:46ch; font-size:1.14rem; line-height:1.6; margin:22px 0 34px; color:rgba(11,14,20,0.72);
  }

  .cta-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px; border-radius:999px; font-weight:700; font-size:0.98rem;
    text-decoration:none; border:2px solid var(--ink); cursor:pointer;
    transition:transform 0.18s ease, box-shadow 0.18s ease;
  }
  .btn-primary{ background:var(--web-red); color:var(--paper); border-color:var(--web-red); }
  .btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
  .btn-ghost{ background:transparent; }
  .btn-ghost:hover{ transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--web-blue); border-color:var(--web-blue); }

  .stat-row{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
  .stat b{ display:block; font-family:'Bangers'; font-size:2rem; color:var(--web-blue); }
  .stat span{ font-family:'JetBrains Mono'; font-size:0.72rem; text-transform:uppercase; opacity:0.6; letter-spacing:0.06em;}

  /* signature: hand-drawn web with a crawling signal dot */
  .web-stage{
    position:relative; aspect-ratio:1/1; max-width:480px; margin:0 auto;
  }
  svg.web-svg{ width:100%; height:100%; overflow:visible; }
  .web-line{
    fill:none; stroke:var(--ink); stroke-width:1.4; opacity:0.55;
    stroke-dasharray: 900; stroke-dashoffset:900;
    animation: draw 2.2s ease forwards;
  }
  .web-line.radial{ stroke:var(--web-blue); opacity:0.35; }
  @keyframes draw{ to{ stroke-dashoffset:0; } }
  .web-line:nth-child(1){ animation-delay:0.0s; }
  .web-line:nth-child(2){ animation-delay:0.08s; }
  .web-line:nth-child(3){ animation-delay:0.16s; }
  .web-line:nth-child(4){ animation-delay:0.24s; }
  .web-line:nth-child(5){ animation-delay:0.32s; }
  .web-line:nth-child(6){ animation-delay:0.40s; }
  .web-line:nth-child(7){ animation-delay:0.48s; }
  .web-line:nth-child(8){ animation-delay:0.56s; }

  .signal-dot{
    fill:var(--web-red);
    filter:drop-shadow(0 0 6px rgba(200,30,58,0.6));
    animation: crawl 9s linear infinite;
    offset-rotate: 0deg;
  }
  @keyframes crawl{ 0%{ offset-distance:0%; } 100%{ offset-distance:100%; } }

  /* ---------- marquee divider ---------- */
  .marquee{
    background:var(--ink); color:var(--paper);
    padding:14px 0; overflow:hidden; white-space:nowrap;
    border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  }
  .marquee-track{
    display:inline-flex; gap:2.4rem;
    animation: scroll 26s linear infinite;
    font-family:'Bangers'; font-size:1.3rem; letter-spacing:0.03em;
  }
  .marquee-track span{ color:var(--signal); margin:0 0.6rem; }
  @keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- sections shared ---------- */
  section{ position:relative; z-index:2; padding:96px clamp(20px,5vw,56px); }
  .section-head{ max-width:640px; margin-bottom:56px; }
  .kicker{
    font-family:'JetBrains Mono'; font-size:0.78rem; font-weight:600; color:var(--web-red);
    text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:10px;
  }
  .section-head h2{ font-size:clamp(2.2rem,4.4vw,3.4rem); }
  .section-head p{ font-size:1.05rem; line-height:1.6; color:rgba(11,14,20,0.68); margin-top:14px; }

  /* origin timeline — this content genuinely is chronological, so numbering is earned */
  .origin{ background:var(--ink); color:var(--paper); }
  .origin .kicker{ color:var(--signal); }
  .origin .section-head p{ color:rgba(244,239,226,0.68); }
  .timeline{ display:grid; gap:0; border-top:1px solid rgba(244,239,226,0.18); max-width:820px; }
  .tl-item{
    display:grid; grid-template-columns:90px 1fr; gap:24px;
    padding:28px 0; border-bottom:1px solid rgba(244,239,226,0.18);
  }
  .tl-item .num{ font-family:'Bangers'; font-size:1.6rem; color:var(--web-red); }
  .tl-item h3{ font-family:'Work Sans'; font-weight:700; font-size:1.12rem; margin:0 0 6px; }
  .tl-item p{ margin:0; opacity:0.72; line-height:1.6; font-size:0.98rem; }

  /* powers grid */
  .powers{ background:var(--paper); }
  .power-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--ink); border:2px solid var(--ink); }
  @media (max-width:880px){ .power-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .power-grid{ grid-template-columns:1fr; } }
  .power-card{
    background:var(--paper); padding:32px 26px; min-height:220px;
    display:flex; flex-direction:column; justify-content:space-between;
    transition:background 0.2s ease;
  }
  .power-card:hover{ background:#fff; }
  .power-card .glyph{ font-size:2rem; }
  .power-card h3{ font-family:'Work Sans'; font-weight:800; font-size:1.05rem; margin:14px 0 6px; }
  .power-card p{ margin:0; font-size:0.92rem; line-height:1.55; opacity:0.68; }
  .power-card .tag{ font-family:'JetBrains Mono'; font-size:0.68rem; color:var(--web-blue); text-transform:uppercase; }

  /* gallery — comic panel strip */
  .panels{ background:var(--web-blue); color:var(--paper); }
  .panels .kicker{ color:var(--signal); }
  .panels .section-head p{ color:rgba(244,239,226,0.7); }
  .panel-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  @media (max-width:880px){ .panel-strip{ grid-template-columns:repeat(2,1fr); } }
  .panel{
    aspect-ratio:3/4; border-radius:10px; border:2px solid var(--paper);
    position:relative; overflow:hidden;
    background:
      radial-gradient(circle at 30% 20%, rgba(244,239,226,0.18), transparent 55%),
      linear-gradient(160deg, rgba(200,30,58,0.9), rgba(11,14,20,0.9));
    display:flex; align-items:flex-end; padding:16px;
  }
  .panel span{ font-family:'Bangers'; font-size:1.3rem; }
  .panel::before{
    content:""; position:absolute; inset:0;
    background-image: radial-gradient(#f4efe2 1px, transparent 1px);
    background-size:7px 7px; opacity:0.12; mix-blend-mode:overlay;
  }

  /* dossier / stats */
  .dossier{ background:var(--paper); }
  .dossier-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:48px; }
  @media (max-width:880px){ .dossier-grid{ grid-template-columns:1fr; } }
  .fact{ border-top:2px solid var(--ink); padding:18px 0; display:flex; justify-content:space-between; gap:20px; }
  .fact dt{ font-weight:700; }
  .fact dd{ margin:0; font-family:'JetBrains Mono'; font-size:0.9rem; text-align:right; color:rgba(11,14,20,0.6); }

  /* newsletter / swing-by */
  .swing{
    background:var(--ink); color:var(--paper); text-align:center;
    padding:110px clamp(20px,5vw,56px);
  }
  .swing h2{ font-size:clamp(2.6rem,6vw,4.6rem); color:var(--paper); }
  .swing h2 .accent{ color:var(--web-red); }
  .swing p{ max-width:46ch; margin:18px auto 34px; opacity:0.7; line-height:1.6; }
  .swing-form{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; max-width:460px; margin:0 auto; }
  .swing-form input{
    flex:1; min-width:220px; padding:14px 18px; border-radius:999px;
    border:2px solid rgba(244,239,226,0.3); background:transparent; color:var(--paper);
    font-family:'Work Sans'; font-size:0.95rem;
  }
  .swing-form input::placeholder{ color:rgba(244,239,226,0.45); }
  .swing-form input:focus{ border-color:var(--signal); outline:none; }
  .swing-note{ margin-top:14px; font-family:'JetBrains Mono'; font-size:0.75rem; opacity:0.5; }
  .swing-success{ color:var(--signal); font-family:'JetBrains Mono'; }

  footer{
    padding:32px clamp(20px,5vw,56px); display:flex; justify-content:space-between; align-items:center;
    border-top:1px solid var(--line); font-size:0.82rem; opacity:0.6; flex-wrap:wrap; gap:10px;
  }

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