@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --ink: #ecf6f0;
  --muted: #91a79e;
  --green: #8cffb5;
  --green-bright: #b8ffcd;
  --green-deep: #183b2e;
  --night: #06110e;
  --night-soft: #0a1914;
  --panel: rgba(14, 34, 27, 0.74);
  --line: rgba(168, 235, 195, 0.16);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 77% 4%, rgba(49, 146, 91, 0.18), transparent 30rem),
    linear-gradient(180deg, #07130f 0%, #040b09 100%);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.21;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

a { color: inherit; text-decoration: none; }
.page-shell { width: min(1440px, 100%); margin: 0 auto; overflow: hidden; }

.site-header {
  height: 86px;
  padding: 0 clamp(24px, 5vw, 78px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 10;
}

.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; font-weight: 700; letter-spacing: -.03em; }
.brand-mark { width: 34px; height: 34px; fill: none; stroke: var(--green); stroke-width: 1.8; }
.brand-mark circle { fill: var(--night); }
nav { display: flex; gap: 36px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
nav a, .header-cta { transition: color .2s ease; }
nav a:hover, .header-cta:hover { color: var(--green); }
.header-cta { justify-self: end; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

.hero {
  min-height: 720px;
  padding: clamp(72px, 9vw, 128px) clamp(24px, 7vw, 104px) 82px;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(430px, 1.12fr);
  gap: clamp(42px, 7vw, 110px);
  align-items: center;
}

.eyebrow, .section-index, .step-meta {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 18px var(--green); }

h1 { margin: 28px 0 26px; max-width: 720px; font-size: clamp(56px, 7.2vw, 104px); line-height: .94; letter-spacing: -.065em; font-weight: 500; }
h1 em { color: var(--green); font-style: normal; }
.hero-summary { max-width: 600px; color: #b4c7bf; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.65; }
.hero-actions { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; border: 1px solid var(--line); font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green); color: #06110e; border-color: var(--green); }
.button-quiet { color: var(--ink); background: rgba(255,255,255,.02); }

.signal-stage {
  position: relative;
  min-height: 520px;
  isolation: isolate;
}
.signal-stage::before {
  content: "";
  position: absolute;
  inset: 6% 3% 2%;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(140,255,181,.035), transparent 55%);
  clip-path: polygon(11% 0, 100% 0, 100% 88%, 89% 100%, 0 100%, 0 12%);
}
.ambient-orb { position: absolute; width: 300px; height: 300px; border-radius: 50%; right: 12%; top: 16%; background: rgba(77, 255, 139, .11); filter: blur(58px); z-index: -1; }
.document-card, .output-card {
  position: absolute;
  width: min(330px, 64%);
  padding: 23px;
  border: 1px solid rgba(167, 237, 195, .25);
  background: rgba(10, 27, 21, .92);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  backdrop-filter: blur(14px);
}
.document-card { left: 0; top: 70px; transform: rotate(-3deg); }
.output-card { right: 0; bottom: 66px; transform: rotate(2deg); }
.document-topline, .output-label { display: flex; justify-content: space-between; font: 400 9px/1 var(--mono); letter-spacing: .09em; color: var(--muted); }
.document-title { margin: 30px 0 23px; font-size: 19px; font-weight: 600; }
.document-line { height: 5px; margin: 11px 0; background: rgba(199, 230, 211, .17); border-radius: 3px; }
.w-82 { width: 82%; } .w-64 { width: 64%; } .w-74 { width: 74%; }
.document-grid { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.document-grid span { height: 28px; border: 1px solid rgba(199, 230, 211, .11); }
.scan-line { position: absolute; left: 12px; right: 12px; height: 1px; top: 22%; background: var(--green); box-shadow: 0 0 18px var(--green); animation: scan 4.6s ease-in-out infinite; opacity: .75; }

.output-label { margin-bottom: 18px; color: var(--green); }
.output-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line); font: 400 11px/1.2 var(--mono); color: var(--muted); }
.output-row b { color: var(--ink); font-weight: 500; }
.output-row .status-ready { color: var(--green); }

.agent-path { position: absolute; inset: 0; }
.path-line { position: absolute; width: 45%; height: 1px; left: 31%; top: 51%; transform: rotate(24deg); background: linear-gradient(90deg, transparent, var(--green), transparent); }
.path-node { position: absolute; width: 10px; height: 10px; border: 1px solid var(--green); background: var(--night); transform: rotate(45deg); }
.node-a { left: 38%; top: 44%; } .node-b { left: 53%; top: 51%; } .node-c { left: 69%; top: 59%; }
.path-pulse { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 16px var(--green); left: 35%; top: 45%; animation: pulsePath 3.2s linear infinite; }
.signal-caption { position: absolute; left: 6%; right: 5%; bottom: 8px; display: flex; justify-content: space-between; font: 400 8px/1 var(--mono); letter-spacing: .08em; color: #5f766d; }

.ticker { border-block: 1px solid var(--line); overflow: hidden; padding: 16px 0; }
.ticker div { width: max-content; display: flex; align-items: center; gap: 28px; animation: marquee 26s linear infinite; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: #71877e; }
.ticker i { width: 4px; height: 4px; background: var(--green); transform: rotate(45deg); }

.section { padding: 118px clamp(24px, 7vw, 104px); }
.section-heading { display: grid; grid-template-columns: .4fr 1fr .65fr; gap: 48px; align-items: start; margin-bottom: 70px; }
.section-heading h2, .company-panel h2 { margin: 0; font-size: clamp(38px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.05em; font-weight: 500; }
.section-heading > p:last-child { margin: 5px 0 0; color: var(--muted); line-height: 1.7; font-size: 15px; }
.section-heading.compact { grid-template-columns: .4fr 1.65fr; }

.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.step-card { min-height: 372px; padding: 30px; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); transition: background .25s ease, transform .25s ease; }
.step-card:last-child { border-right: 0; }
.step-card:hover { background: rgba(140,255,181,.045); transform: translateY(-5px); }
.step-card-featured { background: linear-gradient(180deg, rgba(74, 175, 112, .13), rgba(255,255,255,.015)); }
.step-number { align-self: flex-end; font: 400 10px/1 var(--mono); color: #667d74; }
.step-icon { width: 58px; height: 58px; margin-top: 34px; position: relative; }
.document-icon { border: 1px solid var(--green); }
.document-icon::before, .document-icon::after { content: ""; position: absolute; height: 1px; background: var(--green); left: 13px; right: 13px; }
.document-icon::before { top: 20px; } .document-icon::after { top: 33px; width: 20px; }
.reason-icon { border: 1px solid var(--line); transform: rotate(45deg); }
.reason-icon i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(140,255,181,.6); }
.reason-icon i:nth-child(1) { left: 10px; top: 11px; } .reason-icon i:nth-child(2) { right: 10px; top: 18px; } .reason-icon i:nth-child(3) { left: 22px; bottom: 10px; }
.output-icon { border: 1px solid var(--green); border-radius: 50%; }
.output-icon::before { content: ""; position: absolute; inset: 13px; border: 1px solid var(--green); border-radius: 50%; }
.output-icon::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--green); border-radius: 50%; left: 25px; top: 25px; }
.step-card h3 { margin: 30px 0 14px; font-size: 24px; letter-spacing: -.025em; }
.step-card p { margin: 0; color: var(--muted); line-height: 1.65; max-width: 310px; font-size: 14px; }
.step-meta { margin-top: auto; color: #657b72; }

.workflows { background: #081510; }
.workflow-list { border-top: 1px solid var(--line); }
.workflow-list article { min-height: 118px; display: grid; grid-template-columns: .35fr .8fr 1.2fr; align-items: center; gap: 40px; border-bottom: 1px solid var(--line); transition: padding .25s ease, background .25s ease; }
.workflow-list article:hover { padding-inline: 16px; background: rgba(140,255,181,.03); }
.workflow-list span { font: 400 10px/1 var(--mono); color: var(--green); }
.workflow-list h3 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); font-weight: 500; letter-spacing: -.04em; }
.workflow-list p { margin: 0; color: var(--muted); font-size: 14px; }

.company-panel { min-height: 460px; padding: clamp(34px, 5vw, 68px); display: grid; grid-template-columns: .48fr 1.25fr; gap: 50px; background: var(--green); color: #07120e; clip-path: polygon(0 0, 94% 0, 100% 18%, 100% 100%, 6% 100%, 0 82%); }
.company-panel .section-index { color: #235738; }
.company-panel > div { max-width: 690px; }
.company-panel p { margin: 30px 0; max-width: 620px; color: #1e4a32; line-height: 1.7; }
.company-panel a { display: inline-flex; gap: 8px; align-items: center; padding-bottom: 6px; border-bottom: 1px solid #163f29; font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }

footer { min-height: 150px; padding: 42px clamp(24px, 7vw, 104px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); color: var(--muted); }
footer p { font: 400 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
footer p:last-child { justify-self: end; }

[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }

@keyframes scan { 0%, 100% { top: 22%; opacity: .2; } 50% { top: 83%; opacity: .9; } }
@keyframes pulsePath { 0% { left: 35%; top: 45%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 74%; top: 63%; opacity: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
  .site-header { grid-template-columns: 1fr auto; } nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 72px; }
  .signal-stage { min-height: 480px; }
  .section-heading, .section-heading.compact { grid-template-columns: 1fr; gap: 20px; }
  .section-heading > p:last-child { max-width: 620px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { border-right: 0; border-bottom: 1px solid var(--line); min-height: 330px; }
  .step-card:last-child { border-bottom: 0; }
  .company-panel { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { height: 72px; }
  .header-cta { font-size: 10px; }
  h1 { font-size: clamp(52px, 17vw, 74px); }
  .hero { padding-inline: 20px; min-height: auto; }
  .signal-stage { min-height: 430px; }
  .document-card, .output-card { width: 76%; padding: 18px; }
  .document-card { top: 35px; }
  .output-card { bottom: 50px; }
  .section { padding: 86px 20px; }
  .workflow-list article { grid-template-columns: 42px 1fr; gap: 18px; padding: 26px 0; }
  .workflow-list p { grid-column: 2; }
  .company-panel { clip-path: none; padding: 38px 26px 46px; }
  footer { grid-template-columns: 1fr; gap: 20px; }
  footer p:last-child { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}