:root {
    --blue: #005eff;
    --blue-600: #0049d9;
    --blue-700: #003aa8;
    --blue-soft: #eaf1ff;
    --blue-soft-2: #f2f6ff;
    --cyan: #25f4ee;
    --green: #25d366;
    --pink: #d6249f;
    --danger: #e5484d;
    --warning: #f5a524;
    --bg: #ffffff;
    --bg-alt: #f5f8ff;
    --bg-dark-section: #07101f;
    --card: #ffffff;
    --card-raised: #ffffff;
    --ink: #060b16;
    --text: #101828;
    --muted: #667085;
    --muted-2: #8a99b2;
    --border: #dce6ff;
    --border-strong: #bfd0f5;
    --nav-bg: rgba(255, 255, 255, 0.86);
    --shadow-sm: 0 8px 24px rgba(2, 32, 90, 0.07);
    --shadow: 0 18px 48px rgba(2, 32, 90, 0.11);
    --shadow-lg: 0 28px 80px rgba(2, 32, 90, 0.16);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 30px;
    --max-width: 1240px;
    --header-height: 76px;
    --focus: 0 0 0 4px rgba(0, 94, 255, 0.2);
}

html[data-theme="dark"] {
    --bg: #060a14;
    --bg-alt: #0a1120;
    --card: #0d1726;
    --card-raised: #111d2f;
    --ink: #ffffff;
    --text: #f4f7ff;
    --muted: #93a5c4;
    --muted-2: #7385a3;
    --border: #1d2a3d;
    --border-strong: #31425d;
    --blue-soft: #0d1e3c;
    --blue-soft-2: #0b1528;
    --nav-bg: rgba(6, 10, 20, 0.86);
    --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.24);
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.46);
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 24px);
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--bg);
    color: var(--text);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.menu-open {
    overflow: hidden;
}

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

img {
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

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

button {
    color: inherit;
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    color: var(--blue-600);
}

p,
h1,
h2,
h3,
h4,
ul,
ol,
figure {
    margin-top: 0;
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-family: "Sora", "Manrope", sans-serif;
    letter-spacing: -0.025em;
}

h1 {
    font-size: clamp(2.35rem, 5vw, 4.8rem);
    line-height: 1.04;
}

h2 {
    font-size: clamp(2rem, 3.5vw, 3.25rem);
    line-height: 1.12;
}

h3 {
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.28;
}

::selection {
    background: rgba(0, 94, 255, 0.22);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}

.skip-link {
    position: fixed;
    z-index: 9999;
    top: 12px;
    left: 12px;
    transform: translateY(-140%);
    border-radius: 10px;
    background: var(--ink);
    color: var(--bg);
    padding: 10px 16px;
    font-weight: 800;
    transition: transform 0.2s ease;
}

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

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

.narrow-container {
    width: min(860px, calc(100% - 48px));
    margin-inline: auto;
}

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

.section-compact {
    padding: 72px 0;
}

.section-alt {
    background: var(--bg-alt);
}

.section-dark {
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 10%, rgba(0, 94, 255, 0.2), transparent 34%),
        radial-gradient(circle at 15% 90%, rgba(37, 244, 238, 0.08), transparent 28%),
        var(--bg-dark-section);
    color: #d8e2f5;
}

.section-dark h2,
.section-dark h3,
.section-dark .section-title {
    color: #ffffff;
}

.section-dark .section-copy,
.section-dark .eyebrow + p {
    color: #93a5c4;
}

.section-heading {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
}

.section-heading.align-left {
    margin-inline: 0;
    text-align: left;
}

.section-heading h2,
.section-title {
    margin-bottom: 16px;
}

.section-heading p,
.section-copy {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 1.075rem;
    line-height: 1.75;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    border: 1px solid rgba(0, 94, 255, 0.22);
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px rgba(0, 94, 255, 0.1);
}

.text-gradient {
    background: linear-gradient(112deg, var(--blue) 8%, #4395ff 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.text-muted {
    color: var(--muted);
}

.text-center {
    text-align: center;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    align-items: center;
}

.button-row.centered {
    justify-content: center;
}

.button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 12px 22px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 94, 255, 0.26);
}

.button-primary:hover {
    background: var(--blue-600);
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(0, 94, 255, 0.33);
}

.button-secondary {
    border-color: var(--border);
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.button-secondary:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.button-ghost {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
}

.button-ghost:hover {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.button-small {
    min-height: 40px;
    border-radius: 11px;
    padding: 9px 16px;
    font-size: 0.88rem;
}

.button-block {
    width: 100%;
}

.button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.icon-button {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.icon-button:hover {
    border-color: var(--blue);
    transform: translateY(-1px);
}

.icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.card-lift {
    transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.card-lift:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 94, 255, 0.34);
    box-shadow: var(--shadow);
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    padding: 8px 13px;
    font-size: 0.86rem;
    font-weight: 700;
}

.check-list,
.x-list {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li,
.x-list li {
    position: relative;
    padding-left: 30px;
    color: var(--muted);
}

.check-list li::before,
.x-list li::before {
    position: absolute;
    top: 0.14em;
    left: 0;
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.check-list li::before {
    content: "✓";
    background: rgba(37, 211, 102, 0.13);
    color: #0f9f4f;
}

.x-list li::before {
    content: "–";
    background: rgba(102, 112, 133, 0.12);
    color: var(--muted);
}

/* Header */
.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    border-bottom: 1px solid transparent;
    background: var(--nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-header.is-scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 8px 28px rgba(2, 32, 90, 0.07);
}

.nav-shell {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    gap: 20px;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

.brand:hover {
    color: var(--text);
}

.brand img {
    display: block;
    flex: 0 0 auto;
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-copy strong {
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.075em;
}

.brand-copy small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

.nav-link {
    border-radius: 10px;
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.nav-link:hover,
.nav-link.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

.nav-link.is-active {
    font-weight: 800;
}

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

.language-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card);
    color: var(--muted);
    padding: 8px 9px;
    font-size: 0.77rem;
    font-weight: 800;
}

.language-toggle:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.language-current {
    color: var(--blue);
}

.theme-toggle .icon-sun,
html[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

.nav-cta {
    min-height: 42px;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 0.86rem;
}

.menu-toggle {
    display: none;
}

.mobile-menu {
    border-top: 1px solid var(--border);
    background: var(--bg);
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-nav {
    display: grid;
    gap: 5px;
    padding-top: 14px;
    padding-bottom: 20px;
}

.mobile-nav-link {
    border-radius: 12px;
    color: var(--text);
    padding: 12px 14px;
    font-weight: 750;
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
    background: var(--blue-soft);
    color: var(--blue);
}

/* Home hero */
.hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-height) + 70px) 0 86px;
    background:
        radial-gradient(780px 500px at 84% 5%, var(--blue-soft), transparent 72%),
        radial-gradient(480px 360px at 4% 100%, rgba(0, 94, 255, 0.07), transparent 70%),
        var(--bg);
}

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

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(440px, 0.98fr);
    gap: clamp(46px, 7vw, 88px);
    align-items: center;
}

.hero-copy h1 {
    max-width: 760px;
    margin-bottom: 24px;
}

.hero-copy > p {
    max-width: 650px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: clamp(1.04rem, 1.5vw, 1.19rem);
    line-height: 1.75;
}

.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 17px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.hero-chips li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}

.hero-chips li::before {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    content: "✓";
    font-size: 0.67rem;
    font-weight: 900;
}

.hero-visual {
    position: relative;
    min-height: 560px;
    isolation: isolate;
}

.hero-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(420px, 82%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 94, 255, 0.16);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), rgba(234, 241, 255, 0.74) 42%, rgba(0, 94, 255, 0.1) 71%, transparent 72%);
    box-shadow: inset 0 0 80px rgba(0, 94, 255, 0.08), 0 38px 90px rgba(0, 94, 255, 0.14);
}

html[data-theme="dark"] .hero-orb {
    background:
        radial-gradient(circle at 50% 38%, rgba(22, 38, 62, 0.98), rgba(13, 23, 38, 0.92) 44%, rgba(0, 94, 255, 0.18) 71%, transparent 72%);
}

.hero-orb::before,
.hero-orb::after {
    position: absolute;
    inset: 11%;
    border: 1px dashed rgba(0, 94, 255, 0.28);
    border-radius: 50%;
    content: "";
    animation: rotate 28s linear infinite;
}

.hero-orb::after {
    inset: 24%;
    border-style: solid;
    border-color: rgba(0, 94, 255, 0.12);
    animation-direction: reverse;
    animation-duration: 18s;
}

.hero-core {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    width: 130px;
    height: 130px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 10px solid rgba(255, 255, 255, 0.9);
    border-radius: 36px;
    background: #ffffff;
    box-shadow: 0 24px 55px rgba(0, 94, 255, 0.24);
    animation: float 5.5s ease-in-out infinite;
}

html[data-theme="dark"] .hero-core {
    border-color: rgba(255, 255, 255, 0.15);
    background: #ffffff;
}

.hero-core img {
    width: 100%;
    height: 100%;
}

.platform-badge {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    background: color-mix(in srgb, var(--card) 92%, transparent);
    color: var(--text);
    padding: 10px 13px;
    box-shadow: var(--shadow);
    font-size: 0.8rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
    animation: float-sm 5.4s ease-in-out infinite;
}

.platform-badge .platform-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 11px;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 900;
}

.platform-whatsapp {
    top: 8%;
    left: 1%;
}

.platform-whatsapp .platform-icon {
    background: var(--green);
}

.platform-instagram {
    bottom: 8%;
    left: 0;
    animation-delay: 0.7s;
}

.platform-instagram .platform-icon {
    background: linear-gradient(140deg, #f9ce34, #ee2a7b 52%, #6228d7);
}

.platform-messenger {
    top: 5%;
    right: 0;
    animation-delay: 1.1s;
}

.platform-messenger .platform-icon {
    background: linear-gradient(145deg, #00b2ff, #006aff);
}

.platform-tiktok {
    right: 1%;
    bottom: 7%;
    animation-delay: 1.6s;
}

.platform-tiktok .platform-icon {
    background: #050505;
}

.platform-badge small {
    display: block;
    color: var(--muted);
    font-size: 0.63rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.phone-demo {
    position: absolute;
    z-index: 4;
    right: 50%;
    bottom: 50%;
    width: min(286px, 55%);
    min-height: 392px;
    transform: translate(45%, 55%) rotate(-2deg);
    overflow: hidden;
    border: 8px solid #101828;
    border-radius: 34px;
    background: var(--bg);
    box-shadow: var(--shadow-lg);
}

.phone-topbar {
    display: flex;
    height: 58px;
    align-items: center;
    gap: 9px;
    background: linear-gradient(120deg, #005eff, #2d7fff);
    color: #ffffff;
    padding: 0 14px;
}

.phone-topbar img {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: #ffffff;
}

.phone-topbar strong {
    display: block;
    font-size: 0.83rem;
    line-height: 1.2;
}

.phone-topbar small {
    display: block;
    color: #dbe7ff;
    font-size: 0.64rem;
}

.phone-chat {
    display: flex;
    min-height: 285px;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px;
    background:
        radial-gradient(circle at 10% 20%, rgba(0, 94, 255, 0.06), transparent 32%),
        var(--bg-alt);
}

.phone-message {
    max-width: 84%;
    border: 1px solid var(--border);
    border-radius: 13px 13px 13px 4px;
    background: var(--card);
    color: var(--text);
    padding: 8px 10px;
    font-size: 0.68rem;
    line-height: 1.45;
    box-shadow: 0 4px 12px rgba(2, 32, 90, 0.05);
    animation: message-in 0.32s ease both;
}

.phone-message.user {
    align-self: flex-end;
    border-color: var(--blue);
    border-radius: 13px 13px 4px 13px;
    background: var(--blue);
    color: #ffffff;
}

.typing-dots {
    display: inline-flex;
    width: fit-content;
    gap: 4px;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    background: var(--card);
    padding: 10px 12px;
}

.typing-dots span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--muted);
    animation: typing 1s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

.phone-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    background: var(--card);
    color: var(--muted);
    padding: 11px 13px;
    font-size: 0.62rem;
    font-weight: 700;
}

.phone-status .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.14);
}

.trust-strip {
    border-block: 1px solid var(--border);
    background: var(--bg-alt);
}

.trust-strip-inner {
    display: flex;
    min-height: 96px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 13px 28px;
}

.trust-label {
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 0.91rem;
    font-weight: 750;
}

.channel-chip .channel-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--channel-color, var(--blue));
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--channel-color, var(--blue)) 12%, transparent);
}

.channel-chip small {
    border-radius: 999px;
    background: rgba(37, 244, 238, 0.1);
    color: #058f8b;
    padding: 2px 6px;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Solution and benefit cards */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.solution-card {
    position: relative;
    min-height: 400px;
    overflow: hidden;
    padding: 36px;
}

.solution-card::after {
    position: absolute;
    right: -80px;
    bottom: -100px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: var(--blue-soft);
    content: "";
}

.solution-card h3 {
    max-width: 430px;
    margin-bottom: 14px;
    font-size: clamp(1.5rem, 2.7vw, 2.1rem);
}

.solution-card p {
    max-width: 530px;
    color: var(--muted);
}

.solution-icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 24px;
    place-items: center;
    border-radius: 18px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: "Sora", sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
}

.solution-card .button {
    position: absolute;
    z-index: 2;
    bottom: 36px;
    left: 36px;
}

.mini-ui {
    position: absolute;
    z-index: 1;
    right: 28px;
    bottom: 22px;
    width: 210px;
    transform: rotate(-4deg);
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card-raised);
    padding: 14px;
    box-shadow: var(--shadow);
}

.mini-ui-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.mini-ui-row:last-child {
    margin-bottom: 0;
}

.mini-ui-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--blue-soft);
}

.mini-ui-lines {
    display: grid;
    flex: 1;
    gap: 5px;
}

.mini-ui-lines span {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--border);
}

.mini-ui-lines span:last-child {
    width: 62%;
}

.benefit-grid,
.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.benefit-card,
.capability-card {
    padding: 26px;
}

.benefit-icon,
.capability-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 14px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
}

.benefit-card h3,
.capability-card h3 {
    margin-bottom: 9px;
    font-size: 1.08rem;
}

.benefit-card p,
.capability-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.93rem;
}

/* TikTok / newsletter */
.tiktok-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
    gap: 64px;
    align-items: center;
}

.tiktok-grid h2 {
    margin-bottom: 18px;
}

.tiktok-grid p {
    color: #93a5c4;
    font-size: 1.05rem;
}

.inline-form {
    display: flex;
    max-width: 560px;
    gap: 10px;
    margin-top: 26px;
}

.inline-form input {
    min-width: 0;
    flex: 1;
    border: 1px solid #26354c;
    border-radius: 13px;
    background: #0d1726;
    color: #ffffff;
    padding: 13px 15px;
}

.inline-form input::placeholder {
    color: #7183a1;
}

.inline-form input:focus {
    border-color: var(--blue);
    outline: none;
    box-shadow: 0 0 0 4px rgba(0, 94, 255, 0.2);
}

.tiktok-visual {
    position: relative;
    min-height: 330px;
}

.tiktok-phone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220px;
    height: 350px;
    transform: translate(-50%, -50%) rotate(5deg);
    overflow: hidden;
    border: 8px solid #050505;
    border-radius: 34px;
    background: linear-gradient(150deg, #1e1337, #050505 55%, #082b31);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
}

.tiktok-phone::before {
    position: absolute;
    top: 12px;
    left: 50%;
    width: 78px;
    height: 20px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: #050505;
    content: "";
}

.tiktok-logo-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 94px;
    height: 94px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    backdrop-filter: blur(10px);
}

.tiktok-comment {
    position: absolute;
    z-index: 2;
    min-width: 210px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 15px;
    background: rgba(13, 23, 38, 0.82);
    color: #ffffff;
    padding: 12px 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
    font-size: 0.79rem;
    backdrop-filter: blur(10px);
}

.tiktok-comment.one {
    top: 26px;
    left: 0;
}

.tiktok-comment.two {
    right: 0;
    bottom: 34px;
}

.tiktok-comment small {
    display: block;
    margin-top: 5px;
    color: #25f4ee;
    font-weight: 800;
}

.form-feedback {
    display: none;
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.88rem;
    font-weight: 700;
}

.form-feedback.is-visible {
    display: block;
}

.form-feedback.is-success {
    background: rgba(37, 211, 102, 0.12);
    color: #15924a;
}

.form-feedback.is-error {
    background: rgba(229, 72, 77, 0.12);
    color: #c5353a;
}

/* Diagnostic teaser */
.diagnostic-teaser {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 44px;
    align-items: center;
    overflow: hidden;
    padding: 48px;
}

.diagnostic-teaser h2 {
    margin-bottom: 16px;
}

.diagnostic-teaser p {
    color: var(--muted);
}

.diagnostic-sample {
    display: grid;
    gap: 11px;
}

.sample-question {
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-alt);
    padding: 18px;
}

.sample-question strong {
    display: block;
    margin-bottom: 11px;
    color: var(--ink);
}

.sample-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sample-option {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    padding: 6px 10px;
    font-size: 0.77rem;
    font-weight: 700;
}

.sample-option.selected {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue);
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 36px;
}

.pricing-card.featured {
    border-color: var(--blue);
    box-shadow: 0 24px 70px rgba(0, 94, 255, 0.16);
}

.plan-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    border-radius: 999px;
    background: var(--blue);
    color: #ffffff;
    padding: 6px 11px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.plan-name {
    margin-bottom: 8px;
    color: var(--blue);
    font-family: "Sora", sans-serif;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan-price {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 15px;
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: clamp(2.3rem, 4.4vw, 3.7rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
}

.plan-price small {
    margin-bottom: 7px;
    color: var(--muted);
    font-family: "Manrope", sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
}

.pricing-card > p {
    min-height: 78px;
    color: var(--muted);
}

.pricing-card .check-list {
    margin: 22px 0 28px;
}

.pricing-card .button {
    margin-top: auto;
}

.price-note {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-alt);
    color: var(--muted);
    padding: 16px 18px;
    font-size: 0.91rem;
}

/* Steps and cases */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.step-card {
    position: relative;
    padding: 24px 20px;
}

.step-card::after {
    position: absolute;
    top: 40px;
    left: calc(100% + 1px);
    width: 14px;
    border-top: 2px dashed var(--border-strong);
    content: "";
}

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

.step-number {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 18px;
    place-items: center;
    border-radius: 12px;
    background: var(--blue);
    color: #ffffff;
    font-family: "Sora", sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(0, 94, 255, 0.24);
}

.step-card h3 {
    margin-bottom: 8px;
    font-size: 1rem;
}

.step-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.88rem;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.case-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
}

.case-card::before {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--blue-soft);
    content: "";
}

.case-card h3 {
    position: relative;
    margin-bottom: 10px;
}

.case-card p {
    position: relative;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.93rem;
}

/* FAQ */
.faq-list {
    display: grid;
    max-width: 900px;
    gap: 12px;
    margin: 0 auto;
}

.faq-item {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item.is-open {
    border-color: var(--blue);
    box-shadow: var(--shadow-sm);
}

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

.faq-plus {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 1.3rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.faq-item.is-open .faq-plus {
    transform: rotate(45deg);
}

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

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

.faq-answer p {
    margin: 0;
    color: var(--muted);
    padding: 0 22px 22px;
}

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

/* CTA */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 84% 0%, rgba(37, 244, 238, 0.18), transparent 32%),
        linear-gradient(120deg, #004ad6, #005eff 52%, #1e79ff);
    color: #ffffff;
    padding: 58px;
    box-shadow: 0 28px 80px rgba(0, 94, 255, 0.28);
}

.cta-band::before {
    position: absolute;
    right: -100px;
    bottom: -170px;
    width: 370px;
    height: 370px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    content: "";
}

.cta-band-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-band h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: #ffffff;
}

.cta-band p {
    max-width: 700px;
    margin-bottom: 0;
    color: #dbe7ff;
}

.cta-band .button-row {
    flex: 0 0 auto;
}

/* Generic page hero */
.page-hero {
    position: relative;
    overflow: hidden;
    padding: calc(var(--header-height) + 72px) 0 86px;
    background:
        radial-gradient(740px 420px at 82% 4%, var(--blue-soft), transparent 72%),
        var(--bg);
}

.page-hero::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 94, 255, 0.13) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(to right, transparent 5%, #000 30%, #000 80%, transparent 100%);
    content: "";
    opacity: 0.55;
}

.page-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, 0.8fr);
    gap: 70px;
    align-items: center;
}

.page-hero h1 {
    margin-bottom: 22px;
    font-size: clamp(2.55rem, 5.2vw, 4.5rem);
}

.page-hero-copy > p {
    max-width: 700px;
    margin-bottom: 28px;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.75;
}

.disclosure-note {
    display: flex;
    max-width: 720px;
    align-items: flex-start;
    gap: 10px;
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-alt);
    color: var(--muted);
    padding: 12px 14px;
    font-size: 0.82rem;
}

.disclosure-note svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--blue);
    stroke-width: 2;
}

.hero-dashboard {
    position: relative;
    min-height: 430px;
}

.dashboard-window {
    position: absolute;
    inset: 30px 0 0 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.dashboard-topbar {
    display: flex;
    height: 54px;
    align-items: center;
    gap: 7px;
    border-bottom: 1px solid var(--border);
    padding: 0 18px;
}

.dashboard-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--border-strong);
}

.dashboard-dot:first-child {
    background: #ff5f57;
}

.dashboard-dot:nth-child(2) {
    background: #ffbd2e;
}

.dashboard-dot:nth-child(3) {
    background: #28c840;
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 105px 1fr;
    min-height: 340px;
}

.dashboard-sidebar {
    border-right: 1px solid var(--border);
    background: var(--bg-alt);
    padding: 18px 11px;
}

.dashboard-sidebar span {
    display: block;
    height: 10px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--border);
}

.dashboard-sidebar span:first-child {
    background: var(--blue);
}

.dashboard-main {
    padding: 19px;
}

.dashboard-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dashboard-stat {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--card-raised);
    padding: 12px;
}

.dashboard-stat small {
    display: block;
    color: var(--muted);
    font-size: 0.59rem;
}

.dashboard-stat strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 1.05rem;
}

.dashboard-chart {
    position: relative;
    height: 142px;
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(to top, var(--blue-soft), transparent 70%);
}

.dashboard-chart svg {
    position: absolute;
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
}

.dashboard-chart polyline {
    fill: none;
    stroke: var(--blue);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.dashboard-chat-list {
    display: grid;
    gap: 8px;
    margin-top: 13px;
}

.dashboard-chat-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dashboard-chat-row i {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--blue-soft);
}

.dashboard-chat-row span {
    display: block;
    height: 7px;
    flex: 1;
    border-radius: 999px;
    background: var(--border);
}

.dashboard-floating-card {
    position: absolute;
    z-index: 2;
    right: -24px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--card-raised);
    padding: 13px 15px;
    box-shadow: var(--shadow);
    animation: float-sm 5s ease-in-out infinite;
}

.dashboard-floating-card .status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 6px rgba(37, 211, 102, 0.12);
}

.dashboard-floating-card strong {
    display: block;
    color: var(--ink);
    font-size: 0.8rem;
}

.dashboard-floating-card small {
    display: block;
    color: var(--muted);
    font-size: 0.65rem;
}

/* Handoff / knowledge */
.handoff-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 0.86fr);
    gap: 64px;
    align-items: center;
}

.handoff-grid h2 {
    margin-bottom: 18px;
}

.handoff-grid > div > p {
    color: var(--muted);
}

.handoff-flow {
    position: relative;
    min-height: 420px;
}

.handoff-card {
    position: absolute;
    width: min(340px, 88%);
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    padding: 22px;
    box-shadow: var(--shadow);
}

.handoff-card.bot {
    top: 0;
    left: 0;
}

.handoff-card.human {
    right: 0;
    bottom: 0;
}

.handoff-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.handoff-card-head img,
.handoff-human-avatar {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

.handoff-card-head img {
    background: #ffffff;
}

.handoff-human-avatar {
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #253b5c, #0e1a2a);
    color: #ffffff;
    font-weight: 900;
}

.handoff-card-head strong {
    display: block;
    color: var(--ink);
}

.handoff-card-head small {
    color: var(--muted);
}

.handoff-card p {
    margin-bottom: 0;
    border-radius: 13px;
    background: var(--bg-alt);
    color: var(--muted);
    padding: 13px;
    font-size: 0.86rem;
}

.handoff-arrow {
    position: absolute;
    top: 48%;
    left: 50%;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 8px solid var(--bg-alt);
    border-radius: 50%;
    background: var(--blue);
    color: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 94, 255, 0.28);
    font-size: 1.4rem;
    font-weight: 900;
}

.knowledge-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.knowledge-card {
    padding: 30px;
}

.knowledge-card h3 {
    margin-bottom: 12px;
}

.knowledge-card > p {
    color: var(--muted);
}

.knowledge-list {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.knowledge-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg-alt);
    padding: 12px 14px;
}

.knowledge-row span:first-child {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 700;
}

.knowledge-row .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--row-color, var(--green));
}

.knowledge-status {
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 800;
}

.report-bars {
    display: flex;
    height: 190px;
    align-items: flex-end;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding: 20px 12px 0;
}

.report-bar {
    position: relative;
    flex: 1;
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(to top, var(--blue), #66a2ff);
    min-height: 22px;
}

.report-bar::after {
    position: absolute;
    right: 0;
    bottom: -25px;
    left: 0;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
}

/* Systems page */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.tag-cloud .pill {
    background: var(--bg);
}

.system-section {
    overflow: hidden;
}

.system-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
    gap: 72px;
    align-items: center;
}

.system-grid.reverse {
    grid-template-columns: minmax(460px, 1.1fr) minmax(0, 0.9fr);
}

.system-copy h2 {
    margin-bottom: 18px;
}

.system-copy > p {
    margin-bottom: 25px;
    color: var(--muted);
    font-size: 1.04rem;
}

.system-kicker {
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mock-window {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.mock-window-top {
    display: flex;
    height: 54px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    padding: 0 18px;
}

.mock-window-title {
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 800;
}

.mock-window-actions {
    display: flex;
    gap: 6px;
}

.mock-window-actions span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-strong);
}

.crm-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    min-height: 370px;
    background: var(--bg-alt);
    padding: 15px;
}

.crm-column {
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--card);
    padding: 11px;
}

.crm-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 900;
}

.crm-count {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 7px;
    background: var(--blue-soft);
    color: var(--blue);
    font-size: 0.64rem;
}

.crm-lead {
    margin-bottom: 8px;
    border: 1px solid var(--border);
    border-radius: 11px;
    background: var(--card-raised);
    padding: 10px;
    box-shadow: 0 3px 10px rgba(2, 32, 90, 0.04);
}

.crm-lead:last-child {
    margin-bottom: 0;
}

.crm-lead strong {
    display: block;
    color: var(--ink);
    font-size: 0.71rem;
}

.crm-lead small {
    color: var(--muted);
    font-size: 0.58rem;
}

.erp-table {
    padding: 15px;
}

.erp-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}

.erp-summary-card {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--bg-alt);
    padding: 13px;
}

.erp-summary-card small {
    display: block;
    color: var(--muted);
    font-size: 0.62rem;
}

.erp-summary-card strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 1rem;
}

.erp-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.35fr 1fr;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 12px 4px;
    font-size: 0.73rem;
}

.erp-row:last-child {
    border-bottom: 0;
}

.erp-row strong {
    color: var(--ink);
}

.erp-row span {
    color: var(--muted);
}

.stock-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.stock-bar i {
    display: block;
    width: var(--stock, 50%);
    height: 100%;
    border-radius: inherit;
    background: var(--stock-color, var(--blue));
}

.pos-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    min-height: 390px;
}

.pos-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    align-content: start;
    background: var(--bg-alt);
    padding: 16px;
}

.pos-product {
    min-height: 92px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    padding: 11px;
}

.pos-product i {
    display: block;
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--blue-soft);
}

.pos-product strong {
    display: block;
    color: var(--ink);
    font-size: 0.68rem;
}

.pos-product small {
    color: var(--muted);
    font-size: 0.59rem;
}

.pos-ticket {
    border-left: 1px solid var(--border);
    background: var(--card);
    padding: 16px;
}

.pos-ticket h4 {
    margin-bottom: 14px;
    font-size: 0.83rem;
}

.pos-ticket-row {
    display: grid;
    grid-template-columns: 1fr 24px auto;
    gap: 6px;
    border-bottom: 1px dashed var(--border);
    padding: 10px 0;
    color: var(--muted);
    font-size: 0.66rem;
}

.pos-total {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-weight: 800;
}

.pos-pay {
    margin-top: 18px;
    border-radius: 11px;
    background: var(--blue);
    color: #ffffff;
    padding: 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
}

.process-timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.process-card {
    position: relative;
    padding: 27px;
}

.process-label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.process-card h3 {
    margin-bottom: 8px;
}

.process-card p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Forms */
.form-section-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr);
    gap: 48px;
    align-items: start;
}

.form-intro {
    position: sticky;
    top: calc(var(--header-height) + 28px);
}

.form-intro h2 {
    margin-bottom: 16px;
}

.form-intro > p {
    color: var(--muted);
}

.contact-methods {
    display: grid;
    gap: 12px;
    margin-top: 26px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 13px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--card);
    color: var(--text);
    padding: 14px;
}

.contact-method:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.contact-method-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 900;
}

.contact-method.whatsapp .contact-method-icon {
    background: rgba(37, 211, 102, 0.12);
    color: #13994b;
}

.contact-method strong {
    display: block;
    font-size: 0.88rem;
}

.contact-method small {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
}

.form-card {
    padding: 36px;
}

.form-card h2,
.form-card h3 {
    margin-bottom: 22px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-field {
    display: grid;
    gap: 7px;
}

.form-field.full {
    grid-column: 1 / -1;
}

.form-field label,
.form-label {
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
    color: var(--text);
    padding: 12px 13px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.form-field textarea {
    min-height: 128px;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--muted-2);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--blue);
    outline: none;
    box-shadow: var(--focus);
}

.form-field .field-help {
    color: var(--muted);
    font-size: 0.72rem;
}

.radio-group,
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.choice-input {
    position: relative;
}

.choice-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.choice-input label {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    padding: 8px 13px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.choice-input input:checked + label {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue);
}

.choice-input input:focus-visible + label {
    box-shadow: var(--focus);
}

.consent-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 0.78rem;
}

.consent-row input {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--blue);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.form-status {
    display: none;
    flex: 1;
    min-width: 220px;
    border-radius: 12px;
    padding: 11px 13px;
    font-size: 0.82rem;
    font-weight: 700;
}

.form-status.is-visible {
    display: block;
}

.form-status.is-success {
    background: rgba(37, 211, 102, 0.12);
    color: #138b46;
}

.form-status.is-error {
    background: rgba(229, 72, 77, 0.12);
    color: #bd3136;
}

.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Pricing detail */
.price-hero-summary {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
    padding: 26px;
    box-shadow: var(--shadow-lg);
}

.price-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    padding: 15px 0;
}

.price-hero-row:last-child {
    border-bottom: 0;
}

.price-hero-row span {
    color: var(--muted);
    font-size: 0.86rem;
}

.price-hero-row strong {
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 1.1rem;
}

.pricing-detail-card {
    padding: 38px;
}

.pricing-detail-card .plan-price {
    margin-bottom: 18px;
}

.pricing-detail-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 26px 0;
}

.pricing-detail-columns h3 {
    margin-bottom: 14px;
    font-size: 0.92rem;
}

.comparison-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.comparison-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    border-bottom: 1px solid var(--border);
    padding: 15px 18px;
    text-align: left;
    vertical-align: middle;
}

.comparison-table tr:last-child td {
    border-bottom: 0;
}

.comparison-table th {
    background: var(--bg-alt);
    color: var(--ink);
    font-family: "Sora", sans-serif;
    font-size: 0.83rem;
}

.comparison-table th:nth-child(2),
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(2),
.comparison-table td:nth-child(3) {
    width: 25%;
    text-align: center;
}

.comparison-table td {
    color: var(--muted);
    font-size: 0.88rem;
}

.comparison-table td:first-child {
    color: var(--text);
    font-weight: 750;
}

.table-check {
    color: #14954a;
    font-weight: 900;
}

/* Diagnostic page */
.diagnostic-page {
    min-height: calc(100vh - 500px);
    padding: calc(var(--header-height) + 60px) 0 100px;
    background:
        radial-gradient(700px 420px at 90% 0%, var(--blue-soft), transparent 72%),
        var(--bg-alt);
}

.diagnostic-header {
    max-width: 760px;
    margin: 0 auto 38px;
    text-align: center;
}

.diagnostic-header h1 {
    margin-bottom: 16px;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
}

.diagnostic-header p {
    color: var(--muted);
    font-size: 1.05rem;
}

.diagnostic-card {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    box-shadow: var(--shadow);
}

.diagnostic-progress-shell {
    border-bottom: 1px solid var(--border);
    background: var(--card);
    padding: 20px 28px;
}

.diagnostic-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
}

.progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), #5b9fff);
    transition: width 0.3s ease;
}

.diagnostic-body {
    padding: 38px;
}

.diagnostic-question {
    margin-bottom: 25px;
    font-size: clamp(1.45rem, 3vw, 2.05rem);
}

.multi-hint {
    margin: -14px 0 22px;
    color: var(--muted);
    font-size: 0.78rem;
}

.diagnostic-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.diagnostic-option {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--bg);
    color: var(--text);
    padding: 13px 15px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.diagnostic-option:hover {
    transform: translateY(-2px);
    border-color: var(--blue);
}

.diagnostic-option.is-selected {
    border-color: var(--blue);
    background: var(--blue-soft);
    color: var(--blue);
}

.diagnostic-option-indicator {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: transparent;
    font-size: 0.75rem;
}

.diagnostic-option.is-selected .diagnostic-option-indicator {
    border-color: var(--blue);
    background: var(--blue);
    color: #ffffff;
}

.diagnostic-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 30px;
}

.diagnostic-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.46;
    transform: none;
    box-shadow: none;
}

.diagnostic-privacy {
    max-width: 820px;
    margin: 18px auto 0;
    color: var(--muted);
    font-size: 0.76rem;
    text-align: center;
}

.diagnostic-result {
    display: none;
    padding: 38px;
}

.diagnostic-result.is-visible {
    display: block;
}

.result-icon {
    display: grid;
    width: 70px;
    height: 70px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 22px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: "Sora", sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
}

.diagnostic-result h2 {
    margin-bottom: 12px;
}

.diagnostic-result > p {
    color: var(--muted);
    font-size: 1.02rem;
}

.result-plan {
    display: inline-flex;
    margin: 10px 0 20px;
    border: 1px solid rgba(0, 94, 255, 0.22);
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    padding: 8px 13px;
    font-weight: 900;
}

.result-reasons {
    display: grid;
    gap: 9px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
}

.result-reasons li {
    display: flex;
    gap: 9px;
    color: var(--muted);
}

.result-reasons li::before {
    color: var(--blue);
    content: "✓";
    font-weight: 900;
}

.complement-card {
    margin-top: 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-alt);
    padding: 20px;
}

.complement-card h3 {
    margin-bottom: 7px;
}

.complement-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 26px;
}

/* Legal */
.legal-page {
    padding: calc(var(--header-height) + 68px) 0 100px;
}

.legal-header {
    margin-bottom: 40px;
}

.legal-header h1 {
    margin-bottom: 13px;
    font-size: clamp(2.35rem, 5vw, 3.8rem);
}

.legal-header p {
    color: var(--muted);
}

.legal-content {
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--card);
    padding: 42px;
    box-shadow: var(--shadow-sm);
}

.legal-content h2 {
    margin: 38px 0 13px;
    font-size: 1.45rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p,
.legal-content li {
    color: var(--muted);
}

.legal-content ul {
    padding-left: 22px;
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-alt);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr 1fr;
    gap: 42px;
    padding-top: 60px;
    padding-bottom: 42px;
}

.footer-brand-column > p {
    max-width: 300px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-column h2 {
    margin-bottom: 4px;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.footer-column a {
    color: var(--muted);
    font-size: 0.88rem;
}

.footer-column a:hover {
    color: var(--blue);
}

.footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.status-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-whatsapp {
    background: var(--green);
    box-shadow: 0 0 0 5px rgba(37, 211, 102, 0.12);
}

.footer-note {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.75rem;
}

.footer-bottom {
    border-top: 1px solid var(--border);
}

.footer-bottom-inner {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: var(--muted);
    font-size: 0.76rem;
}

.footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.footer-legal-links a {
    color: var(--muted);
}

.footer-legal-links a:hover {
    color: var(--blue);
}

/* Chat widget */
.chat-widget {
    position: fixed;
    z-index: 1200;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.chat-panel {
    width: min(378px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 21px;
    background: var(--card);
    box-shadow: 0 26px 80px rgba(2, 16, 42, 0.24);
}

.chat-panel[hidden] {
    display: none;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(120deg, #005eff, #2d7fff);
    color: #ffffff;
    padding: 13px 14px;
}

.chat-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
}

.chat-heading {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
}

.chat-heading strong {
    font-family: "Sora", sans-serif;
    font-size: 0.92rem;
}

.chat-heading small {
    overflow: hidden;
    color: #d9e6ff;
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-demo-badge {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    padding: 3px 7px;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.07em;
}

.chat-close {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.chat-messages {
    display: flex;
    height: min(300px, calc(100vh - 360px));
    min-height: 180px;
    flex-direction: column;
    gap: 9px;
    overflow-y: auto;
    background: var(--bg-alt);
    padding: 15px;
}

.chat-message {
    max-width: 86%;
    align-self: flex-start;
    border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
    background: var(--card);
    color: var(--text);
    padding: 10px 12px;
    font-size: 0.82rem;
    line-height: 1.5;
    animation: message-in 0.25s ease both;
}

.chat-message.user {
    align-self: flex-end;
    border-color: var(--blue);
    border-radius: 14px 14px 4px 14px;
    background: var(--blue);
    color: #ffffff;
}

.chat-message a {
    display: inline-flex;
    margin-top: 8px;
    border-radius: 9px;
    background: var(--blue);
    color: #ffffff;
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 800;
}

.chat-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    border-top: 1px solid var(--border);
    background: var(--card);
    padding: 12px;
}

.chat-option {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--blue);
    padding: 7px 10px;
    font-size: 0.71rem;
    font-weight: 800;
    cursor: pointer;
}

.chat-option:hover {
    border-color: var(--blue);
    background: var(--blue-soft);
}

.chat-launchers {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.floating-whatsapp {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #ffffff;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.34);
    transition: transform 0.18s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.07);
    color: #ffffff;
}

.floating-whatsapp svg {
    width: 27px;
    height: 27px;
    fill: currentColor;
}

.chat-launch-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 999px;
    background: var(--blue);
    color: #ffffff;
    padding: 11px 16px;
    box-shadow: 0 12px 30px rgba(0, 94, 255, 0.34);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease;
}

.chat-launch-button:hover {
    transform: translateY(-2px);
    background: var(--blue-600);
}

.chat-launch-button img {
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    z-index: 1300;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: flex;
    max-width: 920px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--card-raised);
    padding: 16px 18px;
    box-shadow: var(--shadow-lg);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner strong {
    display: block;
    margin-bottom: 3px;
    color: var(--ink);
    font-size: 0.88rem;
}

.cookie-banner p {
    margin: 0;
    color: var(--muted);
    font-size: 0.76rem;
}

/* Admin */
.admin-body {
    min-height: 100vh;
    background: var(--bg-alt);
}

.admin-shell {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 44px 0;
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.admin-header h1 {
    margin: 0;
    font-size: 2rem;
}

.admin-login-card {
    width: min(440px, calc(100% - 40px));
    margin: 12vh auto 0;
    padding: 34px;
}

.admin-login-card .brand {
    margin-bottom: 26px;
}

.admin-login-card h1 {
    margin-bottom: 9px;
    font-size: 1.65rem;
}

.admin-login-card > p {
    color: var(--muted);
}

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.admin-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid var(--border);
    padding: 13px 14px;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background: var(--bg-alt);
    color: var(--ink);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.admin-table td {
    color: var(--muted);
    font-size: 0.78rem;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-tag {
    display: inline-flex;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    padding: 4px 8px;
    font-size: 0.65rem;
    font-weight: 800;
}

.admin-empty {
    padding: 50px;
    color: var(--muted);
    text-align: center;
}



.no-js [data-diagnostic-progress] {
    display: none;
}

.diagnostic-noscript p {
    color: var(--muted);
}

.no-js .reveal {
    opacity: 1;
    transform: none;
}

.inline-form-note {
    display: block;
    max-width: 560px;
    margin-top: 10px;
    color: #93a5c4;
    font-size: 0.72rem;
    line-height: 1.55;
}

.inline-form-note a {
    color: #cfe0ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-12px); }
}

@keyframes float-sm {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

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

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

@keyframes message-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 1160px) {
    .desktop-nav {
        display: none;
    }

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

    .nav-actions {
        margin-left: auto;
    }

    .hero-grid,
    .page-hero-grid {
        grid-template-columns: 1fr 0.9fr;
        gap: 42px;
    }

    .benefit-grid,
    .capability-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .steps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .footer-grid > :last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    :root {
        --header-height: 70px;
    }

    .container,
    .narrow-container {
        width: min(100% - 34px, var(--max-width));
    }

    .section {
        padding: 82px 0;
    }

    .hero {
        padding-top: calc(var(--header-height) + 48px);
    }

    .hero-grid,
    .page-hero-grid,
    .tiktok-grid,
    .diagnostic-teaser,
    .handoff-grid,
    .system-grid,
    .system-grid.reverse,
    .form-section-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        text-align: center;
    }

    .hero-copy > p {
        margin-inline: auto;
    }

    .hero-copy .eyebrow {
        margin-inline: auto;
    }

    .hero-copy .button-row,
    .hero-chips {
        justify-content: center;
    }

    .hero-visual {
        min-height: 520px;
    }

    .solution-grid,
    .pricing-grid,
    .knowledge-grid {
        grid-template-columns: 1fr;
    }

    .case-grid,
    .process-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .cta-band-inner {
        align-items: flex-start;
        flex-direction: column;
    }

    .cta-band .button-row {
        width: 100%;
    }

    .page-hero-copy {
        text-align: center;
    }

    .page-hero-copy .eyebrow,
    .page-hero-copy > p,
    .page-hero-copy .button-row,
    .page-hero-copy .disclosure-note {
        margin-inline: auto;
    }

    .page-hero-copy .button-row {
        justify-content: center;
    }

    .hero-dashboard {
        width: min(600px, 100%);
        margin-inline: auto;
    }

    .system-grid.reverse .system-visual {
        order: 2;
    }

    .system-grid.reverse .system-copy {
        order: 1;
    }

    .form-intro {
        position: static;
    }

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

    .footer-grid > :last-child {
        grid-column: auto;
    }
}

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

    .nav-shell {
        gap: 10px;
    }

    .brand-copy small {
        display: none;
    }

    .brand-copy strong {
        font-size: 1.1rem;
    }

    .nav-cta {
        display: none;
    }

    .language-toggle {
        padding-inline: 8px;
    }

    .section {
        padding: 68px 0;
    }

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

    .hero {
        padding-bottom: 62px;
    }

    .hero-visual {
        min-height: 470px;
    }

    .hero-orb {
        width: 94%;
    }

    .hero-core {
        width: 104px;
        height: 104px;
        border-width: 7px;
        border-radius: 28px;
    }

    .phone-demo {
        width: 250px;
        min-height: 365px;
        transform: translate(48%, 55%) rotate(-2deg);
    }

    .phone-chat {
        min-height: 260px;
    }

    .platform-badge {
        gap: 7px;
        padding: 8px 9px;
        font-size: 0.68rem;
    }

    .platform-badge .platform-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .platform-badge small {
        display: none;
    }

    .trust-strip-inner {
        justify-content: flex-start;
        padding-block: 20px;
    }

    .trust-label {
        width: 100%;
    }

    .solution-card {
        min-height: 430px;
        padding: 28px;
    }

    .solution-card .button {
        bottom: 28px;
        left: 28px;
    }

    .mini-ui {
        right: 18px;
        bottom: 96px;
        width: 170px;
    }

    .benefit-grid,
    .capability-grid,
    .case-grid,
    .steps-grid,
    .process-timeline,
    .diagnostic-options,
    .pricing-detail-columns {
        grid-template-columns: 1fr;
    }

    .inline-form {
        flex-direction: column;
    }

    .tiktok-visual {
        min-height: 380px;
    }

    .diagnostic-teaser,
    .cta-band,
    .form-card,
    .legal-content,
    .pricing-detail-card {
        padding: 27px;
    }

    .cta-band .button-row,
    .cta-band .button {
        width: 100%;
    }

    .page-hero {
        padding-top: calc(var(--header-height) + 52px);
        padding-bottom: 64px;
    }

    .hero-dashboard {
        min-height: 390px;
    }

    .dashboard-layout {
        grid-template-columns: 72px 1fr;
    }

    .dashboard-stat-grid {
        grid-template-columns: 1fr 1fr;
    }

    .dashboard-stat:last-child {
        display: none;
    }

    .dashboard-floating-card {
        right: -6px;
    }

    .handoff-flow {
        min-height: 460px;
    }

    .handoff-card {
        width: 90%;
    }

    .crm-board {
        grid-template-columns: 1fr;
    }

    .crm-column:nth-child(n+2) {
        display: none;
    }

    .erp-row {
        grid-template-columns: 1.2fr 0.7fr 0.35fr;
    }

    .erp-row > :nth-child(2) {
        display: none;
    }

    .pos-layout {
        grid-template-columns: 1fr;
    }

    .pos-ticket {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

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

    .form-field.full {
        grid-column: auto;
    }

    .diagnostic-body,
    .diagnostic-result {
        padding: 26px 22px;
    }

    .diagnostic-progress-shell {
        padding: 18px 22px;
    }

    .diagnostic-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

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

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

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

    .footer-bottom-inner {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: 16px;
    }

    .chat-launch-button span {
        display: none;
    }

    .chat-launch-button {
        width: 54px;
        height: 54px;
        justify-content: center;
        padding: 0;
    }

    .cookie-banner {
        align-items: stretch;
        flex-direction: column;
    }
}

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

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

    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .chat-widget,
    .cookie-banner,
    .button,
    .mobile-menu {
        display: none !important;
    }

    body {
        background: #ffffff;
        color: #000000;
    }

    .section,
    .page-hero,
    .legal-page,
    .diagnostic-page {
        padding: 24px 0;
    }

    .card,
    .legal-content,
    .comparison-wrap {
        box-shadow: none;
    }
}

/* =========================================================
   Custom systems quote wizard · v1.1
   ========================================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.custom-quote-section {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(circle at 8% 18%, rgba(0, 94, 255, 0.08), transparent 30%),
        radial-gradient(circle at 94% 78%, rgba(115, 87, 255, 0.08), transparent 28%);
}

.custom-quote-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background-image: linear-gradient(rgba(0, 94, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 94, 255, 0.025) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}

.custom-quote-layout {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(290px, 0.62fr) minmax(0, 1.38fr);
    gap: 56px;
}

.custom-quote-intro h2 {
    max-width: 570px;
    font-size: clamp(1.85rem, 3vw, 2.8rem);
    line-height: 1.08;
}

.quote-benefits {
    display: grid;
    gap: 11px;
    margin: 28px 0;
}

.quote-benefit {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.48);
    padding: 13px 14px;
    backdrop-filter: blur(12px);
}

[data-theme="dark"] .quote-benefit {
    background: rgba(13, 22, 42, 0.6);
}

.quote-benefit > span {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.14);
    color: #159447;
    font-size: 0.78rem;
    font-weight: 900;
}

.quote-benefit p {
    margin: 1px 0 0;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.45;
}

.quote-logo-cloud {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    padding: 17px;
    box-shadow: var(--shadow-sm);
}

.quote-logo-cloud > small {
    display: block;
    margin-bottom: 12px;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quote-logo-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.brand-logo-dot,
.brand-mask-icon,
.logo-choice-icon,
.button-brand-icon {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
}

.brand-logo-dot {
    width: 39px;
    height: 39px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg);
}

.brand-logo-dot::before,
.brand-mask-icon::before,
.logo-choice-icon::before,
.button-brand-icon::before {
    width: 56%;
    height: 56%;
    content: "";
    background: var(--logo-color, currentColor);
    -webkit-mask: var(--logo-url) center / contain no-repeat;
    mask: var(--logo-url) center / contain no-repeat;
}

.quote-direct-wa {
    margin-top: 14px;
}

.quote-direct-wa .contact-method-icon {
    background: rgba(37, 211, 102, 0.1);
}

.quote-direct-wa .contact-method-icon::before {
    width: 55%;
    height: 55%;
}

.system-quote-form {
    position: relative;
    overflow: hidden;
    border-color: rgba(0, 94, 255, 0.15);
    border-radius: 28px;
    background: var(--card);
    padding: 0;
    box-shadow: 0 28px 80px rgba(15, 35, 75, 0.16), 0 8px 28px rgba(0, 94, 255, 0.08);
}

[data-theme="dark"] .system-quote-form {
    border-color: rgba(100, 155, 255, 0.24);
    box-shadow: 0 30px 85px rgba(0, 0, 0, 0.42), 0 10px 30px rgba(0, 94, 255, 0.1);
}

.quote-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(0, 94, 255, 0.09), rgba(115, 87, 255, 0.04) 55%, transparent);
    padding: 32px 34px 26px;
}

.quote-form-kicker {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--blue);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.quote-form-header h3 {
    margin: 0 0 8px;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.quote-form-header p {
    max-width: 660px;
    margin: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.quote-secure-badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(37, 211, 102, 0.24);
    border-radius: 999px;
    background: rgba(37, 211, 102, 0.1);
    color: #148643;
    padding: 8px 11px;
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
}

.quote-secure-badge > span {
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 0.65rem;
}

.quote-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 23px 34px 12px;
    list-style: none;
}

.quote-progress li {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: var(--muted-2);
    transition: color 0.2s ease;
}

.quote-progress li > span {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    font-size: 0.72rem;
    font-weight: 900;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.quote-progress li small {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quote-progress li.is-active,
.quote-progress li.is-complete {
    color: var(--text);
}

.quote-progress li.is-active > span {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 94, 255, 0.24);
    transform: translateY(-1px);
}

.quote-progress li.is-complete > span {
    border-color: rgba(37, 211, 102, 0.38);
    background: rgba(37, 211, 102, 0.12);
    color: #159447;
}

.quote-progress-track {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--border);
    margin: 0 34px;
}

.quote-progress-track > span {
    display: block;
    width: 25%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), #7357ff);
    box-shadow: 0 0 16px rgba(0, 94, 255, 0.36);
    transition: width 0.35s cubic-bezier(.2, .8, .2, 1);
}

.quote-step {
    min-inline-size: 0;
    border: 0;
    margin: 0;
    padding: 31px 34px 36px;
    animation: quoteStepIn 0.35s ease both;
}

@keyframes quoteStepIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

html:not(.no-js) .system-quote-form .quote-step:not(.is-active) {
    display: none;
}

.no-js .system-quote-form .quote-progress,
.no-js .system-quote-form .quote-progress-track,
.no-js .system-quote-form .wizard-only {
    display: none !important;
}

.no-js .system-quote-form .quote-step {
    display: block;
    border-bottom: 1px solid var(--border);
}

.quote-step-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 26px;
}

.quote-step-heading > span {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 13px;
    background: var(--blue-soft);
    color: var(--blue);
    font-family: "Sora", sans-serif;
    font-size: 0.78rem;
    font-weight: 900;
}

.quote-step-heading h4 {
    margin: 0 0 5px;
    font-size: 1.18rem;
}

.quote-step-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
}

.form-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
}

.form-label-row > small {
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.4;
    text-align: right;
}

.logo-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.solution-logo-grid {
    margin-top: 2px;
}

.compact-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.logo-choice {
    position: relative;
    min-width: 0;
}

.logo-choice > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.logo-choice > label {
    position: relative;
    display: grid;
    min-height: 94px;
    grid-template-columns: 48px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: var(--bg);
    padding: 14px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.logo-choice > label::after {
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    content: "";
    background: var(--logo-color, var(--blue));
    opacity: 0.035;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.logo-choice > label:hover {
    border-color: rgba(0, 94, 255, 0.38);
    box-shadow: 0 10px 24px rgba(15, 35, 75, 0.08);
    transform: translateY(-2px);
}

.logo-choice-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 5px 14px rgba(15, 35, 75, 0.06);
}

.logo-choice-icon::before {
    width: 54%;
    height: 54%;
}

.logo-choice-copy {
    min-width: 0;
}

.logo-choice-copy strong,
.compact-choice label > strong {
    display: block;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1.3;
}

.logo-choice-copy small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.38;
}

.logo-choice-check {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--card);
    color: transparent;
    font-size: 0.7rem;
    font-weight: 900;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.logo-choice > input:checked + label {
    border-color: var(--blue);
    background: linear-gradient(135deg, rgba(0, 94, 255, 0.09), rgba(115, 87, 255, 0.04));
    box-shadow: 0 12px 30px rgba(0, 94, 255, 0.11);
}

.logo-choice > input:checked + label::after {
    opacity: 0.08;
    transform: scale(1.14);
}

.logo-choice > input:checked + label .logo-choice-check {
    border-color: var(--blue);
    background: var(--blue);
    color: #fff;
    transform: scale(1.04);
}

.logo-choice > input:focus-visible + label {
    outline: none;
    box-shadow: var(--focus);
}

.compact-choice > label {
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    gap: 9px;
    border-radius: 15px;
    padding: 11px;
}

.compact-choice .logo-choice-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
}

.compact-choice .logo-choice-check {
    width: 20px;
    height: 20px;
}

.compact-choice label > strong {
    overflow: hidden;
    font-size: 0.73rem;
    text-overflow: ellipsis;
}

[data-choice-group].is-invalid {
    border-radius: 18px;
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.12);
}

.choice-group-error {
    margin: 8px 0 0;
    color: #bd3136;
    font-size: 0.74rem;
    font-weight: 800;
}

.quote-field-divider {
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 21px;
}

.modern-radio-group .choice-input label {
    min-height: 43px;
    padding-inline: 16px;
}

.quote-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--border);
    margin-top: 28px;
    padding-top: 23px;
}

.quote-step-actions .button {
    min-width: 132px;
}

.quote-submit-actions {
    align-items: stretch;
}

.quote-submit-button {
    min-width: 280px !important;
    margin-left: auto;
    background: linear-gradient(135deg, #19bd5b, #25d366);
    box-shadow: 0 13px 28px rgba(37, 211, 102, 0.24);
}

.quote-submit-button:hover {
    background: linear-gradient(135deg, #16aa52, #20c55d);
    box-shadow: 0 16px 34px rgba(37, 211, 102, 0.3);
}

.button-brand-icon {
    width: 20px;
    height: 20px;
    margin-right: 1px;
}

.button-brand-icon::before {
    width: 100%;
    height: 100%;
    background: #fff;
}

.quote-live-summary {
    overflow: hidden;
    border: 1px solid rgba(0, 94, 255, 0.2);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(0, 94, 255, 0.07), rgba(115, 87, 255, 0.035));
    margin: 24px 0 18px;
}

.quote-summary-head {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(0, 94, 255, 0.12);
    padding: 16px 17px;
}

.quote-summary-head .brand-mask-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.quote-summary-head strong {
    display: block;
    font-size: 0.88rem;
}

.quote-summary-head small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.quote-live-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 9px;
}

.quote-live-summary dl > div {
    min-width: 0;
    border-radius: 12px;
    padding: 11px 12px;
}

.quote-live-summary dt {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quote-live-summary dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.45;
}

.consent-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
    padding: 13px 14px;
}

.system-quote-form .form-status {
    width: 100%;
    min-width: 0;
    margin-top: 13px;
}

.system-quote-form.is-whatsapp-redirecting::after {
    position: absolute;
    inset: 0;
    z-index: 20;
    content: "";
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(5px);
}

[data-theme="dark"] .system-quote-form.is-whatsapp-redirecting::after {
    background: rgba(7, 13, 26, 0.78);
}

.system-quote-form.is-whatsapp-redirecting::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 21;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(37, 211, 102, 0.2);
    border-top-color: #25d366;
    border-radius: 50%;
    content: "";
    animation: quoteSpinner 0.8s linear infinite;
    transform: translate(-50%, -50%);
}

@keyframes quoteSpinner {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.whatsapp-fallback-button {
    width: max-content;
    margin-top: 12px;
}

@media (max-width: 1100px) {
    .custom-quote-layout {
        gap: 36px;
    }

    .compact-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .custom-quote-layout {
        grid-template-columns: 1fr;
    }

    .custom-quote-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
        gap: 18px 28px;
        align-items: start;
    }

    .custom-quote-intro > .eyebrow,
    .custom-quote-intro > h2,
    .custom-quote-intro > p {
        grid-column: 1 / -1;
    }

    .quote-benefits {
        margin: 8px 0 0;
    }

    .quote-logo-cloud {
        margin-top: 8px;
    }

    .quote-direct-wa {
        grid-column: 2;
    }
}

@media (max-width: 680px) {
    .custom-quote-intro {
        display: block;
    }

    .quote-benefits {
        margin: 24px 0;
    }

    .quote-logo-cloud {
        margin-top: 0;
    }

    .quote-direct-wa {
        margin-top: 12px;
    }

    .system-quote-form {
        border-radius: 22px;
        padding: 0;
    }

    .quote-form-header {
        display: block;
        padding: 24px 22px 21px;
    }

    .quote-secure-badge {
        margin-top: 14px;
    }

    .quote-progress {
        gap: 5px;
        padding: 18px 20px 10px;
    }

    .quote-progress li {
        justify-content: center;
    }

    .quote-progress li small {
        display: none;
    }

    .quote-progress li > span {
        width: 31px;
        height: 31px;
    }

    .quote-progress-track {
        margin-inline: 22px;
    }

    .quote-step {
        padding: 25px 21px 28px;
    }

    .quote-step-heading {
        margin-bottom: 22px;
    }

    .quote-step-heading > span {
        width: 38px;
        height: 38px;
    }

    .form-label-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .form-label-row > small {
        text-align: left;
    }

    .logo-choice-grid,
    .compact-logo-grid {
        grid-template-columns: 1fr;
    }

    .solution-choice > label {
        min-height: 86px;
    }

    .compact-choice > label {
        min-height: 68px;
    }

    .quote-step-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .quote-step-actions .button,
    .quote-submit-button {
        width: 100%;
        min-width: 0 !important;
        margin: 0;
    }

    .quote-live-summary dl {
        grid-template-columns: 1fr;
    }

    .quote-summary-head {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quote-step,
    .quote-progress-track > span,
    .logo-choice > label,
    .logo-choice-check {
        animation: none !important;
        transition: none !important;
    }
}

/* ========================================================================== 
   DYGI PRO 2.0 · EXPERIENCE, FORMS AND ADMIN DASHBOARD
   ========================================================================== */

/* Connected-channel ecosystem ------------------------------------------------ */
.channel-ecosystem {
    position: relative;
    z-index: 2;
    padding: 34px 0 46px;
    border-block: 1px solid var(--border);
    background:
        radial-gradient(circle at 10% 10%, rgba(0, 94, 255, .08), transparent 30%),
        linear-gradient(180deg, var(--bg), var(--bg-alt));
}

.channel-ecosystem-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 17px;
    align-items: center;
    max-width: 820px;
    margin: 0 auto 28px;
    text-align: center;
}

.channel-ecosystem-heading > div {
    transform: translateX(-27px);
}

.channel-ecosystem-heading h2 {
    margin: 0 0 4px;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.channel-ecosystem-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .93rem;
}

.channel-flow-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(0, 94, 255, .17);
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.channel-flow-mark img {
    width: 34px;
}

.channel-logo-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}

.channel-logo-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 120px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 19px;
    background: var(--card);
    padding: 18px 15px;
    box-shadow: 0 8px 25px rgba(2, 32, 90, .045);
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.channel-logo-card::before {
    position: absolute;
    inset: auto -20px -38px auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--channel-color) 12%, transparent);
    content: "";
}

.channel-logo-card:hover {
    border-color: color-mix(in srgb, var(--channel-color) 38%, var(--border));
    box-shadow: 0 18px 38px color-mix(in srgb, var(--channel-color) 12%, transparent);
    transform: translateY(-4px);
}

.channel-logo-icon {
    width: 32px;
    height: 32px;
}

.channel-logo-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.channel-logo-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.channel-logo-copy small {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.35;
}

.channel-connected-dot {
    position: absolute;
    top: 17px;
    right: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 0 5px rgba(37, 211, 102, .11);
}

.channel-coming-badge {
    position: absolute;
    top: 12px;
    right: 10px;
    border: 1px solid rgba(37, 244, 238, .25);
    border-radius: 999px;
    background: #101010;
    color: #fff;
    padding: 4px 7px;
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.channel-logo-card.is-coming {
    background: linear-gradient(145deg, var(--card), color-mix(in srgb, #25f4ee 4%, var(--card)));
}

/* TikTok-style roadmap mockup ----------------------------------------------- */
.tiktok-interface-visual {
    position: relative;
    display: grid;
    min-height: 640px;
    place-items: center;
    isolation: isolate;
}

.tiktok-app-phone {
    position: relative;
    width: min(330px, 78vw);
    overflow: hidden;
    border: 8px solid #15171c;
    border-radius: 42px;
    background: #000;
    color: #fff;
    box-shadow: 0 36px 90px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .12);
    transform: rotate(2deg);
}

.tiktok-statusbar {
    position: absolute;
    z-index: 4;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 11px 18px 0;
    color: #fff;
    font-size: .63rem;
    font-weight: 800;
}

.tiktok-feed-tabs {
    position: absolute;
    z-index: 4;
    top: 31px;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    align-items: center;
    font-size: .72rem;
}

.tiktok-feed-tabs span { color: rgba(255, 255, 255, .63); }
.tiktok-feed-tabs strong { color: #fff; }
.tiktok-feed-tabs i {
    position: absolute;
    bottom: -6px;
    width: 29px;
    height: 2px;
    margin-left: 60px;
    border-radius: 2px;
    background: #fff;
}

.tiktok-video-stage {
    position: relative;
    min-height: 576px;
    overflow: hidden;
    background:
        radial-gradient(circle at 42% 36%, rgba(37, 244, 238, .22), transparent 24%),
        radial-gradient(circle at 67% 63%, rgba(254, 44, 85, .2), transparent 24%),
        linear-gradient(150deg, #05060b, #10172a 60%, #090a0e);
}

.tiktok-video-stage::before,
.tiktok-video-stage::after {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 50%;
    content: "";
}

.tiktok-video-stage::before { inset: 120px -75px auto 80px; height: 310px; }
.tiktok-video-stage::after { inset: 210px 75px auto -95px; height: 260px; }

.tiktok-brand-scene {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    transform: translate(-55%, -55%);
}

.tiktok-brand-scene::before {
    position: absolute;
    z-index: -1;
    width: 172px;
    height: 172px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 94, 255, .42), rgba(0, 94, 255, .02) 66%);
    box-shadow: -12px 0 0 rgba(37, 244, 238, .08), 12px 0 0 rgba(254, 44, 85, .08);
    content: "";
}

.tiktok-brand-scene img { width: 75px; filter: drop-shadow(0 12px 20px rgba(0, 94, 255, .45)); }
.tiktok-brand-scene strong { margin-top: 15px; color: #fff; font: 800 1.4rem/1 "Sora", sans-serif; letter-spacing: .1em; }
.tiktok-brand-scene small { margin-top: 8px; color: #b8c4da; font-size: .62rem; white-space: nowrap; }

.tiktok-action-rail {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 82px;
    display: grid;
    gap: 16px;
    justify-items: center;
}

.tiktok-action-rail > span {
    display: grid;
    gap: 2px;
    justify-items: center;
    color: #fff;
    font-size: 1.35rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

.tiktok-action-rail small { color: #fff; font-size: .52rem; font-weight: 800; }
.tiktok-profile-dot {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #fff;
    padding: 6px;
}

.tiktok-caption {
    position: absolute;
    z-index: 3;
    right: 52px;
    bottom: 60px;
    left: 14px;
    text-shadow: 0 2px 8px #000;
}

.tiktok-caption strong { display: block; margin-bottom: 4px; color: #fff; font-size: .76rem; }
.tiktok-caption p { margin: 0 0 5px; color: #fff; font-size: .64rem; line-height: 1.45; }
.tiktok-caption small { color: rgba(255, 255, 255, .86); font-size: .56rem; }

.tiktok-bottom-nav {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, .1);
    background: #050505;
    padding: 9px 7px 8px;
}

.tiktok-bottom-nav span { display: grid; justify-items: center; color: #fff; font-size: .86rem; }
.tiktok-bottom-nav small { margin-top: 2px; font-size: .42rem; }
.tiktok-bottom-nav b {
    justify-self: center;
    width: 35px;
    border-radius: 8px;
    background: linear-gradient(90deg, #25f4ee 0 21%, #fff 21% 79%, #fe2c55 79%);
    color: #000;
    text-align: center;
}

.tiktok-floating-logo {
    position: absolute;
    z-index: 5;
    top: 75px;
    right: -12px;
    display: grid;
    grid-template-columns: 31px auto;
    gap: 1px 10px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(11, 12, 17, .9);
    color: #fff;
    padding: 11px 14px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .36);
    backdrop-filter: blur(14px);
}

.tiktok-floating-logo .brand-mask-icon { grid-row: 1 / 3; width: 31px; height: 31px; }
.tiktok-floating-logo strong { color: #fff; font-size: .77rem; }
.tiktok-floating-logo small { color: #25f4ee; font-size: .57rem; font-weight: 800; text-transform: uppercase; }

.tiktok-interface-visual .tiktok-comment {
    position: absolute;
    z-index: 4;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    width: min(255px, 55vw);
    align-items: start;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 18px;
    background: rgba(17, 21, 32, .88);
    color: #fff;
    padding: 13px;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .3);
    backdrop-filter: blur(12px);
}

.tiktok-interface-visual .tiktok-comment.one { top: 145px; left: -20px; }
.tiktok-interface-visual .tiktok-comment.two { right: -28px; bottom: 105px; }
.tiktok-interface-visual .comment-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #25f4ee, #fe2c55); color: #06101a; font-weight: 900; }
.tiktok-interface-visual .tiktok-comment > span:last-child { font-size: .68rem; line-height: 1.45; }
.tiktok-interface-visual .tiktok-comment small { display: block; margin-top: 6px; color: #25f4ee; font-weight: 700; }

/* DygiBot business-specific live demo ---------------------------------------- */
.bot-business-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 5% 10%, rgba(0, 94, 255, .08), transparent 28%),
        radial-gradient(circle at 95% 90%, rgba(37, 211, 102, .06), transparent 28%),
        var(--bg);
}

.business-selector-shell {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 32px;
    background: var(--card);
    box-shadow: var(--shadow-lg);
}

.business-selector-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 18px 24px;
}

.business-selector-head strong { color: var(--ink); font-size: .92rem; }
.business-selector-head > span { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.business-selector-head i { width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 5px rgba(37,211,102,.11); }

.business-selector {
    display: grid;
    grid-template-columns: repeat(8, minmax(115px, 1fr));
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: thin;
    padding: 12px;
}

.business-selector button {
    display: grid;
    min-width: 0;
    min-height: 100px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--text);
    padding: 12px;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.business-selector button:hover { background: var(--bg-alt); transform: translateY(-2px); }
.business-selector button.is-active { border-color: color-mix(in srgb, var(--business-color) 32%, var(--border)); background: color-mix(in srgb, var(--business-color) 8%, var(--card)); box-shadow: inset 0 -3px 0 var(--business-color); }
.business-option-icon { width: 34px; height: 34px; }
.business-selector button > span:last-child { display: grid; min-width: 0; gap: 3px; }
.business-selector button strong { overflow: hidden; color: var(--ink); font-size: .71rem; text-overflow: ellipsis; white-space: nowrap; }
.business-selector button small { color: var(--muted); font-size: .55rem; line-height: 1.25; }

.business-demo-stage {
    display: grid;
    grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
    min-height: 650px;
    border-top: 1px solid var(--border);
    background:
        radial-gradient(circle at 23% 48%, rgba(0, 94, 255, .12), transparent 28%),
        linear-gradient(145deg, var(--bg-alt), var(--card));
}

.business-phone-wrap {
    display: grid;
    place-items: center;
    padding: 46px 30px;
}

.business-phone {
    position: relative;
    width: min(350px, 100%);
    height: 590px;
    overflow: hidden;
    border: 9px solid #121923;
    border-radius: 44px;
    background: #f5f7fb;
    box-shadow: 0 36px 70px rgba(4, 18, 45, .24), 0 0 0 1px rgba(255, 255, 255, .15);
    transition: box-shadow .3s ease;
}

.business-phone::after {
    position: absolute;
    inset: 0;
    border-radius: 34px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
    content: "";
    pointer-events: none;
}

.business-phone-notch {
    position: absolute;
    z-index: 8;
    top: 8px;
    left: 50%;
    width: 93px;
    height: 22px;
    border-radius: 0 0 15px 15px;
    background: #121923;
    transform: translateX(-50%);
}

.business-phone-head {
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    background: linear-gradient(135deg, var(--business-color), color-mix(in srgb, var(--business-color) 58%, #111827));
    color: #fff;
    padding: 38px 17px 16px;
    transition: background .3s ease;
}

.business-phone-avatar { width: 43px; height: 43px; border-radius: 50%; background-color: #fff; padding: 10px; }
.business-phone-head > span:nth-child(2) { display: grid; gap: 1px; }
.business-phone-head strong { color: #fff; font-size: .85rem; }
.business-phone-head small { display: inline-flex; gap: 6px; align-items: center; color: rgba(255,255,255,.8); font-size: .58rem; }
.business-phone-head small i { width: 6px; height: 6px; border-radius: 50%; background: #72ff9a; }
.business-phone-head b { color: #fff; font-size: 1.25rem; }

.business-phone-chat {
    display: flex;
    height: calc(100% - 143px);
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    padding: 19px 14px 26px;
    scroll-behavior: smooth;
}

.business-message {
    display: flex;
    max-width: 84%;
    opacity: 0;
    transform: translateY(8px) scale(.98);
    transition: opacity .26s ease, transform .26s ease;
}

.business-message.is-visible { opacity: 1; transform: none; }
.business-message.is-user { align-self: flex-end; }
.business-message.is-bot { align-self: flex-start; }
.business-message p { margin: 0; border-radius: 15px 15px 15px 4px; background: #fff; color: #1d2939; padding: 10px 12px; box-shadow: 0 4px 14px rgba(12,32,70,.08); font-size: .72rem; line-height: 1.48; }
.business-message.is-user p { border-radius: 15px 15px 4px 15px; background: color-mix(in srgb, var(--business-color) 14%, #fff); color: #172033; }
.business-message.is-typing { display: flex; gap: 4px; border-radius: 15px 15px 15px 4px; background: #fff; padding: 12px 14px; opacity: 1; transform: none; }
.business-message.is-typing span { width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; animation: businessTyping 1s infinite ease-in-out; }
.business-message.is-typing span:nth-child(2) { animation-delay: .14s; }
.business-message.is-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes businessTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.business-phone-composer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-top: 1px solid #e5e9f0;
    background: rgba(255,255,255,.96);
    padding: 10px 12px 13px;
}
.business-phone-composer span { color: var(--business-color); font-weight: 900; }
.business-phone-composer p { margin: 0; border: 1px solid #e4e9f2; border-radius: 999px; background: #f8fafc; color: #98a2b3; padding: 7px 11px; font-size: .62rem; }

.business-demo-insight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--border);
    padding: clamp(38px, 6vw, 82px);
}
.business-insight-kicker { display: inline-flex; width: max-content; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--muted); padding: 7px 11px; font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.business-insight-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #25d366; }
.business-demo-insight h3 { margin: 22px 0 13px; font-size: clamp(1.65rem, 3vw, 2.45rem); }
.business-demo-insight > p { max-width: 620px; color: var(--muted); }
.business-action-card { display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 13px; align-items: center; margin-top: 14px; border: 1px solid rgba(37,211,102,.25); border-radius: 18px; background: rgba(37,211,102,.07); padding: 16px; }
.business-action-icon { display: grid; width: 43px; height: 43px; place-items: center; border-radius: 14px; background: #25d366; color: #fff; font-weight: 900; box-shadow: 0 8px 20px rgba(37,211,102,.25); }
.business-action-card div { display: grid; gap: 2px; }
.business-action-card small { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
.business-action-card strong { color: var(--ink); font-size: .84rem; }
.business-flow-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; margin-top: 22px; }
.business-flow-list span { display: flex; gap: 9px; align-items: center; border: 1px solid var(--border); border-radius: 13px; background: var(--card); color: var(--text); padding: 10px 12px; font-size: .68rem; font-weight: 700; }
.business-flow-list b { color: var(--blue); font-size: .58rem; }
.business-demo-note { margin-top: 17px !important; font-size: .72rem; }

.bot-connections-section { background: linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.bot-connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.bot-connection-card { position: relative; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; gap: 13px; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--card); padding: 17px; box-shadow: var(--shadow-sm); }
.bot-connection-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--connection-color); content: ""; }
.bot-connection-logo { width: 38px; height: 38px; }
.bot-connection-card div { display: grid; min-width: 0; gap: 2px; }
.bot-connection-card strong { color: var(--ink); font-size: .83rem; }
.bot-connection-card small { color: #16a34a; font-size: .62rem; font-weight: 800; }
.bot-connection-card.is-soon small { color: #f59e0b; }
.bot-connection-state { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--connection-color) 11%, transparent); color: var(--connection-color); font-size: .7rem; font-weight: 900; }

.bot-roadmap-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin-top: 28px; }
.bot-roadmap-card { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 19px; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 24px; background: var(--card); padding: 25px; }
.bot-roadmap-logo { width: 61px; height: 61px; }
.bot-roadmap-card.tiktok { background: linear-gradient(145deg, #0b0b0e, #171820); border-color: rgba(255,255,255,.1); }
.bot-roadmap-card.tiktok h3 { color: #fff; }
.bot-roadmap-card.tiktok p { color: #aab5c9; }
.bot-roadmap-card h3 { margin: 7px 0; }
.bot-roadmap-card p { margin: 0; color: var(--muted); font-size: .85rem; }
.roadmap-status { display: inline-flex; border-radius: 999px; background: rgba(245,158,11,.11); color: #d97706; padding: 5px 9px; font-size: .58rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }

.lifetime-update-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(300px,.75fr); gap: 40px; align-items: center; overflow: hidden; margin-top: 30px; border: 1px solid rgba(0,94,255,.2); border-radius: 30px; background:
    radial-gradient(circle at 85% 15%, rgba(37,244,238,.15), transparent 30%),
    linear-gradient(135deg, #06142d, #0b234b 58%, #07101f); padding: clamp(32px,5vw,62px); color: #d9e6ff; box-shadow: 0 28px 75px rgba(0,35,91,.25); }
.lifetime-update-card h2 { color: #fff; margin: 13px 0; }
.lifetime-update-card p { color: #b6c6e2; }
.lifetime-update-copy > small { display: block; margin-top: 20px; color: #8194b5; font-size: .67rem; line-height: 1.55; }
.lifetime-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 18px; margin: 24px 0 0; padding: 0; list-style: none; }
.lifetime-points li { display: flex; gap: 9px; align-items: flex-start; color: #e8f0ff; font-size: .78rem; }
.lifetime-points span { display: grid; width: 20px; height: 20px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(37,211,102,.15); color: #72f59f; font-size: .62rem; }
.lifetime-visual { position: relative; display: grid; min-height: 330px; place-items: center; }
.lifetime-core { position: relative; z-index: 3; display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: radial-gradient(circle, rgba(0,94,255,.42), rgba(0,94,255,.08)); box-shadow: 0 0 0 25px rgba(0,94,255,.07), 0 0 0 50px rgba(37,244,238,.03); }
.lifetime-core img { width: 58px; }
.lifetime-core strong { margin-top: -18px; color: #fff; letter-spacing: .12em; }
.lifetime-core small { margin-top: -33px; color: #25f4ee; font-size: .5rem; letter-spacing: .18em; }
.update-orbit { position: absolute; z-index: 4; display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(4,19,43,.88); color: #fff; font-size: .65rem; font-weight: 900; box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.update-orbit.one { top: 29px; left: 32px; }
.update-orbit.two { top: 42px; right: 24px; }
.update-orbit.three { right: 15px; bottom: 65px; }
.update-orbit.four { bottom: 40px; left: 25px; color: #25f4ee; font-size: 1.05rem; }
.update-badge { position: absolute; z-index: 5; right: 50%; bottom: 0; display: flex; gap: 9px; align-items: center; border: 1px solid rgba(37,211,102,.22); border-radius: 999px; background: rgba(6,30,28,.9); padding: 9px 15px; transform: translateX(50%); white-space: nowrap; }
.update-badge span { color: #72f59f; font-size: 1.1rem; }
.update-badge strong { color: #dfffea; font-size: .65rem; }

/* Full-width, mobile-first custom-system wizard ------------------------------ */
.custom-quote-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 0 0, rgba(0,94,255,.11), transparent 27%),
        radial-gradient(circle at 100% 100%, rgba(37,211,102,.07), transparent 26%),
        var(--bg-alt);
}

.custom-quote-section .container {
    width: min(1380px, calc(100% - 48px));
}

.custom-quote-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
}

.custom-quote-intro {
    display: grid !important;
    grid-template-columns: minmax(0,1.1fr) minmax(420px,.9fr) !important;
    gap: 16px 45px !important;
    align-items: center !important;
    max-width: none !important;
    border: 1px solid var(--border);
    border-radius: 27px;
    background: var(--card);
    padding: clamp(28px, 4vw, 48px);
    box-shadow: var(--shadow);
}

.custom-quote-intro > .eyebrow,
.custom-quote-intro > h2,
.custom-quote-intro > p { grid-column: 1 !important; }
.custom-quote-intro h2 { margin: 4px 0 8px; font-size: clamp(2rem,3.5vw,3.45rem); }
.custom-quote-intro > p { max-width: 720px; margin: 0; color: var(--muted); }
.custom-quote-intro .quote-benefits { grid-column: 2; grid-row: 1 / 4; margin: 0; }
.custom-quote-intro .quote-logo-cloud { grid-column: 1; margin: 18px 0 0; }
.custom-quote-intro .quote-direct-wa { grid-column: 2; margin: 12px 0 0; }

.system-quote-form {
    width: 100%;
    max-width: none !important;
    overflow: hidden;
    border-radius: 30px;
    padding: 0 !important;
    box-shadow: 0 32px 85px rgba(2,32,90,.14);
}

.quote-form-header {
    padding: 34px clamp(28px,4vw,55px) 28px;
}
.quote-form-header h3 { font-size: clamp(1.7rem,3vw,2.6rem); }
.quote-form-header p { max-width: 840px; font-size: .96rem; }
.quote-progress { padding: 20px clamp(28px,4vw,55px) 14px; }
.quote-progress-track { margin-inline: clamp(28px,4vw,55px); }
.quote-step { padding: clamp(32px,5vw,64px) clamp(28px,5vw,70px) clamp(38px,5vw,66px); }
.quote-step-heading { max-width: 900px; margin-bottom: 34px; }
.quote-step-heading h4 { font-size: clamp(1.35rem,2.2vw,1.9rem); }
.system-quote-form .form-grid { gap: 22px; }
.system-quote-form input,
.system-quote-form select,
.system-quote-form textarea { min-height: 54px; border-radius: 14px; }
.system-quote-form textarea { min-height: 165px; }
.solution-logo-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px; }
.compact-logo-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: 11px; }
.solution-choice > label { min-height: 130px; padding: 19px; }
.solution-choice .logo-choice-icon { width: 42px; height: 42px; }
.compact-choice > label { min-height: 86px; padding: 13px; }
.compact-choice .logo-choice-icon { width: 32px; height: 32px; }
.quote-step-actions { margin-top: 34px; }
.quote-step-actions .button { min-height: 50px; min-width: 170px; }
.quote-live-summary { margin-top: 26px; padding: 24px; border-radius: 20px; }
.quote-live-summary dl { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.quote-live-summary dl > div { min-height: 91px; padding: 14px; }
.quote-submit-button { min-height: 56px; font-size: .9rem; }

/* Contact page --------------------------------------------------------------- */
.contact-page-v2 { overflow: hidden; }
.contact-hero-v2 {
    position: relative;
    padding: clamp(90px,10vw,145px) 0 clamp(70px,8vw,110px);
    background:
        radial-gradient(circle at 15% 0, rgba(0,94,255,.13), transparent 34%),
        radial-gradient(circle at 90% 80%, rgba(37,211,102,.08), transparent 26%),
        var(--bg);
}
.contact-hero-grid-v2 { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(440px,.95fr); gap: clamp(40px,7vw,95px); align-items: center; }
.contact-hero-copy-v2 h1 { margin: 18px 0 22px; }
.contact-hero-copy-v2 > p { max-width: 690px; color: var(--muted); font-size: 1.05rem; }
.contact-hero-trust { display: inline-flex; gap: 10px; align-items: center; margin-top: 22px; border: 1px solid var(--border); border-radius: 999px; background: var(--card); padding: 9px 14px; box-shadow: var(--shadow-sm); }
.contact-hero-trust span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: rgba(37,211,102,.13); color: #16a34a; font-size: .7rem; font-weight: 900; }
.contact-hero-trust p { margin: 0; color: var(--muted); font-size: .7rem; font-weight: 700; }

.contact-network-visual { position: relative; display: grid; min-height: 470px; place-items: center; }
.contact-network-visual::before { position: absolute; width: 390px; height: 390px; border: 1px dashed rgba(0,94,255,.2); border-radius: 50%; content: ""; animation: networkSpin 28s linear infinite; }
.contact-network-visual::after { position: absolute; width: 270px; height: 270px; border: 1px solid rgba(0,94,255,.12); border-radius: 50%; content: ""; }
@keyframes networkSpin { to { transform: rotate(360deg); } }
.contact-network-core { position: relative; z-index: 3; display: grid; width: 170px; height: 170px; place-items: center; border: 1px solid rgba(0,94,255,.18); border-radius: 50%; background: var(--card); box-shadow: 0 30px 80px rgba(0,94,255,.18), 0 0 0 25px rgba(0,94,255,.035); }
.contact-network-core img { width: 65px; }
.contact-network-core strong { margin-top: -25px; color: var(--ink); font-size: 1.1rem; letter-spacing: .13em; }
.contact-network-core small { margin-top: -43px; color: var(--muted); font-size: .48rem; font-weight: 800; letter-spacing: .12em; }
.contact-orbit-logo { position: absolute; z-index: 4; width: 51px; height: 51px; border-radius: 17px; background-color: var(--card); padding: 10px; filter: drop-shadow(0 14px 20px rgba(2,32,90,.16)); }
.contact-orbit-logo.one { top: 38px; left: 23%; }
.contact-orbit-logo.two { top: 18%; right: 13%; }
.contact-orbit-logo.three { right: 19%; bottom: 17%; }
.contact-orbit-logo.four { bottom: 10%; left: 17%; }
.contact-network-line { position: absolute; z-index: 1; width: 300px; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,94,255,.2), transparent); }
.contact-network-line.line-one { transform: rotate(35deg); }
.contact-network-line.line-two { transform: rotate(-38deg); }
.contact-alert-toast { position: absolute; z-index: 6; right: 0; bottom: 35px; display: grid; grid-template-columns: 35px minmax(0,1fr) auto; gap: 11px; align-items: center; min-width: 285px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--card) 92%, transparent); padding: 13px 15px; box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.contact-alert-toast .brand-mask-icon { width: 31px; height: 31px; }
.contact-alert-toast div { display: grid; gap: 1px; }
.contact-alert-toast strong { color: var(--ink); font-size: .73rem; }
.contact-alert-toast small { color: var(--muted); font-size: .58rem; }
.contact-alert-toast b { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(37,211,102,.13); color: #16a34a; font-size: .65rem; }

.contact-heading-v2 { max-width: 850px; margin-bottom: 34px; }
.contact-heading-v2 h2 { font-size: clamp(1.75rem,3vw,2.55rem); }
.contact-channel-grid-v2 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.contact-channel-card-v2 { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 20px; background: var(--card); color: var(--text); padding: 20px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.contact-channel-card-v2:hover { color: var(--text); transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-channel-card-v2 > .brand-mask-icon { width: 43px; height: 43px; }
.contact-number-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: var(--blue-soft); color: var(--blue); font-weight: 900; }
.contact-channel-card-v2 div { display: grid; gap: 2px; }
.contact-channel-card-v2 strong { color: var(--ink); font-size: .88rem; }
.contact-channel-card-v2 small { color: var(--muted); font-size: .68rem; overflow-wrap: anywhere; }
.contact-channel-card-v2 > b { color: var(--muted); font-size: 1.1rem; }
.contact-channel-card-v2.is-whatsapp:hover { border-color: rgba(37,211,102,.4); }
.contact-channel-card-v2.is-email:hover { border-color: rgba(0,94,255,.35); }

.contact-form-section-v2 { background: var(--bg); }
.contact-form-v2 { width: min(1180px,100%); margin-inline: auto; overflow: hidden; border-radius: 30px; padding: 0; box-shadow: var(--shadow-lg); }
.contact-form-head-v2 { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; border-bottom: 1px solid var(--border); background: linear-gradient(145deg, var(--card), var(--bg-alt)); padding: clamp(28px,4vw,50px); }
.contact-form-head-v2 h2 { margin: 11px 0 10px; }
.contact-form-head-v2 p { max-width: 760px; margin: 0; color: var(--muted); }
.contact-form-secure { display: inline-flex; flex: 0 0 auto; gap: 8px; align-items: center; border: 1px solid rgba(37,211,102,.22); border-radius: 999px; background: rgba(37,211,102,.07); color: #168844; padding: 8px 12px; font-size: .65rem; font-weight: 800; }
.contact-form-secure i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: #25d366; color: #fff; font-style: normal; font-size: .55rem; }
.contact-form-body-v2 { padding: clamp(28px,5vw,58px); }
.contact-basic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.contact-form-v2 input,
.contact-form-v2 textarea { min-height: 54px; border-radius: 14px; }
.contact-form-v2 textarea { min-height: 145px; }
.contact-solution-field { margin-top: 30px; }
.contact-solution-grid-v2 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-top: 12px; }
.contact-solution-choice { position: relative; }
.contact-solution-choice input { position: absolute; opacity: 0; pointer-events: none; }
.contact-solution-choice label { position: relative; display: grid; min-height: 105px; grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px; align-items: center; border: 1px solid var(--border); border-radius: 17px; background: var(--card); padding: 15px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.contact-solution-choice label:hover { border-color: color-mix(in srgb, var(--solution-color) 38%, var(--border)); transform: translateY(-2px); }
.contact-solution-choice label > .brand-mask-icon { width: 38px; height: 38px; }
.contact-solution-choice label > span:nth-child(2) { display: grid; gap: 3px; }
.contact-solution-choice strong { color: var(--ink); font-size: .77rem; }
.contact-solution-choice small { color: var(--muted); font-size: .61rem; line-height: 1.4; }
.contact-solution-choice label i { display: grid; width: 23px; height: 23px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: transparent; font-style: normal; font-size: .58rem; }
.contact-solution-choice input:checked + label { border-color: color-mix(in srgb, var(--solution-color) 62%, var(--border)); background: color-mix(in srgb, var(--solution-color) 6%, var(--card)); box-shadow: inset 0 -3px 0 var(--solution-color); }
.contact-solution-choice input:checked + label i { border-color: var(--solution-color); background: var(--solution-color); color: #fff; }
.contact-solution-choice input:focus-visible + label { box-shadow: var(--focus); }
.contact-form-v2 .form-field.full { margin-top: 24px; }
.contact-form-footer-v2 { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border-top: 1px solid var(--border); background: var(--bg-alt); padding: 24px clamp(28px,5vw,58px); }
.contact-form-footer-v2 .form-status { flex: 1 1 100%; }

/* Diagnostic 2.0 ------------------------------------------------------------- */
.diagnostic-page-v2 { min-height: 100vh; padding: 0 0 100px; background:
    radial-gradient(circle at 10% 0, rgba(0,94,255,.12), transparent 30%),
    radial-gradient(circle at 90% 60%, rgba(124,58,237,.07), transparent 28%),
    var(--bg-alt); }
.diagnostic-hero-v2 { padding: clamp(92px,10vw,135px) 0 52px; }
.diagnostic-hero-inner { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: end; }
.diagnostic-hero-inner h1 { margin: 16px 0 12px; font-size: clamp(2.5rem,5vw,4.6rem); }
.diagnostic-hero-inner p { max-width: 720px; margin: 0; color: var(--muted); font-size: 1.02rem; }
.diagnostic-hero-chips { display: flex; gap: 9px; }
.diagnostic-hero-chips span { display: grid; min-width: 120px; gap: 3px; border: 1px solid var(--border); border-radius: 18px; background: var(--card); padding: 14px; box-shadow: var(--shadow-sm); }
.diagnostic-hero-chips b { color: var(--blue); font: 800 1.25rem/1 "Sora",sans-serif; }
.diagnostic-hero-chips span { color: var(--muted); font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

.diagnostic-shell-v2 { display: grid; grid-template-columns: 285px minmax(0,1fr); gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 32px; background: var(--card); box-shadow: var(--shadow-lg); }
.diagnostic-side-v2 { position: relative; display: flex; min-height: 650px; flex-direction: column; border-right: 1px solid rgba(255,255,255,.1); background:
    radial-gradient(circle at 50% 25%, rgba(0,94,255,.36), transparent 30%),
    linear-gradient(180deg,#07152f,#07101f); color: #fff; padding: 28px 25px; }
.diagnostic-brand-card { display: flex; gap: 11px; align-items: center; }
.diagnostic-brand-icon { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.06); }
.diagnostic-brand-icon img { width: 28px; }
.diagnostic-brand-card div { display: grid; gap: 1px; }
.diagnostic-brand-card strong { color: #fff; letter-spacing: .1em; }
.diagnostic-brand-card small { color: #8da2c6; font-size: .57rem; font-weight: 800; text-transform: uppercase; }
.diagnostic-progress-ring { position: relative; display: grid; width: 160px; height: 160px; place-items: center; margin: 60px auto 38px; border-radius: 50%; background: conic-gradient(#25f4ee calc(var(--progress) * 1%), rgba(255,255,255,.1) 0); transition: background .3s ease; }
.diagnostic-progress-ring::before { position: absolute; width: 134px; height: 134px; border-radius: 50%; background: #091831; content: ""; }
.diagnostic-progress-ring > div { position: relative; z-index: 2; display: grid; gap: 3px; justify-items: center; }
.diagnostic-progress-ring strong { color: #fff; font: 800 1.9rem/1 "Sora",sans-serif; }
.diagnostic-progress-ring small { color: #8da2c6; font-size: .58rem; font-weight: 800; text-transform: uppercase; }
.diagnostic-side-meta { display: grid; gap: 13px; }
.diagnostic-side-meta > span:first-child { display: flex; justify-content: center; gap: 4px; color: #a9bad5; font-size: .72rem; }
.diagnostic-side-meta strong { color: #fff; }
.diagnostic-side-meta .progress-track { height: 5px; background: rgba(255,255,255,.1); }
.diagnostic-side-meta .progress-bar { background: linear-gradient(90deg,#005eff,#25f4ee); }
.diagnostic-stage-pill { justify-self: center; border: 1px solid rgba(37,244,238,.18); border-radius: 999px; background: rgba(37,244,238,.08); color: #80fff9 !important; padding: 7px 11px; font-size: .58rem !important; font-weight: 800; text-transform: uppercase; }
.diagnostic-side-security { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 10px; align-items: start; margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; }
.diagnostic-side-security > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: rgba(37,211,102,.13); color: #72f59f; font-size: .65rem; }
.diagnostic-side-security div { display: grid; gap: 3px; }
.diagnostic-side-security strong { color: #e8f0ff; font-size: .7rem; }
.diagnostic-side-security small { color: #7f92b2; font-size: .56rem; line-height: 1.45; }

.diagnostic-main-v2 { min-width: 0; }
.diagnostic-question-panel { min-height: 650px; padding: clamp(36px,6vw,76px); }
.diagnostic-question-head { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 20px; align-items: start; }
.diagnostic-question-index { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 19px; background: var(--blue-soft); color: var(--blue); font: 800 1.1rem/1 "Sora",sans-serif; }
.diagnostic-stage-inline { color: var(--blue); font-size: .63rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.diagnostic-question-head h2 { margin: 7px 0 8px; font-size: clamp(1.65rem,3vw,2.55rem); }
.diagnostic-question-head p { margin: 0; color: var(--muted); font-size: .84rem; }
.diagnostic-page-v2 .multi-hint { width: max-content; margin: 20px 0 0 84px; border-radius: 999px; background: rgba(124,58,237,.08); color: #7c3aed; padding: 7px 11px; font-size: .64rem; font-weight: 800; }
.diagnostic-page-v2 .diagnostic-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.diagnostic-page-v2 .diagnostic-option { position: relative; display: grid; min-height: 84px; grid-template-columns: 47px minmax(0,1fr) 25px; gap: 13px; align-items: center; border: 1px solid var(--border); border-radius: 18px; background: var(--card); color: var(--text); padding: 15px 16px; text-align: left; cursor: pointer; opacity: 0; animation: diagnosticOptionIn .35s ease forwards; animation-delay: var(--option-delay); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
@keyframes diagnosticOptionIn { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(8px); } }
.diagnostic-page-v2 .diagnostic-option:hover { border-color: rgba(0,94,255,.35); box-shadow: 0 12px 26px rgba(0,94,255,.08); transform: translateY(-2px); }
.diagnostic-page-v2 .diagnostic-option.is-selected { border-color: var(--blue); background: var(--blue-soft-2); box-shadow: inset 0 -3px 0 var(--blue); }
.diagnostic-option-icon { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 14px; background: var(--bg-alt); color: var(--blue); font-size: .72rem; font-weight: 900; }
.diagnostic-option-copy { color: var(--ink); font-size: .82rem; font-weight: 750; line-height: 1.35; }
.diagnostic-page-v2 .diagnostic-option-indicator { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: transparent; font-size: .58rem; }
.diagnostic-page-v2 .diagnostic-option.is-selected .diagnostic-option-indicator { border-color: var(--blue); background: var(--blue); color: #fff; }
.diagnostic-page-v2 .diagnostic-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 38px; }
.diagnostic-page-v2 .diagnostic-actions .button { min-width: 150px; min-height: 49px; }

.diagnostic-result-v2 { min-height: 650px; padding: clamp(34px,5vw,68px); text-align: left; }
.diagnostic-result-hero { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 20px; align-items: start; }
.diagnostic-result-hero .result-icon { display: grid; width: 76px; height: 76px; place-items: center; border-radius: 23px; background: linear-gradient(145deg,var(--blue),#7c3aed); box-shadow: 0 16px 34px rgba(0,94,255,.25); }
.diagnostic-result-hero .result-icon img { width: 43px; filter: brightness(0) invert(1); }
.diagnostic-result-hero h2 { margin: 10px 0 8px; font-size: clamp(1.8rem,3.5vw,2.8rem); }
.diagnostic-result-hero p { max-width: 820px; margin: 0; color: var(--muted); }
.diagnostic-result-v2 .result-plan { width: max-content; max-width: 100%; margin: 22px 0; border: 1px solid rgba(0,94,255,.18); border-radius: 999px; background: var(--blue-soft); color: var(--blue); padding: 9px 14px; font-size: .72rem; font-weight: 900; }
.diagnostic-result-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.diagnostic-reason-card,
.diagnostic-result-v2 .complement-card { border: 1px solid var(--border); border-radius: 20px; background: var(--bg-alt); padding: 21px; }
.diagnostic-reason-card h3,
.diagnostic-result-v2 .complement-card h3 { margin-bottom: 12px; font-size: 1rem; }
.diagnostic-result-v2 .result-reasons { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.diagnostic-result-v2 .result-reasons li { position: relative; padding-left: 24px; color: var(--muted); font-size: .74rem; }
.diagnostic-result-v2 .result-reasons li::before { position: absolute; top: 3px; left: 0; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(37,211,102,.12); color: #16a34a; content: "✓"; font-size: .5rem; font-weight: 900; }

.diagnostic-capture-card { margin-top: 24px; overflow: hidden; border: 1px solid rgba(37,211,102,.22); border-radius: 23px; background: var(--card); box-shadow: var(--shadow-sm); }
.diagnostic-capture-heading { display: grid; grid-template-columns: 47px minmax(0,1fr); gap: 15px; align-items: start; border-bottom: 1px solid var(--border); background: linear-gradient(135deg,rgba(37,211,102,.07),var(--card)); padding: 22px; }
.diagnostic-capture-heading > .brand-mask-icon { width: 44px; height: 44px; }
.diagnostic-capture-heading div { display: grid; gap: 3px; }
.diagnostic-capture-heading span { color: #168844; font-size: .59rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.diagnostic-capture-heading h3 { margin: 0; font-size: 1.12rem; }
.diagnostic-capture-heading p { margin: 3px 0 0; color: var(--muted); font-size: .7rem; }
.diagnostic-contact-grid { padding: 22px; }
.diagnostic-contact-grid input { min-height: 50px; border-radius: 13px; }
.diagnostic-submit-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border-top: 1px solid var(--border); background: var(--bg-alt); padding: 18px 22px; }
.diagnostic-submit-row .form-status { flex-basis: 100%; }
.diagnostic-result-tools { display: flex; gap: 10px; margin-top: 18px; }
.diagnostic-disclaimer { margin: 14px 0 0; color: var(--muted); font-size: .65rem; }
.diagnostic-shell-v2.is-result-mode { grid-template-columns: 245px minmax(0,1fr); }
.diagnostic-shell-v2.is-result-mode .diagnostic-side-v2 { min-height: 780px; }

/* Admin dashboard 2.0 -------------------------------------------------------- */
.admin-dashboard-body { min-height: 100vh; background: #f3f6fb; color: #172033; }
html[data-theme="dark"] .admin-dashboard-body { background: #060a13; }
.admin-app { display: grid; min-height: 100vh; grid-template-columns: 255px minmax(0,1fr); }
.admin-sidebar-v2 { position: sticky; z-index: 50; top: 0; display: flex; height: 100vh; flex-direction: column; overflow-y: auto; background: linear-gradient(180deg,#07142c,#07101f); color: #fff; padding: 22px 17px; }
.admin-sidebar-brand { display: flex; justify-content: space-between; align-items: center; padding: 3px 5px 22px; }
.admin-sidebar-v2 .brand { display: flex; gap: 10px; align-items: center; color: #fff; }
.admin-sidebar-v2 .brand:hover { color: #fff; }
.admin-sidebar-v2 .brand-copy { display: grid; gap: 1px; }
.admin-sidebar-v2 .brand-copy strong { color: #fff; letter-spacing: .1em; }
.admin-sidebar-v2 .brand-copy small { color: #8093b5; font-size: .46rem; letter-spacing: .09em; }
.admin-sidebar-close { display: none; border: 0; background: transparent; color: #fff; font-size: 1.5rem; cursor: pointer; }
.admin-side-nav { display: grid; gap: 5px; margin-top: 12px; }
.admin-side-nav a { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 9px; align-items: center; border-radius: 13px; color: #95a6c3; padding: 11px 12px; font-size: .72rem; font-weight: 700; transition: background .18s ease,color .18s ease; }
.admin-side-nav a:hover,
.admin-side-nav a.is-active { background: rgba(255,255,255,.08); color: #fff; }
.admin-side-nav a.is-active { box-shadow: inset 3px 0 0 #3b82f6; }
.admin-side-nav a > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: rgba(255,255,255,.06); color: #a8c8ff; font-size: .67rem; }
.admin-side-nav a b { display: grid; min-width: 23px; height: 23px; place-items: center; border-radius: 999px; background: rgba(255,255,255,.07); color: #d7e5ff; padding-inline: 5px; font-size: .57rem; }
.admin-email-card { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 10px; margin-top: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 15px; background: rgba(255,255,255,.04); padding: 13px; }
.admin-email-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(0,94,255,.2); color: #77a8ff; }
.admin-email-card div { display: grid; min-width: 0; gap: 2px; }
.admin-email-card small { color: #7184a4; font-size: .52rem; }
.admin-email-card strong { overflow: hidden; color: #dce7fa; font-size: .57rem; text-overflow: ellipsis; }
.admin-email-card div > span { width: max-content; margin-top: 3px; border-radius: 999px; padding: 3px 6px; font-size: .46rem; font-weight: 900; text-transform: uppercase; }
.admin-email-card .is-online { background: rgba(37,211,102,.12); color: #77f3a0; }
.admin-email-card .is-offline { background: rgba(239,68,68,.12); color: #ff9292; }
.admin-sidebar-footer { display: grid; gap: 6px; margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.admin-sidebar-footer a,
.admin-sidebar-footer button { width: 100%; border: 0; border-radius: 10px; background: transparent; color: #8193b1; padding: 8px 10px; text-align: left; font-size: .65rem; cursor: pointer; }
.admin-sidebar-footer a:hover,
.admin-sidebar-footer button:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-sidebar-scrim { display: none; }

.admin-main-v2 { min-width: 0; padding: 0 28px 38px; }
.admin-topbar-v2 { position: sticky; z-index: 30; top: 0; display: flex; justify-content: space-between; gap: 20px; align-items: center; min-height: 84px; border-bottom: 1px solid rgba(207,217,233,.8); background: rgba(243,246,251,.89); backdrop-filter: blur(14px); }
html[data-theme="dark"] .admin-topbar-v2 { border-color: #1a2639; background: rgba(6,10,19,.89); }
.admin-topbar-title { display: flex; gap: 12px; align-items: center; }
.admin-topbar-title small { color: var(--muted); font-size: .55rem; font-weight: 800; }
.admin-topbar-title h1 { margin: 1px 0 0; font-size: 1.35rem; }
.admin-mobile-menu { display: none; width: 39px; height: 39px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); cursor: pointer; }
.admin-topbar-actions { display: flex; gap: 8px; align-items: center; }
.admin-icon-action { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 11px; background: var(--card); color: var(--text); cursor: pointer; }
.admin-flash { margin: 18px 0 0; border-radius: 13px; padding: 12px 15px; font-size: .72rem; font-weight: 700; }
.admin-flash.is-success { border: 1px solid rgba(37,211,102,.25); background: rgba(37,211,102,.08); color: #168844; }
.admin-flash.is-error { border: 1px solid rgba(239,68,68,.25); background: rgba(239,68,68,.08); color: #c73f3f; }

.admin-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin: 24px 0 17px; }
.admin-metric-card { display: grid; min-width: 0; grid-template-columns: 43px minmax(0,1fr); gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 17px; background: var(--card); padding: 17px; box-shadow: 0 7px 24px rgba(16,24,40,.04); }
.admin-metric-card.primary { background: linear-gradient(135deg,#005eff,#0045c5); border-color: transparent; }
.admin-metric-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--blue-soft); color: var(--blue); font-size: .73rem; font-weight: 900; }
.admin-metric-card.primary .admin-metric-icon { background: rgba(255,255,255,.13); color: #fff; }
.admin-metric-card div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1px 8px; align-items: end; }
.admin-metric-card small { grid-column: 1; color: var(--muted); font-size: .58rem; font-weight: 800; }
.admin-metric-card strong { grid-row: 1 / 3; grid-column: 2; color: var(--ink); font: 800 1.7rem/1 "Sora",sans-serif; }
.admin-metric-card p { grid-column: 1; margin: 0; color: var(--muted); font-size: .51rem; }
.admin-metric-card.primary small,
.admin-metric-card.primary p { color: rgba(255,255,255,.72); }
.admin-metric-card.primary strong { color: #fff; }

.admin-workspace-v2 { display: grid; grid-template-columns: minmax(330px,390px) minmax(0,1fr); min-height: 680px; overflow: hidden; border: 1px solid var(--border); border-radius: 21px; background: var(--card); box-shadow: 0 15px 45px rgba(16,24,40,.06); }
.admin-leads-pane { min-width: 0; border-right: 1px solid var(--border); }
.admin-pane-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); padding: 19px 20px; }
.admin-pane-head h2 { margin: 0; font-size: 1.05rem; }
.admin-pane-head p { margin: 2px 0 0; color: var(--muted); font-size: .59rem; }
.admin-reset-filter { font-size: .6rem; font-weight: 800; }
.admin-filter-form { display: grid; gap: 10px; border-bottom: 1px solid var(--border); background: var(--bg-alt); padding: 14px; }
.admin-search-field { display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; align-items: center; border: 1px solid var(--border); border-radius: 11px; background: var(--card); padding: 0 10px; }
.admin-search-field span { color: var(--muted); }
.admin-search-field input { min-height: 41px; border: 0; background: transparent; color: var(--text); outline: 0; font-size: .68rem; }
.admin-filter-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) auto; gap: 8px; align-items: end; }
.admin-filter-row label { display: grid; gap: 4px; }
.admin-filter-row label > span { color: var(--muted); font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.admin-filter-row select { min-width: 0; min-height: 37px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); padding: 0 7px; font-size: .62rem; }
.admin-lead-list-v2 { max-height: 650px; overflow-y: auto; }
.admin-lead-item { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--border); color: var(--text); padding: 14px 15px; transition: background .15s ease; }
.admin-lead-item:hover,
.admin-lead-item.is-selected { background: var(--blue-soft-2); color: var(--text); }
.admin-lead-item.is-selected { box-shadow: inset 3px 0 0 var(--blue); }
.admin-lead-type { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--blue-soft); color: var(--blue); font-size: .59rem; font-weight: 900; }
.admin-lead-type.type-system_quote { background: rgba(124,58,237,.1); color: #7c3aed; }
.admin-lead-type.type-diagnostic { background: rgba(37,211,102,.1); color: #168844; }
.admin-lead-type.type-tiktok_waitlist { background: #17171b; color: #25f4ee; }
.admin-lead-type.large { width: 51px; height: 51px; border-radius: 15px; font-size: .68rem; }
.admin-lead-copy { display: grid; min-width: 0; gap: 2px; }
.admin-lead-meta { display: flex; justify-content: space-between; gap: 8px; }
.admin-lead-meta b { overflow: hidden; color: var(--muted); font-size: .48rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.admin-lead-meta time { flex: 0 0 auto; color: var(--muted); font-size: .48rem; }
.admin-lead-copy > strong { overflow: hidden; color: var(--ink); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-lead-copy > small { overflow: hidden; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-lead-arrow { color: var(--muted); }
.admin-status-pill { display: inline-flex; width: max-content; margin-top: 4px; border-radius: 999px; padding: 3px 7px; font-size: .47rem; font-weight: 900; text-transform: uppercase; }
.admin-status-pill.status-new { background: rgba(0,94,255,.1); color: #005eff; }
.admin-status-pill.status-contacted { background: rgba(245,158,11,.12); color: #c17a00; }
.admin-status-pill.status-in_progress { background: rgba(124,58,237,.1); color: #7c3aed; }
.admin-status-pill.status-won { background: rgba(37,211,102,.12); color: #168844; }
.admin-status-pill.status-closed { background: rgba(100,116,139,.12); color: #64748b; }
.admin-empty-v2 { display: grid; justify-items: center; padding: 50px 22px; text-align: center; }
.admin-empty-v2 > span { color: var(--blue); font-size: 2rem; }
.admin-empty-v2 h3 { margin: 9px 0 4px; font-size: .95rem; }
.admin-empty-v2 p { margin: 0; color: var(--muted); font-size: .65rem; }

.admin-detail-pane { min-width: 0; overflow: auto; background: var(--card); padding: 26px; }
.admin-detail-empty { display: grid; min-height: 500px; place-items: center; align-content: center; text-align: center; }
.admin-detail-empty img { width: 60px; opacity: .5; }
.admin-detail-empty h2 { margin: 14px 0 5px; font-size: 1.25rem; }
.admin-detail-empty p { color: var(--muted); font-size: .7rem; }
.admin-detail-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.admin-detail-title-wrap { display: grid; grid-template-columns: 53px minmax(0,1fr); gap: 13px; }
.admin-detail-kicker { color: var(--blue); font-size: .51rem; font-weight: 900; text-transform: uppercase; }
.admin-detail-title-wrap h2 { margin: 3px 0; font-size: 1.45rem; }
.admin-detail-title-wrap p { margin: 0; color: var(--muted); font-size: .58rem; }
.admin-contact-card-v2 { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 13px; align-items: center; margin-top: 20px; border: 1px solid var(--border); border-radius: 17px; background: var(--bg-alt); padding: 15px; }
.admin-contact-avatar { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: linear-gradient(135deg,var(--blue),#7c3aed); color: #fff; font-weight: 900; }
.admin-contact-main { display: grid; gap: 2px; }
.admin-contact-main strong { color: var(--ink); font-size: .8rem; }
.admin-contact-main span { color: var(--muted); font-size: .6rem; }
.admin-contact-actions-v2 { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-contact-actions-v2 a { border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); padding: 7px 9px; font-size: .56rem; font-weight: 800; }
.admin-contact-actions-v2 a.is-whatsapp { border-color: rgba(37,211,102,.23); background: rgba(37,211,102,.07); color: #168844; }
.admin-detail-section { margin-top: 23px; }
.admin-section-title { display: flex; justify-content: space-between; gap: 15px; align-items: end; margin-bottom: 10px; }
.admin-section-title h3 { margin: 0; font-size: .88rem; }
.admin-section-title span { color: var(--muted); font-size: .5rem; font-weight: 800; text-transform: uppercase; }
.admin-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; }
.admin-info-grid > div { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); padding: 11px 13px; }
.admin-info-grid > div.full { grid-column: 1/-1; }
.admin-info-grid dt,
.admin-detail-list dt { color: var(--muted); font-size: .49rem; font-weight: 900; text-transform: uppercase; }
.admin-info-grid dd,
.admin-detail-list dd { margin: 3px 0 0; color: var(--ink); font-size: .67rem; overflow-wrap: anywhere; }
.admin-detail-list { display: grid; gap: 0; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 13px; }
.admin-detail-list > div { display: grid; grid-template-columns: minmax(130px,.35fr) minmax(0,.65fr); gap: 15px; border-bottom: 1px solid var(--border); padding: 11px 13px; }
.admin-detail-list > div:last-child { border-bottom: 0; }
.admin-diagnostic-answers { display: grid; gap: 8px; }
.admin-diagnostic-answers article { display: grid; grid-template-columns: 29px minmax(0,1fr); gap: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-alt); padding: 11px; }
.admin-diagnostic-answers article > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 9px; background: var(--blue-soft); color: var(--blue); font-size: .55rem; font-weight: 900; }
.admin-diagnostic-answers h4 { margin: 0 0 3px; font-size: .65rem; }
.admin-diagnostic-answers p { margin: 0; color: var(--muted); font-size: .61rem; }
.admin-status-form { display: flex; gap: 8px; }
.admin-status-form select { min-width: 180px; min-height: 38px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); color: var(--text); padding: 0 9px; font-size: .65rem; }
.mail-ok { color: #168844 !important; }
.mail-pending { color: #c17a00 !important; }

/* Responsive refinements ----------------------------------------------------- */
@media (max-width: 1180px) {
    .channel-logo-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .business-selector { grid-template-columns: repeat(8,130px); }
    .bot-connection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .solution-logo-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .compact-logo-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
    .contact-hero-grid-v2 { grid-template-columns: minmax(0,1fr) minmax(370px,.8fr); }
    .admin-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 980px) {
    .tiktok-interface-visual { margin-top: 20px; }
    .business-demo-stage { grid-template-columns: 1fr; }
    .business-demo-insight { border-top: 1px solid var(--border); border-left: 0; }
    .business-phone-wrap { padding-bottom: 25px; }
    .lifetime-update-card { grid-template-columns: 1fr; }
    .custom-quote-intro { grid-template-columns: 1fr !important; }
    .custom-quote-intro > .eyebrow,
    .custom-quote-intro > h2,
    .custom-quote-intro > p,
    .custom-quote-intro .quote-benefits,
    .custom-quote-intro .quote-logo-cloud,
    .custom-quote-intro .quote-direct-wa { grid-column: 1 !important; grid-row: auto !important; }
    .custom-quote-intro .quote-benefits { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .contact-hero-grid-v2 { grid-template-columns: 1fr; }
    .contact-network-visual { min-height: 410px; }
    .contact-channel-grid-v2 { grid-template-columns: 1fr; }
    .diagnostic-hero-inner { grid-template-columns: 1fr; }
    .diagnostic-hero-chips { flex-wrap: wrap; }
    .diagnostic-shell-v2,
    .diagnostic-shell-v2.is-result-mode { grid-template-columns: 1fr; }
    .diagnostic-side-v2,
    .diagnostic-shell-v2.is-result-mode .diagnostic-side-v2 { min-height: auto; border-right: 0; padding: 19px 22px; }
    .diagnostic-side-v2 { display: grid; grid-template-columns: auto 100px minmax(160px,1fr); gap: 18px; align-items: center; }
    .diagnostic-progress-ring { width: 88px; height: 88px; margin: 0; }
    .diagnostic-progress-ring::before { width: 72px; height: 72px; }
    .diagnostic-progress-ring strong { font-size: 1rem; }
    .diagnostic-progress-ring small { font-size: .42rem; }
    .diagnostic-side-security { display: none; }
    .diagnostic-side-meta { gap: 7px; }
    .admin-app { grid-template-columns: 1fr; }
    .admin-sidebar-v2 { position: fixed; left: 0; width: 270px; transform: translateX(-105%); transition: transform .23s ease; }
    .admin-menu-open .admin-sidebar-v2 { transform: translateX(0); }
    .admin-sidebar-close { display: block; }
    .admin-sidebar-scrim { position: fixed; z-index: 45; inset: 0; display: block; border: 0; background: rgba(2,8,20,.58); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .admin-menu-open .admin-sidebar-scrim { opacity: 1; pointer-events: auto; }
    .admin-mobile-menu { display: grid; place-items: center; }
    .admin-main-v2 { padding-inline: 20px; }
}

@media (max-width: 760px) {
    .channel-ecosystem { padding: 28px 0 34px; }
    .channel-ecosystem-heading { grid-template-columns: 1fr; justify-items: center; }
    .channel-ecosystem-heading > div { transform: none; }
    .channel-logo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .channel-logo-card { min-height: 108px; }
    .tiktok-interface-visual .tiktok-comment.one { left: 0; }
    .tiktok-interface-visual .tiktok-comment.two { right: 0; }
    .tiktok-floating-logo { right: 0; }
    .business-selector-shell { border-radius: 22px; }
    .business-selector-head { align-items: flex-start; flex-direction: column; }
    .business-demo-stage { min-height: 0; }
    .business-phone-wrap { padding: 30px 16px; }
    .business-phone { height: 550px; }
    .business-demo-insight { padding: 31px 22px; }
    .business-flow-list { grid-template-columns: 1fr; }
    .bot-connection-grid,
    .bot-roadmap-grid { grid-template-columns: 1fr; }
    .lifetime-update-card { padding: 30px 22px; }
    .lifetime-points { grid-template-columns: 1fr; }
    .solution-logo-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    .compact-logo-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
    .quote-progress { overflow-x: auto; }
    .quote-progress li { min-width: 90px; }
    .quote-progress li small { display: block !important; font-size: .48rem; }
    .quote-live-summary dl { grid-template-columns: 1fr; }
    .contact-network-visual { min-height: 360px; transform: scale(.9); }
    .contact-basic-grid,
    .contact-solution-grid-v2 { grid-template-columns: 1fr; }
    .contact-form-head-v2 { flex-direction: column; }
    .contact-form-footer-v2 .button { width: 100%; }
    .diagnostic-hero-chips span { min-width: 0; flex: 1 1 30%; }
    .diagnostic-side-v2 { grid-template-columns: auto 80px minmax(0,1fr); }
    .diagnostic-brand-card small { display: none; }
    .diagnostic-page-v2 .diagnostic-options,
    .diagnostic-result-grid { grid-template-columns: 1fr; }
    .diagnostic-question-panel,
    .diagnostic-result-v2 { padding: 28px 22px; }
    .diagnostic-question-head { grid-template-columns: 49px minmax(0,1fr); gap: 14px; }
    .diagnostic-question-index { width: 48px; height: 48px; border-radius: 14px; }
    .diagnostic-page-v2 .multi-hint { margin-left: 0; }
    .diagnostic-result-hero { grid-template-columns: 58px minmax(0,1fr); }
    .diagnostic-result-hero .result-icon { width: 57px; height: 57px; border-radius: 17px; }
    .diagnostic-result-hero .result-icon img { width: 32px; }
    .diagnostic-contact-grid { grid-template-columns: 1fr; }
    .diagnostic-submit-row .button { width: 100%; }
    .admin-topbar-v2 { align-items: flex-start; flex-direction: column; padding: 14px 0; }
    .admin-topbar-actions { width: 100%; overflow-x: auto; }
    .admin-metric-grid { grid-template-columns: 1fr 1fr; }
    .admin-workspace-v2 { grid-template-columns: 1fr; }
    .admin-leads-pane { border-right: 0; }
    .admin-lead-list-v2 { max-height: 520px; }
    .admin-detail-pane { border-top: 1px solid var(--border); }
}

@media (max-width: 540px) {
    .container,
    .custom-quote-section .container { width: min(100% - 28px, var(--max-width)); }
    .channel-logo-grid { gap: 8px; }
    .channel-logo-card { min-height: 102px; padding: 14px 12px; }
    .channel-logo-copy strong { font-size: .75rem; }
    .channel-logo-copy small { font-size: .58rem; }
    .tiktok-interface-visual { min-height: 600px; }
    .tiktok-interface-visual .tiktok-comment { width: 210px; }
    .tiktok-interface-visual .tiktok-comment.one { top: 105px; }
    .tiktok-interface-visual .tiktok-comment.two { bottom: 85px; }
    .tiktok-app-phone { width: 285px; }
    .custom-quote-intro { display: block !important; padding: 25px 20px; border-radius: 21px; }
    .custom-quote-intro .quote-benefits { display: grid; grid-template-columns: 1fr; }
    .custom-quote-intro .quote-logo-cloud,
    .custom-quote-intro .quote-direct-wa { margin-top: 20px; }
    .system-quote-form { border-radius: 22px; }
    .quote-form-header { padding: 25px 20px 21px; }
    .quote-progress { padding: 15px 14px 8px; }
    .quote-progress-track { margin-inline: 20px; }
    .quote-step { padding: 28px 18px 32px; }
    .solution-logo-grid { grid-template-columns: 1fr !important; }
    .compact-logo-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px; }
    .compact-choice > label { min-height: 78px; padding: 10px; }
    .compact-choice strong { font-size: .62rem; }
    .contact-hero-v2 { padding-top: 85px; }
    .contact-network-visual { min-height: 320px; transform: scale(.78); margin: -25px 0; }
    .contact-alert-toast { right: 50%; bottom: 5px; transform: translateX(50%); }
    .contact-channel-card-v2 { grid-template-columns: 43px minmax(0,1fr) auto; padding: 16px; }
    .contact-form-v2 { border-radius: 22px; }
    .contact-form-head-v2,
    .contact-form-body-v2 { padding: 25px 19px; }
    .contact-form-footer-v2 { padding: 20px 19px; }
    .contact-solution-choice label { min-height: 96px; }
    .diagnostic-page-v2 { padding-bottom: 60px; }
    .diagnostic-hero-v2 { padding-top: 84px; }
    .diagnostic-hero-chips { display: grid; grid-template-columns: repeat(3,1fr); }
    .diagnostic-hero-chips span { min-width: 0; padding: 10px; }
    .diagnostic-hero-chips b { font-size: .95rem; }
    .diagnostic-hero-chips span { font-size: .46rem; }
    .diagnostic-shell-v2 { border-radius: 22px; }
    .diagnostic-side-v2 { grid-template-columns: auto minmax(0,1fr); gap: 12px; }
    .diagnostic-progress-ring { display: none; }
    .diagnostic-side-meta { min-width: 0; }
    .diagnostic-stage-pill { justify-self: start; }
    .diagnostic-page-v2 .diagnostic-option { min-height: 78px; grid-template-columns: 40px minmax(0,1fr) 23px; gap: 10px; padding: 13px; }
    .diagnostic-option-icon { width: 39px; height: 39px; border-radius: 12px; }
    .diagnostic-page-v2 .diagnostic-actions { flex-direction: column-reverse; }
    .diagnostic-page-v2 .diagnostic-actions .button { width: 100%; }
    .diagnostic-result-hero { grid-template-columns: 1fr; }
    .diagnostic-result-hero .result-icon { width: 53px; height: 53px; }
    .diagnostic-capture-heading { grid-template-columns: 38px minmax(0,1fr); padding: 18px; }
    .diagnostic-capture-heading > .brand-mask-icon { width: 36px; height: 36px; }
    .diagnostic-contact-grid { padding: 18px; }
    .diagnostic-result-tools { flex-direction: column; }
    .diagnostic-result-tools .button { width: 100%; }
    .admin-main-v2 { padding: 0 12px 24px; }
    .admin-topbar-title h1 { font-size: 1.05rem; }
    .admin-topbar-actions .button { white-space: nowrap; }
    .admin-metric-grid { grid-template-columns: 1fr; }
    .admin-workspace-v2 { border-radius: 15px; }
    .admin-filter-row { grid-template-columns: 1fr 1fr; }
    .admin-filter-row .button { grid-column: 1/-1; width: 100%; }
    .admin-detail-pane { padding: 18px 14px; }
    .admin-detail-head { flex-direction: column; }
    .admin-contact-card-v2 { grid-template-columns: 43px minmax(0,1fr); }
    .admin-contact-actions-v2 { grid-column: 1/-1; justify-content: flex-start; }
    .admin-info-grid { grid-template-columns: 1fr; }
    .admin-detail-list > div { grid-template-columns: 1fr; gap: 3px; }
    .admin-status-form { flex-direction: column; }
    .admin-status-form select,
    .admin-status-form .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .contact-network-visual::before,
    .business-message,
    .diagnostic-page-v2 .diagnostic-option { animation: none !important; transition: none !important; opacity: 1; transform: none; }
}

/* ========================================================================== 
   DYGI visual foundation · desktop density, 3D depth and plan layout
   ========================================================================== */

/* Balanced typography and spacing ------------------------------------------ */
h1 {
    font-size: clamp(2.2rem, 4.25vw, 4.15rem);
    line-height: 1.055;
}

h2 {
    font-size: clamp(1.72rem, 2.75vw, 2.72rem);
    line-height: 1.15;
}

h3 {
    font-size: clamp(1.08rem, 1.6vw, 1.34rem);
}

.section {
    padding: 88px 0;
}

.section-compact {
    padding: 62px 0;
}

.section-heading {
    max-width: 700px;
    margin-bottom: 40px;
}

.section-heading h2,
.section-title {
    margin-bottom: 13px;
}

.section-heading p,
.section-copy {
    font-size: 1rem;
    line-height: 1.68;
}

.hero {
    padding: calc(var(--header-height) + 58px) 0 76px;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.04fr) minmax(410px, .96fr);
    gap: clamp(38px, 6vw, 74px);
}

.hero-copy h1 {
    font-size: clamp(2.35rem, 4.45vw, 4.25rem);
}

.hero-copy > p {
    font-size: clamp(1rem, 1.35vw, 1.12rem);
    line-height: 1.68;
}

.page-hero {
    padding: calc(var(--header-height) + 54px) 0 72px;
}

.page-hero-grid {
    gap: clamp(42px, 5vw, 64px);
}

.page-hero h1 {
    font-size: clamp(2.25rem, 4.15vw, 3.78rem);
    line-height: 1.075;
}

.page-hero-copy > p {
    font-size: 1.03rem;
    line-height: 1.68;
}

/* Subtle 3D depth without oversized elements ------------------------------- */
.card,
.mock-window,
.dashboard-window,
.comparison-wrap {
    box-shadow:
        0 1px 0 rgba(255,255,255,.82) inset,
        0 14px 32px rgba(2,32,90,.08),
        0 32px 70px rgba(2,32,90,.07);
}

.card-lift,
.mock-window,
.dashboard-window,
.business-phone,
.tiktok-app-phone {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.card-lift:hover {
    transform: perspective(1000px) translateY(-6px) rotateX(1.15deg);
}

.system-grid:not(.reverse) .mock-window {
    transform: perspective(1250px) rotateY(-3.25deg) rotateX(1.25deg);
    transform-origin: center right;
}

.system-grid.reverse .mock-window {
    transform: perspective(1250px) rotateY(3.25deg) rotateX(1.25deg);
    transform-origin: center left;
}

.system-grid .mock-window:hover {
    transform: perspective(1250px) rotateY(0) rotateX(0) translateY(-4px);
}

/* Social channel distribution and official logo treatment ------------------ */
.channel-ecosystem {
    padding: 48px 0 54px;
}

.channel-ecosystem-heading {
    max-width: 900px;
    margin-bottom: 30px;
}

.channel-ecosystem-heading > div {
    transform: none;
    text-align: left;
}

.channel-ecosystem-heading h2 {
    font-size: clamp(1.55rem, 2.45vw, 2.25rem);
}

.channel-ecosystem-heading p {
    font-size: .92rem;
    line-height: 1.55;
}

.channel-logo-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 14px;
}

.channel-logo-card {
    grid-column: span 2;
    min-height: 112px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    justify-content: initial;
    gap: 13px;
    padding: 17px;
    border-radius: 20px;
    overflow: visible;
}

.channel-logo-card:nth-child(5) {
    grid-column: 2 / span 2;
}

.channel-logo-card::before {
    right: 10px;
    bottom: 8px;
    width: 68px;
    height: 68px;
    filter: blur(2px);
}

.channel-logo-icon {
    position: relative;
    z-index: 2;
    width: 48px;
    height: 48px;
    border: 1px solid color-mix(in srgb, var(--channel-color) 20%, var(--border));
    border-radius: 15px;
    background: color-mix(in srgb, var(--channel-color) 9%, var(--card));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--channel-color) 12%, transparent);
}

.channel-logo-icon::before {
    width: 55%;
    height: 55%;
}

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

.channel-logo-copy strong {
    font-size: .88rem;
}

.channel-logo-copy small {
    font-size: .66rem;
}

.channel-connected-dot,
.channel-coming-badge {
    z-index: 3;
}

.channel-instagram .channel-logo-icon::before,
.brand-instagram::before {
    background: radial-gradient(circle at 28% 102%, #ffd600 0 20%, #ff7a00 36%, #ff0169 58%, #d300c5 78%, #7638fa 100%);
}

.channel-messenger .channel-logo-icon::before,
.brand-messenger::before {
    background: linear-gradient(145deg, #00b2ff 0%, #006aff 52%, #a033ff 100%);
}

.channel-tiktok .channel-logo-icon::before,
.brand-tiktok::before {
    background: #111;
    filter: drop-shadow(-2px 0 0 #25f4ee) drop-shadow(2px 0 0 #fe2c55);
}

.channel-whatsapp .channel-logo-icon::before,
.brand-whatsapp::before {
    background: #25d366;
}

/* Professional operation showcase ------------------------------------------ */
.product-showcase-section {
    overflow: hidden;
    background:
        radial-gradient(circle at 88% 16%, rgba(0,94,255,.11), transparent 28%),
        radial-gradient(circle at 8% 88%, rgba(37,211,102,.06), transparent 25%),
        var(--bg);
}

.product-showcase-grid {
    display: grid;
    grid-template-columns: minmax(340px, .78fr) minmax(520px, 1.22fr);
    gap: clamp(44px, 6vw, 82px);
    align-items: center;
}

.product-showcase-copy > h2 {
    max-width: 620px;
    margin: 0 0 15px;
}

.product-showcase-copy > p {
    max-width: 600px;
    margin-bottom: 27px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
}

.product-showcase-steps {
    display: grid;
    gap: 11px;
    margin-bottom: 26px;
}

.product-showcase-steps article {
    display: grid;
    grid-template-columns: 43px minmax(0,1fr);
    gap: 13px;
    align-items: start;
    border: 1px solid var(--border);
    border-radius: 17px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    padding: 14px 16px;
    box-shadow: 0 9px 24px rgba(2,32,90,.045);
}

.product-showcase-steps article > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 13px;
    background: linear-gradient(145deg, var(--blue), #7357ff);
    color: #fff;
    font: 800 .72rem/1 "Sora", sans-serif;
    box-shadow: 0 10px 20px rgba(0,94,255,.2);
}

.product-showcase-steps h3 {
    margin: 1px 0 3px;
    font-size: .94rem;
}

.product-showcase-steps p {
    margin: 0;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.48;
}

.product-showcase-visual {
    position: relative;
    min-width: 0;
    padding: 28px 8px 34px;
    perspective: 1500px;
}

.showcase-screen-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,94,255,.18);
    border-radius: 31px;
    background: var(--card);
    padding: 9px;
    box-shadow:
        0 38px 90px rgba(2,32,90,.18),
        0 12px 30px rgba(2,32,90,.1);
    transform: rotateY(-4deg) rotateX(1.5deg);
    transform-origin: center left;
    transition: transform .35s ease;
}

.product-showcase-visual:hover .showcase-screen-frame {
    transform: rotateY(0) rotateX(0) translateY(-4px);
}

.showcase-screen-frame img {
    display: block;
    width: 100%;
    border-radius: 23px;
}

.showcase-live-badge,
.showcase-sync-badge {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--card) 92%, transparent);
    color: var(--text);
    padding: 9px 13px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    font-size: .66rem;
    font-weight: 800;
}

.showcase-live-badge {
    top: 4px;
    left: -14px;
}

.showcase-live-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 0 5px rgba(37,211,102,.13);
}

.showcase-sync-badge {
    right: -8px;
    bottom: 5px;
    color: var(--blue);
}

.showcase-sync-badge strong {
    color: var(--text);
    font-weight: 800;
}

/* Subscription-style pricing cards ----------------------------------------- */
.pricing-showcase-section,
.pricing-plans-section {
    overflow: hidden;
}

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.subscription-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-strong);
    border-radius: 30px;
    background: var(--card);
    box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 24px 60px rgba(2,32,90,.11);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.subscription-card:hover {
    transform: perspective(1100px) translateY(-7px) rotateX(1deg);
    box-shadow: 0 34px 80px rgba(2,32,90,.16);
}

.subscription-card.is-featured {
    border-color: rgba(37,211,102,.42);
    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        0 27px 70px rgba(8,83,43,.16);
}

.subscription-visual {
    position: relative;
    aspect-ratio: 16 / 8.25;
    overflow: hidden;
    background: var(--bg-alt);
}

.subscription-visual::after {
    position: absolute;
    inset: auto 8% -12px;
    height: 28px;
    border-radius: 50%;
    background: rgba(3,24,58,.12);
    filter: blur(16px);
    content: "";
}

.subscription-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.subscription-card:hover .subscription-visual img {
    transform: scale(1.025);
}

.subscription-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: clamp(24px, 3vw, 34px);
}

.subscription-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
}

.subscription-kicker > span {
    border-radius: 7px;
    background: var(--blue);
    color: #fff;
    padding: 5px 9px;
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.subscription-lifetime .subscription-kicker > span {
    background: #12863f;
}

.subscription-kicker small {
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue);
    padding: 5px 9px;
    font-size: .62rem;
    font-weight: 800;
}

.subscription-lifetime .subscription-kicker small {
    background: rgba(37,211,102,.1);
    color: #168844;
}

.subscription-body h3 {
    margin: 0 0 8px;
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    line-height: 1.08;
}

.subscription-subtitle {
    display: block;
    margin: -1px 0 9px;
    color: var(--blue);
    font-size: .76rem;
    font-weight: 850;
}

.subscription-body > p {
    min-height: 70px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
}

.subscription-price {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border-block: 1px solid var(--border);
    margin-bottom: 19px;
    padding: 16px 0 17px;
}

.subscription-price strong {
    color: var(--ink);
    font: 800 clamp(2.35rem, 4vw, 3.45rem)/.95 "Sora", sans-serif;
    letter-spacing: -.055em;
}

.subscription-price > span {
    display: grid;
    gap: 0;
    color: var(--blue);
    padding-bottom: 4px;
    font-size: .78rem;
    font-weight: 900;
}

.subscription-lifetime .subscription-price > span {
    color: #168844;
}

.subscription-price small {
    color: var(--muted);
    font-size: .58rem;
    font-weight: 750;
}

.compact-plan-list {
    display: grid;
    gap: 9px;
    margin: 0 0 23px;
    padding: 0;
    list-style: none;
}

.compact-plan-list li {
    position: relative;
    color: var(--text);
    padding-left: 26px;
    font-size: .8rem;
    line-height: 1.45;
}

.compact-plan-list li::before {
    position: absolute;
    top: 1px;
    left: 0;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: rgba(37,211,102,.12);
    color: #168844;
    content: "✓";
    font-size: .55rem;
    font-weight: 900;
}

.subscription-body > .button {
    margin-top: auto;
}

.subscription-ribbon {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(5,25,17,.84);
    color: #8fffb8;
    padding: 7px 11px;
    box-shadow: 0 9px 24px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    font-size: .58rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.home-comparison-card {
    overflow: hidden;
    margin-top: 26px;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: var(--card);
    box-shadow: var(--shadow);
}

.home-comparison-head {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding: 22px 26px;
}

.home-comparison-head .eyebrow {
    margin-bottom: 7px;
}

.home-comparison-head h3 {
    margin: 0;
}

.compact-comparison-wrap {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.home-comparison-table th,
.home-comparison-table td {
    padding: 14px 18px;
    font-size: .76rem;
}

.pricing-plans-heading {
    max-width: 780px;
}

.subscription-grid-detail .subscription-body > p {
    min-height: 86px;
}

.subscription-feature-block {
    margin-bottom: 24px;
}

.subscription-feature-block h4 {
    margin-bottom: 12px;
    color: var(--ink);
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.detailed-plan-list {
    margin-bottom: 0;
}

.pricing-external-note {
    display: grid;
    grid-template-columns: 30px minmax(0,1fr);
    gap: 11px;
    align-items: start;
    max-width: 980px;
    margin: 24px auto 0;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--bg-alt);
    padding: 14px 16px;
}

.pricing-external-note > span {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-soft);
    color: var(--blue);
    font-weight: 900;
}

.pricing-external-note p {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.55;
}

/* Custom-system form: remove sticky overlap and improve desktop density ------ */
.systems-page-v3 .hero-dashboard {
    min-height: 390px;
    perspective: 1300px;
}

.systems-page-v3 .dashboard-window {
    inset: 20px 0 8px;
    transform: rotateY(-3deg) rotateX(1deg);
    transform-origin: center left;
}

.custom-quote-section {
    overflow: hidden;
}

.custom-quote-section .container {
    width: min(1240px, calc(100% - 48px));
}

.custom-quote-layout {
    position: relative;
    isolation: isolate;
    gap: 24px !important;
}

.custom-quote-intro {
    position: relative !important;
    z-index: 1;
    top: auto !important;
    align-self: auto !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr) !important;
    gap: 14px 34px !important;
    border-radius: 24px;
    padding: clamp(25px, 3.4vw, 40px);
}

.custom-quote-intro h2 {
    font-size: clamp(1.75rem, 2.7vw, 2.55rem) !important;
    line-height: 1.12;
}

.custom-quote-intro > p {
    font-size: .92rem;
    line-height: 1.6;
}

.custom-quote-intro .quote-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.quote-benefit {
    min-height: 72px;
    padding: 11px 12px;
}

.quote-logo-cloud {
    padding: 14px;
}

.quote-logo-row {
    gap: 7px;
}

.brand-logo-dot {
    width: 36px;
    height: 36px;
}

.system-quote-form {
    position: relative;
    z-index: 1;
    margin-top: 0 !important;
    border-radius: 25px;
    transform: none !important;
}

.quote-form-header {
    padding: 28px clamp(25px, 3.5vw, 45px) 23px;
}

.quote-form-header h3 {
    font-size: clamp(1.5rem, 2.45vw, 2.15rem);
}

.quote-progress {
    padding: 17px clamp(25px, 3.5vw, 45px) 12px;
}

.quote-progress-track {
    margin-inline: clamp(25px, 3.5vw, 45px);
}

.quote-step {
    padding: clamp(28px, 4vw, 46px) clamp(25px, 4vw, 52px) clamp(31px, 4vw, 48px);
}

.quote-step-heading {
    margin-bottom: 27px;
}

.quote-step-heading h4 {
    font-size: clamp(1.22rem, 1.9vw, 1.62rem);
}

.solution-logo-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 11px;
}

.compact-logo-grid {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 9px;
}

.solution-choice > label {
    min-height: 112px;
    padding: 15px;
}

.compact-choice > label {
    min-height: 78px;
    padding: 11px;
}

.system-quote-form input,
.system-quote-form select,
.system-quote-form textarea {
    min-height: 50px;
}

.system-quote-form textarea {
    min-height: 145px;
}

.quote-step-actions {
    margin-top: 27px;
}

.quote-live-summary {
    margin-top: 22px;
    padding: 18px;
}

/* Compact, comfortable diagnostic on desktop -------------------------------- */
.diagnostic-page-v2 {
    padding-bottom: 76px;
}

.diagnostic-hero-v2 {
    padding: calc(var(--header-height) + 38px) 0 36px;
}

.diagnostic-hero-inner {
    gap: 28px;
}

.diagnostic-hero-inner h1 {
    margin: 12px 0 9px;
    font-size: clamp(2.15rem, 3.75vw, 3.45rem);
    line-height: 1.08;
}

.diagnostic-hero-inner p {
    max-width: 680px;
    font-size: .96rem;
    line-height: 1.62;
}

.diagnostic-hero-chips span {
    min-width: 106px;
    border-radius: 15px;
    padding: 11px 12px;
}

.diagnostic-shell-v2 {
    width: min(1120px, calc(100% - 48px));
    grid-template-columns: 228px minmax(0,1fr);
    border-radius: 25px;
}

.diagnostic-side-v2 {
    min-height: 535px;
    padding: 23px 20px;
}

.diagnostic-progress-ring {
    width: 122px;
    height: 122px;
    margin: 34px auto 28px;
}

.diagnostic-progress-ring::before {
    width: 102px;
    height: 102px;
}

.diagnostic-progress-ring strong {
    font-size: 1.45rem;
}

.diagnostic-question-panel {
    min-height: 535px;
    padding: clamp(30px, 4.3vw, 48px);
}

.diagnostic-question-head {
    grid-template-columns: 54px minmax(0,1fr);
    gap: 16px;
}

.diagnostic-question-index {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: .95rem;
}

.diagnostic-question-head h2 {
    margin: 5px 0 6px;
    font-size: clamp(1.38rem, 2.25vw, 2rem);
}

.diagnostic-page-v2 .multi-hint {
    margin: 15px 0 0 70px;
}

.diagnostic-page-v2 .diagnostic-options {
    gap: 11px;
    margin-top: 26px;
}

.diagnostic-page-v2 .diagnostic-option {
    min-height: 70px;
    grid-template-columns: 41px minmax(0,1fr) 23px;
    gap: 10px;
    border-radius: 15px;
    padding: 12px 13px;
}

.diagnostic-option-icon {
    width: 39px;
    height: 39px;
    border-radius: 12px;
}

.diagnostic-option-copy {
    font-size: .8rem;
    line-height: 1.32;
}

.diagnostic-page-v2 .diagnostic-actions {
    margin-top: 28px;
}

.diagnostic-page-v2 .diagnostic-actions .button {
    min-height: 45px;
}

.diagnostic-result-v2 {
    min-height: 535px;
    padding: clamp(30px, 4vw, 48px);
}

.diagnostic-shell-v2.is-result-mode {
    grid-template-columns: 218px minmax(0,1fr);
}

.diagnostic-shell-v2.is-result-mode .diagnostic-side-v2 {
    min-height: 650px;
}

/* Keep mockups modern and contained ----------------------------------------- */
.business-phone,
.tiktok-app-phone,
.contact-network-visual {
    filter: drop-shadow(0 28px 38px rgba(2,18,48,.18));
}

.business-demo-stage,
.tiktok-interface-visual,
.hero-visual,
.system-visual {
    isolation: isolate;
}

@media (min-width: 1180px) {
    .diagnostic-page-v2 .diagnostic-options:has(> :nth-child(7)) {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .diagnostic-page-v2 .diagnostic-options:has(> :nth-child(5)):not(:has(> :nth-child(7))) {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 1100px) {
    .section {
        padding: 78px 0;
    }

    .hero-grid {
        grid-template-columns: minmax(0,1fr) minmax(360px,.85fr);
    }

    .channel-logo-grid {
        grid-template-columns: repeat(6, minmax(0,1fr));
    }

    .channel-logo-card,
    .channel-logo-card:nth-child(5) {
        grid-column: span 2;
    }

    .channel-logo-card:nth-child(7) {
        grid-column: 3 / span 2;
    }

    .product-showcase-grid {
        grid-template-columns: 1fr;
    }

    .product-showcase-copy {
        max-width: 760px;
    }

    .product-showcase-visual {
        width: min(880px,100%);
        margin-inline: auto;
    }

    .custom-quote-intro {
        grid-template-columns: 1fr !important;
    }

    .custom-quote-intro > .eyebrow,
    .custom-quote-intro > h2,
    .custom-quote-intro > p,
    .custom-quote-intro .quote-benefits,
    .custom-quote-intro .quote-logo-cloud,
    .custom-quote-intro .quote-direct-wa {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .custom-quote-intro .quote-benefits {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .compact-logo-grid {
        grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    }
}

@media (max-width: 900px) {
    h1 {
        font-size: clamp(2.05rem, 7vw, 3.35rem);
    }

    h2 {
        font-size: clamp(1.65rem, 5vw, 2.38rem);
    }

    .hero-grid,
    .page-hero-grid {
        grid-template-columns: 1fr;
    }

    .channel-ecosystem-heading {
        grid-template-columns: 54px minmax(0,1fr);
        text-align: left;
    }

    .channel-logo-grid {
        grid-template-columns: repeat(4, minmax(0,1fr));
    }

    .channel-logo-card,
    .channel-logo-card:nth-child(5),
    .channel-logo-card:nth-child(7) {
        grid-column: span 2;
    }

    .channel-logo-card:last-child {
        grid-column: 2 / span 2;
    }

    .subscription-grid {
        grid-template-columns: 1fr;
        max-width: 680px;
        margin-inline: auto;
    }

    .subscription-body > p,
    .subscription-grid-detail .subscription-body > p {
        min-height: 0;
    }

    .home-comparison-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnostic-shell-v2,
    .diagnostic-shell-v2.is-result-mode {
        width: min(100% - 36px, 1120px);
    }
}

@media (max-width: 760px) {
    .section {
        padding: 68px 0;
    }

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

    .channel-logo-card {
        min-height: 102px;
    }

    .product-showcase-steps article {
        grid-template-columns: 39px minmax(0,1fr);
    }

    .showcase-screen-frame {
        transform: none;
        border-radius: 24px;
    }

    .showcase-live-badge {
        left: 0;
    }

    .showcase-sync-badge {
        right: 0;
    }

    .subscription-card {
        border-radius: 24px;
    }

    .subscription-visual {
        aspect-ratio: 16 / 9;
    }

    .subscription-ribbon {
        top: 12px;
        right: 12px;
    }

    .compact-logo-grid,
    .solution-logo-grid {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }

    .custom-quote-intro .quote-benefits {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .container,
    .custom-quote-section .container {
        width: min(100% - 28px, var(--max-width));
    }

    .channel-ecosystem-heading {
        grid-template-columns: 46px minmax(0,1fr);
        gap: 12px;
    }

    .channel-flow-mark {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .channel-logo-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 9px;
    }

    .channel-logo-card,
    .channel-logo-card:nth-child(5),
    .channel-logo-card:nth-child(7),
    .channel-logo-card:last-child {
        grid-column: span 1;
        min-height: 120px;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 8px;
        padding: 14px;
    }

    .channel-logo-icon {
        width: 43px;
        height: 43px;
    }

    .channel-logo-copy strong {
        white-space: normal;
    }

    .product-showcase-visual {
        padding-inline: 0;
    }

    .showcase-live-badge,
    .showcase-sync-badge {
        position: static;
        width: max-content;
        max-width: 100%;
        margin-top: 10px;
    }

    .subscription-body {
        padding: 23px 20px 24px;
    }

    .subscription-price strong {
        font-size: 2.35rem;
    }

    .home-comparison-head {
        padding: 20px;
    }

    .home-comparison-head .button {
        width: 100%;
    }

    .home-comparison-table th,
    .home-comparison-table td {
        min-width: 140px;
    }

    .custom-quote-intro {
        padding: 24px 19px;
    }

    .diagnostic-hero-v2 {
        padding-top: calc(var(--header-height) + 25px);
    }
}

/* Diagnostic responsive repair after v3 desktop overrides ------------------ */
@media (max-width: 900px) {
    .diagnostic-shell-v2,
    .diagnostic-shell-v2.is-result-mode {
        grid-template-columns: 1fr;
    }

    .diagnostic-side-v2,
    .diagnostic-shell-v2.is-result-mode .diagnostic-side-v2 {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.1);
        padding: 18px 21px;
    }

    .diagnostic-side-v2 {
        display: grid;
        grid-template-columns: auto 88px minmax(150px,1fr);
        gap: 17px;
        align-items: center;
    }

    .diagnostic-progress-ring {
        width: 82px;
        height: 82px;
        margin: 0;
    }

    .diagnostic-progress-ring::before {
        width: 67px;
        height: 67px;
    }

    .diagnostic-progress-ring strong {
        font-size: .98rem;
    }

    .diagnostic-progress-ring small {
        font-size: .4rem;
    }

    .diagnostic-side-security {
        display: none;
    }

    .diagnostic-main-v2 {
        width: 100%;
        min-width: 0;
    }

    .diagnostic-question-panel,
    .diagnostic-result-v2 {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .diagnostic-side-v2 {
        grid-template-columns: auto 78px minmax(0,1fr);
        gap: 13px;
    }

    .diagnostic-question-panel,
    .diagnostic-result-v2 {
        width: 100%;
        padding: 27px 21px;
    }

    .diagnostic-question-head {
        grid-template-columns: 48px minmax(0,1fr);
        gap: 13px;
    }

    .diagnostic-question-index {
        width: 47px;
        height: 47px;
        border-radius: 14px;
    }

    .diagnostic-question-head h2 {
        font-size: clamp(1.28rem, 5.6vw, 1.7rem);
    }

    .diagnostic-page-v2 .multi-hint {
        margin-left: 0;
    }

    .diagnostic-page-v2 .diagnostic-options {
        grid-template-columns: 1fr;
        margin-top: 23px;
    }

    .diagnostic-page-v2 .diagnostic-actions {
        margin-top: 24px;
    }
}

@media (max-width: 540px) {
    .diagnostic-shell-v2,
    .diagnostic-shell-v2.is-result-mode {
        width: min(100% - 28px, 1120px);
        border-radius: 21px;
    }

    .diagnostic-side-v2,
    .diagnostic-shell-v2.is-result-mode .diagnostic-side-v2 {
        grid-template-columns: auto minmax(0,1fr);
        gap: 12px;
        padding: 16px 17px;
    }

    .diagnostic-progress-ring {
        display: none;
    }

    .diagnostic-brand-card small {
        display: none;
    }

    .diagnostic-side-meta {
        min-width: 0;
        gap: 6px;
    }

    .diagnostic-stage-pill {
        justify-self: start;
        padding: 6px 9px;
    }

    .diagnostic-question-panel,
    .diagnostic-result-v2 {
        padding: 25px 18px 28px;
    }

    .diagnostic-page-v2 .diagnostic-option {
        min-height: 72px;
        grid-template-columns: 39px minmax(0,1fr) 23px;
        gap: 9px;
        padding: 12px;
    }

    .diagnostic-option-icon {
        width: 38px;
        height: 38px;
    }

    .diagnostic-option-copy {
        font-size: .77rem;
    }

    .diagnostic-page-v2 .diagnostic-actions {
        flex-direction: column-reverse;
    }

    .diagnostic-page-v2 .diagnostic-actions .button {
        width: 100%;
    }
}

/* Preserve comfortable system selections on narrow phones ----------------- */
@media (max-width: 540px) {
    .solution-logo-grid {
        grid-template-columns: 1fr !important;
    }

    .solution-choice > label {
        min-height: 84px;
        grid-template-columns: 44px minmax(0,1fr) 24px;
        padding: 13px 14px;
    }

    .solution-choice strong {
        font-size: .72rem;
    }

    .solution-choice small {
        font-size: .6rem;
        line-height: 1.42;
    }
}

/* The quote wizard must never overlap while reveal observers initialize. */
.systems-page-v3 .custom-quote-intro.reveal,
.systems-page-v3 .system-quote-form.reveal {
    opacity: 1;
    transform: none;
}

.systems-page-v3 .custom-quote-section {
    scroll-margin-top: calc(var(--header-height) + 22px);
}