/* ═══════════════════════════════════════════════════════════
   Pegify · Home page styles
   Page-specific only — shared styles live in shared.css
   ═══════════════════════════════════════════════════════════ */

.grotesk{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* ═════════════════════════════ CURSOR: DRAG STATE (page-specific) ═════════════════════════════ */
.cursor.drag{width:140px;height:140px;background:var(--mint);border-color:var(--mint);mix-blend-mode:normal}
.cursor.drag .cursor-label{opacity:1;transform:scale(1);color:var(--green)}
.cursor.drag ~ .cursor-dot{opacity:0}

/* ═════════════════════════════ HERO ═════════════════════════════ */
.hero{
  position:relative;
  min-height:100vh;min-height:100dvh;
  padding:120px 32px 48px;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 100%, rgba(255,125,47,.16), transparent 60%);
}
.grain{
  position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
}
.hero-top{
  position:relative;z-index:3;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;
}
.hero-eye{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--green);
}
.hero-eye::before{content:"";width:22px;height:2px;background:var(--green)}
.hero-status{
  justify-self:center;display:inline-flex;align-items:center;gap:10px;
  padding:8px 18px;border-radius:999px;background:var(--sheet);border:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.hero-status .dot{
  width:8px;height:8px;border-radius:999px;background:var(--orange);
  box-shadow:0 0 0 4px rgba(255,125,47,.18);animation:pulse 1.8s ease infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero-meta{
  justify-self:end;text-align:right;
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);line-height:1.7;
}
.hero-meta b{display:block;color:var(--ink);font-weight:700}

.hero-mark{
  position:relative;z-index:2;
  margin:0 -8px;
  display:flex;justify-content:center;align-items:center;
}
.hero-mark-svg{width:100%;max-height:60vh;height:auto;color:var(--ink)}
.hero-mark-svg path{
  fill:var(--ink);stroke:var(--ink);stroke-width:.6;
  stroke-dasharray:1200;stroke-dashoffset:1200;fill-opacity:0;
  animation:drawMark 1.4s cubic-bezier(.16,1,.3,1) forwards, fillMark .7s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.hero-mark-svg path:nth-child(2){animation-delay:.08s, .98s}
.hero-mark-svg path:nth-child(3){animation-delay:.16s, 1.06s}
.hero-mark-svg path:nth-child(4){animation-delay:.24s, 1.14s}
.hero-mark-svg path:nth-child(5){animation-delay:.32s, 1.22s}
.hero-mark-svg path:nth-child(6){animation-delay:.40s, 1.30s}
@keyframes drawMark{to{stroke-dashoffset:0}}
@keyframes fillMark{to{fill-opacity:1}}
.hero-mark-svg path:nth-child(2){--accent:var(--orange)}
.hero-mark-svg path.accent{fill:var(--orange);stroke:var(--orange)}

.hero-strap{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:end;gap:32px;
  margin-top:24px;
}
.hero-pre{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}
.hero-pre b{color:var(--ink);font-weight:700;display:block;margin-bottom:4px}
.hero-tag{
  text-align:center;
  font-family:'Space Grotesk',sans-serif;font-weight:600;
  font-size:clamp(20px, 2.1vw, 28px);
  letter-spacing:-0.015em;line-height:1.18;
  text-wrap:balance;color:var(--ink);
  max-width:680px;margin:0 auto;
}
.hero-tag em{font-style:normal;color:var(--orange)}
.hero-tag u{
  text-decoration:none;background:var(--mint);
  padding:0 .18em;border-radius:6px;display:inline-block;
  transform:rotate(-1deg);
}
.hero-cta{justify-self:end;display:flex;gap:10px;align-items:center}
.btn-hero{
  padding:18px 28px;border-radius:999px;background:var(--ink);color:var(--sheet);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:14px;
  box-shadow:0 18px 36px rgba(20,20,20,.22);
  transition:background .25s, box-shadow .25s;
}
.btn-hero:hover{background:var(--orange);box-shadow:0 22px 44px rgba(255,125,47,.32)}
.btn-hero i{font-size:18px;transition:transform .25s}
.btn-hero:hover i{transform:translateX(4px)}

.hero-pegis{position:absolute;inset:0;pointer-events:none;z-index:1}
.pegi{
  position:absolute;width:96px;height:auto;
  filter:drop-shadow(8px 16px 24px rgba(20,20,20,.18));
  will-change:transform;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.pegi.p1{left:6%;top:30%;width:108px}
.pegi.p2{right:8%;top:24%;width:88px}
.pegi.p3{left:12%;bottom:18%;width:96px}
.pegi.p4{right:14%;bottom:22%;width:84px}

/* ═════════════════════════════ MARQUEE ═════════════════════════════ */
.scroll-mar{
  position:relative;background:var(--ink);color:var(--paper);
  padding:36px 0;overflow:hidden;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
}
.scroll-mar .row{
  display:flex;gap:60px;white-space:nowrap;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(40px,5.2vw,80px);
  letter-spacing:-0.025em;text-transform:uppercase;line-height:1;
  will-change:transform;
}
.scroll-mar .row span{display:inline-flex;align-items:center;gap:60px}
.scroll-mar .row span::after{content:"";width:18px;height:18px;border-radius:999px;background:var(--orange)}
.scroll-mar .row.reverse{color:transparent;-webkit-text-stroke:1px var(--paper);text-stroke:1px var(--paper);font-size:clamp(28px,3.4vw,56px);margin-top:18px}
.scroll-mar .row.reverse span::after{background:transparent;border:1px solid var(--paper);width:12px;height:12px}

/* ═════════════════════════════ MANIFESTO ═════════════════════════════ */
.manifesto{padding:160px 32px 200px;position:relative;overflow:hidden}
.manifesto h2{
  max-width:1320px;margin:0 auto;
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(40px, 6vw, 100px);
  line-height:1.02;letter-spacing:-0.04em;text-wrap:balance;
}
.word{
  display:inline-block;opacity:.14;margin-right:.22em;
  transition:opacity .35s ease, color .35s ease, background .35s ease;
}
.word.lit{opacity:1}
.word.accent.lit{color:var(--orange)}
.word.green.lit{color:var(--green)}
.word.hilite.lit{background:var(--mint);color:var(--ink);padding:0 .16em;border-radius:8px}

/* ═════════════════════════════ PAIN ═════════════════════════════ */
.pain{
  position:relative;
  padding:140px 32px 180px;background:var(--sheet);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.pain-head{
  max-width:1320px;margin:0 auto 80px;
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:end;
}
.pain-head h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(44px,6vw,96px);line-height:.94;letter-spacing:-0.04em;
  margin:0;text-transform:uppercase;text-wrap:balance;
}
.pain-head h2 em{font-style:normal;color:var(--orange)}
.pain-head p{max-width:380px;margin:0;font-size:17px;line-height:1.5;color:var(--muted)}
.pain-scatter{
  position:relative;max-width:1320px;margin:0 auto;
  height:560px;
}
.pain-card{
  position:absolute;width:340px;
  background:var(--paper);border:1.5px solid var(--ink);border-radius:24px;
  padding:30px;display:flex;flex-direction:column;gap:14px;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  will-change:transform;
  box-shadow:8px 8px 0 var(--ink);
}
.pain-card .pin{
  position:absolute;top:-12px;right:24px;
  width:24px;height:24px;border-radius:999px;
  background:var(--orange);border:3px solid var(--paper);
  box-shadow:0 6px 12px rgba(0,0,0,.25);
}
.pain-card .lab{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;color:var(--muted);text-transform:uppercase;
}
.pain-card h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-0.025em;line-height:1.04;
  margin:0;text-transform:uppercase;
}
.pain-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.pain-card .quote{
  margin-top:6px;padding:14px 16px;border-radius:14px;
  background:var(--sheet);border:1px dashed var(--line);
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);line-height:1.55;
}
.pain-card .quote::before{content:"\201C ";color:var(--orange);font-weight:700}
.pain-card.c1{left:2%;top:0%;transform:rotate(-5deg)}
.pain-card.c2{left:36%;top:80px;transform:rotate(2deg)}
.pain-card.c3{right:2%;top:30px;transform:rotate(-1.5deg)}
.pain-card:hover{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:14px 14px 0 var(--ink);z-index:5}
.pain-scrap{
  position:absolute;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;
}
.pain-scrap i{color:var(--orange)}
.pain-scrap.s1{bottom:24px;left:6%;transform:rotate(-4deg)}
.pain-scrap.s2{bottom:60px;right:8%;transform:rotate(6deg)}

/* ═════════════════════════════ BRIDGE ═════════════════════════════ */
.bridge{
  position:relative;background:var(--green);color:#fff;
  padding:160px 32px;overflow:hidden;
}
.bridge::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 80% 20%, rgba(191,244,199,.18), transparent 60%);
}
.bridge-inner{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:center;position:relative;
}
.bridge-eye{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.2);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mint);
  margin-bottom:32px;
}
.bridge h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(52px,7vw,116px);line-height:.92;letter-spacing:-0.045em;
  margin:0;text-transform:uppercase;
}
.bridge h2 em{font-style:normal;color:var(--mint)}
.bridge h2 u{
  text-decoration:none;background:var(--orange);color:#fff;
  padding:0 .15em;border-radius:8px;display:inline-block;transform:rotate(-1deg);
}
.bridge p{margin-top:28px;max-width:520px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.78)}
.bridge-art{position:relative;aspect-ratio:1/1;perspective:1200px}
.stack-card{
  position:absolute;inset:8%;border-radius:24px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(4px);padding:24px;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.stack-card:nth-child(1){transform:translate(-28%,-24%) rotate(-10deg)}
.stack-card:nth-child(2){transform:translate(0,0) rotate(0)}
.stack-card:nth-child(3){transform:translate(28%,24%) rotate(10deg)}
.bridge-art:hover .stack-card:nth-child(1){transform:translate(-40%,-32%) rotate(-14deg)}
.bridge-art:hover .stack-card:nth-child(3){transform:translate(40%,32%) rotate(14deg)}
.stack-card .top{
  display:flex;align-items:center;gap:10px;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mint);
}
.stack-card .top .ico{
  width:30px;height:30px;border-radius:8px;background:rgba(191,244,199,.18);
  display:grid;place-items:center;color:var(--mint);font-size:16px;
}
.stack-card h4{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;
  letter-spacing:-0.02em;margin:14px 0 6px;text-transform:uppercase;
}
.stack-card p{margin:0;font-size:13px;color:rgba(255,255,255,.7);line-height:1.45}
.stack-card .pill{
  margin-top:14px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;background:var(--mint);color:var(--green);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
}

/* ═════════════════════════════ PILLARS ═════════════════════════════ */
.pillars{padding:160px 32px;background:var(--paper);position:relative}
.pillars-head{
  max-width:1320px;margin:0 auto 64px;
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;
}
.pillars-head h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(44px,6vw,96px);line-height:.92;letter-spacing:-0.04em;
  margin:0;text-transform:uppercase;
}
.pillars-head h2 em{font-style:normal;color:var(--orange)}
.pillars-head p{
  max-width:360px;margin:0;font-size:16px;line-height:1.5;color:var(--muted);text-align:right;
}
.pillars-grid{
  max-width:1320px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  perspective:1400px;
}
.pillar{
  position:relative;background:var(--sheet);border:1px solid var(--line);
  border-radius:32px;padding:36px 32px 32px;min-height:540px;
  display:flex;flex-direction:column;gap:18px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s, background .35s;
  transform-style:preserve-3d;will-change:transform;overflow:hidden;
}
.pillar::before{
  content:"";position:absolute;inset:auto -20% -60% -20%;height:80%;
  background:radial-gradient(60% 100% at 50% 0%, var(--orange), transparent 65%);
  opacity:0;transition:opacity .4s;pointer-events:none;
}
.pillar:hover{transform:translateY(-8px);box-shadow:0 32px 70px rgba(20,20,20,.2);border-color:var(--ink)}
.pillar:hover::before{opacity:.18}
.pillar-ico{
  width:78px;height:78px;border-radius:20px;display:grid;place-items:center;
  background:var(--soft);color:var(--ink);font-size:36px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1), background .3s, color .3s;
}
.pillar:hover .pillar-ico{transform:translateY(-4px) rotate(-6deg);background:var(--ink);color:var(--mint)}
.pillar h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;
  letter-spacing:-0.03em;line-height:1;margin:0;text-transform:uppercase;
}
.pillar p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.pillar .features{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.pillar .features div{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
.pillar .features div i{color:var(--green);font-size:16px}
.pillar .badge{
  align-self:flex-start;
  padding:4px 10px;border-radius:999px;background:var(--mint);color:var(--green);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;
}
.pillar.featured{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.pillar.featured .pillar-ico{background:rgba(255,255,255,.08);color:var(--mint)}
.pillar.featured p{color:rgba(255,255,255,.7)}
.pillar.featured .features div{color:#fff}
.pillar.featured .features div i{color:var(--mint)}
.pillar.featured .badge{background:var(--orange);color:#fff}

/* ═════════════════════════════ HORIZONTAL RAIL ═════════════════════════════ */
.rail-wrap{position:relative;background:var(--ink);color:var(--sheet)}
.rail-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column}
.rail-head{
  padding:48px 56px 0;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;z-index:2;
}
.rail-head h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(40px,5vw,84px);line-height:.94;letter-spacing:-0.035em;
  margin:0;text-transform:uppercase;
}
.rail-head h2 em{font-style:normal;color:var(--orange)}
.rail-head .meta{
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  text-align:right;line-height:1.7;
}
.rail-head .meta b{color:#fff;font-weight:700;display:block}
.rail-track{
  flex:1;display:flex;align-items:center;gap:48px;
  padding:0 8vw;will-change:transform;
}
.rail-card{
  flex-shrink:0;width:520px;
  background:var(--sheet);color:var(--ink);
  border-radius:28px;padding:32px;min-height:480px;
  display:flex;flex-direction:column;gap:18px;position:relative;
  box-shadow:0 28px 60px rgba(0,0,0,.5);
}
.rail-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.rail-card .stage{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  padding:5px 10px;border-radius:999px;border:1px solid var(--line);
}
.rail-card .ico{
  width:56px;height:56px;border-radius:16px;background:var(--orange);color:#fff;
  display:grid;place-items:center;font-size:28px;
}
.rail-card h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;
  letter-spacing:-0.03em;line-height:1.02;margin:0;text-transform:uppercase;
}
.rail-card p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.rail-card .mock{
  margin-top:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:18px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7;color:var(--ink-2);
  min-height:160px;
}
.rail-card .mock .ml{display:block}
.rail-card .mock .k{color:var(--orange);font-weight:600}
.rail-card .mock .g{color:var(--green);font-weight:600}
.rail-card .mock .m{color:var(--muted)}
.rail-progress{
  padding:24px 56px 32px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;z-index:2;
}
.rail-progress .lab{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.rail-progress-track{
  height:3px;border-radius:999px;background:rgba(255,255,255,.12);
  overflow:hidden;position:relative;
}
.rail-progress-fill{
  position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--orange);
  border-radius:inherit;transition:width .15s ease;
}
.rail-progress .stage-name{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  color:#fff;text-transform:uppercase;letter-spacing:.08em;
}
.rail-progress .stage-name em{font-style:normal;color:var(--orange)}

/* ═════════════════════════════ TERMINAL PREVIEW ═════════════════════════════ */
.cockpit-section{padding:160px 32px;background:var(--paper);position:relative;overflow:hidden}
.cockpit-head{max-width:1320px;margin:0 auto 56px;text-align:center}
.cockpit-head h2{
  font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(48px,6vw,108px);line-height:.92;letter-spacing:-0.04em;
  margin:0;text-transform:uppercase;text-wrap:balance;
}
.cockpit-head h2 em{font-style:normal;color:var(--orange)}
.cockpit-head p{max-width:580px;margin:24px auto 0;font-size:17px;color:var(--muted);line-height:1.5}
.cockpit-frame{max-width:1320px;margin:0 auto;position:relative;perspective:1800px}
.cockpit-tilt{
  border-radius:24px;overflow:hidden;background:var(--sheet);border:1px solid var(--line);
  box-shadow:0 40px 100px rgba(20,20,20,.25);
  transform:rotateX(8deg);transform-origin:50% 100%;
  transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.cockpit-bar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--line);background:var(--paper);
}
.cockpit-bar .traf{width:12px;height:12px;border-radius:999px}
.cockpit-bar .traf.r{background:#ff5f57}
.cockpit-bar .traf.y{background:#ffbd2e}
.cockpit-bar .traf.g{background:#28c840}
.cockpit-bar .url{
  margin-left:auto;padding:6px 14px;border-radius:999px;background:var(--soft);
  font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);
}
.cockpit-grid{display:grid;grid-template-columns:240px 1fr 280px;min-height:520px}
.cock-side{
  background:var(--paper);border-right:1px solid var(--line);
  padding:20px 16px;display:flex;flex-direction:column;gap:6px;
}
.cock-side .h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:8px 12px}
.cock-side .item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ink-2);
}
.cock-side .item i{font-size:16px;color:var(--muted)}
.cock-side .item.on{background:var(--ink);color:var(--sheet)}
.cock-side .item.on i{color:var(--mint)}
.cock-side .item .badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--orange)}
.cock-main{padding:24px;display:flex;flex-direction:column;gap:18px;background:var(--sheet)}
.cock-row1{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cock-stat{padding:16px;border-radius:14px;background:var(--paper);border:1px solid var(--line)}
.cock-stat .l{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cock-stat .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:32px;letter-spacing:-0.03em;margin-top:6px}
.cock-stat .v em{font-style:normal;color:var(--orange);font-size:14px;margin-left:6px;vertical-align:6px}
.cock-stat .v .g{color:var(--green)}
.cock-agents{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:12px}
.cock-agents .title{display:flex;justify-content:space-between;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cock-agents .title b{color:var(--ink)}
.cock-agent{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sheet);border:1px solid var(--line)}
.cock-agent .av{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;color:#fff}
.cock-agent .meta b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:-0.01em}
.cock-agent .meta span{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.cock-agent .status{display:flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--green);text-transform:uppercase;letter-spacing:.12em}
.cock-agent .status .dot{width:7px;height:7px;border-radius:999px;background:var(--green);box-shadow:0 0 0 3px rgba(35,71,43,.12);animation:pulse 1.6s ease infinite}
.cock-agent .status.idle{color:var(--muted)}
.cock-agent .status.idle .dot{background:var(--muted);box-shadow:0 0 0 3px rgba(122,118,109,.12);animation:none}
.cock-right{background:var(--paper);border-left:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:14px}
.cock-right .h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.cock-event{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:var(--sheet);border:1px solid var(--line)}
.cock-event .di{width:7px;height:7px;border-radius:999px;background:var(--orange);margin-top:7px;flex-shrink:0}
.cock-event .di.g{background:var(--green)}
.cock-event b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:-0.01em}
.cock-event span{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted);margin-top:2px}

/* ═════════════════════════════ WORKFLOWS ═════════════════════════════ */
.workflows{padding:160px 32px;background:var(--paper);position:relative;overflow:hidden}
.wf-head{max-width:1320px;margin:0 auto 64px;text-align:center}
.wf-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(48px,6vw,108px);line-height:.92;letter-spacing:-0.04em;margin:0;text-transform:uppercase}
.wf-head h2 em{font-style:normal;color:var(--orange)}
.wf-head p{max-width:600px;margin:22px auto 0;font-size:17px;color:var(--muted);line-height:1.5}

.wf-visual{max-width:960px;margin:0 auto 80px}
.wf-pipeline{
  background:var(--sheet);border:1.5px solid var(--ink);border-radius:24px;
  overflow:hidden;transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.wf-pipeline:hover{transform:translateY(-4px);box-shadow:0 32px 80px rgba(20,20,20,.12)}
.wf-bar{display:flex;align-items:center;gap:7px;padding:14px 20px;background:var(--paper);border-bottom:1px solid var(--line)}
.wf-bar .traf{width:10px;height:10px;border-radius:999px}
.wf-bar .traf.r{background:#e87070}.wf-bar .traf.y{background:#e0951a}.wf-bar .traf.g{background:var(--green)}
.wf-bar .url{margin-left:12px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);background:var(--soft);padding:5px 14px;border-radius:8px;letter-spacing:.04em}

.wf-flow{display:flex;align-items:center;justify-content:center;gap:0;padding:36px 28px 28px;flex-wrap:wrap}
.wf-node{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:80px}
.wf-ico{width:48px;height:48px;border-radius:14px;background:var(--soft);color:var(--muted);display:grid;place-items:center;font-size:22px;transition:all .25s;border:1.5px solid var(--line)}
.wf-node.active .wf-ico{background:var(--green);color:#fff;border-color:var(--green)}
.wf-node.running .wf-ico{background:var(--orange);color:#fff;border-color:var(--orange);animation:pulse 1.6s ease infinite}
.wf-label{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.wf-status{height:18px;display:grid;place-items:center;font-size:12px}
.wf-status.done{color:var(--green)}
.wf-status.running{color:var(--orange)}
.wf-status.running i{animation:spin 1.2s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wf-edge{flex:1;min-width:20px;max-width:48px;height:2px;background:var(--green);position:relative;margin:0 4px;margin-bottom:26px}
.wf-edge span{position:absolute;right:-3px;top:-3px;width:8px;height:8px;border-radius:999px;background:var(--green)}
.wf-edge.pending{background:var(--line)}
.wf-edge.pending span{background:var(--line)}

.wf-meta{padding:16px 28px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.wf-agent{display:flex;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13px;color:var(--ink)}
.wf-agent .dot{width:7px;height:7px;border-radius:999px;background:var(--green);animation:pulse 1.6s ease infinite}
.wf-agent b{color:var(--orange)}
.wf-info{display:flex;gap:16px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted)}
.wf-info span{display:flex;align-items:center;gap:5px}
.wf-info i{font-size:14px;color:var(--orange)}

.wf-features{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wf-feat{padding:28px;border-radius:20px;background:var(--sheet);border:1px solid var(--line);transition:transform .35s,border-color .25s}
.wf-feat:hover{transform:translateY(-4px);border-color:var(--ink)}
.wf-feat i{font-size:28px;color:var(--orange);margin-bottom:14px;display:block}
.wf-feat h4{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;letter-spacing:-0.02em;margin:0 0 8px;text-transform:uppercase}
.wf-feat p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}

/* ═════════════════════════════ PEGI ROSTER ═════════════════════════════ */
.pegis{padding:160px 32px;background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.pegis-head{max-width:1320px;margin:0 auto 64px;text-align:center}
.pegis-head h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(48px,6vw,108px);line-height:.92;letter-spacing:-0.04em;margin:0;text-transform:uppercase}
.pegis-head h2 em{font-style:normal;color:var(--orange)}
.pegis-head p{max-width:560px;margin:22px auto 0;font-size:17px;color:var(--muted);line-height:1.5}
.pegi-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pegi-card{
  position:relative;aspect-ratio:.78/1;border-radius:28px;padding:26px 24px 28px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
  will-change:transform;
}
.pegi-card:hover{transform:translateY(-10px) rotate(-1deg);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.pegi-card.c1{background:var(--orange);color:#fff}
.pegi-card.c2{background:var(--green);color:#fff}
.pegi-card.c3{background:var(--lav);color:var(--ink)}
.pegi-card.c4{background:var(--ink);color:var(--sheet)}
.pegi-card .role{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.pegi-card h3{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:40px;letter-spacing:-0.035em;line-height:.92;margin:0;text-transform:uppercase}
.pegi-stage{position:relative;flex:1;display:grid;place-items:center;overflow:hidden}
.pegi-mascot{
  width:70%;filter:drop-shadow(8px 14px 20px rgba(0,0,0,.18));
  transition:transform .12s linear;will-change:transform;
}
.pegi-skills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.pegi-skill{
  padding:4px 10px;border-radius:999px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  background:rgba(255,255,255,.15);
}
.pegi-card.c3 .pegi-skill{background:rgba(26,26,26,.08)}
.pegi-card.c4 .pegi-skill{background:rgba(255,255,255,.08)}

/* ═════════════════════════════ METRICS ═════════════════════════════ */
.metrics{background:var(--mint);color:var(--green);padding:88px 32px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.metrics-inner{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.metric{display:flex;flex-direction:column;gap:6px}
.metric .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(56px,6vw,84px);line-height:.92;letter-spacing:-0.045em}
.metric .v em{font-style:normal;font-size:.55em;vertical-align:.5em;color:var(--green-2)}
.metric .l{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}

/* ═════════════════════════════ RUNTIME STRIP ═════════════════════════════ */
.runtime-strip{
  background:var(--sheet);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:80px 32px;overflow:hidden;
}
.runtime-inner{max-width:1320px;margin:0 auto;text-align:center}
.runtime-inner h3{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  margin-bottom:36px;
}
.runtime-logos{
  display:flex;justify-content:center;gap:32px;flex-wrap:wrap;align-items:center;
}
.runtime-chip{
  padding:16px 28px;border-radius:16px;background:var(--paper);border:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;
  letter-spacing:-0.01em;color:var(--ink);
  display:flex;align-items:center;gap:12px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.runtime-chip:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(20,20,20,.12);border-color:var(--ink)}
.runtime-chip i{font-size:22px;color:var(--orange)}

/* ═════════════════════════════ CTA ═════════════════════════════ */
.cta{padding:160px 32px;background:var(--ink);color:var(--sheet);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 20% 100%,rgba(255,125,47,.22),transparent 60%);pointer-events:none}
.cta-inner{max-width:1280px;margin:0 auto;text-align:center;position:relative}
.cta-stamp{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:var(--mint);color:var(--green);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:36px}
.cta-stamp .dot{width:7px;height:7px;border-radius:999px;background:var(--green);animation:pulse 1.6s infinite}
.cta h2{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(60px,8vw,160px);line-height:.86;letter-spacing:-0.05em;margin:0 0 32px;text-transform:uppercase;text-wrap:balance}
.cta h2 em{font-style:normal;color:var(--orange)}
.cta p{max-width:560px;margin:0 auto 48px;font-size:18px;color:rgba(255,255,255,.65);line-height:1.5}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-cta-primary{padding:22px 38px;border-radius:999px;background:var(--sheet);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:14px;transition:background .25s, color .25s, box-shadow .25s}
.btn-cta-primary:hover{background:var(--orange);color:#fff;box-shadow:0 22px 44px rgba(255,125,47,.32)}
.btn-cta-primary i{font-size:18px}
.btn-cta-ghost{padding:22px 32px;border-radius:999px;border:1.5px solid rgba(255,255,255,.25);color:var(--sheet);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;transition:all .25s}
.btn-cta-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ═════════════════════════════ SCROLL REVEAL ═════════════════════════════ */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}

/* ═════════════════════════════ RESPONSIVE (page-specific) ═════════════════════════════ */
@media (max-width:1180px){
  .pillars-grid{grid-template-columns:repeat(2,1fr)}
  .pegi-grid{grid-template-columns:repeat(2,1fr)}
  .cockpit-grid{grid-template-columns:200px 1fr}
  .cock-right{display:none}
  .bridge-inner{grid-template-columns:1fr;gap:48px}
  .hero-strap{grid-template-columns:1fr;text-align:center;gap:16px}
  .hero-cta{justify-self:center}
  .pain-scatter{height:auto;display:grid;grid-template-columns:1fr;gap:28px;padding:20px}
  .pain-card{position:relative;width:100%;left:auto!important;right:auto!important;top:auto!important;transform:rotate(-2deg)}
  .pain-card.c2{transform:rotate(1.5deg)}
  .pain-scrap{display:none}
}
@media (max-width:900px){
  .hero{padding:96px 20px 36px}
  .hero-top,.hero-strap{grid-template-columns:1fr;text-align:left;gap:14px}
  .hero-meta,.hero-status{justify-self:start}
  .pegi{display:none}
  .pillars-grid{grid-template-columns:1fr}
  .pillars-head{grid-template-columns:1fr;gap:18px}
  .pillars-head p{text-align:left}
  .pegi-grid{grid-template-columns:1fr 1fr}
  .metrics-inner{grid-template-columns:1fr 1fr;gap:20px}
  .cockpit-tilt{transform:none}
  .cockpit-grid{grid-template-columns:1fr}
  .cock-side{display:none}
  .rail-card{width:340px;min-height:420px}
  .rail-head{padding:36px 24px 0;grid-template-columns:1fr}
  .rail-head .meta{display:none}
  .rail-progress{padding:18px 24px 24px;grid-template-columns:1fr}
  .pain-head{grid-template-columns:1fr;gap:18px}
  .scroll-mar .row{font-size:48px}
  .scroll-mar .row.reverse{font-size:32px}
  .runtime-logos{gap:16px}
  .runtime-chip{padding:12px 18px;font-size:14px}
  .wf-features{grid-template-columns:1fr 1fr;gap:14px}
}
@media (max-width:600px){
  .pegi-grid{grid-template-columns:1fr}
  .metrics-inner{grid-template-columns:1fr 1fr}
  .manifesto{padding:88px 18px 100px}
  .pain,.cockpit-section,.pegis,.cta,.bridge,.pillars,.runtime-strip,.workflows{padding:88px 18px}
  .wf-features{grid-template-columns:1fr;gap:12px}
  .wf-visual{margin-bottom:48px}
}