:root {
    --ink: #11221d;
    --ink-soft: #50605a;
    --ink-faint: #78847f;
    --paper: #f6f7f4;
    --surface: #ffffff;
    --surface-soft: #eef2ee;
    --night: #07130f;
    --night-soft: #0c1e18;
    --line: rgba(17, 34, 29, 0.12);
    --line-dark: rgba(255, 255, 255, 0.12);
    --mint: #17e79b;
    --mint-strong: #00c985;
    --mint-soft: #c9ffe8;
    --lime: #c8ff6a;
    --blue: #6ab6ff;
    --violet: #ad8cff;
    --orange: #ffb45f;
    --danger: #ff756f;
    --shadow-sm: 0 12px 36px rgba(7, 19, 15, 0.08);
    --shadow-lg: 0 36px 90px rgba(7, 19, 15, 0.18);
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 36px;
    --max: 1180px;
    --font-display: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
    --font-body: "Inter", "Avenir Next", "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

button,
a,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

button {
    border: 0;
}

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--ink);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.container {
    width: min(calc(100% - 40px), var(--max));
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 116px 0;
}

.section-dark {
    overflow: hidden;
    background: var(--night);
    color: #f4fff9;
}

.section-kicker,
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    color: #177f5b;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.2;
    text-transform: uppercase;
}

.section-dark .section-kicker {
    color: var(--mint);
}

.section-kicker::before,
.eyebrow::before {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 14%, transparent);
    content: "";
}

.section-heading {
    max-width: 760px;
    margin-bottom: 54px;
}

.section-heading.center {
    margin-inline: auto;
    text-align: center;
}

.section-heading.center .section-kicker {
    justify-content: center;
}

.section-heading h2,
.closing-copy h2 {
    max-width: 820px;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.15rem, 5vw, 4.65rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.02;
}

.section-heading.center h2 {
    margin-inline: auto;
}

.section-heading p {
    max-width: 650px;
    margin: 22px 0 0;
    color: var(--ink-soft);
    font-size: 1.08rem;
}

.section-heading.center p {
    margin-inline: auto;
}

.section-dark .section-heading p {
    color: rgba(236, 255, 246, 0.66);
}

.nav-shell {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding: 16px 0;
    transition: padding 180ms ease;
}

.nav-shell.is-scrolled {
    padding: 9px 0;
}

.nav-inner {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 8px 10px 8px 18px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 22px;
    background: rgba(8, 22, 17, 0.72);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(18px);
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    width: 138px;
    height: 44px;
    object-fit: contain;
    object-position: left center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links > a {
    padding: 10px 13px;
    border-radius: 11px;
    color: rgba(244, 255, 249, 0.7);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease;
}

.nav-links > a:hover,
.nav-links > a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-toggle {
    min-width: 44px;
    padding: 10px 9px;
    border: 1px solid var(--line-dark);
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, 0.74);
    cursor: pointer;
    font-size: 0.76rem;
    font-weight: 800;
}

.lang-toggle:hover,
.lang-toggle:focus-visible {
    color: #fff;
}

.nav-cta,
.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 13px;
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.nav-cta,
.button-primary {
    background: var(--mint);
    box-shadow: 0 11px 28px rgba(23, 231, 155, 0.24);
    color: #062118;
}

.nav-cta:hover,
.button-primary:hover {
    transform: translateY(-2px);
    background: #39f0ae;
    box-shadow: 0 16px 34px rgba(23, 231, 155, 0.3);
}

.button-secondary {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #f4fff9;
}

.button-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
}

.button svg,
.nav-cta svg {
    width: 17px;
    height: 17px;
}

.menu-button {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-dark);
    border-radius: 12px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.menu-button svg {
    width: 20px;
    height: 20px;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 176px 0 90px;
    background:
        radial-gradient(circle at 50% -15%, rgba(23, 231, 155, 0.19), transparent 34%),
        radial-gradient(circle at 87% 25%, rgba(106, 182, 255, 0.1), transparent 26%),
        var(--night);
    color: #f4fff9;
}

.hero::before {
    position: absolute;
    inset: 0;
    opacity: 0.24;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000, transparent 88%);
    content: "";
    pointer-events: none;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(6px);
    pointer-events: none;
}

.hero-orb.one {
    top: 210px;
    left: -160px;
    width: 340px;
    height: 340px;
    border: 1px solid rgba(23, 231, 155, 0.23);
    box-shadow: inset 0 0 90px rgba(23, 231, 155, 0.08);
}

.hero-orb.two {
    top: 90px;
    right: -210px;
    width: 480px;
    height: 480px;
    border: 1px solid rgba(106, 182, 255, 0.16);
}

.hero-copy {
    position: relative;
    z-index: 2;
    max-width: 1020px;
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    padding: 8px 12px;
    border: 1px solid rgba(23, 231, 155, 0.25);
    border-radius: 999px;
    background: rgba(23, 231, 155, 0.07);
    color: var(--mint);
    letter-spacing: 0.1em;
}

.hero h1 {
    max-width: 1010px;
    margin: 12px auto 0;
    font-family: var(--font-display);
    font-size: clamp(3.15rem, 7.3vw, 6.9rem);
    font-weight: 800;
    letter-spacing: -0.072em;
    line-height: 0.91;
}

.hero h1 .accent {
    color: var(--mint);
}

.title-channel-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 0.08em;
    transform: translateY(-0.03em);
    white-space: nowrap;
}

.title-channel-icon {
    display: inline-flex;
    width: 0.59em;
    height: 0.59em;
    align-items: center;
    justify-content: center;
    border-radius: 0.19em;
    background: rgba(255, 255, 255, 0.1);
    vertical-align: 0.11em;
}

.title-channel-icon svg {
    width: 69%;
    height: 69%;
    fill: currentColor;
}

.title-channel-icon.whatsapp { color: #25d366; }
.title-channel-icon.instagram { color: #ff6aa8; }
.title-channel-icon.messenger { color: #5aa8ff; }
.title-channel-icon.telegram { color: #2aa7df; }
.title-channel-icon.web { color: var(--mint); }

.hero-lede {
    max-width: 760px;
    margin: 30px auto 0;
    color: rgba(234, 255, 244, 0.68);
    font-size: clamp(1.06rem, 2vw, 1.27rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
    margin: 26px 0 0;
    padding: 0;
    color: rgba(235, 255, 245, 0.58);
    font-size: 0.82rem;
    font-weight: 700;
    list-style: none;
}

.hero-proof li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-proof li::before {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(23, 231, 155, 0.4);
    border-radius: 50%;
    background: radial-gradient(circle, var(--mint) 0 2px, transparent 3px);
    content: "";
}

.product-film-wrap {
    position: relative;
    z-index: 3;
    margin-top: 72px;
}

.product-film-wrap::before {
    position: absolute;
    inset: -60px 10% auto;
    height: 160px;
    background: radial-gradient(ellipse, rgba(23, 231, 155, 0.28), transparent 68%);
    content: "";
    filter: blur(28px);
    pointer-events: none;
}

.film-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 14px;
    color: rgba(240, 255, 247, 0.66);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.film-label::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 16px var(--mint);
    content: "";
}

.product-film {
    position: relative;
    overflow: hidden;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px);
}

.film-chrome {
    display: flex;
    height: 35px;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 0 10px;
}

.film-dots {
    display: flex;
    gap: 6px;
}

.film-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.27);
}

.film-address {
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.7rem;
    font-weight: 700;
}

.film-live {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mint);
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
}

.film-live::before {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.product-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 19px;
    background: #0b1512;
    object-fit: cover;
}

.product-video-mobile {
    display: none;
}

.channel-strip {
    position: relative;
    z-index: 3;
    padding: 30px 0 36px;
    border-top: 1px solid var(--line-dark);
    background: var(--night);
    color: #fff;
}

.channel-strip-inner {
    display: grid;
    grid-template-columns: 1.25fr repeat(5, 1fr);
    align-items: center;
    gap: 12px;
}

.channel-strip-copy {
    padding-right: 24px;
}

.channel-strip-copy strong {
    display: block;
    font-family: var(--font-display);
    font-size: 1rem;
}

.channel-strip-copy span {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.76rem;
}

.channel-pill {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.76rem;
    font-weight: 750;
}

.channel-pill-icon {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.channel-pill-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.channel-pill.whatsapp { color: #56e989; }
.channel-pill.instagram { color: #ff8dbb; }
.channel-pill.messenger { color: #78baff; }
.channel-pill.telegram { color: #57bce9; }
.channel-pill.web { color: var(--mint); }

.journey-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.journey-card {
    position: relative;
    min-height: 290px;
    overflow: hidden;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.journey-card::after {
    position: absolute;
    top: 46px;
    right: -17px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink-faint);
    content: "→";
    font-size: 1rem;
    line-height: 31px;
    text-align: center;
}

.journey-card:last-child::after {
    display: none;
}

.journey-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--ink-faint);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.journey-icon {
    display: grid;
    width: 50px;
    height: 50px;
    margin: 36px 0 22px;
    place-items: center;
    border-radius: 15px;
    background: var(--surface-soft);
    color: #147957;
}

.journey-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.journey-card:nth-child(2) .journey-icon { background: #edf6ff; color: #287ec8; }
.journey-card:nth-child(3) .journey-icon { background: #f3efff; color: #6e4fc9; }
.journey-card:nth-child(4) .journey-icon { background: #fff3e8; color: #bd6b1f; }

.journey-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.23rem;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.journey-card p {
    margin: 12px 0 0;
    color: var(--ink-soft);
    font-size: 0.91rem;
    line-height: 1.55;
}

.platform-stage {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 70px;
    align-items: center;
}

.platform-copy .section-heading {
    margin-bottom: 0;
}

.feature-list {
    display: grid;
    gap: 10px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: rgba(237, 255, 247, 0.72);
    font-size: 0.93rem;
}

.feature-list li::before {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 3px;
    border: 1px solid rgba(23, 231, 155, 0.34);
    border-radius: 7px;
    background: linear-gradient(135deg, rgba(23, 231, 155, 0.22), transparent);
    content: "✓";
    color: var(--mint);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}

.product-demo {
    position: relative;
    min-width: 0;
}

.demo-window {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 26px;
    background: #0e211b;
    box-shadow: 0 44px 100px rgba(0, 0, 0, 0.42);
}

.demo-topbar {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.demo-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 0.75rem;
    font-weight: 800;
}

.demo-mark {
    width: 19px;
    height: 19px;
    border: 5px solid var(--mint);
    border-right-color: transparent;
    border-radius: 6px;
    transform: rotate(45deg);
}

.demo-live {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.66rem;
    font-weight: 700;
}

.demo-live::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 10px var(--mint);
    content: "";
}

.demo-body {
    display: grid;
    min-height: 500px;
    grid-template-columns: 70px 1fr;
}

.demo-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 0;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(0, 0, 0, 0.08);
}

.demo-side-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: rgba(255, 255, 255, 0.31);
}

.demo-side-icon.active {
    background: rgba(23, 231, 155, 0.12);
    color: var(--mint);
}

.demo-side-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.demo-content {
    min-width: 0;
    padding: 22px;
}

.demo-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-bottom: 20px;
    padding: 5px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.045);
}

.demo-tab {
    padding: 9px 10px;
    border-radius: 9px;
    background: transparent;
    color: rgba(255, 255, 255, 0.46);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 800;
}

.demo-tab.active {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.demo-panel {
    display: none;
}

.demo-panel.active {
    display: block;
    animation: demo-in 260ms ease both;
}

@keyframes demo-in {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: none; }
}

.demo-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.demo-panel-header h3 {
    margin: 0;
    color: #f2fff8;
    font-family: var(--font-display);
    font-size: 0.95rem;
}

.demo-badge {
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(23, 231, 155, 0.1);
    color: var(--mint);
    font-size: 0.59rem;
    font-weight: 800;
}

.inbox-list {
    display: grid;
    gap: 8px;
}

.inbox-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    gap: 11px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.inbox-row.active {
    border-color: rgba(23, 231, 155, 0.24);
    background: rgba(23, 231, 155, 0.07);
}

.inbox-avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    background: #233c34;
    color: #d8fff0;
    font-size: 0.66rem;
    font-weight: 800;
}

.inbox-copy {
    min-width: 0;
}

.inbox-copy strong,
.inbox-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-copy strong {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.72rem;
}

.inbox-copy span {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.62rem;
}

.source-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.035);
}

.source-dot.wa { background: #25d366; }
.source-dot.ig { background: #ee5a9e; }
.source-dot.web { background: var(--mint); }
.source-dot.msg { background: #3793ff; }

.kanban {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.kanban-column {
    min-width: 0;
    padding: 9px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.kanban-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, 0.47);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
}

.lead-card {
    margin-bottom: 7px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: #142a22;
}

.lead-card strong,
.lead-card span {
    display: block;
}

.lead-card strong {
    overflow: hidden;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.63rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-card span {
    margin-top: 4px;
    color: var(--mint);
    font-size: 0.53rem;
}

.ops-list {
    display: grid;
    gap: 9px;
}

.ops-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 11px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
}

.ops-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(173, 140, 255, 0.13);
    color: var(--violet);
}

.ops-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.ops-copy strong,
.ops-copy span {
    display: block;
}

.ops-copy strong { color: rgba(255, 255, 255, 0.8); font-size: 0.68rem; }
.ops-copy span { color: rgba(255, 255, 255, 0.38); font-size: 0.58rem; }

.ops-status {
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(23, 231, 155, 0.1);
    color: var(--mint);
    font-size: 0.52rem;
    font-weight: 800;
}

.floating-event {
    position: absolute;
    right: -28px;
    bottom: 28px;
    z-index: 4;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 11px;
    width: 230px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(21, 43, 35, 0.92);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(14px);
}

.floating-event-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(23, 231, 155, 0.13);
    color: var(--mint);
}

.floating-event-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.floating-event strong,
.floating-event span {
    display: block;
}

.floating-event strong { color: #fff; font-size: 0.68rem; }
.floating-event span { color: rgba(255, 255, 255, 0.47); font-size: 0.57rem; }

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.bento-card {
    position: relative;
    min-height: 315px;
    overflow: hidden;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.bento-card.wide { grid-column: span 7; }
.bento-card.narrow { grid-column: span 5; }
.bento-card.third { grid-column: span 4; min-height: 285px; }

.bento-card.dark {
    border-color: transparent;
    background: var(--ink);
    color: #fff;
}

.bento-card.mint {
    border-color: transparent;
    background: var(--mint-soft);
}

.bento-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dark .bento-label {
    border-color: var(--line-dark);
    color: rgba(255, 255, 255, 0.6);
}

.bento-card h3 {
    max-width: 490px;
    margin: 20px 0 0;
    font-family: var(--font-display);
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.bento-card p {
    max-width: 510px;
    margin: 13px 0 0;
    color: var(--ink-soft);
    font-size: 0.91rem;
}

.bento-card.dark p {
    color: rgba(255, 255, 255, 0.58);
}

.mini-pipeline {
    position: absolute;
    right: 28px;
    bottom: 26px;
    left: 28px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mini-stage {
    min-width: 0;
    padding: 10px;
    border-radius: 11px;
    background: var(--surface-soft);
}

.mini-stage > span {
    display: block;
    margin-bottom: 7px;
    color: var(--ink-faint);
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
}

.mini-lead {
    margin-top: 5px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: 0.57rem;
    font-weight: 700;
}

.assistant-orbit {
    position: absolute;
    right: -55px;
    bottom: -105px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(23, 231, 155, 0.2);
    border-radius: 50%;
}

.assistant-orbit::before,
.assistant-orbit::after {
    position: absolute;
    inset: 42px;
    border: 1px solid rgba(23, 231, 155, 0.14);
    border-radius: inherit;
    content: "";
}

.assistant-orbit::after {
    inset: 87px;
    background: var(--mint);
    box-shadow: 0 0 70px rgba(23, 231, 155, 0.34);
}

.task-stack {
    position: absolute;
    right: 26px;
    bottom: 24px;
    left: 26px;
    display: grid;
    gap: 7px;
}

.task-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    color: var(--ink);
    font-size: 0.62rem;
    font-weight: 700;
}

.task-check {
    width: 16px;
    height: 16px;
    border: 1px solid rgba(17, 34, 29, 0.18);
    border-radius: 5px;
    background: #fff;
}

.task-row.done .task-check {
    border-color: var(--mint-strong);
    background: var(--mint-strong);
    box-shadow: inset 0 0 0 4px #fff;
}

.report-chart {
    position: absolute;
    right: 26px;
    bottom: 25px;
    left: 26px;
    display: flex;
    height: 100px;
    align-items: flex-end;
    gap: 8px;
}

.report-bar {
    flex: 1;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(to top, #15b47e, var(--mint));
}

.report-bar:nth-child(1) { height: 38%; opacity: 0.5; }
.report-bar:nth-child(2) { height: 62%; opacity: 0.65; }
.report-bar:nth-child(3) { height: 52%; opacity: 0.7; }
.report-bar:nth-child(4) { height: 86%; }
.report-bar:nth-child(5) { height: 72%; opacity: 0.82; }
.report-bar:nth-child(6) { height: 96%; }

.support-chat {
    position: absolute;
    right: 25px;
    bottom: 24px;
    left: 25px;
}

.support-bubble {
    width: 82%;
    margin-top: 7px;
    padding: 9px 11px;
    border-radius: 11px 11px 11px 3px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.73);
    font-size: 0.59rem;
}

.support-bubble.agent {
    margin-left: auto;
    border-radius: 11px 11px 3px;
    background: var(--mint);
    color: #062118;
}

.widget-preview {
    position: absolute;
    right: 24px;
    bottom: 22px;
    width: 160px;
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(7, 19, 15, 0.2);
}

.widget-head {
    padding: 11px;
    background: var(--ink);
    color: #fff;
    font-size: 0.61rem;
    font-weight: 800;
}

.widget-body {
    min-height: 86px;
    padding: 10px;
    background: #f1f4f1;
}

.widget-message {
    width: 78%;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    color: var(--ink-soft);
    font-size: 0.53rem;
}

.channels-showcase {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 74px;
    align-items: start;
}

.channels-copy {
    position: sticky;
    top: 120px;
}

.channels-copy .section-heading {
    margin-bottom: 28px;
}

.channels-copy-note {
    display: flex;
    gap: 12px;
    padding: 17px;
    border: 1px solid var(--line-dark);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.8rem;
}

.channels-copy-note strong {
    display: block;
    margin-bottom: 2px;
    color: #fff;
}

.channels-note-icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: rgba(23, 231, 155, 0.11);
    color: var(--mint);
}

.channels-note-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.channel-cards {
    display: grid;
    gap: 12px;
}

.channel-card {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 17px;
    align-items: center;
    min-height: 100px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.channel-card:hover {
    transform: translateX(-5px);
    border-color: rgba(23, 231, 155, 0.28);
    background: rgba(255, 255, 255, 0.065);
}

.channel-card-icon {
    display: grid;
    width: 60px;
    height: 60px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.channel-card-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.channel-card.whatsapp .channel-card-icon { color: #25d366; }
.channel-card.instagram .channel-card-icon { color: #fa6aa7; }
.channel-card.messenger .channel-card-icon { color: #5ca8ff; }
.channel-card.telegram .channel-card-icon { color: #3ab4e9; }
.channel-card.web .channel-card-icon { color: var(--mint); }

.channel-card h3,
.channel-card p {
    margin: 0;
}

.channel-card h3 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1rem;
}

.channel-card p {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.76rem;
}

.channel-card-arrow {
    color: rgba(255, 255, 255, 0.24);
    font-size: 1.2rem;
}

.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.comparison-card {
    padding: 36px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.comparison-card.highlight {
    border-color: rgba(23, 231, 155, 0.34);
    background: var(--ink);
    color: #fff;
}

.comparison-card > span {
    color: var(--ink-faint);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.comparison-card.highlight > span {
    color: var(--mint);
}

.comparison-card h3 {
    margin: 13px 0 0;
    font-family: var(--font-display);
    font-size: 1.55rem;
    letter-spacing: -0.04em;
}

.comparison-list {
    display: grid;
    gap: 14px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.comparison-list li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.highlight .comparison-list li {
    color: rgba(255, 255, 255, 0.68);
}

.comparison-list li::before {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--surface-soft);
    color: var(--ink-faint);
    content: "×";
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 19px;
    text-align: center;
}

.highlight .comparison-list li::before {
    background: rgba(23, 231, 155, 0.13);
    color: var(--mint);
    content: "✓";
}

.faq-grid {
    display: grid;
    grid-template-columns: 0.72fr 1.28fr;
    gap: 70px;
    align-items: start;
}

.faq-grid .section-heading {
    position: sticky;
    top: 120px;
    margin-bottom: 0;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-question {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    text-align: left;
}

.faq-plus {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-soft);
    transition: transform 180ms ease, background 180ms ease;
}

.faq-question[aria-expanded="true"] .faq-plus {
    transform: rotate(45deg);
    background: var(--mint-soft);
}

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms ease;
}

.faq-answer > div {
    overflow: hidden;
}

.faq-answer p {
    max-width: 690px;
    margin: 0;
    padding: 0 52px 24px 0;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
}

.closing {
    padding-top: 40px;
}

.closing-card {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    padding: 66px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 88% 15%, rgba(200, 255, 106, 0.26), transparent 30%),
        radial-gradient(circle at 5% 90%, rgba(106, 182, 255, 0.15), transparent 34%),
        var(--ink);
    color: #fff;
    box-shadow: var(--shadow-lg);
}

.closing-card::after {
    position: absolute;
    right: -80px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    content: "";
}

.closing-copy {
    position: relative;
    z-index: 2;
}

.closing-copy h2 {
    max-width: 780px;
    font-size: clamp(2.25rem, 5vw, 4.5rem);
}

.closing-copy p {
    max-width: 630px;
    margin: 19px 0 0;
    color: rgba(255, 255, 255, 0.61);
}

.closing-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    min-width: 220px;
}

.closing-actions .button {
    width: 100%;
}

.footer {
    padding: 62px 0 26px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 44px;
}

.footer-brand img {
    width: 150px;
    height: 50px;
    object-fit: contain;
    object-position: left center;
}

.footer-brand p {
    max-width: 360px;
    margin: 14px 0 0;
    color: var(--ink-soft);
    font-size: 0.84rem;
}

.footer-group h3 {
    margin: 0 0 13px;
    font-family: var(--font-display);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: 8px;
}

.footer-links a,
.footer-links button {
    width: fit-content;
    padding: 0;
    background: transparent;
    color: var(--ink-soft);
    cursor: pointer;
    font-size: 0.82rem;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links button:hover {
    color: var(--ink);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 0.73rem;
}

.footer-social {
    display: flex;
    gap: 8px;
}

.footer-social a {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--ink-soft);
}

.footer-social a:hover {
    background: var(--surface);
    color: var(--ink);
}

.footer-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.legal-dialog {
    width: min(720px, calc(100% - 32px));
    max-height: min(82vh, 760px);
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
}

.legal-dialog::backdrop {
    background: rgba(3, 12, 9, 0.72);
    backdrop-filter: blur(7px);
}

.legal-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 25px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
}

.legal-dialog-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.dialog-close {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--ink);
    cursor: pointer;
    font-size: 1.3rem;
}

.legal-dialog-body {
    padding: 26px;
}

.legal-dialog-body h3 {
    margin: 26px 0 7px;
    font-family: var(--font-display);
    font-size: 0.96rem;
}

.legal-dialog-body h3:first-child {
    margin-top: 0;
}

.legal-dialog-body p,
.legal-dialog-body li {
    color: var(--ink-soft);
    font-size: 0.82rem;
}

.legal-dialog-body ul {
    padding-left: 20px;
}

.mobile-cta {
    display: none;
}

@media (max-width: 1040px) {
    .nav-links {
        position: fixed;
        top: 92px;
        right: 20px;
        left: 20px;
        display: none;
        align-items: stretch;
        padding: 18px;
        border: 1px solid var(--line-dark);
        border-radius: 20px;
        background: rgba(8, 22, 17, 0.97);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(20px);
    }

    .nav-links.open {
        display: grid;
    }

    .nav-links > a {
        padding: 14px;
        font-size: 0.96rem;
    }

    .menu-button {
        display: inline-flex;
    }

    .channel-strip-inner {
        grid-template-columns: repeat(5, 1fr);
    }

    .channel-strip-copy {
        grid-column: 1 / -1;
        padding: 0 0 8px;
        text-align: center;
    }

    .journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .journey-card::after {
        display: none;
    }

    .platform-stage,
    .channels-showcase {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .channels-copy,
    .faq-grid .section-heading {
        position: static;
    }

    .product-demo {
        width: min(760px, 100%);
        margin-inline: auto;
    }

    .channels-copy .section-heading {
        max-width: 760px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .closing-card {
        grid-template-columns: 1fr;
    }

    .closing-actions {
        display: flex;
        flex-wrap: wrap;
    }

    .closing-actions .button {
        width: auto;
    }
}

@media (max-width: 760px) {
    .container {
        width: min(calc(100% - 28px), var(--max));
    }

    .section {
        padding: 82px 0;
    }

    .section-heading {
        margin-bottom: 36px;
    }

    .nav-shell {
        padding: 10px 0;
    }

    .nav-inner {
        min-height: 57px;
        padding: 6px 7px 6px 12px;
        border-radius: 17px;
    }

    .brand img {
        width: 112px;
        height: 38px;
    }

    .nav-cta {
        display: none;
    }

    .hero {
        padding: 130px 0 58px;
    }

    .eyebrow {
        font-size: 0.65rem;
    }

    .hero h1 {
        font-size: clamp(2.95rem, 14vw, 4.9rem);
        letter-spacing: -0.068em;
        line-height: 0.93;
    }

    .title-channel-row {
        display: flex;
        width: fit-content;
        margin: 0.18em auto 0;
        gap: 7px;
    }

    .title-channel-icon {
        width: 0.64em;
        height: 0.64em;
    }

    .hero-lede {
        margin-top: 24px;
        font-size: 1rem;
    }

    .hero-actions {
        display: grid;
    }

    .hero-actions .button {
        width: 100%;
    }

    .hero-proof {
        display: grid;
        justify-content: start;
        gap: 10px;
        width: fit-content;
        margin: 22px auto 0;
        text-align: left;
    }

    .product-film-wrap {
        margin-top: 48px;
    }

    .product-film {
        width: min(360px, 100%);
        margin-inline: auto;
        padding: 8px;
        border-radius: 26px;
    }

    .film-chrome {
        height: 29px;
    }

    .film-address {
        display: none;
    }

    .product-video-desktop {
        display: none;
    }

    .product-video-mobile {
        display: block;
        aspect-ratio: 9 / 16;
        border-radius: 18px;
    }

    .channel-strip {
        padding: 24px 0 28px;
    }

    .channel-strip-inner {
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;
    }

    .channel-pill {
        display: grid;
        min-width: 0;
        justify-items: center;
        gap: 5px;
        padding: 8px 3px;
        font-size: 0.55rem;
        text-align: center;
    }

    .channel-pill-icon {
        width: 31px;
        height: 31px;
    }

    .journey-grid,
    .comparison {
        grid-template-columns: 1fr;
    }

    .journey-card {
        min-height: 255px;
    }

    .platform-stage {
        gap: 38px;
    }

    .demo-body {
        min-height: 455px;
        grid-template-columns: 48px 1fr;
    }

    .demo-content {
        padding: 14px 11px;
    }

    .demo-sidebar {
        padding-top: 14px;
    }

    .demo-side-icon {
        width: 32px;
        height: 32px;
    }

    .demo-tabs {
        gap: 2px;
    }

    .demo-tab {
        padding-inline: 5px;
        font-size: 0.58rem;
    }

    .kanban {
        gap: 5px;
    }

    .kanban-column {
        padding: 6px;
    }

    .floating-event {
        right: -4px;
        bottom: -26px;
        width: 205px;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card.wide,
    .bento-card.narrow,
    .bento-card.third {
        grid-column: auto;
        min-height: 305px;
    }

    .bento-card {
        padding: 25px;
    }

    .mini-pipeline {
        right: 18px;
        bottom: 20px;
        left: 18px;
    }

    .channel-card {
        grid-template-columns: 52px 1fr;
        gap: 13px;
    }

    .channel-card-icon {
        width: 52px;
        height: 52px;
    }

    .channel-card-arrow {
        display: none;
    }

    .comparison-card {
        padding: 28px 24px;
    }

    .faq-answer p {
        padding-right: 0;
    }

    .closing {
        padding-top: 20px;
    }

    .closing-card {
        gap: 30px;
        padding: 40px 24px;
        border-radius: 27px;
    }

    .closing-actions {
        display: grid;
    }

    .closing-actions .button {
        width: 100%;
    }

    .footer {
        padding-bottom: 92px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-bottom {
        align-items: flex-start;
    }

    .mobile-cta {
        position: fixed;
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 90;
        display: flex;
        min-height: 52px;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 15px;
        background: var(--mint);
        box-shadow: 0 18px 45px rgba(7, 19, 15, 0.3);
        color: #062118;
        font-family: var(--font-display);
        font-size: 0.88rem;
        font-weight: 800;
        text-decoration: none;
    }

    .mobile-cta svg {
        width: 17px;
        height: 17px;
    }
}

/* --------------------------------------------------------------------------
   Editorial motion pass — integrated product film, Auraava Home and motion
   -------------------------------------------------------------------------- */

.anchor-alias {
    position: relative;
    top: -88px;
    display: block;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.section-kicker::before,
.eyebrow::before {
    width: 22px;
    height: 1px;
    border: 0;
    border-radius: 0;
    background: currentColor;
    box-shadow: none;
}

.eyebrow::before {
    display: none;
}

.nav-shell,
.nav-shell.is-scrolled {
    padding: 0;
}

.nav-inner,
.nav-shell.is-scrolled .nav-inner {
    width: 100%;
    max-width: none;
    min-height: 76px;
    padding: 9px clamp(18px, 4vw, 58px);
    border-width: 0 0 1px;
    border-color: rgba(23, 33, 29, 0.08);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 10px 35px rgba(23, 33, 29, 0.045);
    backdrop-filter: blur(24px) saturate(165%);
    transition: min-height 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.nav-shell.is-scrolled .nav-inner {
    min-height: 68px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 35px rgba(23, 33, 29, 0.075);
}

.nav-links > a {
    position: relative;
}

.nav-links > a::after {
    position: absolute;
    right: 13px;
    bottom: 6px;
    left: 13px;
    height: 1px;
    background: #18805b;
    content: "";
    opacity: 0;
    transform: scaleX(0.2);
    transition: opacity 180ms ease, transform 180ms ease;
}

.nav-links > a:hover::after,
.nav-links > a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.hero {
    isolation: isolate;
    padding-top: 164px;
}

.hero > .container {
    position: relative;
    z-index: 2;
}

.hero-network {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0.85;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 5%, #000 72%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 5%, #000 72%, transparent 98%);
}

.hero::before {
    z-index: -1;
    opacity: 0.72;
    background-size: 88px 88px;
}

.hero-orb {
    display: none;
}

.title-channel-icon {
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms ease;
}

.title-channel-icon:hover {
    z-index: 2;
    transform: translateY(-0.12em) scale(1.08) rotate(-3deg);
    box-shadow: 0 12px 28px rgba(23, 33, 29, 0.13);
}

.hero-proof li::before {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border: 1px solid rgba(23, 33, 29, 0.12);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.72);
    color: #147554;
    content: "✓";
    font-size: 0.65rem;
    line-height: 1;
}

.product-film-wrap {
    margin-top: 76px;
    perspective: 1200px;
}

.product-film-wrap::before {
    inset: -50px 3% -54px;
    height: auto;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(39, 132, 96, 0.13), rgba(185, 218, 204, 0.055) 45%, transparent 72%);
    filter: blur(35px);
}

.product-film {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: transparent;
    box-shadow:
        0 48px 96px rgba(25, 42, 35, 0.14),
        0 9px 28px rgba(25, 42, 35, 0.075);
    transform: translateZ(0);
}

.product-film::before,
.product-film::after {
    position: absolute;
    z-index: 2;
    right: 0;
    left: 0;
    height: 13%;
    content: "";
    pointer-events: none;
}

.product-film::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
}

.product-film::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(15, 30, 24, 0.13), transparent);
}

.product-video {
    border: 0;
    border-radius: 30px;
    background: transparent;
    object-fit: cover;
}

.product-video::-webkit-media-controls,
.product-video::-webkit-media-controls-panel,
.product-video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.demo-live::before {
    display: none;
}

.source-dot {
    border-radius: 4px;
}

.journey-card,
.bento-card,
.channel-card,
.home-capability {
    transform-style: preserve-3d;
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
}

.motion-ready [data-reveal] {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity 760ms cubic-bezier(.2, .75, .25, 1) var(--reveal-delay, 0ms),
        transform 840ms cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.home-app-section {
    isolation: isolate;
    overflow: hidden;
    border-top: 1px solid rgba(63, 49, 37, 0.08);
    border-bottom: 1px solid rgba(63, 49, 37, 0.08);
    background:
        radial-gradient(circle at 13% 18%, rgba(196, 149, 106, 0.14), transparent 27%),
        radial-gradient(circle at 87% 13%, rgba(54, 174, 129, 0.1), transparent 29%),
        linear-gradient(145deg, #fbfaf7, #f6f3ee 52%, #f8faf7);
}

.home-light-canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.home-app-shell {
    position: relative;
    z-index: 1;
}

.home-app-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(530px, 1.14fr);
    align-items: center;
    gap: clamp(56px, 8vw, 110px);
}

.home-app-copy {
    max-width: 530px;
}

.home-app-copy h2 {
    margin: 27px 0 22px;
    color: #2b2b27;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 5.2vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.062em;
    line-height: 0.98;
}

.home-app-copy > p:not(.section-kicker) {
    margin: 0;
    color: #6c6961;
    font-size: 1.04rem;
}

.home-app-identity {
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-app-identity img {
    width: 66px;
    height: 66px;
    border-radius: 17px;
    box-shadow: 0 15px 35px rgba(57, 43, 33, 0.16);
}

.home-app-identity div {
    display: grid;
    gap: 2px;
}

.home-app-identity span {
    color: #8a8177;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-app-identity strong {
    color: #2d2c28;
    font-family: var(--font-display);
    font-size: 1.35rem;
}

.app-store-link {
    display: inline-block;
    margin-top: 30px;
    transition: transform 220ms ease, filter 220ms ease;
}

.app-store-link:hover {
    filter: drop-shadow(0 12px 18px rgba(48, 38, 30, 0.16));
    transform: translateY(-3px);
}

.app-store-link img {
    width: 174px;
    height: auto;
}

.home-gallery {
    position: relative;
    min-width: 0;
}

.home-gallery-glow {
    position: absolute;
    top: 15%;
    left: 50%;
    width: 75%;
    height: 64%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 149, 106, 0.24), rgba(62, 170, 129, 0.1) 48%, transparent 72%);
    filter: blur(44px);
    transform: translateX(-50%);
}

.home-gallery-stage {
    position: relative;
    height: 640px;
    perspective: 1250px;
}

.home-slide {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 0;
    width: 282px;
    margin: 0;
    opacity: 0;
    filter: saturate(0.74) brightness(0.92);
    pointer-events: none;
    transform: translateX(-50%) scale(0.76);
    transition: opacity 680ms ease, transform 820ms cubic-bezier(.16, 1, .3, 1), filter 680ms ease;
}

.home-slide img {
    width: 100%;
    border: 8px solid #181b19;
    border-radius: 42px;
    box-shadow: 0 35px 65px rgba(49, 39, 31, 0.21), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.home-slide.active {
    z-index: 3;
    opacity: 1;
    filter: none;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
}

.home-slide.prev,
.home-slide.next {
    z-index: 1;
    opacity: 0.42;
}

.home-slide.prev {
    transform: translateX(-112%) translateY(52px) scale(0.72) rotateY(12deg);
}

.home-slide.next {
    transform: translateX(12%) translateY(52px) scale(0.72) rotateY(-12deg);
}

.home-gallery-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 8px;
}

.home-gallery-controls button {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border: 1px solid rgba(57, 45, 35, 0.11);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.76);
    color: #45423d;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(57, 45, 35, 0.06);
    transition: transform 180ms ease, background 180ms ease;
}

.home-gallery-controls button:hover {
    background: #fff;
    transform: translateY(-2px);
}

.home-gallery-progress {
    display: flex;
    gap: 6px;
}

.home-gallery-progress span {
    width: 20px;
    height: 3px;
    border-radius: 10px;
    background: rgba(58, 53, 47, 0.16);
    cursor: pointer;
    transition: width 220ms ease, background 220ms ease;
}

.home-gallery-progress span.active {
    width: 38px;
    background: #846449;
}

.home-capabilities {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 92px;
    border-top: 1px solid rgba(57, 45, 35, 0.1);
    border-left: 1px solid rgba(57, 45, 35, 0.1);
}

.home-capability {
    position: relative;
    min-height: 250px;
    padding: 30px;
    border-right: 1px solid rgba(57, 45, 35, 0.1);
    border-bottom: 1px solid rgba(57, 45, 35, 0.1);
    background: rgba(255, 255, 255, 0.37);
}

.home-capability > span {
    color: #a39180;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.home-capability h3 {
    margin: 54px 0 12px;
    color: #34322e;
    font-family: var(--font-display);
    font-size: 1.18rem;
    letter-spacing: -0.025em;
}

.home-capability p {
    margin: 0;
    color: #777168;
    font-size: 0.86rem;
    line-height: 1.6;
}

.home-feature-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    margin-top: 34px;
    color: #756d64;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.home-feature-line span:not(:last-child)::after {
    margin-left: 28px;
    color: #b1a69b;
    content: "—";
}

.legal-dialog {
    width: min(840px, calc(100% - 32px));
    max-height: min(86vh, 860px);
}

.legal-dialog-body {
    padding: 28px clamp(24px, 5vw, 48px) 46px;
}

.legal-dialog-body h3 {
    margin: 34px 0 13px;
    color: var(--ink);
    font-size: 1.15rem;
}

.legal-dialog-body h4 {
    margin: 27px 0 8px;
    color: #25332e;
    font-family: var(--font-display);
    font-size: 0.92rem;
}

.legal-dialog-body p,
.legal-dialog-body li {
    color: #5f6b66;
    font-size: 0.86rem;
    line-height: 1.72;
}

.legal-dialog-body li + li {
    margin-top: 8px;
}

.support-dialog {
    width: min(540px, calc(100% - 32px));
}

.support-dialog-body {
    display: grid;
    justify-items: center;
    padding: 48px;
    text-align: center;
}

.support-dialog-body > img {
    width: 178px;
}

.support-dialog-body p {
    max-width: 410px;
    margin: 26px 0 22px;
    color: var(--ink-soft);
}

.support-dialog-body > span {
    margin-top: 18px;
    color: var(--ink-faint);
    font-size: 0.78rem;
}

@keyframes icon-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: no-preference) {
    .title-channel-icon:nth-child(2n) {
        animation: icon-breathe 4.8s ease-in-out infinite;
    }

    .title-channel-icon:nth-child(3n) {
        animation: icon-breathe 5.6s ease-in-out .7s infinite;
    }

    .product-film {
        animation: film-breathe 8s ease-in-out infinite;
    }
}

@keyframes film-breathe {
    0%, 100% { transform: translateY(0) rotateX(0); }
    50% { transform: translateY(-6px) rotateX(0.35deg); }
}

@media (max-width: 1040px) {
    .nav-links {
        top: 76px;
    }

    .home-app-intro {
        grid-template-columns: 1fr;
    }

    .home-app-copy {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .home-app-identity {
        justify-content: center;
    }

    .home-gallery {
        width: min(650px, 100%);
        margin-inline: auto;
    }

    .home-capabilities {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 76px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 72px;
    }

    .nav-inner,
    .nav-shell.is-scrolled .nav-inner {
        min-height: 64px;
        padding: 7px 14px;
        border-radius: 0;
    }

    .nav-links {
        top: 64px;
        right: 10px;
        left: 10px;
    }

    .hero {
        padding-top: 126px;
    }

    .hero::before {
        background-size: 64px 64px;
    }

    .hero-network {
        opacity: 0.66;
    }

    .product-film-wrap {
        margin-top: 50px;
    }

    .product-film {
        width: min(355px, 100%);
        padding: 0;
        border-radius: 30px;
        box-shadow: 0 34px 72px rgba(25, 42, 35, 0.16);
    }

    .product-video-mobile {
        border-radius: 30px;
    }

    .home-app-section {
        padding-top: 94px;
    }

    .home-app-intro {
        gap: 48px;
    }

    .home-app-copy h2 {
        font-size: clamp(2.55rem, 12vw, 4rem);
    }

    .home-app-copy > p:not(.section-kicker) {
        font-size: 0.96rem;
    }

    .home-app-identity img {
        width: 58px;
        height: 58px;
        border-radius: 15px;
    }

    .home-gallery-stage {
        height: 510px;
    }

    .home-slide {
        width: 218px;
    }

    .home-slide img {
        border-width: 6px;
        border-radius: 34px;
    }

    .home-slide.prev {
        transform: translateX(-108%) translateY(42px) scale(0.69) rotateY(10deg);
    }

    .home-slide.next {
        transform: translateX(8%) translateY(42px) scale(0.69) rotateY(-10deg);
    }

    .home-gallery-progress span {
        width: 12px;
    }

    .home-gallery-progress span.active {
        width: 24px;
    }

    .home-capabilities {
        grid-template-columns: 1fr;
        margin-top: 60px;
    }

    .home-capability {
        min-height: 210px;
        padding: 25px;
    }

    .home-capability h3 {
        margin-top: 36px;
    }

    .home-feature-line {
        display: grid;
        justify-items: center;
    }

    .home-feature-line span::after {
        display: none;
    }

    .legal-dialog-header {
        padding: 17px 18px;
    }

    .legal-dialog-body {
        padding: 22px 20px 38px;
    }

    .support-dialog-body {
        padding: 38px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* --------------------------------------------------------------------------
   Detail correction v9 — human story, explicit examples and clean product UI
   -------------------------------------------------------------------------- */

.journey-human-story {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
    gap: clamp(18px, 2.4vw, 34px);
    align-items: stretch;
    margin: clamp(40px, 5vw, 68px) 0 28px;
}

.journey-human-photo,
.journey-human-example {
    min-height: 440px;
    border: 1px solid rgba(23, 33, 29, 0.09);
    border-radius: 28px;
}

.journey-human-photo {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: #e9efeb;
    box-shadow: 0 26px 70px rgba(23, 33, 29, 0.1);
}

.journey-human-photo::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 27, 20, 0.84), transparent 57%);
    content: "";
    pointer-events: none;
}

.journey-human-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    object-position: 63% center;
    transition: transform 1.3s cubic-bezier(.16, 1, .3, 1);
}

.journey-human-photo figcaption {
    position: absolute;
    z-index: 2;
    right: clamp(22px, 3vw, 36px);
    bottom: clamp(22px, 3vw, 34px);
    left: clamp(22px, 3vw, 36px);
    max-width: 520px;
    color: #fff;
}

.journey-human-photo figcaption strong,
.journey-human-photo figcaption span {
    display: block;
}

.journey-human-photo figcaption strong {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.15vw, 2rem);
    letter-spacing: -0.04em;
    line-height: 1.06;
}

.journey-human-photo figcaption span {
    max-width: 470px;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.78rem;
    line-height: 1.55;
}

.journey-human-example {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 3vw, 34px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 65px rgba(23, 33, 29, 0.065);
}

.journey-human-example::before {
    position: absolute;
    top: -140px;
    right: -110px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(31, 190, 135, 0.13);
    border-radius: 50%;
    box-shadow: inset 0 0 0 55px rgba(31, 190, 135, 0.035);
    content: "";
}

.human-example-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #89938f;
    font-size: 0.64rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.human-example-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #176f51;
}

.human-example-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20c68b;
    box-shadow: 0 0 0 5px rgba(32, 198, 139, 0.11);
}

.human-message-row {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 28px;
    padding: 17px 18px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 18px 18px 18px 6px;
    background: #f5f7f5;
}

.human-message-row strong,
.human-message-row p {
    display: block;
    margin: 0;
}

.human-message-row strong {
    color: #68736e;
    font-size: 0.65rem;
}

.human-message-row p {
    margin-top: 4px;
    color: #1d2924;
    font-size: 0.82rem;
    font-weight: 650;
}

.example-person,
.task-check {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border: 1px solid rgba(23, 33, 29, 0.1);
    border-radius: 10px;
    background: #eef4f0;
    color: #16835e;
    font-style: normal;
}

.example-person svg,
.task-check svg {
    width: 15px;
    height: 15px;
}

.human-flow-list {
    position: relative;
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

.human-flow-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border: 1px solid rgba(23, 33, 29, 0.075);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(23, 33, 29, 0.04);
}

.human-flow-row > span {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 10px;
    background: #eaf8f2;
    color: #14976b;
}

.human-flow-row > span svg {
    width: 15px;
    height: 15px;
}

.human-flow-row strong,
.human-flow-row small {
    display: block;
}

.human-flow-row strong {
    color: #1e2925;
    font-size: 0.69rem;
}

.human-flow-row small {
    margin-top: 2px;
    color: #7b8781;
    font-size: 0.59rem;
}

.human-flow-row em {
    color: #a0aaa5;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 800;
}

.human-flow-row.complete {
    border-color: rgba(23, 157, 111, 0.18);
    background: #f0faf5;
}

#como-funciona.is-in-view .journey-human-photo img {
    transform: scale(1.035);
}

#como-funciona.is-in-view .human-example-live i {
    animation: example-live 2.2s ease-in-out infinite;
}

#como-funciona.is-in-view .human-flow-row {
    animation: human-flow-arrive 5.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

#como-funciona.is-in-view .human-flow-row:nth-child(2) { animation-delay: 260ms; }
#como-funciona.is-in-view .human-flow-row:nth-child(3) { animation-delay: 520ms; }

@keyframes example-live {
    0%, 100% { box-shadow: 0 0 0 5px rgba(32, 198, 139, 0.1); }
    50% { box-shadow: 0 0 0 10px rgba(32, 198, 139, 0); }
}

@keyframes human-flow-arrive {
    0%, 7% { opacity: .45; transform: translateX(14px); }
    20%, 100% { opacity: 1; transform: none; }
}

.product-tour-panel::after,
.product-tour-panel figcaption {
    display: none;
}

.product-tour-stage {
    background: #fff;
}

.product-tour-panel img {
    object-fit: contain;
    object-position: top left;
}

.crm-feature-card {
    min-height: 0;
    padding-bottom: 30px;
}

.crm-feature-card .mini-pipeline {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: 26px;
}

.crm-feature-card .mini-stage {
    padding: 11px;
}

.crm-feature-card .mini-lead {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 49px;
    padding: 7px;
}

.crm-feature-card .mini-lead .example-person {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
    border-radius: 9px;
}

.crm-feature-card .mini-lead .example-person svg {
    width: 13px;
    height: 13px;
}

.mini-lead strong,
.mini-lead small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-lead strong {
    font-size: 0.61rem;
}

.mini-lead small {
    margin-top: 2px;
    color: #818c87;
    font-size: 0.5rem;
    font-weight: 650;
}

.assistant-example {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 10px;
    margin-top: 28px;
}

.assistant-example-message {
    display: flex;
    gap: 9px;
    align-items: center;
}

.assistant-example-message .example-person,
.support-message .example-person {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #56e8b2;
}

.assistant-example-message p {
    width: calc(100% - 40px);
    margin: 0;
    padding: 10px 12px;
    border-radius: 13px 13px 13px 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.62rem;
    line-height: 1.45;
}

.assistant-example-message.ai {
    flex-direction: row-reverse;
}

.assistant-example-message.ai p {
    border-radius: 13px 13px 4px;
    background: #35dca0;
    color: #08281d;
}

.operations-feature-card {
    display: flex;
    min-height: 420px;
    flex-direction: column;
}

.operations-feature-card h3 {
    max-width: 390px;
    font-size: clamp(1.55rem, 2.15vw, 2rem);
}

.operation-example {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 28px;
}

.operation-example-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(23, 33, 29, 0.035);
}

.operation-example-row .task-check {
    border-color: #14976b;
    background: #14976b;
    color: #fff;
}

.operation-example-row strong,
.operation-example-row small {
    display: block;
}

.operation-example-row strong {
    overflow: hidden;
    color: #1e2925;
    font-size: 0.64rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operation-example-row small {
    margin-top: 2px;
    color: #78837e;
    font-size: 0.54rem;
}

.operation-example-row em {
    padding: 4px 7px;
    border-radius: 999px;
    background: #edf3ef;
    color: #66736d;
    font-size: 0.5rem;
    font-style: normal;
    font-weight: 800;
}

.operation-example-row.done em {
    background: #e5f8ef;
    color: #137653;
}

#funcionalidades.is-in-view .operation-example-row,
#funcionalidades.is-in-view .assistant-example-message,
#funcionalidades.is-in-view .support-message {
    animation: example-card-arrive 5.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .operation-example-row:nth-child(2),
#funcionalidades.is-in-view .assistant-example-message:nth-child(2),
#funcionalidades.is-in-view .support-message:nth-child(2) { animation-delay: 260ms; }
#funcionalidades.is-in-view .operation-example-row:nth-child(3) { animation-delay: 520ms; }

@keyframes example-card-arrive {
    0%, 8% { opacity: .42; transform: translateY(8px); }
    22%, 100% { opacity: 1; transform: none; }
}

.support-chat {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.support-message {
    display: flex;
    gap: 9px;
    align-items: flex-end;
}

.support-message.agent {
    flex-direction: row-reverse;
}

.support-message > div {
    min-width: 0;
}

.support-message small {
    display: block;
    margin: 0 0 4px 4px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.49rem;
}

.support-message.agent small {
    margin-right: 4px;
    text-align: right;
}

.support-message .support-bubble {
    width: auto;
    margin: 0;
    line-height: 1.4;
}

.channels-showcase {
    align-items: start;
}

@media (max-width: 1040px) {
    .journey-human-story {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .journey-human-story {
        grid-template-columns: 1fr;
        margin-top: 34px;
    }

    .journey-human-photo,
    .journey-human-example {
        min-height: 0;
        border-radius: 22px;
    }

    .journey-human-photo {
        aspect-ratio: .92 / 1;
    }

    .journey-human-photo img {
        min-height: 0;
        object-position: 66% center;
    }

    .journey-human-example {
        padding: 20px;
    }

    .human-message-row {
        margin-top: 22px;
    }

    .crm-feature-card {
        min-height: 0;
        padding-bottom: 24px;
    }

    .crm-feature-card .mini-pipeline {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .crm-feature-card .mini-stage {
        padding: 9px;
    }

    .crm-feature-card .mini-lead {
        min-height: 45px;
        padding: 7px 9px;
        font-size: inherit;
    }

    .operations-feature-card {
        min-height: 400px;
    }
}

/* --------------------------------------------------------------------------
   Feature demonstrations v10 — distinct stories, real people, clearer motion
   -------------------------------------------------------------------------- */

.photo-avatar {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background-image: url("assets/people/chat-avatars-v1.jpg");
    background-repeat: no-repeat;
    background-size: 200% 200%;
    box-shadow: 0 5px 14px rgba(23, 33, 29, 0.14);
}

.person-maria { background-position: 0 0; }
.person-carlos { background-position: 100% 0; }
.person-laura { background-position: 0 100%; }
.person-mateo { background-position: 100% 100%; }

.human-message-row > .photo-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
}

#funcionalidades .section-heading {
    max-width: 980px;
    margin-bottom: clamp(42px, 6vw, 72px);
}

#funcionalidades .section-heading h2 {
    max-width: 940px;
}

#funcionalidades .bento-grid {
    gap: 18px;
}

#funcionalidades .bento-card {
    padding: clamp(28px, 3vw, 38px);
    border-radius: 28px;
}

#funcionalidades .crm-feature-card,
#funcionalidades .bento-card.narrow.dark {
    min-height: 590px;
}

#funcionalidades .bento-card.third {
    min-height: 530px;
}

#funcionalidades .web-publish-card,
#funcionalidades .schedule-feature-card {
    min-height: 540px;
}

#funcionalidades .bento-card.narrow.dark,
#funcionalidades .bento-card.third.dark,
#funcionalidades .web-publish-card {
    border-color: rgba(255, 255, 255, 0.08);
    background: #172720;
    color: #fff;
}

#funcionalidades .bento-card.narrow.dark h3,
#funcionalidades .bento-card.third.dark h3,
#funcionalidades .web-publish-card h3 {
    color: #fff;
}

#funcionalidades .bento-card.narrow.dark > p,
#funcionalidades .bento-card.third.dark > p,
#funcionalidades .web-publish-card > p {
    color: rgba(255, 255, 255, 0.64);
}

.feature-example-caption {
    position: relative;
    z-index: 2;
    margin-top: 14px !important;
    font-size: 0.78rem !important;
    line-height: 1.55;
}

.crm-feature-card .mini-pipeline {
    gap: 10px;
}

.crm-feature-card .mini-stage {
    min-height: 170px;
    padding: 12px;
    border: 1px solid rgba(23, 33, 29, 0.065);
    border-radius: 15px;
    background: #f3f6f4;
}

.crm-feature-card .mini-stage > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 9px;
}

.crm-feature-card .mini-stage > span b {
    color: #65716c;
    font-size: 0.57rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.crm-feature-card .mini-stage > span em {
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 50%;
    background: #e4ebe7;
    color: #68746e;
    font-size: 0.52rem;
    font-style: normal;
}

.crm-feature-card .mini-lead {
    position: relative;
    min-height: 58px;
    padding: 9px;
    border-radius: 12px;
    background: #fff;
}

.crm-feature-card .mini-lead .photo-avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
}

.crm-feature-card .mini-lead strong {
    font-size: 0.64rem;
}

.crm-feature-card .mini-lead small {
    font-size: 0.52rem;
}

.crm-feature-card .mini-lead u {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 3px 5px;
    border-radius: 999px;
    background: #def7ec;
    color: #107652;
    font-size: 0.48rem;
    font-weight: 850;
    text-decoration: none;
}

.pipeline-event {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
    padding: 14px;
    overflow: hidden;
    border: 1px solid rgba(23, 153, 107, 0.14);
    border-radius: 16px;
    background: #ecfaf4;
}

.pipeline-event > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    background: #1bb77e;
    color: #fff;
}

.pipeline-event svg {
    width: 16px;
    height: 16px;
}

.pipeline-event p,
.pipeline-event strong,
.pipeline-event small {
    display: block;
    margin: 0;
}

.pipeline-event strong {
    color: #183128;
    font-size: 0.67rem;
}

.pipeline-event small {
    margin-top: 3px;
    color: #63736c;
    font-size: 0.56rem;
    line-height: 1.45;
}

.pipeline-event > em {
    color: #159166;
    font-size: 0.52rem;
    font-style: normal;
    font-weight: 800;
}

.assistant-example {
    gap: 11px;
    margin-top: 24px;
}

.assistant-example-message {
    align-items: flex-start;
}

.assistant-example-message > div {
    min-width: 0;
    flex: 1;
}

.assistant-example-message small {
    display: block;
    margin: 0 0 4px 3px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.5rem;
}

.assistant-example-message p {
    width: 100%;
    margin: 0;
    font-size: 0.62rem;
}

.assistant-example-message.ai {
    flex-direction: row;
}

.assistant-example-message.ai p {
    border-radius: 4px 13px 13px 13px;
}

.ai-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border: 1px solid rgba(72, 226, 171, 0.4);
    border-radius: 50%;
    background: rgba(53, 220, 160, 0.12);
    color: #4ee0ab;
}

.ai-avatar svg {
    width: 16px;
    height: 16px;
}

.ai-context-readout {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
}

.ai-context-readout > div {
    padding: 11px 9px;
}

.ai-context-readout > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-context-readout small,
.ai-context-readout strong {
    display: block;
}

.ai-context-readout small {
    color: rgba(255, 255, 255, 0.38);
    font-size: 0.48rem;
}

.ai-context-readout strong {
    margin-top: 3px;
    color: #fff;
    font-size: 0.6rem;
}

.ai-scan-line {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: -30%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(75, 233, 176, 0.19), transparent);
    transform: skewX(-15deg);
}

.assistant-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 44px;
    color: rgba(255, 255, 255, 0.42);
}

.assistant-typing > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4ee0ab;
}

.assistant-typing em {
    margin-left: 4px;
    font-size: 0.48rem;
    font-style: normal;
}

.operations-feature-card {
    min-height: 530px !important;
}

.operations-feature-card .operation-example {
    padding-top: 22px;
}

.operation-example-row {
    min-height: 74px;
    padding: 12px;
}

.operation-example-row .task-step {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid rgba(23, 33, 29, 0.1);
    border-radius: 10px;
    background: #f4f7f5;
    color: #78837e;
    font-size: 0.52rem;
    font-weight: 850;
}

.operation-example-row strong {
    font-size: 0.64rem;
}

.operation-example-row small {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
}

.operation-example-row small .photo-avatar {
    width: 19px;
    height: 19px;
    flex-basis: 19px;
    border-width: 1px;
}

.operation-example-row.assigned {
    border-color: rgba(39, 135, 211, 0.14);
}

.operation-example-row.scheduled {
    border-color: rgba(210, 130, 45, 0.14);
}

.analytics-example {
    position: relative;
    margin-top: 26px;
    padding: 17px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(23, 33, 29, 0.055);
}

.analytics-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 16px;
}

.analytics-head small,
.analytics-head strong {
    display: block;
}

.analytics-head small {
    color: #7a8680;
    font-size: 0.53rem;
}

.analytics-head strong {
    margin-top: 2px;
    color: #1d2a25;
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: -0.06em;
}

.analytics-head em {
    padding: 5px 8px;
    border-radius: 999px;
    background: #e3f8ef;
    color: #11805a;
    font-size: 0.53rem;
    font-style: normal;
    font-weight: 850;
}

.channel-performance {
    display: grid;
    grid-template-columns: 78px 1fr 20px;
    gap: 7px;
    align-items: center;
    margin-top: 9px;
}

.channel-performance > span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #5f6d67;
    font-size: 0.5rem;
}

.channel-performance > span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.instagram-dot { background: #c449ad; }
.whatsapp-dot { background: #22b977; }
.web-dot { background: #5088d5; }

.channel-performance > div {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #edf1ee;
}

.channel-performance b {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #25c58c, #66dfb4);
    transform-origin: left;
}

.channel-performance > strong {
    color: #36423d;
    font-size: 0.55rem;
    text-align: right;
}

.analytics-insight {
    display: flex;
    gap: 9px;
    margin-top: 17px;
    padding: 11px;
    border-radius: 13px;
    background: #eef9f4;
    color: #11835c;
}

.analytics-insight svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

.analytics-insight strong,
.analytics-insight small {
    display: block;
}

.analytics-insight strong {
    font-size: 0.56rem;
}

.analytics-insight small {
    margin-top: 3px;
    color: #63746c;
    font-size: 0.5rem;
    line-height: 1.4;
}

.support-chat {
    margin-top: 22px;
}

.support-message > .photo-avatar {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
}

.support-message .support-bubble {
    max-width: 260px;
    padding: 10px 12px;
}

.support-message.agent {
    flex-direction: row;
}

.support-message.agent small {
    margin-right: 0;
    text-align: left;
}

.support-message .support-bubble.agent {
    border-radius: 4px 12px 12px 12px;
}

.handoff-context {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 9px;
    align-items: center;
    overflow: hidden;
    padding: 11px;
    border: 1px solid rgba(83, 229, 176, 0.19);
    border-radius: 14px;
    background: rgba(82, 222, 171, 0.07);
}

.handoff-context > svg {
    width: 16px;
    height: 16px;
    color: #4ee0ab;
}

.handoff-context strong,
.handoff-context small {
    display: block;
}

.handoff-context strong {
    color: #fff;
    font-size: 0.56rem;
}

.handoff-context small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.48rem;
}

.handoff-context > em {
    color: #57e3b0;
    font-size: 0.48rem;
    font-style: normal;
    font-weight: 800;
}

.handoff-progress {
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: linear-gradient(90deg, #4ee0ab, rgba(78, 224, 171, 0));
    transform-origin: left;
}

.web-publish-card p {
    max-width: 520px;
}

.widget-builder-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 22px;
    align-items: end;
    margin-top: 28px;
}

.widget-controls {
    display: grid;
    gap: 9px;
}

.widget-controls > div:not(.publish-status) {
    position: relative;
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 10px;
    align-items: center;
    min-height: 47px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
}

.widget-controls span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 0.54rem;
}

.widget-controls strong {
    overflow: hidden;
    color: #fff;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-controls em {
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(61, 223, 164, 0.14);
    color: #57e3b0;
    font-size: 0.46rem;
    font-style: normal;
    font-weight: 800;
}

.color-swatch {
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #19b77f;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.publish-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5ae5b3;
    font-size: 0.58rem;
    font-weight: 750;
}

.publish-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ee0ab;
    box-shadow: 0 0 0 5px rgba(78, 224, 171, 0.09);
}

.widget-builder-example .widget-preview {
    position: relative;
    right: auto;
    bottom: auto;
    width: 190px;
    min-height: 240px;
}

.widget-builder-example .widget-head {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px;
    background: #1a9d70;
}

.widget-builder-example .widget-head .photo-avatar {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
}

.widget-builder-example .widget-head > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.widget-builder-example .widget-head strong,
.widget-builder-example .widget-head small {
    display: block;
    color: #fff;
}

.widget-builder-example .widget-head strong { font-size: 0.61rem; }
.widget-builder-example .widget-head small { margin-top: 1px; color: rgba(255,255,255,.7); font-size: 0.45rem; }
.widget-builder-example .widget-head > i { width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #55e6b2; }

.widget-builder-example .widget-body {
    display: grid;
    align-content: start;
    gap: 9px;
    min-height: 180px;
    padding: 12px;
    background: #f4f7f5;
}

.widget-customer-message {
    margin-left: 25px;
    padding: 8px 9px;
    border-radius: 10px 10px 3px;
    background: #1a9d70;
    color: #fff;
    font-size: 0.51rem;
}

.widget-typing {
    display: flex;
    gap: 3px;
    width: fit-content;
    padding: 8px 10px;
    border-radius: 10px 10px 10px 3px;
    background: #fff;
}

.widget-typing span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #7d8a84;
}

.schedule-feature-card {
    display: flex;
    flex-direction: column;
}

.schedule-example {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
}

.calendar-card {
    padding: 13px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 16px;
    background: #f5f7f5;
}

.calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 11px;
}

.calendar-top span {
    color: #29352f;
    font-size: 0.62rem;
    font-weight: 800;
}

.calendar-top em {
    color: #7d8883;
    font-size: 0.5rem;
    font-style: normal;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
}

.calendar-grid > span,
.calendar-grid > i {
    display: grid;
    min-height: 27px;
    place-items: center;
    border-radius: 8px;
    color: #76817c;
    font-size: 0.5rem;
    font-style: normal;
}

.calendar-grid > span {
    min-height: 18px;
    font-size: 0.43rem;
    font-weight: 800;
}

.calendar-grid > i.selected {
    position: relative;
    min-height: 43px;
    background: #1aaa77;
    color: #fff;
    font-weight: 850;
}

.calendar-grid > i.selected small {
    display: block;
    font-size: 0.4rem;
    font-weight: 650;
}

.booking-confirmed {
    display: flex;
    gap: 9px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(22, 153, 107, 0.13);
    border-radius: 14px;
    background: #effaf5;
}

.booking-confirmed > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 9px;
    background: #199c6e;
    color: #fff;
}

.booking-confirmed svg { width: 14px; height: 14px; }
.booking-confirmed strong,
.booking-confirmed small { display: block; }
.booking-confirmed strong { color: #21302a; font-size: 0.59rem; }
.booking-confirmed small { margin-top: 2px; color: #6f7e77; font-size: 0.49rem; }

.inventory-line {
    display: grid;
    grid-template-columns: 1fr 90px auto;
    gap: 8px;
    align-items: center;
    color: #65716c;
    font-size: 0.52rem;
}

.inventory-line > div {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: #e6ece8;
}

.inventory-line b {
    display: block;
    width: 80%;
    height: 100%;
    border-radius: inherit;
    background: #1aaa77;
    transform-origin: left;
}

.inventory-line strong {
    color: #2f3c36;
    font-size: 0.54rem;
}

/* Each demonstration uses a different visual behavior. */
#funcionalidades.is-in-view .pipeline-focus {
    animation: pipeline-priority 7.2s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .pipeline-event > span {
    animation: pipeline-event-pop 7.2s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .ai-scan-line {
    animation: ai-scan 4.8s ease-in-out infinite;
}

#funcionalidades.is-in-view .assistant-typing > span {
    animation: typing-dot 1.25s ease-in-out infinite;
}

#funcionalidades.is-in-view .assistant-typing > span:nth-child(2) { animation-delay: 160ms; }
#funcionalidades.is-in-view .assistant-typing > span:nth-child(3) { animation-delay: 320ms; }

#funcionalidades.is-in-view .operation-example-row.done .task-check {
    animation: task-check-pop 5.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .operation-example-row.assigned .photo-avatar {
    animation: owner-assigned 4.8s ease-in-out infinite;
}

#funcionalidades.is-in-view .operation-example-row.scheduled em {
    animation: deadline-pulse 3.8s ease-in-out infinite;
}

#funcionalidades.is-in-view .channel-performance b {
    animation: metric-grow 5.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .analytics-insight {
    animation: insight-rise 5.4s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .handoff-progress {
    animation: handoff-transfer 4.8s ease-in-out infinite;
}

#funcionalidades.is-in-view .support-message.agent .photo-avatar {
    animation: agent-online 4.8s ease-in-out infinite;
}

#funcionalidades.is-in-view .publish-status i {
    animation: published-pulse 2.4s ease-in-out infinite;
}

#funcionalidades.is-in-view .widget-typing span {
    animation: widget-type 1.2s ease-in-out infinite;
}

#funcionalidades.is-in-view .widget-typing span:nth-child(2) { animation-delay: 130ms; }
#funcionalidades.is-in-view .widget-typing span:nth-child(3) { animation-delay: 260ms; }

#funcionalidades.is-in-view .calendar-grid > i.selected {
    animation: calendar-confirm 4.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .inventory-line b {
    animation: inventory-reserve 4.6s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .operation-example-row,
#funcionalidades.is-in-view .assistant-example-message,
#funcionalidades.is-in-view .support-message {
    animation: none;
}

@keyframes pipeline-priority {
    0%, 9% { transform: translateY(8px); box-shadow: none; opacity: .5; }
    22%, 78% { transform: none; border-color: rgba(27,183,126,.3); box-shadow: 0 10px 28px rgba(27,183,126,.12); opacity: 1; }
    100% { transform: none; opacity: 1; }
}

@keyframes pipeline-event-pop {
    0%, 18% { transform: scale(.72); opacity: .25; }
    30%, 100% { transform: none; opacity: 1; }
}

@keyframes ai-scan {
    0%, 15% { left: -30%; opacity: 0; }
    30%, 62% { opacity: 1; }
    78%, 100% { left: 105%; opacity: 0; }
}

@keyframes typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-4px); opacity: 1; }
}

@keyframes task-check-pop {
    0%, 12% { transform: scale(.72) rotate(-12deg); background: #dfe8e3; color: transparent; }
    28%, 100% { transform: none; background: #14976b; color: #fff; }
}

@keyframes owner-assigned {
    0%, 16% { transform: translateX(-7px); opacity: .35; }
    32%, 72% { transform: none; opacity: 1; box-shadow: 0 0 0 5px rgba(48,132,210,.1); }
    100% { box-shadow: none; }
}

@keyframes deadline-pulse {
    0%, 100% { background: #edf3ef; }
    50% { background: #fff0df; color: #a7611d; }
}

@keyframes metric-grow {
    0%, 12% { transform: scaleX(.08); }
    32%, 100% { transform: scaleX(1); }
}

@keyframes insight-rise {
    0%, 24% { transform: translateY(8px); opacity: .25; }
    40%, 100% { transform: none; opacity: 1; }
}

@keyframes handoff-transfer {
    0%, 10% { transform: scaleX(0); opacity: .3; }
    48%, 78% { transform: scaleX(1); opacity: 1; }
    100% { opacity: .35; }
}

@keyframes agent-online {
    0%, 38% { filter: grayscale(.8); opacity: .45; }
    55%, 100% { filter: none; opacity: 1; box-shadow: 0 0 0 5px rgba(78,224,171,.1); }
}

@keyframes published-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(78,224,171,.08); }
    50% { box-shadow: 0 0 0 10px rgba(78,224,171,0); }
}

@keyframes widget-type {
    0%, 65%, 100% { opacity: .3; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-3px); }
}

@keyframes calendar-confirm {
    0%, 14% { transform: scale(.82); background: #d9e5df; color: #63716b; }
    30%, 75% { transform: none; background: #1aaa77; color: #fff; box-shadow: 0 8px 20px rgba(26,170,119,.22); }
    100% { box-shadow: none; }
}

@keyframes inventory-reserve {
    0%, 20% { transform: scaleX(1); }
    40%, 100% { transform: scaleX(.8); }
}

/* Auraava Home is an opt-in full-screen experience, not part of CRM scrolling. */
body.home-view-active {
    overflow: hidden;
}

body.home-view-active .section-rail,
body.home-view-active .mobile-cta {
    opacity: 0;
    pointer-events: none;
}

.home-app-section[hidden] {
    display: none !important;
}

.home-app-section {
    position: fixed;
    z-index: 220;
    inset: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100svh;
    padding: 110px 0 90px;
    border: 0;
    background:
        linear-gradient(110deg, rgba(12, 20, 17, 0.78) 0%, rgba(12, 20, 17, 0.5) 49%, rgba(12, 20, 17, 0.62) 100%),
        url("assets/home/auraava-home-interior-v1.jpg") center / cover fixed no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.015);
    transition: opacity 460ms ease, visibility 460ms ease, transform 700ms cubic-bezier(.16, 1, .3, 1);
}

.home-app-section.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.home-app-section::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.035), rgba(10, 18, 15, 0.28));
    content: "";
    pointer-events: none;
}

.home-app-section .home-light-canvas {
    display: none;
}

.home-view-close {
    position: fixed;
    z-index: 4;
    top: 24px;
    right: max(24px, calc((100vw - var(--max)) / 2));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(16, 25, 21, 0.78);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(18px);
}

.home-view-close span {
    font-size: 0.66rem;
    font-weight: 750;
}

.home-view-close svg {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
}

.home-app-section .home-app-copy {
    max-width: 560px;
    padding: clamp(28px, 4vw, 48px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    background: rgba(13, 23, 19, 0.72);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.19);
    backdrop-filter: blur(20px) saturate(115%);
}

.home-app-section .home-app-copy h2,
.home-app-section .home-app-identity strong {
    color: #fff;
}

.home-app-section .home-app-copy > p:not(.section-kicker),
.home-app-section .home-app-identity span {
    color: rgba(255, 255, 255, 0.68);
}

.home-app-section .section-kicker {
    color: #6fe8bb;
}

.home-app-section .home-gallery-glow {
    background: radial-gradient(circle, rgba(237, 190, 126, 0.28), rgba(69, 218, 162, 0.15) 48%, transparent 72%);
}

.home-app-section .home-gallery-controls button {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(15, 25, 21, 0.72);
    color: #fff;
}

.home-app-section .home-gallery-progress span {
    background: rgba(255, 255, 255, 0.2);
}

.home-app-section .home-gallery-progress span.active {
    background: #68e6b8;
}

.home-app-section .home-capabilities {
    border-color: rgba(255, 255, 255, 0.14);
}

.home-app-section .home-capability {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(13, 23, 19, 0.67);
    backdrop-filter: blur(18px);
}

.home-app-section .home-capability > span {
    color: #69e5b7;
}

.home-app-section .home-capability h3 {
    color: #fff;
}

.home-app-section .home-capability p,
.home-app-section .home-feature-line {
    color: rgba(255, 255, 255, 0.66);
}

@media (max-width: 1040px) and (min-width: 761px) {
    #funcionalidades .bento-card.third {
        min-height: 500px;
    }

    .widget-builder-example {
        grid-template-columns: minmax(0, 1fr) 210px;
    }
}

@media (max-width: 760px) {
    #funcionalidades .bento-card,
    #funcionalidades .crm-feature-card,
    #funcionalidades .bento-card.narrow.dark,
    #funcionalidades .bento-card.third,
    #funcionalidades .web-publish-card,
    #funcionalidades .schedule-feature-card {
        min-height: 0 !important;
        padding: 24px;
        border-radius: 23px;
    }

    .crm-feature-card .mini-stage {
        min-height: 0;
    }

    .crm-feature-card .mini-lead {
        min-height: 56px;
    }

    .pipeline-event {
        grid-template-columns: auto 1fr;
    }

    .pipeline-event > em {
        display: none;
    }

    .operation-example {
        margin-top: 0;
    }

    .operation-example-row strong {
        white-space: normal;
    }

    .widget-builder-example {
        grid-template-columns: 1fr;
    }

    .widget-builder-example .widget-preview {
        width: min(260px, 100%);
        margin-inline: auto;
    }

    .widget-controls > div:not(.publish-status) {
        grid-template-columns: 90px minmax(0, 1fr) auto;
    }

    .inventory-line {
        grid-template-columns: 1fr 70px auto;
    }

    .home-app-section {
        padding: 92px 0 70px;
        background-attachment: scroll;
    }

    .home-view-close {
        top: 16px;
        right: 16px;
    }

    .home-app-section .home-app-copy {
        padding: 26px 22px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #funcionalidades.is-in-view .pipeline-focus,
    #funcionalidades.is-in-view .pipeline-event > span,
    #funcionalidades.is-in-view .ai-scan-line,
    #funcionalidades.is-in-view .assistant-typing > span,
    #funcionalidades.is-in-view .operation-example-row.done .task-check,
    #funcionalidades.is-in-view .operation-example-row.assigned .photo-avatar,
    #funcionalidades.is-in-view .operation-example-row.scheduled em,
    #funcionalidades.is-in-view .channel-performance b,
    #funcionalidades.is-in-view .analytics-insight,
    #funcionalidades.is-in-view .handoff-progress,
    #funcionalidades.is-in-view .support-message.agent .photo-avatar,
    #funcionalidades.is-in-view .publish-status i,
    #funcionalidades.is-in-view .widget-typing span,
    #funcionalidades.is-in-view .calendar-grid > i.selected,
    #funcionalidades.is-in-view .inventory-line b {
        animation: none !important;
    }

    .home-app-section {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey-human-photo img,
    .human-example-live i,
    .human-flow-row,
    .operation-example-row,
    .assistant-example-message,
    .support-message {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Presentation experience v8 — verified product, human narrative and motion
   -------------------------------------------------------------------------- */

#como-funciona,
#funcionalidades,
#continuidad,
#preguntas,
.closing {
    position: relative;
    isolation: isolate;
    overflow: clip;
}

#como-funciona::before,
#funcionalidades::before,
#continuidad::before,
#preguntas::before {
    position: absolute;
    z-index: -1;
    width: min(52vw, 760px);
    height: min(52vw, 760px);
    border: 1px solid rgba(26, 145, 103, 0.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

#como-funciona::before {
    top: -28%;
    right: -20%;
    box-shadow: inset 0 0 0 70px rgba(35, 190, 135, 0.018), inset 0 0 0 145px rgba(35, 190, 135, 0.015);
}

#funcionalidades::before {
    top: 21%;
    left: -34%;
}

#continuidad::before {
    right: -25%;
    bottom: -32%;
    box-shadow: inset 0 0 0 90px rgba(35, 190, 135, 0.025);
}

#preguntas::before {
    top: -38%;
    left: -24%;
}

#como-funciona .section-heading,
#funcionalidades .section-heading,
#continuidad .section-heading {
    position: relative;
    z-index: 2;
}

#como-funciona .section-heading h2,
#funcionalidades .section-heading h2,
#continuidad .section-heading h2 {
    text-wrap: balance;
}

.journey-grid {
    position: relative;
    gap: 18px;
}

.journey-grid::before {
    position: absolute;
    z-index: 0;
    top: 75px;
    right: 8%;
    left: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(24, 145, 103, 0.22) 12%, rgba(24, 145, 103, 0.22) 88%, transparent);
    content: "";
}

.journey-grid::after {
    position: absolute;
    z-index: 0;
    top: 72px;
    left: 7%;
    width: 60px;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #24d99a, transparent);
    content: "";
    opacity: 0;
    filter: blur(1px);
}

#como-funciona.is-in-view .journey-grid::after {
    animation: journey-signal 5.4s cubic-bezier(.4, 0, .2, 1) infinite 700ms;
}

@keyframes journey-signal {
    0% { left: 7%; opacity: 0; }
    8%, 82% { opacity: 0.9; }
    100% { left: 87%; opacity: 0; }
}

.journey-card {
    z-index: 1;
    min-height: 300px;
    padding: 26px;
    border-radius: 24px;
    box-shadow: 0 18px 55px rgba(20, 45, 35, 0.055);
}

.journey-card::before,
.bento-card::after,
.channel-card::before,
.home-capability::before {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(36, 217, 154, 0.11), transparent 62%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.journey-card:hover::before,
.bento-card:hover::after,
.channel-card:hover::before,
.home-capability:hover::before {
    opacity: 1;
}

.journey-card::after {
    top: 59px;
    right: -27px;
    width: 36px;
    height: 36px;
    border-color: rgba(19, 133, 93, 0.15);
    background: #f8fbf9;
    color: #16865f;
    line-height: 33px;
}

.journey-number > span:last-child {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: -0.03em;
}

.journey-icon {
    position: relative;
    z-index: 1;
    margin: 31px 0 18px;
    box-shadow: 0 9px 26px rgba(20, 45, 35, 0.07);
}

.channel-strip-inline {
    position: relative;
    overflow: hidden;
    border-color: rgba(23, 33, 29, 0.075);
    background: rgba(247, 250, 247, 0.9);
    box-shadow: 0 20px 60px rgba(23, 33, 29, 0.045);
    backdrop-filter: blur(14px);
}

.channel-strip-inline::after {
    position: absolute;
    top: 0;
    left: -32%;
    width: 26%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.86), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-18deg);
}

#como-funciona.is-in-view .channel-strip-inline::after {
    animation: channel-sheen 6.8s ease-in-out infinite 1.2s;
}

@keyframes channel-sheen {
    0%, 35% { left: -32%; }
    70%, 100% { left: 118%; }
}

.platform-stage {
    grid-template-columns: minmax(350px, .78fr) minmax(0, 1.22fr);
    gap: clamp(40px, 5vw, 72px);
}

.platform-copy .section-heading h2 {
    font-size: clamp(2.8rem, 4.25vw, 4rem);
    line-height: 0.98;
}

.product-tour {
    min-width: 0;
    perspective: 1200px;
}

.product-tour-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(23, 33, 29, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 38px 90px rgba(23, 33, 29, 0.15);
    transform: rotateY(-1.4deg) rotateX(0.4deg);
    transform-origin: 50% 50%;
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1), box-shadow 600ms ease;
}

.product-tour.is-revealed .product-tour-frame,
.product-tour:hover .product-tour-frame {
    transform: none;
}

.product-tour:hover .product-tour-frame {
    box-shadow: 0 48px 105px rgba(23, 33, 29, 0.18);
}

.product-tour-toolbar {
    display: flex;
    height: 43px;
    align-items: center;
    gap: 6px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(23, 33, 29, 0.07);
    background: #f7faf8;
}

.product-tour-toolbar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d6ded9;
}

.product-tour-toolbar > span:nth-child(1) { background: #f3b7a8; }
.product-tour-toolbar > span:nth-child(2) { background: #ead498; }
.product-tour-toolbar > span:nth-child(3) { background: #a8d9bc; }

.product-tour-toolbar strong {
    margin-left: auto;
    color: #68756f;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.product-tour-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 9px;
    border-bottom: 1px solid rgba(23, 33, 29, 0.07);
    background: #fff;
}

.product-tour-tab {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0 9px;
    align-items: center;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 14px;
    background: transparent;
    color: #6a7670;
    cursor: pointer;
    text-align: left;
    transition: background 220ms ease, color 220ms ease, transform 220ms ease;
}

.product-tour-tab > span {
    display: grid;
    width: 27px;
    height: 27px;
    grid-row: 1 / 3;
    place-items: center;
    border: 1px solid rgba(23, 33, 29, 0.09);
    border-radius: 9px;
    font-size: 0.58rem;
    font-weight: 850;
}

.product-tour-tab strong {
    overflow: hidden;
    color: inherit;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-tour-tab small {
    overflow: hidden;
    color: #919a96;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-tour-tab::after {
    position: absolute;
    right: 13px;
    bottom: 4px;
    left: 13px;
    height: 2px;
    border-radius: 999px;
    background: #20b881;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
}

.product-tour-tab.active {
    background: #eef8f3;
    color: #174d3a;
}

.product-tour-tab.active > span {
    border-color: rgba(23, 145, 102, 0.2);
    background: #fff;
    color: #167956;
}

.product-tour-tab.active::after {
    animation: tour-progress 5.6s linear both;
}

@keyframes tour-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.product-tour-stage {
    position: relative;
    aspect-ratio: 1.81 / 1;
    overflow: hidden;
    background: #eaf5ef;
}

.product-tour-panel {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.985);
    transition: opacity 520ms ease, transform 720ms cubic-bezier(.16, 1, .3, 1);
}

.product-tour-panel.active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.product-tour-panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
}

.product-tour-panel::after {
    position: absolute;
    inset: auto 0 0;
    height: 43%;
    background: linear-gradient(to top, rgba(9, 24, 18, 0.86), transparent);
    content: "";
}

.product-tour-panel figcaption {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    color: #fff;
}

.product-tour-panel figcaption strong,
.product-tour-panel figcaption span {
    display: block;
}

.product-tour-panel figcaption strong {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.55vw, 1.36rem);
    letter-spacing: -0.025em;
}

.product-tour-panel figcaption span {
    max-width: 285px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.72rem;
    text-align: right;
}

.product-tour-note {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 9px;
    align-items: center;
    margin: 17px 5px 0;
    color: #718079;
    font-size: 0.68rem;
}

.product-tour-note > span:first-child {
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #1cbb82;
    box-shadow: 0 0 0 3px rgba(28, 187, 130, 0.14);
}

.product-tour-note strong {
    color: #3f4e48;
}

.feature-manifesto {
    position: relative;
    display: grid;
    overflow: hidden;
    grid-template-columns: auto minmax(0, 1fr) minmax(160px, .7fr);
    gap: 28px;
    align-items: center;
    margin-top: 18px;
    padding: 27px 30px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 21px;
    background: #183028;
    color: #fff;
}

.crm-feature-card {
    min-height: 350px;
    padding-bottom: 146px;
}

.operations-feature-card {
    min-height: 330px;
}

.web-publish-card p {
    max-width: calc(100% - 190px);
}

.feature-manifesto-index {
    color: #4ae2aa;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 750;
    letter-spacing: -0.06em;
}

.feature-manifesto p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
    line-height: 1.55;
}

.feature-manifesto-flow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.feature-manifesto-flow span {
    position: relative;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(74, 226, 170, 0.45);
    border-radius: 50%;
    background: #23473b;
}

.feature-manifesto-flow span:not(:last-child) {
    margin-right: 38px;
}

.feature-manifesto-flow span:not(:last-child)::after {
    position: absolute;
    top: 5px;
    left: 12px;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, rgba(74, 226, 170, 0.65), rgba(74, 226, 170, 0.08));
    content: "";
}

#funcionalidades.is-in-view .feature-manifesto-flow span {
    animation: flow-node 2.6s ease-in-out infinite;
}

#funcionalidades.is-in-view .feature-manifesto-flow span:nth-child(2) { animation-delay: 240ms; }
#funcionalidades.is-in-view .feature-manifesto-flow span:nth-child(3) { animation-delay: 480ms; }
#funcionalidades.is-in-view .feature-manifesto-flow span:nth-child(4) { animation-delay: 720ms; }

@keyframes flow-node {
    0%, 100% { background: #23473b; box-shadow: none; }
    50% { background: #4ae2aa; box-shadow: 0 0 0 7px rgba(74, 226, 170, 0.09), 0 0 24px rgba(74, 226, 170, 0.38); }
}

#funcionalidades.is-in-view .assistant-orbit {
    animation: orbit-breathe 6s ease-in-out infinite;
}

#funcionalidades.is-in-view .assistant-orbit::before {
    animation: orbit-turn 18s linear infinite;
}

#funcionalidades.is-in-view .task-row {
    animation: task-arrive 4.8s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .task-row:nth-child(2) { animation-delay: 240ms; }
#funcionalidades.is-in-view .task-row:nth-child(3) { animation-delay: 480ms; }

#funcionalidades.is-in-view .report-bar {
    transform-origin: bottom;
    animation: report-rise 4.5s cubic-bezier(.16, 1, .3, 1) infinite;
}

#funcionalidades.is-in-view .report-bar:nth-child(2) { animation-delay: 80ms; }
#funcionalidades.is-in-view .report-bar:nth-child(3) { animation-delay: 160ms; }
#funcionalidades.is-in-view .report-bar:nth-child(4) { animation-delay: 240ms; }
#funcionalidades.is-in-view .report-bar:nth-child(5) { animation-delay: 320ms; }
#funcionalidades.is-in-view .report-bar:nth-child(6) { animation-delay: 400ms; }

@keyframes orbit-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
}

@keyframes orbit-turn {
    to { transform: rotate(360deg); }
}

@keyframes task-arrive {
    0%, 8% { opacity: 0.35; transform: translateX(14px); }
    22%, 100% { opacity: 1; transform: none; }
}

@keyframes report-rise {
    0%, 10% { transform: scaleY(0.15); }
    26%, 100% { transform: scaleY(1); }
}

.channels-showcase {
    grid-template-columns: minmax(0, .95fr) minmax(440px, 1.05fr);
    gap: clamp(44px, 6vw, 82px);
    align-items: center;
}

.channels-copy {
    position: static;
}

.channels-human-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.42 / 1;
    margin: 0 0 17px;
    border-radius: 25px;
    background: #dfeae3;
    box-shadow: 0 28px 70px rgba(23, 33, 29, 0.12);
}

.channels-human-frame img,
.continuity-team img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter 700ms ease;
}

.channels-human-frame img {
    object-position: 66% center;
}

.channels-human-frame::after,
.continuity-team::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(11, 28, 21, 0.88), transparent 58%);
    content: "";
}

.channels-human-frame figcaption,
.continuity-team figcaption {
    position: absolute;
    z-index: 2;
    right: 24px;
    bottom: 22px;
    left: 24px;
    color: #fff;
}

.channels-human-frame figcaption strong,
.channels-human-frame figcaption span,
.continuity-team figcaption strong,
.continuity-team figcaption span {
    display: block;
}

.channels-human-frame figcaption strong,
.continuity-team figcaption strong {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.55vw, 1.38rem);
    letter-spacing: -0.03em;
}

.channels-human-frame figcaption span,
.continuity-team figcaption span {
    max-width: 480px;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
}

#canales.is-in-view .channels-human-frame img,
#continuidad.is-in-view .continuity-team img {
    transform: scale(1.035);
}

.channels-copy-note {
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 36px rgba(23, 33, 29, 0.06);
}

.channel-cards {
    counter-reset: channel;
}

.channel-card {
    position: relative;
    counter-increment: channel;
}

.channel-card::after {
    position: absolute;
    top: 13px;
    right: 17px;
    content: "0" counter(channel);
    color: rgba(23, 33, 29, 0.25);
    font-size: 0.54rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.channel-card-arrow {
    margin-top: 18px;
}

.continuity-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
    gap: 20px;
    align-items: stretch;
}

.continuity-team {
    position: relative;
    overflow: hidden;
    min-height: 660px;
    margin: 0;
    border-radius: 28px;
    background: #e7ede8;
    box-shadow: 0 30px 80px rgba(23, 33, 29, 0.11);
}

.continuity-team img {
    object-position: 35% center;
}

.continuity-stage .comparison {
    grid-template-columns: 1fr;
    gap: 14px;
}

.continuity-stage .comparison-card {
    position: relative;
    overflow: hidden;
    padding: 30px 32px;
    border-radius: 24px;
}

.continuity-stage .comparison-card::after {
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(23, 33, 29, 0.06);
    border-radius: 50%;
    content: "";
}

.continuity-stage .comparison-card.highlight::after {
    border-color: rgba(28, 157, 111, 0.15);
    box-shadow: inset 0 0 0 36px rgba(28, 157, 111, 0.035);
}

.continuity-stage .comparison-card h3 {
    font-size: 1.35rem;
}

.continuity-stage .comparison-list {
    gap: 9px;
    margin-top: 18px;
}

.faq-item {
    transition: padding 260ms ease, background 260ms ease, border-color 260ms ease;
}

.faq-item.open {
    margin-inline: -20px;
    padding-inline: 20px;
    border-color: rgba(21, 144, 100, 0.18);
    border-radius: 18px;
    background: #f1f8f4;
}

.faq-item.open .faq-plus {
    box-shadow: 0 9px 26px rgba(20, 143, 99, 0.12);
}

.closing-card {
    min-height: 430px;
    border-radius: 32px;
}

.closing-card::before {
    position: absolute;
    top: -100%;
    left: -35%;
    width: 38%;
    height: 300%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    content: "";
    opacity: 0.4;
    pointer-events: none;
    transform: rotate(18deg);
}

.closing.is-in-view .closing-card::before {
    animation: closing-light 8s ease-in-out infinite 1s;
}

@keyframes closing-light {
    0%, 25% { left: -45%; }
    70%, 100% { left: 125%; }
}

@media (max-width: 1040px) {
    .platform-stage,
    .channels-showcase,
    .continuity-stage {
        grid-template-columns: 1fr;
    }

    .platform-copy .section-heading,
    .platform-copy .feature-list,
    .channels-copy .section-heading {
        max-width: 760px;
    }

    .product-tour {
        width: min(850px, 100%);
        margin-inline: auto;
    }

    .channels-human-frame {
        width: min(760px, 100%);
    }

    .channel-cards {
        grid-template-columns: 1fr 1fr;
    }

    .channel-card:last-child {
        grid-column: 1 / -1;
    }

    .continuity-team {
        min-height: 540px;
    }

    .continuity-stage .comparison {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    #como-funciona::before,
    #funcionalidades::before,
    #continuidad::before,
    #preguntas::before {
        width: 90vw;
        height: 90vw;
    }

    .journey-grid::before,
    .journey-grid::after {
        display: none;
    }

    .journey-card {
        min-height: 270px;
        padding: 24px;
    }

    .journey-card::after {
        display: none;
    }

    .platform-stage {
        gap: 34px;
    }

    .product-tour-frame {
        border-radius: 21px;
        transform: none;
    }

    .product-tour-toolbar {
        height: 35px;
    }

    .product-tour-tabs {
        gap: 4px;
        padding: 7px;
    }

    .product-tour-tab {
        display: flex;
        min-height: 42px;
        justify-content: center;
        padding: 7px 5px;
        text-align: center;
    }

    .product-tour-tab > span,
    .product-tour-tab small {
        display: none;
    }

    .product-tour-tab strong {
        font-size: 0.64rem;
    }

    .product-tour-stage {
        aspect-ratio: 1.08 / 1;
    }

    .product-tour-panel img {
        object-fit: cover;
        object-position: top left;
    }

    .product-tour-panel figcaption {
        right: 16px;
        bottom: 15px;
        left: 16px;
        display: block;
    }

    .product-tour-panel figcaption span {
        margin-top: 4px;
        font-size: 0.61rem;
        text-align: left;
    }

    .product-tour-note {
        grid-template-columns: auto 1fr;
    }

    .product-tour-note > span:last-child {
        display: none;
    }

    .feature-manifesto {
        grid-template-columns: auto 1fr;
        gap: 18px;
        padding: 22px;
    }

    .crm-feature-card {
        min-height: 430px;
        padding-bottom: 162px;
    }

    .crm-feature-card .mini-pipeline {
        right: 18px;
        bottom: 20px;
        left: 18px;
        gap: 5px;
    }

    .crm-feature-card .mini-stage {
        padding: 7px;
    }

    .crm-feature-card .mini-lead {
        padding: 7px 4px;
        font-size: 0.5rem;
    }

    .operations-feature-card {
        min-height: 342px;
    }

    .web-publish-card {
        min-height: 390px;
        padding-bottom: 150px;
    }

    .web-publish-card p {
        max-width: none;
    }

    .web-publish-card .widget-preview {
        right: 22px;
        bottom: 22px;
        left: 22px;
        width: auto;
    }

    .feature-manifesto-index {
        font-size: 1.5rem;
    }

    .feature-manifesto p {
        font-size: 0.78rem;
    }

    .feature-manifesto-flow {
        display: none;
    }

    .channels-human-frame {
        aspect-ratio: .94 / 1;
    }

    .channels-human-frame img {
        object-position: 67% center;
    }

    .channel-cards,
    .continuity-stage .comparison {
        grid-template-columns: 1fr;
    }

    .channel-card:last-child {
        grid-column: auto;
    }

    .continuity-team {
        min-height: 470px;
    }

    .continuity-team img {
        object-position: 38% center;
    }

    .continuity-stage .comparison-card {
        padding: 26px;
    }

    .faq-item.open {
        margin-inline: -12px;
        padding-inline: 12px;
    }

    .closing-card {
        min-height: 0;
        border-radius: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey-grid::after,
    .channel-strip-inline::after,
    .product-tour-tab::after,
    .feature-manifesto-flow span,
    .assistant-orbit,
    .assistant-orbit::before,
    .task-row,
    .report-bar,
    .closing-card::before {
        animation: none !important;
    }

    .product-tour-frame,
    .product-tour-panel,
    .channels-human-frame img,
    .continuity-team img {
        transition: none !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   Premium light direction — Auraava
   -------------------------------------------------------------------------- */

:root {
    --ink: #17211d;
    --ink-soft: #5b6762;
    --ink-faint: #8a938f;
    --paper: #fbfcfa;
    --surface: #ffffff;
    --surface-soft: #f2f5f2;
    --night: #14241e;
    --night-soft: #1b3028;
    --line: rgba(23, 33, 29, 0.1);
    --line-dark: rgba(23, 33, 29, 0.12);
    --mint: #24d99a;
    --mint-strong: #14986b;
    --mint-soft: #e8faf2;
    --shadow-sm: 0 16px 45px rgba(23, 33, 29, 0.055);
    --shadow-lg: 0 35px 90px rgba(23, 33, 29, 0.12);
}

body {
    background:
        linear-gradient(90deg, transparent calc(50% - 590px), rgba(23, 33, 29, 0.025) calc(50% - 590px), rgba(23, 33, 29, 0.025) calc(50% - 589px), transparent calc(50% - 589px)),
        linear-gradient(90deg, transparent calc(50% + 589px), rgba(23, 33, 29, 0.025) calc(50% + 589px), rgba(23, 33, 29, 0.025) calc(50% + 590px), transparent calc(50% + 590px)),
        var(--paper);
}

.section {
    padding: 126px 0;
}

.section-kicker,
.eyebrow {
    color: #167956;
}

.section-heading h2,
.closing-copy h2 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.052em;
}

.section-heading p {
    color: var(--ink-soft);
}

.nav-shell {
    padding: 18px 0;
}

.nav-shell.is-scrolled {
    padding: 10px 0;
}

.nav-inner {
    border-color: rgba(23, 33, 29, 0.09);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 50px rgba(23, 33, 29, 0.07);
    backdrop-filter: blur(22px) saturate(150%);
}

.nav-links > a {
    color: #66716c;
}

.nav-links > a:hover,
.nav-links > a:focus-visible {
    background: #f2f5f2;
    color: var(--ink);
}

.lang-toggle,
.menu-button {
    border-color: rgba(23, 33, 29, 0.12);
    background: rgba(255, 255, 255, 0.7);
    color: #53605a;
}

.lang-toggle:hover,
.lang-toggle:focus-visible,
.menu-button:hover,
.menu-button:focus-visible {
    background: #f2f5f2;
    color: var(--ink);
}

.nav-cta {
    background: #1c2a25;
    box-shadow: 0 12px 28px rgba(23, 33, 29, 0.14);
    color: #fff;
}

.nav-cta:hover {
    background: #243630;
    box-shadow: 0 16px 34px rgba(23, 33, 29, 0.18);
}

.hero {
    padding: 176px 0 108px;
    background:
        radial-gradient(circle at 15% 22%, rgba(36, 217, 154, 0.1), transparent 24%),
        radial-gradient(circle at 89% 16%, rgba(135, 177, 157, 0.1), transparent 25%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfa 76%, #f5f8f5 100%);
    color: var(--ink);
}

.hero::before {
    opacity: 1;
    background-image:
        linear-gradient(rgba(23, 33, 29, 0.033) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23, 33, 29, 0.033) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.hero-orb.one {
    top: 130px;
    left: -175px;
    border-color: rgba(36, 217, 154, 0.16);
    box-shadow: inset 0 0 90px rgba(36, 217, 154, 0.045);
}

.hero-orb.two {
    top: 55px;
    right: -230px;
    border-color: rgba(23, 33, 29, 0.08);
}

.hero-copy {
    max-width: 1060px;
}

.eyebrow {
    border-color: rgba(20, 152, 107, 0.17);
    background: rgba(232, 250, 242, 0.74);
    color: #147554;
}

.hero h1 {
    max-width: 1050px;
    color: #18231f;
    font-size: clamp(3.15rem, 6.65vw, 6.35rem);
    font-weight: 700;
    letter-spacing: -0.07em;
    line-height: 0.94;
}

.hero h1 .accent {
    color: #176f53;
}

.title-channel-icon {
    border: 1px solid rgba(23, 33, 29, 0.09);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 8px 20px rgba(23, 33, 29, 0.08);
}

.hero-lede {
    color: #65706b;
}

.button-primary {
    background: #1b2924;
    box-shadow: 0 13px 30px rgba(23, 33, 29, 0.15);
    color: #fff;
}

.button-primary:hover {
    background: #243630;
    box-shadow: 0 17px 38px rgba(23, 33, 29, 0.19);
}

.button-secondary {
    border-color: rgba(23, 33, 29, 0.14);
    background: rgba(255, 255, 255, 0.74);
    color: #26332e;
}

.button-secondary:hover {
    background: #fff;
    box-shadow: 0 12px 26px rgba(23, 33, 29, 0.07);
}

.hero-proof {
    color: #737e79;
}

.hero-proof li::before {
    border-color: rgba(20, 152, 107, 0.32);
    background: radial-gradient(circle, #159a6c 0 2px, transparent 3px);
}

.product-film-wrap {
    margin-top: 78px;
}

.product-film-wrap::before {
    inset: -70px 12% auto;
    background: radial-gradient(ellipse, rgba(55, 154, 113, 0.16), transparent 68%);
}

.film-label {
    color: #63706a;
}

.film-label::before {
    background: #159a6c;
    box-shadow: 0 0 0 5px rgba(21, 154, 108, 0.11);
}

.product-film {
    padding: 9px;
    border-color: rgba(23, 33, 29, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 55px 110px rgba(23, 33, 29, 0.13),
        0 8px 24px rgba(23, 33, 29, 0.06);
}

.film-dots span {
    background: rgba(23, 33, 29, 0.18);
}

.film-address {
    color: rgba(23, 33, 29, 0.4);
}

.film-live {
    color: #17815e;
}

.product-video {
    border: 1px solid rgba(23, 33, 29, 0.07);
    background: #f4f6f4;
}

.channel-strip {
    padding: 30px 0;
    border-top-color: rgba(23, 33, 29, 0.07);
    border-bottom: 1px solid rgba(23, 33, 29, 0.07);
    background: rgba(247, 249, 247, 0.92);
    color: var(--ink);
}

.channel-strip-copy span {
    color: var(--ink-faint);
}

.channel-pill {
    border-color: rgba(23, 33, 29, 0.08);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 6px 20px rgba(23, 33, 29, 0.035);
}

.channel-pill-icon {
    background: #f2f5f2;
}

.channel-pill.whatsapp { color: #1ba94c; }
.channel-pill.instagram { color: #d95689; }
.channel-pill.messenger { color: #287fdc; }
.channel-pill.telegram { color: #168dc1; }
.channel-pill.web { color: #17805c; }

.journey-grid {
    gap: 12px;
}

.journey-card {
    min-height: 300px;
    border-color: rgba(23, 33, 29, 0.085);
    border-radius: 18px;
    box-shadow: none;
}

.journey-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(36, 217, 154, 0.9), rgba(36, 217, 154, 0));
    content: "";
}

.journey-card::after {
    border-color: rgba(23, 33, 29, 0.08);
    background: var(--paper);
    color: #76817c;
}

.journey-icon {
    border: 1px solid rgba(23, 33, 29, 0.06);
    background: #f2f7f4;
}

#plataforma {
    border-top: 1px solid rgba(23, 33, 29, 0.06);
    border-bottom: 1px solid rgba(23, 33, 29, 0.06);
    background:
        radial-gradient(circle at 5% 25%, rgba(36, 217, 154, 0.08), transparent 22%),
        #f2f5f2;
    color: var(--ink);
}

#plataforma .section-kicker {
    color: #167956;
}

#plataforma .section-heading h2 {
    color: var(--ink);
}

#plataforma .section-heading p {
    color: var(--ink-soft);
}

#plataforma .feature-list li {
    color: #56635e;
}

#plataforma .feature-list li::before {
    border-color: rgba(20, 152, 107, 0.2);
    background: #e5f7ef;
    color: #167956;
}

.demo-window {
    border-color: rgba(23, 33, 29, 0.12);
    background: #183028;
    box-shadow: 0 40px 90px rgba(23, 33, 29, 0.2);
}

.floating-event {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 54px rgba(23, 33, 29, 0.16);
}

.floating-event strong {
    color: var(--ink);
}

.floating-event span {
    color: #68746e;
}

.bento-grid {
    gap: 13px;
}

.bento-card,
.bento-card.dark,
.bento-card.mint {
    border-color: rgba(23, 33, 29, 0.085);
    border-radius: 20px;
    background: #fff;
    box-shadow: none;
    color: var(--ink);
}

.bento-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(20, 152, 107, 0.26), transparent);
    content: "";
}

.bento-card:nth-child(2),
.bento-card:nth-child(3),
.bento-card:nth-child(5) {
    background: #f2f5f2;
}

.bento-label,
.dark .bento-label {
    border-color: rgba(23, 33, 29, 0.1);
    background: rgba(255, 255, 255, 0.56);
    color: #6c7772;
}

.bento-card.dark p {
    color: var(--ink-soft);
}

.assistant-orbit {
    border-color: rgba(20, 152, 107, 0.18);
}

.assistant-orbit::before {
    border-color: rgba(20, 152, 107, 0.13);
}

.assistant-orbit::after {
    background: #29d49a;
    box-shadow: 0 0 70px rgba(36, 217, 154, 0.2);
}

.task-row {
    border: 1px solid rgba(23, 33, 29, 0.07);
    background: rgba(255, 255, 255, 0.9);
}

.support-bubble {
    background: #fff;
    color: #5b6762;
    box-shadow: 0 7px 20px rgba(23, 33, 29, 0.06);
}

.support-bubble.agent {
    background: #dff8ed;
    color: #174936;
}

.widget-preview {
    border: 1px solid rgba(23, 33, 29, 0.08);
    box-shadow: 0 18px 45px rgba(23, 33, 29, 0.13);
}

.widget-head {
    background: #26362f;
}

#canales {
    border-top: 1px solid rgba(23, 33, 29, 0.06);
    border-bottom: 1px solid rgba(23, 33, 29, 0.06);
    background:
        radial-gradient(circle at 91% 13%, rgba(36, 217, 154, 0.08), transparent 25%),
        #f4f6f3;
    color: var(--ink);
}

#canales .section-kicker {
    color: #167956;
}

#canales .section-heading h2 {
    color: var(--ink);
}

#canales .section-heading p {
    color: var(--ink-soft);
}

.channels-copy-note {
    border-color: rgba(23, 33, 29, 0.08);
    background: rgba(255, 255, 255, 0.72);
    color: #65716b;
}

.channels-copy-note strong {
    color: var(--ink);
}

.channels-note-icon {
    background: #e5f7ef;
    color: #167956;
}

.channel-card {
    min-height: 96px;
    border-color: rgba(23, 33, 29, 0.08);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 8px 24px rgba(23, 33, 29, 0.035);
}

.channel-card:hover {
    border-color: rgba(20, 152, 107, 0.22);
    background: #fff;
    box-shadow: 0 16px 36px rgba(23, 33, 29, 0.07);
}

.channel-card-icon {
    background: #f3f5f3;
}

.channel-card h3 {
    color: var(--ink);
}

.channel-card p {
    color: #737e79;
}

.channel-card-arrow {
    color: rgba(23, 33, 29, 0.22);
}

.comparison-card,
.comparison-card.highlight {
    border-color: rgba(23, 33, 29, 0.085);
    background: #fff;
    box-shadow: none;
    color: var(--ink);
}

.comparison-card.highlight {
    border-color: rgba(20, 152, 107, 0.22);
    background: #eef8f3;
}

.comparison-card.highlight > span {
    color: #167956;
}

.highlight .comparison-list li {
    color: #52605a;
}

.highlight .comparison-list li::before {
    background: #d9f4e9;
    color: #167956;
}

.faq-list,
.faq-item {
    border-color: rgba(23, 33, 29, 0.09);
}

.closing-card {
    border: 1px solid rgba(23, 33, 29, 0.09);
    background:
        radial-gradient(circle at 87% 13%, rgba(36, 217, 154, 0.2), transparent 31%),
        radial-gradient(circle at 4% 95%, rgba(130, 171, 151, 0.11), transparent 34%),
        #f0f5f1;
    color: var(--ink);
    box-shadow: 0 30px 80px rgba(23, 33, 29, 0.09);
}

.closing-card::after {
    border-color: rgba(23, 33, 29, 0.08);
}

.closing-copy p {
    color: #65716b;
}

.footer {
    background: #fff;
}

.mobile-cta {
    background: #1b2924;
    box-shadow: 0 18px 45px rgba(23, 33, 29, 0.22);
    color: #fff;
}

@media (max-width: 1040px) {
    .nav-links {
        border-color: rgba(23, 33, 29, 0.09);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 24px 70px rgba(23, 33, 29, 0.14);
    }

    .nav-links > a {
        color: #52605a;
    }
}

@media (max-width: 760px) {
    body {
        background: var(--paper);
    }

    .section {
        padding: 88px 0;
    }

    .nav-shell {
        padding: 10px 0;
    }

    .hero {
        padding: 134px 0 72px;
    }

    .hero h1 {
        font-size: clamp(2.85rem, 13.6vw, 4.65rem);
        line-height: 0.95;
    }

    .hero-lede {
        color: #65716b;
    }

    .product-film {
        border-color: rgba(23, 33, 29, 0.1);
        background: #fff;
        box-shadow: 0 36px 75px rgba(23, 33, 29, 0.13);
    }

    .channel-pill {
        background: #fff;
    }

    .journey-card {
        min-height: 245px;
    }

    .closing-card {
        background:
            radial-gradient(circle at 90% 8%, rgba(36, 217, 154, 0.19), transparent 34%),
            #f0f5f1;
    }

    .mobile-cta {
        opacity: 0;
        pointer-events: none;
        transform: translateY(16px);
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .mobile-cta.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

/* Final cascade locks for the full-width header and seamless product film. */
.nav-shell,
.nav-shell.is-scrolled {
    padding: 0;
}

.nav-inner,
.nav-shell.is-scrolled .nav-inner {
    width: 100%;
    max-width: none;
    min-height: 76px;
    padding: 9px clamp(18px, 4vw, 58px);
    border-width: 0 0 1px;
    border-color: rgba(23, 33, 29, 0.08);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 35px rgba(23, 33, 29, 0.05);
}

.nav-shell.is-scrolled .nav-inner {
    min-height: 68px;
    background: rgba(255, 255, 255, 0.96);
}

.product-film {
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: transparent;
    box-shadow: 0 48px 96px rgba(25, 42, 35, 0.14), 0 9px 28px rgba(25, 42, 35, 0.075);
}

.product-video {
    border: 0;
    border-radius: 30px;
    background: transparent;
}

@media (max-width: 1040px) {
    .nav-links {
        top: 76px;
    }
}

@media (max-width: 760px) {
    .nav-inner,
    .nav-shell.is-scrolled .nav-inner {
        min-height: 64px;
        padding: 7px 14px;
        border-radius: 0;
    }

    .nav-links {
        top: 64px;
        right: 10px;
        left: 10px;
    }

    .product-film {
        width: min(355px, 100%);
        padding: 0;
        background: transparent;
        box-shadow: 0 34px 72px rgba(25, 42, 35, 0.16);
    }

    .product-video-mobile {
        border-radius: 30px;
    }
}

/* --------------------------------------------------------------------------
   Hero story v4 — restored flow field and slide-based product viewing
   -------------------------------------------------------------------------- */

html {
    scroll-snap-type: none;
}

.hero {
    padding: 0;
    background:
        radial-gradient(circle at 13% 20%, rgba(36, 217, 154, 0.12), transparent 27%),
        radial-gradient(circle at 87% 14%, rgba(95, 187, 148, 0.1), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfdfa 52%, #f5f8f5 100%);
}

.hero::before {
    display: none;
}

.hero > .container {
    position: relative;
    z-index: 2;
}

.hero-copy {
    display: flex;
    min-height: 100svh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 122px 0 62px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.hero-network {
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 73%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0, 0, 0, 0.72) 73%, transparent 100%);
}

.hero-channel-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.hero-channel-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 8px;
    border: 1px solid rgba(23, 33, 29, 0.09);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 9px 25px rgba(23, 33, 29, 0.07);
    color: #5b6762;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
    backdrop-filter: blur(12px);
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), box-shadow 220ms ease, border-color 220ms ease;
}

.hero-channel-button:hover,
.hero-channel-button:focus-visible {
    border-color: rgba(23, 33, 29, 0.17);
    box-shadow: 0 14px 34px rgba(23, 33, 29, 0.11);
    transform: translateY(-4px);
}

.hero-channel-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: #f2f5f2;
}

.hero-channel-icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.hero-channel-button.whatsapp { color: #1ba94c; }
.hero-channel-button.instagram { color: #d95689; }
.hero-channel-button.messenger { color: #287fdc; }
.hero-channel-button.telegram { color: #168dc1; }
.hero-channel-button.web { color: #17805c; }

.hero h1 {
    margin-top: 0;
}

.hero-actions {
    margin-top: 31px;
}

.meta-proof {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
    padding: 9px 14px;
    border: 1px solid rgba(8, 102, 255, 0.11);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 9px 24px rgba(23, 33, 29, 0.045);
    color: #596660;
    font-size: 0.78rem;
    font-weight: 750;
    backdrop-filter: blur(12px);
}

.meta-proof-logo {
    width: 48px;
    height: 27px;
    color: #0866ff;
}

.product-film-wrap {
    display: flex;
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    padding: 98px 0 54px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.product-film-wrap::before {
    inset: 12% 2% 10%;
    height: auto;
    background: radial-gradient(ellipse, rgba(38, 154, 110, 0.2), rgba(185, 218, 204, 0.06) 52%, transparent 73%);
}

.product-film {
    width: 100%;
    max-height: calc(100svh - 128px);
    transform: translateZ(0);
    transition: box-shadow 500ms ease, transform 500ms cubic-bezier(.16, 1, .3, 1);
}

.product-film-wrap.is-video-active .product-film {
    box-shadow: 0 58px 120px rgba(25, 42, 35, 0.18), 0 12px 35px rgba(25, 42, 35, 0.1);
    transform: translateZ(0) scale(1.008);
}

.product-video {
    max-height: calc(100svh - 128px);
}

.channel-strip,
.section,
.footer {
    scroll-snap-align: start;
}

@media (max-width: 1040px) {
    .hero-channel-intro {
        max-width: 590px;
    }
}

@media (max-width: 760px) {
    html {
        scroll-snap-type: none;
    }

    .hero-copy {
        min-height: 100svh;
        padding: 102px 0 42px;
    }

    .hero-channel-intro {
        flex-wrap: nowrap;
        gap: 7px;
        margin-bottom: 26px;
    }

    .hero-channel-button {
        width: 43px;
        min-height: 43px;
        justify-content: center;
        padding: 6px;
        border-radius: 12px;
    }

    .hero-channel-button > span:last-child {
        display: none;
    }

    .hero-channel-icon {
        width: 29px;
        height: 29px;
        background: transparent;
    }

    .hero h1 {
        font-size: clamp(2.75rem, 13.2vw, 4.5rem);
    }

    .hero-lede {
        margin-top: 22px;
    }

    .meta-proof {
        margin-top: 20px;
    }

    .product-film-wrap {
        min-height: 100svh;
        padding: 82px 0 34px;
    }

    .product-film,
    .product-video-mobile {
        max-height: calc(100svh - 116px);
    }

    body.video-slide-active .mobile-cta {
        opacity: 0;
        pointer-events: none;
        transform: translateY(18px);
    }

    .hero-network {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 49%, rgba(0, 0, 0, 0.65) 72%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 49%, rgba(0, 0, 0, 0.65) 72%, transparent 100%);
    }
}

/* --------------------------------------------------------------------------
   Presentation flow v5 — full-viewport product slide and section navigator
   -------------------------------------------------------------------------- */

html {
    scroll-padding-top: 0;
    scroll-snap-type: none;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

html[data-start-at-top],
html.presentation-scrolling {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

body {
    overflow-x: clip;
    overscroll-behavior-y: none;
}

.hero-lede {
    color: #111a16;
    text-shadow: 0 1px 18px rgba(255, 255, 255, 0.68);
}

.meta-proof-logo {
    display: block;
    width: 72px;
    height: auto;
    flex: 0 0 auto;
}

.section-rail {
    position: fixed;
    z-index: 45;
    top: 50%;
    right: max(14px, env(safe-area-inset-right));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    padding: 10px 0;
    transform: translateY(-50%);
    pointer-events: none;
}

.section-rail-line {
    position: absolute;
    z-index: -1;
    top: 20px;
    right: 6px;
    bottom: 20px;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(23, 33, 29, 0.14) 12%, rgba(23, 33, 29, 0.14) 88%, transparent);
}

.section-rail-item {
    display: flex;
    min-height: 24px;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    color: #17211d;
    text-decoration: none;
    pointer-events: auto;
}

.section-rail-label {
    padding: 5px 9px;
    border: 1px solid rgba(23, 33, 29, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(23, 33, 29, 0.09);
    font-size: 0.67rem;
    font-weight: 750;
    line-height: 1;
    opacity: 0;
    transform: translateX(7px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.2, .8, .2, 1);
    white-space: nowrap;
}

.section-rail-dot {
    position: relative;
    display: block;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(23, 33, 29, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 3px 12px rgba(23, 33, 29, 0.08);
    transition: height 240ms cubic-bezier(.2, .8, .2, 1), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.section-rail-item:hover .section-rail-label,
.section-rail-item:focus-visible .section-rail-label,
.section-rail-item.active .section-rail-label {
    opacity: 1;
    transform: none;
}

.section-rail-item.active .section-rail-dot {
    height: 28px;
    border-color: rgba(19, 140, 96, 0.52);
    background: linear-gradient(180deg, #24d99a, #168a62);
    box-shadow: 0 7px 20px rgba(21, 151, 103, 0.28);
}

.section-rail-item.active .section-rail-label {
    color: #126f50;
}

.hero-copy,
.product-film-wrap,
main > .section,
.footer {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}

main > .section {
    display: flex;
    min-height: 100svh;
    align-items: center;
}

main > .section > .container {
    width: min(calc(100% - 64px), var(--max));
    margin-inline: auto;
}

.channel-strip {
    scroll-snap-align: none;
}

.channel-strip-inline {
    z-index: 1;
    margin-top: 34px;
    padding: 20px;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 24px;
    background: #f4f7f4;
    color: var(--ink);
}

.channel-strip-inline .channel-strip-inner {
    grid-template-columns: 1.25fr repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.channel-strip-inline .channel-strip-copy {
    padding-right: 18px;
}

.channel-strip-inline .channel-strip-copy span {
    color: #66736d;
}

.product-film-wrap {
    width: 100vw;
    height: 100svh;
    min-height: 100svh;
    margin-inline: calc(50% - 50vw);
    padding: 92px clamp(24px, 4vw, 64px) 28px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    isolation: isolate;
}

.product-film-wrap::before {
    display: none;
}

.product-film,
.product-film-wrap.is-video-active .product-film {
    width: 100%;
    height: calc(100svh - 120px);
    max-height: none;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(23, 33, 29, 0.08);
    border-radius: 30px;
    background: #f5f7f5;
    box-shadow: 0 30px 80px rgba(23, 33, 29, 0.1);
    transform: none;
}

.product-film-wrap.is-video-active .product-film {
    box-shadow: 0 36px 90px rgba(23, 33, 29, 0.13);
}

.product-film::before,
.product-film::after {
    display: none;
}

.product-video {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: inherit;
    background: #fff;
    object-fit: contain;
    aspect-ratio: auto;
}

body.video-slide-active .nav-inner,
body.video-slide-active .nav-shell.is-scrolled .nav-inner {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px) saturate(125%);
}

html.presentation-scrolling .section-rail-dot {
    will-change: height, background, box-shadow;
}

@media (max-width: 760px) {
    html {
        scroll-snap-type: none;
        scrollbar-gutter: auto;
    }

    main > .section > .container {
        width: calc(100% - 48px);
    }

    .meta-proof-logo {
        width: 67px;
    }

    .section-rail {
        right: max(7px, env(safe-area-inset-right));
        gap: 2px;
    }

    .section-rail-line {
        right: 5px;
    }

    .section-rail-label {
        display: none;
    }

    .section-rail-dot {
        width: 11px;
        height: 11px;
        border-color: rgba(23, 33, 29, 0.2);
        background: rgba(255, 255, 255, 0.9);
    }

    .section-rail-item.active .section-rail-dot {
        height: 24px;
    }

    .product-film-wrap {
        width: 100vw;
        height: 100svh;
        min-height: 100svh;
        margin-inline: calc(50% - 50vw);
        padding: 76px 12px 16px;
    }

    .product-film,
    .product-film-wrap.is-video-active .product-film {
        width: 100%;
        height: calc(100svh - 92px);
        max-height: none;
        border-radius: 24px;
    }

    .product-video,
    .product-video-mobile {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: inherit;
        object-fit: contain;
    }

    .channel-strip-inline {
        margin-top: 28px;
        padding: 18px 12px 14px;
        border-radius: 20px;
    }

    .channel-strip-inline .channel-strip-inner {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
    }

    .channel-strip-inline .channel-strip-copy {
        padding: 0 4px 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .section-rail-label,
    .section-rail-dot {
        transition: none;
    }
}

/* Final specificity pass for v9 (kept after the legacy presentation layer). */
.product-tour-panel::after,
.product-tour-panel figcaption {
    display: none;
}

.product-tour-stage {
    background: #fff;
}

.product-tour-panel img {
    object-fit: contain;
    object-position: top left;
}

.crm-feature-card {
    min-height: 0;
    padding-bottom: 30px;
}

.crm-feature-card .mini-pipeline {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: 26px;
}

.operations-feature-card {
    min-height: 420px;
}

@media (max-width: 1040px) and (min-width: 761px) {
    .bento-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .bento-card.wide,
    .bento-card.narrow {
        grid-column: span 12;
    }

    .bento-card.third {
        grid-column: span 6;
    }

    .operations-feature-card {
        min-height: 400px;
    }
}

@media (max-width: 760px) {
    .crm-feature-card {
        min-height: 0;
        padding-bottom: 24px;
    }

    .crm-feature-card .mini-pipeline {
        right: auto;
        bottom: auto;
        left: auto;
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .operations-feature-card {
        min-height: 400px;
    }
}