@font-face{font-family:Bricolage Grotesque;src:url(/modelos/mover/assets/bricolage-grotesque.woff2)format("woff2");font-style:normal;font-weight:500 700;font-display:swap}
@font-face{font-family:Hanken Grotesk;src:url(/modelos/mover/assets/hanken-grotesk.woff2)format("woff2");font-style:normal;font-weight:400 600;font-display:swap}
:root {
  --bg:#03080a;
  --ink:#eaf6f6;
  --muted:#8aa4a8;
  --line:#5eead424;
  --panel:#04191deb;
  --ac:#5eead4;
  --d:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --page-gutter:max(6vw, calc((100vw - 1600px) / 2));
}
* { box-sizing:border-box; margin:0; }
html { color-scheme:dark; scroll-behavior:smooth; scroll-padding-top:calc(80px + env(safe-area-inset-top,0px)); }
body.site-page {
  min-height:100svh;
  color:var(--ink);
  background:
    radial-gradient(90% 42% at 50% -8%, #0d3a4288, transparent 58%),
    #03080a url(/modelos/mover/assets/hero-sky-clean.webp) 50% -12vh / auto 72vh no-repeat;
  background-color:#03080a;
  font:400 17px/1.6 Hanken Grotesk,ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1, h2, h3, .lg { font-family:var(--d); font-weight:600; letter-spacing:-.03em; }
a { color:var(--ac); text-decoration:none; }
.nav-cta-short { display:none; }
.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:12px; background:#000; padding:.5rem 1rem; z-index:90; }

#nv {
  z-index:60;
  isolation:isolate;
  position:fixed;
  top:calc(10px + env(safe-area-inset-top,0px));
  left:50%;
  transform:translateX(-50%);
  width:min(1190px,94vw);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:6px 10px 6px 24px;
  color:#eaf6f6;
  background:#02101461;
  border:1px solid #86d7d738;
  border-radius:99px;
  backdrop-filter:blur(10px);
}
#nv:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:-1;
  background:linear-gradient(120deg,#79f9e809,transparent 45%,#37c5bf06);
}
.lg { display:flex; align-items:center; }
.lg img { width:76px; height:auto; display:block; }
.lk { display:flex; align-items:center; gap:1.3rem; font-size:.78rem; opacity:.92; }
.lk a { position:relative; color:#eaf6f6; padding:4px 3px 10px; transition:color .25s,transform .25s; }
.lk a.on, .lk a:hover, .lk a:focus-visible { color:var(--ac); transform:translateY(-1px); }
.lk a.on:after {
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--ac);
  box-shadow:0 0 12px #5eead488;
  transform:translateX(-50%);
}
.portal-nav-actions { display:flex; align-items:center; gap:10px; }
.bt {
  background:var(--ac);
  border:1px solid var(--ac);
  color:#04191a;
  border-radius:99px;
  padding:.5rem 1.1rem;
  font-size:.78rem;
  font-weight:600;
  box-shadow:0 0 25px #5eead488;
}
.portal-menu-toggle { display:none; }
.portal-mobile-menu { display:none; }

.site-article {
  width:min(820px, 88vw);
  margin:0 auto;
  padding:calc(108px + env(safe-area-inset-top,0px)) 0 3rem;
}
.site-hero { margin-bottom:2.4rem; }
.section-kicker {
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--ac);
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:600;
  margin:0 0 1.2rem;
}
.section-kicker:before { content:""; width:44px; height:1px; background:var(--ac); flex:none; }
.section-title {
  font-size:clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing:-.035em;
  line-height:1.08;
  color:#eaf6f6;
  text-wrap:balance;
  margin:0 0 1.2rem;
}
.lead { color:#c9e0e1; font-size:1.08rem; line-height:1.55; max-width:42rem; }
.updated { margin-top:2.4rem; font-size:.82rem; color:var(--muted); }

.site-block {
  background:linear-gradient(145deg,#061c24dc,#03101788);
  border:1px solid #85d8df55;
  border-radius:22px;
  padding:1.5rem 1.6rem 1.7rem;
  margin:1rem 0;
  box-shadow:0 14px 48px #0003;
}
.site-block h2 {
  font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing:-.03em;
  margin:0 0 .85rem;
  color:#eaf6f6;
}
.site-block h2 + h2 { margin-top:1.8rem; }
.site-block p { color:#c9e0e1; }
.site-block p + p { margin-top:.75rem; }
.site-block a { text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.site-block .cards a { text-decoration:none; }
.site-block ul {
  list-style:none;
  padding:0;
  margin:.2rem 0 0;
}
.site-block li {
  position:relative;
  padding:.85rem 0 .85rem 1.35rem;
  border-bottom:1px solid #5eead418;
  color:#c9e0e1;
}
.site-block li:last-child { border-bottom:0; }
.site-block li:before {
  content:"";
  position:absolute;
  left:0;
  top:1.2rem;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ac);
  box-shadow:0 0 8px #5eead466;
}

.cards { display:grid; gap:.8rem; margin-top:.4rem; }
.cards a {
  display:block;
  background:#03151d99;
  border:1px solid #78c9c444;
  border-radius:16px;
  padding:1.05rem 1.15rem;
  color:inherit;
  text-decoration:none;
  transition:border-color .25s, transform .25s;
}
.cards a:hover { border-color:#9afff2; transform:translateY(-2px); }
.cards a strong { display:block; color:var(--ac); margin-bottom:.25rem; font-family:var(--d); }
.cards a span { color:#b9d2d4; font-size:.95rem; }
.cards-media { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards-media img { width:100%; height:auto; border-radius:10px; margin-bottom:.7rem; display:block; }

.faq { margin-top:.4rem; }
.faq div { border-top:1px solid #5eead422; padding:1rem 0; }
.faq div:first-child { border-top:0; padding-top:0; }
.faq dt { font-weight:600; color:#eaf6f6; font-family:var(--d); }
.faq dd { color:#b9d2d4; margin:.4rem 0 0; }

.page-cta { margin-top:2.2rem; }
.b {
  display:inline-block;
  color:inherit;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  background:transparent;
  border:1px solid color-mix(in srgb,currentColor 35%,transparent);
  border-radius:99px;
  padding:.95rem 1.6rem;
  transition:all .3s;
}
.b:hover { border-color:currentColor; transform:translateY(-2px); }
.b.p { background:var(--ac); border-color:var(--ac); color:#04191a; box-shadow:0 0 32px #5eead455; }
.b.p:hover { box-shadow:0 0 46px #5eead499; }
.btn {
  display:inline-block;
  background:var(--ac);
  color:#042f2e !important;
  text-decoration:none;
  font-weight:600;
  border:0;
  border-radius:999px;
  padding:.7rem 1.2rem;
  cursor:pointer;
}

.honeypot { position:absolute; left:-9999px; height:0; overflow:hidden; }
.consent-check { display:flex; gap:.6rem; align-items:flex-start; color:var(--muted); font-size:.9rem; }
.consent-check input { margin-top:.3rem; }
.roi {
  display:grid;
  gap:1rem;
  background:#03151d99;
  border:1px solid #78c9c444;
  border-radius:16px;
  padding:1.2rem;
  margin-top:.8rem;
}
.roi label { display:grid; gap:.35rem; font-size:.95rem; color:#b9d2d4; }
.roi input, .roi select, .roi textarea {
  background:#061c24;
  color:var(--ink);
  border:1px solid #8bded05c;
  border-radius:10px;
  padding:.7rem .8rem;
  font:inherit;
}
.roi-out { display:block; margin-top:1rem; padding:1rem; border-radius:12px; background:#0f2a2f; }

.site-footer {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.85rem 1.4rem;
  padding:1.35rem 6vw calc(1rem + env(safe-area-inset-bottom,0px));
  color:#fff;
  font-size:.78rem;
  background:transparent;
  position:relative;
}
.site-footer:before {
  content:"";
  position:absolute;
  left:6vw;
  right:6vw;
  top:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,#5eead422 12%,#9ff7eeaa 50%,#5eead422 88%,transparent 100%);
  box-shadow:0 0 18px #5eead455,0 0 42px #5eead422;
}
.site-footer-logo { width:fit-content; margin-right:.2rem; }
.site-footer-logo img { width:78px; height:auto; display:block; filter:none; }
.site-footer > p { margin:0; color:#fff; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:.25rem 1.05rem; margin-left:auto; }
.site-footer nav a { color:#fff; }
.site-footer nav a:hover { color:var(--ac); }
.site-footer-social { display:flex; gap:.55rem; }
.site-footer-social a {
  color:#fff;
  border:1px solid #ffffffaa;
  border-radius:50%;
  width:28px;
  height:28px;
  place-items:center;
  display:grid;
}
.site-footer-social a:hover { color:var(--ac); border-color:var(--ac); }

.consent {
  position:fixed;
  z-index:80;
  left:16px;
  right:16px;
  bottom:16px;
  max-width:720px;
  margin:0 auto;
  padding:16px 18px;
  border:1px solid #78c9c455;
  border-radius:18px;
  background:#03151bf5;
}
.consent p { color:#c5d9dc; font-size:.95rem; }
.consent-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.consent-actions button {
  cursor:pointer;
  border-radius:999px;
  padding:.55rem 1rem;
  border:1px solid #78c9c455;
  background:transparent;
  color:inherit;
  font:inherit;
}

@media (max-width:800px) {
  :root { --page-gutter:5vw; }
  .lk, #nv .bt { display:none; }
  .portal-menu-toggle {
    position:relative;
    display:block;
    overflow:hidden;
    width:36px;
    height:36px;
    padding:8px;
    border:1px solid #78c9c455;
    border-radius:50%;
    color:inherit;
    background:transparent;
    cursor:pointer;
  }
  .portal-menu-toggle span {
    position:absolute;
    width:10px;
    height:2px;
    background:currentColor;
    transition:transform .3s,left .3s,top .3s,opacity .2s;
  }
  .portal-menu-toggle span:nth-child(odd) { left:8px; border-radius:2px 0 0 2px; }
  .portal-menu-toggle span:nth-child(even) { left:18px; border-radius:0 2px 2px 0; }
  .portal-menu-toggle span:nth-child(1), .portal-menu-toggle span:nth-child(2) { top:10px; }
  .portal-menu-toggle span:nth-child(3), .portal-menu-toggle span:nth-child(4) { top:17px; }
  .portal-menu-toggle span:nth-child(5), .portal-menu-toggle span:nth-child(6) { top:24px; }
  .portal-menu-toggle.open span:nth-child(1), .portal-menu-toggle.open span:nth-child(6) { transform:rotate(45deg); }
  .portal-menu-toggle.open span:nth-child(2), .portal-menu-toggle.open span:nth-child(5) { transform:rotate(-45deg); }
  .portal-menu-toggle.open span:nth-child(1) { left:10px; top:13px; }
  .portal-menu-toggle.open span:nth-child(2) { left:16px; top:13px; }
  .portal-menu-toggle.open span:nth-child(3) { left:-10px; opacity:0; }
  .portal-menu-toggle.open span:nth-child(4) { left:36px; opacity:0; }
  .portal-menu-toggle.open span:nth-child(5) { left:10px; top:20px; }
  .portal-menu-toggle.open span:nth-child(6) { left:16px; top:20px; }
  .portal-mobile-menu {
    display:none;
    flex-direction:column;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    padding:16px 22px;
    gap:4px;
    border:1px solid #78c9c455;
    border-radius:20px;
    background:#03151bf5;
    backdrop-filter:blur(12px);
    color:#eaf6f6;
  }
  .portal-mobile-menu.open { display:flex; }
  .portal-mobile-menu a { padding:10px 0; color:#eaf6f6; }
  .portal-mobile-menu a.on { color:var(--ac); }
  .site-article { width:min(88vw, 820px); padding-top:calc(92px + env(safe-area-inset-top,0px)); }
  .section-kicker { gap:12px; font-size:.65rem; }
  .section-kicker:before { width:32px; }
  .site-block { padding:1.15rem 1.1rem 1.3rem; border-radius:18px; }
  .site-footer { gap:.65rem .9rem; }
  .site-footer nav { margin-left:0; width:100%; }
  body.site-page { font-size:16px; }
  .stage-hero, .stage-pain, .stage-split { grid-template-columns:1fr; }
  .stage-screen, .stage-deck { min-height:320px; }
  .stage-pillars { position:static; margin-top:1.5rem; }
}

body.stage-service { background:#031018 url(/modelos/mover/assets/underwater-bg-clean.webp) center top / cover no-repeat fixed; }
body.stage-page:not(.stage-service) { background:#02070d url(/modelos/mover/assets/hero-sky-clean.webp) center top / cover no-repeat fixed; }
.stage { width:min(1180px, calc(100% - var(--page-gutter) - var(--page-gutter))); margin:0 auto; padding:calc(120px + env(safe-area-inset-top,0px)) 0 4rem; }
.stage-pain, .stage-solution, .stage-related, #estrutura, #feito, #modulos, #leituras, #leitura {
  scroll-margin-top:calc(88px + env(safe-area-inset-top,0px));
}
.stage-hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:2.5rem; align-items:center; }
.stage .section-title { font-size:clamp(2.2rem, 4.2vw, 3.6rem); }
.stage .section-title em { color:#5eead4; font-style:normal; }
.stage .lead { max-width:38rem; }
.stage-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem; }
.stage-screen { min-height:420px; display:grid; place-items:center; }
.stage-browser { width:min(100%, 560px); border:1px solid #7eeadf88; border-radius:22px; background:#041820ee; box-shadow:0 30px 80px #000a, 0 0 40px #5eead422; overflow:hidden; transform:rotate(1.5deg); }
.stage-browser header { display:flex; gap:.8rem; align-items:center; padding:.7rem 1rem; color:#9fd4d4; font-size:.72rem; border-bottom:1px solid #5eead422; }
.stage-browser header b { margin-right:auto; letter-spacing:.16em; color:#eaf6f6; }
.stage-browser header i { width:14px; height:10px; border:1px solid currentColor; border-radius:2px; }
.stage-browser-hero { padding:1.4rem 1.3rem 1rem; background:linear-gradient(180deg,#06343c,#031018 80%); }
.stage-browser-hero small { color:#5eead4; letter-spacing:.16em; text-transform:uppercase; font-size:.62rem; }
.stage-browser-hero strong { display:block; margin:.4rem 0 .5rem; font-family:var(--d); font-size:1.7rem; letter-spacing:-.03em; }
.stage-browser-hero p { color:#c9e0e1; font-size:.85rem; max-width:28rem; }
.stage-browser-hero em { display:inline-block; margin-top:.9rem; background:#5eead4; color:#04191a; border-radius:99px; padding:.45rem .8rem; font-style:normal; font-weight:700; font-size:.78rem; }
.stage-browser-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:.8rem; }
.stage-browser-cards article { border:1px solid #5eead433; border-radius:12px; padding:.7rem; min-height:72px; }
.stage-browser-cards b { display:block; width:22px; height:22px; border:1px solid #5eead4; border-radius:7px; margin-bottom:.4rem; }
.stage-browser-cards strong { font-size:.72rem; font-weight:600; }
.stage-pain, .stage-solution { margin-top:4.5rem; }
.stage-pain { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.2rem; align-items:stretch; }
.stage-pain h2, .stage-solution h2, .stage-focus h2 { font-family:var(--d); letter-spacing:-.03em; font-size:clamp(1.7rem, 3vw, 2.5rem); margin:0 0 .8rem; }
.stage-pain p, .stage-method p, .stage-faq dd { color:#c9e0e1; }
.pain-cards, .solution-grid { display:grid; gap:.8rem; }
.pain-cards { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pain-cards article, .solution-grid article, .stage-focus { background:#031820d4; border:1px solid #7eeadf55; border-radius:18px; padding:1.1rem 1rem 1.2rem; box-shadow:inset 0 0 24px #5eead410; }
.pain-cards span { color:#5eead4; width:36px; height:36px; border:1px solid #5eead455; border-radius:50%; display:grid; place-items:center; margin-bottom:.8rem; }
.pain-cards svg { width:18px; height:18px; }
.pain-cards h3, .solution-grid strong { display:block; font-family:var(--d); font-size:1.05rem; margin-bottom:.35rem; }
.pain-cards p { font-size:.88rem; }
.solution-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.solution-grid article { padding:1rem 1.1rem; }
.stage-method, .stage-faq { margin-top:1.4rem; }
.stage-method h3, .stage-faq h3 { font-family:var(--d); margin-bottom:.6rem; }
.stage-faq .faq div { border-color:#5eead422; }
.stage-chips { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.3rem 0 1.4rem; }
.stage-chips button, .stage-principles, .stage-pillars { color:#eaf6f6; }
.stage-chips button { display:inline-flex; align-items:center; gap:.4rem; border:1px solid #7eeadf66; background:#03182088; color:#eaf6f6; border-radius:99px; padding:.45rem .8rem; font:inherit; cursor:pointer; }
.stage-chips button.is-on { background:#5eead4; color:#04191a; border-color:#5eead4; }
.stage-principles, .stage-pillars { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.2rem; }
.stage-principles li, .stage-pillars li { display:grid; grid-template-columns:auto 1fr; gap:.15rem .55rem; max-width:11rem; }
.stage-principles b, .stage-pillars b { grid-row:1 / span 2; color:#5eead4; font-size:1.2rem; }
.stage-principles span, .stage-pillars span, .deck-card small, .stage-focus p { color:#c9e0e1; font-size:.85rem; }
.stage-split { align-items:end; }
.stage-deck { position:relative; min-height:460px; }
.deck-card { position:absolute; width:min(68%, 380px); border:1px solid #7eeadf88; border-radius:18px; overflow:hidden; background:#041820; box-shadow:0 24px 60px #000a; transition:transform .45s ease, opacity .45s ease; }
.deck-card img, .mona-face { width:100%; height:280px; object-fit:cover; display:block; background:#071820; }
.deck-card small { display:block; padding:.7rem .9rem 1rem; }
.deck-card.is-on { z-index:3; left:28%; top:0; transform:none; }
.deck-card.is-prev { z-index:1; left:0; top:36px; transform:scale(.86); opacity:.8; }
.deck-card.is-next { z-index:2; left:58%; top:18px; transform:scale(.92) rotate(4deg); }
.deck-card .mona-devices { height:280px; padding:12px 8px 16px; }
.deck-card .mona-devices .desktop { width:calc(100% - 62px); }
.deck-card .mona-phone-fit { width:70px; margin-right:-14px; }
.deck-card .mona-devices img { width:100%; height:100%; object-fit:fill; }
.mona-face { display:grid; align-content:center; gap:.4rem; padding:1.2rem; }
.mona-face b { letter-spacing:.18em; }
.mona-face span { border:1px solid #5eead444; border-radius:8px; padding:.35rem .5rem; }
.stage-focus { margin-top:1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; }
.stage-focus > div { flex:1; min-width:220px; }
.stage-focus span { color:#5eead4; letter-spacing:.12em; font-size:.78rem; }
.stage-arrows { display:flex; gap:.5rem; margin-left:auto; }
.stage-arrows button { width:42px; height:42px; border-radius:50%; border:1px solid #7eeadf88; background:#031820cc; color:#5eead4; cursor:pointer; font-size:1.1rem; }
.stage-explore { display:inline-flex; align-items:center; gap:.7rem; margin-top:1.2rem; color:#eaf6f6; }
.stage-explore span { width:36px; height:36px; border:1px solid #5eead4; border-radius:50%; display:grid; place-items:center; color:#5eead4; }
.stage-models > .stage-hero,
.stage-clients > .stage-hero {
  grid-template-columns:minmax(0,1fr);
  max-width:44rem;
}
.stage-models .cards-media,
.stage-clients .cards-media { margin-top:.2rem; }
.stage-models .cards-media img,
.stage-clients .cards-media img { height:220px; object-fit:cover; }
.stage-related { margin-top:4.5rem; }
.stage-related h2 { font-family:var(--d); letter-spacing:-.03em; font-size:clamp(1.7rem, 3vw, 2.5rem); margin:0 0 1.2rem; }
.stage-related .cards, .stage-contents .cards { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.stage-article .stage-method {
  background:#031820d4;
  border:1px solid #7eeadf55;
  border-radius:18px;
  padding:1.25rem 1.35rem 1.4rem;
  box-shadow:inset 0 0 24px #5eead410;
}
.stage-article .stage-method + .stage-method { margin-top:1rem; }
.stage-article .stage-method ul { margin:.4rem 0 0 1.1rem; color:#c9e0e1; }
.stage-legal .stage-hero { grid-template-columns:minmax(0,1fr); }
.stage-legal .lead { max-width:46rem; }
.stage-legal .stage-method ul { list-style:none; padding:0; margin:.5rem 0 0; }
.stage-legal .stage-method li { position:relative; padding:.75rem 0 .75rem 1.2rem; border-bottom:1px solid #5eead418; color:#c9e0e1; }
.stage-legal .stage-method li:last-child { border-bottom:0; }
.stage-legal .stage-method li:before { content:""; position:absolute; left:0; top:1.15rem; width:6px; height:6px; border-radius:50%; background:var(--ac); box-shadow:0 0 8px #5eead466; }
.stage-legal .stage-method a { color:var(--ac); text-decoration:underline; text-underline-offset:3px; }
.stage-legal .stage-method .btn { margin-top:.9rem; }
.stage-article .stage-method li + li { margin-top:.35rem; }
.stage-clients .stage-hero { align-items:start; }
.stage-clients .stage-pillars { grid-column:2; justify-content:flex-end; align-self:start; }
.stage-clients .stage-deck { grid-column:1 / -1; margin-top:1rem; }
.stage-browser.case-shot { padding:0; transform:rotate(-1.5deg); }
.stage-browser.case-shot img { display:block; width:100%; min-height:320px; aspect-ratio:16/10; object-fit:cover; }
.case-compare { --split:50%; position:relative; margin:2rem 0 1rem; aspect-ratio:16/9; border:1px solid #7eeadf88; border-radius:22px; overflow:hidden; background:#041820; box-shadow:0 30px 80px #000a, 0 0 40px #5eead422; }
.case-compare-before, .case-compare-after { position:absolute; inset:0; }
.case-compare-before { display:grid; gap:.8rem; align-content:center; padding:2rem; background:linear-gradient(180deg,#0a2a32,#031018); }
.case-compare-before span { color:#5eead4; letter-spacing:.16em; text-transform:uppercase; font-size:.7rem; }
.case-compare-before i { display:block; height:10px; width:70%; border-radius:99px; background:#5eead433; }
.case-compare-before i:nth-child(3) { width:48%; }
.case-compare-before i:nth-child(4) { width:62%; }
.case-compare-after { clip-path:inset(0 0 0 var(--split)); }
.case-compare-after img { width:100%; height:100%; object-fit:cover; display:block; }
.case-compare:after { content:""; position:absolute; left:var(--split); top:0; bottom:0; width:2px; background:#5eead4; box-shadow:0 0 18px #5eead4; pointer-events:none; z-index:2; }
.case-compare input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:3; }
.case-note { color:#c9e0e1; font-size:.9rem; max-width:42rem; margin:0 0 1.6rem; }
.case-layers { margin-top:1.2rem; }
.case-layers span { display:block; color:#c9e0e1; font-size:.85rem; font-weight:400; margin-top:.35rem; }
.mona-demo { margin:2rem 0 1rem; border:1px solid #7eeadf88; border-radius:22px; overflow:hidden; background:#041820ee; box-shadow:0 30px 80px #000a, 0 0 40px #5eead422; }
.mona-tabs { display:flex; flex-wrap:wrap; gap:.4rem; padding:.8rem 1rem; border-bottom:1px solid #5eead422; }
.mona-tabs button { border:1px solid #7eeadf66; background:#03182088; color:#eaf6f6; border-radius:99px; padding:.4rem .75rem; font:inherit; font-size:.82rem; cursor:pointer; }
.mona-tabs button[aria-selected=true] { background:#5eead4; color:#04191a; border-color:#5eead4; }
.mona-board { padding:1.4rem 1.3rem 1.5rem; }
.mona-board h3 { font-family:var(--d); font-size:1.5rem; margin:0 0 .4rem; }
.mona-board p { color:#c9e0e1; margin:0 0 1.1rem; }
.mona-open-shots { display:flex; flex-wrap:wrap; gap:.6rem; margin:.9rem 0 1.1rem; }
.mona-open-shots a { display:inline-flex; border:1px solid #7eeadf88; border-radius:99px; color:#eaf6f6; font-size:.83rem; padding:.55rem .85rem; }
.mona-open-shots a:hover, .mona-open-shots a:focus-visible { background:#5eead4; color:#04191a; }
.mona-devices { position:relative; display:flex; align-items:flex-end; justify-content:center; width:100%; padding:0 0 1.4rem; }
.mona-devices .desktop { box-sizing:content-box; background:#101010; border:2px solid #c8c8c8; border-radius:6px; padding:1.1em .5em .5em; width:min(720px, calc(100% - 100px)); aspect-ratio:1864/887; position:relative; margin:0; overflow:visible; filter:drop-shadow(0 18px 16px #0006); }
.mona-devices .desktop:before { content:""; display:block; width:10px; height:10px; background:#000 radial-gradient(circle, #333, #000 35%, #222 50%, #444 70%, #222 85%, #000); position:absolute; z-index:10; left:0; right:0; top:5px; margin:0 auto; border-radius:100%; }
.mona-devices .desktop:after { content:""; display:block; width:calc(100% + 1em + 4px); height:12px; background:linear-gradient(to bottom, #ccc, #808080); position:absolute; z-index:1; border-radius:0 0 10px 10px; box-shadow:0 -1px 0 0 #222; bottom:-14px; left:calc(-.5em - 2px); }
.mona-desktop-screen { width:100%; height:100%; border-radius:4px; background:#444; overflow:hidden; }
.mona-desktop-screen img { width:100%; height:100%; object-fit:fill; display:block; }
.mona-phone-fit { position:relative; z-index:3; order:-1; width:min(168px, 22%); margin:0 18px -4px 0; aspect-ratio:423/877; container-type:inline-size; flex:0 0 auto; }
.mona-devices .iphone { box-sizing:border-box; box-shadow:inset 0 1px 0 #ffffff22, 0 0 0 1px #0a0a0a, 0 0 30px 0 #000000b3; border:5px solid #101010; background:#101010; padding:15px; border-radius:50px; height:877px; width:423px; position:absolute; top:0; left:0; margin:0; transform-origin:top left; transform:scale(calc(100cqi / 423px)); }
.mona-devices .iphone-top { padding:5px 110px 40px; position:relative; }
.mona-devices .iphone-top .speaker { display:block; width:70px; height:6px; margin:0 auto; border-radius:6px; background:#2c2c2c; }
.mona-devices .iphone-top .camera { display:block; height:10px; width:10px; border-radius:50%; margin:0 auto 13px; background:#1c1c1c; box-shadow:inset 0 0 0 1px #3a3a3a; }
.mona-devices .iphone-top .sensor { display:block; width:15px; height:15px; float:left; background:#1c1c1c; margin-top:-5px; border-radius:50%; }
.mona-devices .top-bar, .mona-devices .bottom-bar { display:none; }
.mona-devices .top-bar { top:65px; }
.mona-devices .bottom-bar { bottom:65px; }
.mona-devices .iphone-screen { background:#eee; width:375px; height:calc(375px * 555 / 329); margin:0 auto; border:2px solid #000000e6; border-radius:3px; overflow:hidden; position:relative; }
.mona-devices .iphone-screen img { width:100%; height:100%; object-fit:fill; display:block; }
.mona-devices .buttons .on-off, .mona-devices .buttons .up, .mona-devices .buttons .down, .mona-devices .buttons .sleep { display:block; background:#1a1a1a; position:absolute; border-radius:2px 0 0 2px; }
.mona-devices .buttons .on-off { height:40px; width:3px; top:100px; left:-8px; }
.mona-devices .buttons .up, .mona-devices .buttons .down, .mona-devices .buttons .sleep { height:60px; width:5px; left:-10px; }
.mona-devices .buttons .up { top:170px; }
.mona-devices .buttons .down { top:250px; }
.mona-devices .buttons .sleep { left:auto; right:-10px; top:170px; border-radius:0 2px 2px 0; }
.mona-devices .iphone-bottom { padding:10px 0 0; }
.mona-devices .iphone-bottom span { display:block; margin:0 auto; width:68px; height:68px; border-radius:50%; background:linear-gradient(135deg, #2a2a2a 0%, #101010 50%, #333 69%, #101010 100%); position:relative; }
.mona-devices .iphone-bottom span:after { content:""; display:block; width:60px; height:60px; background:#101010; border-radius:50%; position:absolute; left:4px; top:4px; box-shadow:inset 0 0 0 1px #2a2a2a; }
.stage-screen .mona-devices { padding-bottom:1.6rem; }
.stage-screen .mona-phone-fit { margin-right:-36px; }
.demo-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; }
.demo-stats > div { border:1px solid #5eead433; border-radius:12px; background:#031820d4; padding:.9rem; }
.demo-stats strong { display:block; margin-top:.35rem; color:#5eead4; font-family:var(--d); font-size:1.6rem; }
.demo-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.demo-table th, .demo-table td { text-align:left; padding:.7rem .5rem; border-bottom:1px solid #5eead422; }
.demo-table th { color:#5eead4; letter-spacing:.08em; text-transform:uppercase; font-size:.72rem; }
.agenda-item { display:flex; gap:1rem; align-items:center; padding:.85rem 0; border-bottom:1px solid #5eead422; }
.agenda-item span { min-width:4rem; color:#5eead4; font-size:.82rem; }
@media (max-width:800px) {
  .pain-cards, .solution-grid, .demo-stats { grid-template-columns:1fr; }
  .case-compare { aspect-ratio:5/4; }
  .stage { padding-top:calc(96px + env(safe-area-inset-top,0px)); }
  .stage-hero, .stage-pain, .stage-split {
    grid-template-columns:1fr;
    gap:1.4rem;
    align-items:start;
  }
  .stage-screen, .stage-deck { min-height:280px; }
  .stage .section-title { font-size:clamp(1.75rem, 8vw, 2.45rem); }
  .stage-browser { transform:none; width:100%; }
  .stage-case .stage-hero .section-title em { color:#eaffff; text-shadow:0 2px 14px #00171e; }
  .stage-case .stage-hero .lead { text-shadow:0 2px 9px #00171e; }
  .stage-browser.case-shot img { min-height:0; height:auto; aspect-ratio:auto; object-fit:contain; }
  .mona-devices .desktop { width:min(720px, calc(100% - 78px)); }
  .mona-phone-fit { width:min(112px, 30%); margin-right:10px; }
  .stage-screen .mona-phone-fit { margin-right:-16px; }
  .stage-deck { min-height:240px; margin-top:.6rem; }
  .deck-card { width:min(82%, 340px); }
  .deck-card.is-on { left:9%; top:0; }
  .deck-card.is-prev { left:0; top:18px; }
  .deck-card.is-next { left:36%; top:12px; }
}