:root { --ink: oklch(0.17 0.012 285); --deep: oklch(0.12 0.01 285); --paper: oklch(0.97 0.012 94); --white: oklch(0.995 0.003 94); --yellow: oklch(0.92 0.19 104); --purple: oklch(0.59 0.19 299); --muted: oklch(0.53 0.014 285); --line: oklch(0.82 0.012 285); --sans: "Manrope", "Helvetica Neue", Arial, sans-serif; --mono: "DM Mono", monospace; --header: 78px; --ease: cubic-bezier(0.16, 1, 0.3, 1); }
* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header); overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; } body.menu-open { overflow: hidden; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } ::selection { background: var(--yellow); color: var(--ink); } :focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }.skip-link { position: fixed; z-index: 100; left: 16px; top: 12px; padding: 10px 14px; background: var(--yellow); transform: translateY(-150%); transition: transform 200ms var(--ease); }.skip-link:focus { transform: translateY(0); }.page-width { width: min(1180px, calc(100% - 44px)); margin-inline: auto; }.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--header); display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: center; padding: 0 clamp(22px, 5vw, 74px); border-bottom: 1px solid oklch(100% 0 0 / .14); background: oklch(0.12 0.01 285 / .92); color: var(--paper); backdrop-filter: blur(18px); }.brand { display: inline-flex; align-items: flex-start; justify-self: start; font-size: 27px; font-weight: 800; letter-spacing: -.075em; line-height: 1; }.brand sup { margin-left: 3px; color: var(--purple); font-size: 10px; line-height: 1; }.site-nav { display: flex; gap: clamp(20px, 2.6vw, 42px); align-items: center; color: oklch(90% .008 285); font-size: 13px; font-weight: 700; }.site-nav a:hover, .site-nav a.is-current { color: var(--yellow); }.header-actions { justify-self: end; display: flex; gap: 20px; align-items: center; }.login-link { color: oklch(87% .01 285); font-size: 13px; font-weight: 700; }.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 19px; padding: 0 22px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: transform 200ms var(--ease), background 200ms ease, color 200ms ease; }.button:hover { transform: translateY(-3px); }.button-yellow { background: var(--yellow); color: var(--ink); }.button-yellow:hover { background: var(--white); }.button-dark { background: var(--ink); color: var(--paper); }.button-dark:hover { background: var(--purple); }.button-small { min-height: 42px; padding-inline: 17px; font-size: 11px; }.menu-toggle { display: none; background: none; border: 0; }.menu-toggle span { display: block; width: 23px; height: 1px; margin: 5px; background: var(--paper); }.eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 25px; color: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .15em; line-height: 1.2; }.eyebrow::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }.eyebrow-yellow { color: var(--yellow); }.eyebrow-purple { color: var(--purple); }.pulse-dot { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 5px oklch(92% .19 104 / .12); }h1,h2,h3,p { margin-top: 0; }h1,h2,h3 { font-weight: 700; letter-spacing: -.065em; }h1 em,h2 em { color: var(--yellow); font-style: normal; }
.method-hero { position: relative; min-height: 820px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; padding: calc(var(--header) + 80px) clamp(22px, 7vw, 110px) 90px; overflow: hidden; background: var(--deep); color: var(--paper); }.method-hero::before { content: ""; position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(oklch(100% 0 0 / .08) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / .08) 1px, transparent 1px); background-size: 72px 72px; }.method-hero::after { content: ""; position: absolute; width: 700px; height: 700px; right: -180px; top: -150px; border-radius: 50%; background: radial-gradient(circle, oklch(64% .21 299 / .3), transparent 67%); filter: blur(30px); }.method-hero-copy, .method-hero-art { position: relative; z-index: 1; }.method-hero-copy { max-width: 600px; }.method-hero h1 { margin-bottom: 30px; font-size: clamp(57px, 7.4vw, 106px); line-height: .9; }.method-hero h1 em { color: var(--yellow); }.method-hero-copy > p:not(.eyebrow) { max-width: 500px; color: oklch(82% .012 285); font-size: 19px; line-height: 1.48; }.method-hero .button { margin-top: 24px; }.method-hero-art { min-height: 520px; display: grid; place-items: center; }.method-stamp { position: absolute; z-index: 3; top: 5%; right: 7%; display: grid; width: 112px; height: 112px; place-items: center; border: 1px solid var(--yellow); border-radius: 50%; color: var(--yellow); font-family: var(--mono); font-size: 10px; line-height: 1.1; text-align: center; transform: rotate(13deg); }.method-stamp b { color: var(--paper); font-weight: 500; }.method-canvas { position: relative; width: min(730px, 100%); min-height: 440px; overflow: hidden; border: 1px solid oklch(100% 0 0 / .35); border-radius: 16px; background: oklch(94% .01 285); color: var(--ink); box-shadow: 0 28px 65px oklch(0% 0 0 / .35); transform: rotate(-3deg); }.canvas-label { display: block; padding: 19px 21px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 9px; }.canvas-nodes { position: absolute; inset: 0; }.mini-node { position: absolute; z-index: 2; width: 154px; min-height: 140px; padding: 16px; border: 1px solid oklch(70% .015 285); border-radius: 11px; background: var(--white); box-shadow: 0 10px 22px oklch(0% 0 0 / .09); font-size: 10px; }.mini-node b { display: block; margin-top: 13px; font-size: 18px; letter-spacing: -.05em; line-height: 1.05; }.mini-node small { display: block; margin-top: 9px; color: var(--muted); font-family: var(--mono); font-size: 7px; }.node-intro { top: 28%; left: 7%; background: oklch(92% .08 104); }.node-agent { top: 41%; left: 42%; background: oklch(91% .07 299); }.node-agent:first-letter { color: var(--purple); }.node-result { top: 23%; right: 7%; background: oklch(91% .08 164); }.canvas-wires { position: absolute; z-index: 1; height: 1px; border-top: 1px dashed var(--purple); transform-origin: left; }.wire-a { top: 46%; left: 28%; width: 175px; transform: rotate(14deg); }.wire-b { top: 45%; left: 59%; width: 165px; transform: rotate(-18deg); }.wire-c { top: 54%; left: 26%; width: 360px; border-color: oklch(80% .1 164); transform: rotate(-1deg); }.canvas-prompt { position: absolute; left: 18%; right: 18%; bottom: 22px; z-index: 3; display: flex; justify-content: space-between; padding: 13px 16px; border-radius: 30px; background: var(--white); box-shadow: 0 6px 18px oklch(0% 0 0 / .12); color: var(--purple); font-size: 11px; }.canvas-prompt b { color: var(--ink); }
.method-intro { display: grid; grid-template-columns: .28fr .72fr; gap: 50px; padding-top: clamp(105px, 14vw, 190px); padding-bottom: clamp(100px, 12vw, 170px); }.method-intro h2 { max-width: 710px; margin: 0 0 28px; font-size: clamp(50px, 6.3vw, 90px); line-height: .9; }.method-intro h2 em { color: var(--purple); }.method-intro > div > p { max-width: 620px; color: var(--muted); font-size: 19px; line-height: 1.5; }
.method-compare { padding: clamp(100px, 12vw, 170px) 0; background: oklch(89% .08 294); }.compare-heading h2 { margin: 0; font-size: clamp(55px, 6.6vw, 92px); line-height: .87; }.compare-heading h2 em { color: var(--ink); }.compare-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 75px; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }.compare-side { min-height: 510px; padding: clamp(25px, 4vw, 55px); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.compare-blinkin { background: var(--yellow); }.compare-label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; }.compare-side h3 { max-width: 380px; margin: 75px 0 43px; font-size: clamp(30px, 3.6vw, 50px); line-height: .95; }.compare-side ul { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 15px; }.compare-side li::before { content: "×"; display: inline-block; width: 27px; color: var(--purple); font-weight: 800; }.compare-blinkin li::before { content: "✓"; }.compare-blinkin .inline-arrow { margin-top: 39px; }
.method-steps { display: grid; grid-template-columns: .38fr .62fr; gap: 80px; padding-top: clamp(110px, 14vw, 190px); padding-bottom: clamp(110px, 14vw, 190px); }.steps-heading h2 { margin: 0 0 30px; font-size: clamp(57px, 7vw, 100px); line-height: .82; }.steps-heading h2 em { color: var(--purple); }.steps-heading > p:last-child { max-width: 300px; color: var(--muted); font-size: 16px; line-height: 1.5; }.steps-list { border-top: 1px solid var(--line); }.step { display: grid; grid-template-columns: 45px 1fr 30px; gap: 18px; align-items: start; width: 100%; padding: 23px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; }.step > span { color: var(--purple); font-family: var(--mono); font-size: 10px; }.step strong { display: block; font-size: 29px; letter-spacing: -.06em; }.step p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }.step i { justify-self: end; color: var(--muted); font-style: normal; transition: color 180ms ease, transform 180ms var(--ease); }.step:hover i, .step.is-active i { color: var(--purple); transform: translate(3px, -3px); }.step.is-active strong { color: var(--purple); }.step-result { margin-top: 35px; padding: 25px; border-radius: 13px; background: oklch(92% .025 285); }.step-result small { color: var(--muted); font-family: var(--mono); font-size: 9px; }.step-result h3 { margin: 20px 0 10px; font-size: 29px; line-height: 1; }.step-result p { max-width: 470px; margin: 0; color: var(--muted); font-size: 15px; }.result-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }.result-tags span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 100px; color: var(--purple); font-family: var(--mono); font-size: 8px; }
.proof-wall { padding: clamp(100px, 13vw, 180px) 0; background: var(--deep); color: var(--paper); }.proof-wall-heading { display: grid; grid-template-columns: .3fr .42fr .28fr; gap: 45px; align-items: end; }.proof-wall-heading .eyebrow { align-self: start; color: var(--yellow); }.proof-wall-heading h2 { margin: 0; font-size: clamp(51px, 6vw, 84px); line-height: .88; }.proof-wall-heading h2 em { color: var(--yellow); }.proof-wall-heading > p:last-child { margin: 0; color: oklch(73% .012 285); font-size: 16px; line-height: 1.5; }.proof-wall-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; margin-top: 80px; }.proof-wall-grid figure { margin: 0; }.proof-wall-grid figure:first-child { grid-row: span 2; }.proof-wall-grid img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; border-radius: 13px; background: oklch(23% .015 285); }.proof-wall-grid figure:first-child img { min-height: 520px; object-position: center; }.proof-wall-grid figcaption { display: grid; grid-template-columns: 28px 1fr; gap: 3px 11px; margin-top: 12px; }.proof-wall-grid figcaption span { color: var(--yellow); font-family: var(--mono); font-size: 9px; }.proof-wall-grid figcaption strong { font-size: 16px; }.proof-wall-grid figcaption small { grid-column: 2; color: oklch(68% .012 285); font-size: 11px; }
.method-cta { display: grid; grid-template-columns: .63fr .37fr; gap: 60px; align-items: end; padding-top: clamp(110px, 14vw, 190px); padding-bottom: clamp(110px, 14vw, 190px); }.method-cta h2 { margin: 0; font-size: clamp(50px, 6.4vw, 90px); line-height: .88; }.method-cta h2 em { color: var(--purple); }.method-cta > div:last-child p { color: var(--muted); font-size: 17px; line-height: 1.5; }.method-cta .button { margin-top: 20px; }.method-cta .text-link { margin: 24px 0 0 18px; font-size: 12px; }.text-link:hover { color: var(--purple); }.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: center; padding: 45px clamp(22px, 5vw, 74px); background: var(--ink); color: var(--paper); }.site-footer p { margin: 0; color: oklch(68% .012 285); font-size: 12px; }.site-footer > div { display: flex; gap: 24px; justify-content: center; color: oklch(75% .01 285); font-size: 12px; }.site-footer small { color: oklch(60% .01 285); font-family: var(--mono); font-size: 9px; }
@media (max-width: 1000px) { .method-hero { grid-template-columns: 1fr; padding-top: 150px; }.method-hero-copy { max-width: 700px; }.method-hero-art { min-height: 500px; }.method-intro, .method-steps, .method-cta { grid-template-columns: 1fr; gap: 35px; }.method-intro .eyebrow, .steps-heading .eyebrow { margin-bottom: 0; }.agent-layer-heading { grid-template-columns: 1fr; gap: 26px; }.agent-layer-flow { grid-template-columns: 1fr; gap: 17px; }.agent-connector { grid-template-columns: 1fr auto 1fr; }.agent-connector i { width: 1px; height: 20px; margin: 0 auto; }.agent-layer-proof { grid-template-columns: 1fr; }.proof-wall-heading { grid-template-columns: .35fr .65fr; }.proof-wall-heading > p:last-child { grid-column: 2; }.site-footer { grid-template-columns: 1fr 1fr; }.site-footer small { justify-self: end; }.site-footer > div { justify-content: flex-end; } }
@media (max-width: 760px) { .site-header { grid-template-columns: 1fr auto; }.site-nav { position: absolute; top: var(--header); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 15px 22px 22px; background: var(--ink); }.site-nav.is-open { display: flex; }.site-nav a { padding: 15px 0; border-bottom: 1px solid oklch(100% 0 0 / .14); }.header-actions { display: none; }.menu-toggle { display: block; justify-self: end; }.page-width { width: min(100% - 32px, 600px); }.method-hero { min-height: 770px; padding: 133px 22px 55px; }.method-hero h1 { font-size: clamp(53px, 15vw, 76px); }.method-hero-copy > p:not(.eyebrow) { font-size: 16px; }.method-hero-art { min-height: 350px; margin-inline: -22px; }.method-canvas { width: 650px; min-height: 390px; transform: scale(.62) rotate(-3deg); }.method-stamp { width: 85px; height: 85px; right: 1%; font-size: 8px; }.method-intro { padding-top: 95px; }.method-intro h2 { font-size: 52px; }.method-intro > div > p { font-size: 17px; }.compare-grid { grid-template-columns: 1fr; margin-top: 49px; }.compare-side { min-height: 0; }.compare-side h3 { margin-top: 50px; }.method-steps { padding-top: 100px; }.steps-heading h2 { font-size: 72px; }.proof-wall-heading { grid-template-columns: 1fr; gap: 24px; }.proof-wall-heading > p:last-child { grid-column: auto; }.proof-wall-grid { grid-template-columns: 1fr; margin-top: 50px; }.proof-wall-grid figure:first-child { grid-row: auto; }.proof-wall-grid figure:first-child img { min-height: 0; }.method-cta { padding-top: 100px; }.method-cta h2 { font-size: 59px; }.site-footer { grid-template-columns: 1fr; gap: 22px; }.site-footer > div { justify-content: flex-start; flex-wrap: wrap; }.site-footer small { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.button, .step i { transition: none; } }