/* Reference palette: Stitch / Exohive Cybernetic. */
:root {
  --dark: #0f131c;
  --dark-950: #0a0e17;
  --dark-900: #0f131c;
  --dark-800: #181b25;
  --orange: #f5a623;
  --blue: #0088e8;
  --ink: #f8fafc;
  --muted: #a6b2c5;
  --line: #ffffff14;
  --radius-lg: 16px;
  --radius-xl: 24px;
}
body { background: #0a0e17; }
body::after { display: none; }
h1,h2,h3,.eyebrow { letter-spacing: 0 !important; }
.site-header { top: 0; margin-top: 0; background: #0a0e17e8; border-bottom: 1px solid #ffffff14; backdrop-filter: blur(16px); }
.nav-shell { border: 0; border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; padding-block: 8px; }
.brand img { width: 130px; }
.site-nav { font-size: 12px; gap: 0; }
.site-nav a { border-radius: 4px; }
.site-nav a[aria-current=page] { color: #66c4ff; background: #0088e812; box-shadow: none; }
.button { background: #0088e8; border-color: #0088e8; color: white; border-radius: 8px; box-shadow: inset 0 1px 0 #ffffff20; }
.button:hover { background: #1598f4; box-shadow: 0 8px 28px #0088e826; }
.button-secondary { background: transparent; border-color: #ffffff25; color: #c0c7d4; }
.button-secondary:hover { background: #ffffff08; }
.studio-home { background: #0a0e17; }
.studio-hero { padding-top: 75px; gap: 64px; }
.studio-intro .eyebrow { border: 1px solid #0088e83f; background: #0088e80c; padding: 7px 10px; border-radius: 4px; font-size: 10px; }
.studio-intro h1 { font-size: 64px; font-weight: 700; }
.studio-intro h1 em { color: #4cd7f6; }
.studio-intro p { color: #94a3b8; font-size: 17px; }
.studio-intro > .button { background: #f5a623; color: #161c25; border-color: #f5a623; }
.system-stage { border-top-color: #0088e857; background: #11182780; padding: 22px; border: 1px solid #0088e830; border-radius: 16px; }
.system-node { border-radius: 6px; background: #0d131f; border-color: #ffffff14; min-height: 74px; }
.system-node[aria-pressed=true] { color: #4cd7f6; border-color: #0088e8; background: #0088e818; }
.browser-bar { background: #1c2533; }
.browser-body { background: #101e2e; color: #dfeafa; }
.browser-body small { color: #4cd7f6; }
.demo-action { color: #ffb955; }
.demo-grid i { background: #0088e84d; border: 1px solid #0088e8; }
.demo-grid i:nth-child(2) { background: #f5a62333; }
.demo-grid i:nth-child(3) { background: #06b6d433; }
.hero-baseline { color: #74849b; border-top-color: #ffffff12; }
.goal-section { color: #f8fafc; background: #0f1622; border-block: 1px solid #ffffff12; }
.goal-section .eyebrow { color: #4cd7f6; }
.goal-options button { border-color: #ffffff14; color: #94a3b8; }
.goal-options button:last-child { border-color: #ffffff14; }
.goal-options button[aria-pressed=true] { color: #ffb955; }
.goal-result p { color: #94a3b8; }
.goal-result li { border-color: #ffffff10; }
.goal-result .text-link { color: #7dc9ff; }
.goal-result { border-left: 2px solid #0088e8; padding-left: 28px; }
.studio-work { padding-top: 80px; }
.work-showcase { border-color: #ffffff16; }
.product-demo { background: #111827; }
.route-map { border: 1px solid #0088e830; border-radius: 8px; }
.project-modes button[aria-pressed=true] { background: #0088e822; color: #4cd7f6; border-color: #0088e8; }
.principle-steps > div { border-color: #0088e855; }
.page-hero { background: linear-gradient(110deg,#0f131c,#0d1b2d); padding-top: 80px; }
.page-hero h1 { font-size: 56px; line-height: 1.12; max-width: 950px; }
.feature-card,.build-card,.case-card,.insight-card,.contact-aside { background: #111827b3; border-color: #ffffff14; box-shadow: none; backdrop-filter: none; }
.feature-card:hover,.build-card:hover,.case-card:hover,.insight-card:hover { background: #161f30; border-color: #0088e855; }
.work-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.work-filters button { cursor: pointer; border: 1px solid #ffffff19; background: transparent; color: #94a3b8; border-radius: 6px; padding: 10px 17px; }
.work-filters button[aria-pressed=true] { background: #0088e81c; color: #a1c9ff; border-color: #0088e8; }
.filter-count { font-size: 12px; margin: 20px 0; color: #77869b; }
.project-planner { border: 1px solid #0088e833; border-radius: 12px; padding: 24px; margin: 0 0 20px; background: #111827; min-width: 0; }
.project-planner legend { color: #4cd7f6; padding: 0 8px; font-size: 12px; }
.planning-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0; }
.planning-options label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid #ffffff18; border-radius: 6px; font-size: 12px; cursor: pointer; }
.planning-options label:has(:checked) { border-color: #0088e8; background: #0088e814; }
.planning-options input { width: 16px; min-height: 16px; accent-color: #0088e8; }
.brief-summary { display: block; font-size: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid #ffffff14; color: #ffb955; }
.contact-form select option { background: #101827; color: #f8fafc; }
.footer-cta { background: transparent; border: 0; border-bottom: 1px solid #ffffff14; border-radius: 0; padding: 0 0 40px; flex-wrap: wrap; }
.footer-cta .eyebrow { flex-basis: 100%; margin: 0; }
.footer-cta h2 { font-size: 40px; }
.site-footer { background: #080d16; }
@media(max-width:1080px) { .studio-hero { gap: 30px; }.studio-intro h1 { font-size: 52px; }.nav-shell { border-radius: 0; }.site-nav[data-open] { background: #111827; } }
@media(max-width:700px) { .studio-intro h1 { font-size: 42px; }.studio-hero { padding-top: 32px; }.system-stage { padding: 15px; }.page-hero h1 { font-size: 36px; }.page-hero { padding-top: 50px; }.goal-result { padding-left: 18px; }.planning-options { grid-template-columns: 1fr; }.project-planner { padding: 16px; }.footer-cta h2 { font-size: 32px; } }
/* Mobile navigation: grouped icon, clear open state and compact link panel. */
.nav-toggle .nav-menu-icon{flex:none;color:#70c8f5;overflow:visible}
.nav-menu-icon path{transform-origin:12px 12px;transition:transform 180ms ease,opacity 180ms ease}
.nav-toggle[aria-expanded=true] .menu-line-top{transform:translateY(6px) rotate(45deg);transform-origin:12px 6px}
.nav-toggle[aria-expanded=true] .menu-line-middle{opacity:0}
.nav-toggle[aria-expanded=true] .menu-line-bottom{transform:translateY(-6px) rotate(-45deg);transform-origin:12px 18px}
@media(max-width:1080px){
 .nav-shell .nav-toggle{min-width:92px;min-height:46px;justify-content:center;gap:9px;padding:10px 13px;border-radius:10px;background:#122130;border:1px solid #355169;cursor:pointer;box-shadow:none}
 .nav-toggle strong{margin:0;font-size:12px;font-weight:600;letter-spacing:.2px}
 .nav-shell .nav-toggle:hover,.nav-shell .nav-toggle[aria-expanded=true]{background:#173047;border-color:#4d99db}
 .nav-toggle:focus-visible{outline:2px solid #fcb03b;outline-offset:4px}
 .nav-shell .site-nav[data-open]{gap:2px;margin:8px 0 4px;padding:10px;border-radius:14px;background:#101c29;border:1px solid #294255;max-height:calc(100dvh - 110px);overflow-y:auto;box-shadow:0 16px 35px #0005;animation:nav-enter 180ms ease-out}
 .nav-shell .site-nav a{font-size:14px;line-height:1.3;min-height:44px;padding:13px 14px;border-radius:7px;display:flex;align-items:center;justify-content:space-between}
 .nav-shell .site-nav a[aria-current=page]{color:#84d6ff;background:#1a354b;box-shadow:none}
 .nav-shell .site-nav a[aria-current=page]::after{content:'';width:6px;height:6px;border-radius:50%;background:#fcb03b}
 .nav-shell .site-nav .connected-link{margin-top:8px;padding-top:16px;border-top:1px solid #294255;border-radius:0;color:#8dc9ed;font-size:12px}
}
@keyframes nav-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.nav-menu-icon path{transition:none}.nav-shell .site-nav[data-open]{animation:none}}

.context-service-link{color:#9ad6fb;text-decoration:underline;text-underline-offset:3px}.context-service-link:hover{color:#fff}