/* ==========================================================================
   WEB DESIGN PAGE — "wd-" section system
   Specialisation / Design and Branding / Web Design
   Site theme: Afacad, deep navy/violet fields, brand accents
   magenta #B51BB5 · orange #F0A400 · violet #AC20BC · cyan #43D2E0.
   Its own layout language: viewport/device cascade, interactive page anatomy,
   sticky craft story, responsive playground, timeline, browser-window CTA.
   No existing site component is reused.
   ========================================================================== */

:root {
    --wd-ink: #0a0b2e;
    --wd-ink-2: #14083a;
    --wd-violet: #4a128c;
    --wd-purple: #7b2ff7;
    --wd-magenta: #B51BB5;
    --wd-orange: #F0A400;
    --wd-cyan: #43D2E0;
    --wd-paper: #f7f4fd;
    --wd-radius: 22px;
    --wd-shell: min(var(--site-width, 88%), 1240px);
}

.wd-shell {
    width: var(--wd-shell);
    margin-inline: auto;
}

.wd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wd-cyan);
}

.wd-eyebrow--dark { color: var(--wd-purple); }

.wd-eyebrow__bar {
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wd-magenta), var(--wd-orange));
}

.wd-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto clamp(2.2rem, 5vh, 3.6rem);
}

.wd-head h2 {
    margin: .95rem 0 .95rem;
    font-size: clamp(1.95rem, 3.7vw, 3.15rem);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--wd-ink);
}

.wd-head--light h2 { color: #fff; }

.wd-head__lead {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.65;
    color: rgba(10, 11, 46, .72);
}

.wd-head--light .wd-head__lead { color: rgba(255, 255, 255, .82); }

.wd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .95rem 2.15rem;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 600;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), box-shadow .28s ease,
        background .28s ease, color .28s ease, border-color .28s ease;
}

.wd-btn--lg { padding: 1.15rem 2.6rem; font-size: 1.08rem; }

.wd-btn--solid {
    color: #fff;
    background: linear-gradient(115deg, var(--wd-magenta), var(--wd-purple) 55%, var(--wd-cyan));
    background-size: 160% 100%;
    box-shadow: 0 14px 34px rgba(123, 47, 247, .42);
}

.wd-btn--solid:hover,
.wd-btn--solid:focus-visible {
    background-position: 90% 0;
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(181, 27, 181, .5);
    outline: none;
}

.wd-btn--ghost {
    color: var(--wd-ink);
    background: rgba(255, 255, 255, .82);
    border: 1.5px solid rgba(74, 18, 140, .28);
}

.wd-btn--ghost:hover,
.wd-btn--ghost:focus-visible {
    transform: translateY(-3px);
    border-color: var(--wd-magenta);
    color: var(--wd-magenta);
    box-shadow: 0 16px 34px rgba(10, 11, 46, .16);
    outline: none;
}

.wd-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .3, 1);
}

.wd-reveal.wd-in {
    opacity: 1;
    transform: none;
}


/* ==========================================================================
   1. HERO — THE VIEWPORT
   ========================================================================== */
.wd-hero {
    position: relative;
    min-height: max(660px, 96svh);
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(110% 85% at 88% 10%, rgba(123, 47, 247, .4), transparent 55%),
        linear-gradient(152deg, var(--wd-ink) 0%, var(--wd-ink-2) 46%, var(--wd-violet) 100%);
    isolation: isolate;
}

.wd-hero__bg { position: absolute; inset: 0; z-index: -1; }

/* design-tool rulers */
.wd-hero__ruler {
    position: absolute;
    opacity: .5;
    background-repeat: repeat;
}

.wd-hero__ruler--top {
    top: 108px;
    left: 0;
    right: 0;
    height: 22px;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 120px);
    background-size: 12px 10px, 120px 100%;
    background-position: bottom left, bottom left;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    mask-image: linear-gradient(90deg, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
}

.wd-hero__ruler--left {
    top: 130px;
    bottom: 0;
    left: 0;
    width: 22px;
    background-image:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .32) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .5) 0 1px, transparent 1px 120px);
    background-size: 10px 12px, 100% 120px;
    background-position: top right, top right;
    border-right: 1px solid rgba(255, 255, 255, .18);
    mask-image: linear-gradient(180deg, #000 75%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
}

.wd-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
}

.wd-hero__glow--a {
    width: 42vw;
    height: 42vw;
    background: rgba(181, 27, 181, .42);
    top: -10%;
    right: 6%;
    animation: wd-glow 20s ease-in-out infinite alternate;
}

.wd-hero__glow--b {
    width: 32vw;
    height: 32vw;
    background: rgba(67, 210, 224, .3);
    bottom: -14%;
    left: -6%;
    animation: wd-glow 24s ease-in-out infinite alternate-reverse;
}

@keyframes wd-glow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-5%, 6%, 0) scale(1.14); }
}

.wd-hero__inner {
    width: var(--wd-shell);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4.2rem);
    padding: 152px 0 96px;
}

.wd-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
    margin-bottom: 1.55rem;
    font-size: .88rem;
    color: rgba(255, 255, 255, .62);
}

.wd-crumb a { color: rgba(255, 255, 255, .78); }
.wd-crumb a:hover { color: var(--wd-cyan); }
.wd-crumb__sep { opacity: .45; }
.wd-crumb__here { color: var(--wd-orange); font-weight: 600; }

.wd-hero__title {
    margin: 1.05rem 0 1.35rem;
    font-size: clamp(2.55rem, 5.6vw, 4.55rem);
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -.022em;
    color: #fff;
}

/* line wipe reveal (distinct from per-word pop) */
.wd-wipe {
    display: block;
    overflow: hidden;
}

.wd-wipe > span {
    display: inline-block;
    transform: translateY(105%);
    animation: wd-wipe-up .95s cubic-bezier(.22, .75, .25, 1) forwards;
}

.wd-wipe:nth-child(1) > span { animation-delay: .1s; }
.wd-wipe:nth-child(2) > span { animation-delay: .26s; }
.wd-wipe:nth-child(3) > span { animation-delay: .42s; }

@keyframes wd-wipe-up {
    to { transform: translateY(0); }
}

.wd-hero__grad {
    background: linear-gradient(92deg, var(--wd-cyan), var(--wd-orange) 55%, var(--wd-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wd-hero__lead {
    max-width: 54ch;
    font-size: clamp(1.05rem, 1.5vw, 1.24rem);
    line-height: 1.62;
    color: rgba(255, 255, 255, .84);
}

.wd-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.95rem 0 1.75rem;
}

.wd-hero__cta .wd-btn--ghost {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.wd-hero__cta .wd-btn--ghost:hover {
    border-color: var(--wd-cyan);
    color: var(--wd-cyan);
    background: rgba(67, 210, 224, .1);
}

.wd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.7rem;
    font-size: .92rem;
    color: rgba(255, 255, 255, .66);
}

.wd-hero__meta b {
    color: var(--wd-cyan);
    font-weight: 600;
    margin-right: .3rem;
}


/* ---- device cascade ---- */
.wd-devices {
    position: relative;
    height: clamp(420px, 50vw, 560px);
}

.wd-device {
    position: absolute;
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 36px 84px rgba(3, 2, 22, .55);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    padding: .55rem;
    animation: wd-float 8s ease-in-out infinite alternate;
}

.wd-device__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 4px 8px;
}

.wd-device__bar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.wd-device__bar i:first-child { background: var(--wd-orange); }

.wd-device__bar em {
    margin-left: 8px;
    padding: .12rem .75rem;
    border-radius: 999px;
    font-size: .68rem;
    font-style: normal;
    color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .12);
}

.wd-device__screen {
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(20, 8, 58, .88), rgba(74, 18, 140, .5));
    height: calc(100% - 26px);
}

.wd-device--desktop {
    top: 4%;
    right: 0;
    width: min(430px, 88%);
    height: 66%;
    animation-delay: -1s;
}

.wd-device--tablet {
    bottom: 4%;
    left: 0;
    width: min(240px, 48%);
    height: 52%;
    animation-delay: -3.5s;
}

.wd-device--phone {
    bottom: 0;
    right: 10%;
    width: min(128px, 27%);
    height: 46%;
    border-radius: 22px;
    animation-delay: -5.5s;
}

.wd-device__notch {
    width: 40px;
    height: 5px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .3);
    margin: 3px auto 7px;
}

.wd-device--phone .wd-device__screen { height: calc(100% - 22px); border-radius: 14px; }

@keyframes wd-float {
    from { translate: 0 -9px; }
    to { translate: 0 11px; }
}

/* measurement annotations */
.wd-measure {
    position: absolute;
    color: var(--wd-orange);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.wd-measure span {
    padding: .12rem .55rem;
    border-radius: 5px;
    background: rgba(240, 164, 0, .16);
    border: 1px solid rgba(240, 164, 0, .5);
}

.wd-measure--h {
    top: -4%;
    right: 8%;
    width: min(430px, 88%);
    border-top: 1px dashed rgba(240, 164, 0, .55);
    text-align: center;
    padding-top: 3px;
}

.wd-measure--v {
    top: 22%;
    right: -2%;
    border-right: 1px dashed rgba(240, 164, 0, .55);
    padding-right: 6px;
}


/* ---- shared UI mock (used by hero devices + responsive playground) ---- */
.wd-ui {
    height: 100%;
    padding: clamp(.55rem, 1.2vw, 1rem);
    display: flex;
    flex-direction: column;
    gap: clamp(.5rem, 1vw, .85rem);
}

.wd-ui__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wd-ui__nav > i {
    width: 42px;
    height: 11px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--wd-magenta), var(--wd-orange));
}

.wd-ui__nav > span { display: flex; gap: 6px; }

.wd-ui__nav b {
    width: 22px;
    height: 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .3);
}

.wd-ui__hero {
    flex: 1;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(.5rem, 1vw, .9rem);
    align-items: center;
}

.wd-ui__copy { display: grid; gap: 7px; }

.wd-ui__copy b { height: clamp(10px, 1.5vw, 16px); border-radius: 4px; background: rgba(255, 255, 255, .75); }
.wd-ui__copy b:nth-child(2) { width: 72%; }
.wd-ui__copy span { height: 7px; border-radius: 3px; width: 88%; background: rgba(255, 255, 255, .3); }

.wd-ui__copy em {
    width: clamp(52px, 8vw, 88px);
    height: clamp(17px, 2.4vw, 26px);
    border-radius: 999px;
    background: linear-gradient(115deg, var(--wd-orange), var(--wd-magenta));
}

.wd-ui__art {
    height: 76%;
    min-height: 46px;
    border-radius: 10px;
    background:
        radial-gradient(60% 80% at 25% 20%, rgba(240, 164, 0, .8), transparent 60%),
        linear-gradient(140deg, var(--wd-magenta), var(--wd-purple));
}

.wd-ui__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.45rem, .9vw, .8rem);
}

.wd-ui__row i {
    height: clamp(26px, 4.5vw, 52px);
    border-radius: 8px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .15);
}

.wd-ui__row i:nth-child(2) { background: rgba(67, 210, 224, .22); }

/* reflow rules, driven by the container width (JS toggles .is-narrow / .is-tiny) */
.wd-ui--reflow { container-type: inline-size; }

.wd-ui.is-narrow .wd-ui__hero { grid-template-columns: 1fr; }
.wd-ui.is-narrow .wd-ui__art { display: none; }
.wd-ui.is-narrow .wd-ui__row { grid-template-columns: 1fr 1fr; }
.wd-ui.is-narrow .wd-ui__row i:nth-child(3) { display: none; }
.wd-ui.is-narrow .wd-ui__nav b:nth-child(3) { display: none; }

.wd-ui.is-tiny .wd-ui__nav > span { display: none; }
.wd-ui.is-tiny .wd-ui__row { grid-template-columns: 1fr; }
.wd-ui.is-tiny .wd-ui__row i:nth-child(2) { display: none; }


/* ==========================================================================
   2. ANATOMY — PAGE THAT CONVERTS
   ========================================================================== */
.wd-anatomy {
    padding: clamp(3.4rem, 9vh, 6.2rem) 0;
    background:
        radial-gradient(85% 60% at 8% 4%, rgba(67, 210, 224, .14), transparent 55%),
        radial-gradient(80% 60% at 94% 96%, rgba(181, 27, 181, .1), transparent 55%),
        var(--wd-paper);
}

.wd-anatomy__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
    gap: clamp(1.5rem, 3.5vw, 3rem);
    align-items: center;
}

.wd-page__win {
    position: relative;
    border-radius: var(--wd-radius);
    background: #fff;
    border: 1px solid rgba(74, 18, 140, .14);
    box-shadow: 0 34px 80px rgba(24, 9, 62, .18);
    overflow: hidden;
}

.wd-page__bar {
    display: flex;
    gap: 6px;
    padding: 12px 16px;
    background: rgba(74, 18, 140, .06);
    border-bottom: 1px solid rgba(74, 18, 140, .1);
}

.wd-page__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(74, 18, 140, .22);
}

.wd-page__bar i:first-child { background: var(--wd-orange); }

.wd-page__body { padding: clamp(1.1rem, 2.5vw, 1.9rem); display: grid; gap: clamp(.85rem, 2vw, 1.35rem); }

.wd-page__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: clamp(.65rem, 1.4vw, .95rem) clamp(.85rem, 1.8vw, 1.25rem);
    border-radius: 12px;
    background: rgba(74, 18, 140, .07);
}

.wd-page__nav > i {
    width: 52px;
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--wd-magenta), var(--wd-purple));
}

.wd-page__nav > span { display: flex; align-items: center; gap: 10px; }

.wd-page__nav b {
    width: 30px;
    height: 8px;
    border-radius: 3px;
    background: rgba(74, 18, 140, .25);
}

.wd-page__nav em {
    width: 58px;
    height: 22px;
    border-radius: 999px;
    background: linear-gradient(115deg, var(--wd-magenta), var(--wd-purple));
}

.wd-page__hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(.85rem, 2vw, 1.5rem);
    align-items: center;
    padding: clamp(1rem, 2.2vw, 1.6rem);
    border-radius: 14px;
    background: linear-gradient(150deg, var(--wd-ink), var(--wd-violet));
}

.wd-page__lines { display: grid; gap: 10px; }

.wd-page__lines b { height: clamp(13px, 2vw, 21px); border-radius: 5px; background: rgba(255, 255, 255, .8); }
.wd-page__lines b:nth-child(2) { width: 74%; }
.wd-page__lines span { height: 9px; width: 90%; border-radius: 4px; background: rgba(255, 255, 255, .32); }

.wd-page__lines em {
    width: clamp(78px, 12vw, 128px);
    height: clamp(26px, 3.6vw, 38px);
    border-radius: 999px;
    background: linear-gradient(115deg, var(--wd-orange), var(--wd-magenta));
}

.wd-page__art {
    height: clamp(90px, 15vw, 165px);
    border-radius: 12px;
    background:
        radial-gradient(65% 85% at 28% 18%, rgba(67, 210, 224, .75), transparent 62%),
        linear-gradient(140deg, var(--wd-purple), var(--wd-magenta));
}

.wd-page__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(.7rem, 1.6vw, 1.15rem);
}

.wd-page__row i {
    height: clamp(52px, 9vw, 96px);
    border-radius: 12px;
    background: rgba(74, 18, 140, .08);
    border: 1px solid rgba(74, 18, 140, .12);
}

.wd-page__row i:nth-child(2) { background: rgba(240, 164, 0, .14); }
.wd-page__row i:nth-child(3) { background: rgba(67, 210, 224, .16); }

.wd-page__foot {
    height: clamp(30px, 5vw, 52px);
    border-radius: 12px;
    background: rgba(74, 18, 140, .12);
}

/* hotspots */
.wd-hot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    transform: translate(-50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    color: #fff;
    background: var(--wd-magenta);
    box-shadow: 0 10px 26px rgba(181, 27, 181, .45);
    cursor: pointer;
    z-index: 2;
    transition: transform .28s cubic-bezier(.2, .7, .3, 1), background .28s ease;
}

.wd-hot span { font-size: .84rem; font-weight: 700; }

.wd-hot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .6);
    animation: wd-pulse 2.2s ease-out infinite;
}

@keyframes wd-pulse {
    0% { transform: scale(.7); opacity: .9; }
    100% { transform: scale(1.55); opacity: 0; }
}

.wd-hot:hover,
.wd-hot:focus-visible,
.wd-hot.is-on {
    background: var(--wd-orange);
    transform: translate(-50%, -50%) scale(1.16);
    outline: none;
}

/* note card */
.wd-note {
    position: relative;
    padding: 2.15rem 2.05rem;
    border-radius: var(--wd-radius);
    color: #fff;
    background: linear-gradient(160deg, var(--wd-ink), var(--wd-ink-2) 58%, var(--wd-violet));
    box-shadow: 0 30px 70px rgba(24, 9, 62, .32);
    min-height: 240px;
}

.wd-note.is-swapping { animation: wd-swap .42s ease; }

@keyframes wd-swap {
    0% { opacity: .25; transform: translateY(9px); }
    100% { opacity: 1; transform: none; }
}

.wd-note__num {
    width: 2.55rem;
    height: 2.55rem;
    display: grid;
    place-items: center;
    margin-bottom: 1.05rem;
    border-radius: 11px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wd-ink);
    background: linear-gradient(135deg, var(--wd-cyan), var(--wd-orange));
}

.wd-note h3 {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: .55rem;
}

.wd-note p {
    font-size: 1.02rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .82);
}


/* ==========================================================================
   3. CRAFT — STICKY STORY
   ========================================================================== */
.wd-craft {
    padding: clamp(3.4rem, 9vh, 6.2rem) 0;
    background:
        radial-gradient(90% 55% at 92% 6%, rgba(240, 164, 0, .12), transparent 55%),
        linear-gradient(180deg, #ffffff, var(--wd-paper));
}

.wd-craft__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: start;
}

.wd-craft__visual {
    position: sticky;
    top: 120px;
}

.wd-canvas {
    position: relative;
    aspect-ratio: 4 / 3.2;
    border-radius: var(--wd-radius);
    background:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(155deg, var(--wd-ink), var(--wd-violet));
    background-size: 34px 34px, 34px 34px, 100% 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 34px 80px rgba(24, 9, 62, .32);
    overflow: hidden;
}

.wd-canvas__label {
    position: absolute;
    top: 12px;
    left: 14px;
    padding: .22rem .8rem;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .12);
}

.wd-canvas__layer {
    position: absolute;
    inset: 0;
    padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.4rem, 3vw, 2.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.75rem, 1.8vw, 1.15rem);
    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1);
    pointer-events: none;
}

.wd-craft__visual[data-state="0"] .wd-canvas__layer--hierarchy,
.wd-craft__visual[data-state="1"] .wd-canvas__layer--type,
.wd-craft__visual[data-state="2"] .wd-canvas__layer--space,
.wd-craft__visual[data-state="3"] .wd-canvas__layer--convert {
    opacity: 1;
    transform: none;
}

/* state 0: hierarchy */
.wd-lv {
    border-radius: 10px;
    background: rgba(255, 255, 255, .2);
}

.wd-lv--1 { height: clamp(30px, 5.2vw, 52px); width: 82%; background: rgba(255, 255, 255, .85); }
.wd-lv--2 { height: clamp(20px, 3.4vw, 32px); width: 62%; background: rgba(255, 255, 255, .5); }
.wd-lv--3 { height: clamp(13px, 2.2vw, 20px); width: 88%; background: rgba(255, 255, 255, .28); }
.wd-lv--4 { height: clamp(13px, 2.2vw, 20px); width: 54%; background: rgba(255, 255, 255, .18); }

/* state 1: type & colour */
.wd-type-row {
    display: flex;
    align-items: baseline;
    gap: 1.15rem;
    color: #fff;
}

.wd-type-row b { font-weight: 700; line-height: 1; }

.wd-type-row span {
    font-size: .86rem;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .6);
}

.wd-swatches { display: flex; gap: .7rem; margin-top: .55rem; }

.wd-swatches i {
    width: clamp(34px, 5vw, 48px);
    height: clamp(34px, 5vw, 48px);
    border-radius: 12px;
}

.wd-swatches i:nth-child(1) { background: var(--wd-magenta); }
.wd-swatches i:nth-child(2) { background: var(--wd-orange); }
.wd-swatches i:nth-child(3) { background: var(--wd-cyan); }
.wd-swatches i:nth-child(4) { background: var(--wd-purple); }

/* state 2: spacing */
.wd-space-row {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.wd-space-box {
    height: clamp(24px, 3.6vw, 38px);
    border-radius: 8px;
    background: rgba(255, 255, 255, .22);
    border: 1px dashed rgba(255, 255, 255, .45);
    width: 62%;
}

.wd-space-box--lg {
    height: clamp(48px, 7.2vw, 78px);
    background: rgba(67, 210, 224, .28);
}

.wd-space-row em {
    font-style: normal;
    font-size: .82rem;
    font-weight: 700;
    color: var(--wd-cyan);
}

/* state 3: conversion */
.wd-canvas__layer--convert {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
}

.wd-funnel {
    display: grid;
    gap: 9px;
    justify-items: center;
}

.wd-funnel i {
    height: clamp(16px, 2.6vw, 26px);
    border-radius: 7px;
    background: rgba(255, 255, 255, .3);
}

.wd-funnel i:nth-child(1) { width: clamp(120px, 22vw, 210px); }
.wd-funnel i:nth-child(2) { width: clamp(86px, 16vw, 150px); }
.wd-funnel i:nth-child(3) { width: clamp(54px, 10vw, 96px); background: rgba(240, 164, 0, .55); }

.wd-funnel-arrow {
    font-size: 1.55rem;
    color: var(--wd-orange);
}

.wd-funnel-btn {
    padding: .75rem 1.55rem;
    border-radius: 999px;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--wd-ink);
    background: linear-gradient(115deg, var(--wd-cyan), var(--wd-orange));
}

/* steps */
.wd-craft__steps {
    display: grid;
    gap: clamp(1.25rem, 3vh, 2.15rem);
    padding-top: clamp(.5rem, 2vh, 1.5rem);
}

.wd-step {
    position: relative;
    padding: 1.85rem 1.95rem 1.85rem 4.6rem;
    border-radius: calc(var(--wd-radius) - 4px);
    background: #fff;
    border: 1.5px solid rgba(74, 18, 140, .13);
    box-shadow: 0 18px 44px rgba(24, 9, 62, .09);
    transition: border-color .4s ease, box-shadow .4s ease, transform .4s ease;
}

.wd-step.is-on {
    border-color: var(--wd-purple);
    box-shadow: 0 26px 58px rgba(74, 18, 140, .18);
    transform: translateY(-3px);
}

.wd-step__idx {
    position: absolute;
    left: 1.55rem;
    top: 1.75rem;
    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(120deg, var(--wd-purple), var(--wd-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.wd-step.is-on .wd-step__idx {
    background: linear-gradient(120deg, var(--wd-orange), var(--wd-magenta));
    -webkit-background-clip: text;
    background-clip: text;
}

.wd-step h3 {
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--wd-ink);
    margin-bottom: .5rem;
}

.wd-step p {
    font-size: .995rem;
    line-height: 1.62;
    color: rgba(10, 11, 46, .72);
}


/* ==========================================================================
   4. RESPONSIVE PLAYGROUND
   ========================================================================== */
.wd-responsive {
    padding: clamp(3.4rem, 9vh, 6.2rem) 0;
    background:
        radial-gradient(95% 75% at 82% 6%, rgba(123, 47, 247, .42), transparent 56%),
        linear-gradient(168deg, var(--wd-ink) 0%, var(--wd-ink-2) 52%, var(--wd-violet) 100%);
}

.wd-play__toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.95rem;
}

.wd-chip {
    padding: .62rem 1.45rem;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .32);
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .07);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .28s ease, color .28s ease, border-color .28s ease, transform .28s ease;
}

.wd-chip:hover,
.wd-chip:focus-visible {
    border-color: var(--wd-cyan);
    color: var(--wd-cyan);
    transform: translateY(-2px);
    outline: none;
}

.wd-chip.is-on {
    color: var(--wd-ink);
    background: linear-gradient(115deg, var(--wd-cyan), var(--wd-orange));
    border-color: transparent;
}

.wd-play__stage {
    display: flex;
    justify-content: center;
    padding: clamp(.85rem, 2vw, 1.55rem) 0;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: calc(var(--wd-radius) + 6px);
}

.wd-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 30px 70px rgba(2, 2, 18, .5);
    transition: width .55s cubic-bezier(.2, .7, .3, 1);
}

.wd-frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    background: rgba(255, 255, 255, .1);
}

.wd-frame__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .32);
}

.wd-frame__bar i:first-child { background: var(--wd-orange); }

.wd-frame__bar em {
    margin-left: 10px;
    padding: .22rem 1.05rem;
    border-radius: 999px;
    font-style: normal;
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .12);
}

.wd-frame__screen {
    height: clamp(260px, 38vw, 430px);
    background: linear-gradient(160deg, rgba(20, 8, 58, .92), rgba(74, 18, 140, .55));
}

.wd-frame__grab {
    position: absolute;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
    width: 26px;
    height: 62px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wd-magenta), var(--wd-purple));
    border: 2px solid #fff;
    box-shadow: 0 12px 28px rgba(2, 2, 18, .5);
    cursor: ew-resize;
    transition: transform .25s ease;
}

.wd-frame__grab:hover,
.wd-frame__grab:focus-visible {
    transform: translateY(-50%) scale(1.1);
    outline: none;
}


/* ==========================================================================
   5. PROCESS — BRIEF TO LAUNCH
   ========================================================================== */
.wd-timeline {
    padding: clamp(3.4rem, 9vh, 6.2rem) 0;
    background: var(--wd-paper);
}

.wd-track {
    position: relative;
    max-width: 940px;
    margin-inline: auto;
    display: grid;
    gap: clamp(1.55rem, 4vh, 2.6rem);
    padding: .5rem 0;
}

.wd-track__line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(74, 18, 140, .14);
    overflow: hidden;
}

.wd-track__line i {
    display: block;
    width: 100%;
    height: 0;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--wd-magenta), var(--wd-purple) 45%, var(--wd-cyan));
    transition: height .25s linear;
}

.wd-node {
    position: relative;
    width: calc(50% - 2.6rem);
    justify-self: start;
}

.wd-node--right {
    justify-self: end;
    text-align: right;
}

.wd-node__dot {
    position: absolute;
    top: 1.85rem;
    right: -2.6rem;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--wd-purple);
    border: 3px solid var(--wd-paper);
    box-shadow: 0 0 0 2px rgba(123, 47, 247, .35);
}

.wd-node--right .wd-node__dot {
    right: auto;
    left: -2.6rem;
}

.wd-node__card {
    padding: 1.65rem 1.85rem;
    border-radius: calc(var(--wd-radius) - 4px);
    background: #fff;
    border: 1.5px solid rgba(74, 18, 140, .13);
    box-shadow: 0 18px 42px rgba(24, 9, 62, .1);
}

.wd-node__when {
    display: inline-block;
    padding: .22rem .85rem;
    margin-bottom: .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wd-violet);
    background: rgba(123, 47, 247, .11);
}

.wd-node__card h3 {
    font-size: 1.28rem;
    font-weight: 600;
    color: var(--wd-ink);
    margin-bottom: .45rem;
}

.wd-node__card p {
    font-size: .975rem;
    line-height: 1.62;
    color: rgba(10, 11, 46, .72);
}


/* ==========================================================================
   6. CTA — THE BROWSER WINDOW
   ========================================================================== */
.wd-cta {
    padding: clamp(3.2rem, 8vh, 5.6rem) 0 clamp(4rem, 9vh, 6.4rem);
    background:
        radial-gradient(80% 70% at 12% 12%, rgba(67, 210, 224, .14), transparent 55%),
        var(--wd-paper);
}

.wd-window {
    border-radius: calc(var(--wd-radius) + 6px);
    overflow: hidden;
    background: linear-gradient(158deg, var(--wd-ink) 0%, var(--wd-ink-2) 48%, var(--wd-violet) 100%);
    box-shadow: 0 40px 100px rgba(24, 9, 62, .4);
    border: 1px solid rgba(255, 255, 255, .12);
}

.wd-window__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 13px 18px;
    background: rgba(255, 255, 255, .07);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.wd-window__bar i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
}

.wd-window__bar i:nth-child(1) { background: var(--wd-orange); }
.wd-window__bar i:nth-child(2) { background: var(--wd-cyan); }
.wd-window__bar i:nth-child(3) { background: var(--wd-magenta); }

.wd-window__url {
    margin-left: 12px;
    padding: .38rem 1.35rem;
    border-radius: 999px;
    font-size: .88rem;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .1);
}

.wd-window__body {
    text-align: center;
    padding: clamp(2.6rem, 6.5vw, 4.6rem) clamp(1.5rem, 5vw, 4rem);
}

.wd-window__body h2 {
    margin: .95rem auto 1rem;
    font-size: clamp(2.1rem, 4.6vw, 3.5rem);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.wd-window__body > p {
    max-width: 56ch;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.62;
    color: rgba(255, 255, 255, .82);
}

.wd-window__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.05rem;
    margin-top: 2.15rem;
}

.wd-window__actions .wd-btn--ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .42);
    color: #fff;
}

.wd-window__actions .wd-btn--ghost:hover {
    border-color: var(--wd-cyan);
    color: var(--wd-cyan);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
    .wd-anatomy__grid { grid-template-columns: 1fr; }
    .wd-note { min-height: 0; }
}

@media (max-width: 960px) {
    .wd-hero__inner {
        grid-template-columns: 1fr;
        padding: 142px 0 88px;
    }

    .wd-devices {
        height: clamp(380px, 76vw, 500px);
        max-width: 620px;
        margin-inline: auto;
        width: 100%;
    }

    .wd-craft__grid { grid-template-columns: 1fr; }
    .wd-craft__visual { position: relative; top: 0; max-width: 640px; margin-inline: auto; width: 100%; }

    /* timeline collapses to a single left rail */
    .wd-track__line { left: 8px; transform: none; }
    .wd-node,
    .wd-node--right {
        width: 100%;
        justify-self: stretch;
        text-align: left;
        padding-left: 2.45rem;
    }
    .wd-node__dot,
    .wd-node--right .wd-node__dot {
        left: 0;
        right: auto;
        top: 1.65rem;
    }
}

@media (max-width: 720px) {
    .wd-hero { min-height: 0; }
    .wd-hero__inner { padding: 124px 0 78px; }
    .wd-hero__title { font-size: clamp(2.25rem, 9.4vw, 3rem); }
    .wd-hero__ruler--top { top: 92px; }
    .wd-hero__ruler--left { display: none; }
    .wd-measure--v { display: none; }

    .wd-page__hero { grid-template-columns: 1fr; }
    .wd-page__art { display: none; }
    .wd-page__row { grid-template-columns: 1fr 1fr; }
    .wd-page__row i:nth-child(3) { display: none; }

    .wd-step { padding: 1.55rem 1.35rem 1.55rem; }
    .wd-step__idx {
        position: static;
        display: block;
        margin-bottom: .45rem;
        font-size: 1.02rem;
    }

    .wd-window__actions .wd-btn { width: 100%; }
    .wd-frame__grab { right: -11px; width: 22px; height: 52px; }
}

@media (max-width: 520px) {
    .wd-hero__cta .wd-btn { flex: 1 1 100%; }
    .wd-device--tablet { display: none; }
    .wd-device--desktop { width: 100%; }
    .wd-play__toolbar .wd-chip { flex: 1 1 42%; padding-inline: .65rem; }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .wd-hero__glow,
    .wd-device,
    .wd-hot::after {
        animation: none !important;
    }

    .wd-wipe > span {
        transform: none;
        animation: none;
    }

    .wd-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .wd-canvas__layer {
        transition: none;
    }

    .wd-frame,
    .wd-track__line i,
    .wd-btn,
    .wd-chip,
    .wd-hot,
    .wd-step,
    .wd-frame__grab {
        transition: none;
    }
}