/* ===================================================================
 * Portfolio overrides & redesigned Work section
 * Loaded after styles.css. Uses the theme tokens defined there.
 * ------------------------------------------------------------------- */

:root {
    --ease-out     : cubic-bezier(.22, 1, .36, 1);
    --ease-in-out  : cubic-bezier(.65, 0, .35, 1);
    --surface-1    : #18191b;
    --surface-2    : #1e1f22;
    --line         : rgba(255, 255, 255, .08);
    --line-strong  : rgba(255, 255, 255, .14);
    --ink          : #f4f2ee;
    --ink-2        : #a6a6a8;
    --ink-3        : #8d8e91;
    --radius-lg    : 2.4rem;
    --radius-md    : 1.6rem;
}


/* -------------------------------------------------------------------
 * intro tagline
 * ------------------------------------------------------------------- */
.intro-tagline {
    display     : flex;
    flex-wrap   : wrap;
    align-items : center;
    gap         : .8rem;
    margin-top  : 3.2rem;
    margin-bottom: 0;
    text-align  : left;
    font-size   : 1.5rem;
    color       : var(--ink-2);
}

.intro-tagline span {
    padding       : .5rem 1.4rem;
    border        : 1px solid var(--line-strong);
    border-radius : 99px;
    line-height   : 1.6;
    color         : var(--ink);
    background    : rgba(255, 255, 255, .02);
}

.intro-tagline em {
    font-style    : normal;
    margin-left   : .8rem;
    padding-left  : 1.6rem;
    border-left   : 1px solid var(--line-strong);
    letter-spacing: .02em;
}


/* -------------------------------------------------------------------
 * about
 * ------------------------------------------------------------------- */
.about-bio p {
    text-align    : left;
    margin-bottom : 1.6rem;
    font-size     : 1.7rem;
    line-height   : 1.7;
}

.about-bio strong {
    color       : var(--ink);
    font-weight : 600;
}

.about-bring {
    list-style            : none;
    margin                : 2.8rem 0 1.2rem;
    display               : grid;
    grid-template-columns : repeat(2, minmax(0, 1fr));
    gap                   : 1px;
    background            : var(--line);
    border                : 1px solid var(--line);
    border-radius         : var(--radius-md);
    overflow              : hidden;
}

.about-bring li {
    margin       : 0;
    padding      : 1.8rem 2rem;
    background   : var(--color-body);
    font-size    : 1.5rem;
    line-height  : 1.5;
    color        : var(--ink-2);
}

.about-bring li span {
    display       : block;
    color         : var(--color-1);
    font-weight   : 600;
    font-size     : 1.4rem;
    letter-spacing: .02em;
    margin-bottom : .4rem;
}

@media screen and (max-width: 600px) {
    .about-bring { grid-template-columns: 1fr; }
}

.timeline__desc ul {
    margin       : 0;
    padding-left : 1.8rem;
    list-style   : none;
}

.timeline__desc li {
    position      : relative;
    padding-left  : 0;
    margin-bottom : .8rem;
    line-height   : 1.65;
}

.timeline__desc li::before {
    content       : "";
    position      : absolute;
    left          : -1.6rem;
    top           : 1.1rem;
    width         : 6px;
    height        : 1px;
    background    : var(--color-1);
}

.timeline__desc li strong { color: var(--ink); font-weight: 600; }
.timeline__desc p { text-align: left; }

.timeline__now {
    display        : inline-block;
    margin-left    : .8rem;
    padding        : .1rem .9rem;
    font-size      : 1.1rem;
    letter-spacing : .08em;
    text-transform : uppercase;
    border-radius  : 99px;
    color          : #0b2a12;
    background     : #9ee6a7;
    vertical-align : middle;
    line-height    : 1.8;
}

.about-certs-title { margin-top: 4.8rem; }

.cert-list {
    list-style : none;
    margin     : 2rem 0 0;
    border-top : 1px solid var(--line);
}

.cert-list li {
    margin          : 0;
    padding         : 1.6rem 0;
    border-bottom   : 1px solid var(--line);
    display         : flex;
    flex-direction  : column;
    gap             : .2rem;
    font-size       : 1.5rem;
    line-height     : 1.5;
}

.cert-list strong { color: var(--ink); font-weight: 500; font-size: 1.6rem; }
.cert-list span { color: var(--ink-3); }


/* ===================================================================
 * WORK
 * ------------------------------------------------------------------- */
.s-works {
    padding-top : calc(4 * var(--space));
}

.work p,
.pmodal p { text-align: left; }

.work ul,
.pmodal ul { margin-left: 0; }

.work li,
.pmodal li { padding-left: 0; }

/* reveal ----------------------------------------------------------- */
[data-reveal] {
    opacity    : 0;
    transform  : translate3d(0, 40px, 0);
    transition : opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay : var(--d, 0ms);
}

[data-reveal].is-in {
    opacity   : 1;
    transform : none;
}

.no-js [data-reveal] { opacity: 1; transform: none; }

/* head ------------------------------------------------------------- */
.work__head {
    display               : grid;
    grid-template-columns : minmax(0, 1.4fr) minmax(0, 1fr);
    gap                   : 6rem;
    align-items           : end;
    margin-bottom         : 5.6rem;
}

.work__title {
    font-family    : var(--font-2);
    font-size      : clamp(4rem, 5.4vw, 7.6rem);
    line-height    : 1.04;
    letter-spacing : -.01em;
    color          : var(--ink);
    margin         : 2rem 0 0;
}

.work__title em {
    font-style : normal;
    color      : var(--color-1);
}

.work__stats {
    display    : grid;
    gap        : 0;
    margin     : 0;
    border-top : 1px solid var(--line);
}

.work__stats > div {
    display       : grid;
    grid-template-columns : 7.2rem 1fr;
    align-items   : center;
    padding       : 1.6rem 0;
    border-bottom : 1px solid var(--line);
}

.work__stats dt {
    font-family : var(--font-2);
    font-size   : 4rem;
    line-height : 1;
    color       : var(--ink);
}

.work__stats dd {
    margin      : 0;
    font-size   : 1.5rem;
    line-height : 1.45;
    color       : var(--ink-2);
}

/* filters ---------------------------------------------------------- */
.work__filters {
    display       : flex;
    flex-wrap     : wrap;
    gap           : .8rem;
    margin-bottom : 3.2rem;
}

.chip {
    appearance     : none;
    display        : inline-flex;
    align-items    : center;
    gap            : .8rem;
    height         : 4.4rem;
    padding        : 0 1.8rem;
    margin         : 0;
    border         : 1px solid var(--line-strong);
    border-radius  : 99px;
    background     : transparent;
    color          : var(--ink-2);
    font-family    : var(--font-1);
    font-size      : 1.4rem;
    font-weight    : 500;
    letter-spacing : .01em;
    text-transform : none;
    line-height    : 1;
    cursor         : pointer;
    transition     : color .25s, background-color .25s, border-color .25s, transform .2s var(--ease-out);
}

.chip:hover { color: var(--ink); border-color: rgba(255, 255, 255, .3); }
.chip:active { transform: scale(.97); }

.chip:focus-visible,
.pbtn:focus-visible,
.pmodal__close:focus-visible {
    outline        : 2px solid var(--color-1);
    outline-offset : 3px;
}

.chip.is-active {
    background   : var(--ink);
    border-color : var(--ink);
    color        : #111;
}

.chip__count {
    font-size   : 1.1rem;
    font-weight : 600;
    min-width   : 2.2rem;
    height      : 2.2rem;
    padding     : 0 .6rem;
    display     : inline-grid;
    place-items : center;
    border-radius : 99px;
    background  : rgba(255, 255, 255, .08);
    color       : inherit;
}

.chip.is-active .chip__count { background: rgba(0, 0, 0, .1); }

/* grid ------------------------------------------------------------- */
.work__grid {
    display               : grid;
    grid-template-columns : repeat(2, minmax(0, 1fr));
    gap                   : 2.4rem;
}

/* card ------------------------------------------------------------- */
.pcard {
    --mx          : 50%;
    --my          : 0%;
    position      : relative;
    display       : flex;
    flex-direction: column;
    border-radius : var(--radius-lg);
    background    : var(--surface-1);
    border        : 1px solid var(--line);
    overflow      : hidden;
    isolation     : isolate;
    transition    : border-color .4s, transform .6s var(--ease-out), opacity .4s, box-shadow .6s var(--ease-out);
}

/* cursor spotlight on border */
.pcard::before {
    content        : "";
    position       : absolute;
    inset          : 0;
    border-radius  : inherit;
    padding        : 1px;
    background     : radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 70%, transparent), transparent 60%);
    -webkit-mask   : linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite : xor;
            mask-composite : exclude;
    opacity        : 0;
    transition     : opacity .4s;
    pointer-events : none;
    z-index        : 3;
}

.pcard:hover::before { opacity: 1; }

.pcard:hover {
    box-shadow : 0 30px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent);
}

.pcard.is-hidden { display: none; }

/* media ------------------------------------------------------------ */
.pcard__media {
    position     : relative;
    aspect-ratio : 16 / 11;
    overflow     : hidden;
    background   :
        radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--accent) 55%, transparent) 0%, transparent 60%),
        linear-gradient(180deg, var(--tint), color-mix(in srgb, var(--tint) 70%, #000));
}

.pcard__media::after {
    content    : "";
    position   : absolute;
    inset      : 0;
    background-image :
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size : 32px 32px;
    -webkit-mask-image : radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
            mask-image : radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
    pointer-events : none;
}

.pcard__media img { display: block; }

/* store screenshot tiles, fanned */
.media--shots {
    display         : flex;
    justify-content : center;
    align-items     : center;
    padding         : 6% 4%;
}

.media--shots figure {
    flex          : 0 0 auto;
    width         : 34%;
    margin        : 0 -3%;
    border-radius : 1.6rem;
    overflow      : hidden;
    box-shadow    : 0 30px 60px -20px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
    transform     : translateY(var(--y, 0)) rotate(var(--r, 0deg));
    transition    : transform .8s var(--ease-out);
    position      : relative;
    z-index       : 1;
}

.media--shots figure img { width: 100%; height: auto; }

.media--shots figure:nth-child(1) { --r: -7deg; --y: 7%; }
.media--shots figure:nth-child(2) { --r: 0deg;  --y: 0%; z-index: 2; }
.media--shots figure:nth-child(3) { --r: 7deg;  --y: 7%; }
.media--shots figure:nth-child(4) { display: none; }

.pcard:hover .media--shots figure:nth-child(1) { --r: -10deg; --y: 4%; }
.pcard:hover .media--shots figure:nth-child(2) { --y: -3%; }
.pcard:hover .media--shots figure:nth-child(3) { --r: 10deg; --y: 4%; }

/* full-bleed cover */
.media--cover img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 1.2s var(--ease-out);
}

.media--cover::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    z-index    : 1;
    background : linear-gradient(180deg, transparent 55%, rgba(24, 25, 27, .55));
    pointer-events : none;
}

.pcard:hover .media--cover img { transform: scale(1.045); }

/* browser frame */
.media--browser {
    padding : 8% 0 0 8%;
}

.browser {
    position      : relative;
    z-index       : 1;
    height        : 100%;
    border-radius : 1.2rem 0 0 0;
    overflow      : hidden;
    background    : #0f0f10;
    box-shadow    : 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1);
    transform     : translate3d(0, 0, 0);
    transition    : transform .9s var(--ease-out);
}

.browser__bar {
    display     : flex;
    align-items : center;
    gap         : .6rem;
    height      : 3.4rem;
    padding     : 0 1.4rem;
    background  : #1c1c1f;
    border-bottom : 1px solid rgba(255, 255, 255, .06);
}

.browser__bar i {
    width         : 1rem;
    height        : 1rem;
    border-radius : 50%;
    background    : #3a3a3e;
}

.browser__bar span {
    margin-left   : 1.2rem;
    padding       : .3rem 1.4rem;
    border-radius : 99px;
    background    : rgba(255, 255, 255, .05);
    color         : var(--ink-3);
    font-size     : 1.15rem;
    line-height   : 1.6;
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.browser img {
    width      : 100%;
    height     : auto;
    object-fit : cover;
    object-position : top center;
}

.pcard:hover .browser { transform: translate3d(-1.2rem, -1.2rem, 0); }

/* body ------------------------------------------------------------- */
.pcard__body {
    display        : flex;
    flex-direction : column;
    flex           : 1;
    padding        : 2.8rem 3.2rem 3.2rem;
    position       : relative;
    z-index        : 2;
}

.pcard__meta {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 1.2rem;
    margin-bottom   : 2rem;
}

.pcard__index {
    font-family : var(--font-mono);
    font-size   : 1.3rem;
    color       : var(--ink-3);
    letter-spacing : .08em;
}

.badge {
    display        : inline-flex;
    align-items    : center;
    gap            : .7rem;
    padding        : .4rem 1.2rem;
    border         : 1px solid var(--line-strong);
    border-radius  : 99px;
    font-size      : 1.2rem;
    font-weight    : 500;
    line-height    : 1.6;
    color          : var(--ink-2);
    white-space    : nowrap;
}

.badge--live {
    color        : #9ee6a7;
    border-color : rgba(158, 230, 167, .25);
    background   : rgba(158, 230, 167, .06);
}

.badge--live i {
    position      : relative;
    width         : .7rem;
    height        : .7rem;
    border-radius : 50%;
    background    : #5fd47a;
}

.badge--live i::after {
    content       : "";
    position      : absolute;
    inset         : 0;
    border-radius : 50%;
    background    : inherit;
    animation     : pulse-dot 2s var(--ease-out) infinite;
}

@keyframes pulse-dot {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(3.2); opacity: 0; }
}

.badge--ai {
    color        : #5eead4;
    border-color : rgba(94, 234, 212, .25);
    background   : rgba(94, 234, 212, .06);
}

.pcard__cat {
    margin         : 0 0 .8rem;
    font-size      : 1.25rem;
    font-weight    : 500;
    letter-spacing : .1em;
    text-transform : uppercase;
    color          : var(--accent);
    line-height    : 1.5;
}

.pcard__title {
    margin         : 0 0 1.2rem;
    font-family    : var(--font-2);
    font-weight    : 400;
    font-size      : clamp(2.8rem, 2.6vw, 3.6rem);
    line-height    : 1.1;
    letter-spacing : -.005em;
    color          : var(--ink);
}

.pcard__desc {
    margin      : 0 0 2rem;
    font-size   : 1.6rem;
    line-height : 1.65;
    color       : var(--ink-2);
    max-width   : 56ch;
}

.tags {
    list-style : none;
    display    : flex;
    flex-wrap  : wrap;
    gap        : .6rem;
    margin     : 0 0 2.4rem;
}

.tags li {
    margin        : 0;
    padding       : .3rem 1.1rem;
    border-radius : .8rem;
    background    : rgba(255, 255, 255, .05);
    border        : 1px solid rgba(255, 255, 255, .05);
    font-size     : 1.25rem;
    line-height   : 1.7;
    color         : var(--ink-2);
}

.pcard__actions {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 1rem;
    margin-top : auto;
}

/* buttons ---------------------------------------------------------- */
.pbtn {
    appearance     : none;
    display        : inline-flex;
    align-items    : center;
    gap            : .8rem;
    height         : 4.4rem;
    margin         : 0;
    padding        : 0 1.8rem;
    border         : 1px solid var(--line-strong);
    border-radius  : 99px;
    background     : transparent;
    color          : var(--ink);
    font-family    : var(--font-1);
    font-size      : 1.4rem;
    font-weight    : 500;
    letter-spacing : 0;
    text-transform : none;
    line-height    : 1;
    white-space    : nowrap;
    cursor         : pointer;
    transition     : background-color .25s, color .25s, border-color .25s, transform .2s var(--ease-out);
}

.pbtn svg {
    width             : 1.6rem;
    height            : 1.6rem;
    fill              : none;
    stroke            : currentColor;
    stroke-width      : 1.8;
    stroke-linecap    : round;
    stroke-linejoin   : round;
    transition        : transform .35s var(--ease-out);
}

.pbtn:hover { border-color: rgba(255, 255, 255, .35); color: var(--ink); }
.pbtn:hover svg { transform: translate(2px, -2px); }
.pbtn:active { transform: scale(.97); }

.pbtn--solid {
    background   : var(--ink);
    border-color : var(--ink);
    color        : #111;
}

.pbtn--solid:hover {
    background   : var(--color-1);
    border-color : var(--color-1);
    color        : #111;
}

.pbtn--solid:hover svg { transform: translateX(3px); }

/* wide card -------------------------------------------------------- */
.pcard--wide {
    grid-column    : 1 / -1;
    display        : grid;
    grid-template-columns : minmax(0, 1.25fr) minmax(0, 1fr);
}

.pcard--wide .pcard__media {
    aspect-ratio : auto;
    min-height   : 52rem;
}

.pcard--wide .pcard__body {
    padding         : 4.8rem 5.6rem;
    justify-content : center;
}

.pcard--wide .pcard__title { font-size: clamp(3.2rem, 3.4vw, 4.8rem); }

.pcard--wide .pcard__actions { margin-top: .8rem; }

.pcard--wide .media--shots figure { width: 25%; margin: 0 -2%; }
.pcard--wide .media--shots figure:nth-child(1) { --r: -8deg; --y: 8%; }
.pcard--wide .media--shots figure:nth-child(2) { --r: -2.5deg; --y: 0%; z-index: 2; }
.pcard--wide .media--shots figure:nth-child(3) { --r: 2.5deg;  --y: 0%; z-index: 2; }
.pcard--wide .media--shots figure:nth-child(4) { display: block; --r: 8deg; --y: 8%; }

.pcard--wide:hover .media--shots figure:nth-child(1) { --r: -11deg; --y: 5%; }
.pcard--wide:hover .media--shots figure:nth-child(2) { --r: -3.5deg; --y: -3%; }
.pcard--wide:hover .media--shots figure:nth-child(3) { --r: 3.5deg;  --y: -3%; }
.pcard--wide:hover .media--shots figure:nth-child(4) { --r: 11deg;  --y: 5%; }

.pcard--reverse .pcard__media { order: 2; }
.pcard--reverse .media--browser { padding: 8% 8% 0 0; }
.pcard--reverse .browser { border-radius: 0 1.2rem 0 0; }
.pcard--reverse:hover .browser { transform: translate3d(1.2rem, -1.2rem, 0); }
.pcard--reverse .pcard__media { grid-row: 1; grid-column: 2; }
.pcard--reverse .pcard__body  { grid-row: 1; grid-column: 1; }


/* ===================================================================
 * project modal
 * ------------------------------------------------------------------- */
.pmodal {
    width       : min(108rem, calc(100vw - 3.2rem));
    max-width   : none;
    max-height  : calc(100dvh - 4.8rem);
    margin      : auto;
    padding     : 0;
    border      : 0;
    background  : transparent;
    color       : var(--ink-2);
    overflow    : visible;
}

.pmodal::backdrop {
    background         : rgba(6, 6, 7, .72);
    backdrop-filter    : blur(8px);
    -webkit-backdrop-filter : blur(8px);
    opacity            : 0;
    transition         : opacity .35s;
}

.pmodal.is-open::backdrop { opacity: 1; }

.pmodal__panel {
    position      : relative;
    max-height    : calc(100dvh - 4.8rem);
    overflow-y    : auto;
    overscroll-behavior : contain;
    border-radius : var(--radius-lg);
    background    : var(--surface-1);
    border        : 1px solid var(--line-strong);
    box-shadow    : 0 60px 120px -40px rgba(0, 0, 0, .9);
    opacity       : 0;
    transform     : translateY(24px) scale(.98);
    transition    : opacity .35s var(--ease-out), transform .5s var(--ease-out);
}

.pmodal.is-open .pmodal__panel {
    opacity   : 1;
    transform : none;
}

.pmodal__close {
    position      : sticky;
    top           : 1.6rem;
    float         : right;
    margin        : 1.6rem 1.6rem -6rem 0;
    z-index       : 5;
    width         : 4.4rem;
    height        : 4.4rem;
    padding       : 0;
    display       : grid;
    place-items   : center;
    border-radius : 50%;
    border        : 1px solid var(--line-strong);
    background    : rgba(20, 21, 22, .8);
    backdrop-filter : blur(8px);
    color         : var(--ink);
    cursor        : pointer;
    transition    : transform .3s var(--ease-out), background-color .25s;
}

.pmodal__close:hover { transform: rotate(90deg); background: #2a2b2e; }

.pmodal__close svg {
    width : 1.8rem; height: 1.8rem;
    fill  : none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

.pmodal__content {
    padding : 0 0 4.8rem;
}

.pm-gallery {
    display     : flex;
    gap         : 1.6rem;
    padding     : 4rem 4.8rem;
    overflow-x  : auto;
    scroll-snap-type : x proximity;
    overscroll-behavior-x : contain;
    background  :
        radial-gradient(100% 120% at 50% 120%, color-mix(in srgb, var(--accent, #888) 45%, transparent), transparent 60%),
        var(--tint, #1a1a1c);
    border-bottom : 1px solid var(--line);
}

.pm-gallery img {
    flex             : 0 0 auto;
    height           : 44rem;
    width            : auto;
    max-width        : none;
    border-radius    : 1.4rem;
    scroll-snap-align: center;
    box-shadow       : 0 20px 50px -20px rgba(0, 0, 0, .7);
}

.pm-gallery--wide { justify-content: center; }
.pm-gallery--wide img,
.pm-gallery img.is-wide { height: auto; width: 100%; max-height: 52rem; object-fit: cover; }
.pm-gallery img.is-wide { width: auto; height: 44rem; }

.pmodal__content > :not(.pm-gallery):not(.pm-gallery-wrap) {
    margin-left  : 4.8rem;
    margin-right : 4.8rem;
}

.pm-head {
    display     : flex;
    align-items : center;
    gap         : 2rem;
    margin-top  : 4rem;
}

.pm-icon {
    width         : 6.4rem;
    height        : 6.4rem;
    border-radius : 1.6rem;
    box-shadow    : 0 0 0 1px var(--line-strong);
}

.pm-title {
    margin      : 0;
    font-family : var(--font-2);
    font-weight : 400;
    font-size   : clamp(3.2rem, 4vw, 4.8rem);
    line-height : 1.05;
    color       : var(--ink);
}

.pm-lead {
    margin      : 2.4rem 0 0;
    font-size   : 1.9rem;
    line-height : 1.6;
    color       : var(--ink);
    max-width   : 70ch;
}

.pm-cols {
    display               : grid;
    grid-template-columns : 1fr 1.3fr;
    gap                   : 4rem;
    margin-top            : 3.6rem;
    padding-top           : 3.2rem;
    border-top            : 1px solid var(--line);
}

.pmodal h4 {
    margin         : 0 0 1.2rem;
    font-family    : var(--font-1);
    font-size      : 1.2rem;
    font-weight    : 600;
    letter-spacing : .14em;
    text-transform : uppercase;
    color          : var(--ink-3);
}

.pmodal__content > h4 { margin-top: 3.2rem; }

.pm-cols p {
    margin      : 0;
    font-size   : 1.6rem;
    line-height : 1.7;
}

.pm-list {
    list-style : none;
    display    : grid;
    gap        : 1rem;
}

.pm-list li {
    position     : relative;
    margin       : 0;
    padding-left : 2.4rem;
    font-size    : 1.55rem;
    line-height  : 1.55;
}

.pm-list li::before {
    content     : "";
    position    : absolute;
    left        : 0;
    top         : .55em;
    width       : 1.2rem;
    height      : .7rem;
    border-left : 2px solid var(--accent, var(--color-1));
    border-bottom : 2px solid var(--accent, var(--color-1));
    transform   : rotate(-45deg);
}

.pm-list strong { color: var(--ink); font-weight: 600; }

.pmodal .tags { margin-bottom: 0; }

.pm-note {
    margin-top    : 2.8rem;
    padding       : 1.4rem 1.8rem;
    border-radius : 1.2rem;
    border        : 1px solid rgba(251, 191, 36, .25);
    background    : rgba(251, 191, 36, .06);
    color         : #f3d58a;
    font-size     : 1.4rem;
    line-height   : 1.6;
}

.pm-links {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 1rem;
    margin-top : 3.6rem;
}

html.modal-open { overflow: hidden; }


/* ===================================================================
 * tech stack
 * ------------------------------------------------------------------- */
.tech-carousel {
    -webkit-mask-image : linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image : linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.tech-carousel__wrapper {
    animation : marquee 60s linear infinite;
}

.tech-carousel:hover .tech-carousel__wrapper { animation-play-state: paused; }

@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.tech-icon__img--si { padding: 1rem; }
.tech-icon__name { white-space: nowrap; }

.stack-groups {
    display               : grid;
    grid-template-columns : repeat(3, minmax(0, 1fr));
    gap                   : 1px;
    margin-top            : 5.6rem;
    background            : var(--line);
    border                : 1px solid var(--line);
    border-radius         : var(--radius-md);
    overflow              : hidden;
}

.stack-groups > div {
    padding    : 2.4rem 2.8rem;
    background : var(--color-body);
}

.stack-groups h3 {
    margin         : 0 0 .8rem;
    font-family    : var(--font-1);
    font-size      : 1.2rem;
    font-weight    : 600;
    letter-spacing : .14em;
    text-transform : uppercase;
    color          : var(--color-1);
}

.stack-groups p {
    margin      : 0;
    text-align  : left;
    font-size   : 1.5rem;
    line-height : 1.6;
    color       : var(--ink-2);
}

.contact-links a { word-break: break-word; }


/* ===================================================================
 * responsive
 * ------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    .pcard--wide .pcard__body { padding: 4rem; }
    .pcard--wide .pcard__media { min-height: 44rem; }
}

@media screen and (max-width: 1000px) {
    .work__head { grid-template-columns: 1fr; gap: 3.2rem; }
    .work__grid { grid-template-columns: 1fr; }
    .pcard--wide { display: flex; }
    .pcard--wide .pcard__media { min-height: 0; aspect-ratio: 16 / 11; }
    .pcard--reverse .pcard__media { order: 0; }
    .pcard--wide .pcard__body { padding: 2.8rem 3.2rem 3.2rem; }
    .stack-groups { grid-template-columns: 1fr 1fr; }
    .pm-cols { grid-template-columns: 1fr; gap: 2.8rem; }
}

@media screen and (max-width: 600px) {
    .pcard__body,
    .pcard--wide .pcard__body { padding: 2.4rem 2rem 2.4rem; }
    .pcard { border-radius: 2rem; }
    .pcard__actions .pbtn { flex: 1 1 auto; justify-content: center; }
    .pcard--wide .media--shots figure { width: 34%; margin: 0 -3%; }
    .pcard--wide .media--shots figure:nth-child(4) { display: none; }
    .pcard--wide .media--shots figure:nth-child(2) { --r: -6deg; }
    .pcard--wide .media--shots figure:nth-child(3) { --r: 6deg; }
    .work__filters { flex-wrap: nowrap; overflow-x: auto; margin-right: -4vw; padding-right: 4vw; scrollbar-width: none; }
    .work__filters::-webkit-scrollbar { display: none; }
    .chip { flex: 0 0 auto; }
    .stack-groups { grid-template-columns: 1fr; }
    .intro-tagline em { flex-basis: 100%; margin: .8rem 0 0; padding: 0; border: 0; }

    .pmodal { width: 100vw; max-height: 100dvh; margin: auto 0 0; }
    .pmodal__panel { max-height: 92dvh; border-radius: 2.4rem 2.4rem 0 0; }
    .pm-gallery { padding: 2.4rem 2rem; }
    .pm-gallery img { height: 34rem; }
    .pm-gallery img.is-wide { height: 34rem; }
    .pmodal__content > :not(.pm-gallery):not(.pm-gallery-wrap) { margin-left: 2rem; margin-right: 2rem; }
    .pm-lead { font-size: 1.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
    .pcard, .pcard *, .pmodal__panel { transition: none !important; }
    .tech-carousel__wrapper, .badge--live i::after { animation: none; }
}

/* fixes ------------------------------------------------------------ */
.about-info__text p { text-align: left; }
.cert-list { margin-left: var(--timeline-left-padding, 5.6rem); }

.browser img {
    height     : calc(100% - 3.4rem);
    object-fit : cover;
}

/* ===================================================================
 * scrollbars
 * ------------------------------------------------------------------- */
/* Firefox (standard properties; Chromium uses the webkit rules below
 * so the thumb can change colour on hover) */
@supports not selector(::-webkit-scrollbar) {
    html { scrollbar-width: thin; scrollbar-color: #3a3b3f transparent; }
    .pmodal__panel,
    .pm-gallery { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
}

::-webkit-scrollbar {
    width  : 10px;
    height : 10px;
}

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
    background      : #3a3b3f;
    border          : 3px solid transparent;
    border-radius   : 99px;
    background-clip : padding-box;
    min-height      : 40px;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--color-1); }
::-webkit-scrollbar-thumb:active { background-color: var(--color-1-dark); }
::-webkit-scrollbar-corner { background: transparent; }

/* modal panel: inset so it clears the rounded corners */
.pmodal__panel::-webkit-scrollbar { width: 8px; }
.pmodal__panel::-webkit-scrollbar-track { margin: 2.4rem 0; }

/* gallery: a thin rail inside the padding */
.pm-gallery::-webkit-scrollbar { height: 6px; }
.pm-gallery::-webkit-scrollbar-track {
    margin        : 0 4.8rem;
    background    : rgba(255, 255, 255, .06);
    border-radius : 99px;
}
.pm-gallery::-webkit-scrollbar-thumb {
    border           : 0;
    background-color : rgba(255, 255, 255, .28);
}
.pm-gallery::-webkit-scrollbar-thumb:hover { background-color: var(--accent, var(--color-1)); }

::selection { background: var(--color-1); color: #111; }


/* ===================================================================
 * draggable gallery
 * ------------------------------------------------------------------- */
.pm-gallery-wrap {
    position      : relative;
    border-bottom : 1px solid var(--line);
}

.pm-gallery-wrap .pm-gallery { border-bottom: 0; }

.pm-gallery.is-draggable { cursor: grab; }
.pm-gallery:focus { outline: none; }
.pm-gallery:focus-visible { outline: 2px solid var(--accent, var(--color-1)); outline-offset: -6px; }

.pm-gallery.is-dragging {
    cursor           : grabbing;
    scroll-snap-type : none;
    user-select      : none;
}

.pm-gallery.is-dragging img { pointer-events: none; }
.pm-gallery img { user-select: none; -webkit-user-drag: none; }

/* edge fades show there is more to see */
.pm-gallery-wrap::before,
.pm-gallery-wrap::after {
    content        : "";
    position       : absolute;
    top            : 0;
    bottom         : 0;
    width          : 6.4rem;
    z-index        : 2;
    pointer-events : none;
    opacity        : 0;
    transition     : opacity .3s;
}

.pm-gallery-wrap::before { left: 0;  background: linear-gradient(90deg, rgba(10, 10, 11, .55), transparent); }
.pm-gallery-wrap::after  { right: 0; background: linear-gradient(-90deg, rgba(10, 10, 11, .55), transparent); }
.pm-gallery-wrap.can-prev::before,
.pm-gallery-wrap.can-next::after { opacity: 1; }

.pm-nav {
    position        : absolute;
    top             : 50%;
    z-index         : 3;
    width           : 4.4rem;
    height          : 4.4rem;
    margin          : -2.2rem 0 0;
    padding         : 0;
    display         : grid;
    place-items     : center;
    border-radius   : 50%;
    border          : 1px solid var(--line-strong);
    background      : rgba(20, 21, 22, .78);
    backdrop-filter : blur(8px);
    color           : var(--ink);
    cursor          : pointer;
    opacity         : 0;
    visibility      : hidden;
    transition      : opacity .25s, visibility .25s, transform .2s var(--ease-out), background-color .25s;
}

.pm-nav svg {
    width : 1.8rem; height: 1.8rem;
    fill  : none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.pm-nav--prev { left: 1.6rem; }
.pm-nav--next { right: 1.6rem; }
.pm-nav:hover { background: #2a2b2e; }
.pm-nav:active { transform: scale(.94); }
.pm-nav:focus-visible { outline: 2px solid var(--color-1); outline-offset: 3px; }

.pm-gallery-wrap.can-prev .pm-nav--prev,
.pm-gallery-wrap.can-next .pm-nav--next { opacity: 1; visibility: visible; }

.pm-hint {
    position       : absolute;
    left           : 50%;
    bottom         : 1.4rem;
    z-index        : 3;
    transform      : translateX(-50%);
    display        : inline-flex;
    align-items    : center;
    gap            : .8rem;
    padding        : .5rem 1.4rem;
    border-radius  : 99px;
    background     : rgba(20, 21, 22, .72);
    backdrop-filter: blur(8px);
    border         : 1px solid var(--line);
    color          : var(--ink-2);
    font-size      : 1.2rem;
    letter-spacing : .04em;
    line-height    : 1.6;
    white-space    : nowrap;
    pointer-events : none;
    transition     : opacity .4s;
}

.pm-hint svg {
    width : 1.6rem; height: 1.6rem;
    fill  : none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    animation : hint-nudge 1.6s var(--ease-in-out) infinite;
}

@keyframes hint-nudge {
    0%, 100% { transform: translateX(-3px); }
    50%      { transform: translateX(3px); }
}

.pm-gallery-wrap.is-used .pm-hint { opacity: 0; }

@media (hover: none) {
    .pm-nav { display: none; }
}

@media screen and (max-width: 600px) {
    .pm-gallery::-webkit-scrollbar-track { margin: 0 2rem; }
    .pm-hint { bottom: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-hint svg { animation: none; }
}

.pm-hint[hidden] { display: none; }
.pmodal:focus,
.pmodal:focus-visible { outline: none; }
.pmodal__panel:focus,
.pmodal__panel:focus-visible { outline: none; }


/* ===================================================================
 * more projects: compact cards, three per row
 * ------------------------------------------------------------------- */
.more {
    margin-top : 9.6rem;
}

.more .text-pretitle { margin: 0 0 2.4rem; }

.more__grid {
    display               : grid;
    grid-template-columns : repeat(6, minmax(0, 1fr));
    gap                   : 1.6rem;
}

.more__grid .xcard { grid-column: span 2; }

@property --xc {
    syntax        : "<length>";
    inherits      : true;
    initial-value : 0px;
}

.xcard {
    --mx           : 50%;
    --my           : 50%;
    --xc           : 0px;
    position       : relative;
    isolation      : isolate;
    display        : flex;
    flex-direction : column;
    gap            : .8rem;
    padding        : 2.2rem 2.4rem 2rem;
    border         : 1px solid var(--line);
    background     : var(--surface-1);
    color          : var(--ink-2);
    overflow       : hidden;
    transition     : border-color .5s var(--ease-out), --xc .55s var(--ease-out);
}

/* soft spotlight that follows the cursor */
.xcard::before {
    content        : "";
    position       : absolute;
    inset          : 0;
    z-index        : -1;
    background     :
        radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--color-1) 13%, transparent), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .025), transparent 60%);
    opacity        : 0;
    transition     : opacity .5s var(--ease-out);
    pointer-events : none;
}

/* corner brackets that draw in from each corner */
.xcard::after {
    --g            : var(--color-1);
    content        : "";
    position       : absolute;
    inset          : -1px;
    pointer-events : none;
    background     :
        linear-gradient(var(--g), var(--g)) top    left  / var(--xc) 2px,
        linear-gradient(var(--g), var(--g)) top    left  / 2px var(--xc),
        linear-gradient(var(--g), var(--g)) top    right / var(--xc) 2px,
        linear-gradient(var(--g), var(--g)) top    right / 2px var(--xc),
        linear-gradient(var(--g), var(--g)) bottom left  / var(--xc) 2px,
        linear-gradient(var(--g), var(--g)) bottom left  / 2px var(--xc),
        linear-gradient(var(--g), var(--g)) bottom right / var(--xc) 2px,
        linear-gradient(var(--g), var(--g)) bottom right / 2px var(--xc);
    background-repeat : no-repeat;
}

.xcard:hover,
.xcard:focus-visible {
    --xc         : 18px;
    border-color : rgba(255, 255, 255, .1);
    color        : var(--ink-2);
}

.xcard:hover::before,
.xcard:focus-visible::before { opacity: 1; }

.xcard:focus-visible { outline: 2px solid var(--color-1); outline-offset: 4px; }

.xcard__top {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    margin-bottom   : .4rem;
}

.xcard__id {
    font-family    : var(--font-mono);
    font-size      : 1.15rem;
    letter-spacing : .1em;
    color          : var(--color-1);
}

/* arrow swap: current arrow flies out, a fresh one slides in */
.xcard__arrow {
    position : relative;
    display  : block;
    width    : 1.6rem;
    height   : 1.6rem;
    overflow : hidden;
    color    : var(--ink-3);
    transition : color .4s;
}

.xcard__arrow svg {
    position        : absolute;
    inset           : 0;
    width           : 100%;
    height          : 100%;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
    transition      : transform .5s var(--ease-out);
}

.xcard__arrow svg + svg { transform: translate(-110%, 110%); }

.xcard:hover .xcard__arrow,
.xcard:focus-visible .xcard__arrow { color: var(--color-1); }

.xcard:hover .xcard__arrow svg:first-child,
.xcard:focus-visible .xcard__arrow svg:first-child { transform: translate(110%, -110%); }

.xcard:hover .xcard__arrow svg + svg,
.xcard:focus-visible .xcard__arrow svg + svg { transform: none; transition-delay: .06s; }

.xcard__title {
    font-family : var(--font-1);
    font-size   : 1.8rem;
    font-weight : 600;
    line-height : 1.3;
    color       : var(--ink);
}

.xcard__desc {
    font-size   : 1.45rem;
    line-height : 1.55;
    transition  : color .4s;
}

.xcard:hover .xcard__desc { color: #c4c4c6; }

.xcard__foot {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    align-items     : center;
    gap             : .4rem 1.2rem;
    margin-top      : auto;
    padding-top     : 1.4rem;
    border-top      : 1px dashed var(--line-strong);
    font-size       : 1.2rem;
    color           : var(--ink-3);
}

/* footer text roll: address rolls up, call-to-action rolls in */
.xcard__roll {
    position    : relative;
    display     : block;
    overflow    : hidden;
    max-width   : 100%;
    line-height : 1.7;
}

.xcard__url,
.xcard__cta {
    display     : block;
    font-family : var(--font-mono);
    font-size   : 1.1rem;
    white-space : nowrap;
    transition  : transform .5s var(--ease-out), opacity .5s var(--ease-out);
}

.xcard__url {
    overflow      : hidden;
    text-overflow : ellipsis;
}

.xcard__cta {
    position       : absolute;
    right          : 0;
    top            : 0;
    color          : var(--color-1);
    letter-spacing : .04em;
    transform      : translateY(100%);
    opacity        : 0;
}

.xcard:hover .xcard__url,
.xcard:focus-visible .xcard__url { transform: translateY(-100%); opacity: 0; }

.xcard:hover .xcard__cta,
.xcard:focus-visible .xcard__cta { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .xcard, .xcard *, .xcard::before { transition: none !important; }
}

@media screen and (max-width: 1000px) {
    .more__grid { grid-template-columns: 1fr 1fr; }
    .more__grid .xcard { grid-column: auto; }
    .more__grid .xcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media screen and (max-width: 600px) {
    .more__grid { grid-template-columns: 1fr; }
}


/* ===================================================================
 * square corners everywhere
 * The decorative hero rings are artwork, not UI, so they stay round.
 * ------------------------------------------------------------------- */
*,
*::before,
*::after,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {
    border-radius : 0 !important;
}

.circles span { border-radius: 50% !important; }
#loader { border-radius: 50% !important; }

/* screenshots & browser frames keep their rounded design ------------ */
.browser                           { border-radius: 1.2rem 0 0 0 !important; }
.pcard--reverse .browser           { border-radius: 0 1.2rem 0 0 !important; }
.browser__bar i                    { border-radius: 50% !important; }
.browser__bar span                 { border-radius: 99px !important; }
.media--shots figure               { border-radius: 1.6rem !important; }
.pm-gallery img                    { border-radius: 1.4rem !important; }


/* ===================================================================
 * contact: email / phone / social cards with copy, and a CTA bar
 * ------------------------------------------------------------------- */
.contact-bottom {
    margin-top     : 5.6rem;
    padding-bottom : 6.4rem;
}

.contact-grid {
    display               : grid;
    grid-template-columns : minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr);
    gap                   : 1px;
    background            : var(--line);
    border                : 1px solid var(--line);
}

.contact-card {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : 1.2rem;
    min-width      : 0;
    padding        : 2.8rem 3rem 3rem;
    background     : var(--color-body);
}

.contact-card__label {
    margin         : 0;
    font-family    : var(--font-1);
    font-size      : 1.2rem;
    font-weight    : 600;
    letter-spacing : .16em;
    text-transform : uppercase;
    color          : var(--ink-3);
}

.contact-card__value {
    max-width     : 100%;
    font-size     : clamp(1.8rem, 1.6vw, 2.2rem);
    font-weight   : 400;
    line-height   : 1.3;
    color         : var(--ink);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
    transition    : color .2s;
}

.contact-card__value:hover,
.contact-card__value:focus-visible { color: var(--color-1); }

/* copy button (the :focus rule beats the template's white button:focus) */
.copy-btn,
.copy-btn:focus {
    display        : inline-flex;
    align-items    : center;
    gap            : .7rem;
    height         : 3.4rem;
    margin         : auto 0 0;
    padding        : 0 1.2rem;
    border         : 1px solid var(--line-strong);
    background     : transparent;
    color          : var(--ink-2);
    font-family    : var(--font-1);
    font-size      : 1.25rem;
    font-weight    : 500;
    letter-spacing : .02em;
    text-transform : none;
    line-height    : 1;
    cursor         : pointer;
    transition     : color .2s, border-color .2s, background-color .2s;
}

.copy-btn:hover {
    background   : rgba(255, 255, 255, .04);
    border-color : rgba(255, 255, 255, .3);
    color        : var(--ink);
}

.copy-btn:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }

.copy-btn svg {
    width           : 1.5rem;
    height          : 1.5rem;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
}

.copy-btn .i-check { display: none; }

.copy-btn.is-copied,
.copy-btn.is-copied:hover,
.copy-btn.is-copied:focus {
    color        : #9ee6a7;
    border-color : rgba(158, 230, 167, .35);
    background   : rgba(158, 230, 167, .06);
}

.copy-btn.is-copied .i-copy { display: none; }
.copy-btn.is-copied .i-check { display: block; animation: copy-pop .35s var(--ease-out); }

@keyframes copy-pop { from { transform: scale(.4); opacity: 0; } }

/* socials */
.contact-socials {
    list-style : none;
    width      : 100%;
    margin     : 0;
    display    : grid;
}

.contact-socials li { margin: 0; padding: 0; }

.contact-socials a {
    display               : grid;
    grid-template-columns : auto 1fr auto;
    align-items           : baseline;
    gap                   : 1.2rem;
    padding               : .8rem 0;
    border-bottom         : 1px solid var(--line);
    color                 : var(--ink);
    font-size             : 1.6rem;
    line-height           : 1.4;
    transition            : color .2s;
}

.contact-socials li:first-child a { padding-top: 0; }
.contact-socials li:last-child a { border-bottom: 0; padding-bottom: 0; }

.contact-socials small {
    min-width     : 0;
    font-size     : 1.25rem;
    color         : var(--ink-3);
    white-space   : nowrap;
    overflow      : hidden;
    text-overflow : ellipsis;
}

.contact-socials svg {
    align-self      : center;
    width           : 1.5rem;
    height          : 1.5rem;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
    color           : var(--ink-3);
    transition      : transform .3s var(--ease-out), color .2s;
}

.contact-socials a:hover,
.contact-socials a:focus-visible { color: var(--color-1); }
.contact-socials a:hover svg { color: var(--color-1); transform: translate(2px, -2px); }

/* call to action */
.contact-cta {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 2rem;
    margin-top      : 1.6rem;
    padding         : 2.6rem 3rem;
    background      : var(--ink);
    color           : #111;
    transition      : background-color .3s;
}

.contact-cta:hover,
.contact-cta:focus-visible { background: var(--color-1); color: #111; }
.contact-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.contact-cta__text {
    display        : flex;
    flex-direction : column;
    gap            : .4rem;
    font-family    : var(--font-2);
    font-size      : clamp(2.6rem, 3vw, 3.6rem);
    line-height    : 1.05;
}

.contact-cta__text em {
    font-family : var(--font-1);
    font-style  : normal;
    font-size   : 1.4rem;
    line-height : 1.4;
    color       : rgba(17, 17, 17, .6);
}

.contact-cta__icon {
    flex        : 0 0 auto;
    display     : grid;
    place-items : center;
    width       : 5.6rem;
    height      : 5.6rem;
    background  : #111;
    color       : var(--ink);
    transition  : transform .45s var(--ease-out);
}

.contact-cta__icon svg {
    width           : 2.2rem;
    height          : 2.2rem;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
}

.contact-cta:hover .contact-cta__icon { transform: translateX(6px); }

.copy-status {
    position : absolute;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
    clip     : rect(0 0 0 0);
    margin   : 0;
}

/* footer copyright: the year sits inline */
.ss-copyright b { font-weight: inherit; }

@media screen and (max-width: 1000px) {
    .contact-grid { grid-template-columns: 1fr 1fr; }
    .contact-card--social { grid-column: 1 / -1; }
    .contact-socials { grid-template-columns: 1fr 1fr; column-gap: 3.2rem; }
    .contact-socials li:nth-child(2) a { padding-top: 0; }
    .contact-socials li:nth-last-child(2) a { border-bottom: 0; padding-bottom: 0; }
}

@media screen and (max-width: 600px) {
    .contact-bottom { margin-top: 4rem; padding-bottom: 4.8rem; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact-card { padding: 2.2rem 2rem 2.4rem; }
    .contact-socials { grid-template-columns: 1fr; }
    .contact-socials li:nth-child(2) a { padding-top: .8rem; }
    .contact-socials li:nth-last-child(2) a { border-bottom: 1px solid var(--line); padding-bottom: .8rem; }
    .contact-cta { padding: 2rem; }
    .contact-cta__icon { width: 4.8rem; height: 4.8rem; }
}


/* ===================================================================
 * responsive polish (device sweep: 320 → 1920)
 * ------------------------------------------------------------------- */

/* justified paragraphs open up big word gaps on narrow columns */
p { text-align: left; }

/* desktop nav: the name never wraps, and gets a wider cell */
.main-nav a { white-space: nowrap; }
.main-nav li:first-child { flex-grow: 1.5; }

@media screen and (min-width: 801px) and (max-width: 1100px) {
    .main-nav a {
        letter-spacing : .22em;
        padding        : 0 1.4rem 0 1.6rem;
    }
}

/* comfortable tap targets */
.contact-card__value { padding: .6rem 0; margin: -.6rem 0; }
.intro-scrolldown { width: 4.4rem; height: 4.4rem; margin: 0 -1rem -1rem 0; }

@media screen and (max-width: 800px) {
    /* hero socials sit under the intro as a readable row */
    .intro-social {
        margin-top     : 2.4rem;
        font-size      : 1.15rem;
        letter-spacing : .22em;
    }
    .intro-social li { padding: 0 1.4rem 0 0; }
    .intro-social a { display: inline-block; padding: .8rem 0; color: var(--ink-3); }
    .intro-social a:hover { color: var(--color-1); }
}

/* leave room so the chat launcher never sits on the last row of content */
@media screen and (max-width: 600px) {
    .s-footer { padding-bottom: 10rem; }
}

/* short screens: gallery shots never exceed the viewport */
@media screen and (max-height: 600px) {
    .pm-gallery { padding-top: 2rem; padding-bottom: 2rem; }
    .pm-gallery img,
    .pm-gallery img.is-wide { height: 62dvh; max-height: none; }
    .pm-gallery--wide img { height: auto; max-height: 62dvh; width: auto; max-width: 100%; }
}


/* headings were re-levelled for a valid outline (h2 > h3); keep their look */
.timeline__title { line-height: var(--vspace-1); }
p.timeline__meta { color: var(--color-text-dark); line-height: var(--vspace-0_875); text-align: left; }


/* ===================================================================
 * THE BUILD LOOP (about section)
 * Design in Figma -> build in React Native -> wire APIs & tests -> ship.
 * The scene is laid out once at a 600px design size (1cqw = 6px) and
 * scaled as a whole with a transform (--k, set from JS), so it looks
 * identical from a 320px phone to a wide desktop and small labels are
 * never bumped up by the browser's minimum font size.
 * ------------------------------------------------------------------- */
.about-info__pic-block { padding: 0 3.2rem 0 max(2.4rem, 4vw); }
.about-info__text { margin-left: 0; }

.bl {
    --gold      : #ECC47E;
    --ok        : #6fdc8c;
    position    : relative;
    max-width   : 64rem;
    margin      : 0 auto;
}

.bl__sr, .bl__live {
    position : absolute;
    width    : 1px;
    height   : 1px;
    overflow : hidden;
    clip     : rect(0 0 0 0);
    margin   : 0;
}

/* stage ------------------------------------------------------------- */
.bl__stage {
    position       : relative;
    aspect-ratio   : 600 / 660;
    overflow       : hidden;
    border         : 1px solid var(--line);
    background     :
        radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .035), transparent 60%),
        #0f1011;
    perspective    : 1400px;
}

/* dotted canvas, like a Figma board */
.bl__stage::before {
    content          : "";
    position         : absolute;
    inset            : 0;
    background-image : radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
    background-size  : 16px 16px;
    -webkit-mask-image : radial-gradient(90% 75% at 45% 45%, #000 40%, transparent 100%);
            mask-image : radial-gradient(90% 75% at 45% 45%, #000 40%, transparent 100%);
}

.bl__glow {
    position       : absolute;
    width          : 90%;
    aspect-ratio   : 1;
    left           : -10%;
    top            : 8%;
    background     : radial-gradient(closest-side, rgba(236, 196, 126, .16), transparent 70%);
    border-radius  : 50% !important;
    transition     : transform 1.4s var(--ease-in-out), background 1.4s;
    pointer-events : none;
}

.bl[data-step="2"] .bl__glow { transform: translate(31%, -4%); }
.bl[data-step="3"] .bl__glow { transform: translate(33%, 29%); background: radial-gradient(closest-side, rgba(111, 220, 140, .12), transparent 70%); }
.bl[data-step="4"] .bl__glow { transform: translate(16%, 18%); background: radial-gradient(closest-side, rgba(111, 220, 140, .16), transparent 70%); }

.bl__scene {
    container-type  : inline-size;
    position        : absolute;
    left            : 0;
    top             : 0;
    width           : 600px;
    height          : 660px;
    transform-origin: 0 0;
    transform       : scale(var(--k, 1)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style : preserve-3d;
    transition      : transform .8s var(--ease-out);
}

.bl svg { max-width: none; flex: 0 0 auto; }

/* author chip -------------------------------------------------------- */
.bl__me {
    position        : absolute;
    left            : 5cqw;
    top             : 5cqw;
    display         : flex;
    align-items     : center;
    gap             : 2.2cqw;
    padding         : 1.4cqw 3cqw 1.4cqw 1.4cqw;
    background      : rgba(24, 25, 27, .82);
    border          : 1px solid var(--line-strong);
    backdrop-filter : blur(6px);
    z-index         : 5;
}

.bl__me img {
    width           : 8.4cqw;
    height          : 8.4cqw;
    object-fit      : cover;
    object-position : 58% 42%;
    border-radius   : 50% !important;
    filter          : saturate(.9);
}

.bl__me span  { display: flex; flex-direction: column; gap: .5cqw; }
.bl__me b     { font-size: 2.7cqw; font-weight: 600; color: var(--ink); line-height: 1.2; }
.bl__me small { display: flex; align-items: center; gap: 1.1cqw; font-size: 2.1cqw; color: var(--ink-2); line-height: 1.2; }
.bl__me small i {
    width         : 1.3cqw;
    height        : 1.3cqw;
    background    : var(--ok);
    border-radius : 50% !important;
    box-shadow    : 0 0 0 .7cqw rgba(111, 220, 140, .15);
    animation     : bl-blink 2.4s ease-in-out infinite;
}

@keyframes bl-blink { 50% { box-shadow: 0 0 0 1.2cqw rgba(111, 220, 140, 0); } }

/* phone -------------------------------------------------------------- */
.bl__phone {
    position      : absolute;
    left          : 8cqw;
    top           : 21cqw;
    width         : 40cqw;
    height        : 82cqw;
    padding       : 1.3cqw;
    background    : #0a0a0b;
    border        : 1px solid rgba(255, 255, 255, .14);
    border-radius : 6.4cqw !important;
    box-shadow    : 0 4cqw 10cqw -3cqw rgba(0, 0, 0, .85), inset 0 0 0 .5cqw #1b1c1f;
    z-index       : 2;
    transform     : translateZ(30px);
    transition    : box-shadow 1s;
}

.bl__screen {
    position      : relative;
    width         : 100%;
    height        : 100%;
    background    : #121315;
    border-radius : 5.2cqw !important;
    font-family   : var(--font-1);
}

/* camera notch */
.bl__screen::before {
    content       : "";
    position      : absolute;
    top           : 1.5cqw;
    left          : 50%;
    width         : 9cqw;
    height        : 2.4cqw;
    margin-left   : -4.5cqw;
    background    : #000;
    border-radius : 2cqw !important;
    z-index       : 3;
}

/* Figma-style selection + cursor (step 1) ------------------------------ */
.bl__select,
.bl__cursor { position: absolute; opacity: 0; pointer-events: none; z-index: 4; }

.bl__select {
    left       : 7%;
    width      : 86%;
    border     : 1.5px solid #0d99ff;
    background : rgba(13, 153, 255, .06);
}

.bl__select i {
    position   : absolute;
    width      : 1.4cqw;
    height     : 1.4cqw;
    background : #fff;
    border     : 1px solid #0d99ff;
}

.bl__select i:nth-child(1) { left: -.7cqw;  top: -.7cqw; }
.bl__select i:nth-child(2) { right: -.7cqw; top: -.7cqw; }
.bl__select i:nth-child(3) { left: -.7cqw;  bottom: -.7cqw; }
.bl__select i:nth-child(4) { right: -.7cqw; bottom: -.7cqw; }

.bl__cursor { display: flex; align-items: flex-start; gap: .4cqw; }
.bl__cursor svg { width: 3.2cqw; height: 3.2cqw; fill: #0d99ff; stroke: #fff; stroke-width: 1; filter: drop-shadow(0 .4cqw .6cqw rgba(0, 0, 0, .5)); }
.bl__cursor span {
    margin-top    : 2.4cqw;
    padding       : .4cqw 1.2cqw;
    background    : #0d99ff;
    color         : #fff;
    font-size     : 1.8cqw;
    font-weight   : 600;
    white-space   : nowrap;
    border-radius : .8cqw !important;
}

.bl[data-step="1"] .bl__select { animation: bl-select var(--dur, 3.8s) var(--ease-in-out) both; }
.bl[data-step="1"] .bl__cursor { animation: bl-cursor var(--dur, 3.8s) var(--ease-in-out) both; }

@keyframes bl-select {
    0%, 14%  { top: 18%; height: 27%;  opacity: 0; }
    20%, 38% { top: 18%; height: 27%;  opacity: 1; }
    48%, 60% { top: 48%; height: 6.5%; opacity: 1; }
    70%, 90% { top: 57%; height: 12%;  opacity: 1; }
    100%     { top: 57%; height: 12%;  opacity: 0; }
}

@keyframes bl-cursor {
    0%       { left: 120%; top: 95%; opacity: 0; }
    14%      { left: 80%;  top: 42%; opacity: 1; }
    38%      { left: 88%;  top: 43%; opacity: 1; }
    48%, 60% { left: 88%;  top: 53%; opacity: 1; }
    70%, 90% { left: 88%;  top: 67%; opacity: 1; }
    100%     { left: 110%; top: 80%; opacity: 0; }
}

/* toast (step 4) */
.bl__toast {
    position      : absolute;
    left          : 7%;
    right         : 7%;
    bottom        : 13%;
    display       : flex;
    align-items   : center;
    gap           : 1.4cqw;
    padding       : 1.6cqw 2cqw;
    background    : #fff;
    color         : #111;
    font-size     : 1.9cqw;
    font-weight   : 600;
    border-radius : 1.6cqw !important;
    box-shadow    : 0 2cqw 4cqw -1cqw rgba(0, 0, 0, .6);
    opacity       : 0;
    transform     : translateY(3cqw) scale(.96);
    transition    : opacity .5s var(--ease-out), transform .6s var(--ease-out);
    z-index       : 4;
}

.bl__toast svg { flex: 0 0 auto; width: 2.6cqw; height: 2.6cqw; fill: none; stroke: #1e9e4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bl[data-step="4"] .bl__toast { opacity: 1; transform: none; transition-delay: .5s; }

/* code editor (step 2+) ------------------------------------------------- */
.bl__code {
    position   : absolute;
    right      : 4.5cqw;
    top        : 26cqw;
    width      : 49cqw;
    background : rgba(17, 18, 20, .94);
    border     : 1px solid var(--line-strong);
    box-shadow : 0 4cqw 9cqw -3cqw rgba(0, 0, 0, .9);
    z-index    : 3;
    opacity    : 0;
    transform  : translate3d(4cqw, 2cqw, 60px);
    transition : opacity .6s var(--ease-out), transform .8s var(--ease-out), filter .6s;
}

.bl:not([data-step="1"]) .bl__code { opacity: 1; transform: translate3d(0, 0, 60px); }
.bl[data-step="3"] .bl__code,
.bl[data-step="4"] .bl__code { opacity: .5; transform: translate3d(0, -4cqw, 20px) scale(.94); filter: saturate(.6); }

.bl__win {
    display       : flex;
    align-items   : center;
    gap           : .9cqw;
    padding       : 1.4cqw 2cqw;
    border-bottom : 1px solid var(--line);
}

.bl__win i    { width: 1.3cqw; height: 1.3cqw; border-radius: 50% !important; background: #3a3b3f; }
.bl__win span { margin-left: 1.4cqw; font-family: var(--font-mono); font-size: 1.9cqw; color: var(--ink-3); }

.bl__code pre {
    margin      : 0;
    padding     : 2.2cqw 2.4cqw 2.6cqw;
    background  : transparent;
    border      : 0;
    overflow    : hidden;
    font-family : var(--font-mono);
    font-size   : 1.95cqw;
    line-height : 1.75;
    color       : #c9cbd1;
    white-space : pre;
}

.bl__code b  { font-weight: 400; }
.bl__code .k { color: #c792ea; }
.bl__code .t { color: #7fdbca; }
.bl__code .s { color: var(--gold); }
.bl__code .f { color: #82aaff; }
.bl__code .a { color: #f78c6c; }

.bl__code .ln { display: inline-block; }

.bl[data-step="2"] .bl__code .ln {
    animation       : bl-type calc(var(--c) * 26ms) steps(var(--c)) both;
    animation-delay : calc(var(--n) * 230ms + 350ms);
}

@keyframes bl-type {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* API + checks (step 3) --------------------------------------------------- */
.bl__wire {
    position   : absolute;
    left       : 48cqw;
    top        : 60cqw;
    width      : 10cqw;
    height     : 18cqw;
    overflow   : visible;
    opacity    : 0;
    transition : opacity .5s;
    z-index    : 1;
}

.bl__wire path {
    fill             : none;
    stroke           : var(--gold);
    stroke-width     : 1.5;
    stroke-dasharray : 4 5;
    vector-effect    : non-scaling-stroke;
}

.bl[data-step="3"] .bl__wire { opacity: 1; }
.bl[data-step="3"] .bl__wire path { animation: bl-flow .8s linear infinite; }

@keyframes bl-flow { to { stroke-dashoffset: -18; } }

.bl__api,
.bl__ship {
    position       : absolute;
    right          : 4.5cqw;
    top            : 73cqw;
    width          : 42cqw;
    display        : flex;
    flex-direction : column;
    gap            : 1.6cqw;
    opacity        : 0;
    transform      : translate3d(0, 3cqw, 80px);
    transition     : opacity .5s var(--ease-out), transform .7s var(--ease-out);
    z-index        : 4;
    pointer-events : none;
}

.bl[data-step="3"] .bl__api,
.bl[data-step="4"] .bl__ship { opacity: 1; transform: translate3d(0, 0, 80px); transition-delay: .15s; }

.bl__node {
    display               : grid;
    grid-template-columns : auto 1fr;
    align-items           : center;
    column-gap            : 1.6cqw;
    padding               : 2cqw 2.4cqw;
    background            : #17181a;
    border                : 1px solid var(--line-strong);
}

.bl__node b     { font-size: 2.3cqw; font-weight: 600; color: var(--ink); }
.bl__node small { grid-column: 2; font-family: var(--font-mono); font-size: 1.8cqw; color: var(--ink-3); }
.bl__node em    { font-style: normal; color: var(--ok); }

.bl__pulse {
    grid-row      : span 2;
    width         : 2cqw;
    height        : 2cqw;
    border-radius : 50% !important;
    background    : var(--ok);
    box-shadow    : 0 0 0 0 rgba(111, 220, 140, .5);
    animation     : bl-ping 1.4s ease-out infinite;
}

@keyframes bl-ping { to { box-shadow: 0 0 0 2.4cqw rgba(111, 220, 140, 0); } }

.bl__checks {
    list-style : none;
    margin     : 0 !important;
    padding    : 1.8cqw 2.4cqw;
    display    : grid;
    gap        : 1.2cqw;
    background : rgba(23, 24, 26, .92);
    border     : 1px solid var(--line);
}

.bl__checks li {
    display     : flex;
    align-items : center;
    gap         : 1.4cqw;
    margin      : 0;
    padding     : 0 !important;
    font-size   : 2.1cqw;
    line-height : 1.3;
    color       : var(--ink-2);
}

/* each check: grey ring -> green tick, in sequence */
.bl__checks li::before {
    content       : "";
    flex          : 0 0 auto;
    width         : 2.6cqw;
    height        : 2.6cqw;
    border-radius : 50% !important;
    border        : 1px solid rgba(255, 255, 255, .25);
    background    : center / 70% no-repeat;
}

.bl[data-step="3"] .bl__api li::before,
.bl[data-step="4"] .bl__ship li::before {
    animation       : bl-tick .35s var(--ease-out) both;
    animation-delay : calc(var(--i) * 550ms + 700ms);
}

@keyframes bl-tick {
    from { background-color: transparent; }
    to   {
        background-color : var(--ok);
        border-color     : var(--ok);
        background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%230b2a14' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

.bl[data-step="3"] .bl__api li,
.bl[data-step="4"] .bl__ship li { color: var(--ink); transition: color .3s; }

/* Google Play card (step 4) */
.bl__play {
    display     : flex;
    align-items : center;
    gap         : 2cqw;
    padding     : 2.2cqw 2.6cqw;
    background  : #000;
    border      : 1px solid rgba(255, 255, 255, .25);
    transform   : scale(.92);
    transition  : transform .7s cubic-bezier(.34, 1.56, .64, 1);
}

.bl[data-step="4"] .bl__play { transform: none; transition-delay: .25s; }
.bl__play svg   { width: 5cqw; height: 5cqw; }
.bl__play span  { display: flex; flex-direction: column; }
.bl__play small { font-size: 1.7cqw; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .06em; }
.bl__play b     { font-size: 3.4cqw; font-weight: 600; color: #fff; line-height: 1.1; }

.bl[data-step="4"] .bl__phone {
    box-shadow : 0 4cqw 10cqw -3cqw rgba(0, 0, 0, .85), inset 0 0 0 .5cqw #1b1c1f, 0 0 0 1px rgba(111, 220, 140, .35), 0 0 8cqw -2cqw rgba(111, 220, 140, .35);
}

/* step tabs ------------------------------------------------------------------ */
.bl__steps {
    display               : grid;
    grid-template-columns : repeat(4, minmax(0, 1fr));
    border                : 1px solid var(--line);
    border-top            : 0;
}

.bl__steps button,
.bl__steps button:focus {
    position       : relative;
    display        : flex;
    flex-direction : column;
    align-items    : flex-start;
    gap            : .2rem;
    height         : auto;
    margin         : 0;
    padding        : 1.4rem 1.4rem 1.6rem;
    border         : 0;
    border-right   : 1px solid var(--line);
    background     : transparent;
    color          : var(--ink-3);
    font-family    : var(--font-1);
    text-align     : left;
    text-transform : none;
    letter-spacing : 0;
    line-height    : 1.3;
    cursor         : pointer;
    transition     : color .3s, background-color .3s;
}

.bl__steps button:last-child { border-right: 0; }
.bl__steps button:hover { background: rgba(255, 255, 255, .025); color: var(--ink-2); }
.bl__steps button:focus-visible { outline: 2px solid var(--color-1); outline-offset: -2px; }

.bl__steps em    { font-style: normal; font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: .1em; }
.bl__steps b     { font-size: 1.5rem; font-weight: 600; color: inherit; }
.bl__steps small { font-size: 1.2rem; }

.bl__steps button[aria-selected="true"]    { color: var(--ink); }
.bl__steps button[aria-selected="true"] em { color: var(--color-1); }

/* progress: done = full, current = filling, upcoming = empty */
.bl__bar {
    position         : absolute;
    left             : 0;
    right            : 0;
    top              : -1px;
    height           : 2px;
    background       : var(--color-1);
    transform        : scaleX(0);
    transform-origin : left;
}

.bl__steps button.is-done .bl__bar { transform: scaleX(1); opacity: .35; }
.bl__steps button[aria-selected="true"] .bl__bar { animation: bl-progress var(--dur, 4s) linear both; }

@keyframes bl-progress { to { transform: scaleX(1); } }

/* paused: hover, off-screen, hidden tab */
.bl.is-paused *, .bl.is-paused *::before, .bl.is-paused *::after { animation-play-state: paused !important; }

/* reduced motion: still frames; the tabs still switch steps */
.bl.is-static *, .bl.is-static *::before, .bl.is-static *::after { animation: none !important; transition: none !important; }
.bl.is-static[data-step="1"] .bl__select { top: 18%; height: 27%; opacity: 1; }
.bl.is-static[data-step="1"] .bl__cursor { left: 88%; top: 43%; opacity: 1; }
.bl.is-static[data-step="3"] .bl__api li::before,
.bl.is-static[data-step="4"] .bl__ship li::before {
    background-color : var(--ok);
    border-color     : var(--ok);
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%230b2a14' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media screen and (max-width: 1000px) {
    .about-info__pic-block { padding: 0 6vw; }
}

@media screen and (max-width: 600px) {
    .about-info__pic-block { padding: 0 4vw; }
    .bl__steps button,
    .bl__steps button:focus { padding: 1.1rem .9rem 1.2rem; }
    .bl__steps small { display: none; }
    .bl__steps b { font-size: 1.35rem; }
}

/* Figma layers panel (step 1), highlights in sync with the selection */
.bl__layers {
    position   : absolute;
    right      : 4.5cqw;
    top        : 26cqw;
    width      : 42cqw;
    background : rgba(17, 18, 20, .94);
    border     : 1px solid var(--line-strong);
    box-shadow : 0 4cqw 9cqw -3cqw rgba(0, 0, 0, .9);
    z-index    : 3;
    opacity    : 0;
    transform  : translate3d(3cqw, 0, 40px);
    transition : opacity .5s var(--ease-out), transform .7s var(--ease-out);
}

.bl[data-step="1"] .bl__layers { opacity: 1; transform: translate3d(0, 0, 40px); transition-delay: .5s; }

.bl__layers ul { list-style: none; margin: 0 !important; padding: 1.2cqw 0; }

.bl__layers li {
    margin      : 0;
    padding     : 1cqw 2.4cqw !important;
    font-size   : 2cqw;
    line-height : 1.3;
    color       : var(--ink-2);
}

.bl__layers li em { font-style: normal; margin-right: 1.2cqw; color: var(--ink-3); }
.bl__layers .l-sub { padding-left: 5.4cqw !important; }

.bl[data-step="1"] .l-hero  { animation: bl-layer var(--dur, 3.8s) linear both; --a: 20%; --b: 38%; }
.bl[data-step="1"] .l-chips { animation: bl-layer-chips var(--dur, 3.8s) linear both; }
.bl[data-step="1"] .l-row   { animation: bl-layer-row var(--dur, 3.8s) linear both; }

@keyframes bl-layer       { 0%, 19% { background: transparent; color: var(--ink-2); } 20%, 40% { background: rgba(13, 153, 255, .22); color: #fff; } 41%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes bl-layer-chips { 0%, 47% { background: transparent; color: var(--ink-2); } 48%, 62% { background: rgba(13, 153, 255, .22); color: #fff; } 63%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes bl-layer-row   { 0%, 69% { background: transparent; color: var(--ink-2); } 70%, 92% { background: rgba(13, 153, 255, .22); color: #fff; } 93%, 100% { background: transparent; color: var(--ink-2); } }

.bl__props {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1cqw 2cqw;
    padding               : 1.6cqw 2.4cqw 2cqw;
    border-top            : 1px solid var(--line);
    font-family           : var(--font-mono);
    font-size             : 1.75cqw;
    color                 : var(--ink-3);
}

.bl__props b { font-weight: 400; color: var(--ink); }

.bl.is-static[data-step="1"] .l-hero { background: rgba(13, 153, 255, .22); color: #fff; }

/* during design the phone (and the cursor on it) sits in front of the layers panel */
.bl[data-step="1"] .bl__phone { z-index: 5; transform: translateZ(60px); }


/* ===================================================================
 * Build Loop: monochrome theme, matching the S2-K1 chat palette
 * (off-white #f2f2f0, greys, green only for "live" status dots)
 * ------------------------------------------------------------------- */
.bl {
    --w     : #f2f2f0;
    --txt   : #d4d4d6;
    --mute  : #8f9094;
    --raise : #17181a;
    --chip  : #232427;
    --gold  : var(--w);
    --live  : #5fd47a;
}

.bl__glow,
.bl[data-step="3"] .bl__glow,
.bl[data-step="4"] .bl__glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 70%); }

.bl__me small i { background: var(--live); box-shadow: 0 0 0 .7cqw rgba(95, 212, 122, .15); }

@keyframes bl-layer       { 0%, 19% { background: transparent; color: var(--ink-2); } 20%, 40% { background: rgba(255, 255, 255, .1); color: #fff; } 41%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes bl-layer-chips { 0%, 47% { background: transparent; color: var(--ink-2); } 48%, 62% { background: rgba(255, 255, 255, .1); color: #fff; } 63%, 100% { background: transparent; color: var(--ink-2); } }
@keyframes bl-layer-row   { 0%, 69% { background: transparent; color: var(--ink-2); } 70%, 92% { background: rgba(255, 255, 255, .1); color: #fff; } 93%, 100% { background: transparent; color: var(--ink-2); } }
.bl.is-static[data-step="1"] .l-hero { background: rgba(255, 255, 255, .1); }

/* code: monochrome, hierarchy through tone */
.bl__code pre { color: #8f9094; }
.bl__code .k  { color: var(--w); }
.bl__code .t  { color: #c9cacd; }
.bl__code .s  { color: #a9aaad; }
.bl__code .f  { color: #e3e3e0; }
.bl__code .a  { color: #9c9da1; }

/* API + checks */
.bl__wire path { stroke: rgba(242, 242, 240, .55); }
.bl__node em   { color: var(--w); }
.bl__pulse     { background: var(--live); }

@keyframes bl-tick {
    from { background-color: transparent; }
    to   {
        background-color : var(--w);
        border-color     : var(--w);
        background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
}

.bl.is-static[data-step="3"] .bl__api li::before,
.bl.is-static[data-step="4"] .bl__ship li::before {
    background-color : var(--w);
    border-color     : var(--w);
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ship */
.bl__toast svg { stroke: #111; }
.bl__play      { background: var(--raise); border-color: rgba(255, 255, 255, .16); }
.bl__play .gp  { fill: var(--w); }
.bl[data-step="4"] .bl__phone {
    box-shadow : 0 4cqw 10cqw -3cqw rgba(0, 0, 0, .85), inset 0 0 0 .5cqw #1b1c1f, 0 0 0 1px rgba(255, 255, 255, .22), 0 0 8cqw -2cqw rgba(255, 255, 255, .12);
}

/* step tabs follow the same palette */
.bl__bar { background: var(--w); }
.bl__steps button[aria-selected="true"] em { color: var(--w); }


/* ===================================================================
 * Build Loop: phone screen, modern light UI
 * Soft canvas, big type, frosted round buttons, image-led cards and a
 * floating CTA pill. Monochrome; the "product renders" are drawn in CSS.
 * Positions are % of the screen (~224 x 476 at the 600px design size).
 * ------------------------------------------------------------------- */
.bl__screen {
    background : #ecebe9;
    overflow   : hidden;
}

.bl__screen::before { background: #0b0b0c; }

.ui {
    position      : absolute;
    left          : 6%;
    width         : 88%;
    display       : flex;
    align-items   : center;
    border        : 1px dashed rgba(0, 0, 0, .28);
    border-radius : 2.6cqw !important;
    color         : #111;
    transition    : background-color .7s var(--ease-out), border-color .7s, box-shadow .7s;
}

.ui svg {
    flex            : 0 0 auto;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
}

.ui svg .fill { fill: currentColor; stroke: none; }

/* status bar */
.ui--status { top: 1.6%; height: 4.4%; justify-content: space-between; padding: 0 6% 0 7%; border-color: transparent; }
.ui--status b { font-size: 1.95cqw; font-weight: 600; letter-spacing: -.01em; }
.ui--status span { display: flex; align-items: center; gap: .7cqw; }
.ui--status svg { width: 1.9cqw; height: 1.9cqw; }
.ui--status svg:last-child { width: 2.6cqw; }

/* top bar: frosted round buttons + location */
.ui--top { top: 8.4%; height: 8.6%; justify-content: space-between; }

.ui-circ {
    position      : relative;
    display       : grid;
    place-items   : center;
    width         : 7.4cqw;
    height        : 7.4cqw;
    background    : rgba(255, 255, 255, .78);
    border-radius : 50% !important;
    box-shadow    : 0 .6cqw 1.6cqw -.6cqw rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(255, 255, 255, .9);
}

.ui-circ svg { width: 3cqw; height: 3cqw; }

.ui-circ i {
    position      : absolute;
    top           : 1.7cqw;
    right         : 1.8cqw;
    width         : 1.3cqw;
    height        : 1.3cqw;
    background    : #111;
    border        : .35cqw solid #fff;
    border-radius : 50% !important;
}

.ui-loc { display: flex; align-items: center; gap: .8cqw; }
.ui-loc svg { width: 2.4cqw; height: 2.4cqw; }
.ui-loc b { font-size: 2cqw; font-weight: 600; }

/* hero offer card with renders */
.ui--hero {
    top            : 19%;
    height         : 33%;
    flex-direction : column;
    align-items    : flex-start;
    justify-content: flex-end;
    padding        : 0 6% 7%;
    overflow       : hidden;
    border-radius  : 4.4cqw !important;
}

.ui-chip { display: flex; align-items: center; gap: .8cqw; margin-bottom: 1cqw; font-size: 1.6cqw; color: #55565a; }
.ui-chip svg { width: 2cqw; height: 2cqw; }
.ui-chip em { font-style: normal; }
.ui--hero b     { position: relative; font-size: 6.6cqw; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.ui--hero small { position: relative; margin-top: .9cqw; font-size: 1.85cqw; color: #55565a; }

.ui-dots { position: absolute; left: 50%; bottom: 2.6cqw; display: flex; gap: .7cqw; transform: translateX(-50%); }
.ui-dots i { width: .9cqw; height: .9cqw; border-radius: 50% !important; background: rgba(0, 0, 0, .2); }
.ui-dots i:nth-child(2) { width: 2.6cqw; border-radius: 1cqw !important; background: #111; }

/* CSS "product renders": glossy orb + graphite capsule */
.ui-render { position: absolute; pointer-events: none; }

.r-orb {
    right         : -7cqw;
    top           : -6cqw;
    width         : 25cqw;
    height        : 25cqw;
    border-radius : 50% !important;
    background    : radial-gradient(circle at 32% 28%, #ffffff 0%, #ececea 16%, #b4b5b8 48%, #5d5e62 80%, #2c2d30 100%);
    box-shadow    : -2cqw 4cqw 6cqw -2cqw rgba(0, 0, 0, .35);
}

.r-pill {
    right         : 13cqw;
    top           : 9cqw;
    width         : 15cqw;
    height        : 5.6cqw;
    border-radius : 3cqw !important;
    background    : linear-gradient(180deg, #4a4b50 0%, #1b1c1f 60%, #0f0f11 100%);
    box-shadow    : inset 0 .7cqw .9cqw rgba(255, 255, 255, .28), 0 2.4cqw 3cqw -1.4cqw rgba(0, 0, 0, .55);
    transform     : rotate(-28deg);
}

/* section title */
.ui--sec { top: 55.4%; height: 5%; justify-content: space-between; border-color: transparent; }
.ui--sec b     { font-size: 2.45cqw; font-weight: 700; letter-spacing: -.01em; }
.ui--sec small { font-size: 1.65cqw; color: #8a8a8d; }

/* collection cards (third one peeks in from the edge) */
.ui--cards {
    top           : 62%;
    height        : 21.5%;
    width         : 94%;
    gap           : 2.2cqw;
    overflow      : hidden;
    border-radius : 3.6cqw 0 0 3.6cqw !important;
}

.ui-card {
    position        : relative;
    flex            : 0 0 44%;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    justify-content : flex-end;
    padding         : 0 6% 7%;
    overflow        : hidden;
    border-radius   : 3.6cqw !important;
    background      : #dcdbd8;
    transition      : background-color .7s var(--ease-out);
}

.ui-card b     { position: relative; font-size: 2.1cqw; font-weight: 600; line-height: 1.2; }
.ui-card small { position: relative; font-size: 1.35cqw; color: #66676b; }

.r-ball {
    right         : -2cqw;
    top           : -1.5cqw;
    width         : 13cqw;
    height        : 13cqw;
    border-radius : 50% !important;
    background    : radial-gradient(circle at 34% 30%, #ffffff 0%, #d9d9d6 22%, #8d8e92 60%, #3a3b3f 100%);
    box-shadow    : -1cqw 2.2cqw 3cqw -1cqw rgba(0, 0, 0, .5);
}

.r-cap {
    right         : -1.5cqw;
    top           : 2.6cqw;
    width         : 13cqw;
    height        : 5cqw;
    border-radius : 3cqw !important;
    background    : linear-gradient(180deg, #4a4b50 0%, #1b1c1f 65%);
    box-shadow    : inset 0 .6cqw .8cqw rgba(255, 255, 255, .25), 0 2cqw 2.6cqw -1cqw rgba(0, 0, 0, .45);
    transform     : rotate(32deg);
}

/* floating CTA pill */
.ui--cta {
    top           : 86.2%;
    height        : 9%;
    left          : 14%;
    width         : 72%;
    padding       : 0 1cqw;
    gap           : 1.2cqw;
    border-radius : 6cqw !important;
}

.ui-cta-ic {
    display       : grid;
    place-items   : center;
    width         : 6.4cqw;
    height        : 6.4cqw;
    background    : #111;
    color         : #fff;
    border-radius : 50% !important;
}

.ui-cta-ic svg { width: 2.8cqw; height: 2.8cqw; }
.ui--cta b { flex: 1; text-align: center; padding-right: 6.4cqw; font-size: 2.05cqw; font-weight: 600; }

.ui-home {
    position      : absolute;
    left          : 34%;
    width         : 32%;
    bottom        : 1%;
    height        : .7cqw;
    background    : #111;
    border-radius : 1cqw !important;
    opacity       : 0;
    transition    : opacity .6s;
}

/* step 1: the wireframe draws itself, content hidden */
.ui > *, .ui-card > * { transition: opacity .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.bl[data-step="1"] .ui > * { opacity: 0; }

.bl[data-step="1"] .ui {
    animation       : bl-draw .55s var(--ease-out) both;
    animation-delay : calc(var(--i) * 160ms + 150ms);
}

@keyframes bl-draw {
    from { clip-path: inset(0 100% 100% 0); opacity: 0; }
    to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* step 2+: real surfaces */
.bl:not([data-step="1"]) .ui { border-style: solid; border-color: transparent; }
.bl:not([data-step="1"]) .ui--hero { background: linear-gradient(160deg, #f8f8f6 0%, #e2e1de 100%); box-shadow: 0 2cqw 4cqw -2.4cqw rgba(0, 0, 0, .3); }
.bl:not([data-step="1"]) .ui--cta  { background: #fff; box-shadow: 0 2cqw 4cqw -1.6cqw rgba(0, 0, 0, .28); }
.bl:not([data-step="1"]) .ui-home  { opacity: 1; }

/* step 2: content is loading: skeleton text, renders not in yet */
.bl[data-step="2"] :is(.ui-loc b, .ui-chip em, .ui--hero b, .ui--hero small, .ui--sec b, .ui-card b, .ui-card small, .ui--cta b) {
    color         : transparent;
    background    : linear-gradient(90deg, rgba(0, 0, 0, .07) 0%, rgba(0, 0, 0, .16) 50%, rgba(0, 0, 0, .07) 100%) 0 0 / 200% 100%;
    border-radius : .8cqw !important;
    animation     : bl-shimmer 1.2s linear infinite;
}

@keyframes bl-shimmer { to { background-position: -200% 0; } }

.ui-render { transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); }
.bl:is([data-step="1"], [data-step="2"]) .ui-render { opacity: 0; transform: scale(.85); }
.bl:is([data-step="1"], [data-step="2"]) .r-pill { transform: rotate(-28deg) scale(.85); }
.bl:is([data-step="1"], [data-step="2"]) .r-cap  { transform: rotate(32deg) scale(.85); }

/* step 3+: data has arrived: renders in, first card goes dark */
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 { background: linear-gradient(160deg, #2e2f33 0%, #151618 100%); color: #f2f2f0; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 small { color: #9c9da1; }
.bl:is([data-step="3"], [data-step="4"]) .r-orb  { animation: bl-float 5s ease-in-out infinite; }
.bl:is([data-step="3"], [data-step="4"]) .r-pill { animation: bl-float-pill 6s ease-in-out infinite; }

@keyframes bl-float      { 50% { transform: translateY(-1cqw); } }
@keyframes bl-float-pill { 0%, 100% { transform: rotate(-28deg); } 50% { transform: rotate(-24deg) translateY(.8cqw); } }

/* Figma selection + cursor, dark on the light canvas */
.bl__select   { border-color: #111; background: rgba(0, 0, 0, .04); }
.bl__select i { background: #fff; border-color: #111; }
.bl__cursor svg  { fill: #111; stroke: #fff; }
.bl__cursor span { background: #111; color: #fff; }

@keyframes bl-select {
    0%, 14%  { top: 19%;   left: 6%;  width: 88%; height: 33%;   opacity: 0; }
    20%, 38% { top: 19%;   left: 6%;  width: 88%; height: 33%;   opacity: 1; }
    48%, 60% { top: 62%;   left: 6%;  width: 88%; height: 21.5%; opacity: 1; }
    70%, 90% { top: 86.2%; left: 14%; width: 72%; height: 9%;    opacity: 1; }
    100%     { top: 86.2%; left: 14%; width: 72%; height: 9%;    opacity: 0; }
}

@keyframes bl-cursor {
    0%       { left: 120%; top: 100%; opacity: 0; }
    14%      { left: 82%;  top: 48%;  opacity: 1; }
    38%      { left: 90%;  top: 50%;  opacity: 1; }
    48%, 60% { left: 90%;  top: 81%;  opacity: 1; }
    70%, 90% { left: 82%;  top: 93%;  opacity: 1; }
    100%     { left: 110%; top: 100%; opacity: 0; }
}

.bl.is-static[data-step="1"] .bl__select { top: 19%; left: 6%; width: 88%; height: 33%; opacity: 1; }
.bl.is-static[data-step="1"] .bl__cursor { left: 90%; top: 50%; opacity: 1; }

/* release toast: dark pill on the light canvas */
.bl__toast { background: #111; color: #f2f2f0; left: 9%; right: 9%; bottom: 15%; border-radius: 5cqw !important; padding: 1.6cqw 2.4cqw; }
.bl__toast svg { stroke: #f2f2f0; }

/* refinements: renders stay top-right, clear of the copy */
.r-orb  { right: -6cqw; top: -7cqw; width: 19cqw; height: 19cqw; }
.r-pill { right: 5cqw; top: 6.4cqw; width: 12cqw; height: 4.6cqw; }
.ui-dots { left: auto; right: 4cqw; bottom: 3cqw; transform: none; }
.ui--hero { padding-bottom: 6%; }
.ui--hero small { white-space: nowrap; }
.ui-chip { white-space: nowrap; }

.ui-card b,
.ui-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-card b { font-size: 1.95cqw; }

.ui--cta b { padding-right: 0; white-space: nowrap; }
.ui--cta   { padding-right: 3cqw; }

.bl__toast { left: 6%; right: 6%; font-size: 1.75cqw; white-space: nowrap; gap: 1.1cqw; padding: 1.6cqw 2cqw; }
.r-pill { top: 4.6cqw; right: 6cqw; }

/* header: greeting + title left, two compact frosted actions right */
.ui--top { top: 8.2%; height: 9%; padding: 0 1%; }
.ui-hello { display: flex; flex-direction: column; gap: .2cqw; }
.ui-hello small { font-size: 1.6cqw; color: #8a8a8d; line-height: 1.2; }
.ui-hello b { font-size: 3.6cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.ui-acts { display: flex; gap: 1.4cqw; }
.ui-circ { width: 6.4cqw; height: 6.4cqw; background: #fff; box-shadow: 0 .8cqw 2cqw -1cqw rgba(0, 0, 0, .22); }
.ui-circ svg { width: 2.6cqw; height: 2.6cqw; }
.ui-circ i { top: 1.4cqw; right: 1.5cqw; width: 1.1cqw; height: 1.1cqw; border-width: .3cqw; }
.bl[data-step="2"] :is(.ui-hello b, .ui-hello small) {
    color: transparent;
    background: linear-gradient(90deg, rgba(0,0,0,.07) 0%, rgba(0,0,0,.16) 50%, rgba(0,0,0,.07) 100%) 0 0 / 200% 100%;
    border-radius: .8cqw !important;
    animation: bl-shimmer 1.2s linear infinite;
}


/* ===================================================================
 * Build Loop phone: glass edition
 * Full-bleed studio renders, frosted controls, Inter type.
 * ------------------------------------------------------------------- */
.bl__screen { font-family: "Inter", var(--font-1); background: #e9e8e5; }
.bl__screen .ui { letter-spacing: -.01em; }

/* status + header float over the hero image */
.ui--status, .ui--top { z-index: 2; }

/* frosted round buttons */
.ui-circ {
    background         : rgba(255, 255, 255, .42);
    backdrop-filter    : blur(14px) saturate(1.4);
    -webkit-backdrop-filter : blur(14px) saturate(1.4);
    box-shadow         : inset 0 0 0 1px rgba(255, 255, 255, .6), 0 1cqw 2.4cqw -1.2cqw rgba(0, 0, 0, .25);
}

.ui-hello small { color: #6f7073; }

/* hero: full-bleed render, edge to edge, rounded bottom */
.ui--hero {
    top           : 0;
    left          : 0;
    width         : 100%;
    height        : 54%;
    padding       : 0 7% 7%;
    border-radius : 0 0 5.4cqw 5.4cqw !important;
    border-width  : 0 0 1px 0;
}

.ui--hero::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : url("../images/bl-hero.webp") 62% 40% / cover no-repeat;
    opacity    : 0;
    transform  : scale(1.06);
    transition : opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
}

/* soft scrim so the copy sits on the image */
.ui--hero::after {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : linear-gradient(180deg, rgba(233, 232, 229, .55) 0%, rgba(233, 232, 229, 0) 26%, rgba(233, 232, 229, 0) 52%, rgba(233, 232, 229, .78) 100%);
    opacity    : 0;
    transition : opacity .9s;
}

.ui--hero > * { position: relative; z-index: 1; }
.ui--hero b     { font-size: 7.2cqw; font-weight: 700; letter-spacing: -.045em; }
.ui--hero small { font-size: 1.95cqw; color: #4a4b4f; }
.ui-chip {
    padding            : .7cqw 1.6cqw .7cqw 1.2cqw;
    margin-bottom      : 1.4cqw;
    border-radius      : 4cqw !important;
    background         : rgba(255, 255, 255, .45);
    backdrop-filter    : blur(10px);
    -webkit-backdrop-filter : blur(10px);
    box-shadow         : inset 0 0 0 1px rgba(255, 255, 255, .6);
    color              : #2c2d30;
}
.ui-dots { left: 50%; right: auto; bottom: 2.4cqw; transform: translateX(-50%); }

.bl:not([data-step="1"]) .ui--hero { background: #dddcd9; box-shadow: none; }
.bl:is([data-step="3"], [data-step="4"]) .ui--hero::before { opacity: 1; transform: none; }
.bl:is([data-step="3"], [data-step="4"]) .ui--hero::after  { opacity: 1; }

/* section + image cards with frosted labels */
.ui--sec   { top: 57%; }
.ui--sec b { font-size: 2.6cqw; letter-spacing: -.02em; }
.ui--cards { top: 63.5%; height: 21%; }

.ui-card { padding: 1.2cqw; background: #d6d5d2; }

.ui-card::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : center 35% / cover no-repeat;
    opacity    : 0;
    transform  : scale(1.08);
    transition : opacity .9s var(--ease-out), transform 1.4s var(--ease-out);
}
.ui-card.c1::before { background-image: url("../images/bl-card-a.webp"); }
.ui-card.c2::before { background-image: url("../images/bl-card-b.webp"); }
.ui-card.c3::before { background-image: url("../images/bl-hero.webp"); background-position: 30% 50%; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card::before { opacity: 1; transform: none; transition-delay: .25s; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 { background: #2a2b2e; }

.ui-glass {
    position           : relative;
    display            : flex;
    flex-direction     : column;
    gap                : .2cqw;
    padding            : 1.2cqw 1.6cqw;
    border-radius      : 2.6cqw !important;
    background         : rgba(255, 255, 255, .38);
    backdrop-filter    : blur(12px) saturate(1.3);
    -webkit-backdrop-filter : blur(12px) saturate(1.3);
    box-shadow         : inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.ui-card .ui-glass b     { font-size: 1.85cqw; color: #111; }
.ui-card .ui-glass small { font-size: 1.3cqw; color: #3d3e42; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass { background: rgba(20, 20, 22, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass b     { color: #fff; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass small { color: rgba(255, 255, 255, .7); }
.bl[data-step="2"] :is(.ui-glass b, .ui-glass small) { color: transparent; background: rgba(0, 0, 0, .1); border-radius: .8cqw !important; }

/* frosted CTA pill */
.ui--cta { top: 86.6%; }
.bl:not([data-step="1"]) .ui--cta {
    background         : rgba(255, 255, 255, .55);
    backdrop-filter    : blur(14px) saturate(1.4);
    -webkit-backdrop-filter : blur(14px) saturate(1.4);
    box-shadow         : inset 0 0 0 1px rgba(255, 255, 255, .7), 0 2cqw 4cqw -1.8cqw rgba(0, 0, 0, .3);
}

/* Figma selection follows the new layout */
@keyframes bl-select {
    0%, 14%  { top: 0;     left: 0;   width: 100%; height: 54%;  opacity: 0; }
    20%, 38% { top: 0;     left: 0;   width: 100%; height: 54%;  opacity: 1; }
    48%, 60% { top: 63.5%; left: 6%;  width: 88%;  height: 21%;  opacity: 1; }
    70%, 90% { top: 86.6%; left: 14%; width: 72%;  height: 9%;   opacity: 1; }
    100%     { top: 86.6%; left: 14%; width: 72%;  height: 9%;   opacity: 0; }
}
.bl.is-static[data-step="1"] .bl__select { top: 0; left: 0; width: 100%; height: 54%; }
.bl.is-static .ui--hero::before, .bl.is-static .ui--hero::after, .bl.is-static .ui-card::before { transition: none; }

/* coloured product renders: hero uses the sofa, cards use light glass labels */
.ui--hero::before { background-position: 55% 30%; }
.ui--hero::after  { background: linear-gradient(180deg, rgba(225, 224, 221, .5) 0%, rgba(225, 224, 221, 0) 24%, rgba(225, 224, 221, 0) 50%, rgba(225, 224, 221, .82) 100%); }
.ui-card.c3::before { background-position: 75% 50%; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 { background: #d6d5d2; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass { background: rgba(255, 255, 255, .38); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass b     { color: #111; }
.bl:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass small { color: #3d3e42; }

/* hero copy in white over a warm dark scrim, like a product shot */
.ui--hero { padding-bottom: 9%; }
.ui--hero::after { background: linear-gradient(180deg, rgba(225, 224, 221, .55) 0%, rgba(225, 224, 221, 0) 26%, rgba(40, 30, 26, 0) 46%, rgba(40, 30, 26, .55) 100%); }
.bl:is([data-step="3"], [data-step="4"]) .ui--hero b     { color: #fff; }
.bl:is([data-step="3"], [data-step="4"]) .ui--hero small { color: rgba(255, 255, 255, .85); }
.bl:is([data-step="3"], [data-step="4"]) .ui-chip { background: rgba(255, 255, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.bl:is([data-step="3"], [data-step="4"]) .ui-dots i { background: rgba(255, 255, 255, .45); }
.bl:is([data-step="3"], [data-step="4"]) .ui-dots i:nth-child(2) { background: #fff; }
.ui-dots { bottom: 3cqw; }

/* card labels fit their titles */
.ui-glass { padding: 1cqw 1.3cqw; }
.ui-card .ui-glass b     { font-size: 1.7cqw; overflow: visible; text-overflow: clip; }
.ui-card .ui-glass small { font-size: 1.25cqw; }
.ui--hero { padding-bottom: 11%; }
.ui-dots  { bottom: 2cqw; }
.ui-card .ui-glass b { font-size: 1.55cqw; }
.ui--hero > .ui-dots { position: absolute; left: 50%; bottom: 2.4cqw; transform: translateX(-50%); }

/* cursor name tag: the screen clips overflow, so the tag sits to the
   left of the pointer where it always stays inside the phone */
.bl__cursor { z-index: 6; }
.bl__cursor span {
    position   : absolute;
    right      : 2.4cqw;
    top        : 2.2cqw;
    margin-top : 0;
    background : #111;
    color      : #fff;
    box-shadow : 0 .6cqw 1.4cqw -.4cqw rgba(0, 0, 0, .35);
}
.bl__cursor span { top: auto; bottom: 2.4cqw; right: 2.2cqw; }

/* Figma-style cursor: pointer first, name tag below-right of it (never over it).
   The path keeps the cursor far enough inside the screen for the tag to fit. */
.bl__cursor { display: flex; align-items: flex-start; gap: 0; }
.bl__cursor svg { position: relative; z-index: 1; }
.bl__cursor span {
    position   : static;
    margin     : 2.8cqw 0 0 .6cqw;
    right      : auto;
    top        : auto;
    bottom     : auto;
}

@keyframes bl-cursor {
    0%       { left: 100%; top: 100%; opacity: 0; }
    14%      { left: 60%;  top: 42%;  opacity: 1; }
    38%      { left: 64%;  top: 44%;  opacity: 1; }
    48%, 60% { left: 62%;  top: 77%;  opacity: 1; }
    70%, 90% { left: 58%;  top: 88%;  opacity: 1; }
    100%     { left: 90%;  top: 100%; opacity: 0; }
}
.bl.is-static[data-step="1"] .bl__cursor { left: 64%; top: 44%; }
.bl__cursor span { margin: 2cqw 0 0 -.4cqw; padding: .35cqw 1.1cqw; font-size: 1.7cqw; }
@keyframes bl-cursor {
    0%       { left: 52%; top: 30%; opacity: 0; }
    14%      { left: 50%; top: 42%; opacity: 1; }
    38%      { left: 54%; top: 44%; opacity: 1; }
    48%, 60% { left: 52%; top: 76%; opacity: 1; }
    70%, 90% { left: 48%; top: 88%; opacity: 1; }
    100%     { left: 50%; top: 84%; opacity: 0; }
}
.bl.is-static[data-step="1"] .bl__cursor { left: 54%; top: 44%; }
.bl__cursor span { margin: 2.2cqw 0 0 0; }


/* ===================================================================
 * Build Loop: scene switcher + "AI automation" web-app scene
 * The web scene uses px at the 600x660 design size (scaled via --k).
 * ------------------------------------------------------------------- */
.bls { position: relative; max-width: 64rem; margin: 0 auto; }
.bls .bl[hidden] { display: none; }

.bls__switch {
    display       : inline-flex;
    gap           : .4rem;
    margin        : 0 0 1.2rem;
    padding       : .4rem;
    border        : 1px solid var(--line);
    background    : #111214;
}

.bls__switch button,
.bls__switch button:focus {
    display        : inline-flex;
    align-items    : center;
    gap            : .8rem;
    height         : 3.4rem;
    margin         : 0;
    padding        : 0 1.4rem;
    border         : 0;
    background     : transparent;
    color          : var(--ink-3);
    font-family    : var(--font-1);
    font-size      : 1.3rem;
    font-weight    : 500;
    letter-spacing : 0;
    text-transform : none;
    line-height    : 1;
    cursor         : pointer;
    transition     : background-color .25s, color .25s;
}

.bls__switch button:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.bls__switch button:focus-visible { outline: 2px solid var(--color-1); outline-offset: 2px; }
.bls__switch button[aria-selected="true"] { background: #f2f2f0; color: #111; }
.bls__switch button i { width: .7rem; height: .7rem; border-radius: 50% !important; background: currentColor; opacity: .35; }
.bls__switch button[aria-selected="true"] i { background: #5fd47a; opacity: 1; }

/* ---------- browser window ---------- */
.bl--web .wf {
    position      : absolute;
    left          : 24px;
    top           : 104px;
    width         : 552px;
    height        : 352px;
    border-radius : 14px !important;
    overflow      : hidden;
    background    : #f1f0ed;
    box-shadow    : 0 30px 70px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12);
    transform     : translateZ(30px);
    font-family   : "Inter", var(--font-1);
    color         : #111;
    letter-spacing: -.01em;
}

.wf__bar {
    height        : 30px;
    display       : flex;
    align-items   : center;
    gap           : 6px;
    padding       : 0 12px;
    background    : #e3e2df;
    border-bottom : 1px solid rgba(0, 0, 0, .06);
}

.wf__bar > i { width: 9px; height: 9px; border-radius: 50% !important; background: #c8c7c4; }
.wf__bar > span {
    margin        : 0 auto;
    padding       : 3px 14px;
    border-radius : 6px !important;
    background    : rgba(255, 255, 255, .7);
    font-size     : 10.5px;
    color         : #6b6c70;
}

.wf__state {
    display       : flex;
    align-items   : center;
    gap           : 5px;
    padding       : 3px 9px;
    border-radius : 20px !important;
    background    : #fff;
    font-style    : normal;
    font-size     : 10px;
    font-weight   : 600;
    color         : #6b6c70;
    box-shadow    : 0 0 0 1px rgba(0, 0, 0, .06);
}

.wf__state i { width: 6px; height: 6px; border-radius: 50% !important; background: #b9b8b4; }
.wf__active { display: none; }
.bl--web[data-step="4"] .wf__state { color: #166b31; background: #e6f6ea; }
.bl--web[data-step="4"] .wf__state i { background: #2fb55a; box-shadow: 0 0 0 3px rgba(47, 181, 90, .2); }
.bl--web[data-step="4"] .wf__draft { display: none; }
.bl--web[data-step="4"] .wf__active { display: inline; }

.wf__body { position: relative; display: flex; height: 322px; }

.wf__side {
    flex           : 0 0 44px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 12px;
    padding-top    : 14px;
    background     : #e9e8e5;
    border-right   : 1px solid rgba(0, 0, 0, .05);
    color          : #8a8b8f;
}

.wf svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wf__side svg { width: 17px; height: 17px; }
.wf__side svg:first-child { color: #111; }

.wf__canvas {
    position         : relative;
    width            : 508px;
    height           : 322px;
    background-color : #f6f5f2;
    background-image : radial-gradient(rgba(0, 0, 0, .09) 1px, transparent 1.2px);
    background-size  : 14px 14px;
    overflow         : hidden;
}

/* ---------- wires + packets ---------- */
.wf__wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf__wires path { fill: none; stroke: #b4b3af; stroke-width: 1.6; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke .4s; }
.bl--web:not([data-step="1"]) .wf__wires path { stroke-dashoffset: 0; }
.bl--web[data-step="1"] .wf__wires path { animation: wf-draw .7s var(--ease-out) forwards; }
.bl--web[data-step="1"] .w0 { animation-delay: 1.1s; }
.bl--web[data-step="1"] :is(.w1, .w2, .w3) { animation-delay: 3.05s; }
@keyframes wf-draw { to { stroke-dashoffset: 0; } }

.bl--web:is([data-step="3"], [data-step="4"]) .wf__wires path { stroke: #111; stroke-dasharray: 4 5; stroke-dashoffset: 0; }

.wf__pkt {
    position      : absolute;
    left          : 0;
    top           : 0;
    width         : 9px;
    height        : 9px;
    margin        : -4.5px 0 0 -4.5px;
    border-radius : 50% !important;
    background    : #111;
    box-shadow    : 0 0 0 4px rgba(17, 17, 17, .12);
    opacity       : 0;
    offset-rotate : 0deg;
}

.p0 { offset-path: path("M146 161 H186"); }
.p1 { offset-path: path("M330 161 C 346 161, 346 65, 362 65"); }
.p2 { offset-path: path("M330 161 H362"); }
.p3 { offset-path: path("M330 161 C 346 161, 346 257, 362 257"); }

.bl--web[data-step="3"] .p0 { animation: wf-pkt .6s ease-in-out .35s both; }
.bl--web[data-step="3"] :is(.p1, .p2, .p3) { animation: wf-pkt .6s ease-in-out 2.1s both; }
.bl--web[data-step="4"] .wf__pkt { animation: wf-pkt-loop 1.4s ease-in-out infinite; }
.bl--web[data-step="4"] :is(.p1, .p2, .p3) { animation-delay: .7s; }

@keyframes wf-pkt      { 0% { offset-distance: 0%; opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes wf-pkt-loop { 0% { offset-distance: 0%; opacity: 0; } 15%, 75% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- nodes ---------- */
.wf__node {
    position      : absolute;
    display       : flex;
    align-items   : center;
    gap           : 9px;
    width         : 132px;
    height        : 50px;
    padding       : 0 10px;
    border-radius : 12px !important;
    background    : #fff;
    box-shadow    : 0 8px 18px -10px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .06);
    transition    : box-shadow .4s, transform .5s var(--ease-out);
}

.wf__node > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wf__node b     { font-size: 12px; font-weight: 600; line-height: 1.2; }
.wf__node small { font-size: 10px; color: #6f7074; line-height: 1.25; white-space: nowrap; }

.wf__ic {
    flex          : 0 0 auto;
    display       : grid;
    place-items   : center;
    width         : 28px;
    height        : 28px;
    border-radius : 8px !important;
    background    : #111;
    color         : #fff;
}

.wf__ic svg { width: 15px; height: 15px; }

.n-trig  { left: 14px;  top: 136px; }
.n-agent { left: 186px; top: 126px; width: 144px; height: 70px; border-radius: 14px !important; }
.n-crm   { left: 362px; top: 40px; }
.n-slack { left: 362px; top: 136px; }
.n-mail  { left: 362px; top: 232px; }

.n-agent .wf__ic { width: 32px; height: 32px; border-radius: 10px !important; background: linear-gradient(135deg, #2b2c30, #000); }

.a-think, .a-done { display: none; }
.bl--web[data-step="3"] .a-idle { display: none; }
.bl--web[data-step="3"] .a-think { display: block; animation: wf-swap 2.1s steps(1) both; }
.bl--web[data-step="3"] .a-done  { animation: wf-swap-in 2.1s steps(1) both; }
.bl--web[data-step="4"] .a-idle { display: none; }
.bl--web[data-step="4"] .a-done { display: block; }
@keyframes wf-swap    { 0%, 28% { display: none; } 29%, 99% { display: block; } 100% { display: none; } }
@keyframes wf-swap-in { 0%, 99% { display: none; } 100% { display: block; } }
.a-think em { font-style: normal; animation: wf-dots 1s steps(4) infinite; display: inline-block; overflow: hidden; vertical-align: bottom; width: 12px; }
@keyframes wf-dots { from { width: 0; } to { width: 12px; } }

/* agent glows while thinking */
.bl--web[data-step="3"] .n-agent { animation: wf-think 2.1s ease both; }
@keyframes wf-think {
    0%, 28%  { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .06); }
    40%, 90% { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35), 0 0 0 2px #111, 0 0 0 7px rgba(17, 17, 17, .08); }
    100%     { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .06); }
}
.bl--web[data-step="2"] .n-agent { box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35), 0 0 0 2px #111; }

/* success ticks on nodes */
.wf__ok {
    position      : absolute;
    top           : -6px;
    right         : -6px;
    width         : 16px;
    height        : 16px;
    border-radius : 50% !important;
    background    : #2fb55a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5 10 16.5 18 8' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
    box-shadow    : 0 0 0 2px #fff;
    opacity       : 0;
    transform     : scale(.4);
}

.bl--web[data-step="3"] .wf__ok { animation: wf-ok .35s cubic-bezier(.34, 1.56, .64, 1) both; }
.bl--web[data-step="3"] .n-trig  .wf__ok { animation-delay: .9s; }
.bl--web[data-step="3"] .n-agent .wf__ok { animation-delay: 2.0s; }
.bl--web[data-step="3"] :is(.n-crm, .n-slack, .n-mail) .wf__ok { animation-delay: 2.75s; }
.bl--web[data-step="4"] .wf__ok { opacity: 1; transform: none; }
@keyframes wf-ok { to { opacity: 1; transform: none; } }

/* step 1: nodes are placed one by one, wires draw */
.bl--web[data-step="1"] .wf__node { animation: wf-place .45s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i) * 600ms + 300ms); }
@keyframes wf-place { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

.bl--web[data-step="1"] .wf__cursor { animation: wf-cursor var(--dur, 3.8s) var(--ease-in-out) both; }
.bl--web .wf__cursor { left: 0; top: 0; }
@keyframes wf-cursor {
    0%       { left: 150px; top: 290px; opacity: 0; }
    8%       { left: 150px; top: 182px; opacity: 1; }
    24%      { left: 300px; top: 190px; opacity: 1; }
    40%      { left: 440px; top: 86px;  opacity: 1; }
    56%      { left: 440px; top: 182px; opacity: 1; }
    72%      { left: 440px; top: 278px; opacity: 1; }
    90%      { left: 380px; top: 296px; opacity: 1; }
    100%     { left: 380px; top: 296px; opacity: 0; }
}

/* ---------- step 2: inspector ---------- */
.wf__inspect {
    position      : absolute;
    top           : 10px;
    right         : 10px;
    bottom        : 10px;
    width         : 232px;
    padding       : 14px;
    border-radius : 14px !important;
    background    : rgba(255, 255, 255, .82);
    backdrop-filter : blur(14px) saturate(1.3);
    -webkit-backdrop-filter : blur(14px) saturate(1.3);
    box-shadow    : 0 18px 40px -16px rgba(0, 0, 0, .4), 0 0 0 1px rgba(0, 0, 0, .06);
    opacity       : 0;
    transform     : translateX(30px);
    transition    : opacity .45s var(--ease-out), transform .6s var(--ease-out);
    pointer-events: none;
}

.bl--web[data-step="2"] .wf__inspect { opacity: 1; transform: none; transition-delay: .2s; }

.wf__ih { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.wf__ih .wf__ic { width: 24px; height: 24px; border-radius: 7px !important; }
.wf__ih b { font-size: 13px; font-weight: 600; }

.wf__inspect label {
    display        : block;
    margin         : 10px 0 4px;
    font-size      : 9px;
    font-weight    : 600;
    letter-spacing : .08em;
    text-transform : uppercase;
    color          : #8a8b8f;
}

.wf__field {
    padding       : 7px 9px;
    border-radius : 8px !important;
    background    : #f3f2ef;
    box-shadow    : inset 0 0 0 1px rgba(0, 0, 0, .06);
    font-size     : 10.5px;
    color         : #2c2d30;
}

.wf__prompt { display: flex; flex-direction: column; gap: 2px; min-height: 58px; font-family: var(--font-mono); font-size: 9.6px; line-height: 1.45; }
.tl { display: block; white-space: nowrap; overflow: hidden; }
.bl--web[data-step="2"] .wf__prompt .tl { animation: bl-type calc(var(--c) * 34ms) steps(var(--c)) both; animation-delay: calc(var(--n) * 900ms - 100ms); }

.wf__tools { display: flex; gap: 5px; }
.wf__tools span {
    padding       : 4px 9px;
    border-radius : 20px !important;
    background    : #111;
    color         : #fff;
    font-size     : 10px;
    font-weight   : 500;
}

.bl--web[data-step="2"] .wf__tools span { animation: wf-place .4s cubic-bezier(.34, 1.4, .64, 1) both; }
.bl--web[data-step="2"] .wf__tools span:nth-child(1) { animation-delay: 3.1s; }
.bl--web[data-step="2"] .wf__tools span:nth-child(2) { animation-delay: 3.25s; }
.bl--web[data-step="2"] .wf__tools span:nth-child(3) { animation-delay: 3.4s; }

/* ---------- below the window: run log, reply, stats ---------- */
.wf__log,
.wf__reply,
.wf__stats {
    position   : absolute;
    top        : 478px;
    background : rgba(17, 18, 20, .94);
    border     : 1px solid var(--line-strong);
    box-shadow : 0 24px 50px -24px rgba(0, 0, 0, .9);
    opacity    : 0;
    transform  : translate3d(0, 14px, 60px);
    transition : opacity .5s var(--ease-out), transform .7s var(--ease-out);
}

.wf__log   { left: 24px; width: 300px; }
.wf__reply { left: 340px; width: 236px; padding: 14px 16px; }
.wf__stats { left: 340px; width: 236px; padding: 14px 16px; }

.bl--web:is([data-step="3"], [data-step="4"]) .wf__log { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: .2s; }
.bl--web[data-step="3"] .wf__reply { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: 1.9s; }
.bl--web[data-step="4"] .wf__stats { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: .3s; }

.wf__log .bl__win span { font-size: 11px; }
.wf__log .bl__checks { border: 0; background: none; padding: 12px 14px 14px; gap: 9px; }
.wf__log .bl__checks li { font-size: 12px; color: var(--ink-2); }

.bl--web[data-step="3"] .wf__log li::before { animation: bl-tick .35s var(--ease-out) both; }
.bl--web[data-step="3"] .wf__log li:nth-child(1)::before { animation-delay: .9s; }
.bl--web[data-step="3"] .wf__log li:nth-child(2)::before { animation-delay: 2.0s; }
.bl--web[data-step="3"] .wf__log li:nth-child(3)::before { animation-delay: 2.75s; }
.bl--web[data-step="3"] .wf__log li:nth-child(4)::before { animation-delay: 2.95s; }
.bl--web[data-step="4"] .wf__log li::before,
.bl.is-static .wf__log li::before {
    background-color : #f2f2f0;
    border-color     : #f2f2f0;
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5 10 17.5 19 7' fill='none' stroke='%23111' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.bl--web:is([data-step="3"], [data-step="4"]) .wf__log li { color: var(--ink); }

.wf__reply small { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); }
.wf__reply svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.wf__reply p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); text-align: left; }
.bl--web[data-step="3"] .wf__reply .tl { animation: bl-type calc(var(--c) * 26ms) steps(var(--c)) both; animation-delay: calc(var(--n) * 520ms + 1.9s); }

.wf__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wf__kpis span  { display: flex; flex-direction: column; gap: 2px; }
.wf__kpis small { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.wf__kpis b     { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }

.wf__spark { display: flex; align-items: flex-end; gap: 5px; height: 54px; margin-top: 14px; }
.wf__spark i {
    flex             : 1;
    height           : calc(var(--h) * 100%);
    background       : linear-gradient(180deg, #f2f2f0, rgba(242, 242, 240, .35));
    transform        : scaleY(0);
    transform-origin : bottom;
}
.bl--web[data-step="4"] .wf__spark i { animation: wf-bar .6s var(--ease-out) both; }
.bl--web[data-step="4"] .wf__spark i:nth-child(n) { animation-delay: calc(.5s + var(--h) * .5s); }
@keyframes wf-bar { to { transform: none; } }
.bl.is-static .wf__spark i { transform: none; }

/* reduced motion: show the finished workflow */
.bl--web.is-static .wf__wires path { stroke-dashoffset: 0; }

/* agent status lines: stacked and crossfaded (no display animation) */
.n-agent > span:nth-child(2) { position: relative; }
.n-agent small { display: block; }
.n-agent .a-think,
.n-agent .a-done { position: absolute; left: 0; bottom: 0; opacity: 0; }
.bl--web[data-step="3"] .a-idle,
.bl--web[data-step="4"] .a-idle { display: block; opacity: 0; }
.bl--web[data-step="3"] .a-think { display: block; animation: wf-think-txt 2.1s linear both; }
.bl--web[data-step="3"] .a-done  { display: block; animation: wf-done-txt 2.1s linear both; }
.bl--web[data-step="4"] .a-done  { display: block; opacity: 1; animation: none; }
@keyframes wf-think-txt { 0%, 28% { opacity: 0; } 30%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wf-done-txt  { 0%, 96% { opacity: 0; } 100% { opacity: 1; } }


/* ===================================================================
 * Build Loop: "Website" scene (Forma landing page)
 * ------------------------------------------------------------------- */
.bl--site .wf {
    position      : absolute;
    left          : 24px;
    top           : 104px;
    width         : 552px;
    height        : 352px;
    border-radius : 14px !important;
    overflow      : hidden;
    background    : #faf9f6;
    box-shadow    : 0 30px 70px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .12);
    transform     : translateZ(30px);
    font-family   : "Inter", var(--font-1);
    color         : #111;
    letter-spacing: -.01em;
}

.ws__url em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.ws__url svg { width: 10px; height: 10px; }
.u-live { display: none !important; }
.bl--site[data-step="4"] .u-dev  { display: none; }
.bl--site[data-step="4"] .u-live { display: inline-flex !important; color: #111; }
.bl--site[data-step="4"] .wf__state { color: #166b31; background: #e6f6ea; }
.bl--site[data-step="4"] .wf__state i { background: #2fb55a; box-shadow: 0 0 0 3px rgba(47, 181, 90, .2); }
.bl--site[data-step="4"] .wf__draft { display: none; }
.bl--site[data-step="4"] .wf__active { display: inline; }

.ws__page { display: block; background: #faf9f6; }

.ws__blk {
    position      : absolute;
    border        : 1px dashed rgba(0, 0, 0, .25);
    border-radius : 12px !important;
    transition    : border-color .6s, background-color .6s;
}

.ws__nav  { left: 0; top: 0; width: 552px; height: 40px; display: flex; align-items: center; gap: 22px; padding: 0 20px; border-radius: 0 !important; border-width: 0 0 1px; }
.ws__copy { left: 26px; top: 62px; width: 256px; height: 152px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 2px; }
.ws__img  { left: 300px; top: 58px; width: 226px; height: 160px; overflow: hidden; }
.ws__grid { left: 26px; top: 232px; width: 500px; height: 74px; display: flex; gap: 10px; border-color: transparent; }

.ws__logo  { font-size: 15px; font-weight: 700; letter-spacing: -.03em; }
.ws__links { display: flex; gap: 16px; flex: 1; font-size: 11px; color: #6b6c70; }
.ws__links i { font-style: normal; }

.ws__copy small { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8b8f; }
.ws__copy b     { font-size: 27px; font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
.ws__copy p     { margin: 0; font-size: 11px; color: #5c5d61; text-align: left; }
.ws__ctas       { display: flex; gap: 8px; margin-top: 6px; }

.ws__btn {
    display       : inline-flex;
    align-items   : center;
    gap           : 5px;
    padding       : 7px 12px;
    border-radius : 20px !important;
    background    : #111;
    color         : #fff;
    font-size     : 10.5px;
    font-weight   : 600;
}

.ws__btn svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws__btn--ghost { background: transparent; color: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.ws__btn--sm { padding: 5px 11px; }

.ws__img::before,
.ws__grid span::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    background : center / cover no-repeat;
    opacity    : 0;
    transform  : scale(1.06);
    transition : opacity .9s var(--ease-out), transform 1.3s var(--ease-out);
}

.ws__img::before { background-image: url("../images/bl-hero.webp"); background-position: 55% 40%; }

.ws__grid span {
    position      : relative;
    flex          : 1;
    overflow      : hidden;
    border-radius : 12px !important;
    background    : #ebeae6;
    border        : 1px dashed rgba(0, 0, 0, .25);
}

.ws__grid .g1::before { background-image: url("../images/bl-card-a.webp"); }
.ws__grid .g2::before { background-image: url("../images/bl-card-b.webp"); }
.ws__grid .g3::before { background-image: url("../images/bl-hero.webp"); background-position: 75% 50%; }

/* step 1: wireframe draws, content hidden */
.ws__blk > * { transition: opacity .6s var(--ease-out); }
.bl--site[data-step="1"] .ws__blk > * { opacity: 0; }
.bl--site[data-step="1"] .ws__blk { animation: bl-draw .55s var(--ease-out) both; animation-delay: calc(var(--i) * 220ms + 200ms); }

/* step 2+: real surfaces */
.bl--site:not([data-step="1"]) .ws__blk,
.bl--site:not([data-step="1"]) .ws__grid span { border-style: solid; border-color: transparent; }
.bl--site:not([data-step="1"]) .ws__nav { border-color: rgba(0, 0, 0, .06); }
.bl--site:not([data-step="1"]) .ws__img { background: #e6e5e1; }

/* step 2: text is skeleton until the build finishes */
.bl--site[data-step="2"] :is(.ws__copy small, .ws__copy b, .ws__copy p, .ws__links i, .ws__logo) {
    color         : transparent;
    background    : linear-gradient(90deg, rgba(0, 0, 0, .07) 0%, rgba(0, 0, 0, .16) 50%, rgba(0, 0, 0, .07) 100%) 0 0 / 200% 100%;
    border-radius : 4px !important;
    animation     : bl-shimmer 1.2s linear infinite;
}

/* step 3+: images in */
.bl--site:is([data-step="3"], [data-step="4"]) :is(.ws__img, .ws__grid span)::before { opacity: 1; transform: none; }
.bl--site:is([data-step="3"], [data-step="4"]) .ws__grid span:nth-child(2)::before { transition-delay: .12s; }
.bl--site:is([data-step="3"], [data-step="4"]) .ws__grid span:nth-child(3)::before { transition-delay: .24s; }

/* selection + cursor (step 1), in px inside the page */
.bl--site .ws__select { left: 0; top: 0; }
.bl--site[data-step="1"] .ws__select { animation: ws-select var(--dur, 3.8s) var(--ease-in-out) both; }
.bl--site[data-step="1"] .ws__cursor { animation: ws-cursor var(--dur, 3.8s) var(--ease-in-out) both; }
.bl--site .ws__cursor { left: 0; top: 0; }

@keyframes ws-select {
    0%, 14%  { left: 26px;  top: 62px;  width: 256px; height: 152px; opacity: 0; }
    20%, 38% { left: 26px;  top: 62px;  width: 256px; height: 152px; opacity: 1; }
    48%, 60% { left: 300px; top: 58px;  width: 226px; height: 160px; opacity: 1; }
    70%, 90% { left: 26px;  top: 232px; width: 500px; height: 74px;  opacity: 1; }
    100%     { left: 26px;  top: 232px; width: 500px; height: 74px;  opacity: 0; }
}

@keyframes ws-cursor {
    0%       { left: 200px; top: 300px; opacity: 0; }
    14%      { left: 230px; top: 150px; opacity: 1; }
    38%      { left: 250px; top: 176px; opacity: 1; }
    48%, 60% { left: 430px; top: 190px; opacity: 1; }
    70%, 90% { left: 400px; top: 262px; opacity: 1; }
    100%     { left: 400px; top: 262px; opacity: 0; }
}

.bl--site.is-static[data-step="1"] .ws__select { left: 26px; top: 62px; width: 256px; height: 152px; opacity: 1; }

/* ---------- cards below the window ---------- */
.ws__card,
.ws__phone {
    position   : absolute;
    opacity    : 0;
    transform  : translate3d(0, 14px, 60px);
    transition : opacity .5s var(--ease-out), transform .7s var(--ease-out), filter .5s;
}

.ws__card {
    top        : 478px;
    left       : 24px;
    width      : 300px;
    background : rgba(17, 18, 20, .94);
    border     : 1px solid var(--line-strong);
    box-shadow : 0 24px 50px -24px rgba(0, 0, 0, .9);
}

/* step 2: code */
.ws__code pre { margin: 0; padding: 12px 14px 14px; background: transparent; border: 0; overflow: hidden; font-family: var(--font-mono); font-size: 11.2px; line-height: 1.7; color: #8f9094; white-space: pre; }
.ws__code b  { font-weight: 400; }
.ws__code .k { color: #f2f2f0; }
.ws__code .t { color: #c9cacd; }
.ws__code .s { color: #a9aaad; }
.ws__code .f { color: #e3e3e0; }
.ws__code .a { color: #9c9da1; }
.ws__code .ln { display: inline-block; }
.ws__code .bl__win span { font-size: 11px; }
.bl--site[data-step="2"] .ws__code { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: .2s; }
.bl--site[data-step="2"] .ws__code .ln { animation: bl-type calc(var(--c) * 30ms) steps(var(--c)) both; animation-delay: calc(var(--n) * 330ms + 400ms); }

/* step 3: Lighthouse + phone preview */
.ws__lh { padding: 14px 16px 16px; }
.ws__lh > small { font-size: 11px; color: var(--ink-3); }
.ws__gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.ws__g { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ws__g svg { width: 50px; height: 50px; transform: rotate(-90deg); fill: none; }
.ws__g circle { stroke-width: 3.2; }
.ws__g .t { stroke: rgba(255, 255, 255, .1); }
.ws__g .v { stroke: #5fd47a; stroke-linecap: round; stroke-dasharray: 94.25; stroke-dashoffset: 94.25; }
.ws__g b { position: absolute; top: 15px; left: 0; right: 0; text-align: center; font-size: 14px; font-weight: 600; color: #f2f2f0; }
.ws__g small { font-size: 9.5px; color: var(--ink-3); text-align: center; line-height: 1.2; white-space: nowrap; }

.bl--site:is([data-step="3"], [data-step="4"]) .ws__lh { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: .2s; }
.bl--site[data-step="3"] .ws__g .v { animation: ws-gauge 1.2s var(--ease-out) both; }
.bl--site[data-step="3"] .ws__g:nth-child(1) .v { animation-delay: .6s; }
.bl--site[data-step="3"] .ws__g:nth-child(2) .v { animation-delay: .8s; }
.bl--site[data-step="3"] .ws__g:nth-child(3) .v { animation-delay: 1.0s; }
.bl--site[data-step="3"] .ws__g:nth-child(4) .v { animation-delay: 1.2s; }
.bl--site[data-step="4"] .ws__g .v,
.bl--site.is-static .ws__g .v { stroke-dashoffset: 0; }
@keyframes ws-gauge { to { stroke-dashoffset: 0; } }
.bl--site[data-step="4"] .ws__lh { opacity: 0; transform: translate3d(0, -10px, 60px); transition-delay: 0s; }

.ws__phone {
    left          : 446px;
    top           : 466px;
    width         : 104px;
    height        : 176px;
    padding       : 5px;
    border-radius : 18px !important;
    background    : #0a0a0b;
    box-shadow    : 0 24px 50px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.ws__pscreen {
    position       : relative;
    height         : 100%;
    display        : flex;
    flex-direction : column;
    gap            : 6px;
    padding        : 14px 8px 8px;
    border-radius  : 14px !important;
    background     : #faf9f6;
    overflow       : hidden;
}

.ws__pscreen .pn { height: 6px; width: 40%; border-radius: 3px !important; background: #111; }
.ws__pscreen b   { font-size: 10px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: #111; }
.ws__pscreen .pi { height: 56px; border-radius: 8px !important; background: url("../images/bl-hero.webp") 55% 40% / cover; }
.ws__pscreen .pb { height: 14px; width: 56%; border-radius: 10px !important; background: #111; }
.ws__pscreen span { display: flex; gap: 4px; }
.ws__pscreen span i { flex: 1; height: 26px; border-radius: 6px !important; background: url("../images/bl-card-a.webp") center / cover; }
.ws__pscreen span i + i { background-image: url("../images/bl-card-b.webp"); }

.bl--site[data-step="3"] .ws__phone { opacity: 1; transform: translate3d(0, 0, 80px); transition-delay: 1.4s; }

/* step 4: deployed + visitors */
.ws__deploy {
    display     : flex;
    align-items : center;
    gap         : 12px;
    padding     : 14px 16px;
}

.ws__tri { display: grid; place-items: center; width: 34px; height: 34px; background: #f2f2f0; color: #111; }
.ws__tri svg, .ws__ok svg { width: 16px; height: 16px; }
.ws__tri .fill { fill: currentColor; }
.ws__deploy > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ws__deploy b { font-size: 14px; font-weight: 600; color: var(--ink); }
.ws__deploy small { font-size: 11px; color: var(--ink-3); }
.ws__ok { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50% !important; background: #2fb55a; color: #fff; }
.ws__ok svg { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.ws__visits { left: 340px; width: 236px; padding: 14px 16px; }
.ws__visits > span { display: flex; flex-direction: column; gap: 2px; }
.ws__visits small { font-size: 10px; color: var(--ink-3); }
.ws__visits b { font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; }
.ws__visits .wf__spark { height: 46px; margin-top: 10px; }

.bl--site[data-step="4"] :is(.ws__deploy, .ws__visits) { opacity: 1; transform: translate3d(0, 0, 60px); transition-delay: .35s; }
.bl--site[data-step="4"] .ws__visits { transition-delay: .55s; }
.bl--site[data-step="4"] .ws__visits .wf__spark i { animation: wf-bar .6s var(--ease-out) both; animation-delay: calc(.7s + var(--h) * .5s); }
.bl--site[data-step="1"] .ws__grid > span { opacity: 1; }
.bl--site[data-step="1"] .ws__nav { border-style: dashed; border-color: rgba(0, 0, 0, .2); }
.wf__inspect { background: rgba(255, 255, 255, .97); }


/* ===================================================================
 * Build Loop: profile chip + dark, minimal desktop scenes
 * Browser chrome matches the project cards (eMenu, Auralion...).
 * ------------------------------------------------------------------- */

/* --- profile: a small, tidy chip on its own row, never behind a UI --- */
.bl .bl__me {
    left            : 24px;
    top             : 20px;
    gap             : 9px;
    padding         : 5px 14px 5px 5px;
    border          : 1px solid rgba(255, 255, 255, .08);
    border-radius   : 30px !important;
    background      : rgba(255, 255, 255, .03);
    backdrop-filter : none;
    z-index         : 6;
}

.bl .bl__me img { width: 26px; height: 26px; }
.bl .bl__me span { flex-direction: row; align-items: baseline; gap: 8px; }
.bl .bl__me b { font-size: 12px; font-weight: 600; letter-spacing: -.01em; }
.bl .bl__me small { gap: 6px; font-size: 11px; color: #8d8e91; }
.bl .bl__me small i { width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(95, 212, 122, .15); }

/* desktop scenes sit below the chip */
.bl--web .wf,
.bl--site .wf { top: 68px; height: 352px; }
.wf__log, .wf__reply, .wf__stats, .ws__card { top: 440px; }
.ws__phone { top: 432px; }

/* --- dark browser chrome, same as the project cards --- */
.bl--web .wf,
.bl--site .wf {
    border-radius : 12px !important;
    background    : #0f0f10;
    color         : #f2f2f0;
    box-shadow    : 0 34px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1);
}

.wf__bar {
    height        : 32px;
    gap           : 6px;
    padding       : 0 14px;
    background    : #1c1c1f;
    border-bottom : 1px solid rgba(255, 255, 255, .06);
}

.wf__bar > i { width: 10px; height: 10px; background: #3a3a3e; }

.wf__bar > span {
    margin        : 0 auto 0 12px;
    padding       : 3px 14px;
    border-radius : 99px !important;
    background    : rgba(255, 255, 255, .05);
    color         : #8d8e91;
    font-size     : 11px;
}

.wf__state {
    background : rgba(255, 255, 255, .05);
    color      : #8d8e91;
    box-shadow : none;
}
.wf__state i { background: #5b5c60; }
.bl--web[data-step="4"] .wf__state,
.bl--site[data-step="4"] .wf__state { color: #8fe0a5; background: rgba(95, 212, 122, .1); }
.bl--web[data-step="4"] .wf__state i,
.bl--site[data-step="4"] .wf__state i { background: #5fd47a; box-shadow: 0 0 0 3px rgba(95, 212, 122, .18); }

.wf__body { height: 320px; }

/* ===================== AI automation: dark ===================== */
.wf__side {
    background   : #121314;
    border-right : 1px solid rgba(255, 255, 255, .06);
    color        : #5f6064;
}
.wf__side svg:first-child { color: #f2f2f0; }

.wf__canvas {
    height           : 320px;
    background-color : #0c0d0e;
    background-image : radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px);
}

.wf__wires path { stroke: #36373b; }
.bl--web:is([data-step="3"], [data-step="4"]) .wf__wires path { stroke: #c9cacd; }

.wf__pkt { background: #f2f2f0; box-shadow: 0 0 0 4px rgba(242, 242, 240, .14), 0 0 12px rgba(242, 242, 240, .5); }

.wf__node {
    background : #18191b;
    box-shadow : 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px -14px rgba(0, 0, 0, .9);
}
.wf__node b     { color: #f2f2f0; }
.wf__node small { color: #8d8e91; }

.wf__ic { background: #f2f2f0; color: #111; }
.n-agent .wf__ic { background: linear-gradient(135deg, #ffffff, #c9c9c6); }

.bl--web[data-step="2"] .n-agent { box-shadow: 0 0 0 1.5px #f2f2f0, 0 10px 22px -14px rgba(0, 0, 0, .9); }
@keyframes wf-think {
    0%, 28%  { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px -14px rgba(0, 0, 0, .9); }
    40%, 90% { box-shadow: 0 0 0 1.5px #f2f2f0, 0 0 0 6px rgba(242, 242, 240, .08), 0 10px 22px -14px rgba(0, 0, 0, .9); }
    100%     { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px -14px rgba(0, 0, 0, .9); }
}

.wf__ok { box-shadow: 0 0 0 2px #0c0d0e; }

.wf__inspect {
    background : #161719;
    box-shadow : 0 0 0 1px rgba(255, 255, 255, .09), 0 20px 40px -18px rgba(0, 0, 0, .9);
    backdrop-filter : none;
    -webkit-backdrop-filter : none;
}
.wf__ih b { color: #f2f2f0; }
.wf__inspect label { color: #6f7074; }
.wf__field { background: #0f1011; color: #c9cacd; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.wf__tools span { background: #f2f2f0; color: #111; }

/* ======================= Website: dark ======================= */
.ws__page { background: #0c0d0e; }

.ws__blk { border-color: rgba(255, 255, 255, .2); }
.ws__grid span { background: #17181a; border-color: rgba(255, 255, 255, .2); }
.bl--site:not([data-step="1"]) .ws__nav { border-color: rgba(255, 255, 255, .06); }
.bl--site[data-step="1"] .ws__nav { border-color: rgba(255, 255, 255, .18); }
.bl--site:not([data-step="1"]) .ws__img { background: #17181a; }

.ws__logo        { color: #f2f2f0; }
.ws__links       { color: #8d8e91; }
.ws__copy small  { color: #8d8e91; }
.ws__copy b      { color: #f2f2f0; }
.ws__copy p      { color: #a3a4a7; }

.ws__btn         { background: #f2f2f0; color: #111; }
.ws__btn--ghost  { background: transparent; color: #f2f2f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

.bl--site[data-step="2"] :is(.ws__copy small, .ws__copy b, .ws__copy p, .ws__links i, .ws__logo) {
    background : linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 100%) 0 0 / 200% 100%;
}

.ws__url em, .bl--site[data-step="4"] .u-live { color: #c9cacd !important; }

/* selection + cursor read as light on the dark canvas */
.bl--site .ws__select, .bl--web .ws__select { border-color: #f2f2f0; background: rgba(255, 255, 255, .04); }
.bl--site .ws__select i { background: #0c0d0e; border-color: #f2f2f0; }
.bl--web .wf__cursor svg, .bl--site .ws__cursor svg { fill: #f2f2f0; stroke: #111; }
.bl--web .wf__cursor span, .bl--site .ws__cursor span { background: #f2f2f0; color: #111; }

/* phone preview in dark mode too */
.ws__pscreen     { background: #0c0d0e; }
.ws__pscreen .pn { background: #f2f2f0; }
.ws__pscreen b   { color: #f2f2f0; }
.ws__pscreen .pb { background: #f2f2f0; }

/* cards below the window: same quiet surface */
.wf__log, .wf__reply, .wf__stats, .ws__card {
    background : #111214;
    border     : 1px solid rgba(255, 255, 255, .08);
    box-shadow : 0 20px 44px -24px rgba(0, 0, 0, .9);
}

/* spacing: chip row, window, cards */
.bl .bl__me { top: 18px; }
.bl--web .wf, .bl--site .wf { top: 78px; }
.wf__log, .wf__reply, .wf__stats, .ws__card { top: 456px; }
.ws__phone { top: 448px; }

/* AI cursor ends inside the canvas so its name tag is never clipped */
@keyframes wf-cursor {
    0%   { left: 150px; top: 270px; opacity: 0; }
    8%   { left: 150px; top: 182px; opacity: 1; }
    24%  { left: 300px; top: 190px; opacity: 1; }
    40%  { left: 440px; top: 86px;  opacity: 1; }
    56%  { left: 440px; top: 182px; opacity: 1; }
    72%  { left: 420px; top: 250px; opacity: 1; }
    90%  { left: 360px; top: 250px; opacity: 1; }
    100% { left: 360px; top: 250px; opacity: 0; }
}
.bl .bl__me img { margin: 0; }
@keyframes ws-cursor {
    0%       { left: 210px; top: 240px; opacity: 0; }
    14%      { left: 230px; top: 150px; opacity: 1; }
    38%      { left: 250px; top: 176px; opacity: 1; }
    48%, 60% { left: 430px; top: 190px; opacity: 1; }
    70%, 90% { left: 400px; top: 262px; opacity: 1; }
    100%     { left: 400px; top: 262px; opacity: 0; }
}
.ws__nav .ws__btn--sm { padding: 4px 10px; font-size: 10px; background: transparent; color: #f2f2f0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }


/* ===================================================================
 * Build Loop polish: compact chrome, detailed AI canvas, dark phone
 * ------------------------------------------------------------------- */

/* ---- compact browser chrome (both desktop scenes) ---- */
.wf__bar { height: 28px; padding: 0 12px; gap: 5px; }
.wf__bar > i { width: 8px; height: 8px; }
.wf__bar > span {
    margin      : 0 auto 0 10px;
    padding     : 2px 10px;
    font-size   : 9.5px;
    line-height : 1.5;
}
.wf__bar > span svg { width: 8px; height: 8px; }
.wf__state { padding: 1px 7px; gap: 4px; font-size: 8.5px; line-height: 1.6; }
.wf__state i { width: 5px; height: 5px; }
.wf__body, .wf__canvas { height: 324px; }

/* ---- AI canvas: toolbar, labels, ports, zoom ---- */
.wf__tb {
    position      : absolute;
    left          : 0;
    right         : 0;
    top           : 0;
    height        : 34px;
    display       : flex;
    align-items   : center;
    gap           : 8px;
    padding       : 0 12px;
    border-bottom : 1px solid rgba(255, 255, 255, .06);
    background    : rgba(12, 13, 14, .9);
    z-index       : 3;
    font-size     : 10.5px;
    color         : #6f7074;
}
.wf__crumb { display: flex; align-items: center; gap: 4px; }
.wf__crumb svg { width: 10px; height: 10px; }
.wf__crumb b { font-weight: 600; color: #f2f2f0; }
.wf__tb em { font-style: normal; padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 4px !important; font-size: 9px; color: #8d8e91; }
.wf__saved { margin-left: auto; font-size: 9.5px; }
.wf__run {
    display       : flex;
    align-items   : center;
    gap           : 5px;
    padding       : 4px 10px;
    border-radius : 6px !important;
    background    : #f2f2f0;
    color         : #111;
    font-size     : 10px;
    font-weight   : 600;
}
.wf__run svg { width: 9px; height: 9px; fill: currentColor; stroke: none; }
.bl--web[data-step="3"] .wf__run { background: #5fd47a; }

.wf__lbl {
    position       : absolute;
    font-size      : 8.5px;
    font-weight    : 600;
    letter-spacing : .12em;
    text-transform : uppercase;
    color          : #5f6064;
}
.wf__lbl.l1 { left: 14px;  top: 136px; }
.wf__lbl.l2 { left: 186px; top: 126px; }
.wf__lbl.l3 { left: 362px; top: 42px; }

.wf__zoom {
    position      : absolute;
    left          : 12px;
    bottom        : 12px;
    display       : flex;
    align-items   : center;
    gap           : 8px;
    padding       : 3px 8px;
    border        : 1px solid rgba(255, 255, 255, .08);
    border-radius : 6px !important;
    background    : #141517;
    font-size     : 9.5px;
    color         : #8d8e91;
}
.wf__zoom i { font-style: normal; color: #6f7074; }
.wf__zoom b { font-weight: 500; color: #c9cacd; }

/* nodes shifted below the toolbar, all centred on y = 177 */
.n-trig  { top: 152px; }
.n-agent { top: 142px; }
.n-crm   { top: 56px; }
.n-slack { top: 152px; }
.n-mail  { top: 248px; }

.p0 { offset-path: path("M146 177 H186"); }
.p1 { offset-path: path("M330 177 C 346 177, 346 81, 362 81"); }
.p2 { offset-path: path("M330 177 H362"); }
.p3 { offset-path: path("M330 177 C 346 177, 346 273, 362 273"); }

/* connection ports */
.wf__node::before,
.wf__node::after {
    content       : "";
    position      : absolute;
    top           : 50%;
    width         : 7px;
    height        : 7px;
    margin-top    : -3.5px;
    border-radius : 50% !important;
    background    : #0c0d0e;
    box-shadow    : 0 0 0 1.5px #5f6064;
}
.wf__node::before { left: -4px; }
.wf__node::after  { right: -4px; }
.n-trig::before, .n-crm::after, .n-slack::after, .n-mail::after { display: none; }
.bl--web:is([data-step="3"], [data-step="4"]) .wf__node::before,
.bl--web:is([data-step="3"], [data-step="4"]) .wf__node::after { box-shadow: 0 0 0 1.5px #c9cacd; }

.wf__node { gap: 10px; padding: 0 12px; }
.wf__node b { font-size: 11.5px; }
.wf__node small { font-size: 9.5px; }
.wf__ic { width: 26px; height: 26px; border-radius: 7px !important; }
.wf__ic svg { width: 14px; height: 14px; }
.n-agent { padding: 0 14px; }
.n-agent .wf__ic { width: 30px; height: 30px; border-radius: 9px !important; }

.wf__inspect { top: 44px; }
.wf__ok { top: -5px; right: -5px; width: 14px; height: 14px; }

@keyframes wf-cursor {
    0%   { left: 150px; top: 270px; opacity: 0; }
    8%   { left: 150px; top: 196px; opacity: 1; }
    24%  { left: 300px; top: 204px; opacity: 1; }
    40%  { left: 440px; top: 100px; opacity: 1; }
    56%  { left: 440px; top: 196px; opacity: 1; }
    72%  { left: 420px; top: 258px; opacity: 1; }
    90%  { left: 360px; top: 258px; opacity: 1; }
    100% { left: 360px; top: 258px; opacity: 0; }
}

/* ===================================================================
 * Mobile app in dark mode
 * ------------------------------------------------------------------- */
.bl[data-scene-id="mobile"] .bl__screen { background: #0c0d0e; }
.bl[data-scene-id="mobile"] .bl__screen::before { background: #000; }
.bl[data-scene-id="mobile"] .ui { color: #f2f2f0; border-color: rgba(255, 255, 255, .22); }
.bl[data-scene-id="mobile"] .ui--status { border-color: transparent; }
.bl[data-scene-id="mobile"] .ui-hello small { color: #8d8e91; }
.bl[data-scene-id="mobile"] .ui-circ {
    background : rgba(255, 255, 255, .1);
    color      : #f2f2f0;
    box-shadow : inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.bl[data-scene-id="mobile"] .ui-circ i { background: #f2f2f0; border-color: #0c0d0e; }

.bl[data-scene-id="mobile"]:not([data-step="1"]) .ui--hero { background: #17181a; }
.bl[data-scene-id="mobile"] .ui--hero::after {
    background : linear-gradient(180deg, rgba(12, 13, 14, .55) 0%, rgba(12, 13, 14, 0) 26%, rgba(12, 13, 14, 0) 46%, rgba(12, 13, 14, .78) 100%);
}

.bl[data-scene-id="mobile"] .ui--sec small { color: #6f7074; }
.bl[data-scene-id="mobile"] .ui-card,
.bl[data-scene-id="mobile"]:is([data-step="3"], [data-step="4"]) .ui-card.c1 { background: #17181a; }
.bl[data-scene-id="mobile"] .ui-glass,
.bl[data-scene-id="mobile"]:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass {
    background : rgba(12, 13, 14, .5);
    box-shadow : inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.bl[data-scene-id="mobile"] .ui-card .ui-glass b,
.bl[data-scene-id="mobile"]:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass b { color: #f2f2f0; }
.bl[data-scene-id="mobile"] .ui-card .ui-glass small,
.bl[data-scene-id="mobile"]:is([data-step="3"], [data-step="4"]) .ui-card.c1 .ui-glass small { color: rgba(242, 242, 240, .65); }

.bl[data-scene-id="mobile"]:not([data-step="1"]) .ui--cta {
    background : rgba(255, 255, 255, .1);
    box-shadow : inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2cqw 4cqw -1.8cqw rgba(0, 0, 0, .6);
}
.bl[data-scene-id="mobile"] .ui-cta-ic { background: #f2f2f0; color: #111; }
.bl[data-scene-id="mobile"] .ui-home { background: #f2f2f0; }

.bl[data-scene-id="mobile"][data-step="2"] :is(.ui-hello b, .ui-hello small, .ui-chip em, .ui--hero b, .ui--hero small, .ui--sec b, .ui-glass b, .ui-glass small, .ui--cta b) {
    color      : transparent;
    background : linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 100%) 0 0 / 200% 100%;
}

.bl[data-scene-id="mobile"] .bl__select   { border-color: #f2f2f0; background: rgba(255, 255, 255, .05); }
.bl[data-scene-id="mobile"] .bl__select i { background: #0c0d0e; border-color: #f2f2f0; }
.bl[data-scene-id="mobile"] .bl__cursor svg  { fill: #f2f2f0; stroke: #111; }
.bl[data-scene-id="mobile"] .bl__cursor span { background: #f2f2f0; color: #111; }
.bl[data-scene-id="mobile"] .bl__toast { background: #f2f2f0; color: #111; }
.bl[data-scene-id="mobile"] .bl__toast svg { stroke: #1e9e4a; }
.wf__lbl.l1 { top: 132px; }
.wf__lbl.l2 { top: 122px; }
.wf__lbl.l3 { top: 40px; }
.wf__tb { height: 30px; font-size: 10px; }
.wf__run { padding: 3px 8px; font-size: 9.5px; }
.wf__inspect { top: 40px; }


/* ===================================================================
 * Build Loop: typographic reset. The template's 32px line-height was
 * inflating every pill, chip and label inside the mockups.
 * ------------------------------------------------------------------- */
.bl .bl__scene *  { line-height: 1.25; }
.bl .bl__scene pre,
.bl .bl__scene pre * { line-height: 1.7; }
.bl .wf__prompt,
.bl .wf__prompt * { line-height: 1.5; }
.bl .wf__reply p, .bl .wf__reply p * { line-height: 1.5; }

/* website buttons: compact */
.ws__btn { padding: 5px 11px; font-size: 10px; gap: 4px; }
.ws__btn svg { width: 10px; height: 10px; }
.ws__nav .ws__btn--sm { padding: 3px 9px; font-size: 9.5px; }
.ws__ctas { gap: 6px; margin-top: 8px; }

/* AI: compact tools, run button, toolbar */
.wf__tools { gap: 4px; }
.wf__tools span { padding: 3px 8px; font-size: 9.5px; }
.wf__tb { height: 30px; font-size: 10px; }
.wf__run { padding: 4px 9px; font-size: 9.5px; gap: 4px; }
.wf__inspect { top: 40px; }
.wf__lbl.l1 { top: 134px; }
.wf__lbl.l2 { top: 124px; }
.wf__lbl.l3 { top: 40px; }

/* alignment: everything in the desktop scenes shares one depth plane,
   so the window and the cards below it line up exactly */
.bl--web .wf, .bl--site .wf { transform: none; }
.wf__log, .wf__reply, .wf__stats, .ws__card, .ws__phone { transform: translate3d(0, 14px, 0); }
.bl--web:is([data-step="3"], [data-step="4"]) .wf__log,
.bl--web[data-step="3"] .wf__reply,
.bl--web[data-step="4"] .wf__stats,
.bl--site[data-step="2"] .ws__code,
.bl--site:is([data-step="3"], [data-step="4"]) .ws__lh,
.bl--site[data-step="3"] .ws__phone,
.bl--site[data-step="4"] :is(.ws__deploy, .ws__visits) { transform: none; }
.bl--site[data-step="4"] .ws__lh { transform: translate3d(0, -10px, 0); }

/* website: one content column, 26px margins everywhere */
.ws__nav  { padding: 0 26px; }
.ws__copy { top: 58px; height: 160px; }

/* website: even 18px vertical rhythm */
.ws__grid { top: 236px; height: 70px; }
@keyframes ws-select {
    0%, 14%  { left: 26px;  top: 58px;  width: 256px; height: 160px; opacity: 0; }
    20%, 38% { left: 26px;  top: 58px;  width: 256px; height: 160px; opacity: 1; }
    48%, 60% { left: 300px; top: 58px;  width: 226px; height: 160px; opacity: 1; }
    70%, 90% { left: 26px;  top: 236px; width: 500px; height: 70px;  opacity: 1; }
    100%     { left: 26px;  top: 236px; width: 500px; height: 70px;  opacity: 0; }
}
.bl--site.is-static[data-step="1"] .ws__select { top: 58px; height: 160px; }

/* mobile: same 22px gap under the profile chip as the desktop scenes */
.bl[data-scene-id="mobile"] .bl__phone  { top: 13cqw; }
.bl[data-scene-id="mobile"] :is(.bl__layers, .bl__code) { top: 18cqw; }
.bl[data-scene-id="mobile"] :is(.bl__api, .bl__ship) { top: 65cqw; }
.bl[data-scene-id="mobile"] .bl__wire { top: 52cqw; }


/* ===================================================================
 * Expertise with Hairline: figure stage + skill index
 * ------------------------------------------------------------------- */
.about-expertise { padding-top: calc(5 * var(--space)); }

.xph {
    display         : flex;
    align-items     : flex-end;
    justify-content : space-between;
    gap             : 3.2rem;
    margin-bottom   : 4rem;
}

.xph .text-pretitle { margin: 0 0 .8rem; }

.xph__title {
    margin         : 0;
    font-family    : var(--font-2);
    font-size      : clamp(3.4rem, 4vw, 5.6rem);
    line-height    : 1.05;
    letter-spacing : -.01em;
    color          : var(--ink);
    text-align     : right;
}

.xph__title em { font-style: normal; color: var(--color-1); }

.xpg {
    display               : grid;
    grid-template-columns : minmax(0, 1fr) minmax(0, 1.15fr);
    gap                   : 4.8rem;
    align-items           : start;
}

/* ---------- stage ---------- */
.xps {
    --hairline-plate  : #101113;
    --hairline-hi     : #ECC47E;
    --hairline-edge   : #c9cacd;
    --hairline-mid    : #55565a;
    --hairline-lo     : #26272a;
    --hairline-stroke : 1;
    position   : sticky;
    top        : 10rem;
    margin     : 0;
    border     : 1px solid var(--line-strong);
    background : #101113;
}

/* faint corner ticks, like a drafting sheet */
.xps::before, .xps::after {
    content        : "";
    position       : absolute;
    width          : 14px;
    height         : 14px;
    border-color   : var(--color-1);
    border-style   : solid;
    opacity        : .55;
    pointer-events : none;
    z-index        : 2;
}
.xps::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.xps::after  { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

.xps__bar {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    padding         : 1.4rem 1.8rem;
    border-bottom   : 1px solid var(--line);
    font-family     : var(--font-mono);
    font-size       : 1.15rem;
    letter-spacing  : .12em;
    text-transform  : uppercase;
    color           : var(--ink-3);
}

.xps__tag { color: var(--color-1); }

.xps__fig {
    position     : relative;
    aspect-ratio : 5 / 4;
    overflow     : hidden;
}

.xps__layer {
    position   : absolute;
    inset      : 0;
    opacity    : 0;
    transform  : scale(.985);
    filter     : blur(4px);
    transition : opacity .5s var(--ease-out), transform .7s var(--ease-out), filter .5s var(--ease-out);
}

.xps__layer.is-in  { opacity: 1; transform: none; filter: none; }
.xps__layer.is-out { opacity: 0; transform: scale(1.01); filter: blur(4px); }
.xps__layer svg    { display: block; width: 100%; height: auto; max-width: none; }

.xps__cap {
    display         : flex;
    justify-content : space-between;
    align-items     : baseline;
    gap             : 1.6rem;
    padding         : 1.4rem 1.8rem 1.6rem;
    border-top      : 1px solid var(--line);
}

.xps__name {
    font-family : var(--font-2);
    font-weight : 400;
    font-size   : 2rem;
    line-height : 1.2;
    color       : var(--ink);
}

.xps__read {
    flex           : 0 0 auto;
    font-family    : var(--font-mono);
    font-size      : 1.15rem;
    letter-spacing : .06em;
    color          : var(--ink-3);
}

.xps__hint {
    position       : absolute;
    left           : 1.8rem;
    bottom         : 6.6rem;
    font-size      : 1.1rem;
    letter-spacing : .08em;
    color          : var(--ink-3);
    opacity        : .7;
    pointer-events : none;
    transition     : opacity .4s;
}

.xps:hover .xps__hint { opacity: 0; }

/* ---------- skill index ---------- */
.xpl {
    list-style : none;
    margin     : 0;
    border-top : 1px solid var(--line);
}

.xpl li { margin: 0; padding: 0; }

.xpr,
.xpr:focus {
    position       : relative;
    width          : 100%;
    display        : grid;
    grid-template-columns : 4rem minmax(0, 1fr) auto 1.8rem;
    align-items    : center;
    gap            : 1.6rem;
    height         : auto;
    margin         : 0;
    padding        : 1.6rem .4rem;
    border         : 0;
    border-bottom  : 1px solid var(--line);
    background     : transparent;
    color          : var(--ink);
    font-family    : var(--font-1);
    text-align     : left;
    text-transform : none;
    letter-spacing : 0;
    line-height    : 1.3;
    cursor         : pointer;
    transition     : background-color .35s;
}

/* gold rule that grows along the left edge of the active row */
.xpr::before {
    content          : "";
    position         : absolute;
    left             : 0;
    top              : -1px;
    bottom           : -1px;
    width            : 2px;
    background       : var(--color-1);
    transform        : scaleY(0);
    transform-origin : top;
    transition       : transform .45s var(--ease-out);
}

.xpr em {
    font-style     : normal;
    font-family    : var(--font-mono);
    font-size      : 1.2rem;
    letter-spacing : .1em;
    color          : var(--ink-3);
    padding-left   : 1.2rem;
    transition     : color .3s;
}

.xpr__t { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

.xpr b {
    font-family    : var(--font-2);
    font-weight    : 400;
    font-size      : clamp(2rem, 1.9vw, 2.6rem);
    line-height    : 1.15;
    color          : var(--ink-2);
    transition     : color .3s, transform .45s var(--ease-out);
}

.xpr small {
    font-size   : 1.35rem;
    line-height : 1.4;
    color       : var(--ink-3);
    transition  : color .3s, transform .45s var(--ease-out);
}

.xpr__tag {
    font-style     : normal;
    font-size      : 1.05rem;
    letter-spacing : .14em;
    text-transform : uppercase;
    color          : var(--ink-3);
    opacity        : .8;
}

.xpr svg {
    width           : 1.6rem;
    height          : 1.6rem;
    fill            : none;
    stroke          : currentColor;
    stroke-width    : 1.8;
    stroke-linecap  : round;
    stroke-linejoin : round;
    color           : var(--ink-3);
    opacity         : 0;
    transform       : translateX(-6px);
    transition      : opacity .3s, transform .45s var(--ease-out), color .3s;
}

.xpr:hover,
.xpr[aria-pressed="true"] { background: rgba(255, 255, 255, .02); }

.xpr:hover b, .xpr[aria-pressed="true"] b { color: var(--ink); transform: translateX(4px); }
.xpr:hover small, .xpr[aria-pressed="true"] small { color: var(--ink-2); transform: translateX(4px); }
.xpr:hover em, .xpr[aria-pressed="true"] em { color: var(--color-1); }
.xpr:hover svg, .xpr[aria-pressed="true"] svg { opacity: 1; transform: none; }
.xpr[aria-pressed="true"] svg { color: var(--color-1); }
.xpr[aria-pressed="true"]::before { transform: scaleY(1); }
.xpr:focus-visible { outline: 2px solid var(--color-1); outline-offset: -2px; }

/* ---------- responsive ---------- */
@media screen and (max-width: 1000px) {
    .xph { flex-direction: column; align-items: flex-start; gap: .8rem; }
    .xph__title { text-align: left; }
    .xpg { grid-template-columns: 1fr; gap: 3.2rem; }
    .xps { position: relative; top: 0; max-width: 56rem; }
}

@media screen and (max-width: 600px) {
    .xpr, .xpr:focus { grid-template-columns: 3.2rem minmax(0, 1fr) 1.6rem; gap: 1.2rem; padding: 1.4rem 0; }
    .xpr__tag { display: none; }
    .xpr em { padding-left: .8rem; }
    .xps__hint { display: none; }
    .xps__name { font-size: 1.8rem; }
}

@media (hover: none) {
    .xps__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .xps__layer { transition: none; filter: none; transform: none; }
    .xpr b, .xpr small, .xpr svg, .xpr::before { transition: none; }
}
.xps__cap, .xps__cap * { font-style: normal; }
.xps__hint { top: 6rem; bottom: auto; left: 1.8rem; z-index: 2; }
.xps__cap { margin: 0; }

/* AI wires: draw in only after their nodes are placed (higher specificity
   than the shorthand that was resetting the delays to 0) */
.bl--web[data-step="1"] .wf__wires path { animation: wf-draw .7s var(--ease-out) both; }
.bl--web[data-step="1"] .wf__wires path.w0 { animation-delay: 1.1s; }
.bl--web[data-step="1"] .wf__wires path:is(.w1, .w2, .w3) { animation-delay: 3.05s; }

/* packets ride exactly on their wire: the anchor (centre) is the path point */
.wf__pkt { margin: 0; left: 0; top: 0; offset-anchor: center; }

/* mobile (dark): wireframe outlines only during the design step */
.bl[data-scene-id="mobile"]:not([data-step="1"]) .ui,
.bl[data-scene-id="mobile"]:not([data-step="1"]) .ui-card { border-color: transparent; }
.bl[data-scene-id="mobile"] .ui--sec,
.bl[data-scene-id="mobile"] .ui--cards { border-width: 0; }
.bl[data-scene-id="mobile"][data-step="1"] .ui--sec,
.bl[data-scene-id="mobile"][data-step="1"] .ui--cards { border-width: 1px; }

/* section row: title and "Show all" share a baseline */
.ui--sec { align-items: baseline; }
.ui--sec b, .ui--sec small { line-height: 1; }
.bl[data-scene-id="mobile"] .ui--sec { width: calc(88% + 1.5px); }