/* ==========================================================================
   UmanMedia AI-agent phone
   A 3D iPhone sits in the hero's visual column, then docks to the side and
   follows the page. Each section plays a scripted chat with the AI agent;
   a Three.js particle field around the phone morphs per section.
   Driven by scroll-experience.js (GSAP + ScrollTrigger + Three.js).
   ========================================================================== */

:root {
    --agent-purple: #7c3aed;
    --agent-pink: #db2777;
    --agent-cyan: #06b6d4;
    --agent-gutter: 0px;
}

/* ---------- Hero slot + dock ---------- */
.agent-slot {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
}

.agent-dock {
    position: relative;
    width: 100%;
    min-height: 620px;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 2;
}

.agent-dock.is-docked {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    min-height: 0;
    z-index: 40;
}

.agent-three {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 760px;
    height: 860px;
    max-width: 100vw;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.agent-dock.is-docked .agent-three { height: 100vh; }

/* Sections leave room for the docked phone */
body.agent-gutter main > section[data-agent-step]:not(#services) {
    padding-inline-start: 3vw;
    padding-inline-end: calc(var(--agent-gutter) + 1.5rem);
}

/* ---------- Phone ---------- */
.agent-phone {
    --pw: min(290px, calc((100vh - 150px) / 2.06));
    position: relative;
    width: var(--pw);
    height: calc(var(--pw) * 2.06);
    font-size: calc(var(--pw) / 32);
    transform-style: preserve-3d;
    perspective: 1400px;
}

.agent-slot .agent-phone { --pw: min(290px, 74vw); }

.ap-glow {
    position: absolute;
    inset: 8% -6% -4%;
    border-radius: 30%;
    background: radial-gradient(closest-side, rgba(124, 58, 237, .55), rgba(219, 39, 119, .2), transparent);
    filter: blur(30px);
    transform: translateZ(-40px);
}

.ap-float,
.ap-body {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.ap-front,
.ap-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Back: frosted purple glass + camera module */
.ap-back {
    position: absolute;
    inset: 0;
    border-radius: 16.5% / 8%;
    transform: rotateY(180deg);
    background:
        radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .38), transparent 55%),
        linear-gradient(160deg, #d8b4fe 0%, #a855f7 42%, #7c3aed 70%, #db2777 100%);
    box-shadow: inset 0 0 0 .32em #cfcfd6, inset 0 0 0 .38em rgba(0, 0, 0, .25), 0 3em 5em rgba(4, 3, 20, .45);
}

.ap-cam {
    position: absolute;
    top: 1.6em;
    left: 1.6em;
    width: 11.5em;
    height: 11.5em;
    border-radius: 3.2em;
    background: linear-gradient(145deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .12));
    box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .5), 0 .4em 1em rgba(0, 0, 0, .25);
}

.ap-lens {
    position: absolute;
    width: 4.6em;
    height: 4.6em;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #5c6c96 0 9%, #0b0d14 26%, #1b1d24 52%, #8c8c92 57%, #2c2c30 66%, #b9b9be 100%);
    box-shadow: 0 .2em .5em rgba(0, 0, 0, .45);
}

.ap-lens.a { top: .9em; left: .9em; }
.ap-lens.b { top: 6em; left: .9em; }
.ap-lens.c { top: 3.45em; left: 6em; }

.ap-flash {
    position: absolute;
    top: 1.4em;
    right: 1.5em;
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    background: radial-gradient(circle, #fff7e0, #d8c9a0);
}

.ap-back-logo {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    text-align: center;
    font-family: Inter, system-ui, sans-serif;
    font-size: 2.4em;
    font-weight: 800;
    letter-spacing: -.03em;
    color: rgba(255, 255, 255, .8);
}

.ap-back-logo span { color: #fff; }

.ap-front {
    position: absolute;
    inset: 0;
    border-radius: 16.5% / 8%;
    background: linear-gradient(145deg, #e4e4ea 0%, #7d7d86 16%, #f1f1f5 32%, #5b5b63 52%, #d4d4da 72%, #6b6b73 100%);
    box-shadow:
        inset 0 0 0 .06em rgba(255, 255, 255, .55),
        0 3em 5em rgba(4, 3, 20, .55),
        0 1em 2em rgba(4, 3, 20, .35);
}

.ap-btn {
    position: absolute;
    width: .4em;
    border-radius: .3em;
    background: linear-gradient(90deg, #6f6f75, #e6e6ea 50%, #77777d);
}

.ap-btn--action { left: -.32em; top: 7.6em; height: 2.8em; }
.ap-btn--up { left: -.32em; top: 12em; height: 5em; }
.ap-btn--down { left: -.32em; top: 18em; height: 5em; }
.ap-btn--power { right: -.32em; top: 13em; height: 8em; }

.ap-bezel {
    position: absolute;
    inset: .32em;
    border-radius: 15.5% / 7.5%;
    background: #050505;
}

.ap-screen {
    position: absolute;
    inset: .55em;
    border-radius: 13.5% / 6.6%;
    overflow: hidden;
    color: #fff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 85% 0%, rgba(124, 58, 237, .5), transparent 42%),
        radial-gradient(circle at 0% 100%, rgba(6, 182, 212, .22), transparent 40%),
        #0a0a16;
}

.ap-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, 0) 42%);
}

.ap-island {
    position: absolute;
    top: .85em;
    left: 50%;
    transform: translateX(-50%);
    width: 9em;
    height: 2.65em;
    border-radius: 2em;
    background: #000;
    z-index: 8;
}

.ap-island::after {
    content: "";
    position: absolute;
    right: .8em;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #34405e 0 20%, #0a0c12 55%);
}

.ap-status {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4.4em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.6em 0 3em;
    font-weight: 600;
    font-size: 1em;
    z-index: 7;
}

.ap-status > span:first-child { font-size: 1.5em; }
.ap-icons { display: flex; gap: .5em; align-items: center; }
.ap-icons svg { height: 1.2em; width: auto; fill: #fff; }

.ap-head {
    position: absolute;
    top: 4.6em;
    left: 1.3em;
    right: 1.3em;
    display: flex;
    align-items: center;
    gap: 1em;
    padding-bottom: 1.1em;
    border-bottom: .08em solid rgba(255, 255, 255, .1);
}

.ap-head b { display: block; font-size: 1.45em; }
.ap-head small { display: flex; align-items: center; gap: .4em; font-size: 1.05em; color: #4ade80; }
.ap-head small::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: #4ade80; }
.ap-head > div { flex: 1; min-width: 0; }
.ap-head__dots { width: 1.6em; height: .35em; background: radial-gradient(circle, rgba(255, 255, 255, .6) 45%, transparent 50%) 0 0 / .55em .35em repeat-x; }

.ap-avatar {
    flex: none;
    width: 3.8em;
    height: 3.8em;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 .18em rgba(168, 85, 247, .55), 0 0 1.8em rgba(168, 85, 247, .65);
}

.ap-avatar video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Chat ---------- */
.ap-chat {
    position: absolute;
    top: 10.6em;
    left: 1.3em;
    right: 1.3em;
    bottom: 7.4em;
}

.ap-step {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .8em;
    visibility: hidden;
}

.ap-step[data-step="0"] { visibility: visible; }

.ap-msg {
    max-width: 86%;
    padding: .85em 1.15em;
    border-radius: 1.4em;
    font-size: 1.28em;
    line-height: 1.35;
}

.ap-msg--user {
    align-self: flex-end;
    color: #fff;
    background: linear-gradient(135deg, var(--agent-purple), var(--agent-pink));
    border-end-end-radius: .35em;
    opacity: 0;
}

.ap-msg--ai {
    align-self: flex-start;
    background: #1c1c2b;
    border: .08em solid rgba(255, 255, 255, .06);
    border-end-start-radius: .35em;
}

.ap-dots {
    align-self: flex-start;
    display: flex;
    gap: .35em;
    padding: 1em 1.2em;
    border-radius: 1.4em;
    background: #1c1c2b;
    opacity: 0;
    height: 0;
    padding-block: 0;
    overflow: hidden;
}

.ap-dots i {
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: #c4b5fd;
    animation: ap-dot 1s ease-in-out infinite;
}

.ap-dots i:nth-child(2) { animation-delay: .15s; }
.ap-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes ap-dot {
    0%, 100% { transform: translateY(0); opacity: .45; }
    50% { transform: translateY(-.35em); opacity: 1; }
}

.ap-reply {
    display: flex;
    flex-direction: column;
    gap: .8em;
    opacity: 0;
}

.ap-step[data-step="0"] .ap-reply { opacity: 1; }

.ap-chips { display: flex; flex-wrap: wrap; gap: .5em; }

.ap-chips span {
    padding: .55em 1em;
    border-radius: 2em;
    font-size: 1.1em;
    color: #e9d5ff;
    background: rgba(168, 85, 247, .14);
    border: .08em solid rgba(168, 85, 247, .45);
}

.ap-chips--caps span { color: #cffafe; background: rgba(6, 182, 212, .12); border-color: rgba(6, 182, 212, .4); }

.ap-list { display: grid; gap: .55em; }

.ap-card,
.ap-plan {
    position: relative;
    overflow: hidden;
    border-radius: 1.2em;
    background: rgba(255, 255, 255, .05);
    border: .1em solid rgba(255, 255, 255, .08);
}

.ap-card {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .75em .9em;
}

.ap-card > b { font-size: 1.6em; }
.ap-card strong { display: block; font-size: 1.2em; }
.ap-card small { display: block; font-size: 1em; color: #9ca3c4; }

.ap-check {
    position: absolute;
    top: 50%;
    inset-inline-end: .9em;
    display: grid;
    place-items: center;
    width: 1.9em;
    height: 1.9em;
    margin-top: -.95em;
    border-radius: 50%;
    font-style: normal;
    font-weight: 800;
    font-size: 1em;
    background: linear-gradient(135deg, var(--agent-purple), var(--agent-pink));
    transform: scale(0);
}

.ap-plan .ap-check { top: .6em; margin-top: 0; inset-inline-end: .6em; width: 1.6em; height: 1.6em; }

.ap-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5em;
    height: 5em;
    margin: -2.5em 0 0 -2.5em;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

.ap-note {
    align-self: flex-start;
    font-size: 1.1em;
    font-weight: 600;
    color: #c4b5fd;
    opacity: 0;
}

.ap-note--ok {
    align-self: stretch;
    padding: .8em 1em;
    border-radius: 1.2em;
    color: #4ade80;
    background: rgba(74, 222, 128, .1);
    border: .08em solid rgba(74, 222, 128, .35);
}

.ap-flow { list-style: none; display: grid; gap: .5em; margin: 0; padding: 0; }

.ap-flow li {
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .65em .9em;
    border-radius: 1.1em;
    background: rgba(255, 255, 255, .05);
    font-size: 1.15em;
}

.ap-flow li i {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    font-style: normal;
    font-size: .9em;
    background: rgba(6, 182, 212, .2);
    color: #67e8f9;
}

.ap-flow li span { flex: 1; }
.ap-flow li b { color: #4ade80; }

.ap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }

.ap-grid div {
    padding: .9em;
    border-radius: 1.2em;
    background: rgba(255, 255, 255, .05);
    border: .08em solid rgba(255, 255, 255, .07);
}

.ap-grid b { display: block; font-size: 1.6em; color: #c084fc; }
.ap-grid span { display: block; margin-top: .3em; font-size: 1.1em; font-weight: 600; }

.ap-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }

.ap-plan {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: .2em;
    min-height: 8.5em;
    padding: .8em .7em;
}

.ap-plan em {
    position: absolute;
    top: .6em;
    inset-inline-start: .6em;
    padding: .15em .55em;
    border-radius: 1em;
    font-style: normal;
    font-size: .85em;
    font-weight: 700;
    background: rgba(219, 39, 119, .25);
    color: #f9a8d4;
}

.ap-plan strong { font-size: 1.05em; color: #c4c8e4; }
.ap-plan b { font-size: 1.7em; }

.ap-work { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.ap-work figure { margin: 0; }

.ap-work img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 1em;
    background: #1c1c2b;
}

.ap-work figcaption { margin-top: .35em; font-size: 1em; text-align: center; color: #c4c8e4; }

.ap-form { display: grid; gap: .5em; }

.ap-form label {
    display: block;
    padding: .6em .9em;
    border-radius: 1em;
    background: rgba(255, 255, 255, .05);
    border: .08em solid rgba(255, 255, 255, .1);
}

.ap-form small { display: block; font-size: .95em; color: #9ca3c4; }
.ap-form span { display: block; min-height: 1.35em; font-size: 1.2em; font-weight: 600; }

/* ---------- Composer ---------- */
.ap-composer {
    position: absolute;
    left: 1.2em;
    right: 1.2em;
    bottom: 2.4em;
    display: flex;
    align-items: center;
    gap: .7em;
}

.ap-input {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 3.8em;
    display: flex;
    align-items: center;
    padding: 0 1.2em;
    border-radius: 2em;
    background: #161624;
    border: .1em solid rgba(255, 255, 255, .12);
    font-size: 1.15em;
    white-space: nowrap;
    overflow: hidden;
}

.ap-placeholder { position: absolute; color: rgba(255, 255, 255, .35); }
.ap-input.has-text .ap-placeholder { display: none; }
.ap-typed { overflow: hidden; text-overflow: ellipsis; }

.ap-caret {
    flex: none;
    width: .1em;
    height: 1.3em;
    margin-inline-start: .1em;
    background: #c084fc;
    animation: ap-caret 1s steps(1) infinite;
}

@keyframes ap-caret { 50% { opacity: 0; } }

.ap-send {
    flex: none;
    display: grid;
    place-items: center;
    width: 3.6em;
    height: 3.6em;
    border-radius: 50%;
    font-size: 1.25em;
    font-weight: 800;
    background: linear-gradient(135deg, var(--agent-purple), var(--agent-pink));
    box-shadow: 0 .4em 1.2em rgba(124, 58, 237, .5);
}

.ap-homebar {
    position: absolute;
    bottom: .75em;
    left: 50%;
    transform: translateX(-50%);
    width: 11em;
    height: .45em;
    border-radius: 1em;
    background: rgba(255, 255, 255, .85);
}

/* ---------- Landscape frame: the services carousel "inside" the phone ---------- */
.agent-frame {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 41;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    border-style: solid;
    border-color: #060608;
    border-radius: 999px;
    box-shadow:
        0 0 0 5px #8e8e96,
        0 0 0 7px #e2e2e8,
        0 0 0 8px #6b6b73,
        0 40px 90px rgba(20, 10, 60, .35);
}

.agent-frame__island {
    position: absolute;
    top: 50%;
    left: 6px;
    width: 26px;
    height: 92px;
    margin-top: -46px;
    border-radius: 20px;
    background: #000;
}

[dir="rtl"] .agent-frame__island { left: auto; right: 6px; }

.agent-frame__glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(118deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 28%, rgba(255, 255, 255, 0) 40%);
}

body.agent-landscape .services-horizontal__progress { display: none; }

body.agent-landscape .services-horizontal__viewport {
    clip-path: inset(var(--fc-t, 0) var(--fc-r, 0) var(--fc-b, 0) var(--fc-l, 0) round var(--fc-rad, 0));
}

/* The site's carousel only scrolls one way; mirror it for right-to-left pages */
@media (min-width: 900px) {
    html[dir="rtl"] .services-horizontal__track {
        transform: translate3d(calc(var(--services-x, 0px) * -1), 0, 0);
    }
}

/* ---------- Fallbacks ---------- */
.agent-dock.no-gsap .ap-msg--user,
.agent-dock.no-gsap .ap-dots { display: none; }

@media (max-width: 1023px) {
    .agent-slot { min-height: 0; margin-top: 1rem; }
    .agent-slot > .agent-dock { min-height: 640px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-dots i,
    .ap-caret { animation: none; }
}

/* Seamless, always-running outcomes carousel. */
.testimonial-marquee {
    width: 100%;
    overflow: hidden;
    direction: ltr;
}

.testimonial-track {
    min-width: max-content;
    direction: ltr;
    animation: testimonial-loop 38s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

.testimonial-track:hover {
    animation-play-state: running !important;
}

.testimonial-track article {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] .testimonial-track article {
    direction: rtl;
    text-align: right;
}

@keyframes testimonial-loop {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - .6rem), 0, 0); }
}