:root {
    --bg: #0a0a0a;
    --surface: #111;
    --elevated: #171717;
    --orange: #ff5c00;
    --cream: #f0ebe2;
    --muted: #8a837b;
    --faint: #4c4742;
    --border: #242220;
    --head: 'Chillax', sans-serif;
    --body: 'Plus Jakarta Sans', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --ease: cubic-bezier(.22, 1, .36, 1)
}

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

html {
    scroll-behavior: smooth;
    background: var(--bg)
}

body {
    background: var(--bg);
    color: var(--cream);
    font-family: var(--body);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased
}

button,
input,
textarea {
    font: inherit
}

button,
a {
    color: inherit
}

button {
    cursor: pointer
}

a {
    text-decoration: none
}

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

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

.noise {
    position: fixed;
    inset: 0;
    z-index: 200;
    opacity: .035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.skip-link {
    position: fixed;
    left: 20px;
    top: -60px;
    z-index: 9999;
    background: var(--cream);
    color: #111;
    padding: 12px 18px;
    border-radius: 6px
}

.skip-link:focus {
    top: 20px
}

.eyebrow {
    display: block;
    color: var(--orange);
    font: 600 11px/1.2 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 18px
}

.button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 13px 20px;
    border: 1px solid transparent;
    border-radius: 7px;
    font: 600 13px var(--body);
    letter-spacing: 0;
    transition: .25s var(--ease)
}

.button-primary {
    background: linear-gradient(135deg, #fbb59c 0%, var(--orange) 100%);
    color: #fff;
    border-radius: 100px;
    padding: 13px 26px;
    box-shadow: 0 8px 30px rgba(255, 92, 0, .18)
}

.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 24px rgba(255, 92, 0, .4), 0 12px 38px rgba(255, 92, 0, .3)
}

.button-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--muted)
}

.text-link {
    font: 600 13px var(--body);
    letter-spacing: 0;
    color: var(--orange);
    border: 0;
    background: none;
    position: relative
}

.text-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--orange);
    transition: width .2s var(--ease)
}

.text-link:hover::after {
    width: 100%
}

/* entrance */
.connection {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    background: #050505;
    transition: opacity .55s var(--ease), visibility .55s
}

.connection.skip,
.connection.done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.connection-inner {
    text-align: center
}

.scan-orb {
    width: 110px;
    height: 110px;
    margin: 0 auto 30px;
    border: 1px solid #292725;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 rgba(255, 92, 0, 0);
    animation: orbGlow 2.25s var(--ease) forwards;
    overflow: hidden
}

.qr-grid {
    width: 48px;
    height: 48px;
    opacity: 0;
    background: repeating-conic-gradient(#d6d0c8 0 25%, transparent 0 50%) 0 0/12px 12px;
    animation: qrReveal 1.5s .25s both
}

.qr-grid::before,
.qr-grid::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 3px solid #eee;
    top: 31px;
    left: 31px
}

.qr-grid::after {
    left: 62px
}

.scan-line {
    position: absolute;
    width: 58px;
    height: 1px;
    background: var(--orange);
    top: 28px;
    opacity: 0;
    box-shadow: 0 0 10px var(--orange);
    animation: scanLine .55s .45s ease-in-out
}

.r-mark {
    position: absolute;
    font: 700 46px/1 var(--head);
    opacity: 0;
    color: #fff;
    animation: markIn .4s 1.72s forwards
}

.terminal {
    min-height: 145px;
    color: #827a72;
    font: 500 10px/1.7 var(--mono);
    letter-spacing: .06em
}

.terminal p {
    opacity: 0
}

.signal {
    animation: lineIn .15s .25s forwards
}

.handshake {
    animation: lineIn .15s .43s forwards
}

.online-list {
    margin: 10px 0
}

.online-list p:nth-child(1) {
    animation: lineIn .08s .62s forwards
}

.online-list p:nth-child(2) {
    animation: lineIn .08s .74s forwards
}

.online-list p:nth-child(3) {
    animation: lineIn .08s .86s forwards
}

.online-list p:nth-child(4) {
    animation: lineIn .08s .98s forwards
}

.online-list span {
    color: #bdb5ac
}

.established {
    color: var(--orange);
    animation: lineIn .16s 1.18s forwards !important
}

@keyframes orbGlow {
    0% {
        box-shadow: 0 0 0 transparent
    }

    35%,
    65% {
        border-color: var(--orange);
        box-shadow: 0 0 35px rgba(255, 92, 0, .2)
    }

    100% {
        border-color: var(--orange);
        box-shadow: 0 0 60px rgba(255, 92, 0, .35);
        transform: scale(1.08)
    }
}

@keyframes qrReveal {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    20%,
    68% {
        opacity: .8;
        transform: scale(1)
    }

    88%,
    100% {
        opacity: 0;
        transform: scale(1.15)
    }
}

@keyframes scanLine {
    0% {
        opacity: 0;
        transform: translateY(0)
    }

    15% {
        opacity: 1
    }

    85% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(54px)
    }
}

@keyframes markIn {
    from {
        opacity: 0;
        transform: scale(.6) rotate(-15deg)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes lineIn {
    to {
        opacity: 1
    }
}

/* header + hero */
.scan-header {
    position: fixed;
    z-index: 150;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1180px, calc(100% - 48px));
    height: 64px;
    padding: 11px 12px 11px 18px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: rgba(10, 10, 10, .68);
    backdrop-filter: blur(18px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: .25s
}

.scan-header.scrolled {
    top: 10px;
    background: rgba(10, 10, 10, .9);
    box-shadow: 0 12px 36px #000
}

.brand img {
    width: 142px
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 22px
}

.mobile-text {
    display: none
}

.site-exit {
    background: none;
    color: var(--orange);
    padding: 0;
    font: 600 13px var(--body);
    letter-spacing: 0;
    position: relative
}

.site-exit::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--orange);
    transition: width .2s var(--ease)
}

.site-exit:hover::after {
    width: 100%
}

.hero {
    min-height: 100svh;
    padding: 120px max(24px, calc((100vw - 1180px)/2)) 46px;
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    align-items: end;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border)
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, .024) 1px, transparent 1px) 0 0/8.33vw 100%;
    opacity: .35
}

.hero-glow {
    position: absolute;
    width: 720px;
    height: 720px;
    right: 2%;
    bottom: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 92, 0, .14), transparent 66%);
    filter: blur(16px)
}

.hero-copy {
    position: relative;
    z-index: 3;
    padding-bottom: 8vh;
    max-width: 560px
}

.hero h1 {
    font: 600 clamp(54px, 7.4vw, 112px)/.84 var(--head);
    letter-spacing: -.065em;
    margin-bottom: 30px
}

.hero h1 span {
    color: var(--orange)
}

.hero-copy>p {
    max-width: 515px;
    color: #b1aaa2;
    font-size: clamp(15px, 1.3vw, 18px);
    margin-bottom: 34px
}

.portrait-wrap {
    height: calc(100vh - 108px);
    min-height: 590px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 2
}

.portrait {
    height: 96%;
    max-width: none;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 30px 60px #000);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 98%);
    mask-image: linear-gradient(to bottom, #000 82%, transparent 98%)
}

.portrait-ring {
    position: absolute;
    width: min(42vw, 610px);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 92, 0, .26);
    border-radius: 50%;
    bottom: -10%;
    box-shadow: inset 0 0 100px rgba(255, 92, 0, .06), 0 0 80px rgba(255, 92, 0, .05)
}

.portrait-ring::before {
    content: "";
    position: absolute;
    inset: 10%;
    border: 1px dashed rgba(255, 255, 255, .1);
    border-radius: 50%;
    animation: spin 30s linear infinite
}

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

.event {
    position: absolute;
    z-index: 5;
    min-width: 190px;
    padding: 13px 14px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    background: rgba(16, 16, 16, .82);
    box-shadow: 0 18px 45px #000;
    backdrop-filter: blur(12px);
    font-size: 11px;
    animation: eventFloat 5s ease-in-out infinite
}

.event small {
    grid-column: 2;
    color: var(--muted);
    font: 9px var(--mono);
    text-transform: uppercase
}

.event i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange)
}

.event-icon {
    color: #ffb000;
    font-size: 8px;
    letter-spacing: -1px
}

.event-one {
    top: 24%;
    left: 3%
}

.event-two {
    top: 42%;
    right: 0;
    animation-delay: -1.3s
}

.event-three {
    bottom: 28%;
    left: 0;
    animation-delay: -2.7s
}

.event-four {
    bottom: 11%;
    right: 4%;
    animation-delay: -3.8s
}

.event-five {
    top: 16%;
    right: 6%;
    animation-delay: -.6s
}

@keyframes eventFloat {
    50% {
        transform: translateY(-8px)
    }
}

.hero-index {
    position: absolute;
    bottom: 25px;
    left: max(24px, calc((100vw - 1180px)/2));
    right: max(24px, calc((100vw - 1180px)/2));
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--faint);
    font: 9px var(--mono);
    letter-spacing: .1em
}

.hero-index i {
    height: 1px;
    background: var(--border);
    flex: 1
}

/* sections */
.focus-section {
    padding: 105px 0;
    background: #0d0c0b
}

.focus-wrap h2,
.section-intro h2,
.connect-copy h2 {
    font: 600 clamp(38px, 5.2vw, 72px)/.94 var(--head);
    letter-spacing: -.045em
}

.focus-wrap h2 {
    max-width: 800px;
    margin-bottom: 42px
}

.focus-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #0a0a0a;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 5px
}

.focus-rail button {
    min-height: 70px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: .25s
}

.focus-rail button:last-child {
    border-right: 0
}

.focus-rail button span {
    font: 10px var(--mono);
    color: var(--faint)
}

.focus-rail button:hover,
.focus-rail button[aria-selected="true"] {
    background: var(--orange);
    color: #fff;
    border-radius: 7px
}

.focus-rail button[aria-selected="true"] span {
    color: #fff
}

.focus-outcome {
    margin-top: 22px;
    color: #aaa29a;
    font-size: 14px;
    min-height: 24px
}

.service-section,
.proof-section,
.connect-section {
    padding: 140px 0;
    border-top: 1px solid var(--border);
    position: relative
}

.service-section::before {
    content: attr(data-service);
    position: absolute;
    right: -10px;
    top: 70px;
    font: 600 13vw/.8 var(--head);
    color: rgba(255, 255, 255, .015);
    text-transform: uppercase;
    pointer-events: none
}

.section-intro {
    max-width: 820px;
    margin-bottom: 64px;
    position: relative;
    z-index: 2
}

.section-intro h2 {
    margin-bottom: 24px
}

.section-intro>p,
.section-intro.split>p,
.connect-copy>p {
    max-width: 600px;
    color: var(--muted);
    font-size: 16px
}

.section-intro.split {
    max-width: none;
    display: grid;
    grid-template-columns: 1.45fr .55fr;
    align-items: end
}

.section-intro.compact {
    margin-bottom: 42px
}

.reveal {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
}

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

/* review demo */
.review-section {
    background: #0a0a0a
}

.review-demo {
    border: 1px solid var(--border);
    background: #0d0d0d;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 90px #000;
    margin-bottom: 38px
}

.demo-topbar,
.demo-status {
    height: 54px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    font: 500 10px var(--mono);
    letter-spacing: .06em
}

.demo-topbar i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5eff83;
    margin-right: 7px;
    box-shadow: 0 0 10px #5eff83
}

.demo-topbar small {
    color: #5eff83
}

.review-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 520px
}

.pipeline-panel {
    padding: 30px;
    border-right: 1px solid var(--border)
}

.job-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 13px;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--border);
    background: #141414;
    border-radius: 9px;
    margin-bottom: 26px
}

.avatar {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    background: #272727;
    border-radius: 50%;
    font: 10px var(--mono)
}

.job-card strong,
.job-card span {
    display: block
}

.job-card strong {
    font-size: 12px
}

.job-card span {
    font-size: 10px;
    color: var(--muted)
}

.job-card b {
    font: 8px var(--mono);
    color: #5eff83;
    background: rgba(94, 255, 131, .08);
    padding: 5px 7px;
    border-radius: 4px
}

.pipeline {
    padding-left: 16px
}

.pipe-step {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #555;
    transition: .35s
}

.pipe-step>span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #292929;
    border-radius: 50%;
    font: 9px var(--mono);
    background: #101010
}

.pipe-step strong,
.pipe-step small {
    display: block
}

.pipe-step strong {
    font-size: 12px
}

.pipe-step small {
    font-size: 9px;
    color: #555
}

.pipe-step.active {
    color: var(--cream)
}

.pipe-step.active>span {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 0 22px rgba(255, 92, 0, .2)
}

.pipe-line {
    width: 1px;
    height: 42px;
    background: #292929;
    margin-left: 21px;
    overflow: hidden
}

.pipe-line i {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--orange);
    transform: translateY(-100%)
}

.pipe-line.active i {
    animation: flow .35s forwards
}

@keyframes flow {
    to {
        transform: translateY(0)
    }
}

.customer-panel {
    padding: 38px;
    display: grid;
    place-items: center;
    position: relative;
    background: radial-gradient(circle at center, rgba(255, 92, 0, .04), transparent 60%)
}

.email-card,
.rating-card {
    width: min(100%, 360px);
    background: #f9f9f7;
    color: #272421;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 24px 60px #000;
    transition: .45s var(--ease)
}

.email-head {
    display: flex;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    padding-bottom: 14px;
    margin-bottom: 18px
}

.email-head>span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--orange);
    color: white;
    font-weight: 700
}

.email-head strong,
.email-head small {
    display: block
}

.email-head strong {
    font-size: 12px
}

.email-head small {
    color: #888;
    font-size: 9px
}

.email-card p {
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 18px
}

.email-card button {
    width: 100%;
    border: 0;
    border-radius: 5px;
    background: #2677d8;
    color: #fff;
    padding: 11px;
    font-size: 11px
}

.demo-cursor {
    position: absolute;
    color: #111;
    font-size: 28px;
    right: 50px;
    bottom: 62px;
    opacity: 0;
    filter: drop-shadow(0 2px 1px white)
}

.review-demo.playing .demo-cursor {
    animation: cursorClick 1s 2.3s forwards
}

@keyframes cursorClick {
    0% {
        opacity: 0;
        transform: translate(20px, 20px)
    }

    50%,
    85% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0;
        transform: scale(.8)
    }
}

.rating-card {
    position: absolute;
    opacity: 0;
    transform: translateY(15px) scale(.98);
    pointer-events: none;
    text-align: center
}

.rating-card.show {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.email-card.hide {
    opacity: 0;
    transform: translateY(-15px) scale(.98);
    pointer-events: none
}

.google-word {
    display: block;
    font: 500 18px Arial;
    margin-bottom: 22px
}

.google-word b {
    color: #4285f4
}

.rating-card>strong {
    display: block;
    font-size: 15px
}

.rating-card p {
    font-size: 11px;
    color: #777;
    margin: 8px 0 18px
}

.stars {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 13px
}

.stars button {
    border: 0;
    background: none;
    color: #ccc;
    font-size: 32px;
    line-height: 1
}

.stars button.on,
.stars button:hover {
    color: #fbbc04
}

.rating-card>small {
    font-size: 9px;
    color: #777
}

.demo-status {
    border-top: 1px solid var(--border);
    border-bottom: 0
}

.demo-status span {
    color: var(--muted)
}

.demo-status strong {
    color: #5eff83
}

/* offer */
.offer-card {
    display: grid;
    grid-template-columns: 1.1fr .9fr auto;
    gap: 42px;
    align-items: center;
    padding: 34px;
    border: 1px solid rgba(255, 92, 0, .25);
    border-radius: 12px;
    background: linear-gradient(135deg, #15110f, #0d0d0d)
}

.offer-card .eyebrow {
    margin-bottom: 10px
}

.offer-card h3 {
    font: 600 clamp(30px, 4vw, 50px)/1 var(--head);
    color: var(--orange);
    letter-spacing: -.04em;
    margin-bottom: 15px
}

.offer-card h3 small {
    font-size: 13px;
    letter-spacing: .04em
}

.offer-card p {
    font-size: 13px;
    color: var(--muted);
    max-width: 430px
}

.offer-card ul {
    list-style: none
}

.offer-card li {
    font-size: 12px;
    padding: 5px 0;
    color: #c1bab2
}

.offer-card li::before {
    content: "✓";
    color: var(--orange);
    margin-right: 9px
}

.offer-addon {
    grid-column: 1/3;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 92, 0, .15);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.addon-toggle {
    display: flex;
    align-items: center;
    gap: 14px
}

.addon-switch-wrap {
    display: inline-flex;
    cursor: pointer
}

.addon-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.addon-switch {
    flex: 0 0 40px;
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: #2a2724;
    border: 1px solid var(--border);
    position: relative;
    transition: background .25s var(--ease), border-color .25s var(--ease)
}

.addon-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform .25s var(--ease), background .25s var(--ease)
}

.addon-toggle input:checked+.addon-switch {
    background: rgba(255, 92, 0, .18);
    border-color: var(--orange)
}

.addon-toggle input:checked+.addon-switch::before {
    transform: translateX(18px);
    background: var(--orange)
}

.addon-toggle input:focus-visible+.addon-switch {
    outline: 2px solid var(--orange);
    outline-offset: 2px
}

.addon-copy {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.addon-copy strong {
    font-size: 13px;
    color: var(--cream);
    font-weight: 500
}

.addon-copy small {
    font: 600 11px var(--mono);
    color: var(--orange);
    letter-spacing: .04em
}

.addon-notif-scene {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap
}

.addon-notif {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    background: rgba(16, 16, 16, .6);
    font-size: 11px;
    position: relative
}

.addon-notif i {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
    transition: background .35s var(--ease), box-shadow .35s var(--ease)
}

.addon-notif-call {
    opacity: .5;
    filter: saturate(.4);
    transition: opacity .4s var(--ease), filter .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)
}

.addon-notif-scene.is-active .addon-notif-call {
    opacity: 1;
    filter: none;
    border-color: rgba(255, 92, 0, .35);
    box-shadow: 0 0 22px rgba(255, 92, 0, .3)
}

.addon-notif-connector {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s
}

.addon-notif-scene.is-active .addon-notif-connector {
    opacity: 1;
    visibility: visible;
    transition-delay: .1s
}

.addon-notif-arrow {
    position: relative;
    flex: 0 0 auto
}

.addon-notif-arrow::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px dashed var(--orange);
    border-width: 0 1px 1px 0
}

.addon-notif-connector small {
    font: 9px var(--mono);
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap
}

.addon-notif-reply {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px) scale(.94);
    transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, box-shadow .4s var(--ease), border-color .4s var(--ease)
}

.addon-notif-scene.is-active .addon-notif-reply {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: .2s;
    border-color: rgba(255, 92, 0, .35);
    box-shadow: 0 0 22px rgba(255, 92, 0, .3)
}

.addon-notif-scene.is-active .addon-notif-reply i {
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange)
}

@media(min-width:701px) {
    .addon-notif-connector {
        flex-direction: column;
        gap: 4px;
        transform: scaleX(.6);
        transform-origin: left center
    }

    .addon-notif-scene.is-active .addon-notif-connector {
        transform: scaleX(1)
    }

    .addon-notif-arrow {
        width: 34px;
        height: 0;
        border-top: 1px dashed var(--orange)
    }

    .addon-notif-arrow::after {
        right: -3px;
        top: -3px;
        transform: rotate(-45deg)
    }
}

@media(max-width:700px) {
    .addon-notif-scene {
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

    .addon-notif-connector {
        flex-direction: column-reverse;
        align-items: center;
        gap: 4px;
        transform: scaleY(.6);
        transform-origin: top center
    }

    .addon-notif-scene.is-active .addon-notif-connector {
        transform: scaleY(1)
    }

    .addon-notif-arrow {
        width: 0;
        height: 20px;
        border-left: 1px dashed var(--orange)
    }

    .addon-notif-arrow::after {
        left: -3.5px;
        bottom: -3px;
        transform: rotate(45deg)
    }
}

.addon-explainer {
    font-size: 12px;
    color: var(--muted);
    max-width: 430px
}

.addon-checklist {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.addon-checklist .addon-bullet {
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease)
}

.addon-checklist.is-active .addon-bullet {
    opacity: 1;
    visibility: visible
}

.offer-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 150px
}

/* website */
.website-section {
    background: #0d0c0b
}

.site-browser {
    width: min(970px, 92%);
    margin: 0 auto 70px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    overflow: hidden;
    transform: perspective(1300px) rotateX(2deg);
    box-shadow: 0 35px 100px #000
}

.browser-bar {
    height: 42px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    padding: 0 16px;
    background: #171717;
    color: var(--muted);
    font: 9px var(--mono)
}

.browser-bar>span:last-child {
    text-align: right
}

.dots {
    display: flex;
    gap: 5px
}

.dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #474747
}

.dots i:first-child {
    background: #ff5f56
}

.dots i:nth-child(2) {
    background: #ffbd2e
}

.dots i:nth-child(3) {
    background: #27c93f
}

.browser-url {
    text-align: center;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 5px
}

.site-browser video {
    width: 100%
}

.booking-lab {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #0a0a0a;
    overflow: hidden;
    margin-bottom: 38px
}

.booking-copy {
    padding: 55px 42px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.booking-copy h3 {
    font: 600 clamp(29px, 4vw, 48px)/1 var(--head);
    letter-spacing: -.04em;
    margin-bottom: 20px
}

.booking-copy p {
    color: var(--muted);
    font-size: 13px
}

.booking-signals {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 38px;
    color: #777;
    font: 9px var(--mono)
}

.booking-signals i {
    color: var(--orange)
}

.booking-ui {
    padding: 38px;
    min-height: 430px
}

.booking-progress {
    display: flex;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
    font: 9px var(--mono);
    color: #555
}

.booking-progress span.active {
    color: var(--orange)
}

.booking-step {
    display: none;
    padding-top: 28px
}

.booking-step.active {
    display: block;
    animation: stepIn .35s var(--ease)
}

@keyframes stepIn {
    from {
        opacity: 0;
        transform: translateX(10px)
    }
}

.booking-step h4 {
    font: 500 23px var(--head);
    margin-bottom: 20px
}

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

.date-grid button,
.time-grid button {
    min-height: 74px;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 15px
}

.date-grid button small {
    font: 8px var(--mono);
    color: var(--muted);
    text-transform: uppercase
}

.date-grid button:hover,
.time-grid button:hover,
.time-grid button.active {
    border-color: var(--orange);
    background: rgba(255, 92, 0, .07)
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
}

.time-grid button {
    min-height: 54px
}

.back-link {
    border: 0;
    background: none;
    color: var(--muted);
    font: 9px var(--mono);
    margin-bottom: 14px
}

.booking-step>p {
    font-size: 12px;
    color: var(--orange);
    margin-top: -14px;
    margin-bottom: 18px
}

.appointment-summary {
    padding: 20px;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 20px
}

.appointment-summary span,
.appointment-summary strong {
    display: block
}

.appointment-summary span {
    font-size: 10px;
    color: var(--muted);
    margin-bottom: 8px
}

.appointment-summary strong {
    font-size: 14px
}

.booking-success {
    text-align: center
}

.success-mark {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin: 0 auto 15px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff
}

.booking-success>small,
.completion>small {
    font: 9px var(--mono);
    color: var(--orange)
}

.booking-success h4 {
    margin: 10px 0 20px
}

.system-notifications {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 17px
}

.system-notifications span {
    opacity: 0;
    background: #111;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 8px;
    font: 9px var(--mono);
    color: #9af0a9
}

.booking-success.active .system-notifications span {
    animation: notify .3s forwards
}

.booking-success.active .system-notifications span:nth-child(2) {
    animation-delay: .18s
}

.booking-success.active .system-notifications span:nth-child(3) {
    animation-delay: .36s
}

@keyframes notify {
    to {
        opacity: 1;
        transform: none
    }

    from {
        opacity: 0;
        transform: translateY(5px)
    }
}

/* brand */
.brand-section {
    background: #090909
}

.brand-lab {
    --lab-accent: #ff5c00;
    --lab-bg: #0a0a0a;
    --lab-ink: #f0ebe2;
    display: grid;
    grid-template-columns: 260px 1fr;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: #101010
}

.brand-lab[data-palette="cobalt"] {
    --lab-accent: #367cff;
    --lab-bg: #071327;
    --lab-ink: #eaf1ff
}

.brand-lab[data-palette="forest"] {
    --lab-accent: #9ac967;
    --lab-bg: #112118;
    --lab-ink: #edf4e6
}

.brand-lab[data-palette="wine"] {
    --lab-accent: #e35772;
    --lab-bg: #291018;
    --lab-ink: #fff0f3
}

.lab-controls {
    padding: 28px;
    border-right: 1px solid var(--border)
}

.lab-controls fieldset {
    border: 0;
    margin-bottom: 26px
}

.lab-controls legend {
    font: 9px var(--mono);
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 11px
}

.choice-row {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.choice-row button {
    background: #141414;
    border: 1px solid var(--border);
    color: #888;
    text-align: left;
    padding: 10px 11px;
    border-radius: 5px;
    font-size: 11px
}

.choice-row button.active {
    border-color: var(--orange);
    color: #fff;
    background: rgba(255, 92, 0, .08)
}

.palette-controls {
    display: flex;
    gap: 9px
}

.palette {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid #101010;
    outline: 1px solid #333
}

.palette.active {
    outline-color: #fff
}

.palette.forge {
    background: #ff5c00
}

.palette.cobalt {
    background: #367cff
}

.palette.forest {
    background: #9ac967
}

.palette.wine {
    background: #e35772
}

.perception {
    padding-top: 20px;
    border-top: 1px solid var(--border)
}

.perception small,
.perception strong,
.perception span {
    display: block
}

.perception small {
    font: 8px var(--mono);
    color: #666
}

.perception strong {
    font: 600 13px var(--head);
    margin: 7px 0
}

.perception span {
    font: 8px var(--mono);
    color: var(--orange)
}

.brand-apps {
    min-height: 590px;
    padding: 50px;
    position: relative;
    background: radial-gradient(circle at 55% 50%, rgba(255, 92, 0, .09), transparent 55%)
}

.brand-canvas {
    background: var(--lab-bg);
    color: var(--lab-ink);
    border-color: color-mix(in srgb, var(--lab-accent) 30%, #333);
    transition: all .45s var(--ease)
}

.brand-desktop {
    width: 78%;
    height: 380px;
    border: 1px solid;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    box-shadow: 0 24px 50px #000
}

.mini-nav {
    display: flex;
    justify-content: space-between;
    font: 7px var(--mono)
}

.mini-nav b {
    display: flex;
    align-items: center;
    gap: 5px
}

.mini-nav i {
    width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lab-accent);
    font: 700 10px var(--head)
}

.mini-hero {
    padding: 70px 25px 25px;
    max-width: 75%
}

.mini-hero small {
    font: 7px var(--mono);
    color: var(--lab-accent)
}

.mini-hero strong {
    display: block;
    font: 600 32px/1 var(--head);
    letter-spacing: -.04em;
    margin: 12px 0
}

.mini-hero button {
    border: 0;
    background: var(--lab-accent);
    color: var(--lab-bg);
    padding: 8px 10px;
    border-radius: 3px;
    font: 700 7px var(--mono)
}

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

.mini-grid i {
    height: 55px;
    border: 1px solid color-mix(in srgb, var(--lab-accent) 25%, #222);
    background: color-mix(in srgb, var(--lab-accent) 5%, var(--lab-bg))
}

.brand-phone {
    position: absolute;
    width: 165px;
    height: 330px;
    right: 42px;
    top: 120px;
    border: 5px solid #1c1c1c;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 24px 50px #000
}

.phone-top {
    height: 26px;
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font: 6px var(--mono)
}

.social-post {
    height: 225px;
    margin: 0 7px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--lab-accent) 12%, var(--lab-bg));
    border: 1px solid color-mix(in srgb, var(--lab-accent) 30%, transparent)
}

.social-post>span,
.social-post>small {
    font: 6px var(--mono)
}

.social-post>b {
    font: 700 30px/.84 var(--head);
    margin: auto 0
}

.social-post em {
    color: var(--lab-accent);
    font-style: normal
}

.social-meta {
    padding: 10px 12px
}

.social-meta strong,
.social-meta span {
    display: block
}

.social-meta strong {
    font: 7px var(--mono)
}

.social-meta span {
    font-size: 6px;
    color: #777
}

.business-card {
    position: absolute;
    width: 330px;
    height: 185px;
    right: 20%;
    bottom: 30px;
    border: 1px solid;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    transform: rotate(-4deg);
    box-shadow: 0 28px 55px #000
}

.card-mark {
    width: 65px;
    height: 65px;
    display: grid;
    place-items: center;
    border: 2px solid var(--lab-accent);
    border-radius: 50%;
    color: var(--lab-accent);
    font: 700 34px var(--head)
}

.business-card strong,
.business-card span,
.business-card small {
    display: block
}

.business-card strong {
    font: 600 14px var(--head)
}

.business-card span {
    font: 6px var(--mono);
    color: var(--lab-accent);
    margin: 5px 0 26px
}

.business-card small {
    font: 7px var(--mono)
}

.brand-lab[data-direction="established"] .brand-canvas {
    border-radius: 2px
}

.brand-lab[data-direction="established"] .mini-hero strong,
.brand-lab[data-direction="established"] .social-post>b {
    font-family: Georgia, serif;
    font-weight: 400
}

.brand-lab[data-direction="bold"] .brand-canvas {
    border-radius: 0
}

.brand-lab[data-direction="bold"] .mini-hero strong,
.brand-lab[data-direction="bold"] .social-post>b {
    font-weight: 700;
    text-transform: uppercase
}

.brand-lab[data-direction="bold"] .mini-hero {
    max-width: 90%
}

.brand-lab[data-direction="heritage"] .brand-canvas {
    border-radius: 2px;
    background: color-mix(in srgb, var(--lab-bg) 72%, #4b321d)
}

.brand-lab[data-direction="heritage"] .mini-hero strong,
.brand-lab[data-direction="heritage"] .social-post>b {
    font-family: Georgia, serif
}

.brand-lab[data-direction="future"] .brand-canvas {
    border-radius: 11px
}

.brand-close {
    text-align: center;
    color: var(--cream);
    font: 500 clamp(24px, 3vw, 36px) var(--head);
    margin: 40px 0
}

/* content + proof */
.content-section {
    background: #0d0c0b
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center
}

.content-grid .section-intro {
    margin-bottom: 0
}

.content-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 32px
}

.content-tags span {
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: #777;
    font: 8px var(--mono)
}

.reel-player {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    min-height: 600px
}

.reel-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    font: 8px var(--mono);
    color: #666
}

.reel-controls button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: #111;
    color: #fff
}

.reel-controls button:hover {
    border-color: var(--orange);
    color: var(--orange)
}

.reel-controls b {
    color: var(--orange)
}

.phone-stack {
    width: 290px;
    height: 555px;
    position: relative
}

.reel-phone {
    position: absolute;
    inset: 0;
    border: 7px solid #1c1c1c;
    border-radius: 38px;
    overflow: hidden;
    background: #000;
    transition: .45s var(--ease);
    box-shadow: 0 25px 70px #000
}

.reel-phone video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.reel-phone.front {
    z-index: 2
}

.reel-phone.back {
    transform: translate(35px, 25px) scale(.91);
    filter: brightness(.4);
    opacity: .8
}

.content-grid .offer-card {
    grid-column: 1/-1;
    width: 100%;
    margin-top: 50px
}

.proof-section {
    background: #090909
}

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

.proof-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #101010;
    transition: .3s var(--ease)
}

.proof-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 92, 0, .45)
}

.proof-card img {
    aspect-ratio: 16/10;
    width: 100%;
    object-fit: cover
}

.proof-card>div {
    padding: 18px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px
}

.proof-card span {
    grid-row: 1/3;
    color: var(--orange);
    font: 9px var(--mono)
}

.proof-card strong {
    font: 500 15px var(--head)
}

.proof-card small {
    font-size: 9px;
    color: var(--muted)
}

.proof-link {
    display: table;
    margin: 34px auto 0
}

/* survey */
.connect-section {
    padding: 150px 0;
    background: linear-gradient(135deg, #11100e, #080808)
}

.connect-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 90px;
    align-items: start
}

.connect-copy {
    position: sticky;
    top: 130px
}

.connect-copy h2 {
    margin-bottom: 25px
}

.survey {
    border: 1px solid var(--border);
    background: #0c0c0c;
    border-radius: 13px;
    padding: 36px;
    min-height: 520px;
    display: flex;
    flex-direction: column
}

.survey-top {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 17px;
    align-items: center;
    color: var(--muted);
    font: 8px var(--mono);
    margin-bottom: 55px
}

.progress-track {
    height: 2px;
    background: #242424
}

.progress-track i {
    display: block;
    width: 20%;
    height: 100%;
    background: var(--orange);
    transition: .35s
}

.form-step {
    display: none;
    flex: 1
}

.form-step.active {
    display: block;
    animation: stepIn .35s var(--ease)
}

.form-step>label,
.form-step legend {
    font: 500 clamp(24px, 3.5vw, 38px)/1.15 var(--head);
    letter-spacing: -.025em
}

.form-step>p,
.form-step fieldset>p {
    color: var(--muted);
    font-size: 12px;
    margin: 10px 0 30px
}

.form-step input,
.form-step textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #333;
    color: #fff;
    padding: 14px 0;
    outline: 0;
    border-radius: 0;
    font-size: 17px;
    resize: vertical
}

.form-step input:focus,
.form-step textarea:focus {
    border-color: var(--orange)
}

.form-step fieldset {
    border: 0
}

.field-error {
    display: block;
    color: #ff7a69;
    font-size: 10px;
    margin-top: 9px;
    min-height: 16px
}

.interest-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px
}

.interest-options input {
    position: absolute;
    opacity: 0
}

.interest-options span {
    display: flex;
    align-items: center;
    min-height: 60px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: #aaa;
    font-size: 12px
}

.interest-options input:checked+span {
    border-color: var(--orange);
    background: rgba(255, 92, 0, .08);
    color: #fff
}

.interest-options input:focus-visible+span {
    outline: 2px solid #fff
}

.contact-fields {
    display: grid;
    gap: 20px
}

.contact-fields label {
    font: 9px var(--mono);
    color: var(--muted)
}

.contact-fields input {
    display: block
}

.survey-nav {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 35px
}

.survey-nav button:last-child {
    margin-left: auto
}

.dev-note {
    margin-top: 14px;
    text-align: right;
    color: #4d4945;
    font: 8px var(--mono)
}

.completion {
    text-align: center;
    padding-top: 10px;
    margin: auto 0
}

.completion .success-mark {
    margin-bottom: 16px
}

.completion h3 {
    font: 500 30px/1.15 var(--head);
    margin: 12px 0
}

.completion p {
    max-width: 430px;
    margin: 0 auto 25px !important
}

.completion .text-link {
    display: inline-flex
}

footer {
    background: #050505;
    border-top: 1px solid var(--border);
    padding: 38px 24px
}

.footer-inner {
    width: min(1180px, 100%);
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px
}

.footer-brand img {
    width: 125px
}

.footer-inner nav {
    display: flex;
    gap: 24px;
    margin-left: auto
}

.footer-inner nav a {
    font-size: 10px;
    color: var(--muted)
}

.footer-inner nav a:hover {
    color: var(--orange)
}

.footer-inner>small {
    font: 8px var(--mono);
    color: #4b4743
}

@media(max-width:900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 115px;
        align-items: start
    }

    .hero-copy {
        padding: 6vh 0 0;
        z-index: 6;
        text-align: center
    }

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

    .portrait-wrap {
        height: 58vh;
        min-height: 450px;
        margin-top: -5vh
    }

    .portrait {
        height: 100%
    }

    .portrait-ring {
        width: 70vw
    }

    .event-one {
        left: 1%;
        top: 29%
    }

    .event-two {
        right: 1%;
        top: 45%
    }

    .event-three {
        bottom: 25%;
        left: 1%
    }

    .event-four {
        right: 1%;
        bottom: 9%
    }

    .section-intro.split {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .offer-card {
        grid-template-columns: 1fr 1fr
    }

    .offer-actions {
        grid-column: 1/-1;
        flex-direction: row;
        justify-content: flex-start
    }

    .booking-lab {
        grid-template-columns: 1fr
    }

    .booking-copy {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .brand-lab {
        grid-template-columns: 1fr
    }

    .lab-controls {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        display: grid;
        grid-template-columns: 1.4fr .6fr 1fr;
        gap: 20px
    }

    .choice-row {
        flex-direction: row;
        flex-wrap: wrap
    }

    .brand-apps {
        min-height: 580px
    }

    .connect-grid {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .connect-copy {
        position: static
    }

    .footer-inner {
        flex-wrap: wrap
    }

    .footer-inner nav {
        order: 3;
        width: 100%;
        margin: 0
    }
}

@media(max-width:700px) {
    .container {
        width: min(100% - 32px, 1180px)
    }

    .scan-header {
        width: calc(100% - 24px);
        top: 10px;
        padding-left: 13px
    }

    .brand img {
        width: 112px
    }

    .mobile-text {
        display: block;
        font-size: 9px
    }

    .header-actions {
        gap: 13px
    }

    .hero {
        min-height: 880px;
        padding: 95px 16px 30px
    }

    .hero-copy {
        padding-top: 35px
    }

    .hero h1 {
        font-size: clamp(53px, 17vw, 76px)
    }

    .hero-copy>p {
        font-size: 14px;
        max-width: 390px
    }

    .portrait-wrap {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        height: 58%;
        margin: 0
    }

    .portrait {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

    .event {
        min-width: 153px;
        padding: 10px;
        font-size: 9px
    }

    .event-one {
        top: 24%;
        left: 12px
    }

    .event-two {
        top: 40%;
        right: 10px
    }

    .event-three {
        bottom: 22%;
        left: 9px
    }

    .event-four {
        bottom: 8%;
        right: 11px
    }

    .hero-index {
        display: none
    }

    .focus-section {
        padding: 80px 0
    }

    .focus-wrap h2,
    .section-intro h2,
    .connect-copy h2 {
        font-size: clamp(38px, 12.5vw, 58px)
    }

    .focus-rail {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding: 5px;
        scrollbar-width: none
    }

    .focus-rail button {
        min-width: 160px;
        border-right: 1px solid var(--border);
        scroll-snap-align: start
    }

    .focus-outcome {
        font-size: 12px
    }

    .service-section,
    .proof-section,
    .connect-section {
        padding: 95px 0
    }

    .section-intro {
        margin-bottom: 42px
    }

    .section-intro>p,
    .section-intro.split>p {
        font-size: 14px
    }

    .review-stage {
        grid-template-columns: 1fr
    }

    .pipeline-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 20px
    }

    .customer-panel {
        min-height: 390px;
        padding: 20px
    }

    .demo-topbar,
    .demo-status {
        padding: 0 14px
    }

    .offer-card {
        grid-template-columns: 1fr;
        padding: 25px;
        gap: 25px
    }

    .offer-addon {
        grid-column: auto
    }

    .offer-actions {
        grid-column: auto;
        align-items: center;
        flex-direction: column
    }

    .site-browser {
        width: 100%;
        margin-bottom: 45px
    }

    .booking-copy,
    .booking-ui {
        padding: 28px 20px
    }

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

    .booking-progress {
        gap: 11px
    }

    .brand-lab {
        overflow: visible
    }

    .lab-controls {
        grid-template-columns: 1fr;
        padding: 20px
    }

    .brand-apps {
        min-height: 540px;
        padding: 24px;
        overflow: hidden
    }

    .brand-desktop {
        width: 100%;
        height: 310px
    }

    .mini-hero {
        padding: 50px 10px 10px;
        max-width: 85%
    }

    .mini-hero strong {
        font-size: 25px
    }

    .mini-grid {
        display: none
    }

    .brand-phone {
        width: 130px;
        height: 260px;
        right: 17px;
        top: 235px
    }

    .social-post {
        height: 168px
    }

    .social-post>b {
        font-size: 23px
    }

    .business-card {
        width: 270px;
        height: 150px;
        right: 25%;
        bottom: 24px;
        padding: 20px;
        gap: 15px
    }

    .card-mark {
        width: 52px;
        height: 52px;
        font-size: 27px
    }

    .content-grid {
        grid-template-columns: 1fr
    }

    .reel-player {
        min-height: 560px
    }

    .phone-stack {
        width: 250px;
        height: 480px
    }

    .content-grid .offer-card {
        margin-top: 35px
    }

    .proof-grid {
        grid-template-columns: 1fr
    }

    .connect-grid {
        gap: 40px
    }

    .survey {
        padding: 24px 20px;
        min-height: 540px
    }

    .survey-top {
        margin-bottom: 42px
    }

    .interest-options {
        grid-template-columns: 1fr
    }

    .footer-inner {
        align-items: flex-start
    }

    .footer-inner nav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px
    }

    .footer-inner>small {
        margin-left: auto
    }
}

@media(max-width:360px) {
    .hero h1 {
        font-size: 51px
    }

    .event {
        min-width: 140px
    }

    .event-three {
        display: none
    }

    .brand-apps {
        min-height: 500px
    }

    .business-card {
        right: 16%;
        bottom: 20px
    }

    .reel-controls {
        gap: 8px
    }

    .phone-stack {
        width: 225px;
        height: 430px
    }

    .survey {
        padding: 20px 16px
    }
}

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important
    }

    .connection {
        display: none
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .portrait-ring::before {
        animation: none
    }

    .event {
        animation: none
    }
}

@media(max-width:700px) {
    .service-section::before {
        right: 0
    }
}

/* SECOND PASS: EVENT-DRIVEN REVIEW WORKFLOW */
.review-stage {
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    min-height: 720px
}

.workflow-panel {
    padding: 24px;
    border-right: 1px solid var(--border);
    min-width: 0
}

.workflow-heading,
.customer-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    color: var(--muted);
    font: 500 8px var(--mono);
    letter-spacing: .08em
}

.workflow-heading small,
.customer-heading small {
    color: #5d5751;
    font-size: 7px
}

.workflow-canvas {
    position: relative;
    min-height: 640px;
    padding: 22px 20px;
    border: 1px solid #201f1e;
    border-radius: 10px;
    background-color: #0b0b0b;
    background-image: radial-gradient(circle, rgba(240, 235, 226, .1) 1px, transparent 1.2px);
    background-size: 20px 20px;
    overflow: hidden
}

.workflow-canvas::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 35%, transparent 0, rgba(6, 6, 6, .28) 74%, rgba(6, 6, 6, .7) 100%)
}

.trigger-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.workflow-node {
    position: relative;
    z-index: 3;
    width: min(100%, 330px);
    margin-inline: auto;
    padding: 13px 15px 13px 48px;
    border: 1px solid #2a2826;
    border-radius: 8px;
    background: #121212;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    transition: border-color .28s, background .28s, box-shadow .28s, transform .28s
}

.workflow-node::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border: 1px solid #3c3834;
    border-radius: 5px;
    background: #191817;
    box-shadow: inset 0 0 0 5px #111
}

.workflow-node::after {
    content: "";
    position: absolute;
    left: 22px;
    top: 50%;
    width: 6px;
    height: 6px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #49443f;
    transition: .28s
}

.workflow-node strong,
.workflow-node small,
.workflow-node .node-kind {
    display: block
}

.workflow-node strong {
    font-size: 11px;
    line-height: 1.35;
    color: #aaa39b
}

.workflow-node small {
    margin-top: 3px;
    font-size: 8px;
    color: #57524d
}

.node-kind {
    margin-bottom: 4px;
    color: #6b655f;
    font: 600 7px var(--mono);
    letter-spacing: .1em
}

.trigger-node {
    padding-left: 42px
}

.trigger-node strong {
    font-size: 10px
}

.workflow-node.active {
    border-color: rgba(255, 92, 0, .75);
    background: #17110e;
    box-shadow: 0 0 0 1px rgba(255, 92, 0, .08), 0 0 24px rgba(255, 92, 0, .14);
    transform: translateY(-1px)
}

.workflow-node.active::before {
    border-color: var(--orange);
    background: rgba(255, 92, 0, .14)
}

.workflow-node.active::after {
    background: var(--orange);
    box-shadow: 0 0 12px var(--orange)
}

.workflow-node.active strong {
    color: var(--cream)
}

.workflow-node.active .node-kind {
    color: var(--orange)
}

.workflow-node.complete {
    border-color: #34302d;
    background: #141311
}

.workflow-node.complete::after {
    background: #69d989;
    box-shadow: 0 0 9px rgba(105, 217, 137, .5)
}

.workflow-node.complete::before {
    border-color: #376a46
}

.workflow-node.complete .node-kind {
    color: #69d989
}

.merge-connector {
    position: relative;
    z-index: 1;
    width: 52%;
    height: 42px;
    margin: auto;
    border-left: 1px solid #34302d;
    border-right: 1px solid #34302d;
    border-bottom: 1px solid #34302d;
    border-radius: 0 0 8px 8px
}

.merge-connector::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: 22px;
    border-left: 1px solid #34302d
}

.merge-connector>i {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s
}

.merge-connector>i:first-child {
    left: -1px
}

.merge-connector>i:nth-child(2) {
    right: -1px
}

.merge-connector.active>i {
    transform: scaleY(1)
}

.merge-connector b {
    position: absolute;
    z-index: 4;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 14px var(--orange);
    opacity: 0
}

.merge-connector.signal b {
    animation: mergePacket .72s var(--ease) forwards
}

@keyframes mergePacket {
    0% {
        opacity: 1;
        left: -4px;
        top: -4px
    }

    45% {
        opacity: 1;
        left: -4px;
        top: 38px
    }

    75% {
        opacity: 1;
        left: calc(50% - 4px);
        top: 38px
    }

    100% {
        opacity: 0;
        left: calc(50% - 4px);
        top: 58px
    }
}

.workflow-path {
    position: relative;
    z-index: 2;
    padding-top: 22px
}

.workflow-connector {
    position: relative;
    width: 1px;
    height: 18px;
    margin: auto;
    background: #34302d
}

.workflow-connector i {
    display: block;
    width: 1px;
    height: 100%;
    background: var(--orange);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .25s
}

.workflow-connector.active i {
    transform: scaleY(1)
}

.workflow-connector b {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 0 13px var(--orange);
    opacity: 0
}

.workflow-connector.signal b {
    animation: verticalPacket .45s linear forwards
}

@keyframes verticalPacket {
    0% {
        opacity: 1;
        top: -3px
    }

    85% {
        opacity: 1
    }

    100% {
        opacity: 0;
        top: 16px
    }
}

.compact-node {
    padding-top: 10px;
    padding-bottom: 10px
}

.customer-node {
    border-style: dashed
}

.workflow-complete {
    position: absolute;
    z-index: 8;
    left: 50%;
    bottom: 18px;
    transform: translate(-50%, 12px);
    width: min(330px, calc(100% - 36px));
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(105, 217, 137, .35);
    border-radius: 8px;
    background: rgba(10, 18, 12, .96);
    opacity: 0;
    visibility: hidden;
    transition: .35s var(--ease)
}

.workflow-complete.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0)
}

.workflow-complete>span {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #69d989;
    color: #07120a;
    font-weight: 700
}

.workflow-complete small,
.workflow-complete strong {
    display: block
}

.workflow-complete small {
    color: #69d989;
    font: 7px var(--mono)
}

.workflow-complete strong {
    font-size: 10px;
    margin-top: 2px
}

.customer-panel {
    display: block;
    padding: 24px;
    background: radial-gradient(circle at 50% 48%, rgba(255, 92, 0, .045), transparent 63%)
}

.customer-ui-stack {
    position: relative;
    min-height: 630px;
    display: grid;
    place-items: center
}

.customer-placeholder {
    width: min(100%, 310px);
    text-align: center;
    color: #666;
    transition: .3s
}

.customer-placeholder i {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #4a4541;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .02)
}

.customer-placeholder strong,
.customer-placeholder span {
    display: block
}

.customer-placeholder strong {
    font-size: 11px;
    color: #777
}

.customer-placeholder span {
    font-size: 9px;
    margin: 6px auto 0;
    max-width: 230px
}

.customer-panel.show-email .customer-placeholder,
.customer-panel.show-rating .customer-placeholder {
    opacity: 0;
    visibility: hidden
}

.review-demo .email-card,
.review-demo .rating-card {
    position: absolute;
    width: min(100%, 360px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.98);
    pointer-events: none
}

.customer-panel.show-email .email-card {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.customer-panel.show-rating .email-card {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(.98)
}

.customer-panel.show-rating .rating-card {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.email-card.cursor-click .demo-cursor {
    animation: cursorClick .9s forwards
}

.review-demo.playing .demo-cursor {
    animation: none
}

.stars button:focus-visible {
    outline: 2px solid #222;
    outline-offset: 2px
}

.stars button[aria-checked="true"] {
    color: #fbbc04
}

.demo-status {
    height: 60px
}

.demo-status>div {
    display: flex;
    align-items: center;
    gap: 10px
}

.demo-status>div span {
    color: var(--muted)
}

.journey-state {
    margin-left: auto;
    margin-right: 14px;
    color: #706a64 !important
}

.journey-state.complete {
    color: #69d989 !important
}

.replay-workflow {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid #302d2a;
    border-radius: 5px;
    background: #111;
    color: #8d857d;
    font: 500 8px var(--mono)
}

.replay-workflow:hover,
.replay-workflow:focus-visible {
    border-color: var(--orange);
    color: var(--orange)
}

/* SECOND PASS: REAL CALENDAR BOOKING */
.booking-progress {
    gap: 6px
}

.booking-progress button {
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #555;
    font: 500 9px var(--mono);
    transition: .2s
}

.booking-progress button:not(:disabled):hover,
.booking-progress button.active {
    color: var(--orange);
    background: rgba(255, 92, 0, .07);
    border-color: rgba(255, 92, 0, .2)
}

.booking-progress button:disabled {
    cursor: not-allowed;
    opacity: .38
}

.booking-progress button.complete:not(.active) {
    color: #aaa
}

.booking-step[data-booking-step="date"] {
    padding-top: 22px
}

.calendar-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px
}

.calendar-head h4 {
    text-align: center;
    margin: 0;
    font: 500 20px var(--head)
}

.calendar-head button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #111;
    color: var(--muted)
}

.calendar-head button:hover:not(:disabled),
.calendar-head button:focus-visible {
    border-color: var(--orange);
    color: var(--orange)
}

.calendar-head button:disabled {
    opacity: .25;
    cursor: not-allowed
}

.calendar-weekdays,
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr)
}

.calendar-weekdays span {
    padding: 5px 0 8px;
    text-align: center;
    color: #5c5650;
    font: 600 7px var(--mono);
    text-transform: uppercase
}

.calendar-day {
    position: relative;
    min-height: 43px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: transparent;
    color: #5a5550;
    font: 10px var(--mono)
}

.calendar-day:disabled {
    cursor: default
}

.calendar-day.other-month {
    opacity: .2
}

.calendar-day.past {
    opacity: .23
}

.calendar-day.available {
    color: var(--cream);
    background: #141312;
    border-color: #302c29
}

.calendar-day.available::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 3px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: var(--orange)
}

.calendar-day.available:hover,
.calendar-day.available:focus-visible {
    border-color: var(--orange);
    background: rgba(255, 92, 0, .07)
}

.calendar-day.selected {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange);
    box-shadow: 0 0 20px rgba(255, 92, 0, .22)
}

.calendar-day.selected::after {
    background: #fff
}

.calendar-key {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    color: #5f5954;
    font: 7px var(--mono)
}

.calendar-key span {
    display: flex;
    align-items: center;
    gap: 6px
}

.calendar-key i {
    width: 9px;
    height: 9px;
    border: 1px solid #423d38;
    border-radius: 2px;
    background: #141312
}

.calendar-key span:nth-child(2) i {
    border-color: var(--orange);
    background: var(--orange)
}

.booking-step-label {
    display: block;
    color: var(--orange);
    font: 600 8px var(--mono);
    letter-spacing: .1em;
    margin-bottom: 7px
}

.booking-step[data-booking-step="time"] h4 {
    margin-bottom: 19px
}

.continue-booking {
    width: 100%;
    margin-top: 17px
}

.continue-booking:disabled {
    opacity: .35;
    cursor: not-allowed;
    box-shadow: none;
    transform: none
}

.appointment-summary span {
    color: var(--cream);
    font-size: 12px
}

.appointment-summary strong {
    color: var(--orange);
    margin-top: 9px
}

.booking-business,
.booking-service {
    display: block
}

.booking-business {
    margin-top: 10px;
    font: 600 9px var(--mono);
    color: var(--orange);
    letter-spacing: .08em
}

.booking-service {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px
}

.booking-success h4 {
    margin-top: 18px
}

@media(max-width:900px) {
    .review-stage {
        grid-template-columns: 1fr
    }

    .workflow-panel {
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .customer-ui-stack {
        min-height: 470px
    }

    .workflow-canvas {
        min-height: 640px
    }
}

@media(max-width:700px) {
    .review-stage {
        display: block
    }

    .workflow-panel,
    .customer-panel {
        padding: 16px
    }

    .workflow-canvas {
        min-height: 636px;
        padding: 16px 12px
    }

    .trigger-row {
        gap: 8px
    }

    .workflow-node {
        padding-left: 42px
    }

    .trigger-node {
        min-height: 78px;
        padding: 12px 10px 12px 38px
    }

    .trigger-node::before {
        left: 10px
    }

    .trigger-node::after {
        left: 17px
    }

    .trigger-node strong {
        font-size: 9px
    }

    .merge-connector {
        width: 50%
    }

    .customer-ui-stack {
        min-height: 380px
    }

    .demo-status {
        height: auto;
        min-height: 64px;
        padding: 10px 12px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px
    }

    .demo-status>div {
        grid-column: 1/-1
    }

    .journey-state {
        margin: 0
    }

    .replay-workflow {
        min-height: 44px
    }

    .booking-signals {
        flex-wrap: wrap
    }

    .booking-ui {
        padding: 24px 16px
    }

    .booking-progress {
        overflow-x: auto
    }

    .booking-progress button {
        white-space: nowrap;
        min-width: max-content
    }

    .calendar-head h4 {
        font-size: 18px
    }

    .calendar-day {
        min-height: 42px
    }

    .calendar-weekdays span {
        font-size: 6px
    }

    .time-grid button {
        min-height: 52px
    }
}

@media(max-width:360px) {

    .workflow-panel,
    .customer-panel {
        padding: 12px
    }

    .workflow-canvas {
        padding: 14px 8px
    }

    .trigger-node {
        padding-left: 34px
    }

    .trigger-node::before {
        left: 7px
    }

    .trigger-node::after {
        left: 14px
    }

    .workflow-node strong {
        font-size: 9px
    }

    .workflow-node small {
        font-size: 7px
    }

    .calendar-day {
        min-height: 39px
    }

    .booking-progress button {
        padding: 0 9px
    }
}

.service-section::before {
    right: 0
}

.calendar-day {
    min-height: 44px
}

@media(max-width:700px) {
    .calendar-day {
        min-height: 44px
    }
}

@media(max-width:360px) {
    .reel-phone.back {
        transform: translate(16px, 18px) scale(.91)
    }

    .calendar-day {
        min-height: 44px
    }
}

/* PASS 3: COHESIVE MOTION, HIERARCHY, AND MOBILE POLISH */
:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 3px
}

.service-section,
.connect-section {
    scroll-margin-top: 92px
}

.stars button {
    min-width: 44px;
    min-height: 44px
}

.choice-row button {
    min-height: 44px
}

.palette {
    width: 44px;
    height: 44px
}

.reel-controls button {
    width: 44px;
    height: 44px
}

.site-exit {
    min-height: 44px;
    display: flex;
    align-items: center
}

.mobile-text {
    min-height: 44px;
    align-items: center
}

.calendar-day {
    height: 44px
}

.mini-hero button {
    pointer-events: none
}

/* Entrance resolves into the actual RizForge mark and reveals the page beneath. */
body.intro-active .hero {
    opacity: 0;
    transform: translateY(8px)
}

body.intro-active .scan-header {
    opacity: 0;
    transform: translate(-50%, 8px)
}

body.intro-revealed .hero {
    opacity: 1;
    transform: none;
    transition: opacity .55s var(--ease), transform .55s var(--ease)
}

body.intro-revealed .scan-header {
    opacity: 1;
    transform: translateX(-50%);
    transition: opacity .55s var(--ease), transform .55s var(--ease)
}

.connection {
    background: rgba(5, 5, 5, 1)
}

.r-mark {
    width: 56px;
    height: 56px;
    object-fit: contain;
    position: absolute;
    opacity: 0;
    animation: markIn .38s 1.68s forwards;
    filter: drop-shadow(0 0 16px rgba(255, 92, 0, .34))
}

/* Hero activity is sequenced instead of perpetually floating. */
.scan-header,
.hero {
    transition: opacity .4s var(--ease), transform .4s var(--ease)
}

.event {
    opacity: .2;
    filter: saturate(.35);
    transform: translateY(4px) scale(.98);
    animation: none;
    transition: opacity .42s var(--ease), transform .42s var(--ease), filter .42s, border-color .42s, box-shadow .42s
}

.event.is-active {
    opacity: 1;
    filter: none;
    transform: none;
    border-color: rgba(255, 92, 0, .3);
    box-shadow: 0 18px 45px #000, 0 0 28px rgba(255, 92, 0, .1)
}

.event.is-resolved {
    opacity: .42;
    filter: saturate(.55);
    transform: translateY(-2px) scale(.99)
}

.portrait {
    transition: filter .5s var(--ease)
}

.portrait-ring::before {
    animation-play-state: paused
}

.hero.activity-running .portrait-ring::before {
    animation-play-state: running
}

/* Service navigation feels deliberate and remains naturally scrollable. */
.focus-rail {
    position: relative;
    isolation: isolate
}

.focus-rail button {
    position: relative;
    overflow: hidden
}

.focus-rail button::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 8px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: scaleX(0);
    transition: transform .28s var(--ease)
}

.focus-rail button[aria-selected="true"]::after {
    transform: scaleX(1)
}

.focus-rail button[aria-selected="true"] {
    box-shadow: 0 8px 26px rgba(255, 92, 0, .18)
}

.focus-outcome {
    transition: opacity .18s, transform .18s
}

.focus-outcome.is-changing {
    opacity: 0;
    transform: translateY(5px)
}

/* One restrained reveal language, with variation by content role. */
.section-intro.reveal {
    transform: translateY(18px)
}

.section-intro.reveal.visible {
    transform: none
}

.review-demo.reveal,
.site-browser.reveal,
.brand-lab.reveal,
.reel-player.reveal {
    transform: translateY(18px) scale(.992);
    transition-duration: .8s
}

.review-demo.reveal.visible,
.site-browser.reveal.visible,
.brand-lab.reveal.visible,
.reel-player.reveal.visible {
    transform: none
}

.offer-card.reveal {
    transform: translateY(12px);
    transition-delay: .06s
}

.offer-card.reveal.visible {
    transform: none
}

/* Review execution semantics and synchronized customer handoff. */
.workflow-node {
    transition: border-color .32s, background .32s, box-shadow .32s, transform .32s, opacity .22s
}

.workflow-node.active {
    animation: nodeExecute .46s var(--ease)
}

@keyframes nodeExecute {
    0% {
        transform: scale(.985)
    }

    55% {
        transform: scale(1.012)
    }

    100% {
        transform: translateY(-1px)
    }
}

.workflow-node.complete {
    opacity: .84
}

.workflow-connector.signal b {
    animation-timing-function: var(--ease)
}

.customer-panel.show-email {
    box-shadow: inset 1px 0 rgba(255, 92, 0, .18)
}

.customer-panel.show-rating {
    box-shadow: inset 1px 0 rgba(66, 133, 244, .16)
}

.review-demo .email-card,
.review-demo .rating-card {
    transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s
}

.email-card button {
    position: relative;
    min-height: 44px;
    transition: transform .16s, box-shadow .16s
}

.email-card button.click-hit {
    transform: scale(.975);
    box-shadow: 0 0 0 4px rgba(38, 119, 216, .18)
}

.demo-cursor {
    right: 20px;
    bottom: 8px;
    transform: translate(0, 0);
    font-size: 25px
}

.email-card.cursor-click .demo-cursor {
    animation: cursorLand .82s var(--ease) forwards
}

@keyframes cursorLand {
    0% {
        opacity: 0;
        right: 18px;
        bottom: 5px
    }

    18% {
        opacity: 1
    }

    72% {
        opacity: 1;
        right: 145px;
        bottom: 44px;
        transform: scale(1)
    }

    84% {
        opacity: 1;
        right: 145px;
        bottom: 44px;
        transform: scale(.78)
    }

    100% {
        opacity: 0;
        right: 145px;
        bottom: 44px;
        transform: scale(.78)
    }
}

.review-demo.resetting .workflow-node,
.review-demo.resetting .customer-ui-stack,
.review-demo.resetting .workflow-complete {
    opacity: .15;
    transform: scale(.99);
    transition: .16s
}

.workflow-complete.show {
    box-shadow: 0 12px 35px rgba(20, 100, 40, .16)
}

/* Booking reads as one customer flow and one business outcome. */
.booking-progress {
    position: relative;
    padding: 4px;
    border: 1px solid #211f1d;
    border-radius: 8px;
    background: #0d0d0d
}

.booking-progress button {
    position: relative;
    z-index: 1;
    flex: 1;
    background: #0d0d0d
}

.booking-progress button.active {
    background: #18100c
}

.booking-progress button.complete:not(.active)::before {
    content: "✓ ";
    color: #69d989
}

.booking-ui {
    position: relative
}

.booking-ui[data-step="time"]::after,
.booking-ui[data-step="confirm"]::after {
    content: "SELECTED DATE";
    position: absolute;
    right: 38px;
    top: 42px;
    color: #4f4944;
    font: 600 7px var(--mono);
    letter-spacing: .1em
}

.booking-step {
    animation: bookingStateIn .34s var(--ease)
}

@keyframes bookingStateIn {
    from {
        opacity: 0;
        transform: translateX(12px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.calendar-day.available {
    transition: background .2s, border-color .2s, transform .2s, box-shadow .2s
}

.calendar-day.available:hover {
    transform: translateY(-1px)
}

.calendar-day.selected {
    transform: translateY(-1px)
}

.time-grid button {
    position: relative;
    transition: .22s var(--ease)
}

.time-grid button.active {
    box-shadow: inset 3px 0 var(--orange), 0 8px 22px rgba(255, 92, 0, .08);
    transform: translateY(-1px)
}

.appointment-summary {
    position: relative;
    overflow: hidden
}

.appointment-summary::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--orange)
}

.booking-success {
    animation: bookingSuccess .45s var(--ease)
}

@keyframes bookingSuccess {
    from {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.system-notifications span {
    position: relative;
    text-align: left;
    padding-left: 34px
}

.system-notifications span::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #69d989;
    box-shadow: 0 0 9px rgba(105, 217, 137, .55);
    transform: translateY(-50%)
}

/* Brand Lab: the same identity, four meaningfully different systems. */
.brand-lab {
    --lab-accent2: #ffad85;
    --lab-surface: color-mix(in srgb, var(--lab-accent) 7%, var(--lab-bg));
    transition: opacity .18s, filter .18s
}

.brand-lab[data-palette="cobalt"] {
    --lab-accent2: #83b4ff
}

.brand-lab[data-palette="forest"] {
    --lab-accent2: #d0e7a9
}

.brand-lab[data-palette="wine"] {
    --lab-accent2: #f2a0af
}

.brand-lab.is-recalibrating .brand-apps {
    opacity: .6;
    filter: saturate(.45);
    transform: scale(.995)
}

.brand-apps {
    transition: opacity .2s, filter .2s, transform .38s var(--ease), background .4s
}

.brand-canvas,
.brand-canvas * {
    transition: background-color .42s, border-color .42s, color .42s, border-radius .42s, transform .42s var(--ease), padding .42s, letter-spacing .42s, box-shadow .42s, opacity .25s
}

.perception strong,
.perception span {
    transition: opacity .18s, transform .18s
}

.brand-lab.is-recalibrating .perception strong,
.brand-lab.is-recalibrating .perception span {
    opacity: 0;
    transform: translateY(4px)
}

.brand-apps::before {
    content: "SYSTEM / 04";
    position: absolute;
    right: 18px;
    top: 18px;
    color: color-mix(in srgb, var(--lab-accent) 62%, transparent);
    font: 7px var(--mono);
    letter-spacing: .12em;
    z-index: 4
}

.brand-desktop {
    overflow: hidden
}

.brand-desktop::after {
    content: "";
    position: absolute;
    right: 30px;
    top: 80px;
    width: 27%;
    height: 45%;
    border: 1px solid color-mix(in srgb, var(--lab-accent) 25%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--lab-accent) 18%, transparent), transparent)
}

.business-card::after {
    content: "RF / IDENTITY";
    position: absolute;
    right: 18px;
    top: 15px;
    color: var(--lab-accent);
    font: 6px var(--mono);
    letter-spacing: .1em
}

/* Established: editorial balance, whitespace, restrained accents. */
.brand-lab[data-direction="established"] .brand-canvas {
    border-radius: 2px;
    border-color: color-mix(in srgb, var(--lab-accent) 18%, #777)
}

.brand-lab[data-direction="established"] .brand-desktop {
    padding: 28px;
    background: color-mix(in srgb, var(--lab-bg) 94%, #eee)
}

.brand-lab[data-direction="established"] .mini-nav {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--lab-ink) 16%, transparent);
    padding-bottom: 14px
}

.brand-lab[data-direction="established"] .mini-nav i {
    background: transparent;
    border: 1px solid var(--lab-accent);
    color: var(--lab-accent)
}

.brand-lab[data-direction="established"] .mini-hero {
    padding: 62px 8% 30px;
    max-width: 68%;
    text-align: center;
    margin: auto
}

.brand-lab[data-direction="established"] .mini-hero strong,
.brand-lab[data-direction="established"] .social-post>b {
    font-family: Georgia, serif;
    font-weight: 400;
    letter-spacing: -.02em
}

.brand-lab[data-direction="established"] .mini-hero button {
    background: transparent;
    color: var(--lab-ink);
    border: 1px solid var(--lab-accent);
    padding-inline: 16px
}

.brand-lab[data-direction="established"] .mini-grid {
    gap: 14px
}

.brand-lab[data-direction="established"] .mini-grid i {
    background: transparent
}

.brand-lab[data-direction="established"] .brand-phone {
    border-radius: 20px
}

.brand-lab[data-direction="established"] .social-post {
    justify-content: center;
    text-align: center;
    background: var(--lab-surface)
}

.brand-lab[data-direction="established"] .business-card {
    justify-content: center;
    text-align: center;
    gap: 17px
}

.brand-lab[data-direction="established"] .card-mark {
    background: transparent
}

/* Bold: block structure, asymmetry, oversized type, more accent. */
.brand-lab[data-direction="bold"] .brand-canvas {
    border-radius: 0;
    border-width: 2px
}

.brand-lab[data-direction="bold"] .brand-desktop {
    background: linear-gradient(105deg, var(--lab-accent) 0 34%, var(--lab-bg) 34%)
}

.brand-lab[data-direction="bold"] .mini-nav b {
    background: var(--lab-bg);
    padding: 5px 8px
}

.brand-lab[data-direction="bold"] .mini-hero {
    padding: 48px 0 10px;
    margin-left: 38%;
    max-width: 60%
}

.brand-lab[data-direction="bold"] .mini-hero strong,
.brand-lab[data-direction="bold"] .social-post>b {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -.065em
}

.brand-lab[data-direction="bold"] .mini-hero strong {
    font-size: 38px
}

.brand-lab[data-direction="bold"] .mini-hero button {
    border-radius: 0;
    padding: 10px 16px
}

.brand-lab[data-direction="bold"] .mini-grid {
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: 4px
}

.brand-lab[data-direction="bold"] .social-post {
    background: linear-gradient(160deg, var(--lab-accent) 0 48%, var(--lab-bg) 48%);
    align-items: flex-start
}

.brand-lab[data-direction="bold"] .business-card {
    background: linear-gradient(90deg, var(--lab-accent) 0 28%, var(--lab-bg) 28%);
    transform: rotate(2deg)
}

.brand-lab[data-direction="bold"] .card-mark {
    border-color: var(--lab-bg);
    color: var(--lab-bg)
}

/* Heritage: framed, warm, crafted, lightly textured. */
.brand-lab[data-direction="heritage"] .brand-canvas {
    border-radius: 2px;
    background-color: color-mix(in srgb, var(--lab-bg) 72%, #4b321d);
    background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 4px);
    border-style: double;
    border-width: 3px
}

.brand-lab[data-direction="heritage"] .brand-desktop {
    padding: 27px
}

.brand-lab[data-direction="heritage"] .mini-nav {
    border-bottom: 3px double color-mix(in srgb, var(--lab-accent) 38%, transparent);
    padding-bottom: 12px
}

.brand-lab[data-direction="heritage"] .mini-hero {
    padding: 55px 20px 20px
}

.brand-lab[data-direction="heritage"] .mini-hero::before {
    content: "◆";
    display: block;
    color: var(--lab-accent);
    font-size: 9px;
    margin-bottom: 10px
}

.brand-lab[data-direction="heritage"] .mini-hero strong,
.brand-lab[data-direction="heritage"] .social-post>b {
    font-family: Georgia, serif;
    letter-spacing: .01em
}

.brand-lab[data-direction="heritage"] .mini-hero button {
    background: transparent;
    color: var(--lab-accent);
    border-bottom: 1px solid var(--lab-accent);
    border-radius: 0
}

.brand-lab[data-direction="heritage"] .social-post {
    outline: 1px solid color-mix(in srgb, var(--lab-accent) 38%, transparent);
    outline-offset: -10px
}

.brand-lab[data-direction="heritage"] .business-card {
    outline: 1px solid color-mix(in srgb, var(--lab-accent) 45%, transparent);
    outline-offset: -10px
}

.brand-lab[data-direction="heritage"] .card-mark {
    border-style: double;
    border-width: 4px
}

/* Future: technical grid, system labels, controlled glow. */
.brand-lab[data-direction="future"] .brand-canvas {
    border-radius: 10px;
    background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 18px 18px
}

.brand-lab[data-direction="future"] .brand-desktop {
    box-shadow: 0 24px 50px #000, 0 0 35px color-mix(in srgb, var(--lab-accent) 12%, transparent)
}

.brand-lab[data-direction="future"] .mini-nav,
.brand-lab[data-direction="future"] .mini-hero small,
.brand-lab[data-direction="future"] .business-card span {
    font-family: var(--mono);
    letter-spacing: .1em
}

.brand-lab[data-direction="future"] .mini-hero {
    border-left: 1px solid var(--lab-accent);
    padding-left: 22px
}

.brand-lab[data-direction="future"] .mini-hero button {
    box-shadow: 0 0 18px color-mix(in srgb, var(--lab-accent) 28%, transparent)
}

.brand-lab[data-direction="future"] .social-post {
    background: linear-gradient(145deg, color-mix(in srgb, var(--lab-accent) 16%, var(--lab-bg)), var(--lab-bg));
    border-style: dashed
}

.brand-lab[data-direction="future"] .card-mark {
    box-shadow: 0 0 20px color-mix(in srgb, var(--lab-accent) 25%, transparent)
}

/* Consistent handoff cards, proof transition, and survey states. */
.offer-card {
    position: relative;
    overflow: hidden
}

.offer-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(var(--orange), transparent)
}

.offer-actions .button {
    width: 100%
}

.offer-actions .text-link {
    min-height: 32px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.proof-section {
    background: linear-gradient(180deg, #090909, #070707)
}

.proof-card {
    position: relative
}

.proof-card::after {
    content: "VIEW WORK ↗";
    position: absolute;
    right: 12px;
    top: 12px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(8, 8, 8, .78);
    color: #d4cec6;
    font: 7px var(--mono);
    opacity: 0;
    transform: translateY(4px);
    transition: .25s
}

.proof-card:hover::after,
.proof-card:focus-visible::after {
    opacity: 1;
    transform: none
}

.survey.from-service {
    animation: surveyHandoff .55s var(--ease)
}

@keyframes surveyHandoff {
    0% {
        box-shadow: 0 0 0 rgba(255, 92, 0, 0)
    }

    45% {
        box-shadow: 0 0 0 2px rgba(255, 92, 0, .4), 0 0 42px rgba(255, 92, 0, .12)
    }

    100% {
        box-shadow: none
    }
}

.form-step.active {
    animation: surveyForward .32s var(--ease)
}

.survey.step-back .form-step.active {
    animation-name: surveyBack
}

@keyframes surveyForward {
    from {
        opacity: 0;
        transform: translateX(14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes surveyBack {
    from {
        opacity: 0;
        transform: translateX(-14px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.field-error:not(:empty) {
    padding-left: 10px;
    border-left: 2px solid #ff7a69
}

.interest-options input:checked+span {
    box-shadow: inset 3px 0 var(--orange)
}

@media(max-width:700px) {
    button {
        min-height: 45px
    }

    @keyframes introResolve {
        0% {
            transform: scale(1.08);
            opacity: 1
        }

        32% {
            transform: scale(1.18)
        }

        100% {
            transform: translate(calc(-50vw + 56px), calc(-50vh + 44px)) scale(.34);
            opacity: 0
        }
    }

    .focus-wrap {
        position: relative
    }

    .focus-wrap::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 43px;
        width: 42px;
        height: 72px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, #0d0c0b)
    }

    .focus-rail {
        padding-right: 35px;
        scroll-padding-inline: 12px
    }

    .focus-rail button {
        min-height: 64px
    }

    .portrait-wrap {
        height: 54%;
        bottom: -10px
    }

    .event {
        min-width: 150px
    }

    .customer-panel.show-email,
    .customer-panel.show-rating {
        box-shadow: inset 0 1px rgba(255, 92, 0, .15)
    }

    .booking-ui[data-step="time"]::after,
    .booking-ui[data-step="confirm"]::after {
        display: none
    }

    .offer-actions,
    .offer-actions .button {
        width: 100%
    }

    .offer-actions .text-link {
        min-height: 44px
    }

    .offer-card li {
        line-height: 1.6
    }

    .proof-card::after {
        opacity: 1;
        transform: none
    }

    .footer-inner nav a {
        min-height: 44px;
        display: flex;
        align-items: center
    }
}

@media(max-width:430px) {
    .brand-apps {
        min-height: 610px;
        padding: 18px;
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: minmax(255px, auto) minmax(210px, auto);
        gap: 14px 10px;
        align-items: start
    }

    .brand-apps::before {
        top: 9px;
        right: 12px
    }

    .brand-desktop {
        position: relative;
        grid-column: 1/-1;
        width: 100%;
        height: auto;
        min-height: 255px
    }

    .brand-phone {
        position: relative;
        grid-column: 1;
        width: 96px;
        height: 192px;
        right: auto;
        top: auto;
        border-width: 4px;
        border-radius: 18px
    }

    .business-card {
        position: relative;
        grid-column: 2;
        width: 100%;
        height: 118px;
        right: auto;
        bottom: auto;
        align-self: center;
        padding: 12px;
        gap: 9px;
        transform: rotate(-2deg)
    }

    .card-mark {
        width: 38px;
        height: 38px;
        font-size: 19px;
        flex: 0 0 auto
    }

    .business-card strong {
        font-size: 9px
    }

    .business-card span {
        margin: 3px 0 12px;
        font-size: 5px
    }

    .business-card small {
        font-size: 6px
    }

    .mini-hero {
        padding-top: 44px
    }

    .mini-hero strong {
        font-size: 22px
    }

    .brand-lab[data-direction="bold"] .mini-hero {
        margin-left: 25%;
        max-width: 74%;
        padding-top: 36px
    }

    .brand-lab[data-direction="bold"] .mini-hero strong {
        font-size: 25px
    }

    .social-post {
        height: 127px;
        padding: 10px
    }

    .social-post>b {
        font-size: 18px
    }

    .social-meta {
        padding: 7px
    }

    .phone-top {
        height: 22px
    }

    .brand-close {
        margin-top: 28px
    }
}

@media(max-width:360px) {
    .hero-copy>p {
        max-width: 288px
    }

    .brand-apps {
        grid-template-columns: 86px minmax(0, 1fr);
        padding: 12px;
        gap: 10px 7px
    }

    .brand-phone {
        width: 86px
    }

    .business-card {
        padding: 9px
    }

    .business-card::after {
        display: none
    }

    .mini-nav>span {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    body.intro-active .hero {
        opacity: 1;
        transform: none
    }

    body.intro-active .scan-header {
        opacity: 1;
        transform: translateX(-50%)
    }

    .connection.finalizing .scan-orb {
        animation: none
    }

    .event {
        opacity: .4;
        transform: none
    }

    .event:first-of-type {
        opacity: 1
    }

    .brand-lab.is-recalibrating .brand-apps {
        opacity: 1;
        filter: none;
        transform: none
    }
}

/* PASS 4: TARGETED FINAL POLISH */
/* Entrance: exact inline mark trace followed by an expanding radial reveal. */
@property --reveal-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px
}

.connection {
    background: transparent;
    isolation: isolate;
    transition: opacity .24s var(--ease), visibility .24s
}

.hero-reveal {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: #050505;
    --reveal-radius: 0px;
    -webkit-mask: radial-gradient(circle at center, transparent 0 var(--reveal-radius), #000 calc(var(--reveal-radius) + 2px));
    mask: radial-gradient(circle at center, transparent 0 var(--reveal-radius), #000 calc(var(--reveal-radius) + 2px))
}

.connection-inner {
    position: relative;
    z-index: 2
}

.scan-orb {
    width: 126px;
    height: 126px;
    margin-bottom: 32px;
    overflow: visible;
    animation: introOrbWake 2.65s var(--ease) both
}

.qr-glyph {
    width: 58px;
    height: 58px;
    color: var(--orange);
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 92, 0, .34));
    animation: minimalQrResolve .6s .04s var(--ease) forwards
}

.scan-line {
    top: 34px;
    width: 70px;
    animation: introScanLine .5s .6s var(--ease) both
}

.terminal {
    min-height: 160px
}

.signal {
    animation: lineIn .18s .9s var(--ease) forwards
}

.handshake {
    animation: lineIn .18s 1.2s var(--ease) forwards
}

.online-list p:nth-child(1) {
    animation: lineIn .16s 1.45s var(--ease) forwards
}

.online-list p:nth-child(2) {
    animation: lineIn .16s 1.7s var(--ease) forwards
}

.online-list p:nth-child(3) {
    animation: lineIn .16s 1.95s var(--ease) forwards
}

.online-list p:nth-child(4) {
    animation: lineIn .16s 2.2s var(--ease) forwards
}

.established {
    animation: lineIn .18s 2.45s var(--ease) forwards !important
}

.r-mark {
    display: block;
    width: 86px;
    height: 86px;
    opacity: 0;
    animation: none;
    filter: drop-shadow(0 0 0 rgba(255, 92, 0, 0));
    overflow: visible
}

.r-mark path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill-opacity: 0
}

.r-mark .mark-base {
    stroke: #fff;
    stroke-width: 14;
    fill: #fff
}

.r-mark .mark-ink {
    stroke: #ff6b35;
    stroke-width: 11;
    fill: url(#intro-mark-gradient)
}

.connection.tracing .qr-glyph,
.connection.tracing .scan-line {
    opacity: 0;
    animation: none;
    transition: opacity .38s var(--ease)
}

.connection.tracing .scan-orb {
    animation: none;
    border-color: transparent;
    box-shadow: none;
    transition: border-color .5s var(--ease), box-shadow .5s var(--ease)
}

.connection.tracing .terminal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s
}

.connection.tracing .r-mark {
    opacity: 1;
    animation: markGlow 1.8s var(--ease) forwards
}

.connection.tracing .mark-base {
    animation: traceBase 1.1s var(--ease) forwards
}

.connection.tracing .mark-ink {
    animation: traceInk 1.2s .1s var(--ease) forwards
}

.connection.revealing .hero-reveal {
    animation: openHero .66s var(--ease) forwards
}

.connection.revealing .connection-inner {
    animation: markHandoff .6s var(--ease) forwards
}

.connection.revealing .scan-orb::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(255, 92, 0, .7);
    border-radius: 50%;
    animation: expandingSignal .66s var(--ease) forwards
}

.connection.revealing .scan-orb {
    border-color: transparent;
    box-shadow: none
}

.connection.done {
    opacity: 0
}

.connection.done .hero-reveal {
    display: none
}

@keyframes introOrbWake {
    0% {
        opacity: .2;
        transform: scale(.88);
        border-color: #292725;
        box-shadow: none
    }

    28%,
    82% {
        opacity: 1;
        transform: none;
        border-color: rgba(255, 92, 0, .78);
        box-shadow: 0 0 45px rgba(255, 92, 0, .2)
    }

    100% {
        opacity: 1;
        transform: none;
        border-color: rgba(255, 92, 0, .7);
        box-shadow: 0 0 55px rgba(255, 92, 0, .24)
    }
}

@keyframes minimalQrResolve {
    from {
        opacity: 0;
        transform: scale(.82)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes introScanLine {
    0% {
        opacity: 0;
        transform: translateY(0)
    }

    12%,
    88% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(58px)
    }
}

@keyframes traceBase {
    0% {
        stroke-dashoffset: 1;
        fill-opacity: 0
    }

    62% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@keyframes traceInk {
    0% {
        stroke-dashoffset: 1;
        fill-opacity: 0
    }

    64% {
        stroke-dashoffset: 0;
        fill-opacity: 0
    }

    100% {
        stroke-dashoffset: 0;
        fill-opacity: 1
    }
}

@keyframes markGlow {

    0%,
    60% {
        filter: drop-shadow(0 0 0 rgba(255, 107, 53, 0))
    }

    100% {
        filter: drop-shadow(0 0 22px rgba(255, 107, 53, .55))
    }
}

@keyframes openHero {
    from {
        --reveal-radius: 0px
    }

    to {
        --reveal-radius: 150vmax
    }
}

@keyframes markHandoff {

    0%,
    25% {
        opacity: 1;
        transform: none
    }

    100% {
        opacity: 0;
        transform: scale(1.1)
    }
}

@keyframes expandingSignal {
    0% {
        opacity: .8;
        transform: scale(1);
        box-shadow: 0 0 28px rgba(255, 92, 0, .36)
    }

    100% {
        opacity: 0;
        transform: scale(18);
        box-shadow: none
    }
}

/* Header and intentional exits retain the same purpose at every size. */
.mobile-text {
    display: none !important
}

.website-intro {
    max-width: 820px
}

.website-intro p {
    max-width: 600px;
    color: var(--muted);
    font-size: 16px
}

.survey-nav[hidden],
.survey-top[hidden],
.dev-note[hidden] {
    display: none !important
}

/* One fully readable hero signal at a time, each in its own spot around the portrait. */
.event,
.event.is-resolved {
    display: grid !important;
    opacity: 0;
    visibility: hidden;
    filter: none;
    transform: translateY(12px) scale(.98);
    pointer-events: none
}

.event.is-active {
    opacity: 1;
    visibility: visible;
    transform: none
}

.focus-rail button:hover {
    background: rgba(255, 92, 0, .15);
    color: var(--cream);
    border-radius: 7px
}

.focus-rail button[aria-selected="true"],
.focus-rail button[aria-selected="true"]:hover {
    background: var(--orange);
    color: #fff
}

/* Customer handoff: email remains, a connector draws, then review appears. */
.customer-ui-stack {
    display: block
}

.review-demo .customer-connector {
    position: absolute;
    left: 50%;
    top: 306px;
    width: 24px;
    height: 78px;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    color: var(--orange);
    text-align: center
}

.customer-connector i {
    display: block;
    height: 58px;
    margin: 0 auto 3px;
    border-left: 2px dashed rgba(255, 92, 0, .72);
    transform: scaleY(0);
    transform-origin: top
}

.customer-connector span {
    font: 15px var(--mono)
}

.customer-panel.show-email .email-card {
    top: 96px;
    left: 50%;
    transform: translateX(-50%)
}

.customer-panel.show-rating .email-card {
    top: 28px;
    left: 50%;
    opacity: .45;
    visibility: visible;
    transform: translateX(-50%) scale(.86);
    pointer-events: none
}

.customer-panel.show-rating .customer-connector {
    opacity: 1;
    visibility: visible
}

.customer-panel.show-rating .customer-connector i {
    animation: drawCustomerConnector .48s var(--ease) forwards
}

.customer-panel.show-rating .rating-card {
    left: 50%;
    top: auto;
    bottom: 26px;
    width: min(100%, 380px);
    padding: 30px 28px;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%);
    pointer-events: auto
}

.rating-card .stars {
    gap: 6px;
    margin: 16px 0 14px
}

.rating-card .stars button {
    font-size: 22px;
    min-width: 34px;
    min-height: 34px
}

.rating-card p {
    margin-bottom: 16px
}

.rating-card>small {
    display: block;
    max-width: 100%
}

@keyframes drawCustomerConnector {
    to {
        transform: scaleY(1)
    }
}

/* Brand Lab remains a full application set on narrow screens. */
@media(max-width:430px) {
    .scan-header {
        padding: 9px 10px 9px 13px
    }

    .brand img {
        width: 100px
    }

    .site-exit {
        font-size: 9px;
        white-space: nowrap
    }

    .header-actions {
        gap: 8px
    }

    .hero {
        min-height: 940px;
        padding-top: 100px
    }

    .hero-copy {
        padding-top: 30px
    }

    .hero-copy .button {
        margin-bottom: 42px
    }

    .portrait-wrap {
        height: 44%;
        min-height: 0;
        bottom: 8px
    }

    .event,
    .event-one,
    .event-two,
    .event-three,
    .event-four {
        top: auto;
        right: auto;
        bottom: 8%;
        left: 50%;
        min-width: min(230px, calc(100vw - 44px));
        transform: translate(-50%, 12px) scale(.98)
    }

    .event.is-active,
    .event-one.is-active {
        transform: translateX(-50%)
    }

    .brand-apps {
        min-height: 630px;
        padding: 16px;
        grid-template-columns: clamp(94px, 29vw, 112px) minmax(0, 1fr);
        grid-template-rows: minmax(275px, auto) minmax(230px, auto);
        gap: 16px 10px
    }

    .brand-desktop {
        height: auto;
        min-height: 275px;
        padding: 16px
    }

    .brand-phone {
        width: clamp(94px, 29vw, 112px);
        height: 218px
    }

    .business-card {
        height: 128px;
        padding: 12px;
        gap: 10px
    }

    .business-card strong {
        font-size: clamp(8px, 2.4vw, 10px)
    }

    .business-card span {
        margin: 4px 0 14px
    }

    .card-mark {
        width: 40px;
        height: 40px
    }

    .mini-hero {
        padding: 48px 8px 8px;
        max-width: 82%
    }

    .mini-hero strong {
        font-size: 22px
    }

    .brand-lab[data-direction="bold"] .mini-hero {
        margin-left: 22%;
        max-width: 78%;
        padding-top: 38px
    }

    .brand-lab[data-direction="bold"] .mini-hero strong {
        font-size: 24px
    }

    .brand-lab[data-direction="heritage"] .mini-hero {
        padding: 45px 10px 10px
    }

    .brand-lab[data-direction="future"] .mini-hero {
        padding-left: 14px
    }

    .social-post {
        height: 146px
    }

    .social-post>b {
        font-size: 20px
    }

    .customer-ui-stack {
        min-height: 640px
    }

    .customer-panel.show-email .email-card {
        top: 100px
    }

    .customer-panel.show-rating .email-card {
        top: 25px
    }

    .review-demo .customer-connector {
        top: 300px
    }

    .customer-panel.show-rating .rating-card {
        bottom: 24px;
        padding: 27px 18px
    }

    .rating-card .stars {
        gap: 5px
    }
}

@media(max-width:360px) {
    .brand img {
        width: 88px
    }

    .site-exit {
        font-size: 8px
    }

    .hero {
        min-height: 920px
    }

    .hero-copy .button {
        margin-bottom: 48px
    }

    .portrait-wrap {
        height: 44%
    }

    .reel-phone.back {
        transform: translate(2px, 18px) scale(.91)
    }

    .brand-apps {
        grid-template-columns: 92px minmax(0, 1fr);
        padding: 12px;
        gap: 14px 7px
    }

    .brand-phone {
        width: 92px
    }

    .business-card {
        padding: 9px;
        gap: 7px
    }

    .card-mark {
        width: 34px;
        height: 34px;
        font-size: 17px
    }

    .business-card::after {
        display: none
    }

    .mini-nav>span {
        display: none
    }
}

/* Physical reel exchange: transform and stacking only, never transparency. */
.reel-phone.back {
    opacity: 1;
    filter: brightness(.68)
}

.reel-player.is-switching .reel-phone.front {
    animation: reelToBack .52s var(--ease)
}

.reel-player.is-switching .reel-phone.back {
    animation: reelToFront .52s var(--ease)
}

@keyframes reelToBack {
    0% {
        z-index: 3;
        transform: none;
        filter: brightness(1)
    }

    50% {
        z-index: 1
    }

    100% {
        z-index: 1;
        transform: translate(35px, 25px) scale(.91);
        filter: brightness(.68)
    }
}

@keyframes reelToFront {
    0% {
        z-index: 2;
        transform: translate(35px, 25px) scale(.91);
        filter: brightness(.68)
    }

    50% {
        z-index: 4
    }

    100% {
        z-index: 4;
        transform: none;
        filter: brightness(1)
    }
}

/* Native multi-select inputs with explicit custom checkbox state. */
.interest-options label {
    position: relative;
    cursor: pointer
}

.interest-options span {
    gap: 12px
}

.interest-options span::before {
    content: "";
    display: grid;
    place-items: center;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid #49433e;
    border-radius: 4px;
    background: #111;
    color: #fff;
    font: 700 13px/1 var(--mono)
}

.interest-options input:checked+span::before {
    content: "✓";
    background: var(--orange);
    border-color: var(--orange)
}

.interest-options input:checked+span {
    box-shadow: inset 3px 0 var(--orange)
}

@media(hover:hover) {
    .focus-rail button:not([aria-selected="true"]):hover {
        background: rgba(255, 92, 0, .15);
        color: var(--cream)
    }
}

@media(prefers-reduced-motion:reduce) {
    .connection {
        display: none
    }

    .event,
    .event.is-active {
        opacity: 0;
        visibility: hidden;
        transform: none
    }

    .event:first-of-type {
        opacity: 1;
        visibility: visible
    }

    .customer-panel.show-rating .customer-connector i {
        animation: none;
        transform: scaleY(1)
    }
}