/* LIOS public-site base layer: shared design tokens, resets and
   components used by marketing + auth + account pages together
   (see MARKETING/AUTH/ACCOUNT split note in AGENT_CONTEXT.md). */

:root {
    color-scheme: dark;
    --bg: #050506;
    --bg-raised: #0b0b0d;
    --bg-soft: #141417;
    --ink: #f7f7f2;
    --ink-strong: #ffffff;
    --muted: rgba(247, 247, 242, 0.68);
    --muted-2: rgba(247, 247, 242, 0.48);
    --line: rgba(255, 255, 255, 0.14);
    --line-strong: rgba(255, 255, 255, 0.28);
    --glass: rgba(255, 255, 255, 0.075);
    --glass-strong: rgba(255, 255, 255, 0.14);
    --paper: #ffffff;
    --paper-soft: #e6e6e6;
    --paper-ink: #070708;
    --accent: #ffffff;
    --accent-ink: #060607;
    --radius-xl: 36px;
    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 14px;
    --shell: min(1360px, calc(100% - 32px));
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.22, 1, 0.36, 1);
    --font:
        "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
        "Segoe UI", system-ui, sans-serif;
    --mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
    --growth: #3ddc91;
    --growth-strong: #1fbf75;
    --growth-ink: #04170e;
    --growth-soft: rgba(61, 220, 145, 0.16);
    --growth-line: rgba(61, 220, 145, 0.46);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg);
    scroll-behavior: smooth;
}

body.sales-page {
    margin: 0;
    min-height: 100dvh;
    color: var(--ink);
    font-family: var(--font);
    background:
        radial-gradient(
            circle at 9% 4%,
            rgba(255, 255, 255, 0.18),
            transparent 25rem
        ),
        radial-gradient(
            circle at 88% 12%,
            rgba(255, 255, 255, 0.12),
            transparent 30rem
        ),
        radial-gradient(
            circle at 55% 52%,
            rgba(255, 255, 255, 0.05),
            transparent 42rem
        ),
        linear-gradient(180deg, #080809 0%, #050506 42%, #0c0c0e 100%);
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
    overflow-x: clip;
}

body.sales-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(
        circle at 50% 20%,
        black 0 18%,
        transparent 72%
    );
}

body.sales-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    opacity: 0.28;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 0.18),
            transparent 18rem
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08),
            transparent 18%,
            transparent 82%,
            rgba(255, 255, 255, 0.08)
        );
}

/* P2.14 (LIOS_FULL_AUDIT_2026-07-10.md): reveal used to animate
   filter: blur() alongside opacity/transform - blur forces a full repaint
   of the blurred region every frame and cannot be cheaply composited like
   opacity/transform, so it is dropped here; opacity+transform alone still
   reads as the same "settle into place" reveal. */
body.js-enabled [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 42px, 0) scale(0.985);
    transition:
        opacity 900ms var(--ease),
        transform 900ms var(--ease);
}

body.js-enabled [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

body.js-enabled [data-reveal]:nth-of-type(2n).is-visible {
    transition-delay: 80ms;
}

body.js-enabled [data-reveal]:nth-of-type(3n).is-visible {
    transition-delay: 140ms;
}

a {
    color: inherit;
}

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

button,
a,
input,
textarea,
select,
summary {
    outline: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--growth);
    outline-offset: 3px;
}

[hidden] {
    display: none !important;
}

button {
    border: 0;
}

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

.sales-logo-word {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
    padding: 7px 14px;
    border-radius: 12px;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.016)
        ),
        rgba(255, 255, 255, 0.02);
    transform: perspective(600px) rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition:
        border-color 320ms var(--ease),
        box-shadow 320ms var(--ease),
        transform 420ms var(--spring);
}

.sales-logo-word::after {
    content: "";
    position: absolute;
    inset: -40% -60%;
    z-index: 1;
    background: linear-gradient(
        100deg,
        transparent 0 42%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 58% 100%
    );
    transform: translateX(-60%);
    animation: lios-wordmark-sheen 5200ms ease-in-out infinite;
    pointer-events: none;
}

@keyframes lios-wordmark-sheen {
    0%,
    18% {
        transform: translateX(-60%);
    }
    55%,
    100% {
        transform: translateX(60%);
    }
}

/* Brand mark lives at the end of this file (search "focus lock") so it
   always wins the cascade; this spot only keeps the reduced-motion rule
   for the wordmark plate sheen. */
@media (prefers-reduced-motion: reduce) {
    .sales-logo-word::after {
        animation: none !important;
        display: none;
    }

    .sales-logo-word {
        transition: none !important;
        transform: none !important;
    }
}

.sales-button {
    min-height: 54px;
    padding: 8px 10px 8px 22px;
    border: 1px solid transparent;
    font-weight: 760;
    font-size: 0.98rem;
}

.sales-button i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-style: normal;
    transition:
        transform 420ms var(--spring),
        background 420ms var(--ease);
}

.sales-button-primary {
    color: var(--paper-ink);
    background: var(--paper);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.88),
        inset 0 -12px 28px rgba(5, 5, 6, 0.08),
        0 20px 70px rgba(255, 255, 255, 0.1);
}

.sales-button-primary i {
    color: var(--paper);
    background: var(--paper-ink);
}

.sales-button-secondary {
    color: var(--ink);
    border-color: rgba(255, 255, 255, 0.16);
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.1),
            rgba(255, 255, 255, 0.03)
        ),
        rgba(8, 8, 9, 0.82);
}

.sales-button-secondary i {
    color: var(--paper-ink);
    background: var(--paper);
}

.sales-button:hover i {
    transform: translate(2px, -1px) scale(1.04);
}

/* Public site v5 polish: glossy monochrome CRM landing */
body.sales-page {
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(255, 255, 255, 0.22),
            transparent 30rem
        ),
        radial-gradient(
            circle at 8% 16%,
            rgba(255, 255, 255, 0.12),
            transparent 26rem
        ),
        radial-gradient(
            circle at 92% 22%,
            rgba(255, 255, 255, 0.1),
            transparent 28rem
        ),
        linear-gradient(180deg, #080809 0%, #030304 48%, #0a0a0b 100%);
}

body.sales-page::before {
    opacity: 0.16;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(
        circle at 50% 20%,
        black 0 15%,
        transparent 74%
    );
}

body.sales-page::after {
    opacity: 0.42;
    background:
        radial-gradient(
            circle at 50% 4%,
            rgba(255, 255, 255, 0.26),
            transparent 18rem
        ),
        radial-gradient(
            circle at 50% 62%,
            rgba(255, 255, 255, 0.08),
            transparent 34rem
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.12),
            transparent 24%,
            transparent 76%,
            rgba(255, 255, 255, 0.1)
        );
    transform-origin: center;
    animation: page-breathe 14000ms var(--ease) infinite alternate;
}

.sales-button-secondary {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.04)
        ),
        rgba(255, 255, 255, 0.055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 18px 70px rgba(0, 0, 0, 0.22);
}

@keyframes page-breathe {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.04) translate3d(0, -10px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sales-page::after {
        animation: none !important;
    }
}

/* Public site v6: minimal hero, glossy CRM graphs and product decision card */
body.sales-page {
    background:
        radial-gradient(
            ellipse at 50% -18%,
            rgba(255, 255, 255, 0.14),
            transparent 34rem
        ),
        radial-gradient(
            ellipse at 50% 48%,
            rgba(255, 255, 255, 0.055),
            transparent 38rem
        ),
        linear-gradient(180deg, #070708 0%, #030304 44%, #09090a 100%);
}

body.sales-page::before {
    opacity: 0.12;
    background-size: 104px 104px;
    mask-image: radial-gradient(
        ellipse at 50% 18%,
        black 0 12%,
        transparent 70%
    );
}

body.sales-page::after {
    opacity: 0.22;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06),
            transparent 18%,
            transparent 82%,
            rgba(255, 255, 255, 0.052)
        ),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255, 255, 255, 0.12),
            transparent 18rem
        );
}

body.sales-page {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 16rem),
        radial-gradient(
            ellipse at 50% -30%,
            rgba(255, 255, 255, 0.1),
            transparent 30rem
        ),
        linear-gradient(180deg, #050506 0%, #020203 46%, #09090a 100%);
}

body.sales-page::before {
    opacity: 0.075;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px);
    background-size: 118px 118px;
    mask-image: linear-gradient(
        180deg,
        transparent,
        black 12%,
        black 60%,
        transparent
    );
}

body.sales-page::after {
    opacity: 0.16;
    background:
        linear-gradient(
            100deg,
            transparent 8%,
            rgba(255, 255, 255, 0.08) 22%,
            transparent 38%,
            transparent 64%,
            rgba(255, 255, 255, 0.06) 82%,
            transparent
        ),
        radial-gradient(
            ellipse at 50% -8%,
            rgba(255, 255, 255, 0.16),
            transparent 20rem
        );
    animation: chrome-breathe 18000ms var(--ease) infinite alternate;
}

@keyframes chrome-breathe {
    from {
        transform: scale(1) translate3d(0, 0, 0);
    }
    to {
        transform: scale(1.03) translate3d(0, -6px, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sales-page::after {
        animation: none !important;
    }
}

/* Public site v8: refined black glass sales finish */
body.sales-page {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 14rem),
        radial-gradient(
            ellipse at 50% -24%,
            rgba(255, 255, 255, 0.072),
            transparent 32rem
        ),
        linear-gradient(180deg, #050506 0%, #020203 44%, #080809 100%);
}

body.sales-page::before {
    opacity: 0.055;
    background-size: 132px 132px;
}

body.sales-page::after {
    opacity: 0.095;
    background:
        linear-gradient(
            104deg,
            transparent 10%,
            rgba(255, 255, 255, 0.05) 26%,
            transparent 42%,
            transparent 62%,
            rgba(255, 255, 255, 0.04) 78%,
            transparent 92%
        ),
        radial-gradient(
            ellipse at 50% -8%,
            rgba(255, 255, 255, 0.09),
            transparent 19rem
        );
}

/* Public site v10: balanced Lead Intelligence composition */
body.js-enabled [data-reveal] {
    transform: translate3d(0, 24px, 0) scale(0.992);
    transition:
        opacity 680ms var(--ease),
        transform 680ms var(--ease);
}

body.sales-page {
    background:
        radial-gradient(
            ellipse at 76% 8%,
            rgba(255, 255, 255, 0.05),
            transparent 28rem
        ),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 13rem),
        linear-gradient(180deg, #050506 0%, #020203 48%, #070708 100%);
}

body.sales-page::before {
    opacity: 0.035;
    background-size: 154px 154px;
    mask-image: linear-gradient(
        180deg,
        transparent,
        black 16%,
        black 54%,
        transparent
    );
}

body.sales-page::after {
    opacity: 0.06;
    background:
        radial-gradient(
            ellipse at 68% 7%,
            rgba(255, 255, 255, 0.14),
            transparent 18rem
        ),
        linear-gradient(
            104deg,
            transparent 12%,
            rgba(255, 255, 255, 0.04) 30%,
            transparent 48%,
            transparent 70%,
            rgba(255, 255, 255, 0.03) 86%,
            transparent
        );
}

.auth-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: var(--shell);
    max-width: 1360px;
    margin: 0 auto;
    padding: 22px 0;
}

.auth-topbar-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 4px 10px 4px 4px;
    border-radius: 14px;
    font-weight: 780;
    font-size: 1.05rem;
    letter-spacing: -0.04em;
    text-decoration: none;
    color: var(--ink-strong);
    transition:
        background 260ms var(--ease),
        transform 260ms var(--ease);
}

.auth-topbar-logo:hover {
    background: var(--growth-soft);
    transform: translateY(-1px);
}

.auth-topbar-logo:hover .sales-logo-word,
.auth-topbar-logo:focus-visible .sales-logo-word {
    border-color: var(--growth-line);
    box-shadow: 0 0 24px var(--growth-soft);
}

.auth-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 8px;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 640;
    text-decoration: none;
    transition: color 240ms var(--ease);
}

.auth-topbar-link:hover {
    color: var(--growth);
}

.auth-topbar-link.is-locked {
    color: var(--muted-2);
    font-style: italic;
}

.auth-topbar-link.is-locked:hover {
    color: var(--muted);
}

.auth-submit {
    width: 100%;
    min-height: 52px;
    margin-top: 6px;
    border-radius: 14px;
    background: var(--paper);
    color: var(--paper-ink);
    font-size: 0.96rem;
    font-weight: 760;
    cursor: pointer;
    transition:
        transform 200ms var(--ease),
        box-shadow 200ms var(--ease),
        opacity 200ms var(--ease);
    box-shadow: 0 18px 50px rgba(255, 255, 255, 0.1);
}

.auth-submit:hover {
    transform: translateY(-1px);
}

.auth-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.auth-message {
    display: none;
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 0.86rem;
    line-height: 1.5;
}

.auth-message.is-visible {
    display: block;
}

.auth-message.is-error {
    background: rgba(143, 29, 29, 0.22);
    border: 1px solid rgba(226, 166, 166, 0.35);
    color: #ffc9c9;
}

.auth-message.is-success {
    background: rgba(60, 140, 100, 0.2);
    border: 1px solid rgba(150, 220, 180, 0.35);
    color: #bdf2d3;
}

/* Page-transition: lightweight cross-fade for internal navigations so
   secondary pages don't feel like a hard, static jump. Falls back to a
   normal navigation with no JS work when the browser has no support or the
   visitor prefers reduced motion. */
@keyframes page-enter {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

body.page-transitions-ready {
    animation: page-enter 480ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    body.page-transitions-ready {
        animation: none;
    }
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
}

::view-transition-old(root) {
    animation-name: page-fade-out;
}

::view-transition-new(root) {
    animation-name: page-fade-in;
}

@keyframes page-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================================
   LIOS responsive hardening v20
   Final cascade layer for desktop, tablet, and mobile devices.
   ============================================================ */
html,
body.sales-page {
    max-width: 100%;
    overflow-x: hidden;
}

:where(body.sales-page *),
:where(body.sales-page *::before),
:where(body.sales-page *::after) {
    min-width: 0;
}

body.sales-page img,
body.sales-page svg,
body.sales-page video,
body.sales-page canvas {
    max-width: 100%;
}

body.sales-page h1,
body.sales-page h2,
body.sales-page h3,
body.sales-page p,
body.sales-page li,
body.sales-page a,
body.sales-page button {
    overflow-wrap: break-word;
}

.auth-topbar-logo .sales-logo-word {
    min-width: max-content;
    overflow: visible;
}

.auth-topbar-logo .sales-logo-word::after {
    display: none;
}
@media (max-width: 520px) {
    .auth-topbar {
        width: min(100% - 16px, 1360px);
        padding: 18px 0;
    }

    .auth-topbar-logo {
        padding-right: 6px;
    }

    .auth-topbar-link {
        min-height: 38px;
        padding: 0 4px;
        font-size: 0.82rem;
        text-align: right;
    }
}