:root { --blue: #1267d6; --blue-dark: #0954b5; --sky: #eaf5ff; --surface-soft: #f8fbfe; --accent-soft: #eaf5ff; --navy: #0b2554; --navy-deep: #071b3d; --ink: #10233f; --muted: #5e6e83; --line: #d8e2ee; --white: #fff; --radius: 1.25rem; --shadow: 0 1rem 3rem rgba(11, 37, 84, .10); --shadow-raised: 0 1.5rem 4rem rgba(11, 37, 84, .14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #ffbf47; outline-offset: 4px; }
.container { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.section { padding: 4.5rem 0; }
.section-intro { max-width: 42rem; margin-bottom: 2.25rem; }
.centered { text-align: center; margin-inline: auto; }
.eyebrow, .card-kicker { margin: 0 0 .5rem; color: var(--blue); font-size: .8rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.13; letter-spacing: -.035em; }
h1 { margin-bottom: 1.25rem; font-size: clamp(2.55rem, 9vw, 4.75rem); }
h2 { margin-bottom: 1rem; font-size: clamp(2rem, 6vw, 3.25rem); }
h3 { margin-bottom: .7rem; font-size: 1.2rem; }
p { color: var(--muted); }
.lead { max-width: 36rem; font-size: 1.12rem; }
.skip-link { position: fixed; z-index: 10; top: 1rem; left: 1rem; padding: .6rem 1rem; background: var(--navy); color: var(--white); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 5; top: 0; border-bottom: 1px solid rgba(216, 226, 238, .8); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.nav { display: flex; min-height: 4.5rem; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .25rem; line-height: 1; color: var(--navy); font-size: 1.1rem; font-weight: 900; letter-spacing: -.06em; }.brand > span:last-child { color: var(--blue); }.brand-logo, .brand > img { display: block; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; object-fit: contain; image-rendering: auto; }
.menu-toggle { display: inline-grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line); border-radius: .6rem; background: var(--white); color: var(--navy); cursor: pointer; }
.nav-links { display: none; position: absolute; top: calc(100% + 1px); right: 0; left: 0; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow); }.nav-links.is-open { display: grid; gap: .25rem; }.nav-links > a:not(.button) { padding: .65rem; font-weight: 700; }.login-link { color: var(--blue); }
.button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; padding: .72rem 1.15rem; border: 0; border-radius: .7rem; background: var(--blue); color: var(--white); font-weight: 800; box-shadow: 0 .6rem 1.2rem rgba(18, 103, 214, .2); transition: background .2s ease, transform .2s ease; }.button:hover { background: var(--blue-dark); transform: translateY(-2px); }.button-small { min-height: 2.55rem; }.button-light { background: var(--white); color: var(--navy); }.button-light:hover { background: var(--sky); }
.text-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--blue); font-weight: 800; }.text-link:hover { text-decoration: underline; }
.hero { overflow: hidden; padding-top: 4.25rem; background: linear-gradient(180deg, #f6fbff 0%, var(--white) 88%); }.hero-grid, .split-grid, .recurrence-grid { display: grid; gap: 2.5rem; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 1.8rem 0; }.confidence-list { display: flex; flex-wrap: wrap; gap: .7rem 1.15rem; padding: 0; color: var(--muted); font-size: .88rem; list-style: none; }.confidence-list li::before, .check-list li::before { margin-right: .45rem; color: var(--blue); content: "✓"; font-weight: 900; }
.browser-frame { overflow: hidden; border: 1px solid #bed0e4; border-radius: 1rem; background: var(--white); box-shadow: 0 1.5rem 4rem rgba(11,37,84,.16); }.browser-bar { display: flex; align-items: center; gap: .35rem; height: 2.2rem; padding: 0 .7rem; border-bottom: 1px solid var(--line); background: #f7faff; }.browser-bar span { width: .55rem; height: .55rem; border-radius: 50%; background: #d1dce9; }.browser-bar small { margin-left: .4rem; color: #8493a7; font-size: .63rem; }.app-preview { display: grid; min-height: 20rem; grid-template-columns: 2.65rem 1fr; background: #f8fbff; }.app-preview aside { display: grid; gap: 1rem; align-content: start; padding: .75rem; background: var(--navy); }.app-preview aside b { color: #9ed5ff; font-size: .75rem; }.app-preview aside i { width: 1rem; height: 1rem; border-radius: .25rem; background: #2b4f85; }.preview-content { padding: 1rem; }.preview-heading, .metric-row, .preview-panels { display: flex; gap: .7rem; }.preview-heading { align-items: center; justify-content: space-between; }.preview-heading small, .preview-heading strong { display: block; }.preview-heading strong { font-size: .94rem; }.mock-button { padding: .45rem .6rem; border: 0; border-radius: .35rem; background: var(--blue); color: var(--white); font-size: .62rem; font-weight: 700; }.metric-row { margin: 1rem 0; }.metric-row > div { flex: 1; padding: .65rem; border: 1px solid #e1eaf3; border-radius: .5rem; background: var(--white); }.metric-row small, .metric-row strong, .metric-row em { display: block; }.metric-row small { color: var(--muted); font-size: .55rem; }.metric-row strong { font-size: 1.25rem; }.metric-row em { color: #12834a; font-size: .52rem; font-style: normal; }.preview-panels > div { flex: 1; padding: .7rem; border-radius: .55rem; background: var(--white); box-shadow: 0 .25rem .6rem rgba(11,37,84,.05); }.preview-panels b, .preview-panels span { display: block; font-size: .61rem; }.preview-panels span { margin-top: .55rem; padding: .35rem; border-left: 2px solid #77bef4; background: #f6fbff; }.preview-panels i { display: inline-block; width: .32rem; height: .32rem; margin-right: .25rem; border-radius: 50%; background: var(--blue); }.preview-reminders em { float: right; color: #d16c00; font-style: normal; }
.problem-section { background: #f8fbfe; }.card-grid { display: grid; gap: 1rem; }.card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 .5rem 1.5rem rgba(11,37,84,.04); }.card p { margin-bottom: 0; }.icon { display: inline-grid; width: 2.25rem; height: 2.25rem; place-items: center; margin-bottom: 1.2rem; border-radius: .6rem; background: var(--sky); color: var(--blue); font-size: .75rem; font-weight: 900; }.problem-closing { margin: 2rem auto 0; color: var(--navy); font-size: 1.12rem; font-weight: 800; text-align: center; }
.flow-list { display: grid; gap: 1rem; padding: 0; list-style: none; }.flow-list li { position: relative; padding: 1rem 1rem 1rem 4rem; border-left: 2px solid #b8d8f5; }.flow-list span { position: absolute; top: .95rem; left: -.8rem; display: grid; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-size: .75rem; font-weight: 800; }.flow-list h3 { margin-bottom: .2rem; }.flow-list p { margin-bottom: 0; font-size: .9rem; }
.public-request-section { background: var(--sky); }.phone-frame { width: min(100%, 19rem); margin-inline: auto; padding: .65rem; border: .45rem solid #172237; border-radius: 2rem; background: #172237; box-shadow: var(--shadow); }.phone-speaker { width: 5rem; height: 1rem; margin: -.1rem auto .5rem; border-radius: 1rem; background: #172237; }.phone-screen { min-height: 28rem; padding: 2rem 1.25rem; border-radius: 1.3rem; background: #fff; }.public-brand { margin-bottom: 3rem; color: var(--blue); font-size: .8rem; font-weight: 900; }.phone-screen p { margin-bottom: .1rem; font-size: .8rem; }.phone-screen strong { display: block; margin-bottom: 2rem; font-size: 1.35rem; line-height: 1.2; }.phone-screen label { display: block; margin-bottom: 1rem; color: var(--muted); font-size: .7rem; }.phone-screen label span { display: block; margin-top: .35rem; padding: .65rem; border: 1px solid var(--line); border-radius: .45rem; color: var(--ink); font-size: .8rem; }.phone-screen button { width: 100%; margin-top: .5rem; padding: .75rem; font-size: .78rem; }.phone-screen small { display: block; margin-top: 1rem; color: var(--muted); font-size: .65rem; text-align: center; }.check-list { display: grid; gap: .65rem; padding: 0; color: var(--ink); list-style: none; font-size: .92rem; font-weight: 600; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }.feature-card { padding: 1.2rem; }.feature-icon { display: inline-grid; width: 2.1rem; height: 2.1rem; place-items: center; margin-bottom: 1rem; border-radius: .55rem; background: var(--sky); color: var(--blue); font-weight: 900; }.feature-card h3 { font-size: 1rem; }.feature-card p { font-size: .85rem; }.feature-card.featured { grid-column: 1 / -1; border-color: var(--blue); background: linear-gradient(145deg, #f7fbff, #e7f4ff); }.featured .feature-icon { background: var(--blue); color: var(--white); }.featured .card-kicker { margin-bottom: .3rem; font-size: .65rem; }
.recurrence-section { background: var(--navy); color: var(--white); }.recurrence-section .eyebrow { color: #8cd4ff; }.recurrence-section p { color: #c6d7ef; }.reminder-stack { display: grid; gap: .75rem; align-content: center; }.reminder-card { padding: 1.2rem; border-radius: .85rem; background: var(--white); color: var(--navy); box-shadow: 0 .8rem 1.2rem rgba(0,0,0,.12); }.reminder-card span, .reminder-card strong, .reminder-card small { display: block; }.reminder-card span { color: #c65c00; font-size: .7rem; font-weight: 800; text-transform: uppercase; }.reminder-card strong { margin: .25rem 0; }.reminder-card small { color: var(--muted); }.reminder-card button { margin-top: .9rem; }.reminder-card.muted { padding: .9rem 1.2rem; opacity: .85; }.reminder-card.muted strong { font-size: .9rem; }
.context-section { background: #f8fbfe; }.connection-map { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; max-width: 60rem; margin: 0 auto 1.8rem; }.connection-map span, .connection-map strong { padding: .55rem .7rem; border-radius: .5rem; background: var(--white); box-shadow: 0 .3rem .8rem rgba(11,37,84,.07); font-size: .8rem; }.connection-map strong { background: var(--blue); color: var(--white); }.connection-map i { color: var(--blue); font-style: normal; }.context-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.price-card { max-width: 28rem; margin: 0 auto; padding: 2rem; border: 2px solid #a6d5ff; border-radius: var(--radius); background: linear-gradient(160deg, #f8fcff, #eaf6ff); box-shadow: var(--shadow); text-align: center; }.price-label { margin-bottom: .5rem; color: var(--blue); font-weight: 800; }.price { margin-bottom: .4rem; color: var(--navy); font-size: 3.6rem; font-weight: 900; line-height: 1; letter-spacing: -.07em; }.price span { font-size: 2rem; }.price small { font-size: 1rem; letter-spacing: normal; }.price-card .check-list { margin: 1.5rem 0; text-align: left; }.price-card .button { width: 100%; }
.narrow { max-width: 47rem; }.faq-list { display: grid; gap: .75rem; }.faq-list details { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--white); }.faq-list summary { cursor: pointer; color: var(--navy); font-weight: 800; }.faq-list p { margin: .8rem 0 0; }.final-cta { background: var(--blue); color: var(--white); }.final-cta .eyebrow { color: #d4efff; }.final-cta p { color: #e3f3ff; }.final-cta .button { margin: .5rem auto 1rem; }.final-cta small { display: block; color: #d4efff; }.site-footer { padding: 2.5rem 0; background: var(--navy-deep); color: #dbeaff; }.footer-content { display: grid; gap: 1rem; }.site-footer .brand { color: var(--white); }.site-footer p { margin: 0; color: #aebfd8; }.site-footer nav { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; font-size: .85rem; }.site-footer nav a:hover { color: var(--white); text-decoration: underline; }.site-footer nav span { color: #aebfd8; }.site-footer small { color: #8da4c4; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .js [data-reveal] { opacity: 0; transform: translateY(1rem); transition: opacity .5s ease, transform .5s ease; } .js [data-reveal].is-visible { opacity: 1; transform: none; }
.media-slot { position: relative; }
.replaceable-media { position: absolute; z-index: 1; inset: 0; display: none; overflow: hidden; border-radius: inherit; background: var(--sky); }.js .replaceable-media { display: block; }
.replaceable-media[hidden] { display: none; }
.replaceable-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media .replaceable-media { border: 1px solid #bed0e4; border-radius: 1rem; box-shadow: 0 1.5rem 4rem rgba(11,37,84,.16); }
.public-request-media { width: min(100%, 19rem); margin-inline: auto; }
.public-request-media .replaceable-media { border-radius: 2rem; }
.reminder-media .replaceable-media { border-radius: .85rem; background: var(--white); box-shadow: 0 .8rem 1.2rem rgba(0,0,0,.12); }
.reminder-media .replaceable-media img { object-fit: contain; }
.showcase-slot { aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: .85rem; background: var(--white); box-shadow: 0 .5rem 1.5rem rgba(11,37,84,.04); }.showcase-slot .replaceable-media { background: var(--white); }.showcase-slot .replaceable-media img { object-fit: contain; }
.mockup-fallback { display: grid; height: 100%; gap: .65rem; min-height: 0; padding: 1.2rem; background: linear-gradient(145deg, #f7fbff, #eaf5ff); }
.mockup-fallback small { color: var(--blue); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.mockup-fallback strong { color: var(--navy); font-size: 1.1rem; }
.mockup-fallback span { padding: .45rem .55rem; border-radius: .4rem; background: var(--white); color: var(--muted); font-size: .78rem; }
@media (min-width: 48rem) { .container { width: min(100% - 4rem, 72rem); }.section { padding: 6.5rem 0; }.menu-toggle { display: none; }.nav-links { display: flex; position: static; align-items: center; gap: 1.1rem; padding: 0; border: 0; box-shadow: none; background: transparent; }.nav-links > a:not(.button) { padding: 0; font-size: .88rem; }.hero-grid, .split-grid, .recurrence-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }.hero-preview, .hero-media .replaceable-media { transform: rotate(1.25deg); }.problem-grid { grid-template-columns: repeat(3, 1fr); }.flow-list { grid-template-columns: repeat(6, 1fr); gap: .55rem; }.flow-list li { min-height: 11rem; padding: 3.1rem .55rem .5rem; border-top: 2px solid #b8d8f5; border-left: 0; }.flow-list span { top: -.85rem; left: .55rem; }.flow-list h3 { font-size: .95rem; }.flow-list p { font-size: .78rem; }.feature-grid { grid-template-columns: repeat(3, 1fr); }.feature-card.featured { grid-column: auto; }.public-request-media { margin-left: auto; margin-right: 2rem; }.footer-content { grid-template-columns: 1.2fr 1.6fr; align-items: center; }.footer-content small { grid-column: 1 / -1; } }
@media (min-width: 64rem) { .hero { padding-top: 6rem; }.preview-content { padding: 1.5rem; }.app-preview { min-height: 25rem; }.feature-card { padding: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1; transform: none; } }

/* Recurrence-first visual hierarchy */
.hero { background: radial-gradient(circle at 90% 12%, rgba(158, 213, 255, .35), transparent 28rem), linear-gradient(180deg, #f6fbff 0%, var(--white) 88%); }
.hero-copy { position: relative; z-index: 1; }
.browser-frame, .hero-media .replaceable-media { box-shadow: var(--shadow-raised); }
.problem-section { background: var(--surface-soft); }
.problem-section .section-intro { max-width: 48rem; }
.problem-closing, .problem-statement { max-width: 42rem; margin: 2.5rem auto 0; color: var(--navy); font-size: clamp(1.5rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; text-align: center; }
.workflow-section { overflow: hidden; }
.recurrence-cycle { position: relative; display: grid; gap: 1.35rem; padding: 0; list-style: none; }
.recurrence-cycle::before { position: absolute; top: .8rem; bottom: .8rem; left: 0; width: 2px; background: #b8d8f5; content: ""; }
.recurrence-cycle li { z-index: 1; min-height: 5.25rem; padding-left: 4.25rem; border-left: 0; }
.flow-list span { box-shadow: 0 0 0 .35rem var(--white); }
.proof-section--maintenance, .recurrence-section { background: var(--navy); color: var(--white); }
.proof-section--maintenance .eyebrow, .recurrence-section .eyebrow { color: #8cd4ff; }
.proof-section--maintenance p, .recurrence-section p { color: #c6d7ef; }
.proof-section--history, .context-section { background: var(--surface-soft); }
.proof-section--public-request, .public-request-section { background: var(--accent-soft); }
.proof-section--work-order, .work-order-section { position: relative; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.proof-section--work-order::before, .work-order-section::before { position: absolute; inset: auto -10rem -12rem auto; width: 30rem; height: 30rem; border-radius: 50%; background: rgba(18, 103, 214, .22); content: ""; }
.proof-section--work-order .container, .work-order-section .container { position: relative; }
.proof-section--work-order .eyebrow, .work-order-section .eyebrow { color: #8cd4ff; }
.proof-section--work-order p, .work-order-section p { color: #c6d7ef; }
.work-order-section .showcase-slot { border-color: rgba(158, 213, 255, .5); box-shadow: var(--shadow-raised); }
.operation-path, .whatsapp-path { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; max-width: 60rem; margin: 0 auto 1.8rem; }
.operation-path span, .operation-path strong, .whatsapp-path span, .whatsapp-path strong { padding: .55rem .7rem; border-radius: .5rem; background: var(--white); box-shadow: 0 .3rem .8rem rgba(11, 37, 84, .07); font-size: .8rem; }
.operation-path strong, .whatsapp-path strong { background: var(--blue); color: var(--white); }
.operation-path i, .whatsapp-path i { color: var(--blue); font-style: normal; }
@media (min-width: 48rem) {
  .proof-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
  .recurrence-cycle { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .55rem; }
  .recurrence-cycle::before { display: none; }
  .recurrence-cycle li { min-height: 11rem; padding: 3.1rem .55rem .5rem; border-top: 2px solid #b8d8f5; border-left: 0; }
  .recurrence-cycle span { top: -.85rem; left: .55rem; }
  .recurrence-cycle h3 { font-size: .95rem; }
  .recurrence-cycle p { font-size: .78rem; }
}
@media (min-width: 64rem) {
  .proof-section--history .proof-grid > :first-child { order: 2; }
}

/* Responsive refinements */
.hero-media { aspect-ratio: 8 / 5; }
.hero-media .browser-frame { display: grid; height: 100%; grid-template-rows: 2.2rem minmax(0, 1fr); }
.hero-media .app-preview { min-height: 0; }
.connection-map > .connection-step { display: inline-flex; align-items: center; gap: .55rem; padding: 0; background: transparent; box-shadow: none; }
.connection-map > .connection-step > span { padding: .55rem .7rem; border-radius: .5rem; background: var(--white); box-shadow: 0 .3rem .8rem rgba(11,37,84,.07); font-size: .8rem; }
.connection-map > .connection-step > i { color: var(--blue); font-style: normal; }
@media (min-width: 48rem) and (max-width: 63.999rem) { .menu-toggle { display: inline-grid; }.nav-links { display: none; }.recurrence-cycle { grid-template-columns: 1fr; gap: 1.35rem; }.recurrence-cycle::before { display: block; }.recurrence-cycle li { min-height: 5.25rem; padding: 1rem 1rem 1rem 4.25rem; border-top: 0; border-left: 0; }.recurrence-cycle span { top: .95rem; left: -.8rem; }.recurrence-cycle h3 { font-size: 1.2rem; }.recurrence-cycle p { font-size: .9rem; } }
@media (min-width: 64rem) { .recurrence-cycle { grid-template-columns: repeat(7, minmax(0, 1fr)); } }

/* Extra-small screens */
@media (max-width: 23rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { width: 100%; min-width: 0; }
  .container { width: min(100% - 3rem, 72rem); }
  .hero { padding-top: 2.5rem; }
  h1 { font-size: clamp(2rem, 9vw, 2.35rem); }
  .hero-actions { display: grid; gap: .75rem; }
  .hero-actions .button { width: 100%; }
  .hero-actions .text-link { justify-content: center; }
}

.section[id] { scroll-margin-top: 5.5rem; }