/* SYNAPTEN v2 · page styles. The engine (scrollcraft.css) is untouched. */

:root {
  --sc-canvas:     #111416;
  --sc-surface:    #1A1E21;
  --sc-ink:        #E8ECEA;
  --sc-ink-soft:   #A3ADAE;
  --sc-accent:     #63B486;
  --sc-accent-ink: #0D1210;
  --sc-font-display: "Archivo", "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-shadow-color: 200 20% 2%;

  --signal: #5FA97E;


  --bar-h: 4rem;
}

.sc-display { font-variation-settings: "wdth" 108; font-weight: 560; }
:where(.btn, a, button):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0 1.25rem;
  border-radius: var(--sc-r-sm); border: 1px solid transparent;
  font-weight: 560; font-size: var(--sc-t-sm); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn--solid { background: var(--sc-ink); color: #111416; box-shadow: var(--sc-e1); }
.btn--accent { background: var(--sc-accent); color: var(--sc-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { background: #FFFFFF; }
  .btn--accent:hover { background: #74C496; }
}
.btn:active { transform: translateY(1px); }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom, rgb(10 12 13 / 0.72), rgb(10 12 13 / 0));
}
.bar__mark img { height: 2rem; width: auto; }

/* ---------------------------------------------------------------- copy -- */
.scrim {
  background:
    radial-gradient(70% 75% at 0% 100%, rgb(9 11 12 / 0.9) 0%, rgb(9 11 12 / 0.7) 38%, transparent 72%),
    radial-gradient(52% 70% at 100% 100%, rgb(9 11 12 / 0.86) 0%, rgb(9 11 12 / 0.62) 36%, transparent 70%),
    linear-gradient(to top, rgb(9 11 12 / 0.5) 0%, transparent 32%);
  opacity: var(--scrim, 1);
}
.blk { position: absolute; z-index: 1; max-width: min(36rem, 42vw); }
.blk--hero { left: calc(var(--sc-gutter) + 9.5rem); bottom: clamp(3rem, 12vh, 8rem); max-width: min(42rem, 52vw); }
.blk--lead { left: calc(var(--sc-gutter) + 9.5rem); bottom: clamp(3rem, 12vh, 8rem); }
.blk--trail { right: var(--sc-gutter); bottom: clamp(3rem, 12vh, 8rem); text-align: left; }
.blk--center { left: 0; right: 0; top: 50%; translate: 0 -50%; max-width: none; text-align: center; }
.hero__title { font-size: clamp(2.6rem, 1.4rem + 3.8vw, 5.4rem); max-width: 12ch; text-shadow: 0 2px 24px rgb(0 0 0 / 0.5); }
.blk__h { font-size: var(--sc-t-2xl); letter-spacing: var(--sc-track-snug); max-width: 14ch; text-shadow: 0 2px 20px rgb(0 0 0 / 0.5); }
.blk__p { margin: var(--sc-4) 0 var(--sc-5); font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink); max-width: 34ch; text-wrap: pretty; text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }
.spark { font-size: var(--sc-t-3xl); color: var(--sc-ink); text-shadow: 0 0 40px rgb(95 169 126 / 0.35); }

.chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .5rem; max-width: 34rem; }
.chips li {
  grid-column: span 2; display: grid; gap: .45rem;
  padding: .8rem .85rem; border-radius: 8px;
  background: rgb(17 24 26 / .95); border: 1px solid #b2cbc02e;
  color: #B9C4C2; font-variant-numeric: tabular-nums;
}
.chips li:nth-last-child(-n+2) { grid-column: span 3; }
.chips li > span { font-size: .76rem; }
.chips li > div { display: flex; align-items: baseline; gap: .35rem; white-space: nowrap; }
.chips b { color: var(--sc-ink); font-size: clamp(1.2rem,1.6vw,1.55rem); font-weight: 550; line-height: 1; letter-spacing: -.03em; }
.chips small { font-size: .68rem; }
.chips__note { margin: .6rem 0 0; color: #B9C4C2; font-size: .72rem; }

.sampling { max-width: 27rem; padding: .4rem; border: 1px solid #b2cbc03d; border-radius: 12px; background: rgb(17 24 26 / .96); }
.freq { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; }
.freq button {
  display: grid; justify-items: center; gap: .25rem; min-height: 4.4rem; padding: .65rem .5rem; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: #C1CECA;
  font: inherit; font-variant-numeric: tabular-nums;
  transition: background-color var(--sc-d-fast) var(--sc-ease-out);
}
.freq b { font-size: 1.55rem; font-weight: 550; line-height: 1.1; }
.freq span { font-size: .75rem; }
.freq button[aria-checked="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
.freq button:focus-visible { outline-offset: -3px; outline-color: var(--sc-ink); }
@media(hover:hover) { .freq button[aria-checked="false"]:hover { background: #e8ecea10; color: var(--sc-ink); } }
.sampling > p { margin: .65rem .55rem .45rem; font-size: .74rem; line-height: 1.5; color: #B9C4C2; }
.freq button:active { transform: translateY(1px); }

/* a dark pool behind the copy only, never over the whole frame. Siblings of
   the copy (not children), so the contrast pass measures them. */
.plate { position: absolute; z-index: 0; pointer-events: none; filter: blur(28px); opacity: 0;
  background: radial-gradient(closest-side, rgb(8 10 11 / 0.92), rgb(8 10 11 / 0.78) 55%, rgb(8 10 11 / 0) 100%); }
.plate--hero { left: var(--sc-gutter); bottom: -6vh; width: min(62rem, 72vw); height: 70vh; background: radial-gradient(closest-side, rgb(8 10 11 / 0.96), rgb(8 10 11 / 0.88) 60%, rgb(8 10 11 / 0) 100%); }
.plate--center { left: 20vw; right: 20vw; top: 30vh; height: 40vh; }
.plate--lead { left: calc(var(--sc-gutter) + 5rem); bottom: 0; width: min(48rem, 58vw); height: 54vh; }
.plate--trail { right: 0; bottom: 0; width: min(46rem, 56vw); height: 52vh; }

/* captions under the screen */
.cap { position: absolute; z-index: 1; left: var(--cap-x, 10%); top: var(--cap-y, 86%); width: var(--cap-w, 60%); display: flex; align-items: baseline; gap: var(--sc-5); }
.cap__h { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); white-space: nowrap; }
.cap p { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 62ch; }

/* ======================================================= SEMPRE CON TE == */
.diff { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; overflow: hidden; }
.diff__rail { display: flex; align-items: center; gap: 0; width: max-content; will-change: transform; }
.diff__rail > * { flex: none; opacity: calc(0.18 + 0.82 * var(--focus, 1)); transform: scale(calc(0.86 + 0.14 * var(--focus, 1))); transform-origin: 50% 55%; }
.diff__lead { width: min(44rem, 70vw); padding-inline: 6vw; }
.diff__h { font-size: var(--sc-t-3xl); max-width: 11ch; margin-bottom: var(--sc-5); }
.diff__lead p { margin: 0; font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 30ch; }
.cmp { width: min(76rem, 92vw); display: grid; grid-template-columns: auto minmax(0, 28rem); align-items: center; justify-content: center; gap: clamp(2rem, 5vw, 5.5rem); }
.cmp__phone { height: min(76svh, 46rem); width: auto; max-width: none; filter: drop-shadow(0 30px 50px rgb(0 0 0 / 0.55)) drop-shadow(0 0 60px rgb(77 195 255 / 0.08)); }
.cmp__text { display: grid; gap: var(--sc-4); }
.cmp__before { margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-base); line-height: 1.5; max-width: 34ch; }
.cmp__before span, .cmp__cap { display: block; margin-bottom: 0.4rem; font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; }
.cmp__before span { color: color-mix(in oklab, var(--sc-ink-soft) 75%, transparent); }
.cmp__after { font-size: var(--sc-t-2xl); line-height: 1.04; letter-spacing: var(--sc-track-snug); max-width: 15ch; padding-top: var(--sc-4); border-top: 1px solid rgb(95 169 126 / 0.45); }
.cmp__cap { margin: 0; display: flex; align-items: center; gap: 0.5rem; color: var(--sc-accent); }
.cmp__cap::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgb(95 169 126 / 0.18); }
.diff__end { width: min(40rem, 80vw); padding-inline: 6vw; margin: 0; font-size: var(--sc-t-2xl); line-height: 1.1; max-width: none; }
.diff__line { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(1.5rem, 5vh, 3rem); height: 1px; background: rgb(232 236 234 / 0.14); }
.diff__line i { position: absolute; inset: 0; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }

.sc-world, .sc-world__copy { transition: opacity 220ms ease; }
.is-form-area .sc-world, .is-form-area .sc-world__copy { opacity: 0; pointer-events: none; }
.is-after-flight .sc-world, .is-after-flight .sc-world__copy { visibility: hidden; }

/* ================================================ IMPLEMENTATION PAGE == */
.btn--ghost { background: transparent; color: var(--sc-ink); border-color: rgb(232 236 234 / 0.25); }
.impl { position: relative; z-index: calc(var(--sc-z-chrome) + 2); width: 100%; min-height: 100svh; margin: 0; padding: 0; border: 0;
  scroll-margin-top: var(--bar-h); background: #111719; color: var(--sc-ink); border-top: 1px solid rgb(232 236 234 / 0.12); }
.impl__wrap { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center;
  max-width: 84rem; margin: 0 auto; padding: clamp(4.5rem, 10vh, 7rem) var(--sc-gutter) clamp(2rem, 6vh, 4rem); position: relative; }
.impl__logo { height: 2.2rem; width: auto; margin-bottom: var(--sc-7); }
.impl__h { font-size: var(--sc-t-3xl); max-width: 12ch; margin-bottom: var(--sc-5); }
.impl__p { margin: 0 0 var(--sc-7); font-size: var(--sc-t-lg); line-height: 1.45; color: var(--sc-ink-soft); max-width: 40ch; }
.impl__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5) var(--sc-6); }
.impl__list li { display: grid; gap: 0.3rem; padding-top: var(--sc-4); border-top: 1px solid rgb(95 169 126 / 0.4); }
.impl__list b { font-weight: 600; }
.impl__list span { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.impl__form { display: grid; gap: 0.9rem; padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 12px; background: #1A2225; border: 1px solid rgb(232 236 234 / 0.12); }
.impl__formh { margin: 0 0 0.4rem; line-height: 1.15; font-family: var(--sc-font-display); font-variation-settings: "wdth" 108; font-size: var(--sc-t-xl); font-weight: 560; }
.impl__form label { display: grid; gap: 0.35rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.impl__form input, .impl__form textarea { width: 100%; min-height: 2.8rem; padding: 0.55rem 0.75rem; border-radius: var(--sc-r-sm); border: 1px solid rgb(232 236 234 / 0.16); background: #0E1112; color: var(--sc-ink); font: inherit; resize: vertical; }
.impl__form [aria-invalid="true"] { border-color: #E06A5F; }
.impl__form .btn { margin-top: 0.4rem; min-height: 3rem; }
.impl__msg { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.impl__msg.is-ok { color: var(--sc-accent); }
.impl__msg.is-err { color: #F2A097; }
.site-footer { position: relative; z-index: calc(var(--sc-z-chrome) + 2); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; padding: 2rem var(--sc-gutter); background: #111719; border-top: 1px solid rgb(232 236 234 / 0.12); font-size: 0.78rem; color: var(--sc-ink-soft); }
.site-footer a { color: var(--sc-ink-soft); text-underline-offset: 4px; }
.site-footer button { background: none; border: 0; padding: 0.65rem 0; color: var(--sc-ink); font: inherit; cursor: pointer; }

/* ============================================================== MOBILE == */
@media (max-width: 860px) {
  :root { --bar-h: 3.5rem; }
  .bar__mark img { height: 1.6rem; }
  .bar .btn { min-height: 2.4rem; padding: 0 0.9rem; font-size: 0.8rem; }
  .scrim { background: linear-gradient(to top, rgb(9 11 12 / 0.86) 0%, rgb(9 11 12 / 0.55) 34%, transparent 58%); }
  .blk, .blk--hero, .blk--lead, .blk--trail { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 2rem; max-width: none; }
  .plate, .plate--hero, .plate--lead, .plate--trail { left: -10vw; right: -10vw; width: auto; bottom: -4vh; height: 62svh; }
  .hero__title { font-size: clamp(2.2rem, 9vw, 3rem); }
  .blk__h { font-size: var(--sc-t-xl); }
  .blk__p { font-size: var(--sc-t-base); }
  .chips li { padding: .7rem .65rem; gap: .4rem; }
  .chips li > span { font-size: .7rem; }
  .chips b { font-size: 1.25rem; }
  .chips small { font-size: .61rem; }
  .diff__lead, .diff__end { width: 86vw; padding-inline: 7vw; }
  .cmp { width: 100vw; grid-template-columns: 1fr; justify-items: center; gap: 1.1rem; padding-inline: 7vw; }
  .cmp__phone { height: 50svh; }
  .cmp__text { gap: 0.6rem; text-align: left; width: 86vw; }
  .cmp__before, .cmp__after { max-width: none; }
  .cmp__before { font-size: var(--sc-t-sm); }
  .cmp__after { font-size: var(--sc-t-xl); padding-top: 0.6rem; }
  .impl__wrap { grid-template-columns: 1fr; padding-top: 4.5rem; }
  .impl__h { font-size: clamp(1.9rem, 8.4vw, 2.6rem); overflow-wrap: anywhere; }
  .impl__list { grid-template-columns: 1fr; }
  .demo-intro { width: calc(100% - 36px); top: calc(var(--bar-h) + 14px); text-align: left; }
  .demo-intro h2 { font-size: 1.12rem; max-width: 32ch; }
  .demo-intro p { font-size: 0.75rem; margin-top: 0.5rem; }
  .is-live .sc-world { opacity: 0.12; }
  .is-live .app { border-radius: 8px; box-shadow: 0 0 0 1px rgb(232 236 234 / 0.16); }
  .app__glass { display: none; }
  .endbar__note { display: none; }
  .endbar__back { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .endbar { bottom: max(0.75rem, env(safe-area-inset-bottom)); padding: 0.25rem 0.5rem; width: max-content; max-width: calc(100% - 24px); gap: 0; }
  .endbar__back, .endbar__next { font-size: 0.69rem; padding-inline: 0.7rem; }
  .endbar .btn { min-height: 2.2rem; padding: 0 0.9rem; font-size: 0.78rem; }
  .req__grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  .bar { gap: 12px; }
  .bar__mark { flex-shrink: 0; }
  .bar__mark img { height: 1.4rem; }
  .bar .btn { max-width: 165px; white-space: normal; text-align: center; font-size: 0.73rem; line-height: 1.2; padding: 0.45rem 0.7rem; }
}

/* ===================================================== REDUCED MOTION == */
.impl-stage { position: relative; z-index: calc(var(--sc-z-chrome) + 2); min-height: 145svh; scroll-margin-top: 0; background: #111719; }
.impl-stage .impl { position: sticky; top: 0; height: 100svh; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior-y: auto; }
.impl-stage .impl__wrap { flex: 1 0 auto; min-height: 0; width: 100%; padding-block: clamp(1.5rem, 4vh, 3rem); gap: 4vw; }
.impl-stage .impl__logo { height: 1.8rem; margin-bottom: 1.5rem; }
.impl-stage .impl__h { font-size: clamp(2.2rem, 4.6vw, 4.3rem); max-width: 14ch; margin-bottom: 1.2rem; }
.impl-stage .impl__p { font-size: clamp(.9rem, 1.25vw, 1.1rem); margin-bottom: 1.4rem; }
.impl-stage .impl__list { gap: 1rem 1.5rem; }
.impl-stage .impl__list li { padding-top: .7rem; font-size: .85rem; }
.impl-stage .impl__list span { font-size: .75rem; }
.impl-stage .impl__form { padding: clamp(1.2rem, 2vw, 1.8rem); gap: .7rem; }
.impl-stage .impl__formh { font-size: clamp(1.35rem, 2.3vw, 1.9rem); }
.impl__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.impl-stage .impl__form label { font-size: .78rem; }
.impl-stage .impl__form textarea { min-height: 5.2rem; max-height: 8rem; }
.impl-stage .impl__msg { font-size: .72rem; line-height: 1.5; }
.impl-stage .site-footer { flex-shrink: 0; padding-block: .6rem; }
@media (max-width: 860px) {
  .impl-stage .impl__wrap { grid-template-columns: 1fr; gap: 2rem; padding-top: 2rem; }
  .impl-stage .impl__h { font-size: clamp(2rem, 8vw, 3rem); }
  .impl-stage .impl__list { grid-template-columns: 1fr 1fr; }
  .impl-stage .site-footer { gap: .4rem 1rem; font-size: .7rem; }
}
@media (max-width: 380px) { .impl__fields { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .diff { overflow-x: auto; scroll-snap-type: x proximity; }
  .diff__rail > * { scroll-snap-align: center; opacity: 1; transform: none; }
  .sc-world, .sc-world__copy, .demo-intro { transition: none; }
}


/* Presentation lives in normal document flow, immediately after the phones. */
.presentation-inline{position:relative;z-index:calc(var(--sc-z-chrome) + 2);background:#111719;color:var(--sc-ink);padding:clamp(4.5rem,8vw,7rem) var(--sc-gutter) 3.5rem;scroll-margin-top:0;border-top:1px solid #ffffff12}
.presentation-inline__wrap{max-width:1100px;margin:auto;text-align:center}.presentation-inline__label{color:var(--sc-accent);font-size:.78rem;letter-spacing:.1em;margin:0 0 1rem}
.presentation-inline h2{font-size:clamp(2.2rem,5.5vw,4.8rem);line-height:1.02;letter-spacing:-.04em;margin:0 0 1.2rem}
.presentation-inline__description{max-width:56ch;margin:0 auto;color:var(--sc-ink-soft);line-height:1.55;font-size:clamp(.95rem,1.5vw,1.1rem)}
.machine-types{list-style:none;padding:0;margin:1.7rem auto 2.5rem;display:flex;justify-content:center;gap:1rem;max-width:52rem}
.machine-types li{flex:1;display:flex;align-items:center;justify-content:center;gap:.7rem;padding:.9rem;border:1px solid #5fa97e40;border-radius:8px;background:#1a222580;font-size:.8rem;text-align:left}
.machine-types img{filter:invert(70%) sepia(20%) saturate(630%) hue-rotate(93deg);width:34px;height:34px;flex-shrink:0}
.presentation-inline__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;text-align:left}.presentation-inline__toolbar h3{font-size:clamp(1.1rem,2vw,1.4rem);font-weight:500;margin:0}
.language-switch{display:flex;gap:6px}.language-switch button{font:inherit;font-size:.78rem;min-height:40px;padding:8px 16px;background:transparent;border:1px solid #ffffff30;color:#becbc2;border-radius:6px;cursor:pointer}.language-switch button[aria-pressed="true"]{background:#5e9f74;color:#101719;border-color:#5e9f74}
.inline-video{width:100%;aspect-ratio:16/9;background:#070b0e;border:1px solid #5e9f7445;border-radius:10px;overflow:hidden}.inline-video video{display:block;width:100%;height:100%;object-fit:contain}.presentation-inline__status{font-size:.75rem;color:var(--sc-ink-soft);margin:1rem 0 0}
@media(max-width:600px){.presentation-inline{padding:5rem 18px 3rem}.presentation-inline h2{font-size:clamp(2rem,8vw,3rem)}.machine-types{gap:.5rem;margin-block:1.4rem 2rem}.machine-types li{flex-direction:column;text-align:center;padding:.8rem .3rem;font-size:.68rem;gap:.5rem}.machine-types img{width:30px;height:30px}.presentation-inline__toolbar{flex-direction:column;align-items:center;gap:.8rem}.language-switch button{min-height:44px}.inline-video{border-radius:6px}}