/* Shared interaction layer: content remains readable without JavaScript. */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --anchor-offset: 100px; }
html { scroll-padding-top: var(--anchor-offset); }
main section[id] { scroll-margin-top: 16px; }
button { cursor: pointer; }
.hero-grid > *, .service-hero-grid > *, .section-head > *, .product, .step > *, .service-step > * { min-width: 0; }
h1,h2,h3 { overflow-wrap: break-word; }
.service-main { overflow: visible; }
.desktop-nav a:not(.nav-cta) { position: relative; border: 0; }
.desktop-nav a:not(.nav-cta)::after { content: ''; position: absolute; inset: auto 0 0; height: 2px; background: var(--black); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after { transform: scaleX(1); }
.mobile-nav a[aria-current]:not(.nav-cta) { color: #007e53; }
.btn,.nav-cta { transition: background 180ms, color 180ms, border-color 180ms, transform 180ms; }
.btn:active,.nav-cta:active { transform: translateY(2px); }
.action-arrow { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 220ms var(--ease-out); }
.external-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.proof-value .external-icon { width: .85em; height: .85em; }
.text-link::after { content: ''; width: 16px; height: 16px; flex: none; background: #00b978; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
a:hover .action-arrow,a:focus-visible .action-arrow { transform: translateX(4px); }
.service-row:hover { padding-inline: 0; }
.whatsapp-float::before { content: none; }
.contact-icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
body.menu-open .whatsapp-float { visibility: hidden; }
.whatsapp-float.is-obscured { visibility: hidden; pointer-events: none; }
.flow-node,.technical-node { color: inherit; text-align: left; background: transparent; border-top: 0; border-bottom: 0; border-left: 0; font: inherit; transition: background 200ms, box-shadow 200ms; }
.flow-node:hover,.technical-node:hover { background: #17171c; }
.flow-node[aria-pressed=true],.technical-node[aria-pressed=true] { background: #17171c; box-shadow: inset 0 -3px var(--green); }
.technical-node .line-icon { display: inline-flex; margin-top: 0; color: var(--green); }
.technical-node > span:not(.line-icon) { margin-top: 3rem; }
.flow-node strong,.technical-node strong { overflow-wrap: anywhere; }
.system-flow,.technical-flow,.console-flow { position: relative; }
.flow-node:not(:last-child)::after,.technical-node:not(:last-child)::after { display: none; }
.motion-rail { position: absolute; z-index: 3; background: #35353b; pointer-events: none; }
.motion-fill { display: block; width: 100%; height: 100%; background: var(--green); transform-origin: left top; transform: scaleX(0); }
.motion-cursor { position: absolute; left: -5px; top: -5px; width: 12px; height: 12px; border: 2px solid var(--black); background: var(--green); box-shadow: 0 0 0 4px rgba(0,245,160,.12); }
.console-flow .motion-rail { background: var(--grid); }
.console-flow .motion-fill { background: #009864; }
.console-flow .motion-cursor { border-color: var(--white); background: #009864; box-shadow: 0 0 0 3px rgba(0,152,100,.12); }
.flow-player { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0 1.25rem; }
.flow-stage,.demo-step-label { font: 500 .65rem/1.5 var(--mono); letter-spacing: .05em; }
.flow-stage { color: var(--green); }
.motion-replay { min-height: 44px; padding: .6rem .8rem; color: inherit; background: transparent; border: 1px solid currentColor; font: 500 .65rem/1.3 var(--mono); text-transform: uppercase; }
.motion-replay:hover { color: #009864; }
.flow-player .motion-replay:hover { color: var(--green); }
.flow-detail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; min-height: 172px; padding: 2rem; border: 1px solid #35353b; border-top: 0; background: #111114; }
.flow-detail p { margin: .7rem 0 0; color: #c2c2c8; font-size: .92rem; }
.flow-detail span,.flow-hint { color: var(--interface); font: 500 .65rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flow-hint { margin: 0 0 1rem; }
.product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.product:nth-child(n) { grid-column: auto; }
.product { min-height: 0; display: grid; grid-template-rows: auto 178px auto 1fr auto; gap: 1.4rem; padding: 1.75rem; }
.product h3 { margin: 0; font-size: clamp(2rem,3vw,3rem); line-height: 1; }
.product p { margin: 0; min-height: 0; }
.product-code { padding-right: 1rem; line-height: 1.6; }
.product-signal { top: 1.9rem; right: 1rem; }
.product-preview { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .65rem; color: var(--steel); font: .62rem/1.4 var(--mono); }
.product-preview > span { letter-spacing: .07em; }
.product-preview svg { width: 100%; height: 88px; overflow: visible; }
.preview-trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.preview-play { position: absolute; right: 0; top: -4px; font-size: .58rem; color: var(--steel); }
.preview-row { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding: .6rem .65rem; border: 1px solid var(--grid); background: var(--white); }
.preview-row b { color: #007e53; font-weight: 500; }
.preview-progress,.node-workbar { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: #009864; transform-origin: left; }
.node-workbar { transform: scaleX(0); }
.process-statement,.method-intro { position: sticky; top: 120px; align-self: start; }
.step,.service-step { position: relative; transition: box-shadow 250ms, background 250ms; }
.step.is-current,.service-step.is-current { box-shadow: inset 3px 0 #00b978; background: rgba(0,185,120,.045); }
.step::before,.service-step::before { padding-left: .65rem; }
.method-progress { display: block; margin-top: 2rem; color: #007e53; font: 500 .68rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
details { overflow: visible; }
.demo-controls { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: 1rem; }
.demo-choice { flex: 1 1 auto; min-height: 44px; padding: .5rem .6rem; border: 1px solid var(--grid); background: transparent; font: 500 .64rem/1.4 var(--mono); }
.demo-choice[aria-pressed=true] { color: var(--white); background: var(--black); border-color: var(--black); }
.demo-note { margin: .75rem 0 0; color: var(--steel); font: .62rem/1.5 var(--mono); }
.demo-run { width: 100%; margin-top: 1rem; }
.console-bar { flex-wrap: wrap; }
.console-node { grid-template-columns: 36px minmax(0,1fr); gap: .75rem; min-height: 106px; padding: .8rem .8rem .8rem 1.35rem; transition: border-color 250ms, background 250ms; }
.console-node .line-icon { width: 36px; height: 36px; }
.console-node .node-code { display: none; }
.console-node.is-current { border-color: #00a96f; background: #e3f7ed; }
.console-node.is-complete { box-shadow: inset 3px 0 #00a96f; }
.console-node+.console-node::before { display: none; }
.demo-step-label { min-height: 3em; margin: 1rem 0 0; color: #007e53; }
.console-result { min-height: 110px; }
.service-hero h1 { font-size: clamp(2.5rem,5.25vw,5.3rem); }
.system-console { margin-block: 3rem; }
@media(min-width:761px) and (max-width:1100px) {
  .menu-button { display: block; flex: none; }
  .desktop-nav { margin-left: auto; }
  .brand-code { display: none; }
}
@media(max-width:1100px) {
  .mobile-nav { display: flex; position: absolute; inset: 76px 0 auto; height: calc(100svh - 76px); width: 100%; z-index: 99; flex-direction: column; padding: 1.5rem 24px; background: var(--white); transform: translateX(100%); visibility: hidden; transition: transform 280ms var(--ease-out), visibility 280ms; overflow-y: auto; }
  .mobile-nav.open { transform: none; visibility: visible; }
  .mobile-nav a { padding: 1rem 0; border-bottom: var(--border); font: 500 1.4rem var(--display); }
  .mobile-nav .nav-cta { margin-top: auto; padding: 1rem; font: 500 .75rem var(--mono); }
  .service-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); gap: 2rem; }
  .product { padding: 1.25rem; }
  .step,.service-step { grid-template-columns: 42px 1fr; }
  .step p,.service-step p { grid-column: 2; }
}
@media(max-width:760px) {
  :root { --anchor-offset: 84px; }
  .mobile-nav { top: 68px; height: calc(100svh - 68px); padding-inline: 20px; }
  .mobile-nav a { font-size: 1.3rem; }
  .hero h1 { font-size: clamp(2.55rem,12.3vw,4.5rem); }
  .service-hero h1 { font-size: clamp(2rem,8.7vw,4rem); }
  .section-head h2,.founder-copy h2,.faq-title,.service-faq h2 { font-size: clamp(2rem,10vw,4rem); }
  .service-row h3 { font-size: clamp(1.35rem,6vw,2rem); }
  .contact h2,.service-cta h2 { font-size: clamp(2.1rem,10.8vw,4.6rem); }
  .service-hero-grid { grid-template-columns: minmax(0,1fr); }
  .service-hero-copy { padding-top: 3.5rem; }
  .product-grid { grid-template-columns: minmax(0,1fr); }
  .product { padding: 1.5rem; gap: 1.5rem; grid-template-rows: auto 178px auto auto auto; }
  .product h3 { font-size: 2.5rem; }
  .flow-detail { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.5rem; min-height: 330px; }
  .system-flow,.technical-flow { grid-template-columns: minmax(0,1fr); }
  .flow-node,.technical-node { min-height: 100px; border-bottom: 1px solid #35353b; border-right: 0; padding: 1rem 1rem 1rem 3rem; }
  .flow-node strong { margin-top: .5rem; }
  .technical-node { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: .5rem 1rem; align-content: center; }
  .technical-node .line-icon { grid-row: 1/3; align-self: center; }
  .technical-node > span:not(.line-icon),.technical-node strong { margin-top: 0; }
  .flow-player { flex-wrap: wrap; }
  .process-statement,.method-intro { position: static; }
  .system-console { margin: 0 0 4rem; padding: 1rem; }
  .console-result { min-height: 0; }
  .console-node strong { font-size: .88rem; }
  .whatsapp-float { min-width: 46px; justify-content: center; bottom: max(1rem,env(safe-area-inset-bottom)); }
  footer { padding-bottom: 6rem; }
  .contact-meta,.footer-bottom { overflow-wrap: anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .motion-cursor { box-shadow: none; }
}