/* ==========================================================================
   RushCRM public website (dark theme). Loaded after base.css.
   Signature: the notched corner from the logo mark, with 3D depth.
   ========================================================================== */

/* ---------- Header ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(17, 13, 19, .72);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease, background-color .2s ease;
}
.site-header.is-scrolled {
    background: rgba(17, 13, 19, .9);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .8);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    gap: 24px;
}

.brand img { width: 158px; height: auto; filter: drop-shadow(0 2px 8px rgba(255, 255, 255, .12)); }

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav a:not(.btn) {
    color: var(--text);
    font-weight: 500;
    text-decoration: none;
}
.site-nav a:not(.btn):hover,
.site-nav a[aria-current="page"] { color: var(--rush-text); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 24px; height: 2px;
    margin: auto;
    background: var(--text);
    transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(48px, 7vw, 96px) var(--section);
    overflow: hidden;
    background:
        radial-gradient(42% 55% at 76% 45%, rgba(255, 51, 70, .28), transparent 70%),
        radial-gradient(35% 45% at 5% 0%, rgba(255, 99, 114, .10), transparent 70%),
        linear-gradient(180deg, #0d0a0f 0%, var(--bg) 100%);
}

/* Perspective floor: a grid that recedes into the distance */
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20%; right: -20%; bottom: -10%;
    height: 72%;
    background-image:
        linear-gradient(rgba(255, 51, 70, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
            mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}

.hero h1 {
    font-size: clamp(3.5rem, 6.6vw, 6rem);
    line-height: 0.92;
    color: #fff;
    /* Stacked shadow gives the letters thickness */
    text-shadow:
        1px 1px 0 #b9b1bf,
        2px 2px 0 #8e8595,
        3px 3px 0 #6a616f,
        4px 4px 0 #4b434f,
        8px 14px 24px rgba(0, 0, 0, .7);
}
.hero h1 span { display: block; }
.hero h1 span:last-child {
    color: var(--rush);
    text-shadow:
        1px 1px 0 #e8172c,
        2px 2px 0 #c9112a,
        3px 3px 0 #a90c21,
        4px 4px 0 #870819,
        8px 14px 30px rgba(255, 51, 70, .35);
}

.hero__lead {
    max-width: 34rem;
    margin-top: 30px;
    color: var(--muted);
    font-size: 1.1875rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

/* ---------- 3D scene for the pipeline board ---------- */
.hero__visual {
    position: relative;
    perspective: 1600px;
    padding-block: 48px 28px;
}

.hero__tilt {
    --rx: 8deg;
    --ry: -14deg;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(1deg);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

/* Red light cast on the floor under the board */
.hero__tilt::after {
    content: "";
    position: absolute;
    left: 6%; right: 2%; bottom: -54px;
    height: 70px;
    background: radial-gradient(50% 50% at 50% 50%, rgba(255, 51, 70, .45), transparent 70%);
    transform: translateZ(-80px) rotateX(80deg);
    filter: blur(10px);
    pointer-events: none;
}

/* drop-shadow on the wrapper, because clip-path on the board would cut a box-shadow */
.board-shell {
    transform: translateZ(0);
    filter:
        drop-shadow(0 34px 44px rgba(0, 0, 0, .75))
        drop-shadow(0 0 1px rgba(255, 255, 255, .35))
        drop-shadow(0 0 40px rgba(255, 51, 70, .18));
}

.board {
    --notch: 22px;
    position: relative;
    margin: 0;
    padding: 18px;
    background: linear-gradient(160deg, #3a3240 0%, #241e28 40%, #18131b 100%);
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)));
}

/* Glossy top edge */
.board::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}

.board__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    padding: 0 4px 14px;
    color: #fff;
}

.board__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: 0.01em;
}

.board__dots { display: inline-flex; gap: 6px; margin-right: auto; }
.board__dots i {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .4);
}
.board__dots i:first-child { background: var(--rush); box-shadow: 0 0 8px var(--rush-glow); }

.board__replay {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    font: 500 0.875rem/1 var(--font-body);
    cursor: pointer;
}
.board__replay:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

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

.board__col {
    min-height: 330px;
    padding: 12px 10px;
    background: linear-gradient(180deg, #151018 0%, #1b161e 100%);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .6),
        inset 0 -1px 0 rgba(255, 255, 255, .06);
}

.board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
    color: #d9d4dd;
    font-size: 0.9375rem;
    font-weight: 600;
}

.board__count {
    min-width: 24px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.8125rem;
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

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

.lead-card {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 11px 12px;
    background: linear-gradient(180deg, #3a3240 0%, #2d2632 100%);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.35;
    border-left: 3px solid transparent;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 2px 0 #120e14,
        0 8px 14px -4px rgba(0, 0, 0, .7);
}

.lead-card__name { font-weight: 600; font-size: 0.9375rem; }
.lead-card__src { color: var(--muted); }

.lead-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.lead-card__value { font-weight: 600; font-variant-numeric: tabular-nums; }

.lead-card__note {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
    color: var(--rush-text);
    font-weight: 600;
    font-size: 0.8125rem;
}
.lead-card__note:empty { display: none; }

/* The lead we follow: lifted off the board and glowing */
.lead-card--demo {
    z-index: 2;
    background: linear-gradient(180deg, #45313d 0%, #33232d 100%);
    border-left-color: var(--rush);
    box-shadow:
        0 0 0 1px var(--rush),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 14px 28px -6px rgba(255, 51, 70, .5),
        0 0 44px -6px rgba(255, 51, 70, .55);
    transform: translateY(-3px);
}

.lead-card.is-arriving { animation: arrive .55s cubic-bezier(.2, .9, .3, 1.25) both; }

@keyframes arrive {
    from { opacity: 0; transform: translateY(-26px) scale(.92); }
    to   { opacity: 1; transform: translateY(-3px); }
}

.temp {
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}
.temp--hot  { background: var(--rush-tint); color: #ff8892; }
.temp--warm { background: rgba(255, 176, 64, .15); color: #ffc46b; }
.temp--cold { background: rgba(110, 160, 255, .15); color: #9fc0ff; }

.board__caption {
    min-height: 1.6em;
    margin-top: 14px;
    padding: 0 4px;
    color: #fff;
    font-size: 0.9375rem;
}

/* Floating cards that sit in front of the board (pushed forward in 3D) */
.float-chip {
    position: absolute;
    z-index: 3;
    display: grid;
    gap: 2px;
    padding: 12px 16px;
    background: rgba(45, 38, 50, .82);
    backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.3;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--lift-3);
    pointer-events: none;
}

.float-chip--alert {
    top: -38px; left: -52px;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
    opacity: 0;
    transform: translateZ(90px) translateY(10px);
    transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.3);
}
.float-chip--alert.is-visible { opacity: 1; transform: translateZ(90px) translateY(0); }
.float-chip--alert .dot {
    grid-row: span 2;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, var(--rush-light), var(--rush-deep));
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 6px 16px -4px rgba(255, 51, 70, .8);
}
.float-chip--alert span:last-child { color: var(--muted); }

.float-chip--stat {
    right: -28px; bottom: -4px;
    transform: translateZ(120px);
    animation: bob 6s ease-in-out infinite;
}
.float-chip--stat strong {
    font: 800 2.25rem/1 var(--font-display);
    color: var(--rush);
    text-shadow: 0 0 18px var(--rush-glow);
}
.float-chip--stat span { color: var(--muted); }

@keyframes bob {
    0%, 100% { transform: translateZ(120px) translateY(0); }
    50%      { transform: translateZ(120px) translateY(-8px); }
}

/* ---------- Flow (sequence) ---------- */
.flow {
    position: relative;
    padding-block: var(--section);
    background:
        radial-gradient(50% 70% at 100% 0%, rgba(255, 51, 70, .10), transparent 60%),
        var(--bg-2);
    border-top: 1px solid var(--line);
}

.flow h2 { max-width: 14ch; }

.flow__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 56px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.flow__steps li {
    position: relative;
    padding: 84px 20px 26px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2);
    counter-increment: step;
    transition: transform .25s ease, box-shadow .25s ease;
}
.flow__steps li:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-3), 0 0 0 1px rgba(255, 51, 70, .35);
}

/* Step number: a raised red block */
.flow__steps li::before {
    content: counter(step);
    position: absolute;
    top: 20px; left: 20px;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    background: linear-gradient(180deg, var(--rush-light) 0%, var(--rush) 60%, var(--rush-deep) 100%);
    color: var(--ink);
    font: 800 1.75rem/1 var(--font-display);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -4px 0 rgba(120, 0, 15, .35);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
/* Connector between steps */
.flow__steps li::after {
    content: "";
    position: absolute;
    top: 44px; right: -20px;
    width: 20px; height: 3px;
    background: var(--rush);
    box-shadow: 0 0 10px var(--rush-glow);
}
.flow__steps li:last-child::after { display: none; }

.flow__steps h3 { margin-bottom: 10px; }
.flow__steps p { color: var(--muted); font-size: 0.975rem; }

/* ---------- Features ---------- */
.features { padding-block: var(--section); background: var(--bg); }

.features__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.features__intro { position: sticky; top: 120px; }
.features__intro p { max-width: 26rem; margin-top: 22px; color: var(--muted); font-size: 1.125rem; }

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

.features__list div {
    position: relative;
    padding: 24px 24px 26px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-top: 3px solid var(--surface-3);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-1);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.features__list div:hover {
    transform: translateY(-4px);
    border-top-color: var(--rush);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2), 0 -8px 30px -12px var(--rush-glow);
}

.features__list dt {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.05;
}

.features__list dd {
    margin: 10px 0 0;
    color: var(--muted);
}

/* ---------- API ---------- */
.api {
    position: relative;
    overflow: hidden;
    padding-block: var(--section);
    background:
        radial-gradient(45% 70% at 82% 50%, rgba(255, 51, 70, .22), transparent 70%),
        var(--bg-2);
    border-block: 1px solid var(--line);
}

.api__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.api__copy p { max-width: 30rem; margin-top: 20px; color: var(--muted); font-size: 1.125rem; }
.api__copy p + p { margin-top: 12px; }

.api__scene { perspective: 1400px; }

.api__shell {
    transform: rotateY(-10deg) rotateX(5deg);
    filter:
        drop-shadow(0 40px 50px rgba(0, 0, 0, .7))
        drop-shadow(0 0 1px rgba(255, 255, 255, .3))
        drop-shadow(0 0 40px rgba(255, 51, 70, .2));
}

.api__code {
    --notch: 18px;
    margin: 0;
    padding: 28px;
    overflow-x: auto;
    background: linear-gradient(160deg, #3a3240 0%, #241e28 50%, #18131b 100%);
    border-left: 4px solid var(--rush);
    color: #eae6ed;
    font: 0.9375rem/1.65 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
}

.c-method { color: var(--rush); font-weight: 700; }
.c-key { color: #b8b0bf; }
.c-str { color: #ffc2c8; }
.c-ok { color: #7ee2a8; font-weight: 700; }

/* ---------- Who it's for ---------- */
.fit { padding-block: var(--section) calc(var(--section) * 0.8); background: var(--bg); }
.fit h2 { max-width: 16ch; }

.fit__list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.fit__list li {
    padding: 13px 22px 15px;
    background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
    font-weight: 600;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .16),
        0 4px 0 #0a080b,
        0 12px 20px -8px rgba(0, 0, 0, .8);
}

/* ---------- CTA ---------- */
.cta {
    position: relative;
    overflow: hidden;
    padding-block: clamp(56px, 7vw, 88px);
    background:
        radial-gradient(70% 120% at 15% 0%, rgba(255, 255, 255, .28), transparent 55%),
        linear-gradient(135deg, var(--rush-light) 0%, var(--rush) 45%, var(--rush-deep) 100%);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 30px -10px rgba(120, 0, 15, .4);
}

/* Large logo mark in the background, tilted in 3D */
.cta::after {
    content: "";
    position: absolute;
    right: -40px; top: 50%;
    width: 360px; height: 290px;
    background: url("../img/mark-white.svg") center / contain no-repeat;
    opacity: .2;
    transform: translateY(-50%) perspective(600px) rotateY(-25deg) rotateX(10deg);
    pointer-events: none;
}

.cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta h2 { text-shadow: 0 2px 0 rgba(255, 255, 255, .25); }
.cta p { margin-top: 12px; font-size: 1.125rem; font-weight: 500; }

/* ---------- Footer ---------- */
.site-footer {
    padding-top: 56px;
    background: linear-gradient(180deg, #0c090d 0%, #070508 100%);
    color: var(--muted);
    font-size: 0.975rem;
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
}

.site-footer__brand img { width: 150px; }
.site-footer__brand p { max-width: 22rem; margin-top: 16px; }

.site-footer__nav { display: grid; gap: 8px; align-content: start; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--rush-text); }

.site-footer__legal {
    padding-block: 20px;
    border-top: 1px solid var(--line);
    font-size: 0.875rem;
}

/* ---------- Placeholder / 404 ---------- */
.placeholder {
    padding-block: var(--section);
    background: radial-gradient(40% 60% at 80% 30%, rgba(255, 51, 70, .18), transparent 70%), var(--bg);
}
.placeholder h1 { font-size: clamp(3rem, 7vw, 5rem); }
.placeholder p { margin: 20px 0 32px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    .flow__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
    .flow__steps li:nth-child(3)::after { display: none; }
}

@media (max-width: 960px) {
    .hero__grid,
    .features__grid,
    .api__grid { grid-template-columns: minmax(0, 1fr); }
    .features__intro { position: static; }
    .hero__tilt { --ry: -8deg; --rx: 6deg; }
    .float-chip--alert { left: -8px; }
    .float-chip--stat { right: -8px; }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; }

    .site-nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px var(--gutter) 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 24px 30px -20px rgba(0, 0, 0, .9);
    }
    .site-nav.is-open { display: flex; }
    .site-nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .site-nav .btn { margin-top: 16px; }

    .flow__steps { grid-template-columns: minmax(0, 1fr); }
    .flow__steps li::after,
    .flow__steps li:nth-child(3)::after {
        display: block;
        top: auto; bottom: -20px; left: 44px; right: auto;
        width: 3px; height: 20px;
    }
    .flow__steps li:last-child::after { display: none; }

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

    .api__shell { transform: none; }

    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .hero__tilt { --ry: 0deg; --rx: 5deg; }
    .board { padding: 12px; }
    .board__cols { grid-template-columns: minmax(0, 1fr); }
    .board__col { min-height: 0; }
    .lead-card--extra { display: none; }
    .float-chip--alert { top: -18px; left: 8px; }
    .float-chip--stat { display: none; }
    .hero__actions .btn { flex: 1 1 100%; }
    .api__code { padding: 20px; font-size: 0.8125rem; }
    .cta::after { width: 220px; height: 180px; right: -60px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   Inner pages: About us, Contact us
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px);
    background:
        radial-gradient(40% 60% at 80% 40%, rgba(255, 51, 70, .24), transparent 70%),
        linear-gradient(180deg, #0d0a0f 0%, var(--bg) 100%);
}
.page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20%; right: -20%; bottom: -20%;
    height: 70%;
    background-image:
        linear-gradient(rgba(255, 51, 70, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    transform: perspective(700px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
            mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}

.page-hero h1 {
    max-width: 14ch;
    font-size: clamp(3rem, 6.4vw, 5.5rem);
    line-height: 0.92;
    color: #fff;
    text-shadow:
        1px 1px 0 #b9b1bf,
        2px 2px 0 #8e8595,
        3px 3px 0 #6a616f,
        4px 4px 0 #4b434f,
        8px 14px 24px rgba(0, 0, 0, .7);
}

.page-hero__lead {
    max-width: 36rem;
    margin-top: 26px;
    color: var(--muted);
    font-size: 1.1875rem;
}

.page-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 80px);
}

/* ---------- About: scattered sources pulled into one lead (3D) ---------- */
.scatter { margin: 0; }

.scatter__stage {
    position: relative;
    height: 380px;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.scrap {
    position: absolute;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--text);
    background: linear-gradient(180deg, var(--surface-3) 0%, var(--surface-2) 100%);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2);
    opacity: .78;
    filter: saturate(.7);
}
.scrap__label { color: var(--muted); font-size: 0.75rem; font-weight: 600; }

.scrap--sheet { top: 0; left: 2%; width: 200px; transform: rotate(-8deg) rotateY(18deg) translateZ(-60px); }
.scrap__lines { display: grid; gap: 6px; }
.scrap__lines i { height: 6px; background: rgba(126, 226, 168, .35); }
.scrap__lines i:nth-child(2) { width: 80%; }
.scrap__lines i:nth-child(3) { width: 90%; }
.scrap__lines i:nth-child(4) { width: 60%; }

.scrap--chat { top: 12px; right: 4%; width: 210px; transform: rotate(6deg) rotateY(-20deg) translateZ(-30px); }
.scrap__bubble { padding: 8px 10px; background: rgba(37, 211, 102, .18); color: #c9f5d9; }

.scrap--note {
    bottom: 26px; left: 0;
    width: 170px;
    padding: 18px 16px;
    background: linear-gradient(180deg, #ffe680, #f5d34a);
    color: #3a2f00;
    font-weight: 600;
    transform: rotate(-5deg) rotateX(12deg) translateZ(-20px);
    opacity: .9;
}

.scrap--mail { bottom: 0; right: 0; width: 200px; transform: rotate(4deg) rotateY(-16deg) translateZ(-80px); }

.scatter__card {
    position: absolute;
    top: 50%; left: 50%;
    width: min(300px, 80%);
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    background: linear-gradient(180deg, #45313d 0%, #2d1f28 100%);
    border-left: 4px solid var(--rush);
    box-shadow:
        0 0 0 1px var(--rush),
        inset 0 1px 0 rgba(255, 255, 255, .15),
        0 30px 50px -10px rgba(0, 0, 0, .8),
        0 0 60px -6px rgba(255, 51, 70, .6);
    transform: translate(-50%, -50%) translateZ(80px) rotateX(6deg) rotateY(-8deg);
}
.scatter__card strong { font: 700 1.75rem/1 var(--font-display); }
.scatter__card span:last-child { color: var(--muted); font-size: 0.875rem; }
.scatter__tag { justify-self: start; padding: 1px 8px; background: var(--rush); color: var(--ink); font-size: 0.75rem; font-weight: 600; }

.scatter figcaption { margin-top: 18px; color: var(--muted); font-size: 0.9375rem; text-align: center; }

/* ---------- About: story ---------- */
.story {
    padding-block: var(--section);
    background: var(--bg-2);
    border-top: 1px solid var(--line);
}
.story__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 6vw, 96px);
}
.story__text { display: grid; gap: 20px; max-width: 40rem; color: var(--muted); font-size: 1.125rem; }
.story__pull {
    padding: 22px 24px;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 500;
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    border-left: 4px solid var(--rush);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2);
}

/* ---------- About: values ---------- */
.values { padding-block: var(--section); background: var(--bg); }
.values__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
}
.value {
    padding: 26px 22px 28px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-top: 3px solid var(--rush);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2);
}
.value h3 { margin-bottom: 12px; }
.value p { color: var(--muted); }

/* ---------- About: onboarding steps ---------- */
.onboard {
    padding-block: var(--section);
    background:
        radial-gradient(50% 70% at 0% 100%, rgba(255, 51, 70, .10), transparent 60%),
        var(--bg-2);
    border-top: 1px solid var(--line);
}
.onboard__grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}
.onboard__intro { position: sticky; top: 120px; }
.onboard__intro p { margin-top: 20px; color: var(--muted); font-size: 1.125rem; }

.onboard__steps {
    position: relative;
    display: grid;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}
/* Rail that links the steps */
.onboard__steps::before {
    content: "";
    position: absolute;
    top: 30px; bottom: 30px; left: 25px;
    width: 3px;
    background: linear-gradient(180deg, var(--rush), rgba(255, 51, 70, .2));
    box-shadow: 0 0 12px var(--rush-glow);
}
.onboard__steps li {
    position: relative;
    margin-left: 72px;
    padding: 22px 24px;
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-2);
    counter-increment: step;
}
.onboard__steps li::before {
    content: counter(step);
    position: absolute;
    top: 18px; left: -72px;
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    background: linear-gradient(180deg, var(--rush-light) 0%, var(--rush) 60%, var(--rush-deep) 100%);
    color: var(--ink);
    font: 800 1.75rem/1 var(--font-display);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -4px 0 rgba(120, 0, 15, .35);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.onboard__steps h3 { margin-bottom: 8px; }
.onboard__steps p { color: var(--muted); }

/* ---------- Contact ---------- */
.page-hero--contact h1 { max-width: none; }

.contact {
    padding-block: 0 var(--section);
    background: var(--bg);
}
.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: -8px;
}

.contact__form {
    border-top: 3px solid var(--rush);
    scroll-margin-top: 96px;
}
.contact__aside { display: grid; gap: 24px; }

.contact__title { font-size: 2rem; font-weight: 700; }
.contact__hint { margin-top: 8px; color: var(--muted); }


.reach { display: grid; gap: 16px; margin: 20px 0 0; }
.reach div { display: grid; gap: 2px; }
.reach dt { color: var(--muted); font-size: 0.875rem; }
.reach dd { margin: 0; font-weight: 500; }
.reach a { color: var(--text); text-decoration-color: rgba(255, 51, 70, .7); }
.reach a:hover { color: var(--rush-text); }

.next-steps {
    display: grid;
    gap: 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: next;
}
.next-steps li {
    position: relative;
    padding-left: 40px;
    color: var(--muted);
    counter-increment: next;
}
.next-steps li::before {
    content: counter(next);
    position: absolute;
    top: 0; left: 0;
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    background: linear-gradient(180deg, var(--rush-light), var(--rush-deep));
    color: var(--ink);
    font: 800 1rem/1 var(--font-display);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -3px rgba(255, 51, 70, .6);
}

/* Success state */
.sent { display: grid; justify-items: start; gap: 14px; padding-block: 12px; }
.sent__mark {
    position: relative;
    width: 72px; height: 72px;
    background: linear-gradient(180deg, var(--rush-light), var(--rush) 60%, var(--rush-deep));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -5px 0 rgba(120, 0, 15, .35), 0 16px 30px -8px rgba(255, 51, 70, .6);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    animation: pop .5s cubic-bezier(.2, .9, .3, 1.4) both;
}
.sent__mark::after {
    content: "";
    position: absolute;
    left: 25px; top: 16px;
    width: 18px; height: 32px;
    border-right: 6px solid var(--ink);
    border-bottom: 6px solid var(--ink);
    transform: rotate(45deg);
}
.sent h2 { font-size: clamp(2.5rem, 5vw, 3.25rem); }
.sent p { color: var(--muted); font-size: 1.125rem; }
.sent p strong { color: var(--text); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Inner pages: responsive ---------- */
@media (max-width: 1080px) {
    .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    .page-hero__grid,
    .story__grid,
    .onboard__grid,
    .contact__grid { grid-template-columns: minmax(0, 1fr); }
    .onboard__intro { position: static; }
    .scatter__stage { max-width: 520px; margin-inline: auto; }
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .values__grid { grid-template-columns: minmax(0, 1fr); }
    .scatter__stage { height: 330px; }
    .scrap { width: 160px !important; font-size: 0.8125rem; }
    .form-actions .btn { width: 100%; }
}

/* ==========================================================================
   Documentation
   ========================================================================== */
.doc-hero {
    padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 48px);
    background: radial-gradient(40% 80% at 85% 20%, rgba(255, 51, 70, .18), transparent 70%), linear-gradient(180deg, #0d0a0f, var(--bg));
    border-bottom: 1px solid var(--line);
}
.doc-hero h1 { font-size: clamp(3rem, 6vw, 4.75rem); color: #fff; }
.doc-hero__lead { max-width: 40rem; margin-top: 16px; color: var(--muted); font-size: 1.1875rem; }

.doc-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    padding-block: 40px var(--section);
}

.doc-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; }
.doc-toc__box > summary { display: none; }
.doc-toc__group { margin: 18px 0 6px; color: var(--muted); font-size: 0.8125rem; font-weight: 600; }
.doc-toc__group:first-of-type { margin-top: 0; }
.doc-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.doc-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: #cfc9d4; font-size: 0.9375rem; text-decoration: none; }
.doc-toc a:hover { color: #fff; }
.doc-toc a.is-current { border-left-color: var(--rush); color: #fff; }

.doc { max-width: 780px; min-width: 0; color: #ddd8e1; }
.doc section { scroll-margin-top: 96px; padding-bottom: 12px; }
.doc .doc-part { margin: 64px 0 8px; padding-top: 28px; border-top: 1px solid var(--line); font-size: clamp(2.25rem, 4vw, 3rem); color: #fff; scroll-margin-top: 96px; }
.doc .doc-part:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h3 { margin: 40px 0 14px; font-size: 1.875rem; color: #fff; }
.doc h4 { margin: 26px 0 10px; font: 600 1.0625rem var(--font-body); color: #fff; }
.doc p, .doc ul, .doc ol, .doc dl { margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc li::marker { color: var(--rush); }
.doc a { color: #ff7a86; }
.doc strong { color: #fff; }
.doc code {
    padding: 1px 6px;
    background: rgba(255, 255, 255, .07);
    color: #ffd0d5;
    font: 0.875em ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

.doc-steps { counter-reset: s; list-style: none; padding-left: 0 !important; }
.doc-steps li { position: relative; padding-left: 44px; margin-bottom: 14px; counter-increment: s; }
.doc-steps li::before {
    content: counter(s);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    background: linear-gradient(180deg, var(--rush-light), var(--rush-deep));
    color: var(--ink);
    font: 800 1.125rem/1 var(--font-display);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}

.doc-tip {
    margin: 18px 0;
    padding: 14px 18px;
    background: rgba(255, 176, 64, .1);
    border-left: 3px solid #ffb040;
    color: #ffe2b8;
}
.doc-tip strong { color: #ffd38a; }

.doc-code { position: relative; margin: 14px 0 20px; }
.doc-code pre {
    margin: 0;
    padding: 18px 20px;
    overflow-x: auto;
    background: #0c090e;
    border: 1px solid rgba(255, 255, 255, .08);
    border-left: 3px solid var(--rush);
    color: #eae6ed;
    font: 0.84rem/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .6);
}
.doc-code pre[data-lang]::before {
    content: attr(data-lang);
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font: 600 0.75rem var(--font-body);
}
.doc-code code { padding: 0; background: none; color: inherit; font: inherit; overflow-wrap: normal; }
.doc-code__copy {
    position: absolute; top: 10px; right: 10px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: #241e28;
    color: #fff;
    font: 600 0.8125rem var(--font-body);
    cursor: pointer;
}
.doc-code__copy:hover { border-color: var(--rush); }

.doc-table { margin: 14px 0 22px; overflow-x: auto; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.doc-table th { padding: 10px 12px; color: var(--muted); font-weight: 600; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .14); white-space: nowrap; }
.doc-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc-endpoints td:nth-child(2) { white-space: nowrap; }
.m { display: inline-block; min-width: 58px; padding: 2px 6px; font: 700 0.75rem ui-monospace, Menlo, monospace; text-align: center; }
.m--get { background: rgba(110, 160, 255, .18); color: #9fc0ff; }
.m--post { background: rgba(60, 207, 126, .16); color: #6fe0a2; }
.m--patch { background: rgba(255, 176, 64, .16); color: #ffc46b; }
.m--del { background: var(--rush-tint); color: #ff8a95; }

.doc-faq dt { margin-top: 22px; color: #fff; font-weight: 600; }
.doc-faq dd { margin: 6px 0 0; }

@media (max-width: 960px) {
    .doc-layout { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
    .doc-toc { position: static; max-height: none; }
    .doc-toc__box { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); }
    .doc-toc__box > summary { display: block; font-weight: 600; cursor: pointer; }
    .doc-toc__box[open] > summary { margin-bottom: 12px; }
}

/* ---------- Product tour (real screenshots) ---------- */
.tour {
    position: relative;
    overflow: hidden;
    padding-block: var(--section);
    background:
        radial-gradient(60% 50% at 70% 60%, rgba(255, 51, 70, .14), transparent 70%),
        var(--bg);
    border-top: 1px solid var(--line);
}
.tour__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.tour__head p { max-width: 26rem; color: var(--muted); font-size: 1.125rem; }

.tour__tabs {
    display: flex;
    gap: 6px;
    margin: 36px 0 34px;
    padding: 6px;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--edge), var(--lift-1);
    scrollbar-width: none;
}
.tour__tabs::-webkit-scrollbar { display: none; }
.tour__tab {
    flex: none;
    padding: 10px 18px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font: 600 0.9375rem var(--font-body);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}
.tour__tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.tour__tab[aria-selected="true"] {
    background: linear-gradient(180deg, var(--rush-light) 0%, var(--rush) 60%, var(--rush-deep) 100%);
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -6px var(--rush-glow);
}
.tour__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tour__panel {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.tour__panel + .tour__panel { margin-top: 56px; }            /* without JavaScript every screen shows */
.tour.is-ready .tour__panel + .tour__panel { margin-top: 0; }
.tour__panel:focus-visible { outline: 2px solid var(--rush); outline-offset: 8px; }

.tour__copy h3 { font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.05; }
.tour__copy p { margin-top: 16px; color: var(--muted); font-size: 1.0625rem; }
.tour__copy ul { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.tour__copy li { position: relative; padding-left: 26px; }
.tour__copy li::before {
    content: "";
    position: absolute;
    left: 0; top: .5em;
    width: 12px; height: 8px;
    border-left: 3px solid var(--rush);
    border-bottom: 3px solid var(--rush);
    transform: rotate(-45deg) translateY(-3px);
}

.tour__scene { position: relative; perspective: 1600px; padding-bottom: 6%; }
.tour__shot {
    margin: 0;
    background: #17121a;
    transform: rotateY(-7deg) rotateX(3deg);
    transform-origin: 60% 50%;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12),
        0 40px 80px -20px rgba(0, 0, 0, .85),
        0 0 60px -10px rgba(255, 51, 70, .25);
    transition: transform .5s ease;
}
.tour__scene:hover .tour__shot { transform: rotateY(-3deg) rotateX(1deg); }
.tour__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #2a232f;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tour__bar i { width: 10px; height: 10px; border-radius: 50%; background: #4a4150; }
.tour__bar i:first-child { background: var(--rush); }
.tour__bar span {
    margin-left: 10px;
    padding: 2px 12px;
    background: rgba(0, 0, 0, .3);
    color: #9c94a3;
    font: 0.75rem ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.tour__shot img { display: block; width: 100%; height: auto; }

.tour__phone {
    position: absolute;
    right: -2%; bottom: 0;
    width: 24%;
    height: auto;
    border: 6px solid #0c090e;
    border-radius: 22px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 30px 60px -10px rgba(0, 0, 0, .9);
    transform: translateZ(60px) rotate(2deg);
}

/* Phone view next to the features list */
.features__phone {
    display: block;
    width: min(260px, 70%);
    height: auto;
    margin-top: 36px;
    border: 7px solid #0c090e;
    border-radius: 26px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 40px 70px -20px rgba(0, 0, 0, .9), 0 0 50px -10px rgba(255, 51, 70, .25);
    transform: rotate(-3deg);
}

@media (max-width: 960px) {
    .tour__panel { grid-template-columns: minmax(0, 1fr); }
    .tour__shot { transform: none; }
    .tour__scene:hover .tour__shot { transform: none; }
    .features__phone { display: none; }
}
@media (max-width: 560px) {
    .tour__tabs { width: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
    .tour__phone { width: 30%; border-width: 4px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .tour__shot, .tour__scene:hover .tour__shot { transition: none; }
}

/* Hero board: columns stretch to the height the script reserves, so nothing moves */
.board__cols { align-items: stretch; }

/* Outfit @font-face rules live in base.css (shared with the CRM). */

/* ==========================================================================
   Calm look for the public website (overrides the earlier 3D styling).
   One typeface, flat surfaces with soft rounded corners, thin borders,
   red only for actions and the lead we follow. The moving pipeline in the
   hero is the one animated moment; everything else stays still.
   ========================================================================== */
body.site {
    --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --radius: 14px;
    --radius-sm: 10px;
    --card: #19141c;
    --card-2: #1f1923;
    --border: rgba(255, 255, 255, .09);
    --muted: #aca4b3;
}

/* Type: sentence-case headings, tight but not squeezed */
.site h1, .site h2, .site h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.04;
    text-shadow: none;
}
.site h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.site h3 { font-size: 1.1875rem; letter-spacing: -0.01em; line-height: 1.25; }

/* Buttons: rounded, flat, no notches or lift */
.site .btn {
    min-height: 50px;
    padding: 0 22px;
    border-radius: var(--radius-sm);
    clip-path: none;
    font-size: 1rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.site .btn:hover, .site .btn:active { transform: none; }
.site .btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.site .btn--primary { background: var(--rush); color: var(--ink); box-shadow: none; }
.site .btn--primary:hover { background: var(--rush-light); filter: none; }
.site .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); backdrop-filter: none; }
.site .btn--ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.site .btn--dark { background: var(--ink); color: #fff; box-shadow: none; }
.site .btn--small { min-height: 42px; padding: 0 16px; font-size: 0.9375rem; }

/* Hero: no receding floor, no tilt, one soft glow behind the board */
.site .hero {
    background:
        radial-gradient(40% 50% at 78% 48%, rgba(255, 51, 70, .16), transparent 70%),
        var(--bg);
}
.site .hero::before { display: none; }
.site .hero h1 {
    font-size: clamp(2.75rem, 5.4vw, 4.75rem);
    line-height: 1;
    letter-spacing: -0.04em;
    text-shadow: none;
}
.site .hero h1 span:last-child { color: #fff; text-shadow: none; }
.site .hero__lead { margin-top: 24px; font-size: 1.125rem; }
.site .hero__actions { margin-top: 32px; gap: 12px; }

.site .hero__visual { perspective: none; padding-block: 40px 20px; }
.site .hero__tilt, .site .hero__tilt { transform: none !important; transition: none; }
.site .hero__tilt::after { display: none; }
.site .board-shell { filter: none; transform: none; }
.site .board {
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    clip-path: none;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.site .board::before { display: none; }
.site .board__title { font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.site .board__dots i { box-shadow: none; }
.site .board__dots i:first-child { box-shadow: none; }
.site .board__replay { border-radius: 8px; }
.site .board__col { background: #120e15; border-radius: 12px; box-shadow: none; }
.site .board__count { border-radius: 999px; box-shadow: none; }
.site .lead-card {
    background: var(--card-2);
    border: 1px solid var(--border);
    border-left-width: 1px;
    border-radius: 10px;
    box-shadow: none;
}
.site .lead-card--demo {
    background: #2a1a22;
    border-color: rgba(255, 51, 70, .7);
    box-shadow: 0 10px 24px -12px rgba(255, 51, 70, .55);
    transform: none;
}
.site .temp { border-radius: 999px; }
@keyframes arrive {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
}
.site .float-chip {
    background: var(--card-2);
    backdrop-filter: none;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .9);
}
.site .float-chip--alert { transform: translateY(8px); }
.site .float-chip--alert.is-visible { transform: none; }
.site .float-chip--alert .dot { border-radius: 50%; box-shadow: none; background: var(--rush); }
.site .float-chip--stat { transform: none; animation: none; }
.site .float-chip--stat strong { font: 600 1.875rem/1 var(--font-display); letter-spacing: -0.03em; text-shadow: none; }

/* Flow: a plain numbered sequence with a thin line, no raised blocks */
.site .flow { background: var(--bg-2); }
.site .flow__steps { gap: 28px; margin-top: 48px; }
.site .flow__steps li {
    padding: 22px 0 0;
    background: none;
    box-shadow: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.site .flow__steps li:hover { transform: none; box-shadow: none; }
.site .flow__steps li::before {
    position: static;
    display: block;
    width: auto; height: auto;
    margin-bottom: 14px;
    background: none;
    color: var(--rush);
    font: 600 0.9375rem/1 var(--font-body);
    box-shadow: none;
    clip-path: none;
}
.site .flow__steps li::after { display: none !important; }
.site .flow__steps h3 { margin-bottom: 8px; }

/* Features: a quiet grid separated by lines, not boxes */
.site .features__list { gap: 0 40px; }
.site .features__list div {
    padding: 22px 0 24px;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
    box-shadow: none;
}
.site .features__list div:hover { transform: none; box-shadow: none; border-top-color: rgba(255, 255, 255, .12); }
.site .features__list dt { font: 600 1.1875rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.site .features__list dd { margin-top: 8px; }
.site .features__phone { display: none; }

/* Tour: flat screenshots in a simple window, tabs as a segmented control */
.site .tour { background: var(--bg); }
.site .tour__tabs { border-radius: 12px; background: var(--card); border: 1px solid var(--border); box-shadow: none; padding: 4px; gap: 2px; }
.site .tour__tab { border-radius: 9px; padding: 9px 16px; }
.site .tour__tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: none; }
.site .tour__scene { perspective: none; }
.site .tour__shot, .site .tour__scene:hover .tour__shot {
    transform: none;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9);
}
.site .tour__bar { background: #221c26; }
.site .tour__bar i:first-child { background: #4a4150; }
.site .tour__bar span { border-radius: 6px; font-family: var(--font-body); }
.site .tour__phone { transform: none; border-width: 5px; }
.site .tour__copy li::before { border-color: var(--rush); }

/* API: flat code panel */
.site .api { background: var(--bg-2); }
.site .api__scene { perspective: none; }
.site .api__shell { transform: none; filter: none; }
.site .api__code {
    background: #151118;
    border: 1px solid var(--border);
    border-left: 1px solid var(--border);
    border-radius: var(--radius);
    clip-path: none;
}

/* Who it's for: simple outlined tags */
.site .fit__list { gap: 10px; }
.site .fit__list li {
    padding: 9px 16px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    font-weight: 500;
    box-shadow: none;
}

/* Closing call to action: a calm panel instead of a red band */
.site .cta {
    background: var(--bg);
    color: var(--text);
    box-shadow: none;
}
.site .cta::after { display: none; }
.site .cta__inner {
    padding: clamp(28px, 4vw, 48px);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
}
.site .cta h2 { text-shadow: none; }
.site .cta p { color: var(--muted); font-weight: 400; }
.site .cta .btn--dark { background: var(--rush); color: var(--ink); }
.site .cta .btn--dark:hover { background: var(--rush-light); }
.site .site-footer { background: var(--bg); border-top: 1px solid var(--line); }

/* Inner pages share the same calm treatment */
.site .page-hero { background: radial-gradient(40% 60% at 80% 40%, rgba(255, 51, 70, .12), transparent 70%), var(--bg); }
.site .page-hero::before { display: none; }
.site .page-hero h1 { font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.02; letter-spacing: -0.04em; text-shadow: none; }
.site .panel { border-radius: var(--radius); background: var(--card); border: 1px solid var(--border); box-shadow: none; }
.site .field input, .site .field select, .site .field textarea { border-radius: var(--radius-sm); box-shadow: none; background: #120e15; }
.site .field input:focus, .site .field select:focus, .site .field textarea:focus { box-shadow: 0 0 0 3px rgba(255, 51, 70, .25); }
.site .onboard__steps li::before,
.site .next-steps li::before,
.site .doc-steps li::before { clip-path: none; border-radius: 50%; box-shadow: none; font-family: var(--font-body); font-weight: 600; }
.site .doc-code pre { border-radius: var(--radius-sm); }

@media (max-width: 760px) {
    .site .flow__steps li { padding-top: 18px; }
    .site .features__list { gap: 0; }
}

/* About: the scattered sources sit flat with a slight angle, like papers on a desk */
.site .scatter__stage { perspective: none; transform-style: flat; }
.site .scrap { background: var(--card-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .9); }
.site .scrap--sheet { transform: rotate(-4deg); }
.site .scrap--chat { transform: rotate(3deg); }
.site .scrap--note { transform: rotate(-3deg); border: 0; }
.site .scrap--mail { transform: rotate(2deg); }
.site .scatter__card {
    background: var(--card);
    border: 1px solid rgba(255, 51, 70, .7);
    border-left-width: 1px;
    border-radius: 14px;
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 10px 30px -14px rgba(255, 51, 70, .5);
    transform: translate(-50%, -50%);
}
.site .scatter__card strong { font: 600 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; }
.site .scatter__tag { border-radius: 999px; }

/* ==========================================================================
   Outfit + soft cards (the look the client picked): a near-black page,
   large rounded frosted cards, pill buttons, and the brand red used for a
   few solid "hero" cards. Layered on top of the calm look above.
   ========================================================================== */
body.site {
    --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --bg: #0c0b0d;
    --bg-2: #111013;
    --radius: 28px;
    --radius-sm: 999px;
    --glass: linear-gradient(150deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 100%);
    --glass-border: rgba(255, 255, 255, .09);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -32px rgba(0, 0, 0, .95);
    --red-card: linear-gradient(140deg, #ff6b78 0%, #ff3346 42%, #d0162d 100%);
    --red-glow: 0 30px 60px -26px rgba(255, 51, 70, .65);
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.005em;
    background: var(--bg);
}
.site h1, .site h2, .site h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.site h2 { font-size: clamp(2.1rem, 3.8vw, 3.25rem); line-height: 1.05; }
.site h3 { font-weight: 500; font-size: 1.25rem; }
.site .btn { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; }

/* Pills */
.site .btn, .site .btn--small { border-radius: 999px; }
.site .btn--primary { box-shadow: 0 12px 30px -14px rgba(255, 51, 70, .8); }
.site .btn--ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .04); }

/* Hero: bold first lines, a light last line, like the reference */
.site .hero { background: radial-gradient(45% 55% at 78% 45%, rgba(255, 51, 70, .18), transparent 70%), var(--bg); }
.site .hero h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.site .hero h1 span:last-child { font-weight: 300; color: #fff; }

.site .board {
    padding: 18px;
    background: var(--glass), #141215;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--glass-shadow);
}
.site .board__bar { padding: 2px 6px 16px; }
.site .board__title { font-weight: 500; font-size: 1.0625rem; }
.site .board__replay { border-radius: 999px; padding: 7px 14px; }
.site .board__col { background: rgba(0, 0, 0, .35); border-radius: 20px; padding: 14px 10px; }
.site .board__head { font-weight: 500; }
.site .board__count { background: rgba(255, 255, 255, .1); }
.site .lead-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.site .lead-card__name { font-weight: 500; }
/* The lead we follow is a solid brand-red card */
.site .lead-card--demo {
    background: var(--red-card);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--red-glow);
}
.site .lead-card--demo .lead-card__src { color: rgba(255, 255, 255, .8); }
.site .lead-card--demo .temp { background: rgba(255, 255, 255, .22); color: #fff; }
.site .lead-card--demo .lead-card__note { color: #fff; border-top-color: rgba(255, 255, 255, .3); }
.site .float-chip {
    background: rgba(30, 28, 33, .72);
    backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
}
.site .float-chip--stat { background: var(--red-card); border: 0; color: #fff; box-shadow: var(--red-glow); border-radius: 22px; }
.site .float-chip--stat strong { color: #fff; font-weight: 600; }
.site .float-chip--stat span { color: rgba(255, 255, 255, .85); }

/* Glass cards for the step-by-step and the feature list */
.site .flow { background: var(--bg-2); }
.site .flow__steps { gap: 16px; }
.site .flow__steps li {
    padding: 24px 22px 26px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
}
.site .flow__steps li::before {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: rgba(255, 51, 70, .14);
    color: #ff7d89;
    font: 600 0.9375rem/1 var(--font-body);
}
.site .flow__steps li:first-child { background: var(--red-card); border-color: transparent; box-shadow: var(--red-glow); }
.site .flow__steps li:first-child::before { background: rgba(255, 255, 255, .22); color: #fff; }
.site .flow__steps li:first-child p { color: rgba(255, 255, 255, .88); }

.site .features__list { gap: 14px; }
.site .features__list div {
    padding: 24px 24px 26px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-top: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: var(--glass-shadow);
}
.site .features__list div:hover { border-top-color: var(--glass-border); }
.site .features__list dt { font-weight: 500; font-size: 1.25rem; }

/* Tour */
.site .tour__tabs { border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--glass-border); padding: 5px; }
.site .tour__tab { border-radius: 999px; font-weight: 500; font-family: var(--font-body); }
.site .tour__tab[aria-selected="true"] { background: #fff; color: #0c0b0d; }
.site .tour__shot, .site .tour__scene:hover .tour__shot { border-radius: 24px; border-color: var(--glass-border); }
.site .tour__phone { border-radius: 30px; border-width: 6px; }
.site .tour__copy li::before { border-color: #ff6b78; }

/* API, audiences and the closing card */
.site .api__code { background: var(--glass), #121014; border-radius: 24px; border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
.site .fit__list li { background: rgba(255, 255, 255, .05); border-color: var(--glass-border); padding: 10px 18px; }
.site .cta { background: var(--bg); }
.site .cta__inner {
    padding: clamp(32px, 5vw, 56px);
    background: var(--red-card);
    border: 0;
    border-radius: 32px;
    box-shadow: var(--red-glow);
    color: #fff;
}
.site .cta p { color: rgba(255, 255, 255, .88); }
.site .cta .btn--dark { background: #fff; color: #0c0b0d; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .6); }
.site .cta .btn--dark:hover { background: #f1eef3; }
.site .site-footer { background: var(--bg); }

/* Inner pages */
.site .panel, .site .scatter__card, .site .scrap { border-radius: 24px; }
.site .panel { background: var(--glass), #141215; border-color: var(--glass-border); box-shadow: var(--glass-shadow); }
.site .field input, .site .field select, .site .field textarea { border-radius: 14px; background: rgba(0, 0, 0, .35); border-color: var(--glass-border); font-family: var(--font-body); }
.site .scatter__card { background: var(--red-card); border: 0; box-shadow: var(--red-glow); }
.site .scatter__card span:last-child { color: rgba(255, 255, 255, .85); }
.site .scatter__tag { background: rgba(255, 255, 255, .25); color: #fff; }
.site .doc-code pre, .site .doc-tip { border-radius: 16px; }
.site .scrap--note { background: linear-gradient(180deg, #ffe680, #f5d34a); color: #3a2f00; border: 0; }

/* One corner radius for the whole website: 10px (circles like dots stay round) */
body.site { --radius: 10px; --radius-sm: 10px; }
.site .btn, .site .btn--small,
.site .board, .site .board__col, .site .board__count, .site .board__replay,
.site .lead-card, .site .temp,
.site .float-chip, .site .float-chip--stat,
.site .flow__steps li, .site .features__list div,
.site .tour__tabs, .site .tour__tab, .site .tour__shot, .site .tour__scene:hover .tour__shot, .site .tour__bar span,
.site .tour__phone, .site .features__phone,
.site .api__code, .site .fit__list li,
.site .cta__inner,
.site .panel, .site .scrap, .site .scatter__card, .site .scatter__tag,
.site .field input, .site .field select, .site .field textarea,
.site .doc-code, .site .doc-code pre, .site .doc-tip,
.site .form-alert, .site .skip-link { border-radius: 10px; }
@media (max-width: 560px) { .site .tour__phone { border-radius: 10px; } }

/* ==========================================================================
   Home page sections (centred hero with screenshot slider, spotlight,
   strengths, pricing, questions). Same Outfit + soft card look, 10px corners.
   ========================================================================== */

/* Hero, centred, with the product underneath */
.site .hero--center { padding-block: clamp(56px, 8vw, 104px) 0; text-align: center; overflow: hidden; }
.site .hero--center::after {
    /* a soft red band behind the lower half of the screenshot */
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%; bottom: 0;
    width: min(1180px, 94vw); height: 46%;
    transform: translateX(-50%);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, rgba(255, 51, 70, .55) 0%, rgba(255, 51, 70, .18) 60%, rgba(255, 51, 70, 0) 100%);
    filter: blur(0);
}
.site .hero--center .hero__copy { max-width: 860px; margin-inline: auto; }
.site .hero--center h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
.site .hero--center h1 span { display: block; }
.site .hero--center .hero__lead { max-width: 40rem; margin-inline: auto; }
.site .hero--center .hero__actions { justify-content: center; }

.shots {
    position: relative;
    max-width: 1080px;
    margin: clamp(44px, 6vw, 72px) auto 0;
    padding: 12px 12px 0;
    background: var(--glass), #141215;
    border: 1px solid var(--glass-border);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -20px 80px -30px rgba(255, 51, 70, .45);
}
.shots__tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 auto 12px;
    padding: 4px;
    width: max-content;
    max-width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
}
.shots__tab {
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--muted);
    font: 500 0.9375rem var(--font-body);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}
.shots__tab:hover { color: #fff; }
.shots__tab.is-active { background: var(--rush); color: #fff; }
.shots__tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.shots__slider { border-radius: 10px 10px 0 0; overflow: hidden; border: 1px solid var(--glass-border); border-bottom: 0; }
.shots__slider img { display: block; width: 100%; height: auto; }
/* Before the slider script runs, show only the first screen */
.shots__slider:not(.is-initialized) .splide__slide:not(:first-child) { display: none; }

/* Flow: steps on the left, the moving pipeline on the right */
.site .flow__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.site .flow__grid .flow__steps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
.site .flow__grid .flow__steps li {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    padding: 16px 18px;
}
.site .flow__grid .flow__steps li::before { grid-row: span 2; margin: 0; }
.site .flow__grid .flow__steps h3 { margin: 4px 0 4px; font-size: 1.0625rem; }
.site .flow__grid .flow__steps p { font-size: 0.9375rem; }
.site .flow__board { padding-block: 40px 20px; }

/* Shared tick list */
.checks { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 30px; color: #e9e5ec; }
.checks li::before {
    content: "";
    position: absolute;
    left: 0; top: .2em;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(255, 51, 70, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23ff6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* Spotlight: text card beside a real screen, alternating */
.spot { padding-block: var(--section); background: var(--bg); }
.spot__title { max-width: 18ch; }
.spot__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.spot__card {
    margin: 0;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass), #141215;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.spot__card--text { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 4vw, 48px); }
.spot__card--text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 600; }
.spot__card--text > p { margin-top: 14px; color: var(--muted); }
.spot__card--text .btn { margin-top: 28px; }
.spot__card--shot {
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 28px 0 0 28px;
    background: linear-gradient(150deg, rgba(255, 51, 70, .35) 0%, rgba(255, 51, 70, .05) 60%), #141215;
}
.spot__card--shot img { display: block; width: 100%; height: auto; border-radius: 10px 0 0 0; border: 1px solid rgba(255, 255, 255, .14); border-right: 0; border-bottom: 0; }

/* Strengths: three cards with small pictures */
.power { padding-block: 0 var(--section); background: var(--bg); }
.power__head { max-width: 640px; margin-inline: auto; text-align: center; }
.power__head p { margin-top: 16px; color: var(--muted); font-size: 1.125rem; }
.power__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.power__card {
    display: flex;
    flex-direction: column;
    padding: 30px 26px 0;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass), #141215;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.power__card h3 { font-size: 1.375rem; font-weight: 600; }
.power__card > p { margin-top: 10px; color: var(--muted); }
.power__card--red { background: var(--red-card); border-color: transparent; box-shadow: var(--red-glow); }
.power__card--red > p { color: rgba(255, 255, 255, .88); }
.power__art { position: relative; flex: 1; min-height: 230px; margin: 28px -6px 0; padding: 20px; border-radius: 10px 10px 0 0; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; }
.power__card--red .power__art { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .2); }

.power__art--sources { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 8px; }
.power__art--sources .src { padding: 7px 12px; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 0.875rem; font-weight: 500; }
.power__art--sources .hub {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    display: grid; place-items: center; width: 64px; height: 64px;
    border-radius: 10px; background: #0c0b0d; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7);
}
.power__art--sources .hub::before {
    content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 34px;
    background: linear-gradient(transparent, rgba(255, 255, 255, .7));
}

.power__art--team { display: grid; align-content: start; gap: 10px; text-align: left; }
.power__art--team .note {
    display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center;
    padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
    font-size: 0.8125rem; color: var(--muted);
}
.power__art--team .note b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 51, 70, .2); color: #ff8892; }
.power__art--team .note strong { display: block; color: #fff; font-weight: 500; font-size: 0.875rem; }
.power__art--team .note--late { border-color: rgba(255, 51, 70, .5); }
.power__art--team .note--late strong { color: #ff8892; }

.power__art--stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; text-align: left; }
.power__art--stats .stat { padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.power__art--stats .stat span { display: block; color: var(--muted); font-size: 0.75rem; }
.power__art--stats .stat strong { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
.power__art--stats .bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 8px; height: 90px; padding: 10px 12px 0; }
.power__art--stats .bars i { flex: 1; height: var(--h); border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #ff6b78, rgba(255, 51, 70, .35)); }

/* Pricing */
.pricing { padding-block: var(--section); background: var(--bg-2); border-top: 1px solid var(--line); }
.pricing__head { max-width: 620px; margin-inline: auto; text-align: center; }
.pricing__head p { margin-top: 14px; color: var(--muted); font-size: 1.125rem; }
.pricing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1040px; margin: 44px auto 0; align-items: start; }
.plan {
    display: flex; flex-direction: column;
    padding: 28px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass), #141215;
    box-shadow: var(--glass-shadow);
}
.plan h3 { font-size: 1.125rem; font-weight: 500; color: var(--muted); }
.plan__price { margin-top: 10px; }
.plan__price strong { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; }
.plan__price span { color: var(--muted); font-size: 0.9375rem; }
.plan__note { margin-top: 6px; color: var(--muted); }
.plan__cta { margin-top: 22px; width: 100%; }
.plan__intro { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--glass-border); font-weight: 500; }
.plan .checks { margin-top: 14px; }
.plan--featured { background: var(--red-card); border-color: transparent; box-shadow: var(--red-glow); transform: translateY(-12px); }
.plan--featured h3, .plan--featured .plan__price span, .plan--featured .plan__note { color: rgba(255, 255, 255, .88); }
.plan--featured .plan__intro { border-top-color: rgba(255, 255, 255, .3); }
.plan--featured .checks li { color: #fff; }
.plan--featured .checks li::before { background-color: rgba(255, 255, 255, .25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.site .btn--light { background: #fff; color: #0c0b0d; }
.site .btn--light:hover { background: #f1eef3; }

/* Questions */
.faq { padding-block: var(--section); background: var(--bg); border-top: 1px solid var(--line); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.faq__sub { margin-top: 16px; color: var(--muted); }
.faq__list { display: grid; gap: 10px; }
.faq__item { border-radius: 10px; border: 1px solid var(--glass-border); background: var(--glass), #141215; }
.faq__item summary {
    position: relative;
    padding: 18px 52px 18px 20px;
    font-weight: 500;
    font-size: 1.0625rem;
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: "+";
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.125rem; line-height: 1;
}
.faq__item[open] summary::after { content: "−"; background: var(--rush); }
.faq__item summary:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 10px; }
.faq__item p { padding: 0 20px 20px; color: var(--muted); }

@media (max-width: 960px) {
    .site .flow__grid, .faq__grid { grid-template-columns: minmax(0, 1fr); }
    .spot__grid { grid-template-columns: minmax(0, 1fr); }
    .spot__grid .spot__card--shot:nth-of-type(3) { order: 4; }   /* keep text before its picture */
    .power__grid, .pricing__grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
    .plan--featured { transform: none; }
}
@media (max-width: 560px) {
    .shots { padding: 8px 8px 0; }
    .shots__tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; width: 100%; scrollbar-width: none; }
    .shots__tab { flex: none; }
}
/* softer glow behind the hero screenshot, no hard edges */
.site .hero--center::after {
    width: 100%; height: 60%;
    border-radius: 0;
    background: radial-gradient(50% 70% at 50% 100%, rgba(255, 51, 70, .45) 0%, rgba(255, 51, 70, .12) 55%, transparent 80%);
}

/* Features as a bento grid with icons and small pictures */
.site .features { padding-block: var(--section); background: var(--bg-2); border-top: 1px solid var(--line); }
.features__head { max-width: 640px; margin-inline: auto; text-align: center; }
.features__head p { margin-top: 14px; color: var(--muted); font-size: 1.125rem; }
.bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
        "follow follow phone"
        "pipe   history phone"
        "private reports reports";
    gap: 18px;
    margin-top: 48px;
}
.bento__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass), #141215;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
.bento__card:nth-child(3) { grid-area: pipe; }
.bento__card:nth-child(4) { grid-area: history; }
.bento__card--follow { grid-area: follow; }
.bento__card--phone { grid-area: phone; background: var(--red-card); border-color: transparent; box-shadow: var(--red-glow); padding-bottom: 0; }
.bento__card--private { grid-area: private; }
.bento__card--reports { grid-area: reports; }
.bento__card h3 { margin-top: 18px; font-size: 1.25rem; font-weight: 600; }
.bento__card p { margin-top: 8px; color: var(--muted); }
.bento__card--phone p { color: rgba(255, 255, 255, .88); }
.bento__icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255, 51, 70, .14);
    border: 1px solid rgba(255, 51, 70, .3);
    color: #ff7d89;
}
.bento__card--phone .bento__icon { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .3); color: #fff; }
.bento__phone {
    display: block;
    width: 78%;
    height: auto;
    margin: 26px auto 0;
    border: 6px solid #0c0b0d;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -10px 40px -10px rgba(0, 0, 0, .5);
}

/* small pictures inside the cards */
.mini-calls { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.mini-calls li {
    display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
    padding: 10px 12px; border-radius: 10px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .07);
    color: var(--muted); font-size: 0.875rem;
}
.mini-calls b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 0.8125rem; font-weight: 600; }
.mini-calls strong { display: block; color: #fff; font-weight: 500; font-size: 0.9375rem; }
.mini-calls em { padding: 6px 14px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; font-style: normal; font-weight: 500; }
.mini-calls .is-late { border-color: rgba(255, 51, 70, .45); }
.mini-calls .is-late span { color: #ff8892; }
.mini-calls .is-late em { background: var(--rush); color: #fff; }

.mini-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 22px; }
.mini-board div { display: grid; gap: 6px; align-content: start; padding: 8px; min-height: 96px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.mini-board span { color: var(--muted); font-size: 0.75rem; }
.mini-board i { height: 16px; border-radius: 6px; background: rgba(255, 255, 255, .12); }
.mini-board i.is-hot { background: var(--rush); box-shadow: 0 6px 16px -6px rgba(255, 51, 70, .8); }

.mini-timeline { position: relative; display: grid; gap: 12px; margin: auto 0 0; padding: 22px 0 0 4px; list-style: none; font-size: 0.875rem; }
.mini-timeline::before { content: ""; position: absolute; left: 10px; top: 30px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, .15); }
.mini-timeline li { position: relative; display: flex; align-items: center; gap: 12px; color: #e9e5ec; }
.mini-timeline small { margin-left: auto; color: var(--muted); }
.mini-timeline b { position: relative; z-index: 1; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #141215; }
.t-call { background: #ff6b78; }
.t-wa { background: #3ccf7e; }
.t-stage { background: #ffb040; }

.mini-lock { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.mini-lock__team { display: flex; }
.mini-lock__team b {
    display: grid; place-items: center; width: 34px; height: 34px; margin-left: -8px;
    border-radius: 50%; border: 2px solid #141215; background: #2a2430; color: #fff; font-size: 0.6875rem; font-weight: 600;
}
.mini-lock__team b:first-child { margin-left: 0; background: var(--rush); }
.mini-lock__label { padding: 5px 10px; border-radius: 10px; background: rgba(60, 207, 126, .14); color: #7ee2a8; font-size: 0.8125rem; font-weight: 500; }

.bento__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: end; }
.mini-sources { display: grid; gap: 10px; }
.mini-sources div { display: grid; grid-template-columns: 80px 1fr 20px; gap: 10px; align-items: center; font-size: 0.8125rem; color: var(--muted); }
.mini-sources i { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .08); position: relative; overflow: hidden; }
.mini-sources i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 10px; background: linear-gradient(90deg, #d0162d, #ff6b78); }
.mini-sources b { color: #fff; font-weight: 500; text-align: right; }

@media (max-width: 960px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "follow follow" "pipe history" "phone private" "phone reports"; }
    .bento__card--reports .bento__split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "follow" "phone" "pipe" "history" "private" "reports"; }
    .bento__phone { width: 70%; }
}

/* API card: values roll to the next lead, like a counter */
.roll {
    display: inline-grid;
    vertical-align: bottom;
    overflow: hidden;
    height: 1.65em;
}
.roll > span { grid-area: 1 / 1; transition: transform .55s cubic-bezier(.65, 0, .25, 1), opacity .55s ease; }
.roll > span.is-leaving { transform: translateY(-100%); opacity: 0; }
.roll > span.is-entering { transform: translateY(100%); opacity: 0; }
.c-num { color: #ffd38a; }
[data-api-status] { transition: opacity .3s ease; }
[data-api-status].is-dim { opacity: .35; }

/* Industry tags with icons */
.site .fit__list li { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 12px; }
.site .fit__list li svg {
    flex: none;
    width: 34px; height: 34px;
    padding: 7px;
    border-radius: 10px;
    background: rgba(255, 51, 70, .14);
    color: #ff7d89;
}

/* ---------- Footer contact details ---------- */
.site .site-footer__title { margin: 0 0 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.site .site-footer__nav .site-footer__title { margin-bottom: 6px; }
.site .site-footer__reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.site .site-footer__reach li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; }
.site .site-footer__reach a, .site .site-footer__reach span { overflow-wrap: anywhere; }
.site .site-footer__icon { margin-top: 2px; color: #ff3346; }

/* ---------- Contact icons (Contact us page) ---------- */
.reach dt { display: flex; align-items: center; gap: 8px; }
.reach .reach-icon { flex: none; color: #ff3346; }
.reach dd { padding-left: 26px; }