:root {
    --brand: #4f46e5;
    --accent: #14b8a6;
    --ink: #101828;
    --text: #475467;
    --muted: #667085;
    --line: #e5eaf1;
    --soft: #f8fafc;
    --surface: #ffffff;
    --footer: #0f172a;
    --shadow-soft: 0 14px 36px rgba(15, 23, 42, .07);
    --shadow-card: 0 18px 45px rgba(15, 23, 42, .08);
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body.marketing-page,
body.public-auth-page {
    margin: 0;
    color: var(--ink);
    background: var(--surface);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

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

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

.site-container {
    width: min(1120px, calc(100% - 44px));
    margin: 0 auto;
}

.section {
    position: relative;
    overflow: hidden;
    padding: 76px 0;
}

.section-muted {
    background: var(--soft);
}

.section-muted::before,
.hero-section::before,
.about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg width='220' height='220' viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%234f46e5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.14'%3E%3Cpath d='M38 52h22l8 14H30l8-14Z'/%3E%3Cpath d='M43 66v24m12-24v24M32 90h34'/%3E%3Cpath d='M154 44a17 17 0 1 0 0 34 17 17 0 0 0 0-34Z'/%3E%3Cpath d='M154 54v14m-7-7h14'/%3E%3Cpath d='M52 154h42v28H52z'/%3E%3Cpath d='M61 154v-12h24v12'/%3E%3Cpath d='M148 146l24 24m0-24-24 24'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 220px 220px;
    animation: servicePatternDrift 34s linear infinite;
}

.hero-section::after,
.app-experience-section::after,
.cta-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 14%, transparent), transparent 66%);
    filter: blur(4px);
    opacity: .62;
    animation: softAuraMove 14s ease-in-out infinite;
}

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

.section-heading.centered {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.split-heading {
    display: grid;
    grid-template-columns: 1fr .65fr;
    align-items: end;
    gap: 56px;
}

.eyebrow,
.section-kicker,
.cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--brand);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.eyebrow {
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--brand) 14%, #ffffff);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 7%, #ffffff);
    font-size: 13px;
    text-transform: none;
}

.hero-copy h1,
.section-heading h2,
.about-copy h2,
.cta-card h2,
.auth-visual-copy h1,
.auth-heading h2 {
    color: var(--ink);
    letter-spacing: -.03em;
}

.hero-copy h1 {
    max-width: 600px;
    margin: 20px 0 18px;
    font-size: clamp(40px, 4.2vw, 58px);
    line-height: 1.06;
}

.hero-copy h1 span {
    display: block;
    color: var(--brand);
}

.section-heading h2,
.about-copy h2 {
    margin: 11px 0 13px;
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.16;
}

.hero-lead,
.section-heading p,
.about-copy > p,
.cta-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.hero-lead {
    max-width: 650px;
    font-size: 18px;
}

.btn,
.store-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 750;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.btn {
    min-height: 43px;
    padding: 0 18px;
}

.btn:hover,
.store-badge:hover {
    transform: translateY(-1px);
}

.btn-primary {
    color: #ffffff;
    background: var(--brand);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand) 22%, transparent);
}

.btn-primary:hover {
    color: #ffffff;
}

.btn-ghost,
.btn-soft {
    color: #344054;
    background: #ffffff;
    border-color: #d8dee8;
}

.btn-soft {
    box-shadow: var(--shadow-soft);
}

.btn-lg {
    min-height: 52px;
    padding: 0 22px;
    border-radius: 14px;
    font-size: 15px;
}

.btn-white {
    color: var(--brand);
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(23, 29, 57, .18);
}

.store-badge {
    min-height: 54px;
    padding: 8px 16px;
    color: #ffffff;
    background: #0b0f17;
    border-color: rgba(255, 255, 255, .12);
    white-space: nowrap;
}

.store-badge:hover {
    color: #ffffff;
    background: #05070b;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .18);
}

.store-badge > i {
    width: 28px;
    font-size: 27px;
    line-height: 1;
    text-align: center;
}

.store-badge span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.02;
}

.store-badge small {
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    opacity: .72;
}

.store-badge strong {
    margin-top: 4px;
    font-size: 17px;
    font-weight: 760;
    letter-spacing: -.02em;
}

.store-badge-nav {
    min-height: 43px;
    padding: 6px 12px;
    border-radius: 12px;
}

.store-badge-nav > i {
    width: 21px;
    font-size: 20px;
}

.store-badge-nav strong {
    font-size: 14px;
}

.store-badge-hero {
    min-height: 58px;
    padding: 9px 18px;
}

.store-badge-light {
    color: #0f172a;
    background: #ffffff;
    border-color: rgba(255, 255, 255, .74);
}

.store-badge-light:hover {
    color: #0f172a;
    background: #ffffff;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid #eef2f7;
    backdrop-filter: blur(16px);
}

.nav-wrap {
    display: flex;
    align-items: center;
    gap: 30px;
    height: 66px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

.site-brand-logo {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    overflow: hidden;
    border-radius: 10px;
    background: #0f172a;
}

.site-brand-logo img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
}

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

.site-nav a {
    color: var(--text);
    font-size: 13px;
    font-weight: 650;
    transition: color .2s ease;
}

.site-nav a:hover {
    color: var(--brand);
}

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

.mobile-nav-toggle {
    display: none;
    padding: 9px;
    border: 0;
    color: #344054;
    background: transparent;
    font-size: 20px;
}

.hero-section {
    position: relative;
    overflow: hidden;
    padding: 70px 0 58px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 92%);
}

.hero-section::after {
    top: 90px;
    right: -160px;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    align-items: center;
    gap: 64px;
}

.hero-actions,
.hero-store-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 31px;
}

.app-availability-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    color: #667085;
    font-size: 13px;
    font-weight: 600;
}

.app-availability-note i {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, #ffffff);
}

.hero-proof {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 34px;
}

.proof-avatars {
    display: flex;
    padding-left: 8px;
}

.proof-avatars span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    margin-left: -8px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    color: #344054;
    background: #e7ecf5;
    font-size: 11px;
    font-weight: 800;
}

.proof-avatars span:nth-child(2) {
    color: #087f72;
    background: color-mix(in srgb, var(--accent) 18%, #ffffff);
}

.proof-avatars span:nth-child(3) {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, #ffffff);
}

.hero-proof strong,
.hero-proof small {
    display: block;
}

.hero-proof strong {
    font-size: 13px;
}

.hero-proof small {
    margin-top: 3px;
    color: #7b8794;
    font-size: 12px;
}

.hero-visual-wrap {
    position: relative;
}

.app-hero-stage {
    position: relative;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 13%, var(--line));
    border-radius: 22px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    isolation: isolate;
}

.app-poster-card {
    position: absolute;
    inset: 24px;
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.app-poster-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.device-stack {
    position: absolute;
    inset: 0;
    perspective: 1100px;
}

.device {
    position: absolute;
    background: #0b1020;
    border: 7px solid #111827;
    box-shadow: var(--shadow-card);
}

.phone-device {
    width: 204px;
    height: 414px;
    overflow: hidden;
    border-radius: 34px;
}

.phone-front {
    top: 66px;
    left: 50%;
    z-index: 3;
    transform: translateX(-38%) rotate(4deg);
    animation: appFloat 5.8s ease-in-out infinite;
}

.phone-back {
    top: 102px;
    left: 66px;
    z-index: 2;
    opacity: .96;
    transform: rotate(-7deg) scale(.88);
    animation: appFloatBack 6.8s ease-in-out infinite;
}

.phone-notch {
    position: absolute;
    top: 7px;
    left: 50%;
    z-index: 4;
    width: 76px;
    height: 17px;
    border-radius: 0 0 12px 12px;
    background: #0b1020;
    transform: translateX(-50%);
}

.mock-screen {
    position: absolute;
    inset: 0;
    padding: 40px 16px 18px;
    color: #152033;
    background: linear-gradient(180deg, #ffffff, #f8faff);
}

.mock-brand {
    display: block;
    margin-bottom: 15px;
    color: var(--brand);
    font-size: 10px;
    font-weight: 850;
}

.mock-screen > strong {
    display: block;
    margin-bottom: 18px;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.mock-service-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin: 14px 0 24px;
}

.mock-service-row i {
    display: grid;
    height: 44px;
    place-items: center;
    border-radius: 12px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, #ffffff);
    font-size: 15px;
}

.mock-list-line {
    width: 72%;
    height: 9px;
    margin: 11px 0;
    border-radius: 999px;
    background: #e8edf6;
}

.mock-list-line.wide {
    width: 100%;
}

.mock-list-line.small {
    width: 46%;
}

.mock-hero-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 13px;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 72%, var(--accent)));
}

.mock-hero-tile i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, .17);
}

.mock-hero-tile span {
    font-size: 11px;
    font-weight: 750;
}

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

.mock-calendar span {
    display: grid;
    height: 35px;
    place-items: center;
    border-radius: 10px;
    color: #6b7585;
    background: #eef2f8;
    font-size: 10px;
    font-weight: 800;
}

.mock-calendar span.active {
    color: #ffffff;
    background: var(--brand);
}

.mock-cta {
    display: grid;
    height: 40px;
    margin-top: 20px;
    place-items: center;
    border-radius: 12px;
    color: #ffffff;
    background: #111827;
    font-size: 10px;
    font-weight: 800;
}

.desktop-device {
    right: 24px;
    bottom: 56px;
    z-index: 4;
    width: 274px;
    height: 178px;
    overflow: hidden;
    border-width: 5px;
    border-radius: 16px;
    transform: rotate(-3deg);
    animation: desktopFloat 7s ease-in-out infinite;
}

.desktop-topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 8px;
    background: #172033;
}

.desktop-topbar span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #64748b;
}

.desktop-body {
    display: grid;
    grid-template-columns: 38px 1fr;
    height: calc(100% - 18px);
    background: #ffffff;
}

.desktop-body aside,
.experience-desktop-layout aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 16px;
    color: #94a3b8;
    background: #111827;
    font-size: 8px;
}

.desktop-body .mock-main {
    padding: 15px;
}

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

.mock-stat-grid b {
    display: grid;
    height: 31px;
    place-items: center;
    border-radius: 8px;
    color: var(--brand);
    background: #eef2ff;
    font-size: 9px;
}

.mock-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 59px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 9px;
    background: linear-gradient(180deg, #f8faff, #eef2ff);
}

.mock-chart span {
    flex: 1;
    border-radius: 4px 4px 2px 2px;
    background: color-mix(in srgb, var(--brand) 65%, #9fb0ff);
}

.mock-chart span:nth-child(1) {
    height: 35%;
}

.mock-chart span:nth-child(2) {
    height: 62%;
}

.mock-chart span:nth-child(3) {
    height: 50%;
}

.mock-chart span:nth-child(4) {
    height: 80%;
}

.mock-chart span:nth-child(5) {
    height: 68%;
}

.floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
    padding: 13px 15px;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    animation: floatBadge 5.8s ease-in-out infinite;
}

.floating-card strong,
.floating-card small {
    display: block;
}

.floating-card strong {
    font-size: 12px;
}

.floating-card small {
    margin-top: 3px;
    color: #667085;
    font-size: 10px;
}

.floating-card-top {
    top: 38px;
    right: 30px;
}

.floating-card-bottom {
    bottom: 34px;
    left: 30px;
    animation-delay: .7s;
}

.float-icon,
.float-rating {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    font-weight: 800;
}

.float-icon {
    color: #ffffff;
    background: var(--accent);
}

.float-rating {
    color: #b54708;
    background: #fff7df;
    font-size: 13px;
}

.floating-card .fa-star {
    color: #f7b11b;
}

.stats-strip {
    border-top: 1px solid #eef1f5;
    border-bottom: 1px solid #eef1f5;
    background: #ffffff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 22px 0;
}

.stats-grid > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #e8edf3;
}

.stats-grid > div:last-child {
    border-right: 0;
}

.stats-grid strong {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.stats-grid span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
}

.app-experience-section {
    position: relative;
    overflow: hidden;
    padding-top: 96px;
    padding-bottom: 104px;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 48%, #ffffff 100%);
    isolation: isolate;
}

.app-experience-section::after {
    bottom: 120px;
    left: -180px;
}

.experience-navigation {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: -8px auto 30px;
}

.experience-tabs,
.experience-dots,
.experience-arrow-group,
.cta-store-badges,
.experience-store-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.experience-tabs {
    justify-content: center;
}

.experience-tab {
    position: relative;
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    gap: 8px;
    padding: 0 18px 0 11px;
    overflow: hidden;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
    color: #667085;
    background: rgba(255, 255, 255, .86);
    cursor: pointer;
    font-size: 13px;
    font-weight: 750;
    transition: transform .25s ease, border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}

.experience-tab:hover {
    color: #344054;
    border-color: color-mix(in srgb, var(--brand) 26%, #e2e7ef);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    transform: translateY(-2px);
}

.experience-tab.active {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, #ffffff);
    border-color: color-mix(in srgb, var(--brand) 30%, #dfe5ef);
}

.experience-tab-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 11px;
    color: #8d9ab0;
    background: #f3f6fb;
    transition: color .25s ease, background .25s ease;
}

.experience-tab.active .experience-tab-icon {
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 72%, var(--accent)));
}

.experience-tab-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    opacity: 0;
}

.experience-tab.active .experience-tab-progress {
    opacity: .8;
}

.experience-autoplay-label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #8a94a6;
    font-size: 11px;
    font-weight: 760;
    white-space: nowrap;
}

.experience-autoplay-label > span,
.experience-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #18b98f;
    box-shadow: 0 0 0 5px rgba(24, 185, 143, .1);
    animation: experiencePulse 2s ease-in-out infinite;
}

.experience-shell {
    --experience-duration: 5200ms;
    position: relative;
    min-height: 585px;
    overflow: hidden;
    border: 1px solid rgba(220, 227, 239, .95);
    border-radius: 22px;
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--shadow-card);
}

.experience-progress-rail {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 8;
    height: 3px;
    overflow: hidden;
    background: #edf1f7;
}

.experience-progress-fill {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
}

.experience-progress-fill.is-running {
    animation: experienceProgress var(--experience-duration) linear forwards;
}

.experience-panel {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 58px;
    align-items: center;
    min-height: 585px;
    padding: 50px 52px 76px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.experience-panel.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

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

.experience-panel.is-entering,
.experience-panel.is-leaving {
    display: grid;
    visibility: visible;
}

.experience-panel.is-entering {
    position: absolute;
    z-index: 4;
    opacity: 0;
    animation: experiencePanelEnter .43s cubic-bezier(.2, .72, .2, 1) forwards;
}

.experience-panel.is-leaving {
    position: relative;
    z-index: 3;
    opacity: 1;
    pointer-events: none;
    animation: experiencePanelLeave .43s cubic-bezier(.4, 0, .2, 1) forwards;
}

.experience-shell.slide-backward .experience-panel.is-entering {
    animation-name: experiencePanelEnterBack;
}

.experience-shell.slide-backward .experience-panel.is-leaving {
    animation-name: experiencePanelLeaveBack;
}

.experience-visual {
    position: relative;
    display: grid;
    min-height: 448px;
    place-items: center;
    overflow: hidden;
    border-radius: 20px;
    background: radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 30%),
        radial-gradient(circle at 82% 72%, color-mix(in srgb, var(--brand) 19%, transparent), transparent 30%),
        linear-gradient(145deg, #f9fbff, #edf2ff);
    box-shadow: inset 0 0 0 1px rgba(222, 229, 240, .7);
    perspective: 1000px;
}

.experience-grid-glow {
    position: absolute;
    inset: 0;
    opacity: .38;
    background-image: linear-gradient(rgba(99, 102, 241, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, .055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom right, #000000, transparent 75%);
}

.experience-uploaded-image {
    position: absolute;
    inset: 26px;
    z-index: 2;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: var(--shadow-card);
    transition: transform .6s cubic-bezier(.2, .72, .2, 1);
}

.experience-panel.active .experience-uploaded-image {
    animation: experienceImageFloat 6s ease-in-out infinite;
}

.experience-uploaded-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
    transition: transform .7s cubic-bezier(.2, .72, .2, 1);
}

.experience-uploaded-image:hover img {
    transform: scale(1.025);
}

.experience-phone-mock,
.experience-desktop-mock {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 7px solid #111827;
    background: #ffffff;
    box-shadow: var(--shadow-card);
}

.experience-phone-mock {
    width: 218px;
    height: 430px;
    border-radius: 38px;
    transform: rotate(-4deg) translateZ(28px);
    animation: experiencePhoneFloat 6.4s ease-in-out infinite;
}

.experience-phone-screen {
    padding: 40px 17px 18px;
}

.experience-phone-hero {
    display: grid;
    height: 124px;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 20px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 65%, var(--accent)));
    font-size: 38px;
}

.experience-phone-screen > strong {
    display: block;
    margin-bottom: 16px;
    font-size: 15px;
}

.experience-desktop-mock {
    width: min(94%, 505px);
    height: 310px;
    border-radius: 23px;
    transform: rotate(1.5deg) translateZ(24px);
    animation: desktopFloat 6.8s ease-in-out infinite;
}

.experience-desktop-layout {
    display: grid;
    grid-template-columns: 58px 1fr;
    height: calc(100% - 18px);
}

.experience-desktop-layout .mock-main {
    padding: 24px;
}

.experience-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.experience-mini-stats span {
    height: 56px;
    border: 1px solid #e8ecf6;
    border-radius: 12px;
    background: linear-gradient(145deg, #f1f4ff, #f8faff);
}

.experience-table-lines {
    display: grid;
    gap: 9px;
    margin-top: 20px;
}

.experience-table-lines i {
    position: relative;
    display: block;
    height: 18px;
    overflow: hidden;
    border-radius: 7px;
    background: #eef2f7;
}

.experience-table-lines i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
    transform: translateX(-100%);
    animation: tableSweep 3.8s ease-in-out infinite;
}

.experience-table-lines i:nth-child(2) {
    width: 92%;
}

.experience-table-lines i:nth-child(3) {
    width: 78%;
}

.experience-table-lines i:nth-child(4) {
    width: 86%;
}

.experience-float-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 165px;
    padding: 11px 13px;
    border: 1px solid #e6ebf2;
    border-radius: 12px;
    color: #172033;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08);
    animation: floatBadge 5.8s ease-in-out infinite;
}

.experience-float-card small,
.experience-float-card strong {
    display: block;
}

.experience-float-card small {
    margin-bottom: 2px;
    color: #8a94a6;
    font-size: 9px;
    font-weight: 700;
}

.experience-float-card strong {
    font-size: 11px;
    line-height: 1.15;
}

.experience-float-card > i {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 10px;
    color: #f3a400;
    background: #fff3cf;
}

.experience-float-card-a {
    top: 42px;
    right: 17px;
}

.experience-float-card-b {
    bottom: 30px;
    left: 22px;
    animation-delay: .7s;
}

.experience-live-dot {
    width: 12px;
    height: 12px;
}

.experience-copy {
    position: relative;
    padding: 14px 10px 14px 0;
}

.experience-slide-meta {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 18px;
    color: #97a1b2;
    font-weight: 800;
}

.experience-slide-meta > span {
    color: var(--brand);
    font-size: 28px;
    line-height: 1;
}

.experience-slide-meta > small {
    font-size: 11px;
}

.experience-slide-meta > i {
    display: block;
    align-self: center;
    width: 54px;
    height: 1px;
    margin-left: 8px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, transparent), transparent);
}

.experience-copy h3 {
    margin: 13px 0 17px;
    font-size: clamp(34px, 3.2vw, 47px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.experience-copy > p {
    max-width: 560px;
    margin: 0;
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.78;
}

.experience-feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 18px;
    margin: 26px 0 28px;
    padding: 0;
    list-style: none;
}

.experience-feature-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #344054;
    font-size: 13.5px;
    font-weight: 650;
}

.experience-feature-list li > span {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 9px;
    color: #0f9d8a;
    background: color-mix(in srgb, var(--accent) 11%, #ffffff);
    font-size: 9px;
}

.experience-panel.active .experience-copy > .section-kicker,
.experience-panel.active .experience-copy > h3,
.experience-panel.active .experience-copy > p,
.experience-panel.active .experience-feature-list,
.experience-panel.active .experience-store-row,
.experience-panel.active .experience-slide-meta {
    animation: experienceCopyIn .55s cubic-bezier(.2, .72, .2, 1) both;
}

.experience-panel.active .experience-copy > h3 {
    animation-delay: .05s;
}

.experience-panel.active .experience-copy > p {
    animation-delay: .1s;
}

.experience-panel.active .experience-feature-list {
    animation-delay: .15s;
}

.experience-panel.active .experience-store-row {
    animation-delay: .2s;
}

.experience-slider-controls {
    position: absolute;
    right: 52px;
    bottom: 24px;
    left: 52px;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.experience-dots,
.experience-arrow-group {
    pointer-events: auto;
}

.experience-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d8deea;
    cursor: pointer;
    transition: width .25s ease, background .25s ease, transform .25s ease;
}

.experience-dot:hover {
    transform: scale(1.2);
}

.experience-dot.active {
    width: 28px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.experience-arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #e1e6ef;
    border-radius: 12px;
    color: #344054;
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease;
}

.experience-arrow:hover {
    color: #ffffff;
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
}

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

.category-card,
.service-card,
.step-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: #ffffff;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.category-card::before,
.service-card::before,
.step-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 42%, color-mix(in srgb, var(--accent) 14%, transparent));
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.category-card:hover,
.service-card:hover,
.step-card:hover {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

.category-card:hover::before,
.service-card:hover::before,
.step-card:hover::before {
    opacity: 1;
}

.category-card > *,
.service-card > *,
.step-card > * {
    position: relative;
    z-index: 1;
}

.category-card {
    min-height: 170px;
    padding: 20px;
    border-radius: 12px;
}

.category-icon,
.step-icon,
.feature-list > div > span {
    display: grid;
    place-items: center;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, #ffffff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
}

.category-icon {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 12px;
    font-size: 19px;
}

.category-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card:hover .category-icon,
.step-card:hover .step-icon,
.feature-list > div:hover > span {
    animation: iconLift .8s ease both;
}

.category-card h3 {
    margin: 18px 0 8px;
    font-size: 15px;
}

.category-card p {
    margin: 0;
    padding-right: 20px;
    color: #7a8695;
    font-size: 13px;
    line-height: 1.6;
}

.category-arrow {
    position: absolute;
    right: 20px;
    bottom: 19px;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: #667085;
    background: #f3f5f8;
    font-size: 11px;
    transition: color .25s ease, transform .25s ease;
}

.category-card:hover .category-arrow {
    color: var(--brand);
    transform: translateX(2px);
}

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

.service-card {
    border-radius: 14px;
}

.service-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: #eef2f7;
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.service-card:hover .service-image img {
    transform: scale(1.04);
}

.service-image-empty {
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--brand) 45%, #cbd3df);
    background-image: linear-gradient(145deg, #f8fbff, #edf2ff),
        url("data:image/svg+xml,%3Csvg width='160' height='120' viewBox='0 0 160 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%234f46e5' opacity='.16' stroke-width='2'%3E%3Cpath d='M26 78h108'/%3E%3Cpath d='M44 78V54h72v24'/%3E%3Cpath d='M58 54v-9h44v9'/%3E%3Ccircle cx='54' cy='83' r='6'/%3E%3Ccircle cx='106' cy='83' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto, 72%;
    font-size: 54px;
}

.service-illustration-label {
    position: absolute;
    right: 14px;
    bottom: 13px;
    left: 14px;
    color: color-mix(in srgb, var(--brand) 72%, #111827);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.service-illustration-icon {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    color: var(--brand);
    background: #ffffff;
    box-shadow: var(--shadow-soft);
}

.service-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #344054;
    background: rgba(255, 255, 255, .95);
    font-size: 10px;
    font-weight: 800;
}

.service-badge i {
    margin-right: 4px;
    color: #f6ab16;
}

.service-body {
    padding: 18px;
}

.service-meta {
    color: #7b8794;
    font-size: 11px;
    font-weight: 600;
}

.service-meta i {
    margin-right: 4px;
    color: var(--accent);
}

.service-body h3 {
    margin: 10px 0 8px;
    font-size: 16px;
}

.service-body p {
    margin: 0;
    color: #748091;
    font-size: 13px;
    line-height: 1.65;
}

.service-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #edf0f4;
}

.service-footer small,
.service-footer strong {
    display: block;
}

.service-footer small {
    color: #98a2b3;
    font-size: 10px;
}

.service-footer strong {
    margin-top: 2px;
    font-size: 15px;
}

.service-footer > a,
.service-footer-action {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, #ffffff);
}

.service-footer-action.is-disabled {
    opacity: .5;
}

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

.step-card {
    padding: 22px;
    border-radius: 12px;
}

.step-number {
    position: absolute;
    top: 18px;
    right: 22px;
    color: #eef1f5;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.05em;
}

.step-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    font-size: 19px;
}

.step-card h3 {
    margin: 22px 0 9px;
    font-size: 17px;
}

.step-card p {
    margin: 0;
    color: #748091;
    font-size: 13px;
    line-height: 1.65;
}

.about-section {
    background: #ffffff;
}

.about-grid {
    position: relative;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    align-items: center;
    gap: 58px;
}

.about-visual {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border-radius: 18px;
    background: linear-gradient(145deg, #111827, #233451);
    box-shadow: var(--shadow-card);
}

.about-visual.has-image {
    background-position: center;
    background-size: cover;
}

.about-visual.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, .04), rgba(15, 23, 42, .4));
}

.about-pattern {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 54px;
    color: #ffffff;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .12) 0 2px, transparent 3px);
    background-size: 30px 30px;
}

.about-pattern span {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    margin-bottom: 25px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    font-size: 25px;
}

.about-pattern strong {
    max-width: 330px;
    font-size: 25px;
    line-height: 1.25;
}

.about-pattern small {
    margin-top: 12px;
    color: #cbd5e1;
}

.feature-list {
    display: grid;
    gap: 18px;
    margin-top: 30px;
}

.feature-list > div {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.feature-list > div > span {
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
}

.feature-list strong,
.feature-list small {
    display: block;
}

.feature-list strong {
    font-size: 14px;
}

.feature-list small {
    margin-top: 4px;
    color: #7c8796;
    font-size: 12px;
    line-height: 1.5;
}

.cta-section {
    position: relative;
    overflow: hidden;
    padding: 10px 0 76px;
}

.cta-section::before {
    top: -110px;
    right: 8%;
    opacity: .22;
}

.cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    padding: 36px 40px;
    border-radius: 16px;
    color: #ffffff;
    background: var(--brand);
    isolation: isolate;
}

.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(105deg, transparent 0 35%, rgba(255, 255, 255, .18) 46%, transparent 58%);
    transform: translateX(-120%);
    animation: ctaSheen 7s ease-in-out infinite;
}

.cta-card > div,
.cta-card > a,
.cta-store-badges {
    position: relative;
    z-index: 2;
}

.cta-kicker {
    color: #dbeafe;
}

.cta-card h2 {
    margin: 9px 0;
    color: #ffffff;
    font-size: 34px;
}

.cta-card p {
    max-width: 680px;
    color: #e0e7ff;
}

.site-footer {
    padding-top: 54px;
    color: #d6dce6;
    background: var(--footer);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr .75fr 1fr 1fr;
    gap: 55px;
    padding-bottom: 42px;
}

.footer-brand {
    color: #ffffff;
}

.footer-brand-col > p {
    max-width: 330px;
    margin: 20px 0;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.7;
}

.footer-grid h3 {
    margin: 7px 0 18px;
    color: #ffffff;
    font-size: 13px;
}

.footer-grid > div:not(.footer-brand-col) > a,
.footer-address {
    display: block;
    margin: 0 0 10px;
    color: #9eabbc;
    font-size: 12px;
    line-height: 1.7;
    transition: color .2s ease;
}

.footer-grid > div:not(.footer-brand-col) > a:hover {
    color: #ffffff;
}

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

.social-links a {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 10px;
    color: #bac4d2;
    background: #172033;
    font-size: 13px;
}

.social-links a:hover {
    color: #ffffff;
    background: var(--brand);
}

.footer-bottom {
    display: flex;
    min-height: 67px;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #253044;
    color: #7d8999;
    font-size: 11px;
}

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .72s cubic-bezier(.22, .61, .36, 1), transform .72s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.reveal.reveal-right {
    transform: translateX(38px);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

body.public-auth-page {
    min-height: 100vh;
    background: #f5f7fb;
}

.auth-shell {
    display: grid;
    grid-template-columns: minmax(420px, .92fr) 1.08fr;
    min-height: 100vh;
}

.auth-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 48px clamp(40px, 6vw, 90px);
    color: #ffffff;
    background: linear-gradient(145deg, #101828, #162542);
}

.auth-visual::before,
.auth-visual::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.auth-visual::before {
    top: -150px;
    right: -170px;
    width: 380px;
    height: 380px;
    background: color-mix(in srgb, var(--brand) 32%, transparent);
}

.auth-visual::after {
    bottom: -120px;
    left: -130px;
    width: 300px;
    height: 300px;
    border: 60px solid rgba(255, 255, 255, .04);
}

.auth-visual.has-image {
    background-position: center;
    background-size: cover;
}

.auth-visual.has-image::before {
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: linear-gradient(155deg, rgba(8, 15, 29, .9), rgba(15, 23, 42, .68));
}

.auth-brand {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

.auth-brand img {
    width: 44px;
    height: 44px;
    padding: 4px;
    border-radius: 13px;
    object-fit: contain;
    background: rgba(255, 255, 255, .08);
}

.auth-visual-copy {
    position: relative;
    z-index: 2;
    max-width: 590px;
    margin: auto 0;
}

.auth-visual-kicker {
    display: inline-flex;
    padding: 7px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 999px;
    color: #dbe6f5;
    background: rgba(255, 255, 255, .08);
    font-size: 11px;
    font-weight: 700;
}

.auth-visual-copy h1 {
    margin: 22px 0 18px;
    color: #ffffff;
    font-size: clamp(38px, 4.4vw, 62px);
    line-height: 1.05;
}

.auth-visual-copy p {
    max-width: 520px;
    color: #bac7d8;
    font-size: 15px;
    line-height: 1.75;
}

.auth-benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 31px;
}

.auth-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    color: #d7e0ec;
    background: rgba(255, 255, 255, .05);
    font-size: 11px;
}

.auth-benefit i {
    color: #7dd3fc;
}

.auth-visual-footer {
    position: relative;
    z-index: 2;
    color: #8ea0b8;
    font-size: 11px;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: #ffffff;
}

.auth-panel {
    width: min(440px, 100%);
}

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.auth-back:hover,
.auth-link {
    color: var(--brand);
}

.auth-heading h2 {
    margin: 0 0 8px;
    font-size: 31px;
}

.auth-heading p {
    margin: 0 0 28px;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.auth-form-group {
    margin-bottom: 17px;
}

.auth-form-group label {
    display: block;
    margin-bottom: 7px;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    color: #98a2b3;
    font-size: 13px;
    transform: translateY(-50%);
}

.auth-input {
    width: 100%;
    height: 50px;
    padding: 0 43px 0 42px;
    border: 1px solid #d9e0e8;
    border-radius: 12px;
    outline: 0;
    color: #182230;
    background: #ffffff;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.auth-input:focus {
    border-color: color-mix(in srgb, var(--brand) 55%, #d9e0e8);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 9%, transparent);
}

.auth-input.is-invalid {
    border-color: #f04438;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 10px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 9px;
    color: #98a2b3;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.auth-error {
    margin-top: 6px;
    color: #d92d20;
    font-size: 11px;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 6px 0 21px;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475467;
    font-size: 12px;
}

.auth-check input {
    accent-color: var(--brand);
}

.auth-link {
    font-size: 12px;
    font-weight: 700;
}

.auth-submit {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 12px;
    color: #ffffff;
    background: var(--brand);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 12px 25px color-mix(in srgb, var(--brand) 22%, transparent);
}

.auth-submit:hover {
    filter: brightness(.96);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 23px 0;
    color: #98a2b3;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eaecf0;
}

.social-login-grid {
    display: grid;
    gap: 9px;
}

.social-login {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    border: 1px solid #dfe4eb;
    border-radius: 11px;
    color: #344054;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.social-login:hover {
    background: #f9fafb;
}

.auth-bottom {
    margin-top: 24px;
    color: #667085;
    font-size: 12px;
    text-align: center;
}

.auth-bottom a {
    color: var(--brand);
    font-weight: 800;
}

.auth-alert {
    margin-bottom: 16px;
    padding: 11px 13px;
    border-radius: 10px;
    color: #b42318;
    background: #fff1f0;
    font-size: 12px;
}

.auth-demo {
    margin-top: 18px;
    padding: 15px;
    border: 1px dashed #d0d5dd;
    border-radius: 12px;
    color: #667085;
    font-size: 11px;
    line-height: 1.7;
}

@keyframes servicePatternDrift {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 220px 220px;
    }
}

@keyframes softAuraMove {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(-22px, 18px, 0) scale(1.08);
    }
}

@keyframes appFloat {
    0%,
    100% {
        transform: translateX(-38%) rotate(4deg) translateY(0);
    }
    50% {
        transform: translateX(-38%) rotate(2.5deg) translateY(-10px);
    }
}

@keyframes appFloatBack {
    0%,
    100% {
        transform: rotate(-7deg) scale(.88) translateY(0);
    }
    50% {
        transform: rotate(-5.5deg) scale(.88) translateY(9px);
    }
}

@keyframes desktopFloat {
    0%,
    100% {
        transform: rotate(-3deg) translateY(0);
    }
    50% {
        transform: rotate(-2deg) translateY(-7px);
    }
}

@keyframes experiencePhoneFloat {
    0%,
    100% {
        transform: rotate(-4deg) translate3d(0, 0, 28px);
    }
    50% {
        transform: rotate(-1.7deg) translate3d(0, -13px, 35px);
    }
}

@keyframes floatBadge {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}

@keyframes iconLift {
    0% {
        transform: translateY(0) rotate(0);
    }
    45% {
        transform: translateY(-4px) rotate(-3deg);
    }
    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes experiencePulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .68;
        transform: scale(.82);
    }
}

@keyframes experienceProgress {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

@keyframes tableSweep {
    0%,
    55% {
        transform: translateX(-115%);
    }
    80%,
    100% {
        transform: translateX(115%);
    }
}

@keyframes experienceImageFloat {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-7px) scale(1.006);
    }
}

@keyframes experienceCopyIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes experiencePanelEnter {
    from {
        opacity: 0;
        transform: translateX(42px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes experiencePanelLeave {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateX(-34px) scale(.99);
    }
}

@keyframes experiencePanelEnterBack {
    from {
        opacity: 0;
        transform: translateX(-42px) scale(.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes experiencePanelLeaveBack {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateX(34px) scale(.99);
    }
}

@keyframes ctaSheen {
    0%,
    58% {
        transform: translateX(-120%);
    }
    78%,
    100% {
        transform: translateX(120%);
    }
}

@media (max-width: 1050px) {
    .hero-grid,
    .about-grid {
        gap: 42px;
    }

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

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

    .footer-grid > div:nth-child(4) {
        grid-column: 2 / 4;
    }

    .experience-navigation {
        flex-direction: column;
        gap: 10px;
    }

    .experience-autoplay-label {
        display: none;
    }

    .experience-panel {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: 870px;
        padding: 38px 38px 76px;
    }

    .experience-shell {
        min-height: 870px;
    }

    .experience-copy h3 {
        font-size: 38px;
    }

    .auth-shell {
        grid-template-columns: .9fr 1.1fr;
    }

    .auth-visual {
        padding: 42px;
    }
}

@media (max-width: 820px) {
    .site-container {
        width: min(100% - 28px, 1120px);
    }

    .nav-wrap {
        height: 70px;
    }

    .site-nav,
    .nav-actions {
        display: none;
    }

    .mobile-nav-toggle {
        display: block;
        margin-left: auto;
    }

    .site-header.nav-open .site-nav {
        position: absolute;
        top: 70px;
        right: 14px;
        left: 14px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 10px;
        border: 1px solid #e6eaf0;
        border-radius: 15px;
        background: #ffffff;
        box-shadow: var(--shadow-card);
    }

    .site-header.nav-open .site-nav a {
        padding: 12px;
        border-radius: 9px;
    }

    .site-header.nav-open .nav-actions {
        position: absolute;
        top: 284px;
        right: 24px;
        left: 24px;
        z-index: 2;
        display: flex;
        padding-bottom: 12px;
        background: #ffffff;
    }

    .site-header.nav-open .nav-actions .btn,
    .site-header.nav-open .nav-actions .store-badge {
        flex: 1;
    }

    .hero-section {
        padding: 50px 0;
    }

    .hero-section::before,
    .section-muted::before,
    .about-section::before {
        opacity: .38;
        background-size: 180px 180px;
    }

    .hero-section::after,
    .app-experience-section::after {
        width: 260px;
        height: 260px;
    }

    .hero-grid,
    .about-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

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

    .hero-copy h1 {
        margin-right: auto;
        margin-left: auto;
        font-size: clamp(32px, 7vw, 48px);
    }

    .hero-lead {
        margin: auto;
        font-size: 16px;
    }

    .hero-actions,
    .hero-proof,
    .hero-store-actions {
        justify-content: center;
    }

    .app-hero-stage {
        min-height: 470px;
    }

    .phone-front {
        top: 38px;
        left: 52%;
    }

    .phone-back {
        top: 72px;
        left: 50px;
    }

    .desktop-device {
        right: 12px;
        bottom: 34px;
    }

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

    .stats-grid > div {
        padding: 12px;
    }

    .stats-grid > div:nth-child(2) {
        border-right: 0;
    }

    .stats-grid > div:nth-child(-n + 2) {
        border-bottom: 1px solid #e8edf3;
    }

    .section {
        padding: 58px 0;
    }

    .split-heading {
        grid-template-columns: 1fr;
        gap: 10px;
        text-align: center;
    }

    .service-grid,
    .steps-grid {
        grid-template-columns: 1fr 1fr;
    }

    .service-image {
        height: 170px;
    }

    .experience-tabs {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 4px 2px 10px;
        scrollbar-width: none;
    }

    .experience-tabs::-webkit-scrollbar {
        display: none;
    }

    .experience-tab {
        flex: 0 0 auto;
        min-height: 52px;
    }

    .experience-shell {
        min-height: 825px;
        border-radius: 20px;
    }

    .experience-panel {
        min-height: 825px;
        padding: 24px 24px 72px;
    }

    .experience-visual {
        min-height: 390px;
    }

    .experience-feature-list {
        grid-template-columns: 1fr;
    }

    .experience-slider-controls {
        right: 24px;
        bottom: 20px;
        left: 24px;
    }

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

    .cta-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 32px 24px;
    }

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

    .footer-grid > div:nth-child(4) {
        grid-column: auto;
    }

    .footer-brand-col {
        grid-column: 1 / 3;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .auth-visual {
        display: none;
    }

    .auth-main {
        min-height: 100vh;
        padding: 35px 24px;
    }
}

@media (max-width: 560px) {
    .hero-copy h1 {
        font-size: clamp(28px, 6.5vw, 42px);
    }

    .hero-lead {
        font-size: 15px;
    }

    .hero-store-actions,
    .hero-actions,
    .cta-store-badges {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .hero-actions .store-badge,
    .cta-store-badges .store-badge {
        width: 100%;
    }

    .app-hero-stage {
        min-height: 410px;
        border-radius: 20px;
    }

    .phone-device {
        width: 164px;
        height: 334px;
        border-width: 5px;
        border-radius: 27px;
    }

    .phone-notch {
        top: 5px;
        width: 62px;
        height: 13px;
    }

    .phone-front {
        top: 35px;
        left: 56%;
    }

    .phone-back {
        top: 65px;
        left: 30px;
    }

    .mock-screen {
        padding: 33px 12px 14px;
    }

    .mock-screen > strong {
        font-size: 15px;
    }

    .mock-service-row i {
        height: 35px;
    }

    .desktop-device {
        right: 8px;
        bottom: 24px;
        width: 210px;
        height: 135px;
    }

    .floating-card {
        min-width: 155px;
        padding: 10px 11px;
    }

    .floating-card-top {
        top: 16px;
        right: 12px;
    }

    .floating-card-bottom {
        bottom: 16px;
        left: 12px;
    }

    .category-grid,
    .service-grid,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .section-heading h2,
    .about-copy h2 {
        font-size: 31px;
    }

    .experience-shell {
        min-height: 750px;
        border-radius: 18px;
    }

    .experience-panel {
        min-height: 750px;
        gap: 23px;
        padding: 16px 16px 68px;
    }

    .experience-visual {
        min-height: 330px;
        border-radius: 18px;
    }

    .experience-phone-mock {
        width: 160px;
        height: 315px;
        border-width: 5px;
        border-radius: 27px;
    }

    .experience-desktop-mock {
        width: 96%;
        height: 220px;
        border-width: 5px;
    }

    .experience-desktop-layout {
        grid-template-columns: 42px 1fr;
    }

    .experience-desktop-layout .mock-main {
        padding: 15px;
    }

    .experience-copy h3 {
        font-size: 29px;
    }

    .experience-copy > p {
        font-size: 14px;
        line-height: 1.7;
    }

    .experience-arrow {
        width: 35px;
        height: 35px;
    }

    .about-visual {
        min-height: 300px;
    }

    .about-pattern {
        padding: 32px;
    }

    .cta-section {
        padding-bottom: 60px;
    }

    .cta-card h2 {
        font-size: 28px;
    }

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

    .footer-brand-col {
        grid-column: auto;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        padding: 18px 0;
    }
}

@media (max-width: 375px) {
    .hero-copy h1 {
        font-size: 30px;
    }

    .stats-grid > div {
        border-right: 0;
        padding: 10px 4px;
    }

    .stats-grid > div:nth-child(n + 3) {
        padding-top: 12px;
        border-top: 1px solid #e8edf3;
    }

    .section-heading h2 {
        font-size: 24px;
    }

    .cta-card {
        padding: 20px 16px;
    }

    .cta-card h2 {
        font-size: 22px;
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: .01ms;
    }

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

/* ========================================================================== 
   V13 — Production public UI polish
   Bootstrap 5.3 is loaded on the public landing/login pages as a modern
   foundation; these scoped rules preserve the existing admin-controlled
   content while giving the marketing surfaces a larger, premium product feel.
   ========================================================================== */

body.landing-v13 {
    --page-max: 1600px;
    --page-gutter: clamp(24px, 4vw, 72px);
    --section-space: clamp(82px, 7vw, 126px);
    --radius-xl: 30px;
    --radius-2xl: 38px;
    --premium-shadow: 0 32px 90px rgba(15, 23, 42, .10);
    --premium-shadow-hover: 0 38px 90px rgba(15, 23, 42, .15);
    background:
        radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 28rem),
        #fff;
}

.landing-v13 .site-container {
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
}

.landing-v13 .site-header {
    border-bottom: 1px solid rgba(226, 232, 240, .8);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 10px 35px rgba(15, 23, 42, .035);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.landing-v13 .nav-wrap {
    height: 82px;
    gap: 38px;
}

.landing-v13 .site-brand {
    gap: 13px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.landing-v13 .site-brand-logo {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

.landing-v13 .site-nav {
    gap: 30px;
}

.landing-v13 .site-nav a {
    position: relative;
    padding: 8px 0;
    color: #475467;
    font-size: 14px;
    font-weight: 700;
}

.landing-v13 .site-nav a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.landing-v13 .site-nav a:hover::after { transform: scaleX(1); }

.landing-v13 .btn,
.landing-v13 .store-badge {
    border-radius: 14px;
}

.landing-v13 .btn {
    min-height: 48px;
    padding-inline: 21px;
    font-size: 14px;
}

.landing-v13 .btn-lg {
    min-height: 58px;
    padding-inline: 26px;
    border-radius: 16px;
    font-size: 15px;
}

.landing-v13 .btn-primary {
    background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 80%, #7c3aed));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--brand) 27%, transparent);
}

.landing-v13 .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 21px 44px color-mix(in srgb, var(--brand) 32%, transparent);
}

.landing-v13 .hero-section {
    min-height: 700px;
    padding: clamp(82px, 7vw, 118px) 0 clamp(94px, 8vw, 132px);
    background:
        radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 28rem),
        radial-gradient(circle at 14% 92%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 25rem),
        linear-gradient(180deg, #fbfcff 0%, #ffffff 92%);
}

.landing-v13 .hero-section::before { opacity: .32; }

.landing-v13 .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(520px, .98fr);
    gap: clamp(62px, 6vw, 110px);
}

.landing-v13 .eyebrow {
    padding: 10px 15px;
    border-color: color-mix(in srgb, var(--brand) 20%, #fff);
    background: rgba(255,255,255,.8);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .05);
    backdrop-filter: blur(12px);
}

.landing-v13 .hero-copy h1 {
    max-width: 790px;
    margin: 26px 0 24px;
    font-size: clamp(54px, 5.25vw, 84px);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.055em;
}

.landing-v13 .hero-copy h1 span {
    margin-top: 8px;
    background: linear-gradient(100deg, var(--brand), #7c3aed 65%, var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing-v13 .hero-lead {
    max-width: 710px;
    color: #5f6b7b;
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.75;
}

.landing-v13 .hero-actions,
.landing-v13 .hero-store-actions { margin-top: 34px; gap: 14px; }

.landing-v13 .app-availability-note {
    width: fit-content;
    margin-top: 20px;
    padding: 10px 14px;
    border: 1px solid #edf1f6;
    border-radius: 13px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 30px rgba(15,23,42,.04);
}

.landing-v13 .hero-proof {
    margin-top: 30px;
    padding: 15px 18px;
    border: 1px solid #edf0f5;
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 16px 34px rgba(15,23,42,.05);
    backdrop-filter: blur(12px);
}

.landing-v13 .hero-visual-wrap { perspective: 1200px; }

.landing-v13 .app-hero-stage {
    min-height: 600px;
    border: 1px solid rgba(226, 232, 240, .88);
    border-radius: 34px;
    background:
        radial-gradient(circle at 20% 12%, rgba(255,255,255,.98), transparent 31%),
        linear-gradient(145deg, #edf3ff 0%, #f7f5ff 48%, #effcf9 100%);
    box-shadow: 0 38px 100px rgba(53, 64, 122, .17);
    transform: rotateY(-1.3deg) rotateX(.6deg);
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}

.landing-v13 .app-hero-stage:hover {
    box-shadow: 0 46px 120px rgba(53, 64, 122, .22);
    transform: rotateY(0) rotateX(0) translateY(-4px);
}

.landing-v13 .floating-card {
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 18px;
    box-shadow: 0 22px 55px rgba(15,23,42,.16);
    backdrop-filter: blur(18px);
}

.landing-v13 .stats-strip {
    position: relative;
    z-index: 8;
    width: min(var(--page-max), calc(100% - (var(--page-gutter) * 2)));
    margin: -52px auto 0;
    border: 1px solid #e9edf4;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 28px 75px rgba(15,23,42,.09);
    backdrop-filter: blur(16px);
}

.landing-v13 .stats-strip .site-container { width: 100%; }
.landing-v13 .stats-grid { min-height: 118px; }
.landing-v13 .stats-grid strong { font-size: clamp(27px, 2.2vw, 38px); letter-spacing: -.04em; }
.landing-v13 .stats-grid span { font-size: 12px; font-weight: 700; color: #778295; }

.landing-v13 .section { padding: var(--section-space) 0; }

.landing-v13 .section-heading { margin-bottom: 52px; }
.landing-v13 .section-heading.centered { max-width: 880px; }

.landing-v13 .section-heading h2,
.landing-v13 .about-copy h2 {
    margin-top: 14px;
    font-size: clamp(36px, 3.3vw, 52px);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.landing-v13 .section-heading p,
.landing-v13 .about-copy > p { font-size: 16px; line-height: 1.8; }

.landing-v13 .section-kicker {
    padding: 7px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 8%, #fff);
    font-size: 11px;
    letter-spacing: .1em;
}

.landing-v13 .app-experience-section {
    padding-top: clamp(112px, 9vw, 150px);
    background:
        radial-gradient(circle at 10% 15%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 28rem),
        linear-gradient(180deg, #fff 0%, #f8f9ff 50%, #fff 100%);
}

.landing-v13 .experience-navigation { margin-bottom: 28px; }
.landing-v13 .experience-tabs { gap: 12px; }

.landing-v13 .experience-tab {
    min-height: 58px;
    padding: 0 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    color: #667085;
    background: rgba(255,255,255,.88);
    box-shadow: 0 9px 22px rgba(15,23,42,.045);
    font-size: 13px;
    font-weight: 750;
}

.landing-v13 .experience-tab.active {
    border-color: color-mix(in srgb, var(--brand) 38%, #e2e8f0);
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 7%, #fff);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--brand) 10%, transparent);
}

.landing-v13 .experience-shell {
    min-height: 680px;
    border: 1px solid #e7eaf1;
    border-radius: 32px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--premium-shadow);
}

.landing-v13 .experience-panel {
    min-height: 680px;
    grid-template-columns: minmax(480px, .95fr) minmax(0, 1.05fr);
    gap: clamp(52px, 5vw, 86px);
    padding: 54px 64px 88px;
}

.landing-v13 .experience-visual {
    min-height: 500px;
    border-radius: 28px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.landing-v13 .experience-copy h3 {
    max-width: 680px;
    font-size: clamp(40px, 3.6vw, 58px);
    font-weight: 830;
    line-height: 1.03;
    letter-spacing: -.05em;
}

.landing-v13 .experience-copy > p { font-size: 17px; line-height: 1.8; }
.landing-v13 .experience-feature-list { gap: 13px 24px; }

.landing-v13 .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.landing-v13 .category-card {
    min-height: 205px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #fbfcff);
    box-shadow: 0 12px 34px rgba(15,23,42,.045);
}

.landing-v13 .category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--premium-shadow-hover);
}

.landing-v13 .category-icon {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    font-size: 21px;
}

.landing-v13 .category-card h3 { margin-top: 22px; font-size: 18px; letter-spacing: -.02em; }
.landing-v13 .category-card p { font-size: 13.5px; line-height: 1.7; }

.landing-v13 .section-muted {
    background:
        radial-gradient(circle at 2% 30%, color-mix(in srgb, var(--brand) 6%, transparent), transparent 27rem),
        linear-gradient(180deg, #f7f9ff 0%, #fbfcff 100%);
}

.landing-v13 .service-grid { gap: 26px; }

.landing-v13 .service-card {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 15px 38px rgba(15,23,42,.06);
}

.landing-v13 .service-card:hover { transform: translateY(-8px); box-shadow: var(--premium-shadow-hover); }

.landing-v13 .service-image { height: 250px; }
.landing-v13 .service-body { padding: 24px 24px 22px; }
.landing-v13 .service-body h3 { margin: 12px 0 10px; font-size: 20px; letter-spacing: -.025em; }
.landing-v13 .service-body p { min-height: 67px; font-size: 13.5px; line-height: 1.72; }
.landing-v13 .service-footer { margin-top: 24px; padding-top: 19px; }

.landing-v13 .steps-grid { gap: 24px; }

.landing-v13 .step-card {
    min-height: 245px;
    padding: 30px;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #fafbff);
    box-shadow: 0 12px 32px rgba(15,23,42,.045);
}

.landing-v13 .step-number {
    top: 18px;
    right: 24px;
    color: color-mix(in srgb, var(--brand) 8%, #f3f4f6);
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
}

.landing-v13 .step-icon { width: 58px; height: 58px; border-radius: 18px; }
.landing-v13 .step-card h3 { margin-top: 30px; font-size: 18px; }

.landing-v13 .about-grid { gap: clamp(64px, 7vw, 120px); }

.landing-v13 .about-visual {
    min-height: 560px;
    border-radius: 30px;
    box-shadow: 0 34px 90px rgba(15,23,42,.18);
}

.landing-v13 .about-pattern { padding: 64px; }
.landing-v13 .about-pattern strong { max-width: 420px; font-size: 34px; }

.landing-v13 .feature-list { gap: 20px; margin-top: 36px; }
.landing-v13 .feature-list > div { padding: 15px 16px; border: 1px solid #edf0f5; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.035); }

.landing-v13 .cta-section { padding: 20px 0 100px; }

.landing-v13 .cta-card {
    min-height: 270px;
    padding: 54px 60px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 86% 20%, rgba(255,255,255,.18), transparent 18rem),
        linear-gradient(120deg, var(--brand), #6d28d9 70%, color-mix(in srgb, var(--accent) 65%, #6d28d9));
    box-shadow: 0 34px 90px color-mix(in srgb, var(--brand) 22%, transparent);
}

.landing-v13 .cta-card h2 { font-size: clamp(34px, 3vw, 48px); }
.landing-v13 .cta-card p { font-size: 16px; line-height: 1.75; }

.landing-v13 .site-footer { padding-top: 72px; background: #0a1020; }
.landing-v13 .footer-grid { gap: 72px; padding-bottom: 58px; }
.landing-v13 .footer-grid h3 { font-size: 14px; }
.landing-v13 .footer-grid > div:not(.footer-brand-col) > a,
.landing-v13 .footer-address { font-size: 13px; }

/* Login */
body.public-auth-page.auth-v13 {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 30rem),
        #f6f8fc;
}

.auth-v13 .auth-shell {
    grid-template-columns: minmax(520px, 52vw) minmax(460px, 48vw);
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    gap: 0;
    align-items: stretch;
}

.auth-v13 .auth-visual {
    min-height: 100vh;
    padding: clamp(40px, 5vw, 72px);
    border-radius: 0;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--brand) 30%, transparent), transparent 20rem),
        radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 21rem),
        linear-gradient(145deg, #091126 0%, #111d3a 55%, #15233f 100%);
    background-size: 44px 44px, 44px 44px, auto, auto, auto;
    box-shadow: none;
}

.auth-v13 .auth-visual.has-image {
    background-position: center;
    background-size: cover;
}

.auth-v13 .auth-brand { font-size: 18px; letter-spacing: 0; }
.auth-v13 .auth-brand img { width: 44px; height: 44px; border-radius: 14px; }

.auth-v13 .auth-visual-copy {
    max-width: 560px;
    margin: clamp(40px, 5vh, 60px) 0 18px;
}

.auth-v13 .auth-visual-kicker {
    padding: 7px 11px;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.07);
    font-size: 11px;
    backdrop-filter: blur(10px);
}

.auth-v13 .auth-visual-copy h1 {
    max-width: 560px;
    margin: 22px 0 12px;
    font-size: clamp(44px, 4.7vw, 68px);
    font-weight: 840;
    line-height: .98;
    letter-spacing: 0;
}

.auth-v13 .auth-visual-copy h1 span {
    display: inline;
    color: color-mix(in srgb, var(--accent) 70%, #ffffff);
}

.auth-v13 .auth-visual-copy p { max-width: 520px; color: #b9c6da; font-size: 17px; line-height: 1.75; }

.auth-v13 .auth-benefits { max-width: 620px; gap: 12px; margin-top: 30px; }
.auth-v13 .auth-benefit { min-height: 48px; padding: 12px 16px; border-radius: 14px; font-size: 13px; backdrop-filter: blur(12px); }

.auth-v13 .auth-product-preview {
    position: relative;
    z-index: 2;
    width: min(520px, 94%);
    margin: 18px 0 20px;
}

.auth-v13 .auth-preview-window {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.09);
    box-shadow: 0 24px 64px rgba(0,0,0,.22);
    backdrop-filter: blur(16px);
    transform: perspective(800px) rotateY(-4deg) rotateX(1deg);
    animation: authPreviewFloat 7s ease-in-out infinite;
}

.auth-v13 .auth-preview-topbar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.auth-v13 .auth-preview-topbar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.28); }
.auth-v13 .auth-preview-topbar strong { margin-left: 10px; color: #d9e3f1; font-size: 11px; font-weight: 700; }

.auth-v13 .auth-preview-body { display: grid; grid-template-columns: 52px 1fr; min-height: 140px; }
.auth-v13 .auth-preview-sidebar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 22px; border-right: 1px solid rgba(255,255,255,.08); color: #8fa4c4; }
.auth-v13 .auth-preview-content { padding: 24px; }
.auth-v13 .auth-preview-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.auth-v13 .auth-preview-stats span { padding: 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.05); }
.auth-v13 .auth-preview-stats b,
.auth-v13 .auth-preview-stats small { display: block; }
.auth-v13 .auth-preview-stats b { color: #fff; font-size: 20px; }
.auth-v13 .auth-preview-stats small { margin-top: 3px; color: #8ea0b8; font-size: 9px; }
.auth-v13 .auth-preview-chart { display: flex; align-items: end; gap: 8px; height: 38px; margin-top: 12px; padding: 0 6px; }
.auth-v13 .auth-preview-chart i { flex: 1; min-width: 6px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, #fff), var(--brand)); opacity: .85; }
.auth-v13 .auth-preview-chart i:nth-child(1){height:32%}.auth-v13 .auth-preview-chart i:nth-child(2){height:50%}.auth-v13 .auth-preview-chart i:nth-child(3){height:42%}.auth-v13 .auth-preview-chart i:nth-child(4){height:75%}.auth-v13 .auth-preview-chart i:nth-child(5){height:60%}.auth-v13 .auth-preview-chart i:nth-child(6){height:88%}.auth-v13 .auth-preview-chart i:nth-child(7){height:72%}

.auth-v13 .auth-preview-float {
    position: absolute;
    right: -14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 13px;
    color: #111827;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(0,0,0,.16);
    backdrop-filter: blur(14px);
}
.auth-v13 .auth-preview-float i { color: #10b981; font-size: 20px; }
.auth-v13 .auth-preview-float strong,
.auth-v13 .auth-preview-float small { display:block; }
.auth-v13 .auth-preview-float strong { font-size: 11px; }
.auth-v13 .auth-preview-float small { margin-top: 2px; color:#667085; font-size: 9px; }

.auth-v13 .auth-main {
    min-height: 100vh;
    padding: clamp(36px, 5vw, 80px);
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 70% 12%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 26rem),
        #f8f9fd;
    box-shadow: none;
    backdrop-filter: none;
    overflow-y: auto;
}

.auth-v13 .auth-panel {
    position: relative;
    width: min(430px, 100%);
    max-width: 430px;
    padding: 34px 38px;
    border: 1px solid #e8edf4;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15,23,42,.10);
}

.auth-v13 .auth-panel-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #101828;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}
.auth-v13 .auth-panel-brand img { width: 38px; height: 38px; padding: 3px; border-radius: 12px; background:#0f172a; object-fit:contain; }
.auth-v13 .auth-back { margin-bottom: 22px; padding: 7px 10px; border-radius: 10px; background: #f7f8fb; }
.auth-v13 .auth-back:hover { background: color-mix(in srgb, var(--brand) 7%, #fff); }

.auth-v13 .auth-panel .auth-back {
    position: absolute;
    top: 36px;
    right: 38px;
    margin: 0;
}

.auth-v13 .auth-heading-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 8%, #fff);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-v13 .auth-heading h2 { margin-bottom: 8px; font-size: 36px; font-weight: 830; letter-spacing: 0; }
.auth-v13 .auth-heading p { margin-bottom: 24px; font-size: 14px; }
.auth-v13 .auth-form-group { margin-bottom: 15px; }
.auth-v13 .auth-form-group label { margin-bottom: 8px; color:#475467; font-size:12px; font-weight:750; }
.auth-v13 .auth-input { height: 50px; border-color:#dfe5ed; border-radius:13px; background:#fbfcfe; font-size:14px; }
.auth-v13 .auth-input:hover { border-color:#cbd4e1; background:#fff; }
.auth-v13 .auth-input:focus { border-color: color-mix(in srgb, var(--brand) 62%, #dfe5ed); background:#fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 10%, transparent), 0 10px 30px rgba(15,23,42,.05); }
.auth-v13 .auth-row { margin: 6px 0 20px; }
.auth-v13 .auth-submit {
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:52px;
    padding:0 18px 0 20px;
    border-radius:13px;
    background:linear-gradient(135deg,var(--brand),color-mix(in srgb,var(--brand) 76%,#7c3aed));
    box-shadow:0 16px 34px color-mix(in srgb,var(--brand) 24%,transparent);
    font-size:14px;
    letter-spacing:0;
}
.auth-v13 .auth-submit i { transition:transform .2s ease; }
.auth-v13 .auth-submit:hover i { transform:translateX(4px); }
.auth-v13 .auth-security-note { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; color:#8993a3; font-size:10px; text-align:center; }
.auth-v13 .auth-security-note i { color:#10b981; }
.auth-v13 .auth-divider { margin: 20px 0; }
.auth-v13 .social-login-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth-v13 .social-login { height:46px; border-radius:13px; font-size: 11px; }
.auth-v13 .auth-bottom { margin-top:22px; }

@keyframes authPreviewFloat {
    0%,100% { transform: perspective(800px) rotateY(-4deg) rotateX(1deg) translateY(0); }
    50% { transform: perspective(800px) rotateY(-3deg) rotateX(1deg) translateY(-6px); }
}

@media (max-width: 1280px) {
    body.landing-v13 { --page-gutter: 36px; --page-max: 1220px; }
    .landing-v13 .hero-grid { grid-template-columns: minmax(0,1fr) minmax(460px,.9fr); gap:52px; }
    .landing-v13 .hero-copy h1 { font-size: clamp(50px,5.5vw,70px); }
    .landing-v13 .experience-panel { grid-template-columns: .95fr 1.05fr; padding:44px 46px 84px; }
    .auth-v13 .auth-shell { grid-template-columns: minmax(500px, 52vw) minmax(440px, 48vw); }
    .auth-v13 .auth-visual-copy h1 { font-size: clamp(40px, 4.5vw, 62px); }
}

@media (max-width: 1050px) {
    .landing-v13 .site-container { width: min(100% - 48px, 980px); }
    .landing-v13 .hero-grid { grid-template-columns: 1fr; }
    .landing-v13 .hero-copy { max-width: 820px; margin: 0 auto; text-align:center; }
    .landing-v13 .hero-copy h1,
    .landing-v13 .hero-lead { margin-right:auto; margin-left:auto; }
    .landing-v13 .hero-actions,
    .landing-v13 .hero-store-actions,
    .landing-v13 .hero-proof { justify-content:center; }
    .landing-v13 .app-availability-note { margin-right:auto; margin-left:auto; }
    .landing-v13 .hero-visual-wrap { width:min(760px,100%); margin:0 auto; }
    .landing-v13 .category-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .landing-v13 .experience-panel { grid-template-columns:1fr; min-height:980px; }
    .landing-v13 .experience-shell { min-height:980px; }
    .auth-v13 .auth-shell { grid-template-columns: 1fr; width: min(100% - 28px, 520px); padding: 18px 0; }
    .auth-v13 .auth-visual { display:none; }
    .auth-v13 .auth-main { min-height:calc(100vh - 36px); padding:0; background:transparent; }
    body.public-auth-page.auth-v13 { overflow:auto; }
    .auth-v13 .auth-shell { height:auto; min-height:100vh; }
    .auth-v13 .auth-panel .auth-back { position:static; margin-bottom:22px; }
}

@media (max-width: 820px) {
    body.landing-v13 { --page-gutter: 18px; --section-space: 72px; }
    .landing-v13 .site-container { width: calc(100% - 36px); }
    .landing-v13 .nav-wrap { height:70px; }
    .landing-v13 .hero-section { min-height:auto; padding:64px 0 90px; }
    .landing-v13 .hero-copy h1 { font-size:clamp(42px,11vw,64px); }
    .landing-v13 .app-hero-stage { min-height:500px; border-radius:25px; }
    .landing-v13 .stats-strip { width:calc(100% - 28px); margin-top:-40px; }
    .landing-v13 .section-heading { margin-bottom:38px; }
    .landing-v13 .section-heading h2,
    .landing-v13 .about-copy h2 { font-size:clamp(32px,8vw,44px); }
    .landing-v13 .category-grid { grid-template-columns:1fr 1fr; gap:14px; }
    .landing-v13 .category-card { min-height:190px; padding:20px; }
    .landing-v13 .service-grid { grid-template-columns:1fr 1fr; gap:16px; }
    .landing-v13 .service-image { height:205px; }
    .landing-v13 .experience-panel { min-height:850px; padding:24px 24px 74px; }
    .landing-v13 .experience-shell { min-height:850px; }
    .landing-v13 .experience-copy h3 { font-size:38px; }
    .landing-v13 .about-visual { min-height:440px; }
    .landing-v13 .cta-card { min-height:0; padding:38px 28px; border-radius:24px; }
    .auth-v13 .auth-main { padding:0; border-radius:0; }
    .auth-v13 .auth-panel { padding:34px 28px; border-radius:20px; }
}

@media (max-width: 560px) {
    .landing-v13 .hero-copy h1 { font-size:clamp(38px,12vw,52px); }
    .landing-v13 .hero-lead { font-size:16px; }
    .landing-v13 .app-hero-stage { min-height:430px; }
    .landing-v13 .category-grid,
    .landing-v13 .service-grid { grid-template-columns:1fr; }
    .landing-v13 .category-card { min-height:170px; }
    .landing-v13 .service-image { height:230px; }
    .landing-v13 .experience-shell,
    .landing-v13 .experience-panel { min-height:760px; }
    .landing-v13 .experience-copy h3 { font-size:31px; }
    .landing-v13 .about-visual { min-height:340px; }
    .landing-v13 .about-pattern { padding:34px; }
    .landing-v13 .about-pattern strong { font-size:27px; }
    .landing-v13 .cta-section { padding-bottom:70px; }
    .auth-v13 .auth-shell { width: min(100% - 24px, 430px); padding:12px 0; }
    .auth-v13 .auth-main { min-height:calc(100vh - 24px); padding:0; background:transparent; }
    .auth-v13 .auth-panel { padding:24px 20px; border-radius:18px; }
    .auth-v13 .auth-panel-brand { margin-bottom:18px; }
    .auth-v13 .auth-heading h2 { font-size:30px; }
    .auth-v13 .social-login-grid { grid-template-columns: 1fr; }
}

/* ========================================================================
   AUTH V14 — service workspace login (reference-inspired, production UI)
   Scoped to .auth-v14 so register/reset pages keep their existing layout.
   ======================================================================== */
body.public-auth-page.auth-v14 {
    min-height: 100dvh;
    overflow: hidden;
    background: #0b1220;
}

.auth-v14 .auth14-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
}

/* LEFT STORY PANEL ------------------------------------------------------- */
.auth-v14 .auth14-story {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100dvh;
    padding: clamp(24px, 3.2vw, 44px) clamp(36px, 4.2vw, 64px) clamp(18px, 2.4vw, 32px);
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 82%, rgba(249,115,22,.30), transparent 30%),
        radial-gradient(circle at 8% 62%, rgba(59,130,246,.18), transparent 29%),
        linear-gradient(135deg, #0b1220 0%, #111c32 48%, #17243d 100%);
}

.auth-v14 .auth14-story.has-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image:
        linear-gradient(135deg, rgba(8,15,29,.94), rgba(13,26,48,.88) 54%, rgba(35,28,31,.82)),
        var(--auth14-image);
    background-position: center;
    background-size: cover;
}

.auth-v14 .auth14-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .82;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 75%, transparent 100%);
}

.auth-v14 .auth14-story::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.018), transparent 18%, transparent 82%, rgba(255,255,255,.018));
}

.auth-v14 .auth14-orb {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(1px);
    pointer-events: none;
}

.auth-v14 .auth14-orb-one {
    width: 350px;
    height: 350px;
    right: -135px;
    top: -150px;
    background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.44), rgba(79,70,229,.18) 55%, transparent 72%);
}

.auth-v14 .auth14-orb-two {
    width: 260px;
    height: 260px;
    left: -120px;
    bottom: -100px;
    background: radial-gradient(circle at 60% 40%, rgba(14,165,233,.22), rgba(20,184,166,.10) 52%, transparent 72%);
}

.auth-v14 .auth14-flow {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    opacity: .34;
    pointer-events: none;
}

.auth-v14 .auth14-flow path {
    fill: none;
    stroke: #f59e0b;
    stroke-width: 1;
    stroke-dasharray: 6 10;
}

.auth-v14 .auth14-flow circle {
    fill: #f59e0b;
    opacity: .58;
}

.auth-v14 .auth14-story-top {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.auth-v14 .auth14-brand,
.auth-v14 .auth14-main-brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}

.auth-v14 .auth14-brand-logo {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 36px rgba(2,6,23,.18);
}

.auth-v14 .auth14-brand-logo img {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.auth-v14 .auth14-brand-copy,
.auth-v14 .auth14-main-brand > span {
    display: grid;
    gap: 1px;
}

.auth-v14 .auth14-brand-copy strong {
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.auth-v14 .auth14-brand-copy small {
    color: rgba(226,232,240,.62);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.auth-v14 .auth14-top-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    border: 1px solid rgba(245,158,11,.24);
    border-radius: 11px;
    color: #fcd9a0;
    background: rgba(245,158,11,.08);
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.auth-v14 .auth14-story-content {
    position: relative;
    z-index: 2;
    width: min(100%, 760px);
    margin: clamp(34px, 5vh, 56px) 0 0;
}

.auth-v14 .auth14-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 999px;
    color: #d7e0ed;
    background: rgba(255,255,255,.055);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .035em;
    backdrop-filter: blur(10px);
}

.auth-v14 .auth14-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.auth-v14 .auth14-story-content h1 {
    max-width: 720px;
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 850;
    line-height: .99;
    letter-spacing: -.045em;
}

.auth-v14 .auth14-story-content h1 span {
    color: transparent;
    background: linear-gradient(90deg, #fff1dc 0%, #ffbf64 48%, #fb8c18 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.auth-v14 .auth14-story-content > p {
    max-width: 590px;
    margin: 14px 0 0;
    color: #b9c6d8;
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.55;
}

.auth-v14 .auth14-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 720px;
    margin-top: 22px;
    padding: 12px 4px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
}

.auth-v14 .auth14-metrics > div {
    min-width: 0;
    padding: 0 17px;
}

.auth-v14 .auth14-metrics > div + div {
    border-left: 1px solid rgba(255,255,255,.10);
}

.auth-v14 .auth14-metrics strong,
.auth-v14 .auth14-metrics span {
    display: block;
}

.auth-v14 .auth14-metrics strong {
    color: #fff;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.auth-v14 .auth14-metrics span {
    margin-top: 2px;
    color: #8596af;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.auth-v14 .auth14-capabilities {
    display: grid;
    gap: 7px;
    max-width: 720px;
    margin-top: 16px;
}

.auth-v14 .auth14-capability {
    display: grid;
    grid-template-columns: 34px 1fr;
    grid-template-areas: "icon title" "icon copy";
    column-gap: 13px;
    align-items: center;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 13px;
    background: rgba(255,255,255,.035);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.auth-v14 .auth14-capability:hover {
    transform: translateX(4px);
    border-color: rgba(249,115,22,.22);
    background: linear-gradient(90deg, rgba(255,255,255,.055), rgba(249,115,22,.055));
}

.auth-v14 .auth14-capability > span {
    grid-area: icon;
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    color: #9edcf6;
    background: rgba(15,23,42,.38);
    font-size: 12px;
}

.auth-v14 .auth14-capability strong {
    grid-area: title;
    color: #e8eef7;
    font-size: 11px;
    font-weight: 760;
}

.auth-v14 .auth14-capability small {
    grid-area: copy;
    margin-top: 2px;
    color: #7f91ab;
    font-size: 9px;
    line-height: 1.35;
}

.auth-v14 .auth14-story-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: auto;
    padding-top: 14px;
    color: #718199;
    font-size: 9px;
}

.auth-v14 .auth14-secure-pill {
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas: "icon title" "icon copy";
    align-items: center;
    column-gap: 9px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
}

.auth-v14 .auth14-secure-pill i { grid-area: icon; color: #22c55e; }
.auth-v14 .auth14-secure-pill b { grid-area: title; color: #c8d3e1; font-size: 9px; }
.auth-v14 .auth14-secure-pill small { grid-area: copy; color: #718199; font-size: 8px; }

/* RIGHT LOGIN PANEL ------------------------------------------------------ */
.auth-v14 .auth14-main {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 100dvh;
    padding: 18px clamp(24px, 3vw, 56px);
    overflow: hidden;
    background:
        radial-gradient(circle at 22% 12%, rgba(249,115,22,.08), transparent 28%),
        radial-gradient(circle at 78% 82%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 32%),
        linear-gradient(145deg, #fffaf6 0%, #fffdfb 56%, #f8f7fb 100%);
}

.auth-v14 .auth14-main::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(15,23,42,.035) .7px, transparent .7px);
    background-size: 18px 18px;
    opacity: .28;
}

.auth-v14 .auth14-home-link {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid #e9e4df;
    border-radius: 13px;
    color: #64748b;
    background: rgba(255,255,255,.76);
    box-shadow: 0 10px 28px rgba(15,23,42,.055);
    backdrop-filter: blur(12px);
    transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.auth-v14 .auth14-home-link:hover {
    transform: translateY(-2px);
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 24%, #e9e4df);
    box-shadow: 0 14px 36px rgba(15,23,42,.09);
}

.auth-v14 .auth14-main-inner {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
}

.auth-v14 .auth14-main-brand {
    width: max-content;
    max-width: calc(100% - 62px);
    margin: 0 auto 12px;
    padding: 7px 11px 7px 8px;
    border: 1px solid rgba(15,23,42,.055);
    border-radius: 13px;
    color: #111827;
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 28px rgba(15,23,42,.04);
    backdrop-filter: blur(12px);
}

.auth-v14 .auth14-main-brand img {
    width: 31px;
    height: 31px;
    padding: 3px;
    border-radius: 10px;
    object-fit: contain;
    background: #0f172a;
}

.auth-v14 .auth14-main-brand strong {
    color: #111827;
    font-size: 13px;
    font-weight: 820;
}

.auth-v14 .auth14-main-brand small {
    color: #9a8f86;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.auth-v14 .auth14-panel {
    position: relative;
    width: 100%;
    padding: 28px 32px 24px;
    border: 1px solid #eee7e1;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 30px 80px rgba(74,52,38,.12), 0 5px 20px rgba(15,23,42,.045);
    backdrop-filter: blur(18px);
}

.auth-v14 .auth14-card-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(145deg, #f97316, #ea580c);
    box-shadow: 0 14px 34px rgba(234,88,12,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transform: rotate(-3deg);
}

.auth-v14 .auth14-card-icon i {
    font-size: 15px;
    transform: rotate(3deg);
}

.auth-v14 .auth14-heading-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #7c6f66;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.auth-v14 .auth14-heading-kicker i { color: #f97316; }

.auth-v14 .auth14-heading h2 {
    margin: 0;
    color: #17120f;
    font-size: clamp(29px, 2.3vw, 34px);
    font-weight: 860;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.auth-v14 .auth14-heading p {
    margin: 7px 0 18px;
    color: #8b8078;
    font-size: 13px;
    line-height: 1.55;
}

.auth-v14 .auth14-alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #fecaca;
    border-radius: 11px;
    color: #991b1b;
    background: #fff7f7;
    font-size: 10px;
    line-height: 1.45;
}

.auth-v14 .auth14-form { margin: 0; }

.auth-v14 .auth14-field { margin-bottom: 12px; }

.auth-v14 .auth14-field label {
    display: block;
    margin-bottom: 7px;
    color: #6f625a;
    font-size: 9px;
    font-weight: 820;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.auth-v14 .auth14-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-v14 .auth14-input-wrap > i {
    position: absolute;
    left: 15px;
    z-index: 2;
    color: #a79f99;
    font-size: 12px;
    pointer-events: none;
    transition: color .2s ease;
}

.auth-v14 .auth14-input {
    width: 100%;
    height: 46px;
    padding: 0 45px 0 42px;
    border: 1px solid #ddd8d3;
    border-radius: 12px;
    outline: 0;
    color: #2b2622;
    background: #fff;
    font: inherit;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(15,23,42,.015);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.auth-v14 .auth14-input::placeholder { color: #a59e99; }

.auth-v14 .auth14-input:hover { border-color: #cfc7c1; }

.auth-v14 .auth14-input:focus {
    border-color: color-mix(in srgb, var(--brand) 46%, #cfc7c1);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 9%, transparent), 0 8px 24px rgba(15,23,42,.035);
}

.auth-v14 .auth14-input-wrap:focus-within > i { color: var(--brand); }

.auth-v14 .auth14-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}

.auth-v14 .auth14-password-toggle {
    position: absolute;
    right: 8px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    color: #9c948f;
    background: transparent;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

.auth-v14 .auth14-password-toggle:hover { color: var(--brand); background: #f8f6f4; }

.auth-v14 .auth14-error {
    margin-top: 5px;
    color: #dc2626;
    font-size: 9px;
}

.auth-v14 .auth14-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -1px 0 15px;
}

.auth-v14 .auth14-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #786c64;
    font-size: 10px;
    cursor: pointer;
}

.auth-v14 .auth14-check input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--brand);
}

.auth-v14 .auth14-forgot {
    color: #ea580c;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}

.auth-v14 .auth14-forgot:hover { color: #c2410c; text-decoration: underline; }

.auth-v14 .auth14-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 72%, #ea580c) 0%, #f97316 58%, #f59e0b 100%);
    box-shadow: 0 16px 30px rgba(234,88,12,.18), inset 0 1px 0 rgba(255,255,255,.24);
    font-size: 13px;
    font-weight: 820;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.auth-v14 .auth14-submit i { font-size: 11px; transition: transform .2s ease; }

.auth-v14 .auth14-submit:hover {
    transform: translateY(-2px);
    filter: saturate(1.06);
    box-shadow: 0 20px 38px rgba(234,88,12,.23), inset 0 1px 0 rgba(255,255,255,.26);
}

.auth-v14 .auth14-submit:hover i { transform: translateX(4px); }

.auth-v14 .auth14-submit:active { transform: translateY(0); }

.auth-v14 .auth14-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
    color: #9b928c;
    font-size: 9px;
    text-align: center;
}

.auth-v14 .auth14-security-note i { color: #22c55e; }

.auth-v14 .auth14-demo {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #6b5f57;
    background: #fff8ef;
    font-size: 9px;
    line-height: 1.5;
}

.auth-v14 .auth14-divider {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 14px 0 12px;
    color: #b2aaa5;
    font-size: 9px;
    text-transform: uppercase;
}

.auth-v14 .auth14-divider::before,
.auth-v14 .auth14-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee9e5;
}

.auth-v14 .auth14-social-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}

.auth-v14 .auth14-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 39px;
    padding: 7px 9px;
    border: 1px solid #e4ded9;
    border-radius: 11px;
    color: #4b433d;
    background: #fff;
    font-size: 9px;
    font-weight: 750;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.auth-v14 .auth14-social:hover {
    transform: translateY(-1px);
    border-color: #d5ccc5;
    background: #fffaf6;
}

.auth-v14 .auth14-bottom {
    margin-top: 13px;
    color: #8b817a;
    font-size: 10px;
    text-align: center;
}

.auth-v14 .auth14-bottom a {
    color: var(--brand);
    font-weight: 800;
}

.auth-v14.auth-register .auth14-main-inner {
    width: min(100%, 440px);
}

.auth-v14.auth-register .auth14-panel {
    padding-top: 24px;
    padding-bottom: 20px;
}

.auth-v14.auth-register .auth14-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
}

.auth-v14.auth-register .auth14-heading h2 {
    font-size: clamp(27px, 2.1vw, 32px);
}

.auth-v14.auth-register .auth14-heading p {
    margin-bottom: 14px;
}

.auth-v14.auth-register .auth14-field {
    margin-bottom: 10px;
}

.auth-v14.auth-register .auth14-input {
    height: 43px;
}

.auth-v14.auth-register .auth14-submit {
    height: 45px;
}

.auth-v14.auth-register .auth14-security-note,
.auth-v14.auth-register .auth14-divider {
    margin-top: 10px;
}

.auth-v14.auth-register .auth14-bottom {
    margin-top: 11px;
}

.auth-v14 .auth14-page-meta {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 8px;
    color: #a39790;
    font-size: 8px;
}

.auth-v14 .auth14-page-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Subtle load motion */
@keyframes auth14-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes auth14-soft-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.auth-v14 .auth14-story-content > *,
.auth-v14 .auth14-metrics,
.auth-v14 .auth14-capability {
    animation: auth14-soft-in .55s both cubic-bezier(.22,.8,.25,1);
}
.auth-v14 .auth14-story-content > :nth-child(2) { animation-delay: .04s; }
.auth-v14 .auth14-story-content > :nth-child(3) { animation-delay: .08s; }
.auth-v14 .auth14-metrics { animation-delay: .12s; }
.auth-v14 .auth14-capability:nth-child(1) { animation-delay: .16s; }
.auth-v14 .auth14-capability:nth-child(2) { animation-delay: .20s; }
.auth-v14 .auth14-capability:nth-child(3) { animation-delay: .24s; }
.auth-v14 .auth14-capability:nth-child(4) { animation-delay: .28s; }

.auth-v14 .auth14-main-brand,
.auth-v14 .auth14-panel,
.auth-v14 .auth14-page-meta {
    animation: auth14-rise .6s both cubic-bezier(.22,.8,.25,1);
}
.auth-v14 .auth14-panel { animation-delay: .06s; }
.auth-v14 .auth14-page-meta { animation-delay: .12s; }

/* LARGE LAPTOPS / SHORT VIEWPORTS -------------------------------------- */
@media (max-height: 820px) and (min-width: 1101px) {
    .auth-v14 .auth14-story { padding-top: 22px; padding-bottom: 16px; }
    .auth-v14 .auth14-story-content { margin-top: 28px; }
    .auth-v14 .auth14-story-content h1 { font-size: clamp(36px, 3.8vw, 52px); }
    .auth-v14 .auth14-story-content > p { margin-top: 10px; line-height: 1.45; }
    .auth-v14 .auth14-eyebrow { margin-bottom: 12px; }
    .auth-v14 .auth14-metrics { margin-top: 16px; padding-top: 9px; padding-bottom: 9px; }
    .auth-v14 .auth14-capabilities { margin-top: 12px; gap: 6px; }
    .auth-v14 .auth14-capability { min-height: 42px; padding-top: 7px; padding-bottom: 7px; }
    .auth-v14 .auth14-capability small { display: none; }
    .auth-v14 .auth14-story-footer { padding-top: 10px; }
    .auth-v14 .auth14-main { padding-top: 14px; padding-bottom: 14px; }
    .auth-v14 .auth14-main-brand { margin-bottom: 8px; }
    .auth-v14 .auth14-panel { padding-top: 24px; padding-bottom: 20px; }
    .auth-v14 .auth14-heading p { margin-bottom: 14px; }
    .auth-v14 .auth14-field { margin-bottom: 10px; }
    .auth-v14 .auth14-input { height: 43px; }
    .auth-v14 .auth14-submit { height: 45px; }
    .auth-v14 .auth14-card-icon { width: 40px; height: 40px; margin-bottom: 9px; }
    .auth-v14 .auth14-divider { margin-top: 10px; }
    .auth-v14 .auth14-social { min-height: 36px; }
    .auth-v14 .auth14-page-meta { margin-top: 6px; }
}

@media (max-width: 1280px) {
    .auth-v14 .auth14-shell { grid-template-columns: 1fr 1fr; }
    .auth-v14 .auth14-story { padding-left: 46px; padding-right: 46px; }
    .auth-v14 .auth14-story-content h1 { font-size: clamp(42px, 4.3vw, 60px); }
    .auth-v14 .auth14-capability small { display: none; }
    .auth-v14 .auth14-capability { min-height: 50px; }
}

/* TABLET / MOBILE ------------------------------------------------------- */
@media (max-width: 1100px) {
    body.public-auth-page.auth-v14 { overflow: auto; background: #f8f7f5; }
    .auth-v14 .auth14-shell { display: block; min-height: 100dvh; width: 100%; }
    .auth-v14 .auth14-story { display: none; }
    .auth-v14 .auth14-main {
        min-height: 100dvh;
        padding: 54px 22px 30px;
        overflow: visible;
        width: 100%;
    }
    .auth-v14 .auth14-main-inner { width: min(100%, 520px); }
    .auth-v14 .auth14-home-link { top: 16px; right: 18px; }
    .auth-v14 .auth14-main-brand { margin-bottom: 18px; }
}

@media (max-width: 560px) {
    .auth-v14 .auth14-main { padding: 62px 14px 24px; }
    .auth-v14 .auth14-home-link { width: 39px; height: 39px; }
    .auth-v14 .auth14-main-brand { margin-left: 0; }
    .auth-v14 .auth14-main-brand small { display: none; }
    .auth-v14 .auth14-panel { padding: 28px 20px 24px; border-radius: 19px; }
    .auth-v14 .auth14-card-icon { width: 46px; height: 46px; border-radius: 14px; }
    .auth-v14 .auth14-heading h2 { font-size: 31px; }
    .auth-v14 .auth14-heading p { margin-bottom: 20px; }
    .auth-v14 .auth14-form-row { align-items: flex-start; }
    .auth-v14 .auth14-social-grid { grid-template-columns: 1fr; }
    .auth-v14 .auth14-page-meta { flex-direction: column; align-items: center; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-v14 *,
    .auth-v14 *::before,
    .auth-v14 *::after {
        scroll-behavior: auto;
        animation-duration: .01ms;
        animation-iteration-count: 1;
        transition-duration: .01ms;
    }
}

/* ========================================================================
   AUTH V15 — TRUE 100% BROWSER-ZOOM RESPONSIVENESS
   Keeps login/register balanced at normal 100% zoom and short laptop heights.
   ======================================================================== */
body.public-auth-page.auth-v14 {
    min-height: 100svh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

.auth-v14 .auth14-shell {
    min-height: 100svh;
    height: auto;
    align-items: stretch;
}

@media (min-width: 1101px) {
    .auth-v14 .auth14-story {
        position: sticky;
        top: 0;
        height: 100svh;
        min-height: 650px;
    }

    .auth-v14 .auth14-main {
        min-height: 100svh;
        height: auto;
        overflow: visible;
        align-content: center;
    }

    .auth-v14 .auth14-main-inner {
        width: min(100%, 460px);
        margin: auto;
    }

    .auth-v14.auth-register .auth14-main-inner {
        width: min(100%, 460px);
    }
}

/* Registration has more fields, so use a deliberately denser rhythm. */
.auth-v14.auth-register .auth14-main {
    padding-top: clamp(12px, 2vh, 22px);
    padding-bottom: clamp(12px, 2vh, 22px);
}

.auth-v14.auth-register .auth14-main-brand {
    margin-bottom: 8px;
}

.auth-v14.auth-register .auth14-panel {
    padding: 22px 30px 18px;
}

.auth-v14.auth-register .auth14-card-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
    border-radius: 13px;
}

.auth-v14.auth-register .auth14-heading-kicker {
    margin-bottom: 7px;
}

.auth-v14.auth-register .auth14-heading h2 {
    font-size: clamp(26px, 2vw, 31px);
}

.auth-v14.auth-register .auth14-heading p {
    margin: 5px 0 12px;
    font-size: 11px;
    line-height: 1.4;
}

.auth-v14.auth-register .auth14-field {
    margin-bottom: 8px;
}

.auth-v14.auth-register .auth14-field label {
    margin-bottom: 5px;
    font-size: 8px;
}

.auth-v14.auth-register .auth14-input {
    height: 41px;
    font-size: 12px;
}

.auth-v14.auth-register .auth14-password-toggle {
    width: 32px;
    height: 32px;
    right: 5px;
}

.auth-v14.auth-register .auth14-form-row {
    margin: 0 0 10px;
}

.auth-v14.auth-register .auth14-submit {
    height: 43px;
}

.auth-v14.auth-register .auth14-security-note {
    margin-top: 7px;
}

.auth-v14.auth-register .auth14-divider {
    margin: 8px 0;
}

.auth-v14.auth-register .auth14-social {
    min-height: 35px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.auth-v14.auth-register .auth14-bottom {
    margin-top: 8px;
}

.auth-v14.auth-register .auth14-page-meta {
    margin-top: 5px;
}

/* 1366x768 / 1440x810 / 1536x864 class laptops at 100% browser zoom. */
@media (min-width: 1101px) and (max-height: 920px) {
    .auth-v14 .auth14-story {
        padding: 20px clamp(34px, 3.8vw, 54px) 14px;
    }

    .auth-v14 .auth14-story-content {
        margin-top: 22px;
    }

    .auth-v14 .auth14-eyebrow {
        margin-bottom: 10px;
        padding: 6px 10px;
    }

    .auth-v14 .auth14-story-content h1 {
        font-size: clamp(36px, 3.55vw, 50px);
        line-height: 1;
    }

    .auth-v14 .auth14-story-content > p {
        margin-top: 8px;
        font-size: 12px;
        line-height: 1.42;
    }

    .auth-v14 .auth14-metrics {
        margin-top: 14px;
        padding: 9px 4px;
    }

    .auth-v14 .auth14-capabilities {
        margin-top: 10px;
        gap: 6px;
    }

    .auth-v14 .auth14-capability {
        min-height: 39px;
        padding: 6px 10px;
    }

    .auth-v14 .auth14-capability small {
        display: none;
    }

    .auth-v14 .auth14-story-footer {
        padding-top: 8px;
    }

    .auth-v14 .auth14-main {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .auth-v14 .auth14-main-brand {
        margin-bottom: 7px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .auth-v14.auth-login .auth14-panel {
        padding-top: 22px;
        padding-bottom: 19px;
    }

    .auth-v14.auth-register .auth14-panel {
        padding: 18px 28px 15px;
    }

    .auth-v14.auth-register .auth14-card-icon {
        width: 34px;
        height: 34px;
        margin-bottom: 6px;
    }

    .auth-v14.auth-register .auth14-heading-kicker {
        margin-bottom: 5px;
        font-size: 8px;
    }

    .auth-v14.auth-register .auth14-heading h2 {
        font-size: 25px;
    }

    .auth-v14.auth-register .auth14-heading p {
        margin: 4px 0 9px;
        font-size: 10px;
    }

    .auth-v14.auth-register .auth14-field {
        margin-bottom: 6px;
    }

    .auth-v14.auth-register .auth14-field label {
        margin-bottom: 4px;
    }

    .auth-v14.auth-register .auth14-input {
        height: 38px;
    }

    .auth-v14.auth-register .auth14-form-row {
        margin-bottom: 7px;
    }

    .auth-v14.auth-register .auth14-submit {
        height: 40px;
    }

    .auth-v14.auth-register .auth14-security-note {
        margin-top: 5px;
        font-size: 8px;
    }

    .auth-v14.auth-register .auth14-divider {
        margin: 6px 0;
    }

    .auth-v14.auth-register .auth14-social {
        min-height: 32px;
        font-size: 8px;
    }

    .auth-v14.auth-register .auth14-bottom {
        margin-top: 6px;
        font-size: 9px;
    }

    .auth-v14 .auth14-page-meta {
        margin-top: 4px;
    }
}

/* Very short screens: do not clip the form. The right side becomes scrollable
   while the story panel remains visually anchored on desktop. */
@media (min-width: 1101px) and (max-height: 720px) {
    .auth-v14 .auth14-main {
        align-content: start;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .auth-v14 .auth14-story {
        position: sticky;
        top: 0;
        min-height: 100svh;
        height: 100svh;
    }
}

/* Mid-size screens should not jump to an oversized two-column layout. */
@media (min-width: 1101px) and (max-width: 1450px) {
    .auth-v14 .auth14-shell {
        grid-template-columns: minmax(0, 1.05fr) minmax(470px, .95fr);
    }

    .auth-v14 .auth14-story {
        padding-left: clamp(34px, 3.3vw, 48px);
        padding-right: clamp(34px, 3.3vw, 48px);
    }

    .auth-v14 .auth14-main {
        padding-left: clamp(22px, 2.6vw, 38px);
        padding-right: clamp(22px, 2.6vw, 38px);
    }
}

/* Mobile/tablet remains a single comfortable form column. */
@media (max-width: 1100px) {
    body.public-auth-page.auth-v14 {
        overflow-y: auto;
    }

    .auth-v14 .auth14-main {
        min-height: 100svh;
        height: auto;
    }

    .auth-v14.auth-register .auth14-panel {
        padding: 26px 24px 22px;
    }

    .auth-v14.auth-register .auth14-input {
        height: 45px;
    }
}

@media (max-width: 560px) {
    .auth-v14.auth-register .auth14-panel {
        padding: 24px 18px 20px;
    }

    .auth-v14.auth-register .auth14-heading h2 {
        font-size: 28px;
    }

    .auth-v14.auth-register .auth14-input {
        height: 46px;
    }
}

/* ========================================================================
   AUTH V16 — READABILITY + BALANCED 100% ZOOM LAYOUT
   - Keeps the form readable instead of shrinking typography to fit.
   - Lets the form area scroll naturally on short screens.
   - Vertically balances the left story so content does not crowd the top.
   ======================================================================== */

/* Stronger readable neutrals on the light authentication surface. */
.auth-v14 .auth14-heading p,
.auth-v14 .auth14-security-note,
.auth-v14 .auth14-bottom,
.auth-v14 .auth14-page-meta,
.auth-v14 .auth14-check {
    text-shadow: none;
}

@media (min-width: 1101px) {
    .auth-v14 .auth14-shell {
        grid-template-columns: minmax(560px, 1fr) minmax(540px, 1fr);
    }

    .auth-v14 .auth14-story {
        min-height: 720px;
        padding: 28px clamp(44px, 4.2vw, 68px) 22px;
    }

    /* Use the available vertical space instead of stacking everything at top. */
    .auth-v14 .auth14-story-content {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: center;
        width: min(100%, 760px);
        margin: 0;
        padding: 30px 0 34px;
    }

    .auth-v14 .auth14-eyebrow {
        align-self: flex-start;
        margin-bottom: 18px;
        padding: 8px 13px;
        font-size: 11px;
    }

    .auth-v14 .auth14-story-content h1 {
        max-width: 760px;
        font-size: clamp(48px, 4vw, 66px);
        line-height: 1.01;
    }

    .auth-v14 .auth14-story-content > p {
        max-width: 650px;
        margin-top: 15px;
        color: #c5d0df;
        font-size: 14px;
        line-height: 1.58;
    }

    .auth-v14 .auth14-metrics {
        max-width: 760px;
        margin-top: 24px;
        padding: 13px 5px;
    }

    .auth-v14 .auth14-metrics strong {
        font-size: 18px;
    }

    .auth-v14 .auth14-metrics span {
        margin-top: 4px;
        color: #9aabc1;
        font-size: 10px;
    }

    .auth-v14 .auth14-capabilities {
        max-width: 760px;
        margin-top: 18px;
        gap: 9px;
    }

    .auth-v14 .auth14-capability {
        min-height: 55px;
        padding: 9px 13px;
    }

    .auth-v14 .auth14-capability strong {
        color: #f1f5f9;
        font-size: 12px;
    }

    .auth-v14 .auth14-capability small {
        display: block;
        color: #9aaac0;
        font-size: 10px;
        line-height: 1.4;
    }

    .auth-v14 .auth14-story-footer {
        padding-top: 12px;
        font-size: 10px;
    }

    /* Right side can scroll if height is tight; do not shrink the form to unreadable sizes. */
    .auth-v14 .auth14-main {
        place-items: center;
        min-height: 100svh;
        padding: 24px clamp(28px, 3.6vw, 64px);
        overflow-x: hidden;
        overflow-y: auto;
    }

    .auth-v14 .auth14-main-inner {
        width: min(100%, 480px);
        margin: auto;
        padding: 4px 0;
    }

    .auth-v14.auth-register .auth14-main-inner {
        width: min(100%, 510px);
    }
}

/* Form typography: readable at 100% zoom. */
.auth-v14 .auth14-main-brand {
    margin-bottom: 15px;
    padding: 8px 12px 8px 9px;
}

.auth-v14 .auth14-main-brand strong {
    color: #111827;
    font-size: 14px;
}

.auth-v14 .auth14-main-brand small {
    color: #756e68;
    font-size: 8.5px;
}

.auth-v14 .auth14-panel {
    padding: 30px 34px 27px;
}

.auth-v14 .auth14-card-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 14px;
}

.auth-v14 .auth14-card-icon i {
    font-size: 16px;
}

.auth-v14 .auth14-heading-kicker {
    margin-bottom: 9px;
    color: #625952;
    font-size: 10px;
    letter-spacing: .12em;
}

.auth-v14 .auth14-heading h2 {
    color: #17120f;
    font-size: clamp(31px, 2.25vw, 36px);
    line-height: 1.08;
}

.auth-v14 .auth14-heading p {
    margin: 8px 0 20px;
    color: #625b56;
    font-size: 13.5px;
    line-height: 1.55;
}

.auth-v14 .auth14-field {
    margin-bottom: 12px;
}

.auth-v14 .auth14-field label {
    margin-bottom: 7px;
    color: #4e4843;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .065em;
}

.auth-v14 .auth14-input-wrap > i {
    left: 16px;
    color: #817a75;
    font-size: 13px;
}

.auth-v14 .auth14-input {
    height: 49px;
    padding-left: 44px;
    color: #1f2937;
    border-color: #d6d0cb;
    background: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

.auth-v14 .auth14-input::placeholder {
    color: #8b8580;
    opacity: 1;
}

.auth-v14 .auth14-password-toggle {
    width: 38px;
    height: 38px;
    right: 6px;
    color: #756f6a;
}

.auth-v14 .auth14-error {
    margin-top: 6px;
    font-size: 10.5px;
}

.auth-v14 .auth14-form-row {
    margin: 1px 0 14px;
}

.auth-v14 .auth14-check {
    gap: 9px;
    color: #514b46;
    font-size: 11.5px;
    font-weight: 550;
}

.auth-v14 .auth14-check input {
    width: 16px;
    height: 16px;
}

.auth-v14 .auth14-forgot {
    font-size: 11.5px;
}

.auth-v14 .auth14-submit {
    height: 50px;
    font-size: 14px;
}

.auth-v14 .auth14-security-note {
    margin-top: 9px;
    color: #6f6964;
    font-size: 10.5px;
}

.auth-v14 .auth14-divider {
    margin: 12px 0 10px;
    color: #827b76;
    font-size: 10px;
}

.auth-v14 .auth14-social {
    min-height: 41px;
    color: #342f2b;
    border-color: #ddd7d2;
    font-size: 10.5px;
}

.auth-v14 .auth14-bottom {
    margin-top: 11px;
    color: #615b56;
    font-size: 11px;
}

.auth-v14 .auth14-page-meta {
    margin-top: 8px;
    color: #746d68;
    font-size: 9.5px;
}

/* Register: same visual quality as login, only slightly denser — never tiny. */
.auth-v14.auth-register .auth14-main {
    padding-top: 22px;
    padding-bottom: 22px;
}

.auth-v14.auth-register .auth14-main-brand {
    margin-bottom: 13px;
}

.auth-v14.auth-register .auth14-panel {
    padding: 28px 34px 25px;
}

.auth-v14.auth-register .auth14-card-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 15px;
}

.auth-v14.auth-register .auth14-heading-kicker {
    margin-bottom: 8px;
    font-size: 10px;
}

.auth-v14.auth-register .auth14-heading h2 {
    font-size: clamp(31px, 2.15vw, 35px);
}

.auth-v14.auth-register .auth14-heading p {
    margin: 7px 0 18px;
    color: #625b56;
    font-size: 13px;
    line-height: 1.5;
}

.auth-v14.auth-register .auth14-field {
    margin-bottom: 11px;
}

.auth-v14.auth-register .auth14-field label {
    margin-bottom: 6px;
    color: #4e4843;
    font-size: 10px;
}

.auth-v14.auth-register .auth14-input {
    height: 47px;
    font-size: 14px;
}

.auth-v14.auth-register .auth14-password-toggle {
    width: 36px;
    height: 36px;
    right: 6px;
}

.auth-v14.auth-register .auth14-form-row {
    margin: 0 0 13px;
}

.auth-v14.auth-register .auth14-submit {
    height: 48px;
}

.auth-v14.auth-register .auth14-security-note {
    margin-top: 8px;
    font-size: 10px;
}

.auth-v14.auth-register .auth14-divider {
    margin: 10px 0;
}

.auth-v14.auth-register .auth14-social {
    min-height: 39px;
    padding: 7px 10px;
    font-size: 10px;
}

.auth-v14.auth-register .auth14-bottom {
    margin-top: 10px;
    font-size: 10.5px;
}

.auth-v14.auth-register .auth14-page-meta {
    margin-top: 7px;
}

/* Normal laptop heights: retain readability; scroll if necessary rather than compress. */
@media (min-width: 1101px) and (max-height: 920px) {
    .auth-v14 .auth14-story {
        padding-top: 24px;
        padding-bottom: 18px;
    }

    .auth-v14 .auth14-story-content {
        margin: 0;
        padding: 24px 0 28px;
    }

    .auth-v14 .auth14-story-content h1 {
        font-size: clamp(44px, 3.7vw, 58px);
    }

    .auth-v14 .auth14-story-content > p {
        margin-top: 12px;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .auth-v14 .auth14-eyebrow {
        margin-bottom: 15px;
        font-size: 10.5px;
    }

    .auth-v14 .auth14-metrics {
        margin-top: 20px;
        padding: 11px 5px;
    }

    .auth-v14 .auth14-capabilities {
        margin-top: 15px;
        gap: 8px;
    }

    .auth-v14 .auth14-capability {
        min-height: 49px;
        padding: 8px 12px;
    }

    .auth-v14 .auth14-capability strong {
        font-size: 11.5px;
    }

    .auth-v14 .auth14-capability small {
        display: block;
        font-size: 9.5px;
    }

    .auth-v14 .auth14-main {
        align-content: center;
        padding-top: 18px;
        padding-bottom: 18px;
        overflow-y: auto;
    }

    .auth-v14.auth-register .auth14-panel {
        padding: 25px 32px 22px;
    }

    .auth-v14.auth-register .auth14-card-icon {
        width: 42px;
        height: 42px;
        margin-bottom: 10px;
    }

    .auth-v14.auth-register .auth14-heading-kicker {
        margin-bottom: 7px;
        font-size: 9.5px;
    }

    .auth-v14.auth-register .auth14-heading h2 {
        font-size: 30px;
    }

    .auth-v14.auth-register .auth14-heading p {
        margin: 6px 0 15px;
        font-size: 12.5px;
    }

    .auth-v14.auth-register .auth14-field {
        margin-bottom: 9px;
    }

    .auth-v14.auth-register .auth14-field label {
        margin-bottom: 5px;
        font-size: 9.5px;
    }

    .auth-v14.auth-register .auth14-input {
        height: 44px;
        font-size: 13.5px;
    }

    .auth-v14.auth-register .auth14-submit {
        height: 45px;
        font-size: 13.5px;
    }

    .auth-v14.auth-register .auth14-social {
        min-height: 37px;
        font-size: 9.5px;
    }
}

/* Short screens: keep normal-sized controls and allow the form column to scroll. */
@media (min-width: 1101px) and (max-height: 760px) {
    .auth-v14 .auth14-main {
        place-items: start center;
        padding-top: 18px;
        padding-bottom: 24px;
    }

    .auth-v14 .auth14-story-content {
        justify-content: flex-start;
        padding-top: 24px;
    }

    .auth-v14 .auth14-story-content h1 {
        font-size: clamp(40px, 3.4vw, 52px);
    }

    .auth-v14 .auth14-capability small {
        display: none;
    }
}

/* Tablet/mobile keep high contrast and comfortable touch targets. */
@media (max-width: 1100px) {
    .auth-v14 .auth14-main-inner,
    .auth-v14.auth-register .auth14-main-inner {
        width: min(100%, 540px);
    }

    .auth-v14 .auth14-panel,
    .auth-v14.auth-register .auth14-panel {
        padding: 30px 28px 26px;
    }

    .auth-v14 .auth14-field label,
    .auth-v14.auth-register .auth14-field label {
        font-size: 10px;
    }

    .auth-v14 .auth14-input,
    .auth-v14.auth-register .auth14-input {
        height: 50px;
        font-size: 14px;
    }
}

@media (max-width: 560px) {
    .auth-v14 .auth14-panel,
    .auth-v14.auth-register .auth14-panel {
        padding: 27px 20px 24px;
    }

    .auth-v14 .auth14-heading h2,
    .auth-v14.auth-register .auth14-heading h2 {
        font-size: 30px;
    }

    .auth-v14 .auth14-heading p,
    .auth-v14.auth-register .auth14-heading p {
        font-size: 13px;
    }

    .auth-v14 .auth14-social-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================================================== 
   V17 — Homepage visual language aligned with the premium auth workspace
   Keeps the existing v13 layout/content while applying the same deep-navy
   grid texture, warm amber/orange highlights, violet accents and glass depth.
   ========================================================================== */

body.landing-v17 {
    --home-navy: #081226;
    --home-navy-2: #0d1a31;
    --home-navy-3: #13223c;
    --home-line: rgba(148, 163, 184, .13);
    --home-line-strong: rgba(148, 163, 184, .22);
    --home-text: #eef4fb;
    --home-muted: #aab8cb;
    --home-soft: #d7e1ee;
    --home-orange: #f97316;
    --home-amber: #ffad32;
    --home-gold: #ffd79a;
    --home-violet: #7457ff;
    --home-cyan: #63cfe2;
    --home-green: #22c55e;
    --home-cream: #fffaf5;
    --home-cream-2: #fffdf9;
    background: var(--home-navy);
    color: var(--home-text);
}

.landing-v17 main {
    position: relative;
    background: var(--home-navy);
}

.landing-v17 .site-container {
    width: min(1540px, calc(100% - clamp(36px, 6vw, 104px)));
}

/* Header ------------------------------------------------------------------ */
.landing-v17 .site-header {
    border-bottom: 1px solid rgba(148, 163, 184, .12);
    background: rgba(7, 16, 32, .86);
    box-shadow: 0 14px 40px rgba(2, 6, 23, .22);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
}

.landing-v17 .site-brand,
.landing-v17 .site-nav a {
    color: #eef4fb;
}

.landing-v17 .site-brand-logo {
    border-color: rgba(255,255,255,.14);
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 30px rgba(2,6,23,.25);
}

.landing-v17 .site-nav a {
    color: #b8c5d6;
}

.landing-v17 .site-nav a:hover {
    color: #fff;
}

.landing-v17 .site-nav a::after {
    background: linear-gradient(90deg, var(--home-orange), var(--home-amber));
}

.landing-v17 .nav-actions .btn-ghost {
    color: #dbe6f3;
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.landing-v17 .nav-actions .btn-ghost:hover {
    color: #fff;
    border-color: rgba(249,115,22,.34);
    background: rgba(249,115,22,.10);
}

.landing-v17 .mobile-nav-toggle {
    color: #f8fafc;
    border-color: rgba(255,255,255,.13);
    background: rgba(255,255,255,.055);
}

/* Hero -------------------------------------------------------------------- */
.landing-v17 .hero-section {
    min-height: 760px;
    isolation: isolate;
    overflow: hidden;
    padding-top: clamp(92px, 8vw, 132px);
    background:
        radial-gradient(circle at 84% 8%, rgba(116,87,255,.34), transparent 30rem),
        radial-gradient(circle at 8% 86%, rgba(29,174,217,.17), transparent 28rem),
        radial-gradient(circle at 72% 88%, rgba(249,115,22,.18), transparent 32rem),
        linear-gradient(145deg, #071124 0%, #0b1830 54%, #11182c 100%);
}

.landing-v17 .hero-section::before {
    opacity: 1;
    background-image:
        linear-gradient(rgba(148,163,184,.065) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.065) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: homeGridDrift 24s linear infinite;
}

.landing-v17 .hero-section::after {
    width: 620px;
    height: 620px;
    right: -190px;
    top: -190px;
    background: radial-gradient(circle, rgba(116,87,255,.22), transparent 68%);
    filter: blur(8px);
}

.landing-v17 .hero-orb-one {
    background: rgba(249,115,22,.16);
}

.landing-v17 .hero-orb-two {
    background: rgba(99,207,226,.12);
}

.landing-v17 .hero-copy {
    position: relative;
    z-index: 3;
}

.landing-v17 .eyebrow {
    color: #dfe9f6;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(2,6,23,.15);
    backdrop-filter: blur(14px);
}

.landing-v17 .eyebrow i {
    color: var(--home-green);
}

.landing-v17 .hero-copy h1 {
    color: #fff;
    text-shadow: 0 16px 48px rgba(2,6,23,.30);
}

.landing-v17 .hero-copy h1 span {
    background: linear-gradient(92deg, #fff1dc 0%, #ffc86f 42%, #ff9b21 74%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 10px 28px rgba(249,115,22,.10));
}

.landing-v17 .hero-lead {
    color: #b7c5d8;
}

.landing-v17 .btn-primary {
    color: #fff;
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(115deg, #7c4de8 0%, #d85f5a 46%, #ff970d 100%);
    box-shadow: 0 18px 46px rgba(249,115,22,.20), inset 0 1px 0 rgba(255,255,255,.20);
}

.landing-v17 .btn-primary:hover {
    color: #fff;
    box-shadow: 0 24px 56px rgba(249,115,22,.28);
}

.landing-v17 .btn-soft {
    color: #e6edf7;
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 34px rgba(2,6,23,.14);
    backdrop-filter: blur(14px);
}

.landing-v17 .btn-soft:hover {
    color: #fff;
    border-color: rgba(249,115,22,.28);
    background: rgba(249,115,22,.09);
}

.landing-v17 .app-availability-note,
.landing-v17 .hero-proof {
    color: #c7d4e5;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 42px rgba(2,6,23,.12);
    backdrop-filter: blur(14px);
}

.landing-v17 .app-availability-note i {
    color: var(--home-amber);
}

.landing-v17 .hero-proof strong {
    color: #edf4fb;
}

.landing-v17 .hero-proof small {
    color: #8fa1ba;
}

.landing-v17 .proof-avatars span {
    border-color: #0d1a31;
    color: #fff;
    background: linear-gradient(145deg, #20314f, #13233d);
}

.landing-v17 .proof-avatars span:nth-child(2) {
    color: #07201d;
    background: #8fe0d9;
}

.landing-v17 .proof-avatars span:nth-child(3) {
    color: #3b2b00;
    background: #ffd58d;
}

.landing-v17 .app-hero-stage {
    border-color: rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.08), transparent 32%),
        radial-gradient(circle at 88% 18%, rgba(116,87,255,.30), transparent 32%),
        radial-gradient(circle at 78% 88%, rgba(249,115,22,.18), transparent 38%),
        linear-gradient(145deg, #101d36 0%, #12203b 46%, #111728 100%);
    box-shadow: 0 48px 120px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.06);
}

.landing-v17 .app-hero-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.landing-v17 .app-poster-card {
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 30px 80px rgba(2,6,23,.35);
}

.landing-v17 .floating-card {
    color: #0f172a;
    border-color: rgba(255,255,255,.75);
    background: rgba(255,255,255,.95);
}

/* Stats ------------------------------------------------------------------- */
.landing-v17 .stats-strip {
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(90deg, rgba(22,36,61,.96), rgba(29,39,65,.92), rgba(40,31,42,.92));
    box-shadow: 0 28px 80px rgba(2,6,23,.36), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(18px);
}

.landing-v17 .stats-grid > div + div {
    border-left-color: rgba(255,255,255,.10);
}

.landing-v17 .stats-grid strong {
    color: #fff;
}

.landing-v17 .stats-grid span {
    color: #8ea0b9;
    text-transform: uppercase;
    letter-spacing: .07em;
}

/* Shared dark-section typography ----------------------------------------- */
.landing-v17 .app-experience-section,
.landing-v17 #services,
.landing-v17 #how-it-works {
    color: var(--home-text);
    background:
        radial-gradient(circle at 92% 18%, rgba(116,87,255,.12), transparent 26rem),
        radial-gradient(circle at 4% 76%, rgba(249,115,22,.08), transparent 24rem),
        linear-gradient(180deg, #081326 0%, #0b172b 100%);
}

.landing-v17 .app-experience-section::before,
.landing-v17 #services::before,
.landing-v17 #how-it-works::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
    background-size: 52px 52px;
}

.landing-v17 .app-experience-section .section-heading h2,
.landing-v17 #services .section-heading h2,
.landing-v17 #how-it-works .section-heading h2 {
    color: #fff;
}

.landing-v17 .app-experience-section .section-heading p,
.landing-v17 #services .section-heading p,
.landing-v17 #how-it-works .section-heading p {
    color: #93a4bb;
}

.landing-v17 .section-kicker,
.landing-v17 .cta-kicker {
    color: #ffbb5c;
    border: 1px solid rgba(249,115,22,.16);
    background: rgba(249,115,22,.08);
}

/* App experience ---------------------------------------------------------- */
.landing-v17 .experience-tab {
    color: #a9b8cb;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 14px 34px rgba(2,6,23,.14);
}

.landing-v17 .experience-tab:hover {
    color: #fff;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.065);
}

.landing-v17 .experience-tab.active {
    color: #fff;
    border-color: rgba(249,115,22,.30);
    background: linear-gradient(120deg, rgba(116,87,255,.22), rgba(249,115,22,.14));
    box-shadow: 0 16px 42px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.07);
}

.landing-v17 .experience-tab-icon {
    color: #9edcf6;
    background: rgba(99,207,226,.09);
}

.landing-v17 .experience-tab.active .experience-tab-icon {
    color: #fff;
    background: rgba(249,115,22,.18);
}

.landing-v17 .experience-autoplay-label {
    color: #8495ad;
}

.landing-v17 .experience-autoplay-label span,
.landing-v17 .experience-live-dot {
    background: var(--home-green);
    box-shadow: 0 0 0 4px rgba(34,197,94,.11);
}

.landing-v17 .experience-shell {
    border-color: rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 8% 16%, rgba(99,207,226,.07), transparent 26rem),
        radial-gradient(circle at 92% 80%, rgba(249,115,22,.08), transparent 24rem),
        rgba(12,25,46,.94);
    box-shadow: 0 38px 110px rgba(2,6,23,.42), inset 0 1px 0 rgba(255,255,255,.045);
}

.landing-v17 .experience-progress-rail {
    background: rgba(255,255,255,.07);
}

.landing-v17 .experience-progress-fill,
.landing-v17 .experience-tab-progress {
    background: linear-gradient(90deg, var(--home-violet), var(--home-orange), var(--home-amber));
}

.landing-v17 .experience-visual {
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 22% 8%, rgba(99,207,226,.10), transparent 38%),
        radial-gradient(circle at 80% 86%, rgba(116,87,255,.20), transparent 40%),
        linear-gradient(145deg, #111f39 0%, #172642 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 26px 66px rgba(2,6,23,.22);
}

.landing-v17 .experience-copy h3 {
    color: #fff;
}

.landing-v17 .experience-copy > p {
    color: #a3b2c5;
}

.landing-v17 .experience-slide-meta {
    color: #ffb95a;
}

.landing-v17 .experience-feature-list li {
    color: #d7e1ed;
}

.landing-v17 .experience-feature-list li::before {
    color: #102018;
    background: #87dfd5;
}

.landing-v17 .experience-arrow {
    color: #dce6f3;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
}

.landing-v17 .experience-arrow:hover {
    color: #fff;
    border-color: rgba(249,115,22,.28);
    background: rgba(249,115,22,.10);
}

.landing-v17 .experience-dot {
    background: rgba(255,255,255,.18);
}

.landing-v17 .experience-dot.active {
    background: var(--home-orange);
    box-shadow: 0 0 0 5px rgba(249,115,22,.10);
}

/* Categories -------------------------------------------------------------- */
.landing-v17 .category-card {
    overflow: hidden;
    border-color: rgba(255,255,255,.08);
    color: #eef4fb;
    background:
        radial-gradient(circle at 92% 0%, rgba(116,87,255,.12), transparent 45%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.028));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 50px rgba(2,6,23,.17);
}

.landing-v17 .category-card::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -58px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249,115,22,.15), transparent 70%);
    pointer-events: none;
}

.landing-v17 .category-card:hover {
    border-color: rgba(249,115,22,.22);
    background:
        radial-gradient(circle at 92% 0%, rgba(116,87,255,.18), transparent 45%),
        linear-gradient(145deg, rgba(255,255,255,.072), rgba(249,115,22,.035));
    box-shadow: 0 30px 74px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

.landing-v17 .category-icon {
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, #7b55e8 0%, #e16556 52%, #ff9a0f 100%);
    box-shadow: 0 14px 32px rgba(249,115,22,.16), inset 0 1px 0 rgba(255,255,255,.20);
}

.landing-v17 .category-card h3 {
    color: #f5f8fc;
}

.landing-v17 .category-card p {
    color: #91a2ba;
}

.landing-v17 .category-arrow {
    color: #a8b7ca;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

.landing-v17 .category-card:hover .category-arrow {
    color: #fff;
    border-color: rgba(249,115,22,.25);
    background: rgba(249,115,22,.10);
}

/* Featured services — warm contrast section ------------------------------ */
.landing-v17 .section-muted {
    color: #1b1714;
    background:
        radial-gradient(circle at 8% 12%, rgba(249,115,22,.075), transparent 25rem),
        radial-gradient(circle at 92% 88%, rgba(116,87,255,.06), transparent 30rem),
        linear-gradient(180deg, #fffaf5 0%, #fffdf9 100%);
}

.landing-v17 .section-muted::before {
    opacity: .20;
    background-image:
        linear-gradient(rgba(129,93,61,.075) 1px, transparent 1px),
        linear-gradient(90deg, rgba(129,93,61,.075) 1px, transparent 1px);
    background-size: 52px 52px;
}

.landing-v17 .section-muted .section-heading h2 {
    color: #17120f;
}

.landing-v17 .section-muted .section-heading p {
    color: #7f746c;
}

.landing-v17 .service-card {
    border: 1px solid #eee6df;
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 52px rgba(74,52,38,.08);
}

.landing-v17 .service-card:hover {
    border-color: rgba(249,115,22,.20);
    box-shadow: 0 30px 80px rgba(74,52,38,.14);
}

.landing-v17 .service-image {
    border-bottom: 1px solid #f0e8e1;
}

.landing-v17 .service-image::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 54%, rgba(8,18,38,.08));
}

.landing-v17 .service-body h3 {
    color: #1d1713;
}

.landing-v17 .service-body p {
    color: #7b716a;
}

.landing-v17 .service-meta span {
    color: #0f766e;
}

.landing-v17 .service-badge {
    color: #8a4b0d;
    border-color: #fde0ba;
    background: #fff4e4;
}

.landing-v17 .service-footer {
    border-top-color: #eee7e0;
}

.landing-v17 .service-footer small {
    color: #9b918b;
}

.landing-v17 .service-footer strong {
    color: #201915;
}

.landing-v17 .service-footer > a,
.landing-v17 .service-footer-action {
    color: #fff;
    background: linear-gradient(145deg, #7a53e7, #f97316);
    box-shadow: 0 10px 24px rgba(249,115,22,.16);
}

/* How it works ------------------------------------------------------------ */
.landing-v17 .step-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085);
    color: #eef4fb;
    background:
        linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 18px 48px rgba(2,6,23,.18);
}

.landing-v17 .step-card:hover {
    transform: translateY(-6px);
    border-color: rgba(249,115,22,.20);
    box-shadow: 0 30px 70px rgba(2,6,23,.28);
}

.landing-v17 .step-icon {
    color: #fff;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(145deg, #7253e5, #f97316);
    box-shadow: 0 14px 32px rgba(249,115,22,.14);
}

.landing-v17 .step-number {
    color: rgba(255,255,255,.055);
    text-shadow: none;
}

.landing-v17 .step-card h3 {
    color: #fff;
}

.landing-v17 .step-card p {
    color: #94a5bb;
}

/* About — warm right-panel feel from auth ------------------------------- */
.landing-v17 .about-section {
    color: #1b1714;
    background:
        radial-gradient(circle at 82% 8%, rgba(249,115,22,.08), transparent 26rem),
        radial-gradient(circle at 20% 88%, rgba(116,87,255,.055), transparent 28rem),
        linear-gradient(145deg, #fffaf5 0%, #fffdfb 58%, #f8f7fb 100%);
}

.landing-v17 .about-section::before {
    opacity: .18;
    background-image: radial-gradient(rgba(15,23,42,.12) .7px, transparent .7px);
    background-size: 18px 18px;
}

.landing-v17 .about-copy h2 {
    color: #17120f;
}

.landing-v17 .about-copy > p {
    color: #81766f;
}

.landing-v17 .about-visual {
    border: 1px solid rgba(255,255,255,.08);
    background-color: #0c172b;
    box-shadow: 0 34px 90px rgba(33,25,21,.18);
}

.landing-v17 .about-pattern {
    background:
        linear-gradient(rgba(148,163,184,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.055) 1px, transparent 1px),
        radial-gradient(circle at 82% 20%, rgba(116,87,255,.24), transparent 18rem),
        radial-gradient(circle at 12% 90%, rgba(99,207,226,.12), transparent 20rem),
        linear-gradient(145deg, #0a1528, #101b31 64%, #241b20);
    background-size: 42px 42px, 42px 42px, auto, auto, auto;
}

.landing-v17 .about-pattern > span {
    color: #9edcf6;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.05);
}

.landing-v17 .about-pattern strong {
    color: #fff;
}

.landing-v17 .about-pattern small {
    color: #93a3b9;
}

.landing-v17 .feature-list > div {
    border-color: #eee6df;
    background: rgba(255,255,255,.88);
    box-shadow: 0 12px 34px rgba(74,52,38,.055);
}

.landing-v17 .feature-list > div > span {
    color: #fff;
    background: linear-gradient(145deg, #7353e5, #f97316);
}

.landing-v17 .feature-list strong {
    color: #221a16;
}

.landing-v17 .feature-list small {
    color: #857a73;
}

/* CTA --------------------------------------------------------------------- */
.landing-v17 .cta-section {
    position: relative;
    background:
        linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px),
        #081326;
    background-size: 52px 52px;
}

.landing-v17 .cta-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.17), transparent 18rem),
        radial-gradient(circle at 6% 90%, rgba(99,207,226,.13), transparent 24rem),
        linear-gradient(110deg, #6f4ce1 0%, #b74e6d 40%, #f97316 76%, #ff9d0b 100%);
    box-shadow: 0 36px 100px rgba(2,6,23,.38), inset 0 1px 0 rgba(255,255,255,.12);
}

.landing-v17 .cta-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.7), transparent 76%);
}

.landing-v17 .cta-card > * {
    position: relative;
    z-index: 2;
}

.landing-v17 .cta-kicker {
    color: #fff4e3;
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.10);
}

/* Footer ------------------------------------------------------------------ */
.landing-v17 .site-footer {
    border-top: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at 92% 12%, rgba(116,87,255,.10), transparent 26rem),
        linear-gradient(180deg, #071122, #050b16);
}

.landing-v17 .site-footer .site-brand,
.landing-v17 .footer-grid h3 {
    color: #fff;
}

.landing-v17 .footer-brand-col p,
.landing-v17 .footer-grid a,
.landing-v17 .footer-address,
.landing-v17 .footer-bottom {
    color: #8293aa;
}

.landing-v17 .footer-grid a:hover {
    color: #ffc36c;
}

.landing-v17 .social-links a {
    color: #cdd8e5;
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.045);
}

.landing-v17 .social-links a:hover {
    color: #fff;
    border-color: rgba(249,115,22,.24);
    background: rgba(249,115,22,.10);
}

/* Motion ------------------------------------------------------------------ */
@keyframes homeGridDrift {
    from { background-position: 0 0, 0 0; }
    to { background-position: 48px 48px, 48px 48px; }
}

@media (prefers-reduced-motion: no-preference) {
    .landing-v17 .category-card,
    .landing-v17 .step-card,
    .landing-v17 .service-card,
    .landing-v17 .experience-shell {
        transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
    }

    .landing-v17 .app-hero-stage {
        animation: homeStageFloat 7s ease-in-out infinite;
    }

    @keyframes homeStageFloat {
        0%, 100% { transform: rotateY(-1.3deg) rotateX(.6deg) translateY(0); }
        50% { transform: rotateY(-.4deg) rotateX(.2deg) translateY(-8px); }
    }
}

@media (max-width: 991.98px) {
    .landing-v17 .site-header.menu-open .site-nav,
    .landing-v17 .site-header.menu-open .nav-actions {
        border-color: rgba(255,255,255,.10);
        background: rgba(8,18,38,.98);
        box-shadow: 0 24px 54px rgba(2,6,23,.38);
    }

    .landing-v17 .hero-copy,
    .landing-v17 .section-heading.centered {
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .landing-v17 .site-container {
        width: calc(100% - 30px);
    }

    .landing-v17 .hero-section {
        padding-top: 68px;
    }

    .landing-v17 .stats-strip {
        width: calc(100% - 24px);
    }

    .landing-v17 .stats-grid > div + div {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .landing-v17 .experience-shell,
    .landing-v17 .category-card,
    .landing-v17 .step-card,
    .landing-v17 .service-card,
    .landing-v17 .cta-card {
        border-radius: 20px;
    }
}

/* ========================================================================== 
   V18 — Refined production homepage
   Less oversized typography/spacing, subtle gradient depth and interactive
   statistic cards. Keeps the v17 visual language without the heavy/bold feel.
   ========================================================================== */
body.landing-v18 {
    --home-content-max: 1760px;
    --home-gutter: clamp(22px, 3.1vw, 58px);
    --home-section-y: clamp(68px, 5.5vw, 92px);
    --home-card-radius: 22px;
    --home-soft-shadow: 0 18px 52px rgba(2, 6, 23, .16);
}

.landing-v18 .site-container {
    width: min(var(--home-content-max), calc(100% - (var(--home-gutter) * 2)));
}

/* Header: cleaner, calmer, slightly more compact */
.landing-v18 .nav-wrap {
    height: 76px;
}

.landing-v18 .site-brand {
    font-size: 17px;
    font-weight: 730;
}

.landing-v18 .site-nav {
    gap: 27px;
}

.landing-v18 .site-nav a {
    font-size: 13.5px;
    font-weight: 620;
}

.landing-v18 .nav-actions .btn-ghost {
    min-height: 44px;
    padding-inline: 18px;
    border-radius: 13px;
    font-weight: 650;
}

/* Hero: keep the premium workspace mood, reduce visual weight */
.landing-v18 .hero-section {
    min-height: auto;
    padding: clamp(72px, 6vw, 94px) 0 clamp(82px, 6.4vw, 104px);
    background:
        radial-gradient(circle at 78% 10%, rgba(116,87,255,.27), transparent 29rem),
        radial-gradient(circle at 5% 82%, rgba(44,183,217,.12), transparent 25rem),
        radial-gradient(circle at 70% 92%, rgba(249,115,22,.11), transparent 29rem),
        linear-gradient(145deg, #071124 0%, #0a172d 55%, #10182b 100%);
}

.landing-v18 .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(500px, .96fr);
    gap: clamp(44px, 4.2vw, 78px);
}

.landing-v18 .eyebrow {
    padding: 8px 13px;
    font-size: 11.5px;
    font-weight: 650;
}

.landing-v18 .hero-copy h1 {
    max-width: 760px;
    margin: 22px 0 22px;
    font-size: clamp(50px, 4.5vw, 72px);
    font-weight: 720;
    line-height: 1.02;
    letter-spacing: -.042em;
    text-shadow: 0 13px 34px rgba(2,6,23,.24);
}

.landing-v18 .hero-copy h1 span {
    margin-top: 4px;
    background: linear-gradient(100deg, #ffe7bd 0%, #ffc86f 35%, #ffa32d 68%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.landing-v18 .hero-lead {
    max-width: 690px;
    color: #aebdd0;
    font-size: clamp(16px, 1.08vw, 18px);
    line-height: 1.72;
}

.landing-v18 .hero-actions,
.landing-v18 .hero-store-actions {
    margin-top: 28px;
}

.landing-v18 .btn-lg {
    min-height: 52px;
    padding-inline: 22px;
    font-size: 14px;
    font-weight: 680;
}

.landing-v18 .app-hero-stage {
    min-height: 540px;
    border-radius: 28px;
    box-shadow: 0 34px 90px rgba(2,6,23,.34), inset 0 1px 0 rgba(255,255,255,.055);
}

/* Stats: four real cards instead of a single heavy strip */
.landing-v18 .stats-strip {
    width: 100%;
    margin: 0;
    padding: 24px 0 12px;
    border: 0;
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(8,18,38,.96), rgba(9,19,38,.99));
    box-shadow: none;
    backdrop-filter: none;
}

.landing-v18 .stats-strip .site-container {
    width: min(var(--home-content-max), calc(100% - (var(--home-gutter) * 2)));
}

.landing-v18 .stats-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.landing-v18 .stats-grid > .stat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 102px;
    padding: 19px 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.085);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 30px rgba(2,6,23,.14);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.landing-v18 .stats-grid > .stat-card::after {
    content: "";
    position: absolute;
    inset: auto -34px -46px auto;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    opacity: .20;
    filter: blur(2px);
    transition: transform .3s ease, opacity .3s ease;
}

.landing-v18 .stat-card-services::after { background: #7457ff; }
.landing-v18 .stat-card-providers::after { background: #14b8a6; }
.landing-v18 .stat-card-categories::after { background: #f59e0b; }
.landing-v18 .stat-card-access::after { background: #38bdf8; }

.landing-v18 .stats-grid > .stat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: 0 22px 50px rgba(2,6,23,.24), inset 0 1px 0 rgba(255,255,255,.06);
}

.landing-v18 .stats-grid > .stat-card:hover::after {
    transform: scale(1.15);
    opacity: .30;
}

.landing-v18 .stats-grid > div + div {
    border-left: 1px solid rgba(255,255,255,.085);
}

.landing-v18 .stat-icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    color: #fff;
    font-size: 17px;
    background: linear-gradient(145deg, rgba(116,87,255,.82), rgba(249,115,22,.72));
    box-shadow: 0 11px 26px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.20);
}

.landing-v18 .stat-card-providers .stat-icon { background: linear-gradient(145deg, #16a085, #22c55e); }
.landing-v18 .stat-card-categories .stat-icon { background: linear-gradient(145deg, #e98a17, #fbbf24); }
.landing-v18 .stat-card-access .stat-icon { background: linear-gradient(145deg, #3b82f6, #22d3ee); }

.landing-v18 .stat-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.landing-v18 .stats-grid .stat-copy strong {
    font-size: clamp(25px, 1.8vw, 32px);
    font-weight: 720;
    letter-spacing: -.035em;
}

.landing-v18 .stats-grid .stat-copy > span {
    color: #8fa0b7;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .055em;
}

/* Section rhythm and type hierarchy */
.landing-v18 .section {
    padding: var(--home-section-y) 0;
}

.landing-v18 .section-heading {
    margin-bottom: clamp(34px, 3.1vw, 48px);
}

.landing-v18 .section-heading.centered {
    max-width: 820px;
}

.landing-v18 .section-heading h2,
.landing-v18 .about-copy h2 {
    margin-top: 12px;
    font-size: clamp(32px, 2.65vw, 44px);
    font-weight: 710;
    line-height: 1.1;
    letter-spacing: -.035em;
}

.landing-v18 .section-heading p,
.landing-v18 .about-copy > p {
    max-width: 720px;
    color: #9aabc0;
    font-size: 15px;
    line-height: 1.72;
}

.landing-v18 .section-kicker,
.landing-v18 .cta-kicker {
    font-size: 10px;
    font-weight: 720;
    letter-spacing: .105em;
}

/* App showcase: more compact and elegant */
.landing-v18 .app-experience-section {
    padding-top: clamp(76px, 6vw, 96px);
}

.landing-v18 .experience-navigation {
    margin-bottom: 22px;
}

.landing-v18 .experience-tab {
    min-height: 50px;
    padding: 0 17px;
    border-radius: 14px;
    font-size: 12.5px;
    font-weight: 650;
}

.landing-v18 .experience-shell,
.landing-v18 .experience-panel {
    min-height: 610px;
}

.landing-v18 .experience-shell {
    border-radius: 26px;
}

.landing-v18 .experience-panel {
    grid-template-columns: minmax(420px, .92fr) minmax(0, 1.08fr);
    gap: clamp(38px, 4vw, 66px);
    padding: 44px 50px 70px;
}

.landing-v18 .experience-visual {
    min-height: 445px;
    border-radius: 24px;
}

.landing-v18 .experience-copy h3 {
    font-size: clamp(34px, 2.8vw, 46px);
    font-weight: 710;
    line-height: 1.08;
    letter-spacing: -.038em;
}

.landing-v18 .experience-copy > p {
    font-size: 15.5px;
    line-height: 1.72;
}

/* Category cards: subtle gradients, not glowing boxes */
.landing-v18 .category-grid {
    gap: 18px;
}

.landing-v18 .category-card {
    min-height: 178px;
    padding: 22px;
    border-radius: var(--home-card-radius);
    background:
        radial-gradient(circle at 96% 2%, rgba(116,87,255,.10), transparent 11rem),
        linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.024));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 34px rgba(2,6,23,.13);
}

.landing-v18 .category-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,183,77,.17);
    box-shadow: 0 24px 56px rgba(2,6,23,.24);
}

.landing-v18 .category-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    font-size: 18px;
}

.landing-v18 .category-card h3 {
    margin-top: 17px;
    font-size: 16px;
    font-weight: 680;
}

/* Featured services: warmer gradient surface, lower visual weight */
.landing-v18 .section-muted {
    background:
        radial-gradient(circle at 5% 12%, rgba(249,115,22,.055), transparent 24rem),
        radial-gradient(circle at 92% 78%, rgba(116,87,255,.05), transparent 25rem),
        linear-gradient(145deg, #fffaf5 0%, #fffdfb 52%, #f8f7fb 100%);
}

.landing-v18 .section-muted .section-heading h2 {
    color: #201915;
    font-weight: 710;
}

.landing-v18 .section-muted .section-heading p {
    color: #857a73;
}

.landing-v18 .service-grid {
    gap: 20px;
}

.landing-v18 .service-card {
    border: 1px solid #eee8e2;
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(66,48,36,.07);
}

.landing-v18 .service-card:hover {
    transform: translateY(-6px);
    border-color: #e6d9cf;
    box-shadow: 0 24px 58px rgba(66,48,36,.12);
}

.landing-v18 .service-image {
    height: 220px;
}

.landing-v18 .service-body {
    padding: 20px 21px 19px;
}

.landing-v18 .service-body h3 {
    font-size: 18px;
    font-weight: 690;
}

.landing-v18 .service-body p {
    min-height: 58px;
    font-size: 13px;
    line-height: 1.65;
}

/* Steps: tighter with subtle color accents */
.landing-v18 .steps-grid {
    gap: 18px;
}

.landing-v18 .step-card {
    min-height: 210px;
    padding: 24px;
    border-radius: 20px;
    background:
        radial-gradient(circle at 90% 10%, rgba(116,87,255,.09), transparent 10rem),
        linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.023));
}

.landing-v18 .step-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
}

.landing-v18 .step-card h3 {
    margin-top: 22px;
    font-size: 16.5px;
    font-weight: 680;
}

.landing-v18 .step-card p {
    font-size: 13px;
    line-height: 1.65;
}

.landing-v18 .step-number {
    top: 16px;
    right: 20px;
    font-size: 46px;
}

/* About and CTA: remove oversized empty breathing room */
.landing-v18 .about-grid {
    gap: clamp(42px, 5vw, 82px);
}

.landing-v18 .about-visual {
    min-height: 470px;
    border-radius: 26px;
}

.landing-v18 .about-pattern {
    padding: 48px;
}

.landing-v18 .about-pattern strong {
    font-size: 30px;
    font-weight: 700;
}

.landing-v18 .feature-list {
    gap: 14px;
    margin-top: 28px;
}

.landing-v18 .feature-list > div {
    padding: 13px 14px;
    border-radius: 14px;
}

.landing-v18 .cta-section {
    padding: 18px 0 66px;
}

.landing-v18 .cta-card {
    min-height: 220px;
    padding: 40px 46px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.15), transparent 16rem),
        linear-gradient(110deg, #6848d8 0%, #9a4fa0 37%, #e26542 70%, #ff9817 100%);
    box-shadow: 0 26px 68px rgba(2,6,23,.28), inset 0 1px 0 rgba(255,255,255,.10);
}

.landing-v18 .cta-card h2 {
    font-size: clamp(30px, 2.5vw, 40px);
    font-weight: 700;
}

.landing-v18 .cta-card p {
    font-size: 14.5px;
}

.landing-v18 .site-footer {
    padding-top: 52px;
}

.landing-v18 .footer-grid {
    gap: 48px;
    padding-bottom: 40px;
}

/* Hover polish across major cards */
@media (prefers-reduced-motion: no-preference) {
    .landing-v18 .stat-icon,
    .landing-v18 .category-icon,
    .landing-v18 .step-icon {
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .landing-v18 .stat-card:hover .stat-icon,
    .landing-v18 .category-card:hover .category-icon,
    .landing-v18 .step-card:hover .step-icon {
        transform: translateY(-2px) scale(1.035);
        box-shadow: 0 16px 34px rgba(249,115,22,.15);
    }
}

@media (max-width: 1199.98px) {
    .landing-v18 .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(440px, .92fr);
        gap: 38px;
    }

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

    .landing-v18 .experience-panel {
        padding-inline: 36px;
    }
}

@media (max-width: 991.98px) {
    .landing-v18 .site-container {
        width: calc(100% - 36px);
    }

    .landing-v18 .hero-grid,
    .landing-v18 .experience-panel {
        grid-template-columns: 1fr;
    }

    .landing-v18 .hero-copy h1 {
        margin-inline: auto;
    }

    .landing-v18 .hero-lead {
        margin-inline: auto;
    }

    .landing-v18 .app-hero-stage {
        min-height: 500px;
    }

    .landing-v18 .experience-shell,
    .landing-v18 .experience-panel {
        min-height: auto;
    }

    .landing-v18 .experience-panel {
        gap: 32px;
        padding: 36px 30px 66px;
    }
}

@media (max-width: 767.98px) {
    .landing-v18 .site-container,
    .landing-v18 .stats-strip .site-container {
        width: calc(100% - 28px);
    }

    .landing-v18 .hero-section {
        padding: 58px 0 72px;
    }

    .landing-v18 .hero-copy h1 {
        font-size: clamp(42px, 12vw, 56px);
    }

    .landing-v18 .section {
        padding: 58px 0;
    }

    .landing-v18 .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 11px;
    }

    .landing-v18 .stats-grid > .stat-card {
        min-height: 92px;
        padding: 15px;
        gap: 11px;
    }

    .landing-v18 .stat-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 15px;
    }

    .landing-v18 .stats-grid .stat-copy strong {
        font-size: 24px;
    }

    .landing-v18 .experience-panel {
        padding: 26px 18px 62px;
    }

    .landing-v18 .experience-visual {
        min-height: 360px;
    }

    .landing-v18 .cta-card {
        padding: 30px 24px;
        min-height: 0;
    }
}

@media (max-width: 479.98px) {
    .landing-v18 .stats-grid {
        grid-template-columns: 1fr;
    }

    .landing-v18 .stats-grid > .stat-card {
        min-height: 82px;
    }
}

/* ========================================================================== 
   V19 — Cool aurora homepage + vivid statistic hover + back-to-top
   Keeps the v18 structure, but removes the near-black/heavy feeling.
   ========================================================================== */
body.landing-v18 {
    --v19-bg-deep: #111d34;
    --v19-bg-mid: #182944;
    --v19-bg-soft: #1d2d49;
    --v19-line: rgba(203, 213, 225, .15);
    --v19-text: #eaf1fb;
    --v19-muted: #b8c6d9;
}

/* A lighter "midnight aurora" instead of almost-black panels. */
.landing-v18 .site-header {
    background: rgba(18, 31, 52, .92);
    border-bottom-color: rgba(203, 213, 225, .12);
    box-shadow: 0 12px 34px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.landing-v18 .hero-section {
    background:
        radial-gradient(circle at 82% 10%, rgba(124, 92, 255, .30), transparent 31rem),
        radial-gradient(circle at 9% 78%, rgba(45, 212, 191, .16), transparent 28rem),
        radial-gradient(circle at 70% 92%, rgba(251, 146, 60, .13), transparent 30rem),
        linear-gradient(138deg, #111d34 0%, #172844 48%, #24213f 100%);
}

.landing-v18 .hero-section::before {
    opacity: .78;
    background-image:
        linear-gradient(rgba(191, 219, 254, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(191, 219, 254, .055) 1px, transparent 1px);
}

.landing-v18 .app-hero-stage {
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(139,92,246,.26), transparent 34%),
        radial-gradient(circle at 76% 88%, rgba(45,212,191,.16), transparent 36%),
        linear-gradient(145deg, #1a2b49 0%, #20304f 48%, #24253f 100%);
    border-color: rgba(203, 213, 225, .18);
    box-shadow: 0 32px 72px rgba(15, 23, 42, .26), inset 0 1px 0 rgba(255,255,255,.08);
}

.landing-v18 .stats-strip {
    background:
        radial-gradient(circle at 12% 0%, rgba(124,92,255,.12), transparent 24rem),
        radial-gradient(circle at 88% 100%, rgba(56,189,248,.10), transparent 22rem),
        linear-gradient(180deg, #14233d 0%, #172943 100%);
    border-top: 1px solid rgba(203, 213, 225, .08);
    border-bottom: 1px solid rgba(203, 213, 225, .08);
}

.landing-v18 .app-experience-section,
.landing-v18 #services,
.landing-v18 #how-it-works {
    background:
        radial-gradient(circle at 92% 15%, rgba(124,92,255,.15), transparent 28rem),
        radial-gradient(circle at 4% 75%, rgba(45,212,191,.09), transparent 26rem),
        radial-gradient(circle at 56% 108%, rgba(251,146,60,.06), transparent 24rem),
        linear-gradient(180deg, #122039 0%, #172740 52%, #18233a 100%);
}

.landing-v18 .app-experience-section::before,
.landing-v18 #services::before,
.landing-v18 #how-it-works::before {
    background-image:
        linear-gradient(rgba(191,219,254,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(191,219,254,.04) 1px, transparent 1px);
}

/* Stat cards: more depth at rest; vivid, clean and readable on hover. */
.landing-v18 .stats-grid > .stat-card {
    border-color: rgba(203, 213, 225, .16);
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 12px 28px rgba(15,23,42,.13);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease,
                box-shadow .28s ease, background .28s ease;
}

.landing-v18 .stats-grid > .stat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.landing-v18 .stat-card-services::before {
    background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(167,139,250,.07) 65%, transparent);
}
.landing-v18 .stat-card-providers::before {
    background: linear-gradient(135deg, rgba(20,184,166,.22), rgba(45,212,191,.07) 65%, transparent);
}
.landing-v18 .stat-card-categories::before {
    background: linear-gradient(135deg, rgba(245,158,11,.21), rgba(251,191,36,.07) 65%, transparent);
}
.landing-v18 .stat-card-access::before {
    background: linear-gradient(135deg, rgba(56,189,248,.22), rgba(96,165,250,.07) 65%, transparent);
}

.landing-v18 .stats-grid > .stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(226, 232, 240, .30);
    background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    box-shadow: 0 20px 46px rgba(15,23,42,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

.landing-v18 .stats-grid > .stat-card:hover::before {
    opacity: 1;
}

.landing-v18 .stats-grid > .stat-card:hover::after {
    opacity: .40;
    transform: scale(1.22);
}

.landing-v18 .stat-icon {
    color: #fff;
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(145deg, rgba(124,92,255,.30), rgba(124,92,255,.14));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(15,23,42,.18);
    transition: transform .28s cubic-bezier(.2,.7,.2,1), background .28s ease,
                box-shadow .28s ease, border-color .28s ease;
}

.landing-v18 .stat-card-services .stat-icon { background: linear-gradient(145deg, rgba(124,92,255,.34), rgba(167,139,250,.14)); }
.landing-v18 .stat-card-providers .stat-icon { background: linear-gradient(145deg, rgba(20,184,166,.34), rgba(45,212,191,.14)); }
.landing-v18 .stat-card-categories .stat-icon { background: linear-gradient(145deg, rgba(245,158,11,.34), rgba(251,191,36,.14)); }
.landing-v18 .stat-card-access .stat-icon { background: linear-gradient(145deg, rgba(56,189,248,.34), rgba(96,165,250,.14)); }

.landing-v18 .stat-card-services .stat-icon i { color: #ddd6fe; }
.landing-v18 .stat-card-providers .stat-icon i { color: #99f6e4; }
.landing-v18 .stat-card-categories .stat-icon i { color: #fde68a; }
.landing-v18 .stat-card-access .stat-icon i { color: #bae6fd; }

.landing-v18 .stat-card-services:hover .stat-icon {
    background: linear-gradient(145deg, #7c5cff, #a78bfa);
    box-shadow: 0 14px 30px rgba(124,92,255,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.landing-v18 .stat-card-providers:hover .stat-icon {
    background: linear-gradient(145deg, #0f9f91, #2dd4bf);
    box-shadow: 0 14px 30px rgba(20,184,166,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.landing-v18 .stat-card-categories:hover .stat-icon {
    background: linear-gradient(145deg, #e58a08, #fbbf24);
    box-shadow: 0 14px 30px rgba(245,158,11,.28), inset 0 1px 0 rgba(255,255,255,.25);
}
.landing-v18 .stat-card-access:hover .stat-icon {
    background: linear-gradient(145deg, #0ea5e9, #60a5fa);
    box-shadow: 0 14px 30px rgba(56,189,248,.28), inset 0 1px 0 rgba(255,255,255,.25);
}

.landing-v18 .stats-grid > .stat-card:hover .stat-icon {
    transform: translateY(-2px) scale(1.08);
    border-color: rgba(255,255,255,.34);
}

.landing-v18 .stats-grid > .stat-card:hover .stat-icon i {
    color: #fff;
}

.landing-v18 .stats-grid .stat-copy strong {
    color: #f8fbff;
}

.landing-v18 .stats-grid .stat-copy > span {
    color: #b7c5d9;
}

/* The CTA keeps energy but loses the "neon block" feeling. */
.landing-v18 .cta-card {
    background:
        radial-gradient(circle at 88% 14%, rgba(255,255,255,.13), transparent 16rem),
        linear-gradient(112deg, #6356d8 0%, #8b5cc7 34%, #c76672 67%, #e9943f 100%);
    box-shadow: 0 22px 54px rgba(29, 34, 72, .24), inset 0 1px 0 rgba(255,255,255,.13);
}

/* Floating back-to-top control. Hidden until the user has scrolled. */
.landing-v18 .back-to-top {
    position: fixed;
    right: clamp(18px, 2vw, 30px);
    bottom: clamp(18px, 2vw, 30px);
    z-index: 80;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #6d5dfc 0%, #8b5cf6 52%, #f59e0b 100%);
    box-shadow: 0 16px 34px rgba(15,23,42,.24), inset 0 1px 0 rgba(255,255,255,.23);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(.92);
    transition: opacity .24s ease, visibility .24s ease, transform .24s ease,
                box-shadow .24s ease, filter .24s ease;
}

.landing-v18 .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.landing-v18 .back-to-top:hover {
    transform: translateY(-4px) scale(1.03);
    filter: saturate(1.08) brightness(1.05);
    box-shadow: 0 22px 44px rgba(15,23,42,.30), 0 0 0 6px rgba(124,92,255,.10);
}

.landing-v18 .back-to-top:focus-visible {
    outline: 3px solid rgba(147,197,253,.65);
    outline-offset: 3px;
}

.landing-v18 .back-to-top i {
    font-size: 15px;
    transition: transform .24s ease;
}

.landing-v18 .back-to-top:hover i {
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .landing-v18 .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-v18 .back-to-top,
    .landing-v18 .back-to-top i {
        transition: none;
    }
}

/* ========================================================================== 
   V20 — Calm, integrated CTA + compact premium footer
   Replaces the oversized neon CTA block with a restrained product surface.
   ========================================================================== */

/* Reduce the large visual gap before the final conversion area. */
.landing-v18 .about-section {
    padding-bottom: clamp(44px, 4.5vw, 64px);
}

.landing-v18 .cta-section {
    padding: 24px 0 38px;
    background:
        radial-gradient(circle at 12% 0%, rgba(124,92,255,.08), transparent 22rem),
        radial-gradient(circle at 90% 100%, rgba(45,212,191,.055), transparent 20rem),
        linear-gradient(180deg, #13223a 0%, #101d32 100%);
}

.landing-v18 .cta-card {
    min-height: 150px;
    padding: 27px 31px;
    gap: 28px;
    border: 1px solid rgba(203,213,225,.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 8% 0%, rgba(124,92,255,.13), transparent 18rem),
        radial-gradient(circle at 94% 100%, rgba(245,158,11,.075), transparent 16rem),
        linear-gradient(135deg, rgba(30,46,72,.97) 0%, rgba(21,35,57,.98) 58%, rgba(25,38,60,.98) 100%);
    box-shadow: 0 16px 38px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.07);
}

/* Remove the large animated sheen that made the CTA feel template-like. */
.landing-v18 .cta-card::before {
    opacity: 0;
    animation: none;
}

.landing-v18 .cta-card > div:first-child {
    max-width: 760px;
}

.landing-v18 .cta-kicker {
    width: fit-content;
    padding: 5px 9px;
    border: 1px solid rgba(245,158,11,.16);
    border-radius: 999px;
    color: #f4c878;
    background: rgba(245,158,11,.075);
    font-size: 9.5px;
    font-weight: 680;
    letter-spacing: .07em;
}

.landing-v18 .cta-card h2 {
    margin: 10px 0 7px;
    color: #f4f7fb;
    font-size: clamp(24px, 1.8vw, 31px);
    font-weight: 620;
    line-height: 1.18;
    letter-spacing: -.018em;
}

.landing-v18 .cta-card p {
    max-width: 700px;
    color: #b7c4d5;
    font-size: 13.25px;
    line-height: 1.65;
}

/* Keep the action visible, but no giant white floating block. */
.landing-v18 .cta-card .btn-white,
.landing-v18 .cta-card .store-badge-light {
    min-height: 45px;
    border: 1px solid rgba(203,213,225,.17);
    border-radius: 12px;
    color: #eef4ff;
    background: rgba(255,255,255,.075);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.landing-v18 .cta-card .btn-white {
    padding: 0 17px;
    font-size: 12.5px;
    font-weight: 680;
}

.landing-v18 .cta-card .store-badge-light {
    padding: 7px 13px;
}

.landing-v18 .cta-card .store-badge-light small {
    color: #9eacc0;
}

.landing-v18 .cta-card .store-badge-light strong {
    color: #f8fbff;
}

.landing-v18 .cta-card .btn-white:hover,
.landing-v18 .cta-card .store-badge-light:hover {
    color: #fff;
    border-color: rgba(167,139,250,.28);
    background: linear-gradient(135deg, rgba(109,93,252,.28), rgba(124,92,255,.16));
    box-shadow: 0 10px 24px rgba(15,23,42,.16);
    transform: translateY(-2px);
}

.landing-v18 .cta-card .btn-white i {
    color: #c4b5fd;
}

/* Compact footer: same palette as header/hero, less dead space. */
.landing-v18 .site-footer {
    padding-top: 34px;
    border-top: 1px solid rgba(203,213,225,.10);
    background:
        radial-gradient(circle at 86% 0%, rgba(124,92,255,.055), transparent 20rem),
        linear-gradient(180deg, #101c31 0%, #0b1527 100%);
}

.landing-v18 .footer-grid {
    grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(140px, .72fr));
    gap: 28px;
    padding-bottom: 26px;
}

.landing-v18 .footer-brand {
    font-size: 16px;
    font-weight: 680;
}

.landing-v18 .footer-brand .site-brand-logo {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    box-shadow: none;
}

.landing-v18 .footer-brand-col > p {
    max-width: 310px;
    margin: 14px 0 16px;
    color: #91a0b4;
    font-size: 11.75px;
    line-height: 1.62;
}

.landing-v18 .footer-grid h3 {
    margin: 4px 0 12px;
    color: #e8eef8;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .01em;
}

.landing-v18 .footer-grid > div:not(.footer-brand-col) > a,
.landing-v18 .footer-address {
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 11.5px;
    line-height: 1.55;
}

.landing-v18 .footer-grid > div:not(.footer-brand-col) > a:hover {
    color: #c4b5fd;
}

.landing-v18 .social-links {
    gap: 7px;
}

.landing-v18 .social-links a {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(203,213,225,.10);
    border-radius: 9px;
    color: #a8b6c8;
    background: rgba(255,255,255,.045);
    font-size: 11px;
}

.landing-v18 .social-links a:hover {
    color: #fff;
    border-color: rgba(167,139,250,.25);
    background: rgba(124,92,255,.18);
}

.landing-v18 .footer-bottom {
    min-height: 48px;
    border-top-color: rgba(203,213,225,.09);
    color: #718096;
    font-size: 10px;
}

@media (max-width: 991.98px) {
    .landing-v18 .cta-card {
        min-height: 0;
        padding: 26px;
    }

    .landing-v18 .footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .landing-v18 .footer-grid > div:last-child {
        grid-column: 2 / 4;
    }
}

@media (max-width: 767.98px) {
    .landing-v18 .about-section {
        padding-bottom: 38px;
    }

    .landing-v18 .cta-section {
        padding: 18px 0 30px;
    }

    .landing-v18 .cta-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 20px;
        padding: 23px 21px;
        border-radius: 16px;
    }

    .landing-v18 .cta-card h2 {
        font-size: clamp(22px, 7vw, 27px);
    }

    .landing-v18 .cta-card p {
        font-size: 12.75px;
    }

    .landing-v18 .cta-card .btn-white,
    .landing-v18 .cta-store-badges {
        width: 100%;
    }

    .landing-v18 .cta-card .btn-white {
        justify-content: space-between;
    }

    .landing-v18 .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px 20px;
    }

    .landing-v18 .footer-brand-col {
        grid-column: 1 / 3;
    }

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

@media (max-width: 479.98px) {
    .landing-v18 .footer-grid {
        grid-template-columns: 1fr;
    }

    .landing-v18 .footer-brand-col {
        grid-column: auto;
    }

    .landing-v18 .footer-bottom {
        gap: 5px;
        padding: 13px 0;
    }
}

/* ========================================================================== 
   V23 — Professional compact app CTA
   Calm product surface, no oversized banner, no neon gradient block.
   ========================================================================== */

.landing-v23 .about-section {
    padding-bottom: clamp(34px, 3.4vw, 50px);
}

.landing-v23 .cta-section {
    padding: 18px 0 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(96, 165, 250, .055), transparent 22rem),
        radial-gradient(circle at 90% 85%, rgba(139, 92, 246, .055), transparent 20rem),
        linear-gradient(180deg, #0f1a2e 0%, #0b1424 100%);
}

.landing-v23 .cta-container {
    width: min(1380px, calc(100% - 48px));
}

.landing-v23 .cta-card-pro {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 34px;
    min-height: 0;
    padding: 24px 26px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .15);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.065), rgba(255,255,255,.025)),
        rgba(16, 28, 49, .76);
    box-shadow: 0 14px 34px rgba(2, 6, 23, .16), inset 0 1px 0 rgba(255,255,255,.055);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Fine accent line, instead of filling the whole card with gradient. */
.landing-v23 .cta-card-pro::after {
    content: "";
    position: absolute;
    top: 0;
    right: 28px;
    left: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139,92,246,.55), rgba(56,189,248,.38), transparent);
    opacity: .75;
}

.landing-v23 .cta-card-pro::before {
    display: none;
}

.landing-v23 .cta-main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
}

.landing-v23 .cta-product-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-top: 2px;
    border: 1px solid rgba(167, 139, 250, .18);
    border-radius: 13px;
    color: #c4b5fd;
    background: linear-gradient(145deg, rgba(124,92,255,.18), rgba(56,189,248,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    font-size: 15px;
}

.landing-v23 .cta-copy {
    min-width: 0;
    max-width: 760px;
}

.landing-v23 .cta-kicker {
    display: inline-block;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #9aa9bd;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .105em;
    text-transform: uppercase;
}

.landing-v23 .cta-card h2 {
    margin: 5px 0 5px;
    color: #f4f7fb;
    font-size: clamp(21px, 1.55vw, 27px);
    font-weight: 610;
    line-height: 1.2;
    letter-spacing: -.018em;
}

.landing-v23 .cta-card p {
    max-width: 700px;
    margin: 0;
    color: #92a3b8;
    font-size: 12.5px;
    line-height: 1.55;
}

.landing-v23 .cta-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    margin-top: 11px;
    color: #8797ab;
    font-size: 10px;
    font-weight: 600;
}

.landing-v23 .cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.landing-v23 .cta-trust i {
    color: #5eead4;
    font-size: 9px;
}

.landing-v23 .cta-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.landing-v23 .cta-store-badges {
    flex-wrap: nowrap;
    gap: 9px;
}

.landing-v23 .cta-card .btn-white,
.landing-v23 .cta-card .store-badge-light {
    min-height: 44px;
    border: 1px solid rgba(148,163,184,.17);
    border-radius: 11px;
    color: #e7edf6;
    background: rgba(255,255,255,.055);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.landing-v23 .cta-card .btn-white {
    padding: 0 16px;
    font-size: 12px;
    font-weight: 650;
}

.landing-v23 .cta-card .store-badge-light {
    min-width: 148px;
    padding: 6px 12px;
}

.landing-v23 .cta-card .store-badge-light > i {
    width: 22px;
    font-size: 21px;
}

.landing-v23 .cta-card .store-badge-light small {
    color: #8190a4;
    font-size: 6.5px;
}

.landing-v23 .cta-card .store-badge-light strong {
    margin-top: 3px;
    color: #eef3fa;
    font-size: 13px;
    font-weight: 650;
}

.landing-v23 .cta-card .btn-white:hover,
.landing-v23 .cta-card .store-badge-light:hover {
    color: #fff;
    border-color: rgba(139,92,246,.32);
    background: rgba(124,92,255,.12);
    box-shadow: 0 10px 22px rgba(2,6,23,.16);
    transform: translateY(-2px);
}

/* Footer joins the CTA naturally rather than feeling like a second dark block. */
.landing-v23 .site-footer {
    padding-top: 28px;
    border-top: 1px solid rgba(148,163,184,.08);
    background:
        radial-gradient(circle at 86% 0%, rgba(99,102,241,.035), transparent 18rem),
        linear-gradient(180deg, #0b1424 0%, #08111f 100%);
}

.landing-v23 .footer-grid {
    gap: 30px;
    padding-bottom: 24px;
}

/* Back-to-top: quieter and part of the same design system. */
.landing-v23 .back-to-top {
    width: 42px;
    height: 42px;
    right: 22px;
    bottom: 22px;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 12px;
    color: #d8e1ee;
    background: rgba(17,29,49,.90);
    box-shadow: 0 10px 24px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    filter: none;
}

.landing-v23 .back-to-top:hover {
    color: #fff;
    border-color: rgba(139,92,246,.34);
    background: rgba(92,75,190,.90);
    box-shadow: 0 14px 30px rgba(2,6,23,.27);
    transform: translateY(-3px);
    filter: none;
}

@media (max-width: 991.98px) {
    .landing-v23 .cta-container {
        width: min(100% - 36px, 900px);
    }

    .landing-v23 .cta-card-pro {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px;
    }

    .landing-v23 .cta-action {
        justify-content: flex-start;
        padding-left: 60px;
    }
}

@media (max-width: 767.98px) {
    .landing-v23 .about-section {
        padding-bottom: 28px;
    }

    .landing-v23 .cta-section {
        padding: 14px 0 24px;
    }

    .landing-v23 .cta-container {
        width: calc(100% - 24px);
    }

    .landing-v23 .cta-card-pro {
        padding: 20px;
        border-radius: 15px;
    }

    .landing-v23 .cta-main {
        gap: 12px;
    }

    .landing-v23 .cta-product-icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    .landing-v23 .cta-card h2 {
        font-size: 21px;
    }

    .landing-v23 .cta-action {
        padding-left: 52px;
    }

    .landing-v23 .cta-store-badges {
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .landing-v23 .cta-card-pro {
        display: block;
    }

    .landing-v23 .cta-main {
        display: block;
    }

    .landing-v23 .cta-product-icon {
        margin-bottom: 12px;
    }

    .landing-v23 .cta-trust {
        gap: 7px 12px;
    }

    .landing-v23 .cta-action {
        margin-top: 17px;
        padding-left: 0;
    }

    .landing-v23 .cta-card .btn-white,
    .landing-v23 .cta-store-badges,
    .landing-v23 .cta-card .store-badge-light {
        width: 100%;
    }

    .landing-v23 .cta-store-badges {
        display: grid;
        grid-template-columns: 1fr;
    }

    .landing-v23 .back-to-top {
        right: 14px;
        bottom: 14px;
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }
}

/* ========================================================================== 
   V24 — Public landing theme switcher
   Light is the default. Dark keeps the premium midnight workspace identity.
   ========================================================================== */

body.landing-v24 {
    --theme-page: #f7f9fc;
    --theme-surface: #ffffff;
    --theme-surface-soft: #f3f6fb;
    --theme-surface-tint: #f7f7ff;
    --theme-ink: #152238;
    --theme-text: #526176;
    --theme-muted: #738096;
    --theme-line: #e2e8f0;
    --theme-line-strong: #d5deea;
    --theme-header: rgba(255, 255, 255, .92);
    --theme-card-shadow: 0 18px 48px rgba(31, 41, 55, .075);
    --theme-card-shadow-hover: 0 24px 58px rgba(54, 65, 111, .13);
    --theme-hero-start: #f8fbff;
    --theme-hero-mid: #f2f5ff;
    --theme-hero-end: #fffaf4;
    --theme-indigo: #5b5ce2;
    --theme-violet: #7c5ce7;
    --theme-cyan: #0891b2;
    --theme-teal: #0f9f91;
    --theme-amber: #e99b32;
    color: var(--theme-ink);
    background: var(--theme-page);
    transition: background-color .28s ease, color .28s ease;
}

html[data-site-theme="dark"] body.landing-v24 {
    --theme-page: #0b1526;
    --theme-surface: #111e34;
    --theme-surface-soft: #14223a;
    --theme-surface-tint: #16263f;
    --theme-ink: #f1f5fb;
    --theme-text: #c4cfde;
    --theme-muted: #93a3b9;
    --theme-line: rgba(203, 213, 225, .14);
    --theme-line-strong: rgba(203, 213, 225, .21);
    --theme-header: rgba(15, 28, 48, .92);
    --theme-card-shadow: 0 18px 48px rgba(2, 6, 23, .18);
    --theme-card-shadow-hover: 0 24px 58px rgba(2, 6, 23, .28);
    --theme-hero-start: #111d34;
    --theme-hero-mid: #172844;
    --theme-hero-end: #24213f;
}

/* Theme toggle ----------------------------------------------------------- */
.landing-v24 .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 88px;
    height: 42px;
    padding: 0 12px 0 8px;
    border: 1px solid var(--theme-line);
    border-radius: 13px;
    color: #3f4c60;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    transition: color .22s ease, background .22s ease, border-color .22s ease,
                box-shadow .22s ease, transform .22s ease;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.landing-v24 .theme-toggle:hover {
    transform: translateY(-1px);
    color: #3434aa;
    border-color: rgba(91, 92, 226, .26);
    box-shadow: 0 12px 26px rgba(72, 78, 130, .10);
}

.landing-v24 .theme-toggle-icon {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    color: #a65d08;
    background: #fff4d9;
    font-size: 11px;
    transition: color .22s ease, background .22s ease, transform .28s ease;
}

.landing-v24 .theme-toggle:hover .theme-toggle-icon { transform: rotate(8deg); }

html[data-site-theme="dark"] .landing-v24 .theme-toggle {
    color: #d8e2ef;
    border-color: rgba(203, 213, 225, .16);
    background: rgba(255, 255, 255, .055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

html[data-site-theme="dark"] .landing-v24 .theme-toggle:hover {
    color: #ffffff;
    border-color: rgba(139, 92, 246, .34);
    background: rgba(124, 92, 255, .10);
}

html[data-site-theme="dark"] .landing-v24 .theme-toggle-icon {
    color: #ddd6fe;
    background: rgba(124, 92, 255, .18);
}

/* Header ---------------------------------------------------------------- */
.landing-v24 .site-header {
    background: var(--theme-header);
    border-bottom-color: var(--theme-line);
    box-shadow: 0 8px 28px rgba(35, 46, 76, .055);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.landing-v24 .site-brand { color: var(--theme-ink); }
.landing-v24 .site-nav a { color: #59677a; }
.landing-v24 .site-nav a:hover { color: var(--theme-indigo); }
.landing-v24 .mobile-nav-toggle { color: var(--theme-ink); }

.landing-v24 .nav-actions .btn-ghost {
    color: #425066;
    border-color: var(--theme-line);
    background: rgba(255,255,255,.72);
    box-shadow: none;
}

.landing-v24 .nav-actions .btn-ghost:hover {
    color: #3434aa;
    border-color: rgba(91,92,226,.24);
    background: #ffffff;
}

html[data-site-theme="dark"] .landing-v24 .site-nav a { color: #b9c6d8; }
html[data-site-theme="dark"] .landing-v24 .site-nav a:hover { color: #ffffff; }
html[data-site-theme="dark"] .landing-v24 .nav-actions .btn-ghost {
    color: #d6e0ec;
    border-color: rgba(203,213,225,.17);
    background: rgba(255,255,255,.045);
}
html[data-site-theme="dark"] .landing-v24 .nav-actions .btn-ghost:hover {
    color: #ffffff;
    border-color: rgba(139,92,246,.32);
    background: rgba(124,92,255,.10);
}

/* Light hero ------------------------------------------------------------- */
.landing-v24 .hero-section {
    background:
        radial-gradient(circle at 84% 12%, rgba(99, 102, 241, .15), transparent 31rem),
        radial-gradient(circle at 5% 78%, rgba(14, 165, 233, .10), transparent 28rem),
        radial-gradient(circle at 72% 94%, rgba(251, 146, 60, .09), transparent 28rem),
        linear-gradient(138deg, var(--theme-hero-start) 0%, var(--theme-hero-mid) 52%, var(--theme-hero-end) 100%);
}

.landing-v24 .hero-section::before {
    opacity: .70;
    background-image:
        linear-gradient(rgba(99,102,241,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,.045) 1px, transparent 1px);
    background-size: 48px 48px;
}

.landing-v24 .eyebrow {
    color: #4f46c8;
    border-color: rgba(91,92,226,.16);
    background: rgba(255,255,255,.70);
    box-shadow: 0 9px 24px rgba(54,65,111,.055);
}

.landing-v24 .hero-copy h1 {
    color: #17243a;
    text-shadow: none;
}

.landing-v24 .hero-copy h1 span {
    color: transparent;
    background: linear-gradient(100deg, #4f46e5 0%, #7557df 52%, #0e8fad 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.landing-v24 .hero-lead { color: #5f6d80; }

.landing-v24 .hero-actions .btn-primary {
    color: #fff;
    background: linear-gradient(110deg, #5755dc 0%, #7657df 58%, #338fbc 100%);
    box-shadow: 0 14px 30px rgba(79,70,229,.18);
}

.landing-v24 .hero-actions .btn-soft {
    color: #3e4a5e;
    border-color: #dce3ed;
    background: rgba(255,255,255,.82);
    box-shadow: 0 10px 25px rgba(31,41,55,.055);
}

.landing-v24 .app-availability-note,
.landing-v24 .hero-proof {
    color: #536176;
    border-color: #e0e6ef;
    background: rgba(255,255,255,.74);
    box-shadow: 0 10px 26px rgba(31,41,55,.05);
}

.landing-v24 .app-availability-note i {
    color: #5755dc;
    background: #eef0ff;
}

.landing-v24 .hero-proof strong { color: #26344a; }
.landing-v24 .hero-proof small { color: #758196; }

.landing-v24 .proof-avatars span { border-color: #ffffff; }

.landing-v24 .app-hero-stage {
    border-color: rgba(99,102,241,.15);
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.98), transparent 30%),
        radial-gradient(circle at 86% 14%, rgba(124,92,255,.15), transparent 34%),
        radial-gradient(circle at 74% 88%, rgba(45,212,191,.11), transparent 36%),
        linear-gradient(145deg, #eef4ff 0%, #f8f6ff 48%, #eefbf9 100%);
    box-shadow: 0 28px 68px rgba(72,78,130,.13), inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-site-theme="dark"] .landing-v24 .hero-section {
    background:
        radial-gradient(circle at 82% 10%, rgba(124,92,255,.30), transparent 31rem),
        radial-gradient(circle at 9% 78%, rgba(45,212,191,.16), transparent 28rem),
        radial-gradient(circle at 70% 92%, rgba(251,146,60,.13), transparent 30rem),
        linear-gradient(138deg, #111d34 0%, #172844 48%, #24213f 100%);
}
html[data-site-theme="dark"] .landing-v24 .hero-section::before {
    background-image:
        linear-gradient(rgba(191,219,254,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(191,219,254,.055) 1px, transparent 1px);
}
html[data-site-theme="dark"] .landing-v24 .eyebrow {
    color: #dce5f3;
    border-color: rgba(203,213,225,.15);
    background: rgba(255,255,255,.055);
    box-shadow: none;
}
html[data-site-theme="dark"] .landing-v24 .hero-copy h1 { color: #ffffff; }
html[data-site-theme="dark"] .landing-v24 .hero-copy h1 span {
    background: linear-gradient(100deg, #ffe7bd 0%, #ffc86f 35%, #ffa32d 68%, #f97316 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-site-theme="dark"] .landing-v24 .hero-lead { color: #b8c6d9; }
html[data-site-theme="dark"] .landing-v24 .hero-actions .btn-soft {
    color: #e7edf6;
    border-color: rgba(203,213,225,.17);
    background: rgba(255,255,255,.055);
    box-shadow: none;
}
html[data-site-theme="dark"] .landing-v24 .app-availability-note,
html[data-site-theme="dark"] .landing-v24 .hero-proof {
    color: #c4cfde;
    border-color: rgba(203,213,225,.15);
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-site-theme="dark"] .landing-v24 .hero-proof strong { color: #eef3fa; }
html[data-site-theme="dark"] .landing-v24 .hero-proof small { color: #91a1b7; }
html[data-site-theme="dark"] .landing-v24 .app-hero-stage {
    border-color: rgba(203,213,225,.18);
    background:
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.11), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(139,92,246,.26), transparent 34%),
        radial-gradient(circle at 76% 88%, rgba(45,212,191,.16), transparent 36%),
        linear-gradient(145deg, #1a2b49 0%, #20304f 48%, #24253f 100%);
    box-shadow: 0 32px 72px rgba(15,23,42,.26), inset 0 1px 0 rgba(255,255,255,.08);
}

/* Statistics ------------------------------------------------------------- */
.landing-v24 .stats-strip {
    border-top-color: #e7ebf2;
    border-bottom-color: #e7ebf2;
    background:
        radial-gradient(circle at 11% 0%, rgba(99,102,241,.07), transparent 22rem),
        radial-gradient(circle at 88% 100%, rgba(14,165,233,.06), transparent 21rem),
        linear-gradient(180deg, #f5f7fc 0%, #f1f5fa 100%);
}

.landing-v24 .stats-grid > .stat-card {
    border-color: #e1e7f0;
    background: rgba(255,255,255,.86);
    box-shadow: 0 10px 30px rgba(31,41,55,.055), inset 0 1px 0 #ffffff;
}

.landing-v24 .stats-grid > .stat-card:hover {
    border-color: rgba(91,92,226,.22);
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(72,78,130,.12), inset 0 1px 0 #ffffff;
}

.landing-v24 .stats-grid .stat-copy strong { color: #1c2a40; }
.landing-v24 .stats-grid .stat-copy > span { color: #68768b; }

.landing-v24 .stat-card-services .stat-icon { background: linear-gradient(145deg, #edeaff, #f5f2ff); border-color:#ddd7ff; }
.landing-v24 .stat-card-providers .stat-icon { background: linear-gradient(145deg, #e4fbf7, #f0fffc); border-color:#c9efe8; }
.landing-v24 .stat-card-categories .stat-icon { background: linear-gradient(145deg, #fff4dd, #fffaf0); border-color:#f4dfb4; }
.landing-v24 .stat-card-access .stat-icon { background: linear-gradient(145deg, #e8f6ff, #f2fbff); border-color:#cce8f8; }
.landing-v24 .stat-card-services .stat-icon i { color:#6757d8; }
.landing-v24 .stat-card-providers .stat-icon i { color:#0f9f91; }
.landing-v24 .stat-card-categories .stat-icon i { color:#c67c13; }
.landing-v24 .stat-card-access .stat-icon i { color:#1789bd; }

html[data-site-theme="dark"] .landing-v24 .stats-strip {
    border-color: rgba(203,213,225,.08);
    background:
        radial-gradient(circle at 12% 0%, rgba(124,92,255,.12), transparent 24rem),
        radial-gradient(circle at 88% 100%, rgba(56,189,248,.10), transparent 22rem),
        linear-gradient(180deg, #14233d 0%, #172943 100%);
}
html[data-site-theme="dark"] .landing-v24 .stats-grid > .stat-card {
    border-color: rgba(203,213,225,.16);
    background: linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 12px 28px rgba(15,23,42,.13);
}
html[data-site-theme="dark"] .landing-v24 .stats-grid .stat-copy strong { color: #f8fbff; }
html[data-site-theme="dark"] .landing-v24 .stats-grid .stat-copy > span { color: #b7c5d9; }

/* Sections and headings -------------------------------------------------- */
.landing-v24 .app-experience-section,
.landing-v24 #services,
.landing-v24 #how-it-works {
    color: var(--theme-ink);
}

.landing-v24 .app-experience-section {
    background:
        radial-gradient(circle at 90% 15%, rgba(99,102,241,.08), transparent 26rem),
        radial-gradient(circle at 5% 76%, rgba(14,165,233,.05), transparent 24rem),
        linear-gradient(180deg, #f7f9fd 0%, #f3f6fb 54%, #f8faff 100%);
}

.landing-v24 #services {
    background:
        radial-gradient(circle at 94% 12%, rgba(124,92,255,.05), transparent 24rem),
        #ffffff;
}

.landing-v24 #how-it-works {
    background:
        radial-gradient(circle at 6% 90%, rgba(14,165,233,.05), transparent 23rem),
        #f8fafc;
}

.landing-v24 .section-muted {
    background:
        radial-gradient(circle at 2% 30%, rgba(99,102,241,.045), transparent 25rem),
        linear-gradient(180deg, #f5f7fb 0%, #f8fafc 100%);
}

.landing-v24 .section-heading h2,
.landing-v24 .about-copy h2,
.landing-v24 .experience-copy h3,
.landing-v24 .category-card h3,
.landing-v24 .service-body h3,
.landing-v24 .step-card h3 {
    color: #17243a;
}

.landing-v24 .section-heading p,
.landing-v24 .about-copy > p,
.landing-v24 .experience-copy > p,
.landing-v24 .category-card p,
.landing-v24 .service-body p,
.landing-v24 .step-card p {
    color: #68768a;
}

.landing-v24 .section-kicker { color: #5b5ce2; }

.landing-v24 .experience-shell,
.landing-v24 .category-card,
.landing-v24 .service-card,
.landing-v24 .step-card,
.landing-v24 .feature-list > div {
    border-color: #e1e7ef;
    background: rgba(255,255,255,.94);
    box-shadow: var(--theme-card-shadow);
}

.landing-v24 .category-card:hover,
.landing-v24 .service-card:hover,
.landing-v24 .step-card:hover,
.landing-v24 .feature-list > div:hover {
    border-color: rgba(91,92,226,.20);
    background: #ffffff;
    box-shadow: var(--theme-card-shadow-hover);
}

.landing-v24 .experience-tab {
    color: #637086;
    border-color: #dde4ee;
    background: rgba(255,255,255,.88);
    box-shadow: 0 7px 20px rgba(31,41,55,.045);
}
.landing-v24 .experience-tab.active {
    color: #514ac8;
    border-color: rgba(91,92,226,.28);
    background: #f0f0ff;
}
.landing-v24 .experience-copy,
.landing-v24 .experience-feature-list li { color: #344258; }
.landing-v24 .experience-feature-list li > span { background:#e9fbf7; color:#0f9f91; }
.landing-v24 .experience-arrow { border-color:#dce3ed; color:#415066; background:#fff; }
.landing-v24 .experience-arrow:hover { color:#fff; border-color:#5b5ce2; background:#5b5ce2; }

.landing-v24 .category-icon,
.landing-v24 .step-icon,
.landing-v24 .feature-list > div > span {
    color: #5b5ce2;
    background: #eeefff;
    box-shadow: inset 0 0 0 1px rgba(91,92,226,.09);
}

.landing-v24 .category-arrow,
.landing-v24 .service-footer > a,
.landing-v24 .service-footer-action {
    color: #5757cf;
    background: #f0f1ff;
}

.landing-v24 .service-footer { border-top-color:#e8edf3; }
.landing-v24 .service-footer small { color:#8b96a6; }
.landing-v24 .service-footer strong { color:#223049; }

html[data-site-theme="dark"] .landing-v24 .app-experience-section,
html[data-site-theme="dark"] .landing-v24 #services,
html[data-site-theme="dark"] .landing-v24 #how-it-works {
    color: #eaf1fb;
    background:
        radial-gradient(circle at 92% 15%, rgba(124,92,255,.15), transparent 28rem),
        radial-gradient(circle at 4% 75%, rgba(45,212,191,.09), transparent 26rem),
        radial-gradient(circle at 56% 108%, rgba(251,146,60,.06), transparent 24rem),
        linear-gradient(180deg, #122039 0%, #172740 52%, #18233a 100%);
}
html[data-site-theme="dark"] .landing-v24 .section-muted {
    background:
        radial-gradient(circle at 92% 18%, rgba(124,92,255,.10), transparent 25rem),
        linear-gradient(180deg, #101d33 0%, #14243c 100%);
}
html[data-site-theme="dark"] .landing-v24 .section-heading h2,
html[data-site-theme="dark"] .landing-v24 .about-copy h2,
html[data-site-theme="dark"] .landing-v24 .experience-copy h3,
html[data-site-theme="dark"] .landing-v24 .category-card h3,
html[data-site-theme="dark"] .landing-v24 .service-body h3,
html[data-site-theme="dark"] .landing-v24 .step-card h3 { color:#f3f6fb; }
html[data-site-theme="dark"] .landing-v24 .section-heading p,
html[data-site-theme="dark"] .landing-v24 .about-copy > p,
html[data-site-theme="dark"] .landing-v24 .experience-copy > p,
html[data-site-theme="dark"] .landing-v24 .category-card p,
html[data-site-theme="dark"] .landing-v24 .service-body p,
html[data-site-theme="dark"] .landing-v24 .step-card p { color:#9cadc2; }
html[data-site-theme="dark"] .landing-v24 .section-kicker { color:#b9acff; }
html[data-site-theme="dark"] .landing-v24 .experience-shell,
html[data-site-theme="dark"] .landing-v24 .category-card,
html[data-site-theme="dark"] .landing-v24 .service-card,
html[data-site-theme="dark"] .landing-v24 .step-card,
html[data-site-theme="dark"] .landing-v24 .feature-list > div {
    border-color: rgba(203,213,225,.13);
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
    box-shadow: 0 16px 40px rgba(2,6,23,.18), inset 0 1px 0 rgba(255,255,255,.045);
}
html[data-site-theme="dark"] .landing-v24 .experience-tab {
    color:#b2bfd1; border-color:rgba(203,213,225,.14); background:rgba(255,255,255,.045); box-shadow:none;
}
html[data-site-theme="dark"] .landing-v24 .experience-tab.active {
    color:#e4ddff; border-color:rgba(139,92,246,.32); background:rgba(124,92,255,.12);
}
html[data-site-theme="dark"] .landing-v24 .experience-feature-list li { color:#d7e1ed; }
html[data-site-theme="dark"] .landing-v24 .experience-arrow { color:#d6e0ec; border-color:rgba(203,213,225,.14); background:rgba(255,255,255,.05); }
html[data-site-theme="dark"] .landing-v24 .category-icon,
html[data-site-theme="dark"] .landing-v24 .step-icon,
html[data-site-theme="dark"] .landing-v24 .feature-list > div > span {
    color:#dcd6ff; background:rgba(124,92,255,.15); box-shadow:inset 0 0 0 1px rgba(167,139,250,.12);
}
html[data-site-theme="dark"] .landing-v24 .service-footer { border-top-color:rgba(203,213,225,.11); }
html[data-site-theme="dark"] .landing-v24 .service-footer small { color:#8999ae; }
html[data-site-theme="dark"] .landing-v24 .service-footer strong { color:#eef3fa; }

/* About ------------------------------------------------------------------ */
.landing-v24 .about-section {
    color: var(--theme-ink);
    background:
        radial-gradient(circle at 92% 16%, rgba(99,102,241,.055), transparent 23rem),
        #ffffff;
}
.landing-v24 .about-visual { box-shadow: 0 24px 58px rgba(30,41,59,.13); }
.landing-v24 .feature-list strong { color:#25344a; }
.landing-v24 .feature-list small { color:#778397; }

html[data-site-theme="dark"] .landing-v24 .about-section {
    background:
        radial-gradient(circle at 90% 16%, rgba(124,92,255,.08), transparent 24rem),
        linear-gradient(180deg, #0e192b 0%, #101c30 100%);
}
html[data-site-theme="dark"] .landing-v24 .feature-list strong { color:#edf3fa; }
html[data-site-theme="dark"] .landing-v24 .feature-list small { color:#91a1b5; }

/* Compact CTA follows the selected theme -------------------------------- */
.landing-v24 .cta-section {
    background: #f7f9fc;
}

.landing-v24 .cta-card-pro {
    border-color: #dde4ef;
    background:
        radial-gradient(circle at 8% 0%, rgba(99,102,241,.09), transparent 17rem),
        radial-gradient(circle at 94% 100%, rgba(14,165,233,.055), transparent 17rem),
        linear-gradient(145deg, rgba(255,255,255,.98), #f7f8ff 62%, #f7fbff 100%);
    box-shadow: 0 18px 44px rgba(54,65,111,.085), inset 0 1px 0 #ffffff;
}

.landing-v24 .cta-card-pro::before {
    background: linear-gradient(90deg, #5b5ce2, #7c5ce7 46%, #0e91ad 100%);
    opacity: .85;
}

.landing-v24 .cta-product-icon {
    color:#fff;
    border-color:rgba(91,92,226,.13);
    background:linear-gradient(145deg,#5b5ce2,#7c5ce7);
    box-shadow:0 10px 22px rgba(91,92,226,.18);
}

.landing-v24 .cta-kicker { color:#66758b; }
.landing-v24 .cta-card h2 { color:#1d2a40; }
.landing-v24 .cta-card p { color:#68768b; }
.landing-v24 .cta-trust { color:#6f7d91; }
.landing-v24 .cta-trust i { color:#0f9f91; }
.landing-v24 .cta-card .btn-white,
.landing-v24 .cta-card .store-badge-light {
    color:#35435a;
    border-color:#dce3ed;
    background:#ffffff;
    box-shadow:0 8px 20px rgba(31,41,55,.055);
}
.landing-v24 .cta-card .store-badge-light small { color:#8793a4; }
.landing-v24 .cta-card .store-badge-light strong { color:#26344a; }
.landing-v24 .cta-card .btn-white:hover,
.landing-v24 .cta-card .store-badge-light:hover {
    color:#4c46bd;
    border-color:rgba(91,92,226,.25);
    background:#f7f7ff;
    box-shadow:0 12px 28px rgba(72,78,130,.10);
}

html[data-site-theme="dark"] .landing-v24 .cta-section { background:#0c1728; }
html[data-site-theme="dark"] .landing-v24 .cta-card-pro {
    border-color:rgba(148,163,184,.16);
    background:
        radial-gradient(circle at 8% 0%, rgba(124,92,255,.10), transparent 18rem),
        linear-gradient(145deg, rgba(22,36,61,.94), rgba(16,28,49,.96));
    box-shadow:0 16px 42px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-site-theme="dark"] .landing-v24 .cta-kicker { color:#9aa9bd; }
html[data-site-theme="dark"] .landing-v24 .cta-card h2 { color:#f4f7fb; }
html[data-site-theme="dark"] .landing-v24 .cta-card p { color:#92a3b8; }
html[data-site-theme="dark"] .landing-v24 .cta-trust { color:#8797ab; }
html[data-site-theme="dark"] .landing-v24 .cta-card .btn-white,
html[data-site-theme="dark"] .landing-v24 .cta-card .store-badge-light {
    color:#e7edf6; border-color:rgba(148,163,184,.17); background:rgba(255,255,255,.055); box-shadow:none;
}
html[data-site-theme="dark"] .landing-v24 .cta-card .store-badge-light small { color:#8190a4; }
html[data-site-theme="dark"] .landing-v24 .cta-card .store-badge-light strong { color:#eef3fa; }

/* Footer ----------------------------------------------------------------- */
.landing-v24 .site-footer {
    color:#58677b;
    border-top-color:#e2e7ef;
    background:
        radial-gradient(circle at 86% 0%, rgba(99,102,241,.045), transparent 18rem),
        linear-gradient(180deg, #f1f4f9 0%, #edf2f7 100%);
}
.landing-v24 .site-footer .site-brand,
.landing-v24 .footer-grid h3 { color:#223049; }
.landing-v24 .footer-brand-col > p,
.landing-v24 .footer-grid > div:not(.footer-brand-col) > a,
.landing-v24 .footer-address,
.landing-v24 .footer-bottom { color:#718095; }
.landing-v24 .footer-grid > div:not(.footer-brand-col) > a:hover { color:#4f46c8; }
.landing-v24 .footer-bottom { border-top-color:#dce3ec; }
.landing-v24 .social-links a { color:#56647a; background:#e4eaf2; }
.landing-v24 .social-links a:hover { color:#fff; background:#5b5ce2; }

html[data-site-theme="dark"] .landing-v24 .site-footer {
    color:#d6dce6;
    border-top-color:rgba(148,163,184,.08);
    background:
        radial-gradient(circle at 86% 0%, rgba(99,102,241,.035), transparent 18rem),
        linear-gradient(180deg, #0b1424 0%, #08111f 100%);
}
html[data-site-theme="dark"] .landing-v24 .site-footer .site-brand,
html[data-site-theme="dark"] .landing-v24 .footer-grid h3 { color:#ffffff; }
html[data-site-theme="dark"] .landing-v24 .footer-brand-col > p,
html[data-site-theme="dark"] .landing-v24 .footer-grid > div:not(.footer-brand-col) > a,
html[data-site-theme="dark"] .landing-v24 .footer-address,
html[data-site-theme="dark"] .landing-v24 .footer-bottom { color:#8293aa; }
html[data-site-theme="dark"] .landing-v24 .footer-bottom { border-top-color:#253044; }
html[data-site-theme="dark"] .landing-v24 .social-links a { color:#bac4d2; background:#172033; }

/* Back to top follows theme --------------------------------------------- */
.landing-v24 .back-to-top {
    color:#ffffff;
    border-color:rgba(91,92,226,.18);
    background:linear-gradient(145deg,#5b5ce2,#7c5ce7);
    box-shadow:0 12px 28px rgba(91,92,226,.20), inset 0 1px 0 rgba(255,255,255,.22);
}
.landing-v24 .back-to-top:hover {
    border-color:rgba(91,92,226,.28);
    background:linear-gradient(145deg,#4f46d0,#6d4fd4);
    box-shadow:0 16px 34px rgba(91,92,226,.25);
}
html[data-site-theme="dark"] .landing-v24 .back-to-top {
    color:#d8e1ee;
    border-color:rgba(148,163,184,.18);
    background:rgba(17,29,49,.92);
    box-shadow:0 10px 24px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-site-theme="dark"] .landing-v24 .back-to-top:hover {
    color:#fff; border-color:rgba(139,92,246,.34); background:rgba(92,75,190,.92);
}

/* Theme-safe transitions ------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .landing-v24 .site-header,
    .landing-v24 .hero-section,
    .landing-v24 .stats-strip,
    .landing-v24 .app-experience-section,
    .landing-v24 #services,
    .landing-v24 #how-it-works,
    .landing-v24 .about-section,
    .landing-v24 .section-muted,
    .landing-v24 .cta-section,
    .landing-v24 .site-footer,
    .landing-v24 .experience-shell,
    .landing-v24 .category-card,
    .landing-v24 .service-card,
    .landing-v24 .step-card,
    .landing-v24 .feature-list > div {
        transition: background .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
    }
}

@media (max-width: 991.98px) {
    .landing-v24 .site-header.nav-open .site-nav,
    .landing-v24 .site-header.nav-open .nav-actions {
        border-color:#dfe5ee;
        background:rgba(255,255,255,.98);
        box-shadow:0 24px 54px rgba(31,41,55,.12);
    }
    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav,
    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .nav-actions {
        border-color:rgba(203,213,225,.12);
        background:rgba(13,26,45,.98);
        box-shadow:0 24px 54px rgba(2,6,23,.38);
    }
}

@media (max-width: 767.98px) {
    .landing-v24 .theme-toggle {
        min-width: 82px;
        height: 40px;
    }
}

/* ========================================================================== 
   V25 — Light theme contrast + solid professional palette
   - Fixes old high-specificity dark V17 selectors leaking into Light mode.
   - Uses solid slate/indigo/teal surfaces instead of washed-out text/colors.
   - Dark mode is intentionally untouched.
   ========================================================================== */

html[data-site-theme="light"] body.landing-v24 {
    --theme-page: #f4f7fb;
    --theme-surface: #ffffff;
    --theme-surface-soft: #eef3f8;
    --theme-surface-tint: #f3f4ff;
    --theme-ink: #0f172a;
    --theme-text: #334155;
    --theme-muted: #64748b;
    --theme-line: #dbe3ed;
    --theme-line-strong: #cbd6e2;
    --theme-header: rgba(255, 255, 255, .96);
    --theme-card-shadow: 0 14px 34px rgba(15, 23, 42, .07);
    --theme-card-shadow-hover: 0 20px 46px rgba(51, 65, 85, .13);
    color: #0f172a;
    background: #f4f7fb;
}

/* Header: crisp and readable */
html[data-site-theme="light"] .landing-v24 .site-header {
    background: rgba(255,255,255,.96);
    border-bottom-color: #dfe6ef;
    box-shadow: 0 8px 28px rgba(15,23,42,.055);
}
html[data-site-theme="light"] .landing-v24 .site-brand { color:#0f172a; }
html[data-site-theme="light"] .landing-v24 .site-nav a { color:#475569; }
html[data-site-theme="light"] .landing-v24 .site-nav a:hover { color:#4f46e5; }
html[data-site-theme="light"] .landing-v24 .nav-actions .btn-ghost {
    color:#334155;
    border-color:#d6dee9;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .theme-toggle {
    color:#334155;
    border-color:#d6dee9;
    background:#ffffff;
}

/* Hero: stronger copy, calm light gradient */
html[data-site-theme="light"] .landing-v24 .hero-section {
    background:
        radial-gradient(circle at 86% 14%, rgba(79,70,229,.10), transparent 27rem),
        radial-gradient(circle at 7% 88%, rgba(13,148,136,.08), transparent 25rem),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 52%, #f7fafc 100%);
}
html[data-site-theme="light"] .landing-v24 .hero-copy h1 { color:#0f172a; }
html[data-site-theme="light"] .landing-v24 .hero-copy h1 span {
    background: linear-gradient(90deg,#4f46e5 0%,#6d5bd0 52%,#7c3aed 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}
html[data-site-theme="light"] .landing-v24 .hero-lead { color:#475569; }
html[data-site-theme="light"] .landing-v24 .eyebrow {
    color:#334155;
    border-color:#d9e2ec;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .app-availability-note,
html[data-site-theme="light"] .landing-v24 .hero-proof {
    color:#475569;
    border-color:#d9e2ec;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 26px rgba(15,23,42,.055);
}
html[data-site-theme="light"] .landing-v24 .hero-proof strong { color:#172033; }
html[data-site-theme="light"] .landing-v24 .hero-proof small { color:#64748b; }

/* Stats: white cards + solid text/icon treatment */
html[data-site-theme="light"] .landing-v24 .stats-strip {
    border-color:#dfe6ef;
    background:linear-gradient(180deg,#eef3f8 0%,#eaf0f6 100%);
}
html[data-site-theme="light"] .landing-v24 .stats-grid > .stat-card {
    border-color:#d9e2ec;
    background:#ffffff;
    box-shadow:0 10px 26px rgba(15,23,42,.06);
}
html[data-site-theme="light"] .landing-v24 .stats-grid > .stat-card:hover {
    border-color:#c7d2fe;
    background:#ffffff;
    box-shadow:0 18px 42px rgba(79,70,229,.13);
}
html[data-site-theme="light"] .landing-v24 .stats-grid .stat-copy strong { color:#0f172a; }
html[data-site-theme="light"] .landing-v24 .stats-grid .stat-copy > span { color:#526174; }
html[data-site-theme="light"] .landing-v24 .stat-card-services:hover .stat-icon { background:linear-gradient(145deg,#5b5ce2,#7c5ce7); }
html[data-site-theme="light"] .landing-v24 .stat-card-providers:hover .stat-icon { background:linear-gradient(145deg,#0f9f91,#14b8a6); }
html[data-site-theme="light"] .landing-v24 .stat-card-categories:hover .stat-icon { background:linear-gradient(145deg,#d58a22,#f0aa43); }
html[data-site-theme="light"] .landing-v24 .stat-card-access:hover .stat-icon { background:linear-gradient(145deg,#1684b8,#38a7d5); }
html[data-site-theme="light"] .landing-v24 .stat-card:hover .stat-icon i { color:#ffffff !important; }

/* High-specificity section heading fixes.
   These intentionally outrank older .landing-v17 section rules. */
html[data-site-theme="light"] .landing-v24 .app-experience-section .section-heading h2,
html[data-site-theme="light"] .landing-v24 #services .section-heading h2,
html[data-site-theme="light"] .landing-v24 #how-it-works .section-heading h2,
html[data-site-theme="light"] .landing-v24 .section-muted .section-heading h2,
html[data-site-theme="light"] .landing-v24 .about-section .about-copy h2 {
    color:#0f172a;
    text-shadow:none;
}
html[data-site-theme="light"] .landing-v24 .app-experience-section .section-heading p,
html[data-site-theme="light"] .landing-v24 #services .section-heading p,
html[data-site-theme="light"] .landing-v24 #how-it-works .section-heading p,
html[data-site-theme="light"] .landing-v24 .section-muted .section-heading p,
html[data-site-theme="light"] .landing-v24 .about-section .about-copy > p {
    color:#526174;
    text-shadow:none;
}
html[data-site-theme="light"] .landing-v24 .section-kicker,
html[data-site-theme="light"] .landing-v24 .app-experience-section .section-kicker,
html[data-site-theme="light"] .landing-v24 #services .section-kicker,
html[data-site-theme="light"] .landing-v24 #how-it-works .section-kicker,
html[data-site-theme="light"] .landing-v24 .section-muted .section-kicker,
html[data-site-theme="light"] .landing-v24 .about-section .section-kicker {
    color:#4f46e5;
    border-color:#d9d6fe;
    background:#eeefff;
}

/* App experience */
html[data-site-theme="light"] .landing-v24 .app-experience-section {
    color:#0f172a;
    background:
        radial-gradient(circle at 88% 12%, rgba(79,70,229,.075), transparent 25rem),
        radial-gradient(circle at 6% 84%, rgba(13,148,136,.055), transparent 22rem),
        linear-gradient(180deg,#eef3f8 0%,#f3f6fa 56%,#eef3f8 100%);
}
html[data-site-theme="light"] .landing-v24 .experience-shell {
    border-color:#dbe3ed;
    background:#ffffff;
    box-shadow:0 18px 44px rgba(15,23,42,.08);
}
html[data-site-theme="light"] .landing-v24 .experience-copy h3 { color:#0f172a; }
html[data-site-theme="light"] .landing-v24 .experience-copy > p { color:#526174; }
html[data-site-theme="light"] .landing-v24 .experience-feature-list li { color:#334155; }
html[data-site-theme="light"] .landing-v24 .experience-slide-meta { color:#64748b; }
html[data-site-theme="light"] .landing-v24 .experience-slide-meta > span { color:#4f46e5; }
html[data-site-theme="light"] .landing-v24 .experience-tab {
    color:#526174;
    border-color:#dbe3ed;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .experience-tab.active {
    color:#4338ca;
    border-color:#c7d2fe;
    background:#eef2ff;
}

/* Service categories */
html[data-site-theme="light"] .landing-v24 #services {
    color:#0f172a;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .category-card {
    border-color:#dde5ef;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .category-card h3 { color:#172033; }
html[data-site-theme="light"] .landing-v24 .category-card p { color:#64748b; }
html[data-site-theme="light"] .landing-v24 .category-icon {
    color:#4f46e5;
    background:#eef2ff;
}

/* Featured services: solid off-white surface, not washed-out */
html[data-site-theme="light"] .landing-v24 .section-muted {
    color:#0f172a;
    background:linear-gradient(180deg,#f1f5f9 0%,#f6f8fb 100%);
}
html[data-site-theme="light"] .landing-v24 .service-card {
    border-color:#dbe3ed;
    background:#ffffff;
    box-shadow:0 12px 30px rgba(15,23,42,.065);
}
html[data-site-theme="light"] .landing-v24 .service-body h3 { color:#172033; }
html[data-site-theme="light"] .landing-v24 .service-body p { color:#526174; }
html[data-site-theme="light"] .landing-v24 .service-meta { color:#0f766e; }
html[data-site-theme="light"] .landing-v24 .service-footer small { color:#64748b; }
html[data-site-theme="light"] .landing-v24 .service-footer strong,
html[data-site-theme="light"] .landing-v24 .service-price { color:#0f172a; }

/* How it works */
html[data-site-theme="light"] .landing-v24 #how-it-works {
    color:#0f172a;
    background:#eef3f8;
}
html[data-site-theme="light"] .landing-v24 .step-card {
    border-color:#dbe3ed;
    background:#ffffff;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
}
html[data-site-theme="light"] .landing-v24 .step-card h3 { color:#172033; }
html[data-site-theme="light"] .landing-v24 .step-card p { color:#526174; }
html[data-site-theme="light"] .landing-v24 .step-number { color:#dfe5ee; }

/* About */
html[data-site-theme="light"] .landing-v24 .about-section {
    color:#0f172a;
    background:#ffffff;
}
html[data-site-theme="light"] .landing-v24 .feature-list > div {
    border-color:#dbe3ed;
    background:#f8fafc;
    box-shadow:0 8px 22px rgba(15,23,42,.045);
}
html[data-site-theme="light"] .landing-v24 .feature-list strong { color:#172033; }
html[data-site-theme="light"] .landing-v24 .feature-list small { color:#64748b; }

/* CTA: clear dark text on a calm tinted surface */
html[data-site-theme="light"] .landing-v24 .cta-section { background:#f4f7fb; }
html[data-site-theme="light"] .landing-v24 .cta-card-pro {
    border-color:#d6dfeb;
    background:
        radial-gradient(circle at 8% 0%, rgba(79,70,229,.08), transparent 17rem),
        linear-gradient(145deg,#ffffff 0%,#f4f5ff 58%,#eef7f7 100%);
    box-shadow:0 14px 36px rgba(15,23,42,.075);
}
html[data-site-theme="light"] .landing-v24 .cta-kicker { color:#4f46e5; }
html[data-site-theme="light"] .landing-v24 .cta-card h2 { color:#0f172a; }
html[data-site-theme="light"] .landing-v24 .cta-card p { color:#526174; }
html[data-site-theme="light"] .landing-v24 .cta-trust { color:#475569; }

/* Footer: solid professional slate on light surface */
html[data-site-theme="light"] .landing-v24 .site-footer {
    color:#475569;
    border-top-color:#d8e1ec;
    background:linear-gradient(180deg,#e9eef5 0%,#e4eaf2 100%);
}
html[data-site-theme="light"] .landing-v24 .site-footer .site-brand,
html[data-site-theme="light"] .landing-v24 .footer-grid h3 { color:#172033; }
html[data-site-theme="light"] .landing-v24 .footer-brand-col > p,
html[data-site-theme="light"] .landing-v24 .footer-grid > div:not(.footer-brand-col) > a,
html[data-site-theme="light"] .landing-v24 .footer-address,
html[data-site-theme="light"] .landing-v24 .footer-bottom { color:#526174; }
html[data-site-theme="light"] .landing-v24 .footer-grid > div:not(.footer-brand-col) > a:hover { color:#4338ca; }
html[data-site-theme="light"] .landing-v24 .footer-bottom { border-top-color:#cfd9e5; }

/* Keep text readable while reveal animations are active */
html[data-site-theme="light"] .landing-v24 .reveal.is-visible { color:inherit; }

@media (max-width: 767.98px) {
    html[data-site-theme="light"] .landing-v24 .site-header.nav-open .site-nav,
    html[data-site-theme="light"] .landing-v24 .site-header.nav-open .nav-actions {
        background:#ffffff;
        border-color:#dbe3ed;
    }
}

/* ========================================================================== 
   V26 — Tighter hero composition + footer app-store actions
   - Pulls the hero copy upward on desktop so the first screen feels intentional.
   - Adds compact Google Play / App Store actions in the footer using existing
     backend-managed store URLs; no new database fields are required.
   ========================================================================== */

/* Hero: reduce the oversized empty top band without making the section cramped. */
.landing-v26 .hero-section {
    min-height: auto;
    padding-top: clamp(34px, 3.1vw, 52px);
    padding-bottom: clamp(52px, 4.8vw, 76px);
}

.landing-v26 .hero-grid {
    align-items: center;
}

.landing-v26 .hero-copy {
    position: relative;
    z-index: 2;
    padding-top: 0;
}

.landing-v26 .hero-copy h1 {
    margin-top: 16px;
    margin-bottom: 16px;
}

.landing-v26 .hero-actions,
.landing-v26 .hero-store-actions {
    margin-top: 24px;
}

.landing-v26 .app-availability-note {
    margin-top: 14px;
}

.landing-v26 .hero-proof {
    margin-top: 20px;
}

/* Keep the visual balanced with the tighter copy column. */
.landing-v26 .app-hero-stage {
    min-height: clamp(500px, 39vw, 585px);
}

/* Footer app download actions */
.landing-v26 .footer-app-downloads {
    margin-top: 20px;
}

.landing-v26 .footer-app-label {
    display: block;
    margin-bottom: 9px;
    color: #7b8798;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-v26 .footer-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.landing-v26 .footer-app-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 7px 11px;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 12px;
    color: #e2e8f0;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.landing-v26 .footer-app-link:hover {
    color: #ffffff;
    border-color: rgba(129, 140, 248, .42);
    background: rgba(99,102,241,.12);
    box-shadow: 0 10px 24px rgba(15,23,42,.14);
    transform: translateY(-2px);
}

.landing-v26 .footer-app-icon {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    place-items: center;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(145deg, #4f46e5, #6366f1);
    font-size: 14px;
}

.landing-v26 .footer-app-link-google .footer-app-icon {
    background: linear-gradient(145deg, #0f766e, #14b8a6);
}

.landing-v26 .footer-app-link-apple .footer-app-icon {
    background: linear-gradient(145deg, #334155, #0f172a);
}

.landing-v26 .footer-app-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    line-height: 1.05;
}

.landing-v26 .footer-app-copy small {
    color: #94a3b8;
    font-size: 7px;
    font-weight: 650;
    letter-spacing: .02em;
}

.landing-v26 .footer-app-copy strong {
    margin-top: 3px;
    color: inherit;
    font-size: 11px;
    font-weight: 780;
    white-space: nowrap;
}

/* Light mode: crisp store controls instead of dark blocks. */
html[data-site-theme="light"] .landing-v26 .footer-app-label {
    color: #64748b;
}

html[data-site-theme="light"] .landing-v26 .footer-app-link {
    color: #25324a;
    border-color: #cfd9e5;
    background: rgba(255,255,255,.76);
    box-shadow: 0 7px 18px rgba(15,23,42,.045);
}

html[data-site-theme="light"] .landing-v26 .footer-app-link:hover {
    color: #312e81;
    border-color: #bfc7fb;
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(79,70,229,.10);
}

html[data-site-theme="light"] .landing-v26 .footer-app-copy small {
    color: #64748b;
}

/* Tablet/mobile: don't pull content unnaturally; keep compact store controls. */
@media (max-width: 1050px) {
    .landing-v26 .hero-section {
        padding-top: 42px;
    }

    .landing-v26 .hero-copy {
        padding-top: 0;
    }

    .landing-v26 .app-hero-stage {
        min-height: 500px;
    }
}

@media (max-width: 820px) {
    .landing-v26 .hero-section {
        padding-top: 34px;
        padding-bottom: 62px;
    }

    .landing-v26 .hero-copy h1 {
        margin-top: 14px;
    }

    .landing-v26 .footer-app-links {
        gap: 8px;
    }
}

@media (max-width: 560px) {
    .landing-v26 .hero-section {
        padding-top: 28px;
        padding-bottom: 52px;
    }

    .landing-v26 .footer-app-link {
        min-height: 42px;
        padding: 6px 9px;
    }

    .landing-v26 .footer-app-copy strong {
        font-size: 10px;
    }
}

/* ========================================================================== 
   V27 — Auth pages follow the same public Light / Dark theme
   - Uses the same localStorage key as the homepage: home-services-public-theme
   - Default is Light when no preference exists.
   - Light palette mirrors the homepage: slate + indigo + teal on crisp whites.
   - Dark palette mirrors the homepage: midnight navy + indigo/teal accents.
   ========================================================================== */

body.public-auth-page.auth-v14.auth-theme-v27 {
    --auth-light-ink: #0f172a;
    --auth-light-text: #334155;
    --auth-light-muted: #64748b;
    --auth-light-line: #dbe3ed;
    --auth-light-soft: #f4f7fb;
    --auth-light-card: #ffffff;
    --auth-indigo: #4f46e5;
    --auth-indigo-2: #6366f1;
    --auth-teal: #0f766e;
    --auth-teal-2: #14b8a6;
    transition: background-color .25s ease, color .25s ease;
}

/* Shared top-right controls */
.auth-theme-v27 .auth14-main-actions {
    position: absolute;
    top: 22px;
    right: 24px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 9px;
}

.auth-theme-v27 .auth14-main-actions .auth14-home-link {
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
}

.auth-theme-v27 .auth-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 5px 11px 5px 7px;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 780;
    line-height: 1;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.auth-theme-v27 .auth-theme-toggle:hover {
    transform: translateY(-2px);
}

.auth-theme-v27 .auth-theme-toggle-icon {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   LIGHT MODE — same solid combination as the public homepage
   -------------------------------------------------------------------------- */
html[data-site-theme="light"] body.auth-theme-v27 {
    color: var(--auth-light-ink);
    background: #eef3f8;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-story {
    color: var(--auth-light-ink);
    background:
        radial-gradient(circle at 92% 4%, rgba(79,70,229,.12), transparent 24rem),
        radial-gradient(circle at 4% 94%, rgba(15,118,110,.08), transparent 22rem),
        linear-gradient(145deg, #eef3f8 0%, #f7f9fc 52%, #f1f5f9 100%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-story.has-image::after {
    background-image:
        linear-gradient(145deg, rgba(241,245,249,.92), rgba(248,250,252,.84) 54%, rgba(238,242,255,.88)),
        var(--auth14-image);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-grid {
    opacity: .75;
    background-image:
        linear-gradient(rgba(79,70,229,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79,70,229,.055) 1px, transparent 1px);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-story::before {
    background: linear-gradient(90deg, rgba(255,255,255,.26), transparent 22%, transparent 78%, rgba(255,255,255,.26));
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-orb-one {
    background: radial-gradient(circle at 35% 35%, rgba(99,102,241,.20), rgba(79,70,229,.08) 55%, transparent 72%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-orb-two {
    background: radial-gradient(circle at 60% 40%, rgba(20,184,166,.13), rgba(15,118,110,.05) 52%, transparent 72%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-flow path {
    stroke: #6366f1;
    opacity: .55;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-flow circle {
    fill: #0f766e;
    opacity: .55;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-brand-copy strong,
html[data-site-theme="light"] .auth-theme-v27 .auth14-story-content h1,
html[data-site-theme="light"] .auth-theme-v27 .auth14-metrics strong,
html[data-site-theme="light"] .auth-theme-v27 .auth14-capability strong,
html[data-site-theme="light"] .auth-theme-v27 .auth14-secure-pill b {
    color: #0f172a;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-brand-copy small,
html[data-site-theme="light"] .auth-theme-v27 .auth14-story-content > p,
html[data-site-theme="light"] .auth-theme-v27 .auth14-metrics span,
html[data-site-theme="light"] .auth-theme-v27 .auth14-capability small,
html[data-site-theme="light"] .auth-theme-v27 .auth14-story-footer,
html[data-site-theme="light"] .auth-theme-v27 .auth14-secure-pill small {
    color: #64748b;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-story-content h1 span {
    color: transparent;
    background: linear-gradient(90deg, #4f46e5 0%, #6366f1 48%, #0f766e 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-top-pill {
    color: #4338ca;
    border-color: #c7d2fe;
    background: rgba(238,242,255,.92);
    box-shadow: 0 8px 20px rgba(79,70,229,.06);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-eyebrow {
    color: #334155;
    border-color: #d7e0ea;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 22px rgba(15,23,42,.045);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-metrics {
    border-color: #dbe3ed;
    background: rgba(255,255,255,.86);
    box-shadow: 0 12px 30px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.88);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-metrics > div + div {
    border-left-color: #dde5ef;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability {
    border-color: #dbe3ed;
    background: rgba(255,255,255,.76);
    box-shadow: 0 7px 18px rgba(15,23,42,.035);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:hover {
    border-color: #c7d2fe;
    background: linear-gradient(90deg, #ffffff, #f4f5ff);
    box-shadow: 0 11px 26px rgba(79,70,229,.075);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability > span {
    color: #4f46e5;
    border-color: #d9e0ff;
    background: #eef2ff;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:nth-child(2) > span,
html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:nth-child(4) > span {
    color: #0f766e;
    border-color: #c9eee8;
    background: #ecfdf8;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-secure-pill {
    border-color: #dbe3ed;
    background: rgba(255,255,255,.82);
    box-shadow: 0 8px 18px rgba(15,23,42,.035);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main {
    background:
        radial-gradient(circle at 72% 12%, rgba(79,70,229,.065), transparent 25rem),
        radial-gradient(circle at 15% 88%, rgba(15,118,110,.045), transparent 22rem),
        #f4f7fb;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main::before {
    background-image: radial-gradient(rgba(79,70,229,.06) .7px, transparent .7px);
    opacity: .20;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-home-link,
html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle {
    color: #475569;
    border-color: #dbe3ed;
    background: rgba(255,255,255,.88);
    box-shadow: 0 8px 22px rgba(15,23,42,.055);
}

html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle-icon {
    color: #d97706;
    background: #fff7ed;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-home-link:hover,
html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle:hover {
    color: #4338ca;
    border-color: #c7d2fe;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(79,70,229,.09);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand {
    color: #0f172a;
    border-color: #dbe3ed;
    background: rgba(255,255,255,.90);
    box-shadow: 0 9px 24px rgba(15,23,42,.05);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand strong { color:#0f172a; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand small { color:#64748b; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-panel {
    border-color: #dbe3ed;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 68px rgba(15,23,42,.10), 0 4px 16px rgba(15,23,42,.035);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-card-icon {
    color: #ffffff;
    background: linear-gradient(145deg, #4f46e5, #0f766e);
    box-shadow: 0 13px 30px rgba(79,70,229,.20), inset 0 1px 0 rgba(255,255,255,.24);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-heading-kicker {
    color: #4338ca;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-heading-kicker i { color:#0f766e; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-heading h2 { color:#0f172a; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-heading p { color:#64748b; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-field label { color:#334155; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-input-wrap > i { color:#64748b; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-input {
    color:#172033;
    border-color:#d6dfeb;
    background:#f8fafc;
}
html[data-site-theme="light"] .auth-theme-v27 .auth14-input::placeholder { color:#94a3b8; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-input:hover { border-color:#bdc9d8; background:#ffffff; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-input:focus {
    border-color:#6366f1;
    background:#ffffff;
    box-shadow:0 0 0 4px rgba(99,102,241,.10), 0 9px 24px rgba(15,23,42,.045);
}
html[data-site-theme="light"] .auth-theme-v27 .auth14-input-wrap:focus-within > i { color:#4f46e5; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-password-toggle { color:#64748b; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-password-toggle:hover { color:#4338ca; background:#eef2ff; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-check { color:#475569; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-forgot,
html[data-site-theme="light"] .auth-theme-v27 .auth14-bottom a { color:#4f46e5; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-submit {
    color:#ffffff;
    background:linear-gradient(90deg,#4f46e5 0%,#6366f1 54%,#0f766e 100%);
    box-shadow:0 15px 30px rgba(79,70,229,.20), inset 0 1px 0 rgba(255,255,255,.22);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-security-note,
html[data-site-theme="light"] .auth-theme-v27 .auth14-bottom,
html[data-site-theme="light"] .auth-theme-v27 .auth14-page-meta { color:#64748b; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-divider { color:#94a3b8; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-divider::before,
html[data-site-theme="light"] .auth-theme-v27 .auth14-divider::after { background:#dbe3ed; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-social {
    color:#334155;
    border-color:#dbe3ed;
    background:#ffffff;
}
html[data-site-theme="light"] .auth-theme-v27 .auth14-social:hover {
    color:#312e81;
    border-color:#c7d2fe;
    background:#f8faff;
}

/* --------------------------------------------------------------------------
   DARK MODE — same midnight / indigo / teal language as the homepage
   -------------------------------------------------------------------------- */
html[data-site-theme="dark"] body.auth-theme-v27 {
    color:#e8eef7;
    background:#081426;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story {
    color:#f8fafc;
    background:
        radial-gradient(circle at 90% 4%, rgba(99,102,241,.24), transparent 24rem),
        radial-gradient(circle at 5% 92%, rgba(20,184,166,.12), transparent 22rem),
        linear-gradient(145deg,#081426 0%,#102039 52%,#14253f 100%);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story.has-image::after {
    background-image:
        linear-gradient(145deg,rgba(8,20,38,.94),rgba(15,31,54,.89) 54%,rgba(18,35,59,.90)),
        var(--auth14-image);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-grid {
    opacity:.7;
    background-image:
        linear-gradient(rgba(148,163,184,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(148,163,184,.06) 1px,transparent 1px);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-flow path { stroke:#818cf8; opacity:.48; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-flow circle { fill:#2dd4bf; opacity:.58; }

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story-content h1,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-brand-copy strong,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-metrics strong,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability strong,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-secure-pill b { color:#f8fafc; }

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story-content h1 span {
    color:transparent;
    background:linear-gradient(90deg,#a5b4fc 0%,#818cf8 45%,#5eead4 100%);
    -webkit-background-clip:text;
    background-clip:text;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story-content > p,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-brand-copy small,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-metrics span,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability small,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-story-footer,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-secure-pill small { color:#94a3b8; }

html[data-site-theme="dark"] .auth-theme-v27 .auth14-top-pill {
    color:#c7d2fe;
    border-color:rgba(129,140,248,.28);
    background:rgba(99,102,241,.10);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-eyebrow {
    color:#cbd5e1;
    border-color:rgba(148,163,184,.18);
    background:rgba(255,255,255,.045);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-metrics {
    border-color:rgba(148,163,184,.16);
    background:rgba(255,255,255,.055);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-metrics > div + div { border-left-color:rgba(148,163,184,.16); }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability {
    border-color:rgba(148,163,184,.14);
    background:rgba(255,255,255,.035);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:hover {
    border-color:rgba(129,140,248,.30);
    background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(99,102,241,.07));
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability > span {
    color:#a5b4fc;
    border-color:rgba(129,140,248,.18);
    background:rgba(99,102,241,.10);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:nth-child(2) > span,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:nth-child(4) > span {
    color:#5eead4;
    border-color:rgba(45,212,191,.18);
    background:rgba(20,184,166,.09);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-secure-pill {
    border-color:rgba(148,163,184,.14);
    background:rgba(255,255,255,.035);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-main {
    background:
        radial-gradient(circle at 76% 12%,rgba(99,102,241,.10),transparent 24rem),
        radial-gradient(circle at 10% 88%,rgba(20,184,166,.06),transparent 22rem),
        #0b1528;
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main::before {
    background-image:radial-gradient(rgba(148,163,184,.08) .7px,transparent .7px);
    opacity:.22;
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-home-link,
html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle {
    color:#cbd5e1;
    border-color:rgba(148,163,184,.18);
    background:rgba(17,28,49,.88);
    box-shadow:0 10px 26px rgba(2,6,23,.22);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle-icon {
    color:#c4b5fd;
    background:rgba(99,102,241,.13);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-home-link:hover,
html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle:hover {
    color:#ffffff;
    border-color:rgba(129,140,248,.34);
    background:#17243a;
    box-shadow:0 13px 30px rgba(2,6,23,.30);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand {
    color:#f8fafc;
    border-color:rgba(148,163,184,.16);
    background:rgba(17,28,49,.90);
    box-shadow:0 10px 28px rgba(2,6,23,.24);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand strong { color:#f8fafc; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand small { color:#94a3b8; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-panel {
    border-color:rgba(148,163,184,.16);
    background:rgba(17,28,49,.96);
    box-shadow:0 28px 80px rgba(2,6,23,.38),0 4px 18px rgba(2,6,23,.20);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-card-icon {
    color:#ffffff;
    background:linear-gradient(145deg,#6366f1,#0f766e);
    box-shadow:0 14px 34px rgba(99,102,241,.20),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading-kicker { color:#a5b4fc; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading-kicker i { color:#5eead4; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading h2 { color:#f8fafc; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading p { color:#94a3b8; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-field label { color:#cbd5e1; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input-wrap > i { color:#94a3b8; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input {
    color:#f8fafc;
    border-color:#334155;
    background:#152238;
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input::placeholder { color:#7f8da3; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input:hover { border-color:#475569; background:#17263e; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input:focus {
    border-color:#818cf8;
    background:#17263e;
    box-shadow:0 0 0 4px rgba(129,140,248,.11),0 10px 28px rgba(2,6,23,.18);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-input-wrap:focus-within > i { color:#a5b4fc; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-password-toggle { color:#94a3b8; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-password-toggle:hover { color:#c7d2fe; background:rgba(99,102,241,.10); }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-check { color:#cbd5e1; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-forgot,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-bottom a { color:#a5b4fc; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-submit {
    color:#ffffff;
    background:linear-gradient(90deg,#6366f1 0%,#4f46e5 48%,#0f766e 100%);
    box-shadow:0 16px 34px rgba(79,70,229,.22),inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-security-note,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-bottom,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-page-meta { color:#94a3b8; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-divider { color:#64748b; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-divider::before,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-divider::after { background:#334155; }
html[data-site-theme="dark"] .auth-theme-v27 .auth14-social {
    color:#e2e8f0;
    border-color:#334155;
    background:#152238;
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-social:hover {
    color:#ffffff;
    border-color:#6366f1;
    background:#182842;
}

/* Make the register brand cap follow the active theme. */
html[data-site-theme="light"] body.auth-theme-v27 {
    --auth-brand-cap-bg:rgba(255,255,255,.98);
    --auth-brand-cap-border:#dbe3ed;
    --auth-brand-cap-shadow:0 13px 30px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.94);
    --auth-brand-cap-title:#0f172a;
    --auth-brand-cap-subtitle:#64748b;
}
html[data-site-theme="dark"] body.auth-theme-v27 {
    --auth-brand-cap-bg:rgba(17,28,49,.97);
    --auth-brand-cap-border:rgba(148,163,184,.18);
    --auth-brand-cap-shadow:0 16px 38px rgba(2,6,23,.34),inset 0 1px 0 rgba(255,255,255,.05);
    --auth-brand-cap-title:#f8fafc;
    --auth-brand-cap-subtitle:#94a3b8;
}

@media (max-width: 1100px) {
    .auth-theme-v27 .auth14-main-actions {
        top: 18px;
        right: 18px;
    }
}

@media (max-width: 560px) {
    .auth-theme-v27 .auth14-main-actions {
        top: 12px;
        right: 12px;
        gap: 7px;
    }

    .auth-theme-v27 .auth-theme-toggle {
        min-width: 40px;
        padding: 5px;
    }

    .auth-theme-v27 .auth-theme-toggle-label {
        display: none;
    }
}

/* ========================================================================
   V29 — Premium Amber / Orange Dark Theme
   ------------------------------------------------------------------------
   Scope: DARK mode only. Light mode remains unchanged.
   Visual direction: midnight navy surfaces + warm amber/gold/orange accents.
   ======================================================================== */

html[data-site-theme="dark"] body.marketing-page.landing-v24 {
    --dark-amber:#f59e0b;
    --dark-gold:#fbbf24;
    --dark-orange:#f97316;
    --dark-orange-deep:#ea580c;
    --dark-surface:#0f1b2d;
    --dark-surface-2:#132238;
    --dark-line:rgba(251,191,36,.14);
    --dark-soft-line:rgba(148,163,184,.14);
    --dark-text:#f8fafc;
    --dark-muted:#9ba9bb;
    background:#07111f;
}

/* Header / navigation */
html[data-site-theme="dark"] .landing-v24 .site-header {
    background:rgba(8,18,32,.91);
    border-bottom-color:rgba(251,191,36,.10);
    box-shadow:0 12px 34px rgba(2,6,23,.22);
}

html[data-site-theme="dark"] .landing-v24 .site-nav a {
    color:#cbd5e1;
}

html[data-site-theme="dark"] .landing-v24 .site-nav a:hover {
    color:#fbbf24;
}

html[data-site-theme="dark"] .landing-v24 .site-nav a::after {
    background:linear-gradient(90deg,#fbbf24,#f97316);
}

html[data-site-theme="dark"] .landing-v24 .theme-toggle {
    color:#e2e8f0;
    border-color:rgba(251,191,36,.16);
    background:rgba(17,31,51,.88);
}

html[data-site-theme="dark"] .landing-v24 .theme-toggle:hover {
    color:#fff7ed;
    border-color:rgba(245,158,11,.36);
    background:#14243a;
}

html[data-site-theme="dark"] .landing-v24 .theme-toggle-icon {
    color:#f59e0b;
    background:rgba(245,158,11,.12);
}

/* Hero */
html[data-site-theme="dark"] .landing-v24 .hero-section {
    background:
        radial-gradient(circle at 84% 15%,rgba(249,115,22,.16),transparent 30rem),
        radial-gradient(circle at 10% 86%,rgba(245,158,11,.11),transparent 27rem),
        linear-gradient(135deg,#07111f 0%,#0b1728 44%,#101c30 100%);
}

html[data-site-theme="dark"] .landing-v24 .hero-section::before {
    opacity:.24;
}

html[data-site-theme="dark"] .landing-v24 .eyebrow {
    color:#e2e8f0;
    border-color:rgba(251,191,36,.18);
    background:rgba(255,255,255,.045);
    box-shadow:0 10px 30px rgba(2,6,23,.16);
}

html[data-site-theme="dark"] .landing-v24 .eyebrow i {
    color:#fbbf24;
}

html[data-site-theme="dark"] .landing-v24 .hero-copy h1 {
    color:#f8fafc;
}

html[data-site-theme="dark"] .landing-v24 .hero-copy h1 span {
    background:linear-gradient(92deg,#fde68a 0%,#fbbf24 35%,#f59e0b 66%,#f97316 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

html[data-site-theme="dark"] .landing-v24 .hero-lead {
    color:#aeb9c8;
}

html[data-site-theme="dark"] .landing-v24 .btn-primary {
    color:#fff;
    background:linear-gradient(135deg,#f59e0b 0%,#f97316 68%,#ea580c 100%);
    box-shadow:0 16px 34px rgba(249,115,22,.24);
}

html[data-site-theme="dark"] .landing-v24 .btn-primary:hover {
    box-shadow:0 20px 44px rgba(249,115,22,.32);
}

html[data-site-theme="dark"] .landing-v24 .btn-soft,
html[data-site-theme="dark"] .landing-v24 .btn-ghost {
    color:#e2e8f0;
    border-color:rgba(148,163,184,.18);
    background:rgba(17,31,51,.78);
}

html[data-site-theme="dark"] .landing-v24 .btn-soft:hover,
html[data-site-theme="dark"] .landing-v24 .btn-ghost:hover {
    color:#fff7ed;
    border-color:rgba(245,158,11,.28);
    background:#14243a;
}

html[data-site-theme="dark"] .landing-v24 .app-availability-note,
html[data-site-theme="dark"] .landing-v24 .hero-proof {
    color:#cbd5e1;
    border-color:rgba(251,191,36,.12);
    background:rgba(17,31,51,.66);
    box-shadow:0 14px 32px rgba(2,6,23,.16);
}

html[data-site-theme="dark"] .landing-v24 .app-availability-note i {
    color:#f59e0b;
    background:rgba(245,158,11,.11);
}

html[data-site-theme="dark"] .landing-v24 .hero-proof strong { color:#f8fafc; }
html[data-site-theme="dark"] .landing-v24 .hero-proof small { color:#94a3b8; }

/* Hero visual */
html[data-site-theme="dark"] .landing-v24 .app-hero-stage {
    border-color:rgba(251,191,36,.14);
    background:
        radial-gradient(circle at 78% 14%,rgba(249,115,22,.15),transparent 27%),
        radial-gradient(circle at 16% 86%,rgba(245,158,11,.09),transparent 28%),
        linear-gradient(145deg,#0d1a2c,#111f34 55%,#172239);
    box-shadow:0 34px 90px rgba(2,6,23,.38),0 0 0 1px rgba(251,191,36,.05) inset;
}

html[data-site-theme="dark"] .landing-v24 .floating-card {
    color:#172033;
    border-color:rgba(251,191,36,.12);
    box-shadow:0 18px 42px rgba(2,6,23,.28);
}

html[data-site-theme="dark"] .landing-v24 .float-rating {
    color:#b45309;
    background:#fff7df;
}

/* Stats */
html[data-site-theme="dark"] .landing-v24 .stats-strip {
    background:linear-gradient(180deg,#091426,#0b1728);
    border-color:rgba(251,191,36,.08);
}

html[data-site-theme="dark"] .landing-v24 .stats-grid > .stat-card {
    border-color:rgba(148,163,184,.13);
    background:
        radial-gradient(circle at 94% 100%,rgba(245,158,11,.055),transparent 32%),
        linear-gradient(145deg,#101d31,#132238);
    box-shadow:0 16px 36px rgba(2,6,23,.18);
}

html[data-site-theme="dark"] .landing-v24 .stats-grid > .stat-card:hover {
    border-color:rgba(245,158,11,.30);
    background:
        radial-gradient(circle at 92% 96%,rgba(249,115,22,.13),transparent 34%),
        linear-gradient(145deg,#122139,#172842);
    box-shadow:0 22px 50px rgba(2,6,23,.28),0 0 28px rgba(245,158,11,.08);
}

html[data-site-theme="dark"] .landing-v24 .stats-grid .stat-copy strong { color:#f8fafc; }
html[data-site-theme="dark"] .landing-v24 .stats-grid .stat-copy > span { color:#9aa9bd; }

html[data-site-theme="dark"] .landing-v24 .stat-icon {
    color:#fbbf24 !important;
    border-color:rgba(251,191,36,.16) !important;
    background:rgba(245,158,11,.09) !important;
}

html[data-site-theme="dark"] .landing-v24 .stat-card:hover .stat-icon {
    color:#fff !important;
    border-color:transparent !important;
    background:linear-gradient(145deg,#f59e0b,#f97316) !important;
    box-shadow:0 12px 28px rgba(249,115,22,.24);
}

html[data-site-theme="dark"] .landing-v24 .stat-card:hover .stat-icon i { color:#fff !important; }

/* Section typography and kickers */
html[data-site-theme="dark"] .landing-v24 .section-heading h2,
html[data-site-theme="dark"] .landing-v24 .about-copy h2,
html[data-site-theme="dark"] .landing-v24 .experience-copy h3 {
    color:#f8fafc;
}

html[data-site-theme="dark"] .landing-v24 .section-heading p,
html[data-site-theme="dark"] .landing-v24 .about-copy > p,
html[data-site-theme="dark"] .landing-v24 .experience-copy > p {
    color:#9eacbe;
}

html[data-site-theme="dark"] .landing-v24 .section-kicker,
html[data-site-theme="dark"] .landing-v24 .cta-kicker {
    color:#fbbf24;
    border-color:rgba(251,191,36,.16);
    background:rgba(245,158,11,.08);
}

/* App experience */
html[data-site-theme="dark"] .landing-v24 .app-experience-section {
    background:
        radial-gradient(circle at 90% 12%,rgba(249,115,22,.10),transparent 28rem),
        radial-gradient(circle at 8% 88%,rgba(245,158,11,.07),transparent 25rem),
        linear-gradient(180deg,#091426 0%,#0b1728 52%,#091426 100%);
}

html[data-site-theme="dark"] .landing-v24 .experience-shell {
    border-color:rgba(251,191,36,.12);
    background:rgba(15,27,45,.94);
    box-shadow:0 30px 82px rgba(2,6,23,.32);
}

html[data-site-theme="dark"] .landing-v24 .experience-tab {
    color:#a9b5c6;
    border-color:rgba(148,163,184,.15);
    background:rgba(17,31,51,.84);
}

html[data-site-theme="dark"] .landing-v24 .experience-tab:hover {
    color:#fff7ed;
    border-color:rgba(245,158,11,.25);
}

html[data-site-theme="dark"] .landing-v24 .experience-tab.active {
    color:#fde68a;
    border-color:rgba(245,158,11,.36);
    background:rgba(245,158,11,.09);
    box-shadow:0 14px 32px rgba(2,6,23,.18),0 0 0 1px rgba(245,158,11,.04) inset;
}

html[data-site-theme="dark"] .landing-v24 .experience-tab.active .experience-tab-icon {
    color:#fff;
    background:linear-gradient(145deg,#f59e0b,#f97316);
}

html[data-site-theme="dark"] .landing-v24 .experience-tab-progress,
html[data-site-theme="dark"] .landing-v24 .experience-progress-fill,
html[data-site-theme="dark"] .landing-v24 .experience-dot.active {
    background:linear-gradient(90deg,#fbbf24,#f97316);
}

html[data-site-theme="dark"] .landing-v24 .experience-slide-meta > span { color:#fbbf24; }
html[data-site-theme="dark"] .landing-v24 .experience-feature-list li { color:#dbe3ee; }

html[data-site-theme="dark"] .landing-v24 .experience-feature-list li > span {
    color:#fbbf24;
    background:rgba(245,158,11,.10);
}

html[data-site-theme="dark"] .landing-v24 .experience-arrow {
    color:#cbd5e1;
    border-color:rgba(148,163,184,.17);
    background:rgba(17,31,51,.88);
}

html[data-site-theme="dark"] .landing-v24 .experience-arrow:hover {
    color:#fff;
    border-color:#f59e0b;
    background:linear-gradient(145deg,#f59e0b,#f97316);
}

/* Categories / cards */
html[data-site-theme="dark"] .landing-v24 #services,
html[data-site-theme="dark"] .landing-v24 #how-it-works {
    background:linear-gradient(180deg,#081426,#0b1728);
}

html[data-site-theme="dark"] .landing-v24 .category-card,
html[data-site-theme="dark"] .landing-v24 .step-card,
html[data-site-theme="dark"] .landing-v24 .feature-list > div {
    border-color:rgba(148,163,184,.13);
    background:linear-gradient(145deg,#101d31,#132238);
    box-shadow:0 14px 32px rgba(2,6,23,.17);
}

html[data-site-theme="dark"] .landing-v24 .category-card:hover,
html[data-site-theme="dark"] .landing-v24 .step-card:hover,
html[data-site-theme="dark"] .landing-v24 .feature-list > div:hover {
    border-color:rgba(245,158,11,.28);
    box-shadow:0 22px 50px rgba(2,6,23,.27),0 0 26px rgba(245,158,11,.06);
}

html[data-site-theme="dark"] .landing-v24 .category-card h3,
html[data-site-theme="dark"] .landing-v24 .step-card h3,
html[data-site-theme="dark"] .landing-v24 .feature-list strong { color:#f8fafc; }

html[data-site-theme="dark"] .landing-v24 .category-card p,
html[data-site-theme="dark"] .landing-v24 .step-card p,
html[data-site-theme="dark"] .landing-v24 .feature-list small { color:#94a3b8; }

html[data-site-theme="dark"] .landing-v24 .category-icon,
html[data-site-theme="dark"] .landing-v24 .step-icon,
html[data-site-theme="dark"] .landing-v24 .feature-list > div > span {
    color:#fbbf24;
    border-color:rgba(251,191,36,.15);
    background:rgba(245,158,11,.09);
}

html[data-site-theme="dark"] .landing-v24 .category-card:hover .category-icon,
html[data-site-theme="dark"] .landing-v24 .step-card:hover .step-icon,
html[data-site-theme="dark"] .landing-v24 .feature-list > div:hover > span {
    color:#fff;
    background:linear-gradient(145deg,#f59e0b,#f97316);
    box-shadow:0 12px 26px rgba(249,115,22,.22);
}

html[data-site-theme="dark"] .landing-v24 .category-arrow {
    color:#fbbf24;
    background:rgba(245,158,11,.08);
}

html[data-site-theme="dark"] .landing-v24 .category-card:hover .category-arrow {
    color:#fff;
    background:#f97316;
}

html[data-site-theme="dark"] .landing-v24 .step-number { color:rgba(251,191,36,.10); }

/* Featured services */
html[data-site-theme="dark"] .landing-v24 .section-muted {
    background:
        radial-gradient(circle at 90% 18%,rgba(249,115,22,.08),transparent 25rem),
        linear-gradient(180deg,#0a1628,#0d1a2c);
}

html[data-site-theme="dark"] .landing-v24 .service-card {
    border-color:rgba(148,163,184,.13);
    background:#101d31;
    box-shadow:0 16px 38px rgba(2,6,23,.20);
}

html[data-site-theme="dark"] .landing-v24 .service-card:hover {
    border-color:rgba(245,158,11,.24);
    box-shadow:0 24px 56px rgba(2,6,23,.30),0 0 24px rgba(245,158,11,.05);
}

html[data-site-theme="dark"] .landing-v24 .service-body h3,
html[data-site-theme="dark"] .landing-v24 .service-footer strong,
html[data-site-theme="dark"] .landing-v24 .service-price { color:#f8fafc; }
html[data-site-theme="dark"] .landing-v24 .service-body p,
html[data-site-theme="dark"] .landing-v24 .service-footer small { color:#94a3b8; }
html[data-site-theme="dark"] .landing-v24 .service-meta { color:#fbbf24; }

html[data-site-theme="dark"] .landing-v24 .service-footer > a,
html[data-site-theme="dark"] .landing-v24 .service-footer-action {
    color:#fbbf24;
    background:rgba(245,158,11,.09);
}

/* About */
html[data-site-theme="dark"] .landing-v24 .about-section {
    background:
        radial-gradient(circle at 8% 50%,rgba(245,158,11,.07),transparent 23rem),
        linear-gradient(180deg,#091426,#0b1728);
}

/* Professional CTA / footer */
html[data-site-theme="dark"] .landing-v24 .cta-section {
    background:#081426;
}

html[data-site-theme="dark"] .landing-v24 .cta-card-pro {
    border-color:rgba(251,191,36,.15);
    background:
        radial-gradient(circle at 88% 20%,rgba(249,115,22,.12),transparent 20rem),
        linear-gradient(135deg,#101d31,#132238);
    box-shadow:0 24px 60px rgba(2,6,23,.24);
}

html[data-site-theme="dark"] .landing-v24 .cta-card-pro::after {
    background:linear-gradient(90deg,#fbbf24,#f97316);
}

html[data-site-theme="dark"] .landing-v24 .cta-card h2 { color:#f8fafc; }
html[data-site-theme="dark"] .landing-v24 .cta-card p,
html[data-site-theme="dark"] .landing-v24 .cta-trust { color:#9eacbe; }

html[data-site-theme="dark"] .landing-v24 .site-footer {
    background:
        radial-gradient(circle at 82% 0%,rgba(249,115,22,.07),transparent 22rem),
        #07111f;
    border-top-color:rgba(251,191,36,.08);
}

html[data-site-theme="dark"] .landing-v24 .footer-grid > div:not(.footer-brand-col) > a:hover {
    color:#fbbf24;
}

html[data-site-theme="dark"] .landing-v24 .social-links a:hover {
    color:#fff;
    background:linear-gradient(145deg,#f59e0b,#f97316);
}

html[data-site-theme="dark"] .landing-v24 .back-to-top {
    color:#fff;
    border-color:rgba(251,191,36,.20);
    background:linear-gradient(145deg,#f59e0b,#f97316);
    box-shadow:0 14px 30px rgba(249,115,22,.24);
}

html[data-site-theme="dark"] .landing-v24 .back-to-top:hover {
    box-shadow:0 18px 38px rgba(249,115,22,.32);
}

/* Store badges stay recognizable but pick up warm borders in dark mode. */
html[data-site-theme="dark"] .landing-v24 .store-badge {
    border-color:rgba(251,191,36,.14);
}

/* Mobile menu warm dark styling */
@media (max-width:820px) {
    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav,
    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .nav-actions {
        background:#0f1b2d;
        border-color:rgba(251,191,36,.14);
    }
}

/* ========================================================================
   AUTH DARK THEME — same amber/orange product language
   ======================================================================== */

html[data-site-theme="dark"] body.auth-theme-v27 {
    --auth-dark-amber:#f59e0b;
    --auth-dark-gold:#fbbf24;
    --auth-dark-orange:#f97316;
    color:#e8eef7;
    background:#07111f;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story {
    background:
        radial-gradient(circle at 90% 4%,rgba(249,115,22,.20),transparent 24rem),
        radial-gradient(circle at 5% 92%,rgba(245,158,11,.10),transparent 22rem),
        linear-gradient(145deg,#07111f 0%,#0d1b2e 52%,#132238 100%);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story.has-image::after {
    background-image:
        linear-gradient(145deg,rgba(7,17,31,.95),rgba(13,27,46,.90) 54%,rgba(28,26,30,.88)),
        var(--auth14-image);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-flow path {
    stroke:#f59e0b;
    opacity:.48;
}
html[data-site-theme="dark"] .auth-theme-v27 .auth14-flow circle {
    fill:#f97316;
    opacity:.62;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-story-content h1 span {
    background:linear-gradient(90deg,#fde68a 0%,#fbbf24 42%,#f59e0b 68%,#f97316 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-top-pill {
    color:#fde68a;
    border-color:rgba(245,158,11,.27);
    background:rgba(245,158,11,.08);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:hover {
    border-color:rgba(245,158,11,.26);
    background:linear-gradient(90deg,rgba(255,255,255,.045),rgba(249,115,22,.06));
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability > span,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:nth-child(2) > span,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-capability:nth-child(4) > span {
    color:#fbbf24;
    border-color:rgba(251,191,36,.17);
    background:rgba(245,158,11,.09);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-main {
    background:
        radial-gradient(circle at 78% 10%,rgba(249,115,22,.09),transparent 24rem),
        radial-gradient(circle at 10% 88%,rgba(245,158,11,.05),transparent 22rem),
        #091426;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-home-link,
html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle {
    border-color:rgba(251,191,36,.15);
    background:rgba(17,31,51,.90);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle-icon {
    color:#fbbf24;
    background:rgba(245,158,11,.11);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-home-link:hover,
html[data-site-theme="dark"] .auth-theme-v27 .auth-theme-toggle:hover {
    color:#fff7ed;
    border-color:rgba(245,158,11,.30);
    background:#14243a;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-panel {
    border-color:rgba(251,191,36,.13);
    background:rgba(17,31,51,.96);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-card-icon {
    background:linear-gradient(145deg,#f59e0b,#f97316);
    box-shadow:0 14px 34px rgba(249,115,22,.22),inset 0 1px 0 rgba(255,255,255,.14);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading-kicker,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-heading-kicker i,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-forgot,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-bottom a {
    color:#fbbf24;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-input:focus {
    border-color:#f59e0b;
    background:#17263e;
    box-shadow:0 0 0 4px rgba(245,158,11,.10),0 10px 28px rgba(2,6,23,.18);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-input-wrap:focus-within > i {
    color:#fbbf24;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-password-toggle:hover {
    color:#fbbf24;
    background:rgba(245,158,11,.08);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-submit {
    background:linear-gradient(90deg,#f59e0b 0%,#f97316 64%,#ea580c 100%);
    box-shadow:0 16px 34px rgba(249,115,22,.22),inset 0 1px 0 rgba(255,255,255,.12);
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-social:hover {
    color:#fff;
    border-color:#f59e0b;
    background:#182842;
}

html[data-site-theme="dark"] body.auth-theme-v27 {
    --auth-brand-cap-border:rgba(251,191,36,.16);
}

/* ========================================================================
   V31 — Refined Indigo + Teal Light Theme
   ------------------------------------------------------------------------
   Scope: LIGHT mode only.
   Goal: one consistent premium public design language across the landing,
   login and register surfaces: cool off-white backgrounds, solid slate text,
   indigo primary accents and restrained teal secondary accents.
   Dark mode remains the amber/orange V29 treatment.
   ======================================================================== */

html[data-site-theme="light"] body.marketing-page.landing-v24,
html[data-site-theme="light"] body.public-auth-page.auth-theme-v27 {
    --light-indigo:#4f46e5;
    --light-indigo-2:#6366f1;
    --light-indigo-soft:#eef2ff;
    --light-teal:#0f766e;
    --light-teal-2:#14b8a6;
    --light-teal-soft:#ecfdf8;
    --light-ink:#0f172a;
    --light-text:#334155;
    --light-muted:#64748b;
    --light-border:#dce4ee;
    --light-surface:#ffffff;
    --light-canvas:#f5f8fc;
}

/* ------------------------------------------------------------------------
   AUTH — LEFT STORY PANEL
   ------------------------------------------------------------------------ */
html[data-site-theme="light"] .auth-theme-v27 .auth14-story {
    background:
        radial-gradient(circle at 91% 4%,rgba(79,70,229,.16),transparent 22rem),
        radial-gradient(circle at 2% 96%,rgba(20,184,166,.13),transparent 22rem),
        linear-gradient(145deg,#f7f9ff 0%,#f8fbfd 48%,#f2faf8 100%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-grid {
    opacity:.64;
    background-image:
        linear-gradient(rgba(79,70,229,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(15,118,110,.038) 1px,transparent 1px);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-orb-one {
    background:radial-gradient(circle at 36% 35%,rgba(99,102,241,.22),rgba(79,70,229,.09) 56%,transparent 73%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-orb-two {
    background:radial-gradient(circle at 60% 42%,rgba(20,184,166,.18),rgba(15,118,110,.06) 54%,transparent 73%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-flow path {
    stroke:#6366f1;
    opacity:.42;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-flow circle {
    fill:#0f766e;
    opacity:.50;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-story-content h1 span {
    background:linear-gradient(92deg,#4f46e5 0%,#6366f1 42%,#0f766e 84%,#14b8a6 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-top-pill {
    color:#4338ca;
    border-color:#c7d2fe;
    background:linear-gradient(135deg,#f7f7ff,#eef2ff);
    box-shadow:0 9px 24px rgba(79,70,229,.08);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-top-pill i { color:#0f766e; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-eyebrow {
    color:#334155;
    border-color:#dbe4ef;
    background:rgba(255,255,255,.88);
    box-shadow:0 8px 22px rgba(15,23,42,.045);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-status-dot {
    background:#14b8a6;
    box-shadow:0 0 0 4px rgba(20,184,166,.13);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-metrics {
    border-color:#dce4ee;
    background:rgba(255,255,255,.90);
    box-shadow:0 14px 32px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.95);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability {
    border-color:#dce4ee;
    background:rgba(255,255,255,.86);
    box-shadow:0 8px 20px rgba(15,23,42,.038);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:hover {
    transform:translateX(4px);
    border-color:#c7d2fe;
    background:linear-gradient(90deg,#ffffff 0%,#f6f7ff 66%,#f0fdfa 100%);
    box-shadow:0 13px 30px rgba(79,70,229,.075);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability > span {
    color:#4f46e5;
    border-color:#d9ddff;
    background:#eef2ff;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:nth-child(2) > span,
html[data-site-theme="light"] .auth-theme-v27 .auth14-capability:nth-child(4) > span {
    color:#0f766e;
    border-color:#c8ebe5;
    background:#ecfdf8;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-secure-pill i { color:#0f766e; }

/* ------------------------------------------------------------------------
   AUTH — RIGHT FORM PANEL
   ------------------------------------------------------------------------ */
html[data-site-theme="light"] .auth-theme-v27 .auth14-main {
    background:
        radial-gradient(circle at 76% 10%,rgba(79,70,229,.095),transparent 24rem),
        radial-gradient(circle at 12% 90%,rgba(20,184,166,.065),transparent 22rem),
        linear-gradient(145deg,#f7f9fc 0%,#f9fbfd 56%,#f3faf9 100%);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main::before {
    background-image:radial-gradient(rgba(79,70,229,.055) .7px,transparent .7px);
    opacity:.16;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-home-link,
html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle {
    color:#475569;
    border-color:#dce4ee;
    background:rgba(255,255,255,.93);
    box-shadow:0 9px 24px rgba(15,23,42,.055);
}

/* Light-mode toggle should visually belong to the indigo/teal system. */
html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle-icon {
    color:#0f766e;
    background:linear-gradient(145deg,#ecfdf8,#eef2ff);
    box-shadow:inset 0 0 0 1px rgba(79,70,229,.08);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-home-link:hover,
html[data-site-theme="light"] .auth-theme-v27 .auth-theme-toggle:hover {
    color:#4338ca;
    border-color:#c7d2fe;
    background:#ffffff;
    box-shadow:0 13px 30px rgba(79,70,229,.09);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand {
    border-color:#dce4ee;
    background:rgba(255,255,255,.94);
    box-shadow:0 10px 28px rgba(15,23,42,.055);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-panel {
    border-color:#dce4ee;
    background:rgba(255,255,255,.975);
    box-shadow:0 28px 74px rgba(44,62,101,.11),0 5px 18px rgba(15,23,42,.035);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-panel::before {
    content:"";
    position:absolute;
    top:0;
    right:28px;
    left:28px;
    height:2px;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,#4f46e5,#6366f1 45%,#0f766e 100%);
    opacity:.78;
    pointer-events:none;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-card-icon {
    color:#ffffff;
    background:linear-gradient(145deg,#4f46e5 0%,#6366f1 42%,#0f766e 100%);
    box-shadow:0 14px 32px rgba(79,70,229,.19),0 8px 24px rgba(15,118,110,.08),inset 0 1px 0 rgba(255,255,255,.24);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-heading-kicker { color:#4338ca; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-heading-kicker i { color:#0f766e; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-heading h2 { color:#0f172a; }
html[data-site-theme="light"] .auth-theme-v27 .auth14-heading p { color:#64748b; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-input {
    color:#172033;
    border-color:#d8e1ec;
    background:#f9fbfd;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-input:hover {
    border-color:#c4cfdd;
    background:#ffffff;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-input:focus {
    border-color:#6366f1;
    background:#ffffff;
    box-shadow:0 0 0 4px rgba(99,102,241,.095),0 10px 28px rgba(15,23,42,.045);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-input-wrap:focus-within > i { color:#4f46e5; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-password-toggle:hover {
    color:#0f766e;
    background:#ecfdf8;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-forgot,
html[data-site-theme="light"] .auth-theme-v27 .auth14-bottom a {
    color:#4f46e5;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-forgot:hover,
html[data-site-theme="light"] .auth-theme-v27 .auth14-bottom a:hover {
    color:#0f766e;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-submit {
    color:#ffffff;
    background:linear-gradient(100deg,#4f46e5 0%,#6366f1 42%,#0f766e 100%);
    box-shadow:0 16px 34px rgba(79,70,229,.20),0 8px 24px rgba(15,118,110,.08),inset 0 1px 0 rgba(255,255,255,.16);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-submit:hover {
    box-shadow:0 20px 42px rgba(79,70,229,.23),0 10px 28px rgba(15,118,110,.11),inset 0 1px 0 rgba(255,255,255,.18);
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-security-note i { color:#0f766e; }

html[data-site-theme="light"] .auth-theme-v27 .auth14-social {
    color:#334155;
    border-color:#dce4ee;
    background:#ffffff;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-social:hover {
    color:#312e81;
    border-color:#c7d2fe;
    background:linear-gradient(145deg,#f8faff,#f2fbf9);
    box-shadow:0 9px 22px rgba(79,70,229,.055);
}

html[data-site-theme="light"] body.auth-theme-v27 {
    --auth-brand-cap-bg:rgba(255,255,255,.985);
    --auth-brand-cap-border:#dce4ee;
    --auth-brand-cap-shadow:0 14px 34px rgba(55,65,105,.10),inset 0 1px 0 rgba(255,255,255,.96);
    --auth-brand-cap-title:#0f172a;
    --auth-brand-cap-subtitle:#64748b;
}

/* ------------------------------------------------------------------------
   LANDING — align the light homepage with the same Indigo / Teal system
   ------------------------------------------------------------------------ */
html[data-site-theme="light"] body.marketing-page.landing-v24 {
    background:
        radial-gradient(circle at 86% 3%,rgba(79,70,229,.07),transparent 27rem),
        radial-gradient(circle at 5% 26%,rgba(20,184,166,.045),transparent 25rem),
        #f7f9fc;
}

html[data-site-theme="light"] .landing-v24 .site-header {
    background:rgba(255,255,255,.91);
    border-bottom-color:#e2e8f0;
    box-shadow:0 10px 30px rgba(15,23,42,.045);
}

html[data-site-theme="light"] .landing-v24 .theme-toggle-icon {
    color:#0f766e;
    background:linear-gradient(145deg,#ecfdf8,#eef2ff);
}

html[data-site-theme="light"] .landing-v24 .site-nav a::after {
    background:linear-gradient(90deg,#4f46e5,#0f766e);
}

html[data-site-theme="light"] .landing-v24 .hero-section {
    background:
        radial-gradient(circle at 88% 10%,rgba(79,70,229,.10),transparent 29rem),
        radial-gradient(circle at 7% 94%,rgba(20,184,166,.075),transparent 27rem),
        linear-gradient(145deg,#f8faff 0%,#f8fbfc 54%,#f2faf8 100%);
}

html[data-site-theme="light"] .landing-v24 .hero-copy h1 span {
    background:linear-gradient(92deg,#4f46e5 0%,#6366f1 46%,#0f766e 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

html[data-site-theme="light"] .landing-v24 .btn-primary {
    background:linear-gradient(100deg,#4f46e5 0%,#6366f1 46%,#0f766e 100%);
    box-shadow:0 14px 30px rgba(79,70,229,.18),0 7px 18px rgba(15,118,110,.07);
}

html[data-site-theme="light"] .landing-v24 .section-kicker {
    color:#4338ca;
    border-color:#d9ddff;
    background:linear-gradient(145deg,#f6f7ff,#f1fbf8);
}

html[data-site-theme="light"] .landing-v24 .experience-tab.active {
    color:#4338ca;
    border-color:#c7d2fe;
    background:linear-gradient(145deg,#f7f7ff,#effbf8);
    box-shadow:0 12px 28px rgba(79,70,229,.08);
}

html[data-site-theme="light"] .landing-v24 .experience-tab.active .experience-tab-icon {
    color:#ffffff;
    background:linear-gradient(145deg,#4f46e5,#0f766e);
}

html[data-site-theme="light"] .landing-v24 .experience-progress-fill,
html[data-site-theme="light"] .landing-v24 .experience-dot.active {
    background:linear-gradient(90deg,#4f46e5,#0f766e);
}

html[data-site-theme="light"] .landing-v24 .category-card:hover,
html[data-site-theme="light"] .landing-v24 .step-card:hover,
html[data-site-theme="light"] .landing-v24 .service-card:hover {
    border-color:#c7d2fe;
    box-shadow:0 22px 50px rgba(79,70,229,.09),0 10px 28px rgba(15,118,110,.035);
}

html[data-site-theme="light"] .landing-v24 .category-card:hover .category-icon,
html[data-site-theme="light"] .landing-v24 .step-card:hover .step-icon,
html[data-site-theme="light"] .landing-v24 .feature-list > div:hover > span {
    color:#ffffff;
    background:linear-gradient(145deg,#4f46e5,#0f766e);
    box-shadow:0 12px 26px rgba(79,70,229,.16);
}

html[data-site-theme="light"] .landing-v24 .back-to-top {
    color:#ffffff;
    border-color:rgba(255,255,255,.72);
    background:linear-gradient(145deg,#4f46e5,#0f766e);
    box-shadow:0 12px 28px rgba(79,70,229,.18),0 6px 18px rgba(15,118,110,.08);
}

/* Mobile: keep the cool light palette readable and crisp. */
@media (max-width:820px) {
    html[data-site-theme="light"] .landing-v24 .site-header.nav-open .site-nav,
    html[data-site-theme="light"] .landing-v24 .site-header.nav-open .nav-actions {
        border-color:#dce4ee;
        background:rgba(255,255,255,.98);
    }
}

/* ========================================================================
   V32 — AUTH BRAND LOGO HARDENING / DESKTOP RECOVERY
   Prevents the application logo from expanding to its intrinsic media size
   if older/global image styles win in the cascade. Keeps login/register brand
   marks compact and guarantees the form card remains in the right column.
   ======================================================================== */

.auth-v14 .auth14-main-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.auth-v14 .auth14-main-brand {
    display: inline-flex !important;
    flex: 0 0 auto;
    align-self: center;
    align-items: center !important;
    gap: 10px;
    width: auto !important;
    max-width: min(100%, 300px) !important;
    min-height: 48px;
    margin: 0 auto 14px !important;
    padding: 7px 12px 7px 8px !important;
    overflow: hidden;
    border-radius: 14px;
}

.auth-v14 .auth14-main-brand > img,
.auth-v14 .auth14-main-brand img {
    display: block !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 10px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.auth-v14 .auth14-main-brand > span {
    display: flex !important;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    line-height: 1.15;
}

.auth-v14 .auth14-main-brand strong,
.auth-v14 .auth14-main-brand small {
    display: block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-v14 .auth14-main-brand strong {
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.auth-v14 .auth14-main-brand small {
    font-size: 8px !important;
    line-height: 1.2 !important;
}

.auth-v14 .auth14-panel {
    flex: 0 0 auto;
    width: 100% !important;
    max-width: 100%;
}

.auth-v14 .auth14-page-meta {
    flex: 0 0 auto;
}

/* Register attached badge keeps the same compact logo dimensions. */
.auth-v14.auth-register .auth14-main-brand-in-card {
    width: auto !important;
    max-width: min(calc(100vw - 72px), 300px) !important;
    min-height: 50px;
    margin: 0 !important;
    overflow: hidden;
}

.auth-v14.auth-register .auth14-main-brand-in-card > img,
.auth-v14.auth-register .auth14-main-brand-in-card img {
    flex-basis: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
}

/* Keep right-side actions above the card without affecting document flow. */
.auth-v14 .auth14-main-actions {
    z-index: 30;
}

/* Light mode: crisp indigo/teal brand chip. */
html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand {
    color: #0f172a;
    border: 1px solid #dce4ee !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 10px 28px rgba(55,65,105,.075) !important;
}

html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand > img,
html[data-site-theme="light"] .auth-theme-v27 .auth14-main-brand img {
    background: linear-gradient(145deg,#172554,#0f172a) !important;
    box-shadow: 0 5px 14px rgba(79,70,229,.12);
}

/* Dark mode: warm but controlled amber edge. */
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand {
    color: #f8fafc;
    border: 1px solid rgba(245,158,11,.16) !important;
    background: rgba(24,35,54,.92) !important;
    box-shadow: 0 12px 30px rgba(2,6,23,.24) !important;
}

html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand > img,
html[data-site-theme="dark"] .auth-theme-v27 .auth14-main-brand img {
    background: #0b1630 !important;
    box-shadow: 0 0 0 1px rgba(245,158,11,.14), 0 7px 18px rgba(2,6,23,.2);
}

@media (max-width: 1100px) {
    .auth-v14 .auth14-main-brand {
        align-self: flex-start;
        max-width: calc(100% - 112px) !important;
        margin: 0 0 14px !important;
    }

    .auth-v14.auth-register .auth14-main-brand-in-card {
        max-width: calc(100vw - 88px) !important;
    }
}

@media (max-width: 560px) {
    .auth-v14 .auth14-main-brand > img,
    .auth-v14 .auth14-main-brand img {
        flex-basis: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
    }

    .auth-v14 .auth14-main-brand {
        min-height: 46px;
        padding: 6px 10px 6px 7px !important;
    }
}


/* ========================================================================
   AUTH V33 — LOGIN / REGISTER BRAND CONSISTENCY
   Register now uses the same compact brand badge above the form card as login.
   ======================================================================== */
.auth-v14.auth-register .auth14-main-inner {
    transform: none !important;
}

.auth-v14.auth-register .auth14-main-brand {
    display: inline-flex !important;
    align-self: center !important;
    margin: 0 auto 14px !important;
}

.auth-v14.auth-register .auth14-panel {
    margin-top: 0 !important;
    padding-top: 24px !important;
    overflow: hidden !important;
}

/* Old attached-cap markup is no longer rendered; keep it disabled defensively. */
.auth-v14.auth-register .auth14-panel-brand-cap,
.auth-v14.auth-register .auth14-main-brand-in-card {
    display: none !important;
}

@media (max-width: 1100px) {
    .auth-v14.auth-register .auth14-main-brand {
        align-self: flex-start !important;
        margin: 0 0 14px !important;
    }
}

@media (max-width: 560px) {
    .auth-v14.auth-register .auth14-panel {
        padding-top: 22px !important;
    }
}

/* ========================================================================
   V34 — MOBILE HEADER / MENU RECOVERY
   Fixes the old absolute-position mobile nav where the menu and action row
   render as two independent floating cards and overlap footer/page content.
   The open menu now becomes one opaque, in-flow header sheet.
   ======================================================================== */
@media (max-width: 820px) {
    .landing-v24 .site-header {
        overflow: visible;
    }

    .landing-v24 .nav-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 68px;
        column-gap: 12px;
        row-gap: 0;
        height: auto !important;
        min-height: 68px;
        align-items: center;
    }

    .landing-v24 .site-brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
    }

    .landing-v24 .site-brand-logo {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 13px;
    }

    .landing-v24 .site-brand > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .landing-v24 .mobile-nav-toggle {
        grid-column: 2;
        grid-row: 1;
        display: grid;
        width: 44px;
        height: 44px;
        margin: 0 !important;
        padding: 0;
        place-items: center;
        border: 1px solid #dbe3ed;
        border-radius: 13px;
        color: #0f172a;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
        font-size: 18px;
    }

    .landing-v24 .site-nav,
    .landing-v24 .nav-actions {
        display: none !important;
    }

    /* One single sheet instead of two overlapping absolute cards. */
    .landing-v24 .site-header.nav-open .nav-wrap {
        grid-template-rows: 68px auto auto;
        padding-bottom: 14px;
    }

    .landing-v24 .site-header.nav-open .site-nav {
        position: static !important;
        inset: auto !important;
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid !important;
        width: 100% !important;
        max-height: none !important;
        margin: 4px 0 0 !important;
        padding: 8px !important;
        gap: 3px;
        overflow: visible !important;
        border: 1px solid #dce4ee !important;
        border-radius: 17px !important;
        background: #ffffff !important;
        box-shadow: 0 16px 36px rgba(15, 23, 42, .08) !important;
        transform: none !important;
    }

    .landing-v24 .site-header.nav-open .site-nav a {
        display: flex;
        min-height: 46px;
        align-items: center;
        margin: 0 !important;
        padding: 0 13px !important;
        border: 0 !important;
        border-radius: 11px;
        color: #334155 !important;
        background: transparent !important;
        font-size: 14px;
        font-weight: 650;
        line-height: 1.2;
    }

    .landing-v24 .site-header.nav-open .site-nav a::after {
        display: none !important;
    }

    .landing-v24 .site-header.nav-open .site-nav a:hover,
    .landing-v24 .site-header.nav-open .site-nav a:focus-visible {
        color: #3730a3 !important;
        background: #f2f3ff !important;
        outline: none;
    }

    .landing-v24 .site-header.nav-open .nav-actions {
        position: static !important;
        inset: auto !important;
        grid-column: 1 / -1;
        grid-row: 3;
        display: grid !important;
        grid-template-columns: minmax(100px, .42fr) minmax(0, 1fr);
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 0 !important;
        gap: 10px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .landing-v24 .site-header.nav-open .nav-actions .theme-toggle,
    .landing-v24 .site-header.nav-open .nav-actions .btn,
    .landing-v24 .site-header.nav-open .nav-actions .store-badge {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px;
        margin: 0 !important;
        border-radius: 13px;
    }

    .landing-v24 .site-header.nav-open .nav-actions .theme-toggle {
        justify-content: center;
        padding-inline: 12px;
    }

    .landing-v24 .site-header.nav-open .nav-actions .btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding-inline: 16px !important;
    }

    /* App-store action gets a dedicated full-width row when present. */
    .landing-v24 .site-header.nav-open .nav-actions .store-badge-nav {
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 50px;
    }

    html[data-site-theme="light"] .landing-v24 .site-header.nav-open {
        background: rgba(248, 250, 252, .99) !important;
        border-bottom-color: #dce4ee !important;
        box-shadow: 0 16px 38px rgba(15, 23, 42, .10);
    }

    html[data-site-theme="light"] .landing-v24 .mobile-nav-toggle {
        color: #0f172a !important;
        border-color: #dbe3ed !important;
        background: #ffffff !important;
    }

    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open {
        background: rgba(9, 20, 36, .995) !important;
        border-bottom-color: rgba(251, 191, 36, .12) !important;
        box-shadow: 0 18px 44px rgba(2, 6, 23, .42);
    }

    html[data-site-theme="dark"] .landing-v24 .mobile-nav-toggle {
        color: #f8fafc !important;
        border-color: rgba(251, 191, 36, .15) !important;
        background: #111f34 !important;
        box-shadow: 0 8px 20px rgba(2, 6, 23, .25);
    }

    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav {
        border-color: rgba(251, 191, 36, .12) !important;
        background: #111f34 !important;
        box-shadow: 0 18px 40px rgba(2, 6, 23, .32) !important;
    }

    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav a {
        color: #d8e1ec !important;
    }

    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav a:hover,
    html[data-site-theme="dark"] .landing-v24 .site-header.nav-open .site-nav a:focus-visible {
        color: #fff7e6 !important;
        background: rgba(245, 158, 11, .10) !important;
    }

    /* The expanded header is in normal document flow, so page/footer content
       can no longer sit underneath the menu. */
    .landing-v24 .site-header.nav-open + main {
        position: relative;
    }
}

@media (max-width: 430px) {
    .landing-v24 .site-container.nav-wrap {
        width: calc(100% - 24px) !important;
    }

    .landing-v24 .site-brand {
        gap: 9px;
        font-size: 16px;
    }

    .landing-v24 .site-brand-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .landing-v24 .mobile-nav-toggle {
        width: 42px;
        height: 42px;
    }

    .landing-v24 .site-header.nav-open .site-nav a {
        min-height: 44px;
        font-size: 13.5px;
    }

    .landing-v24 .site-header.nav-open .nav-actions {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 8px;
    }
}