/* ==========================================================================
   MayDay!T — Design System
   Concept: "Blueprint atelier" — engineering drafting motifs (grid, crosshairs,
   dimension lines, coordinate stamps) meet warm, human craftsmanship.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:        #000000;
  --ink-2:      #121212;
  --blueprint:  #FF215F;
  --blueprint-dim: #FF215F;
  --paper:      #FFFFFF;
  --paper-2:    #F1F1F1;
  --graphite:   #0A0A0A;
  --graphite-60: rgba(10,10,10,.62);
  --signal:     #FF215F;
  --signal-dim: #D8134C;
  --mist:       #D6D6D6;
  --mist-30:    rgba(255,255,255,.3);
  --line-on-ink: rgba(255,255,255,.14);
  --line-on-paper: rgba(10,10,10,.12);

  --display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;

  --container: 1180px;
  --radius: 0px;
  --notch: 8px;
  --px: 4px; /* base pixel unit for shadows/borders */
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
/* clip avoids turning the root into a scroll container, so position:sticky keeps working */
@supports (overflow-x: clip){ html{ overflow-x: clip; } }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--body);
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--display); margin:0; line-height:1.18; letter-spacing:0; font-weight:600; }
h3{ line-height:1.3; }

.pixelated{ image-rendering: pixelated; }

/* stepped/notched corner — the core pixel-art panel shape, reused everywhere */
.pixel-corners{
  clip-path: polygon(
          0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
          calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
          100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
          var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
  );
}
.pixel-corners-sm{
  --notch: 5px;
  clip-path: polygon(
          0 var(--notch), var(--notch) var(--notch), var(--notch) 0,
          calc(100% - var(--notch)) 0, calc(100% - var(--notch)) var(--notch), 100% var(--notch),
          100% calc(100% - var(--notch)), calc(100% - var(--notch)) calc(100% - var(--notch)), calc(100% - var(--notch)) 100%,
          var(--notch) 100%, var(--notch) calc(100% - var(--notch)), 0 calc(100% - var(--notch))
  );
}

/* pixel drop-shadow: a solid offset block behind an element, itself notched, giving a chunky "retro cartridge" shadow that clip-path won't clip since it's a separate layer */
.pixel-shadow{ position:relative; }
.pixel-shadow::before{
  content:""; position:absolute; inset:0; background: var(--ink); z-index:-1;
  transform: translate(6px,6px);
}
.pixel-shadow.on-ink::before{ background: var(--signal); }

/* small reusable pixel sparkle, built from stacked squares via box-shadow — no images needed */
.sparkle{
  display:inline-block; width:3px; height:3px; background: var(--signal); position:relative; flex-shrink:0;
  box-shadow:
          0 3px var(--signal), -3px 6px var(--signal), 0 6px var(--signal), 3px 6px var(--signal),
          -9px 9px var(--signal), -6px 9px var(--signal), -3px 9px var(--signal), 0 9px var(--signal),
          3px 9px var(--signal), 6px 9px var(--signal), 9px 9px var(--signal),
          -3px 12px var(--signal), 0 12px var(--signal), 3px 12px var(--signal),
          0 15px var(--signal), 0 18px var(--signal);
}
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }

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

.container{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }

/* ---------- Utility: mono eyebrow / stamps ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blueprint);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.eyebrow::before{ content:"+"; font-size: 1rem; animation: pixel-blink 1.4s steps(1) infinite; }
.section--light .eyebrow{ color: var(--blueprint-dim); }

.stamp{
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--mist);
  opacity:.65;
  white-space: nowrap;
}
.section--light .stamp{ color: var(--graphite-60); }

/* ---------- Blueprint grid background ---------- */
.grid-bg{
  background-image: radial-gradient(var(--line-on-ink) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}
.section--light.grid-bg{
  background-image: radial-gradient(var(--line-on-paper) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

/* corner crosshair marks — the recurring signature motif */
.crosshairs{ position:relative; }
.crosshairs::before,
.crosshairs::after,
.crosshairs .cx-tl,
.crosshairs .cx-br{ display:none; }
.cx{
  position:absolute; width:20px; height:20px; pointer-events:none; z-index:2;
  animation: cx-pulse 2.4s steps(4) infinite;
}
.cx::before,.cx::after{ content:""; position:absolute; background: var(--signal); }
.cx::before{ width:100%; height:3px; top:50%; margin-top:-1.5px; }
.cx::after{ height:100%; width:3px; left:50%; margin-left:-1.5px; }
.cx--tl{ top:14px; left:14px; animation-delay:0s; }
.cx--tr{ top:14px; right:14px; animation-delay:.6s; }
.cx--bl{ bottom:14px; left:14px; animation-delay:1.2s; }
.cx--br{ bottom:14px; right:14px; animation-delay:1.8s; }
.section--light .cx::before,.section--light .cx::after{ background: var(--signal); }
@keyframes cx-pulse{ 0%,60%{ opacity:1; transform:scale(1); } 75%{ opacity:.3; transform:scale(1.4); } 100%{ opacity:1; transform:scale(1); } }

/* ---------- Sections ---------- */
.section{ padding: 108px 0; position:relative; }
.section--ink{ background: var(--ink); color: var(--mist); }
.section--ink h2, .section--ink h3{ color:#fff; }
.section--light{ background: var(--paper); color: var(--graphite); }
.section--alt{ background: var(--paper-2); }
@media (max-width: 720px){ .section{ padding: 72px 0; } }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight:600; }
.section-head p{ margin-top:16px; font-size:1.05rem; color: var(--mist); opacity:.85; }
.section--light .section-head p{ color: var(--graphite-60); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; position:relative;
  font-family: var(--mono); font-weight:600; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase;
  padding: 15px 24px; border:2px solid var(--ink);
  transition: transform .1s steps(2), background .15s ease, border-color .15s ease, color .15s ease, box-shadow .1s steps(2);
}
.pixel-corners.btn, .btn.pixel-corners{ border:none; }
.btn{ clip-path: polygon(0 6px, 6px 6px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)); border:none; }
.btn{ box-shadow: 5px 5px 0 0 var(--ink); }
.btn:hover{ transform: translate(5px,5px); box-shadow: 0 0 0 0 var(--ink); }
.btn-signal{ background: var(--signal); color:#000; }
.btn-signal:hover{ background: var(--signal); }
.btn-outline-ink{ background: transparent; color:#fff; border:2px solid var(--mist-30); box-shadow: 5px 5px 0 0 var(--signal); }
.btn-outline-ink:hover{ border-color:#fff; box-shadow:0 0 0 0 var(--signal); }
.btn-outline-light{ background: var(--paper); color: var(--graphite); box-shadow: 5px 5px 0 0 var(--signal); }
.btn-outline-light:hover{ box-shadow: 0 0 0 0 var(--signal); }
.btn-arrow::after{ content:"→"; transition: transform .1s steps(2); }
.btn-arrow:hover::after{ transform: translateX(3px); }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top:0; z-index: 100;
  background: rgba(15,30,48,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-on-ink);
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav-logo{ font-family: var(--display); font-weight:700; font-size:1.35rem; color:#fff; letter-spacing:0; display:flex; align-items:center; gap:2px; }
.nav-logo .bang{ color: var(--signal); animation: pixel-blink 1.8s steps(1) infinite; }
a.nav-logo:hover{ animation: pixel-jitter .3s steps(3); }
@keyframes pixel-jitter{ 0%{ transform:translate(0,0); } 25%{ transform:translate(-2px,1px); } 50%{ transform:translate(2px,-1px); } 75%{ transform:translate(-1px,0); } 100%{ transform:translate(0,0); } }
.nav-logo .bang{ color: var(--signal); }
.nav-logo img { max-width: 50%; }
.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-links a{ font-family: var(--mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color: var(--mist); position:relative; padding:6px 0; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: var(--signal); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--mist-30); color:#fff; padding:8px 10px; }
.dropdown{ position:relative; }
.dropdown-panel{
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  background: var(--ink-2); background-clip: padding-box;
  border:1px solid var(--line-on-ink); border-top:14px solid transparent;
  min-width:250px;
  padding:10px; opacity:0; visibility:hidden; transition:opacity .15s ease;
}
.dropdown:hover .dropdown-panel, .dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; }
.dropdown-panel a{ display:block; padding:10px 12px; text-transform:none; letter-spacing:0; font-family:var(--body); font-size:.92rem; }
.dropdown-panel a:hover{ background: rgba(255,255,255,.05); }

@media (max-width: 940px){
  .nav-links{
    position:fixed; top: 76px; left: 0; right: 0;
    height: calc(100vh - 76px); height: calc(100dvh - 76px);
    background: var(--ink); flex-direction:column;
    align-items:flex-start; padding: 32px 28px 48px; gap:22px;
    transform: translateX(100%); transition: transform .25s ease, visibility 0s linear .25s;
    visibility: hidden; pointer-events: none;
    overflow-y:auto; -webkit-overflow-scrolling: touch;
  }
  .nav-links.is-open{
    transform: translateX(0); visibility: visible; pointer-events: auto;
    transition: transform .25s ease, visibility 0s;
  }
  .dropdown-panel{ position:static; transform:none; opacity:1; visibility:visible; display:none; margin-top:10px; border:none; padding:0 0 0 14px; background:none; }
  .dropdown.is-open .dropdown-panel{ display:block; }
  .nav-toggle{ display:block; }
  .nav-cta .btn span{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--ink); color: var(--mist); position:relative; overflow:hidden;
  padding: 96px 0 110px;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 4px);
}
.hero .container{ display:grid; grid-template-columns: 1.05fr .95fr; gap:60px; align-items:center; }
.hero h1{ font-size: clamp(2rem, 4vw, 3.1rem); color:#fff; font-weight:700; }
.hero .lede{ margin-top:22px; font-size:1.1rem; max-width:46ch; opacity:.85; }
.hero .hero-actions{ margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-figure{ position:relative; }
@media (max-width: 900px){
  .hero .container{ grid-template-columns:1fr; }
  .hero-figure{ order:-1; }
}

/* dimension line under headline */
.dim-line{ display:flex; align-items:center; gap:8px; margin-top:26px; font-family:var(--mono); font-size:.72rem; color: var(--blueprint); }
.dim-line .rule{ flex:1; height:1px; background: repeating-linear-gradient(90deg, var(--blueprint) 0 6px, transparent 6px 10px); }

/* ---------- Stat strip ---------- */
.stat-strip{ border-top:1px solid var(--line-on-ink); border-bottom:1px solid var(--line-on-ink); }
.stat-strip .container{ display:grid; grid-template-columns: repeat(4,1fr); }
.stat{ padding: 30px 24px; border-left:1px solid var(--line-on-ink); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .n{ font-family:var(--display); font-size:2.1rem; color:#fff; font-weight:700; animation: stat-flicker 5s steps(1) infinite; }
.stat:nth-child(2) .n{ animation-delay: 1.2s; }
.stat:nth-child(3) .n{ animation-delay: 2.4s; }
.stat:nth-child(4) .n{ animation-delay: 3.6s; }
@keyframes stat-flicker{ 0%, 94%{ color:#fff; } 96%{ color: var(--signal); } 98%{ color:#fff; } 100%{ color:#fff; } }
.stat .l{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; margin-top:6px; opacity:.7; }
@media (max-width: 800px){ .stat-strip .container{ grid-template-columns: repeat(2,1fr); } .stat{ border-left:none; border-top:1px solid var(--line-on-ink); padding-left:0 !important; } .stat:nth-child(odd){ padding-right:24px; } }

/* ---------- Cards: services ---------- */
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--ink); }
.section--ink .grid-3{ background: var(--signal); }
@media (max-width: 880px){ .grid-3{ grid-template-columns: 1fr; } }
.card{ background: var(--paper); padding: 38px 32px; transition: background .12s steps(2), transform .12s steps(2); }
.section--ink .card{ background: var(--ink); }
.card:hover{ background: var(--paper-2); transform: translate(-3px,-3px); }
.section--ink .card:hover{ background: var(--ink-2); }
.card .num{ font-family:var(--mono); font-weight:600; font-size:.75rem; color: var(--signal); }
.card:hover .num{ animation: pixel-glitch .5s steps(2) infinite; }
@keyframes pixel-glitch{ 0%,100%{ color: var(--signal); transform:translateX(0); } 50%{ color:#fff; transform:translateX(2px); } }
.card h3{ margin-top:16px; font-size:1.3rem; font-weight:600; font-family:var(--display); line-height:1.3; }
.card p{ margin-top:14px; font-size:.95rem; color: var(--graphite-60); }
.section--ink .card p{ color: var(--mist); opacity:.8; }
.card a.card-link{ margin-top:18px; display:inline-block; font-family:var(--mono); font-weight:600; font-size:.78rem; color: var(--signal); }

/* ---------- Process ---------- */
.process{ display:grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
@media (max-width: 900px){ .process{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .process{ grid-template-columns: 1fr; } }
.process-step{ border-top: 2px solid var(--blueprint); padding-top:18px; }
.process-step .num{ font-family:var(--mono); font-size:.8rem; color: var(--blueprint); }
.process-step h3{ margin-top:10px; font-size:1.1rem; }
.process-step p{ margin-top:10px; font-size:.92rem; color: var(--graphite-60); }
.section--ink .process-step p{ color: var(--mist); opacity:.8; }

/* ---------- Portfolio ---------- */
.folio-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--line-on-paper); }
@media (max-width: 780px){ .folio-grid{ grid-template-columns: 1fr; } }
.folio-card{ background: var(--paper); padding: 0; overflow:hidden; clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); }
.folio-thumb{
  aspect-ratio: 16/10; position:relative; display:flex; align-items:flex-end;
  padding: 20px; overflow:hidden; isolation:isolate;
}
.folio-thumb::before{ content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(15,30,48,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(15,30,48,.15) 1px, transparent 1px); background-size: 24px 24px; z-index:-1; }
.folio-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.folio-thumb::after{
  content:""; position:absolute; left:0; right:0; height:6px; top:-6px;
  background: rgba(255,255,255,.55); mix-blend-mode: overlay;
  animation: scanline 3.4s steps(20) infinite;
}
@keyframes scanline{ 0%{ transform: translateY(0); opacity:0; } 5%{ opacity:1; } 95%{ opacity:1; } 100%{ transform: translateY(230px); opacity:0; } }
.folio-thumb .tag{ font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; background: var(--signal); color:#000; padding:6px 10px; display:inline-flex; align-items:center; gap:7px; position:relative; z-index:2; clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)); }
.folio-thumb .tag::before{ content:""; width:6px; height:6px; background:#000; flex-shrink:0; animation: pixel-blink 1s steps(1) infinite; }
.folio-body{ padding: 26px 28px 30px; }
.folio-body h3{ font-size:1.2rem; font-weight:600; line-height:1.3; }
.folio-body p{ margin-top:10px; font-size:.92rem; color: var(--graphite-60); }
.folio-body .stamp{ display:block; margin-top:16px; }

/* palette rotation for thumbs so cards read distinctly without real photography */
.p1{ background: linear-gradient(135deg,#1A1A1A,#000000); }
.p2{ background: linear-gradient(135deg,#FF215F,#000000); }
.p3{ background: linear-gradient(135deg,#000000,#D8134C); }
.p4{ background: linear-gradient(135deg,#2B2B2B,#000000); }
.p5{ background: linear-gradient(135deg,#FF215F,#1A1A1A); }
.p6{ background: linear-gradient(135deg,#000000,#FF6B93); }

/* ---------- Logo strip ---------- */
.logo-strip{ display:flex; flex-wrap:wrap; gap: 0; border-top:1px solid var(--line-on-paper); }
.logo-chip{ font-family: var(--mono); font-weight:600; font-size:.82rem; letter-spacing:.03em; color: var(--graphite-60); padding: 22px 26px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); flex:1; min-width:180px; text-align:center; transition: background .1s steps(2), color .1s steps(2); background-color: var(--paper) }

/* ---------- Testimonials ---------- */
.testi{ border-left:6px solid var(--signal); padding:22px 26px; max-width: 720px; background: var(--paper-2); animation: heartbeat 2.2s steps(6) infinite; clip-path: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px)); }
.section--ink .testi{ background: var(--ink-2); }
@keyframes heartbeat{ 0%,100%{ border-left-color: var(--signal); } 50%{ border-left-color: #7a0f2c; } }
.testi p{ font-family: var(--display); font-size:1.45rem; font-weight:600; line-height:1.4; }
.testi footer{ margin-top:20px; font-family:var(--mono); font-size:.8rem; color: var(--mist); opacity:.75; }
.section--light .testi footer{ color: var(--graphite-60); }

/* ---------- CTA band ---------- */
.cta-band{ background: var(--signal); color:#fff; padding: 70px 0; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:-24px 0 0 0; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.28) 2px, transparent 2px);
  background-size: 22px 22px;
  animation: dust-rise 2.6s linear infinite;
}
@keyframes dust-rise{ from{ background-position:0 0; } to{ background-position:0 -22px; } }
.cta-band .container{ position:relative; z-index:1; }
.cta-band .container{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta-band h2{ font-size: clamp(1.5rem,2.6vw,2.1rem); color:#fff; max-width: 560px; font-weight:700; }
.cta-band .btn{ background: var(--ink); border-color: var(--ink); color:#fff; box-shadow: 5px 5px 0 0 #000; }
.cta-band .btn:hover{ background:#1a1a1a; box-shadow: 0 0 0 0 #000; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: var(--mist); padding: 70px 0 26px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom:1px solid var(--line-on-ink); }
@media (max-width: 800px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
.footer-brand .nav-logo{ margin-bottom:14px; }
.footer-brand p{ font-size:.92rem; opacity:.75; max-width:32ch; }
.footer-col h4{ font-family:var(--mono); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--blueprint); margin-bottom:16px; }
.footer-col li{ margin-bottom:10px; font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-family:var(--mono); font-size:.72rem; opacity:.6; flex-wrap:wrap; gap:10px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background: var(--ink); color: var(--mist); padding: 150px 0 80px; position:relative; }
.page-hero .container{ max-width: 820px; }
.page-hero h1{ font-size: clamp(2rem,3.6vw,2.8rem); color:#fff; font-weight:700; }
.page-hero p{ margin-top:18px; font-size:1.05rem; opacity:.85; max-width:60ch; }
.breadcrumb{ font-family: var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color: var(--blueprint); margin-bottom:20px; display:flex; gap:8px; }

/* ---------- Feature list (service pages) ---------- */
.feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap: 20px 40px; }
@media (max-width:700px){ .feature-list{ grid-template-columns:1fr; } }
.feature-list li{ display:flex; gap:14px; font-size:.98rem; padding: 16px 0; border-top:1px solid var(--line-on-paper); }
.section--ink .feature-list li{ border-top:1px solid var(--line-on-ink); }
.feature-list li::before{ content:"+"; font-family:var(--mono); color: var(--signal); flex-shrink:0; }

/* ---------- Two-col ---------- */
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items:start; }
@media (max-width: 860px){ .two-col{ grid-template-columns:1fr; gap: 40px; } }

/* ---------- Form ---------- */
.form-grid{ display:grid; gap: 20px; }
.field label{ display:block; font-family: var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; color: var(--blueprint-dim); }
.field input, .field select, .field textarea{
  width:100%; background: var(--paper); border: 1px solid var(--line-on-paper); border-bottom: 2px solid var(--graphite);
  padding: 13px 14px; font-family: var(--body); font-size: .98rem; color: var(--graphite); border-radius: var(--radius);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color: var(--signal); outline:none; }

/* ---------- Misc ---------- */
.badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.badge{ font-family:var(--mono); font-weight:600; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; border:2px solid var(--mist-30); padding:7px 12px; color: var(--mist); transition: transform .1s steps(2), background .1s steps(2), color .1s steps(2); clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px)); }
.badge:hover{ background: var(--signal); color:#000; border-color: var(--signal); transform: translate(-2px,-2px); }

/* four-up plan/feature grid, same treatment as grid-3 */
.grid-4{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--line-on-paper); }
.section--ink .grid-4{ background: var(--line-on-ink); }
@media (max-width: 980px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }
.plan-card{ background: var(--paper); padding: 32px 26px; display:flex; flex-direction:column; }
.section--ink .plan-card{ background: var(--ink); }
.plan-card .plan-name{ font-family:var(--display); font-size:1.2rem; font-weight:600; }
.plan-card .plan-tag{ font-family:var(--mono); font-size:.72rem; color: var(--signal); text-transform:uppercase; letter-spacing:.05em; margin-top:6px; }
.plan-card p{ margin-top:14px; font-size:.92rem; color: var(--graphite-60); flex-grow:1; }
.section--ink .plan-card p{ color: var(--mist); opacity:.8; }
.plan-card .plan-meta{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line-on-paper); font-family:var(--mono); font-size:.82rem; }
.section--ink .plan-card .plan-meta{ border-top-color: var(--line-on-ink); }
.plan-card .plan-meta div{ display:flex; justify-content:space-between; padding:4px 0; }
.plan-card .plan-meta span:first-child{ color: var(--graphite-60); }
.section--ink .plan-card .plan-meta span:first-child{ color: var(--mist); opacity:.7; }
.plan-card .plan-meta span:last-child{ font-weight:600; color: var(--signal); }

/* FAQ list */
.faq-item{ border-top:2px solid var(--line-on-paper); padding:22px 0; }
.section--ink .faq-item{ border-top-color: var(--line-on-ink); }
.faq-item:last-child{ border-bottom:2px solid var(--line-on-paper); }
.section--ink .faq-item:last-child{ border-bottom-color: var(--line-on-ink); }
.faq-item h3{ font-size:1.05rem; font-weight:600; display:flex; gap:10px; }
.faq-item h3::before{ content:"?"; font-family:var(--mono); color: var(--signal); flex-shrink:0; }
.faq-item p{ margin-top:10px; font-size:.95rem; color: var(--graphite-60); padding-left:22px; }
.section--ink .faq-item p{ color: var(--mist); opacity:.8; }

/* native accordion (details/summary) — used for FAQ + collapsed fine print */
.accordion details{ border-top:2px solid var(--line-on-paper); }
.section--ink .accordion details{ border-top-color: var(--line-on-ink); }
.accordion details:last-child{ border-bottom:2px solid var(--line-on-paper); }
.section--ink .accordion details:last-child{ border-bottom-color: var(--line-on-ink); }
.accordion summary{
  cursor:pointer; padding:20px 4px; font-family:var(--display); font-weight:600; font-size:1.02rem;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{ content:"+"; font-family:var(--mono); color: var(--signal); font-size:1.2rem; flex-shrink:0; transition: transform .15s steps(2); }
.accordion details[open] summary::after{ transform: rotate(45deg); }
.accordion details p, .accordion details ul{ padding:0 4px 22px; color: var(--graphite-60); font-size:.95rem; }
.section--ink .accordion details p, .section--ink .accordion details ul{ color: var(--mist); opacity:.85; }
.accordion details li{ padding:6px 0 6px 18px; position:relative; }
.accordion details li::before{ content:"+"; position:absolute; left:0; color: var(--signal); font-family:var(--mono); }
.accordion-toggle{ text-align:center; margin-top:28px; }
.accordion-toggle summary{ display:inline-flex; justify-content:center; font-size:.85rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.05em; color: var(--blueprint-dim); border:none; padding:10px 0; }

/* popular-plan ribbon */
.plan-card{ position:relative; }
.plan-card.is-popular{ background: var(--paper-2); }
.section--ink .plan-card.is-popular{ background: var(--ink-2); }
.plan-card .plan-ribbon{
  position:absolute; top:0; right:0; background: var(--signal); color:#000;
  font-family:var(--mono); font-weight:600; font-size:.65rem; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px;
}
.section--light .badge{ border-color: var(--line-on-paper); color: var(--graphite-60); }

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .5s steps(6), transform .5s steps(6); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ================= HERO BUILD SEQUENCE =================
   A single synced 8s cycle: the interface assembles itself
   piece by piece, holds complete, then disassembles and repeats.
   All hero elements share this exact duration so they never drift. */
@keyframes block-build{
  0%   { opacity:0; transform: scaleX(0); }
  8%   { opacity:1; transform: scaleX(1); }
  72%  { opacity:1; transform: scaleX(1); }
  82%  { opacity:0; transform: scaleX(0); }
  100% { opacity:0; transform: scaleX(0); }
}
@keyframes block-build-bounce{
  0%   { opacity:0; transform: scaleX(0); }
  7%   { opacity:1; transform: scaleX(1.18); }
  10%  { transform: scaleX(.9); }
  13%  { transform: scaleX(1); }
  72%  { opacity:1; transform: scaleX(1); }
  82%  { opacity:0; transform: scaleX(0); }
  100% { opacity:0; transform: scaleX(0); }
}
@keyframes draw-rect{
  0%   { stroke-dashoffset: 300; opacity:1; }
  8%   { stroke-dashoffset: 300; }
  26%  { stroke-dashoffset: 0; }
  72%  { stroke-dashoffset: 0; }
  84%  { stroke-dashoffset: -300; }
  100% { stroke-dashoffset: -300; }
}
@keyframes pop-scale{
  0%   { opacity:0; transform: scale(0); }
  8%   { opacity:0; transform: scale(0); }
  10%  { opacity:1; transform: scale(1.3); }
  13%  { transform: scale(1); }
  72%  { opacity:1; transform: scale(1); }
  80%  { opacity:0; transform: scale(0); }
  100% { opacity:0; transform: scale(0); }
}
@keyframes cursor-build{
  0%   { transform: scaleY(0); }
  8%   { transform: scaleY(1); }
  72%  { transform: scaleY(1); }
  80%  { transform: scaleY(0); }
  100% { transform: scaleY(0); }
}
@keyframes screen-power{
  0%   { opacity:0; }
  4%   { opacity:1; }
  78%  { opacity:1; }
  86%  { opacity:0; }
  100% { opacity:0; }
}
.blink-a{ animation: pixel-blink 1.6s steps(1) infinite; }
.blink-b{ animation: pixel-blink 1.6s steps(1) infinite .8s; }

/* radar / mayday signal rings expanding from the antennas */
@keyframes pixel-ring{
  0%   { opacity: 1; transform: scale(1); }
  70%  { opacity: .35; }
  100% { opacity: 0; transform: scale(2.1); }
}
.pixel-ring{ animation-name: pixel-ring; animation-timing-function: steps(6); animation-iteration-count: infinite; }

/* terminal cursor block blinking like a caret */
@keyframes term-blink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } }
.term-cursor{ animation: term-blink .9s steps(1) infinite; }

/* superseded by the hero build-sequence keyframes above */

/* floating pixel dust around the illustration */
.hero-figure{ position:relative; }
.pixel-particle{
  position:absolute; width:8px; height:8px; background: var(--signal);
  animation: pixel-float 5s steps(8) infinite;
}
@keyframes pixel-float{
  0%   { transform: translateY(0) translateX(0); opacity:0; }
  10%  { opacity:1; }
  50%  { transform: translateY(-26px) translateX(6px); }
  90%  { opacity:1; }
  100% { transform: translateY(-52px) translateX(-4px); opacity:0; }
}
.pp-1{ top:8%;  left:2%;   animation-delay:0s;   background:#FFFFFF; }
.pp-2{ top:22%; right:4%;  animation-delay:.9s; }
.pp-3{ top:55%; left:-2%;  animation-delay:1.8s; background:#FFFFFF; }
.pp-4{ top:70%; right:0%;  animation-delay:2.4s; }
.pp-5{ top:40%; left:48%;  animation-delay:3.1s; width:6px; height:6px; background:#FFFFFF; }
.pp-6{ top:4%;  right:38%; animation-delay:3.8s; width:6px; height:6px; }