:root {
  --black: #080808;
  --black-2: #111111;
  --white: #f4f4ef;
  --paper: #ecece6;
  --muted: #9a9a94;
  --line-dark: rgba(255,255,255,.12);
  --line-light: rgba(8,8,8,.13);
  --accent: #c8ff47;
  --shell: min(1440px, calc(100vw - 64px));
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--black); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--accent); color: var(--black); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.shell { width: var(--shell); margin: 0 auto; }
.section-dark { background: var(--black); color: var(--white); }
.section-light { background: var(--paper); color: var(--black); }
.section-accent { background: var(--accent); color: var(--black); }
.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.site-header {
  position: fixed; z-index: 80; left: 0; right: 0; top: 0; height: 88px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; mix-blend-mode: difference; color: #fff;
}
.brand { font-size: 20px; font-weight: 650; letter-spacing: -.045em; line-height: 1; display: inline-flex; align-items: baseline; }
.brand-q { color: var(--accent); }
.nav { display: flex; gap: 34px; font-size: 13px; letter-spacing: .04em; }
.nav a { position: relative; opacity: .78; transition: opacity .25s ease; }
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:1px; background:currentColor; transition:right .35s var(--ease); }
.nav a:hover { opacity: 1; }
.nav a:hover::after { right:0; }
.menu-button { display:none; width:42px; height:42px; border:0; background:transparent; color:inherit; padding:10px; }
.menu-button span:not(.sr-only) { display:block; height:1px; background:currentColor; margin:7px 0; transition:transform .3s ease; }
.mobile-nav { display:none; }

.hero { min-height: 100svh; position: relative; overflow: hidden; isolation: isolate; }
.hero-grid {
  position: absolute; inset: 0; opacity: .17; pointer-events: none;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: calc(100vw / 8) calc(100vw / 8);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.45), transparent 74%);
}
.hero::after {
  content:""; position:absolute; inset:auto 0 0 0; height:35%; z-index:-1;
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
}
.hero-content { min-height: 100svh; display:flex; flex-direction:column; justify-content:flex-end; position:relative; z-index:3; padding: 150px 0 70px; }
.eyebrow, .section-kicker { text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 620; }
.eyebrow { position:absolute; top:128px; left:0; color:#b4b4ae; }
.hero-title { font-size: clamp(62px, 9.2vw, 150px); line-height: .88; letter-spacing: -.073em; font-weight: 560; margin:0; max-width: 1220px; }
.hero-title span { color: #8d8d87; }
.hero-bottom { display:flex; justify-content:space-between; align-items:flex-end; margin-top:54px; padding-top:20px; border-top:1px solid var(--line-dark); }
.hero-sub { margin:0; font-size:14px; letter-spacing:.035em; color:#c9c9c4; }
.text-link { display:inline-flex; align-items:center; gap:42px; font-size:13px; text-transform:uppercase; letter-spacing:.09em; padding-bottom:7px; border-bottom:1px solid currentColor; }
.text-link span { font-size:19px; transition:transform .3s var(--ease); }
.text-link:hover span { transform: translate(4px,4px); }
.text-link-light { color:#efefe9; }
.scroll-cue { position:absolute; right:32px; bottom:43%; z-index:4; display:flex; align-items:center; gap:12px; transform:rotate(90deg) translateX(50%); transform-origin:right center; color:#777771; text-transform:uppercase; letter-spacing:.18em; font-size:9px; }
.scroll-line { display:block; width:44px; height:1px; background:#777771; overflow:hidden; position:relative; }
.scroll-line::after { content:""; position:absolute; inset:0; background:#e9e9e3; transform:translateX(-100%); animation:scrollLine 2.2s ease infinite; }
@keyframes scrollLine { 50%,100% { transform:translateX(100%); } }

.hero-orbit { position:absolute; z-index:1; width:min(46vw,670px); aspect-ratio:1; right:3vw; top:5vh; display:grid; place-items:center; perspective:1100px; pointer-events:none; }
.q-object { position:relative; width:68%; aspect-ratio:1; transform-style:preserve-3d; animation:qFloat 8s ease-in-out infinite; filter: drop-shadow(0 60px 80px rgba(0,0,0,.6)); }
.q-ring { position:absolute; inset:7%; border:clamp(27px, 4.2vw, 64px) solid rgba(200,255,71,.88); border-radius:50%; transform: rotateX(61deg) rotateZ(-27deg); box-shadow: inset 0 0 50px rgba(255,255,255,.18), 0 0 56px rgba(200,255,71,.08); }
.q-ring::before { content:""; position:absolute; inset:-8%; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.q-cut { position:absolute; width:33%; height:14%; background:var(--black); left:51%; top:63%; transform:rotate(-45deg); filter:blur(1px); }
.q-tail { position:absolute; width:37%; height:clamp(25px,3vw,46px); border-radius:999px; background:linear-gradient(90deg, rgba(200,255,71,.95), rgba(200,255,71,.28)); left:56%; top:66%; transform:rotate(31deg) translateZ(25px); box-shadow:0 0 40px rgba(200,255,71,.16); }
.q-glow { position:absolute; inset:22%; background:radial-gradient(circle, rgba(200,255,71,.16), transparent 66%); filter:blur(30px); }
@keyframes qFloat { 0%,100%{ transform:translateY(0) rotateZ(0deg) rotateY(0deg); } 50%{ transform:translateY(-18px) rotateZ(3deg) rotateY(-5deg); } }

.intro { padding: 140px 0 160px; }
.section-kicker { padding-top:10px; border-top:1px solid currentColor; opacity:.54; }
.intro-heading, .work-heading { display:grid; grid-template-columns: 1.65fr .75fr; gap: 8vw; align-items:end; margin:70px 0 88px; }
.intro-heading h2, .work-heading h2, .system-copy h2 { font-size:clamp(48px,6vw,94px); line-height:.94; letter-spacing:-.06em; font-weight:550; margin:0; }
.intro-heading p, .work-heading p { margin:0 0 7px; max-width:410px; font-size:16px; line-height:1.65; color:#5a5a55; }
.capabilities { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
.capability { min-height:540px; position:relative; padding:27px 28px 30px; border-right:1px solid var(--line-light); overflow:hidden; transition: background .4s var(--ease), transform .4s var(--ease); }
.capability:first-child { border-left:1px solid var(--line-light); }
.capability:hover { background:#e4e4dd; }
.capability-top { display:flex; justify-content:space-between; font-size:11px; opacity:.55; }
.capability-dot { width:7px; height:7px; border-radius:50%; background:var(--black); }
.capability h3 { margin:95px 0 18px; font-size:34px; letter-spacing:-.045em; font-weight:570; }
.capability p { margin:0; color:#666660; max-width:360px; line-height:1.6; }
.tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:27px; }
.tags span { border:1px solid var(--line-light); border-radius:999px; padding:6px 10px; font-size:10px; letter-spacing:.04em; text-transform:uppercase; }
.capability-visual { position:absolute; left:28px; right:28px; bottom:28px; height:122px; border-top:1px solid var(--line-light); }
.ai-visual { display:flex; justify-content:space-around; align-items:center; }
.ai-visual span { width:9px; height:9px; border-radius:50%; background:#222; position:relative; }
.ai-visual span::after { content:""; position:absolute; width:80px; height:1px; background:linear-gradient(90deg,rgba(8,8,8,.4),transparent); left:8px; top:4px; transform-origin:left; transform:rotate(var(--r, 15deg)); }
.ai-visual span:nth-child(2){ transform:translateY(-22px); }
.ai-visual span:nth-child(3){ transform:translateY(19px); }
.ai-visual span:nth-child(4){ transform:translateY(-9px); }
.flow-visual i { position:absolute; width:18px; height:18px; border:1px solid #222; background:var(--paper); top:54px; border-radius:3px; }
.flow-visual i:nth-child(1){left:4%;}.flow-visual i:nth-child(2){left:46%;}.flow-visual i:nth-child(3){right:4%;}
.flow-visual::before,.flow-visual::after { content:""; position:absolute; top:63px; height:1px; background:#222; width:36%; }
.flow-visual::before{left:10%;}.flow-visual::after{right:10%;}
.flow-visual b { position:absolute; top:60px; width:6px; height:6px; border-radius:50%; background:var(--accent); animation:flowDot 3.4s linear infinite; }
.flow-visual b:nth-of-type(1){left:11%;}.flow-visual b:nth-of-type(2){left:53%; animation-delay:1.1s;}
@keyframes flowDot { from{transform:translateX(0)} to{transform:translateX(100px)} }
.code-visual { padding-top:28px; }
.code-visual span { display:block; height:1px; margin:14px 0; background:#222; opacity:.42; }
.code-visual span:nth-child(1){width:65%}.code-visual span:nth-child(2){width:91%}.code-visual span:nth-child(3){width:52%}.code-visual span:nth-child(4){width:78%}

.work { padding:140px 0 160px; }
.work .section-kicker { color:#8a8a84; border-color:var(--line-dark); }
.work-heading p { color:#92928c; }
.projects { display:flex; flex-direction:column; gap:18px; }
.project { border:1px solid var(--line-dark); position:relative; overflow:hidden; background:#0c0c0c; }
.project-large { min-height:720px; padding:32px; display:grid; grid-template-columns:.92fr 1.08fr; grid-template-rows:auto 1fr; }
.project-meta { grid-column:1/-1; display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.11em; font-size:10px; color:#8e8e88; }
.project-copy { align-self:end; max-width:550px; z-index:2; }
.project-copy h3 { margin:0 0 24px; font-size:clamp(38px,4.6vw,72px); line-height:.95; letter-spacing:-.055em; font-weight:520; }
.project-copy p { color:#989892; max-width:490px; line-height:1.65; }
.tags-dark span { border-color:var(--line-dark); color:#a9a9a3; }
.project-demo { position:relative; }
.invoice-demo { align-self:center; padding-left:6%; }
.demo-window { border:1px solid rgba(255,255,255,.15); background:#121212; box-shadow:0 36px 100px rgba(0,0,0,.55); transform:perspective(1000px) rotateY(-7deg) rotateX(2deg); }
.demo-bar { height:46px; display:flex; align-items:center; gap:7px; border-bottom:1px solid var(--line-dark); padding:0 14px; }
.demo-bar i { width:6px; height:6px; border-radius:50%; background:#474742; }
.demo-bar span { margin-left:auto; font-size:8px; letter-spacing:.14em; color:#696964; }
.pipeline-row { height:68px; display:grid; grid-template-columns:46px 1fr auto; align-items:center; border-bottom:1px solid var(--line-dark); padding:0 18px; color:#a7a7a1; font-size:12px; }
.pipeline-row b { font-size:9px; color:#5d5d58; font-weight:500; }
.pipeline-row em { font-size:8px; font-style:normal; letter-spacing:.1em; color:#7e7e79; }
.pipeline-row.active { background:rgba(200,255,71,.06); color:#e7e7e1; }
.pipeline-row.active em { color:var(--accent); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.project-small { min-height:570px; padding:29px; display:flex; flex-direction:column; }
.project-small .project-meta { margin-bottom:auto; }
.project-small .project-copy { align-self:stretch; }
.project-small .project-copy h3 { font-size:clamp(38px,4vw,60px); }
.waveform-demo { height:115px; margin-top:42px; display:flex; gap:5px; align-items:center; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:22px 0; }
.waveform-demo span { flex:1; height:var(--h); max-width:5px; background:var(--accent); opacity:.72; transform-origin:center; animation:wave 3s ease-in-out infinite alternate; }
.waveform-demo span:nth-child(3n){animation-delay:.4s}.waveform-demo span:nth-child(4n){animation-delay:.8s}
@keyframes wave { to { transform:scaleY(.35); opacity:.35; } }
.matrix-demo { margin-top:42px; border-top:1px solid var(--line-dark); }
.matrix-demo div { height:39px; display:grid; grid-template-columns:58px 1fr 62px; align-items:center; border-bottom:1px solid var(--line-dark); color:#696964; font-size:8px; letter-spacing:.12em; }
.matrix-demo i { height:1px; background:linear-gradient(90deg, #474742, var(--accent), #474742); position:relative; overflow:hidden; }
.matrix-demo i::after { content:""; position:absolute; width:18%; height:100%; background:#fff; filter:blur(2px); animation:scan 2.5s linear infinite; }
@keyframes scan { from{left:-20%} to{left:110%} }
.matrix-demo span:last-child { text-align:right; }

.system-story { padding:150px 0 160px; }
.system-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:8vw; margin-top:80px; align-items:start; }
.system-copy h2 span { color:#8c8c85; }
.system-copy p { max-width:530px; color:#60605a; line-height:1.7; margin-top:38px; }
.system-map { display:flex; flex-direction:column; padding-top:6px; }
.node { min-height:108px; border:1px solid var(--line-light); padding:16px 18px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; background:rgba(255,255,255,.18); transition:transform .3s var(--ease), background .3s ease; }
.node:hover { transform:translateX(-5px); background:rgba(255,255,255,.55); }
.node small { font-size:9px; opacity:.45; }
.node strong { font-size:23px; letter-spacing:-.025em; font-weight:590; }
.node span { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#777770; }
.connector { height:38px; position:relative; margin-left:39px; border-left:1px solid var(--line-light); }
.connector i { position:absolute; width:5px; height:5px; border-radius:50%; background:var(--black); left:-3px; top:0; animation:connector 2s linear infinite; }
@keyframes connector { to{top:100%} }
.node-ai strong { color:#506814; }

.about { padding:150px 0 170px; }
.about .section-kicker { color:#888883; border-color:var(--line-dark); }
.about-layout { display:grid; grid-template-columns:1.12fr .88fr; gap:10vw; }
.about-title { font-size:clamp(56px,7vw,110px); line-height:.91; letter-spacing:-.065em; font-weight:540; margin:78px 0 0; }
.about-title span { color:#777771; }
.about-copy { align-self:end; padding-bottom:5px; }
.about-copy p { color:#9a9a94; max-width:560px; line-height:1.72; }
.about-copy .about-lead { color:#efefe9; font-size:24px; line-height:1.4; letter-spacing:-.02em; }
.tech-list { display:flex; flex-wrap:wrap; margin-top:42px; border-top:1px solid var(--line-dark); }
.tech-list span { width:50%; padding:14px 0; border-bottom:1px solid var(--line-dark); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#a0a09a; }

.contact { min-height:80svh; padding:100px 0 48px; display:flex; }
.contact-inner { display:flex; flex-direction:column; width:var(--shell); }
.contact .section-kicker { opacity:.55; }
.contact-link { margin:auto 0; display:grid; grid-template-columns:1fr auto; align-items:end; position:relative; padding:50px 0 54px; }
.contact-link span { grid-column:1/2; font-size:clamp(48px,7vw,110px); line-height:.88; letter-spacing:-.065em; font-weight:540; color:rgba(8,8,8,.48); }
.contact-link strong { grid-column:1/2; font-size:clamp(62px,9vw,142px); line-height:.9; letter-spacing:-.075em; font-weight:600; }
.contact-link i { position:absolute; right:0; bottom:62px; font-size:clamp(48px,6vw,90px); font-style:normal; transition:transform .35s var(--ease); }
.contact-link:hover i { transform:translate(10px,-10px); }
.contact-foot { display:flex; justify-content:space-between; border-top:1px solid rgba(8,8,8,.32); padding-top:18px; text-transform:uppercase; letter-spacing:.12em; font-size:9px; }

.footer { background:var(--black); color:var(--white); padding:30px 0; }
.footer-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.brand-footer { justify-self:start; }
.footer-links { display:flex; gap:24px; color:#8f8f89; font-size:11px; }
.footer-links a:hover { color:#fff; }
.copyright { justify-self:end; color:#656560; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease) var(--delay,0s), transform .9s var(--ease) var(--delay,0s); }
.reveal.is-visible { opacity:1; transform:none; }

.legal { min-height:100vh; background:var(--paper); color:var(--black); padding:140px 0 100px; }
.legal .shell { max-width:900px; }
.legal h1 { font-size:clamp(54px,8vw,100px); letter-spacing:-.06em; margin:0 0 70px; line-height:.92; }
.legal h2 { margin-top:42px; font-size:24px; letter-spacing:-.02em; }
.legal p,.legal li { color:#555550; line-height:1.7; }
.legal .placeholder { border:1px solid #b6b6af; background:#f4f4ef; padding:18px; margin:20px 0; font-size:13px; }

@media (max-width: 980px) {
  :root { --shell:min(100% - 40px, 1440px); }
  .site-header { padding:0 20px; height:74px; }
  .nav { display:none; }
  .menu-button { display:block; }
  .mobile-nav { position:fixed; z-index:70; inset:0; background:var(--black); color:var(--white); padding:120px 24px 40px; flex-direction:column; gap:20px; font-size:clamp(42px,10vw,72px); line-height:1; letter-spacing:-.05em; }
  .mobile-nav.open { display:flex; }
  .hero-orbit { width:78vw; right:-18vw; top:2vh; opacity:.78; }
  .hero-grid { background-size:25vw 25vw; }
  .hero-content { padding-bottom:34px; }
  .eyebrow { top:103px; }
  .hero-title { font-size:clamp(58px,13vw,112px); }
  .hero-bottom { gap:28px; align-items:flex-start; }
  .scroll-cue { display:none; }
  .intro,.work,.system-story,.about { padding:100px 0 110px; }
  .intro-heading,.work-heading,.system-layout,.about-layout { grid-template-columns:1fr; gap:42px; }
  .intro-heading,.work-heading { margin:52px 0 58px; }
  .intro-heading p,.work-heading p { max-width:640px; }
  .capabilities { grid-template-columns:1fr; }
  .capability { min-height:430px; border-left:1px solid var(--line-light); border-bottom:1px solid var(--line-light); }
  .capability h3 { margin-top:58px; }
  .project-large { grid-template-columns:1fr; min-height:auto; gap:55px; }
  .invoice-demo { padding-left:0; padding-bottom:20px; }
  .project-grid { grid-template-columns:1fr; }
  .project-small { min-height:500px; }
  .system-map { margin-top:12px; }
  .about-title { margin-top:54px; }
  .about-copy { padding-top:10px; }
  .contact { min-height:70svh; padding-top:80px; }
  .footer-inner { grid-template-columns:1fr auto; gap:22px; }
  .footer-links { grid-row:2; grid-column:1/-1; }
}

@media (max-width: 640px) {
  :root { --shell:calc(100% - 30px); }
  .hero-content { padding-top:115px; }
  .eyebrow { font-size:9px; }
  .hero-title { font-size:clamp(50px,15vw,82px); line-height:.91; }
  .hero-bottom { flex-direction:column; margin-top:36px; }
  .hero-sub { font-size:12px; }
  .hero-orbit { width:90vw; top:9vh; right:-30vw; opacity:.56; }
  .intro-heading h2,.work-heading h2,.system-copy h2 { font-size:clamp(44px,13vw,70px); }
  .capability { padding:23px 20px; min-height:420px; }
  .capability-visual { left:20px; right:20px; }
  .project-large,.project-small { padding:22px 20px; }
  .project-large { gap:44px; }
  .project-copy h3,.project-small .project-copy h3 { font-size:clamp(38px,11vw,56px); }
  .demo-window { transform:none; }
  .node { grid-template-columns:38px 1fr; gap:4px; }
  .node span { grid-column:2; }
  .about-title { font-size:clamp(54px,15vw,80px); }
  .contact-link { padding-top:80px; }
  .contact-link span { font-size:clamp(44px,12vw,72px); }
  .contact-link strong { font-size:clamp(58px,15vw,90px); }
  .contact-link i { position:static; grid-column:2; grid-row:2; margin:0 0 8px 10px; font-size:46px; }
  .contact-foot { gap:25px; }
  .footer-inner { grid-template-columns:1fr; }
  .copyright { 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; }
  .reveal { opacity:1; transform:none; }
}