:root { --ink:#172119; --paper:#f5f3ed; --lime:#c9ff2d; --muted:#697168; --line:rgba(23,33,25,.17); --serif: Georgia, 'Times New Roman', serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.noise { position:fixed; inset:0; pointer-events:none; opacity:.16; z-index:3; 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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
.site-header { height:86px; padding:0 clamp(22px,4.2vw,64px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:4; }
.logo { display:flex; align-items:center; gap:8px; font-size:21px; font-weight:700; letter-spacing:-1.1px; }.logo svg { width:25px; height:23px; }
.desktop-nav { display:flex; align-items:center; gap:32px; margin-left:11%; font-size:14px; font-weight:500; }.desktop-nav a:hover,.footer-links a:hover { opacity:.55; }.desktop-nav span,.text-link span { font-size:13px; }
.header-cta { font-size:14px; font-weight:600; padding:11px 0; border-bottom:1px solid var(--ink); }.header-cta span { margin-left:7px; }
.menu-button { display:none; background:none; border:0; padding:6px; }.menu-button span { display:block; width:22px; height:1px; margin:5px; background:var(--ink); }
.hero { min-height:760px; padding:clamp(55px,8vw,120px) clamp(22px,7.9vw,120px) 0; position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.eyebrow,.section-kicker { font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; display:flex; gap:9px; align-items:center; }.status-dot { width:7px;height:7px;border-radius:50%;background:#87ad07;box-shadow:0 0 0 3px rgba(135,173,7,.14); }
.hero h1 { font-size:clamp(62px,9.45vw,145px); line-height:.87; letter-spacing:-.075em; font-weight:600; margin:49px 0 48px; position:relative; z-index:1; }.hero h1 em,.statement h2 em,.cta-section h2 em { font-family:var(--serif); font-weight:400; letter-spacing:-.07em; }
.hero-bottom { position:relative; z-index:1; display:flex; gap:55px; align-items:end; }.hero-bottom p { max-width:360px; margin:0; font-size:16px; line-height:1.5; }.hero-actions { display:flex; align-items:center; gap:28px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:34px; padding:16px 18px; font-size:14px; font-weight:600; transition:transform .2s, background .2s; }.button:hover { transform:translateY(-3px); }.button span { font-size:18px; }.button-primary { color:#f5f3ed; background:var(--ink); }.text-link { font-size:14px; font-weight:600; border-bottom:1px solid var(--ink); padding:6px 0; }
.hero-art { position:absolute; width:min(53vw,740px); height:405px; right:-25px; bottom:-3px; color:var(--ink); transform:perspective(900px) rotateX(1deg); }.grid-plane { position:absolute; inset:0 -5% -50% -9%; background-image:linear-gradient(rgba(23,33,25,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(23,33,25,.17) 1px,transparent 1px); background-size:38px 38px; transform:perspective(340px) rotateX(56deg); transform-origin:bottom; }.api-flow { position:absolute;width:91%;height:76%;right:0;top:11px;animation:float 8s ease-in-out infinite; }.api-route { stroke:rgba(23,33,25,.74);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 8; }.api-route-secondary { stroke:rgba(23,33,25,.28);stroke-width:1.5;stroke-dasharray:5 7; }.api-bracket { stroke:var(--ink);stroke-width:2; }.api-flow circle { fill:var(--paper);stroke:var(--ink);stroke-width:2; }.api-flow .api-pulse { fill:var(--lime);stroke:none;animation:apiPulse 2.1s ease-out infinite;transform-origin:78px 221px; }.api-chip { position:absolute;z-index:1;display:flex;align-items:center;gap:7px;padding:8px 10px;background:var(--paper);border:1px solid var(--ink);font:10px 'DM Mono';letter-spacing:.02em;box-shadow:5px 5px 0 rgba(23,33,25,.11);animation:float 8s ease-in-out infinite; }.api-chip span { color:#698600;font-weight:500; }.api-chip i { height:11px;width:1px;background:var(--line); }.api-chip b { font-weight:400; }.api-chip-request { left:11%;top:46px;animation-delay:-1.4s; }.api-chip-response { right:11%;top:148px;animation-delay:-3.2s; }.api-chip-response span { color:var(--ink);background:var(--lime);padding:2px 3px; }.api-payload { position:absolute;right:37%;bottom:52px;display:grid;gap:5px;width:70px;transform:rotate(-8deg);animation:payloadFloat 8s ease-in-out infinite -2.1s; }.api-payload i { display:block;height:4px;background:var(--ink);opacity:.25; }.api-payload i:nth-child(1){width:70px;background:var(--lime);opacity:1}.api-payload i:nth-child(2){width:52px}.api-payload i:nth-child(3){width:63px}.api-payload i:nth-child(4){width:36px}.coordinates { position:absolute;font:9px 'DM Mono'; letter-spacing:.04em; }.coord-one { bottom:12px; left:1%; }.coord-two { right:6%; top:37px; color:#688600; }
@keyframes float { 50% { transform:translateY(-8px); } } @keyframes payloadFloat { 50% { transform:rotate(-8deg) translateY(-7px); } } @keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(201,255,45,0); } } @keyframes apiPulse { 70%,100% { transform:scale(2.5);opacity:0; } }
.section { padding:135px clamp(22px,7.9vw,120px); }.section-kicker > span { color:#788174; }.section-heading { margin-top:34px; display:flex; justify-content:space-between; align-items:end; gap:30px; }.section h2,.statement h2,.cta-section h2 { font-size:clamp(44px,5.4vw,82px); letter-spacing:-.065em; line-height:.92; margin:0; font-weight:600; }.section-heading > p { max-width:303px; color:var(--muted); font-size:15px; line-height:1.55; margin:0 7% 5px 0; }
.product-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:14px; margin-top:65px; }.product-card { height:434px; min-width:0; padding:20px; border:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; transition:background .25s,transform .25s; }.product-card:hover { transform:translateY(-5px); background:#e9e9e1; }.product-card-featured { background:var(--ink); color:var(--paper); border-color:var(--ink); }.product-card-featured:hover { background:#263429; }.card-top { display:flex; justify-content:space-between; position:relative; z-index:1; }.card-index { font:11px 'DM Mono'; }.arrow { font-size:20px; }.card-copy { position:relative; z-index:1; }.card-copy h3 { margin:0; font-size:31px; line-height:.95; letter-spacing:-.05em; }.card-copy p { margin:12px 0 0; max-width:235px; font-size:13px; line-height:1.45; opacity:.7; }.api-card-art { position:absolute;top:23%;left:50%;width:min(86%,465px);transform:translateX(-50%) rotate(-3deg);overflow:hidden;background:#edf0e9;color:var(--ink);border:1px solid rgba(245,243,237,.65);box-shadow:9px 9px 0 rgba(201,255,45,.93);font:9px 'DM Mono';letter-spacing:.02em;transition:transform .35s ease; }.product-card-featured:hover .api-card-art { transform:translateX(-50%) rotate(0deg) translateY(-5px); }.studio-bar { height:30px;padding:0 10px;display:flex;align-items:center;gap:9px;background:#dfe4da;border-bottom:1px solid #bbc5b6; }.studio-bar b { font-size:9px;letter-spacing:.06em; }.studio-bar span { padding:3px 5px;background:var(--lime);font-size:7px;font-weight:500; }.studio-bar i { margin-left:auto;font-style:normal;color:#687268;font-size:8px; }.studio-body { display:grid;grid-template-columns:55px 1fr;min-height:105px; }.studio-nav { padding:9px 6px;border-right:1px solid #c2c8bf;display:grid;align-content:start;gap:5px;color:#6a746a;font-size:8px; }.studio-nav span { padding:4px 5px; }.studio-nav .is-active { background:var(--ink);color:var(--lime); }.studio-workspace { padding:9px 10px; }.studio-tabs { display:flex;align-items:center;gap:10px;color:#697269;border-bottom:1px solid #c8cec5;padding-bottom:7px;font-size:8px; }.studio-tabs b { color:var(--ink); }.studio-tabs i { margin-left:auto;font-style:normal;color:#648100;font-size:7px; }.studio-request { margin-top:10px;display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;border:1px solid #b9c2b7;padding:7px; }.studio-request em { font-style:normal;padding:3px 4px;background:var(--lime);font-size:8px; }.studio-request span { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px; }.studio-request b { background:var(--ink);color:var(--paper);padding:4px;font-size:7px;font-weight:400; }.studio-code { display:grid;gap:4px;margin:10px 2px 0; }.studio-code i { height:4px;background:#aeb8ad;opacity:.75; }.studio-code i:nth-child(1){width:82%;background:#7e9d14}.studio-code i:nth-child(2){width:58%}.studio-code i:nth-child(3){width:70%}.studio-code i:nth-child(4){width:42%}.studio-features { display:flex;flex-wrap:wrap;gap:4px;padding:7px 8px;background:#dfe4da;border-top:1px solid #bbc5b6; }.studio-features span { padding:3px 4px;background:#f3f5ef;border:1px solid #c2c8bf;font-size:6px;letter-spacing:.03em; }.orbit-art { height:160px; position:absolute; width:200px; left:50%; top:42%; transform:translate(-50%,-50%); }.orbit-art span { position:absolute;border:1px solid var(--ink);border-radius:50%; inset:15px 0; transform:rotate(-27deg); }.orbit-art span+span { transform:rotate(31deg); }.orbit-art b { position:absolute;width:18px;height:18px;border-radius:50%;background:var(--lime);left:91px;top:72px; }.blocks-art { display:grid;grid-template-columns:repeat(2,70px);gap:8px;position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-8deg); }.blocks-art span { height:70px;border:1px solid var(--ink); }.blocks-art span:nth-child(2),.blocks-art span:nth-child(3){background:var(--lime); }.code-art { position:absolute;left:50%;top:43%;width:195px;transform:translate(-50%,-50%);font-family:'DM Mono';color:var(--ink); }.code-art span { font-size:55px;letter-spacing:-.1em; }.code-art i { display:block;height:6px;margin:12px 0 0 30px;background:var(--ink);opacity:.18; }.code-art i:nth-of-type(1){width:120px;background:var(--lime);opacity:1}.code-art i:nth-of-type(2){width:76px}.code-art i:nth-of-type(3){width:145px}
.products .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.statement { background:#e3e3dc; padding:125px clamp(22px,7.9vw,120px) 115px; }.statement-rule { height:1px;background:var(--ink);opacity:.3;margin-bottom:13px; }.statement-label { font:10px 'DM Mono'; letter-spacing:.08em; margin:0 0 35px; }.statement h2 { font-size:clamp(52px,7vw,106px); }.statement-body { max-width:440px;margin:50px 0 75px;font-size:18px;line-height:1.5;color:#4d554d; }.principles { display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.principles > div { padding:20px 35px 0 0; }.principles > div+div { padding-left:27px;border-left:1px solid var(--line); }.principles span { font:10px 'DM Mono';color:#778076; }.principles h3 { margin:42px 0 10px;font-size:20px;letter-spacing:-.04em; }.principles p { margin:0;max-width:255px;color:#606961;font-size:14px;line-height:1.45; }
.cta-section { padding:120px clamp(22px,7.9vw,120px); background:var(--ink);color:var(--paper);position:relative;overflow:hidden; }.cta-section .section-kicker { position:relative;z-index:1; }.cta-section h2 { position:relative;z-index:1;margin:42px 0 34px;font-size:clamp(54px,7.25vw,110px); }.cta-section > p { position:relative;z-index:1;max-width:355px;line-height:1.55;font-size:16px;color:#c3c8c0;margin:0 0 29px; }.contact-form { position:relative;z-index:1;max-width:620px;display:grid;gap:18px; }.contact-form label { display:grid;gap:7px;font:10px 'DM Mono';letter-spacing:.06em;text-transform:uppercase;color:#c3c8c0; }.form-row { display:grid;grid-template-columns:1fr 1fr;gap:14px; }.contact-form input,.contact-form textarea { width:100%;appearance:none;border:1px solid rgba(245,243,237,.34);border-radius:0;background:rgba(245,243,237,.06);padding:12px;color:var(--paper);font:14px 'DM Sans';outline:none;resize:vertical;transition:border-color .2s,background .2s; }.contact-form textarea { min-height:88px; }.contact-form input:focus,.contact-form textarea:focus { border-color:var(--lime);background:rgba(201,255,45,.08); }.contact-form textarea::placeholder { color:#9da69b; }.form-footer { display:flex;align-items:center;gap:18px; }.button-light { position:relative;z-index:1;background:var(--lime);color:var(--ink);border:0;cursor:pointer; }.button-light:disabled { opacity:.65;cursor:wait; }.form-status { margin:0;color:#c3c8c0;font-size:13px;line-height:1.4; }.cta-orbit { position:absolute;width:590px;height:590px;right:-40px;top:50%;border:1px solid rgba(245,243,237,.38);border-radius:50%;transform:translateY(-50%); }.cta-orbit:before,.cta-orbit:after { content:'';position:absolute;border:1px solid rgba(245,243,237,.25);border-radius:50%;inset:80px -105px;transform:rotate(60deg); }.cta-orbit:after { transform:rotate(-45deg); }
footer { padding:28px clamp(22px,4.2vw,64px); display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:12px; }.footer-links { display:flex;gap:25px;font-weight:500; }.footer-links a { border-bottom:1px solid var(--line);padding-bottom:2px; }footer p { margin:0;color:var(--muted); }
@media (max-width:760px) { .site-header{height:68px}.desktop-nav,.header-cta{display:none}.desktop-nav.menu-open{display:flex;position:absolute;top:67px;left:0;right:0;margin:0;padding:22px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;gap:18px}.menu-button{display:block}.hero{min-height:690px;padding-top:55px}.hero h1{margin:36px 0 45px;line-height:.9}.hero-bottom{display:block}.hero-bottom p{font-size:15px}.hero-actions{margin-top:25px;gap:20px}.hero-art{width:145%;height:290px;right:-75px;bottom:-3px;opacity:.72}.section{padding-top:85px;padding-bottom:85px}.section-heading{display:block}.section-heading>p{margin-top:25px}.product-grid{grid-template-columns:1fr;margin-top:40px}.product-card{height:340px}.statement{padding-top:80px;padding-bottom:75px}.statement-body{margin:35px 0 55px}.principles{grid-template-columns:1fr}.principles>div,.principles>div+div{padding:23px 0;border-left:0;border-bottom:1px solid var(--line)}.principles h3{margin:20px 0 8px}.cta-section{padding-top:83px;padding-bottom:83px}.form-row{grid-template-columns:1fr}.form-footer{align-items:flex-start;flex-direction:column}.cta-orbit{width:390px;height:390px;right:-190px;opacity:.6}footer{display:grid;gap:22px}.footer-links{order:3;flex-direction:column;gap:12px} }
@media (max-width:760px) { .products .product-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .hero-art { position:relative; width:100%; height:250px; right:auto; bottom:auto; margin-top:40px; transform:none; } .api-chip-request { left:6%; } .api-chip-response { right:6%; } }
@media (max-width:760px) { .product-card-featured { height:475px; } .product-card-featured .api-card-art { top:18%; } }

/* Honeypot — hidden from users, catches bots */
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Stat strip */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); padding:0 clamp(22px,7.9vw,120px); border-bottom:1px solid var(--line); }
.stat-strip > div { padding:34px 0; display:flex; flex-direction:column; gap:7px; }
.stat-strip > div + div { border-left:1px solid var(--line); padding-left:30px; }
.stat-strip b { font-size:clamp(30px,3.4vw,42px); font-weight:600; letter-spacing:-.05em; line-height:1; }
.stat-strip span { font:10px 'DM Mono'; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

/* Product badges */
.card-top { justify-content:flex-start; gap:10px; align-items:center; }
.card-top .arrow { margin-left:auto; }
.badge { font:9px 'DM Mono'; letter-spacing:.08em; padding:3px 6px; background:var(--lime); color:var(--ink); }
.badge-soon { background:transparent; border:1px solid currentColor; color:inherit; }

/* Form consent */
.form-consent { margin:15px 0 0; font-size:12px; line-height:1.4; color:#9da69b; }
.form-consent a { border-bottom:1px solid rgba(245,243,237,.4); }

@media (max-width:760px) {
  .stat-strip { grid-template-columns:1fr 1fr; }
  .stat-strip > div { padding:24px 0; border-left:0; padding-left:0; }
  .stat-strip > div:nth-child(2n) { border-left:1px solid var(--line); padding-left:22px; }
  .stat-strip > div:nth-child(n+3) { border-top:1px solid var(--line); }
}