:root {
  --paper:#f5f5f0; --panel:#eceee9; --ink:#18272c; --secondary:#42585e; --slate:#53747d;
  --dark:#3c4f54; --copper:#ac4d00; --mist:#a1b4b9; --line:#c9d1ce; --white:#fff;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
*,*::before,*::after { box-sizing:border-box }
[hidden] { display:none !important }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
a { color:inherit }
img { display:block; max-width:100%; height:auto }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
:focus-visible { outline:3px solid #d98849; outline-offset:4px }
h1,h2,h3,p,figure,dl,dd { margin:0 }
h1,h2,h3 { font-weight:700; letter-spacing:-.057em }
h1 { font-size:clamp(4.1rem,9vw,9rem); line-height:.87 }
h2 { font-size:clamp(2.75rem,5.35vw,5.35rem); line-height:.96 }
h1 > span,h2 > span { color:var(--copper) }
h3 { font-size:1.78rem; line-height:1.05; letter-spacing:-.039em }
p { line-height:1.55 }
.wrap { width:min(100% - 112px,1320px); margin-inline:auto }
.skip { position:absolute; top:8px; left:12px; z-index:5; padding:.65rem; color:var(--ink); background:white; transform:translateY(-200%) }
.skip:focus { transform:none }
.header { background:var(--dark); color:var(--white) }
.nav-shell { min-height:80px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px }
.brand { text-decoration:none; justify-self:start }
.brand-image { width:196px; height:auto }
.wordmark { display:inline-flex; align-items:center; gap:.48em; color:var(--slate); font-size:1.6rem; font-weight:700; letter-spacing:-.04em; line-height:.92 }
.wordmark img { width:1.17em; flex:none }
.wordmark .works { color:var(--copper) }
.wordmark.solid .works { color:inherit }
.wordmark.stack .works { display:block; margin-top:.055em }
nav { display:flex; gap:clamp(17px,2.5vw,40px); align-items:center }
nav a { position:relative; text-decoration:none; font-size:.91rem; font-weight:500; white-space:nowrap; color:#eff3f2 }
nav a[aria-current=page]::after,nav a:hover::after { content:""; position:absolute; height:2px; width:100%; left:0; bottom:-8px; background:#e5a36f }
.nav-cta { justify-self:end; display:inline-flex; gap:.85em; text-decoration:none; align-items:center; padding:.8em 1em; border:1px solid #98adb1; font-size:.87rem; white-space:nowrap }
.nav-cta:hover { background:#4c646a }
.kicker { display:flex; align-items:center; gap:10px; font:600 .69rem/1.4 var(--mono); color:var(--secondary); text-transform:uppercase; letter-spacing:.14em }
.kicker > span { width:8px; height:8px; flex:none; background:var(--copper) }
.hero { position:relative; padding:72px 0 55px; background:radial-gradient(ellipse at 86% 5%,#e5eae7 0%,transparent 55%) }
.hero-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr); align-items:center; gap:clamp(22px,4.5vw,85px) }
.hero h1 { margin:25px 0 29px }
.hero-copy > p:not(.kicker),.interior-hero > p:not(.kicker) { max-width:42ch; font-size:clamp(1.03rem,1.5vw,1.25rem); color:var(--secondary) }
.actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:30px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:1.25em; padding:.98em 1.12em; min-height:48px; background:var(--copper); color:white; border:1px solid transparent; text-decoration:none; font-size:.95rem; font-weight:700 }
.button:hover { background:#833900 }
.button.outline { background:transparent; border-color:#849b9e; color:var(--ink) }
.button.outline:hover { background:#e1e8e4 }
.button.light { background:#eef0e9; color:#23383c }
.button.light:hover { background:white }
.hero-figure { position:relative; box-shadow:0 20px 50px #20383c20; background:#17272c; border:1px solid #263a40 }
.hero-figure img { width:100% }
.hero-figure figcaption { display:flex; justify-content:space-between; gap:10px; padding:15px 17px; color:#c7d6d8; background:#1c2e33; font: .65rem/1.4 var(--mono); letter-spacing:.12em }
.hero-figure figcaption span:first-child { color:#f0f4f4 }
.hero-figure i { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#f6af74 }
.index-strip { display:flex; justify-content:space-between; align-items:center; gap:14px; border-block:1px solid var(--line); padding:16px 0; font:.68rem/1.4 var(--mono); letter-spacing:.09em; color:var(--secondary) }
.index-strip a { text-underline-offset:3px }
.section { padding-block:100px }
.section-intro h2,.walkthrough h2 { margin-top:16px }
.section-intro > p:not(.kicker) { max-width:55ch; margin-top:20px; color:var(--secondary); font-size:1.08rem }
.service-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:42px; border-block:1px solid var(--line) }
.service { position:relative; padding:26px 27px 28px; border-left:1px solid var(--line); min-height:198px }
.service:first-child { border-left:0; padding-left:0 }
.service-id,.step-no { display:block; color:var(--copper); font:.72rem/1.4 var(--mono); letter-spacing:.12em }
.service h3 { margin-top:27px }
.service p { margin-top:13px; max-width:34ch; color:var(--secondary) }
.service-icon { position:absolute; top:24px; right:24px; width:25px; height:25px; background:currentColor; color:var(--slate) }
.service-icon.agent { clip-path:polygon(0 0,45% 0,45% 65%,0 65%,0 74%,45% 74%,45% 100%,0 100%,0 0,55% 0,100% 0,100% 27%,55% 27%,55% 36%,100% 36%,100% 100%,55% 100%,55% 0) }
.service-icon.app { background:none; border:2px solid; border-radius:2px }
.service-icon.app::before { content:""; position:absolute; top:5px; left:0; right:0; border-top:2px solid }
.service-icon.game { transform:rotate(45deg) scale(.74); border-radius:2px; background:none; border:2px solid }
.service-icon.game::before { content:""; position:absolute; inset:5px; background:var(--copper) }
.feature { background:#21363b; color:var(--white); padding-block:84px }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,7vw,110px) }
.feature .kicker,.cta .kicker { color:#d3e1e1 }
.feature .kicker > span,.cta .kicker > span { background:#e9a16a }
.feature h2,.cta h2 { margin-block:16px }
.feature h2 > span { color:#f0ac75 }
.feature p:not(.kicker) { color:#dce5e4; max-width:43ch; margin-bottom:24px }
.feature-list { border-top:1px solid #6b8287 }
.feature-list > div { display:grid; grid-template-columns:44px 1fr; gap:16px; padding:21px 0; border-bottom:1px solid #6b8287 }
.feature-list dt { color:#f0ac75; font:.78rem/1.7 var(--mono) }
.feature-list dd strong,.feature-list dd span { display:block }
.feature-list dd strong { font-size:1.22rem; margin-bottom:4px }
.feature-list dd span { color:#dce5e4; line-height:1.45 }
.cta { background:var(--dark); color:white; padding-block:62px }
.cta-inner { display:flex; gap:24px; justify-content:space-between; align-items:center }
.cta h2 { font-size:clamp(2.25rem,4.5vw,4rem) }
.cta p:not(.kicker) { color:#e0e8e8; max-width:56ch }
.cta .button { flex:none }
.footer { background:var(--paper); border-top:1px solid var(--line); padding-block:30px; color:var(--secondary) }
.foot-grid { display:flex; gap:20px 28px; flex-wrap:wrap; align-items:center; font-size:.88rem }
.foot-grid > p { flex:1; min-width:230px }
.foot-grid a:not(.brand) { text-underline-offset:3px }
.interior-hero { padding-block:76px 62px }
.interior-hero h1 { font-size:clamp(3.3rem,8.4vw,7.8rem); margin:17px 0 23px }
.interior-hero > p:not(.kicker) { max-width:60ch }
.interior-hero > .button { margin-top:24px }
.walkthrough { background:var(--panel); border-block:1px solid var(--line) }
.walkthrough-controls { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 16px }
.walkthrough-controls button { color:var(--ink); border:1px solid #879b9c; padding:.7em .95em; background:var(--paper); text-align:left }
.walkthrough-controls button[aria-pressed=true] { background:var(--dark); border-color:var(--dark); color:white }
.walkthrough-controls button:hover:not([aria-pressed=true]) { background:#dce3df }
.walk-panel { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(22px,6vw,84px); align-items:center; margin-top:18px }
.walk-panel figure { align-self:start }
.walk-panel figure img { width:100% }
.walk-panel figcaption { margin-top:8px; color:var(--secondary); font:.73rem/1.45 var(--mono) }
.walk-panel h3 { font-size:clamp(2rem,3.7vw,3.4rem); margin:12px 0 }
.walk-panel p { max-width:39ch; color:var(--secondary) }
.walk-panel p.example-note { margin-top:24px; border-left:2px solid var(--copper); padding-left:11px; font-size:.91rem }
.about-process { border-top:1px solid var(--line) }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,95px); padding-block:72px 100px }
.contact-intro { padding-block:0 }
.email-link { display:inline-block; margin-top:23px; font-weight:700; color:#8d410a; text-underline-offset:4px; overflow-wrap:anywhere }
.contact-form { background:var(--panel); border:1px solid var(--line); padding:clamp(20px,3.25vw,48px) }
.contact-form h2 { font-size:clamp(1.8rem,3.5vw,2.9rem); margin-bottom:25px }
.contact-form label { display:block; font-size:.91rem; font-weight:600; margin-bottom:17px }
.contact-form input,.contact-form select,.contact-form textarea { width:100%; margin-top:7px; color:var(--ink); background:#fcfcf9; border:1px solid #8fa1a1; border-radius:0; padding:11px; font-size:1rem }
.contact-form textarea { resize:vertical }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.form-help { margin-top:12px; font-size:.86rem; color:var(--secondary) }
.muted { color:var(--secondary); font-weight:400 }
.logo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:30px }
.logo-card { border:1px solid var(--line); min-width:0 }
.logo-stage { display:grid; place-items:center; min-height:190px; padding:20px; background:#ecefe9 }
.logo-stage img.brand-image { width:min(100%,290px) }
.logo-stage.reversed { background:var(--dark) }
.logo-stage .wordmark { font-size:clamp(1.1rem,2.6vw,2.6rem) }
.logo-meta { padding:18px }
.logo-meta > span,.swatches { font:.69rem/1.4 var(--mono); color:var(--secondary) }
.logo-meta h2 { font-size:1.6rem; margin:8px 0 }
.logo-meta p { color:var(--secondary); font-size:.91rem }
.swatches { display:flex; flex-wrap:wrap; gap:24px; margin-bottom:72px }
.swatches > div { display:flex; align-items:center; gap:7px }
.swatches i { width:35px; height:30px; border:1px solid #15252735 }
@media (max-width:1060px) {
  .wrap { width:calc(100% - 64px) }
  .nav-shell { gap:17px }
  .brand-image { width:171px }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 36px) }
  .nav-shell { min-height:auto; grid-template-columns:1fr auto; padding-block:13px 17px; gap:15px 9px }
  nav { grid-row:2; grid-column:1/-1; justify-content:space-between; gap:6px }
  nav a { font-size:.84rem }
  nav a[aria-current=page]::after,nav a:hover::after { bottom:-6px }
  .nav-cta { padding:.63em .67em; font-size:.77rem }
  .hero { padding:48px 0 31px }
  .hero-grid,.feature-grid,.walk-panel,.contact-grid { grid-template-columns:1fr }
  .hero-grid { gap:30px }
  .hero h1 { font-size:clamp(4rem,14vw,6.6rem); margin:17px 0 20px }
  .index-strip { padding-block:10px }
  .index-strip > span:nth-child(2) { display:none }
  .section,.feature { padding-block:57px }
  .service-list { grid-template-columns:1fr; margin-top:26px }
  .service,.service:first-child { padding:20px 39px 22px 0; border-left:none; min-height:0 }
  .service + .service { border-top:1px solid var(--line) }
  .service h3 { margin-top:12px }
  .service-icon { right:4px }
  .cta { padding-block:42px }
  .cta-inner { align-items:flex-start; flex-direction:column }
  .interior-hero { padding-block:50px 42px }
  .contact-grid { padding-block:38px 54px; gap:20px }
  .contact-intro { padding-block:0 }
  .logo-grid { grid-template-columns:1fr }
  .logo-stage .wordmark { font-size:2.45rem }
}
@media (max-width:380px) {
  .brand-image { width:147px }
  .form-row { grid-template-columns:1fr; gap:0 }
  .hero-figure figcaption { font-size:.57rem }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto } }
.logo-stage.original { padding:0; grid-template-rows:1fr 1fr }
.logo-stage.original > div { width:100%; height:100%; display:grid; place-items:center; padding:12px 20px }
.logo-stage .reversed { background:var(--dark) }

.demo-section { background:#21363b; color:var(--white) }
.demo-wrap { padding-block:clamp(36px,6vw,86px) }
.demo-heading { display:grid; grid-template-columns:1fr minmax(225px,31%); align-items:end; gap:24px; margin-bottom:28px }
.demo-heading h2 { margin-top:14px }
.demo-heading h2 > span { color:#efa977 }
.demo-heading .kicker { color:#d3e1e1 }
.demo-heading .kicker > span { background:#e9a16a }
.demo-heading > p,.demo-transcript > p { color:#e0e9e8 }
.demo-player { background:#182a2f; border:1px solid #648186 }
.demo-player video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#182a2f }
.demo-player figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px 16px; padding:12px 16px; color:#d3e1e1; border-top:1px solid #648186; font:.68rem/1.4 var(--mono); letter-spacing:.11em }
.demo-player figcaption i { display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#efa977 }
.demo-transcript { margin-top:13px; font-size:.9rem }
.demo-transcript summary { width:fit-content; padding:6px 0; cursor:pointer }
.demo-transcript > p { max-width:70ch; margin-top:6px }
@media (max-width:760px) {
  .demo-heading { grid-template-columns:1fr; gap:14px; margin-bottom:18px }
}