/* ══════════════════════════════════════════════════════════════════════
   PIXEL ACADEMY — Visual Explainers CSS
   Animated inline illustrations for course content
   B&W Pixel theme with subtle accent highlights
   ══════════════════════════════════════════════════════════════════════ */

/* ── Base Card ─────────────────────────────────────────────────────── */
.ve-card {
    background: #111;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 24px;
    margin: 8px 0;
    overflow: hidden;
}
.ve-title {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 20px;
    text-align: center;
}
.ve-flow-note {
    font-size: 0.72rem;
    color: #888;
    text-align: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #222;
    line-height: 1.5;
}
/* When a note carries an inline vector icon, lay it out as a centred row. */
.ve-flow-note > .ve-ic {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
    margin-right: 6px;
}
.ve-flow-note > .ve-ic + span {
    color: #d6d9e2;
}

/* ── Shared Animations ─────────────────────────────────────────────── */
@keyframes ve-fadeUp {
    0% {
        opacity: 0;
        transform: translateY(18px);
    }
    70% {
        opacity: 1;
        transform: translateY(-3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes ve-scaleIn {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }
    70% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes ve-slideRight {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes ve-pulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}
@keyframes ve-walk {
    0%,
    100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}
@keyframes ve-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.15);
    }
}

/* ══════════════════════════════════════════════════════════════════════
   UI vs UX Bridge
   ══════════════════════════════════════════════════════════════════════ */
.ve-bridge-wrap {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-bridge-item {
    flex: 1;
    min-width: 120px;
    max-width: 160px;
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-bridge-item:nth-child(1) {
    animation-delay: 0s;
}
.ve-bridge-item:nth-child(2) {
    animation-delay: 0.15s;
}
.ve-bridge-item:nth-child(3) {
    animation-delay: 0.3s;
}
.ve-bridge-visual {
    height: 80px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 8px;
}
.ve-bridge-deck {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    height: 6px;
    border-radius: 3px;
}
.ve-bridge-pretty {
    width: 30px;
    background: linear-gradient(90deg, #666, #aaa, #666);
    box-shadow: 0 0 8px rgba(170, 170, 170, 0.3);
}
.ve-bridge-wide {
    width: 100px;
    background: #555;
}
.ve-bridge-perfect {
    width: 100px;
    background: linear-gradient(90deg, #666, #bbb, #666);
    box-shadow: 0 0 8px rgba(170, 170, 170, 0.3);
}
.ve-bridge-person {
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
.ve-bridge-stuck {
    animation: ve-pulse 1.5s ease infinite;
}
.ve-bridge-walking {
    animation: ve-walk 1.5s ease infinite;
}
.ve-bridge-happy {
    animation: ve-walk 1.5s ease infinite;
}
.ve-bridge-label-narrow {
    position: absolute;
    bottom: 0;
    font-size: 0.55rem;
    color: #ef5350;
    font-weight: 700;
}
.ve-bridge-tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 4px;
    display: inline-block;
}
.ve-bridge-tag.bad {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}
.ve-bridge-tag.good {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}
.ve-bridge-tag.perfect {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.ve-bridge-desc {
    font-size: 0.65rem;
    color: #999;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════
   Five Pillars
   ══════════════════════════════════════════════════════════════════════ */
.ve-pillars-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: flex-end;
    height: 140px;
    padding-bottom: 8px;
}
.ve-pillar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-pillar-bar {
    width: 44px;
    background: linear-gradient(to top, #3b82f6, #8b5cf6);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6px;
    transition: filter 0.3s;
}
.ve-pillar-col:hover .ve-pillar-bar {
    filter: brightness(1.18);
}
.ve-pillar-icon {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b, #fcd34d);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(252, 211, 77, 0.18);
}
.ve-pillar-icon .ve-ic {
    width: 17px;
    height: 17px;
}
.ve-pillar-label {
    font-size: 0.55rem;
    color: #bbb;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════
   Design Thinking Flow
   ══════════════════════════════════════════════════════════════════════ */
.ve-flow-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ve-flow-step {
    text-align: center;
    animation: ve-scaleIn 0.4s ease both;
}
.ve-flow-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #14161e;
    border: 2px solid #3b3f4c;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    transition: all 0.3s;
}
.ve-flow-circle .ve-ic {
    width: 24px;
    height: 24px;
}
.ve-flow-active .ve-flow-circle {
    background: linear-gradient(135deg, #f59e0b, #fcd34d);
    border-color: #fcd34d;
    box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.15);
}
.ve-flow-step:hover .ve-flow-circle {
    border-color: #8b5cf6;
}
.ve-flow-label {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ve-flow-desc {
    font-size: 0.55rem;
    color: #777;
    margin-top: 2px;
}
.ve-flow-arrow {
    animation: ve-fadeUp 0.3s ease both;
    margin-top: -20px;
}
.ve-arrow-svg {
    width: 22px;
    height: 11px;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   Double Diamond
   ══════════════════════════════════════════════════════════════════════ */
.ve-diamond-wrap {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.ve-diamond {
    text-align: center;
    animation: ve-scaleIn 0.5s ease both;
}
.ve-diamond:nth-child(2) {
    animation-delay: 0.3s;
}
.ve-diamond-shape {
    width: 120px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    margin: 0 auto 8px;
}
.ve-diamond-2 {
    background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
}
.ve-diamond-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}
.ve-diamond-l,
.ve-diamond-r {
    font-size: 0.6rem;
    font-weight: 700;
    color: #d6d9e2;
    text-transform: uppercase;
}
.ve-diamond-sub strong {
    color: #fcd34d;
}
.ve-diamond-sub {
    font-size: 0.65rem;
    color: #777;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   Empathy Map
   ══════════════════════════════════════════════════════════════════════ */
.ve-empathy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-width: 360px;
    margin: 0 auto;
    position: relative;
}
.ve-empathy-q {
    padding: 14px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    animation: ve-fadeUp 0.4s ease both;
}
.ve-empathy-q:nth-child(1) {
    animation-delay: 0s;
}
.ve-empathy-q:nth-child(2) {
    animation-delay: 0.1s;
}
.ve-empathy-q:nth-child(3) {
    animation-delay: 0.2s;
}
.ve-empathy-q:nth-child(4) {
    animation-delay: 0.3s;
}
.ve-eq-says {
    border-left: 3px solid #3b82f6;
}
.ve-eq-thinks {
    border-left: 3px solid #8b5cf6;
}
.ve-eq-does {
    border-left: 3px solid #3b82f6;
}
.ve-eq-feels {
    border-left: 3px solid #f59e0b;
}
.ve-eq-icon {
    margin-bottom: 5px;
}
.ve-eq-icon .ve-ic {
    width: 20px;
    height: 20px;
}
.ve-eq-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.ve-eq-example {
    font-size: 0.65rem;
    color: #777;
    font-style: italic;
    line-height: 1.4;
}
.ve-empathy-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #14161e;
    border: 2px solid #3b3f4c;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 0.55rem;
    color: #d6d9e2;
    font-weight: 700;
    text-align: center;
    line-height: 1.1;
    z-index: 1;
}
.ve-empathy-center .ve-ic {
    width: 20px;
    height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   Wireframe Fidelity
   ══════════════════════════════════════════════════════════════════════ */
.ve-fidelity-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-fidelity-phone {
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-phone-frame {
    width: 110px;
    height: 200px;
    border: 2px solid #444;
    border-radius: 14px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.ve-phone-lofi {
    border-style: dashed;
}
.ve-phone-midfi {
    border-style: solid;
    border-color: #666;
}
.ve-phone-hifi {
    border-color: #999;
    background: #0d0d0d;
}

/* Wireframe elements */
.ve-wf-bar {
    height: 12px;
    background: #333;
    border-radius: 3px;
}
.ve-wf-bar.midfi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    font-size: 0.4rem;
    color: #999;
    background: #222;
}
.ve-wf-bar.hifi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    font-size: 0.4rem;
    color: #ccc;
    background: #1a1a1a;
}
.ve-wf-box {
    border-radius: 4px;
}
.ve-wf-hero {
    height: 40px;
    background: #2a2a2a;
    border: 1px dashed #555;
}
.ve-wf-hero.midfi {
    border-style: solid;
    background: #222;
}
.ve-wf-hero.hifi {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ve-wf-hero.hifi .ve-ic {
    width: 18px;
    height: 18px;
}
.ve-wf-glyph {
    width: 8px;
    height: 8px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}
.ve-wf-line {
    height: 4px;
    background: #333;
    border-radius: 2px;
}
.ve-wf-line.short {
    width: 60%;
}
.ve-wf-text {
    font-size: 0.4rem;
    color: #888;
    text-align: left;
}
.ve-wf-text.hifi-title {
    font-size: 0.42rem;
    color: #ddd;
    font-weight: 700;
}
.ve-wf-text.hifi-sub {
    font-size: 0.38rem;
    color: #777;
}
.ve-wf-text.small {
    font-size: 0.35rem;
}
.ve-wf-cards {
    display: flex;
    gap: 4px;
}
.ve-wf-card-sm {
    flex: 1;
    height: 32px;
    background: #2a2a2a;
    border: 1px dashed #444;
    border-radius: 4px;
}
.ve-wf-card-sm.midfi {
    border-style: solid;
    background: #1f1f1f;
}
.ve-wf-card-sm.hifi {
    border: 1px solid #444;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.35rem;
    color: #aaa;
    font-weight: 600;
}
.ve-wf-btn-placeholder {
    height: 14px;
    background: #444;
    border-radius: 4px;
    border: 1px dashed #666;
}
.ve-wf-btn {
    font-size: 0.38rem;
    text-align: center;
    padding: 4px;
    border-radius: 4px;
}
.ve-wf-btn.midfi {
    background: #444;
    color: #ddd;
}
.ve-wf-btn.hifi {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #f4f5f8;
    font-weight: 700;
}
.ve-fidelity-label {
    font-size: 0.7rem;
    font-weight: 800;
    color: #ccc;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ve-fidelity-desc {
    font-size: 0.55rem;
    color: #777;
    margin-top: 2px;
    line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════
   8-Point Grid
   ══════════════════════════════════════════════════════════════════════ */
.ve-grid-demo {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
    padding: 18px 18px 14px;
    border-radius: 10px;
    background-color: #101218;
    background-image: repeating-linear-gradient(
            0deg,
            transparent 0 7px,
            rgba(255, 255, 255, 0.04) 7px 8px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 7px,
            rgba(255, 255, 255, 0.04) 7px 8px
        );
    border: 1px solid #20222b;
}
.ve-grid-item {
    text-align: center;
    animation: ve-scaleIn 0.4s ease both;
}
.ve-grid-box {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border: 1px solid rgba(252, 211, 77, 0.35);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    color: #f4f5f8;
    font-weight: 700;
    margin: 0 auto;
    transition: filter 0.3s;
}
.ve-grid-item:hover .ve-grid-box {
    filter: brightness(1.18);
}
.ve-grid-label {
    font-size: 0.6rem;
    color: #999;
    font-weight: 700;
    margin-top: 6px;
}
.ve-grid-ruler {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed #333;
}
.ve-ruler-marks {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.ve-ruler-mark {
    text-align: center;
}
.ve-ruler-mark span {
    font-size: 0.5rem;
    color: #666;
    font-weight: 600;
}
.ve-ruler-mark.major span {
    color: #999;
}

/* ══════════════════════════════════════════════════════════════════════
   60-30-10 Color Rule
   ══════════════════════════════════════════════════════════════════════ */
.ve-color-demo {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-color-screen {
    width: 180px;
    animation: ve-scaleIn 0.5s ease both;
}
.ve-cs-60 {
    background: #20242f;
    border: 1px solid #2e3340;
    border-radius: 10px;
    padding: 16px;
    position: relative;
}
.ve-cs-30 {
    background: #2a2d36;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}
.ve-cs-10 {
    background: linear-gradient(135deg, #f59e0b, #fcd34d);
    color: #1b1208;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    font-size: 0.6rem;
    font-weight: 800;
    margin-top: 8px;
}
.ve-cs-label {
    font-size: 0.5rem;
    color: #888;
    font-weight: 600;
}
.ve-color-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: ve-fadeUp 0.5s ease 0.2s both;
}
.ve-color-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.6rem;
    color: #999;
    font-weight: 600;
}
.ve-color-bar span {
    font-weight: 800;
    color: #ccc;
    width: 30px;
}
.ve-cb-60::before {
    content: '';
    width: 60px;
    height: 12px;
    background: #20242f;
    border: 1px solid #3b3f4c;
    border-radius: 3px;
    display: block;
}
.ve-cb-30::before {
    content: '';
    width: 30px;
    height: 12px;
    background: #2a2d36;
    border: 1px solid #3b3f4c;
    border-radius: 3px;
    display: block;
}
.ve-cb-10::before {
    content: '';
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f59e0b, #fcd34d);
    border-radius: 3px;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   Typography Scale
   ══════════════════════════════════════════════════════════════════════ */
.ve-type-scale {
    max-width: 380px;
    margin: 0 auto;
}
.ve-type-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 6px 0;
    border-bottom: 1px solid #1a1a1a;
    animation: ve-slideRight 0.4s ease both;
}
.ve-type-label {
    width: 55px;
    flex-shrink: 0;
    font-size: 0.55rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ve-type-label span {
    display: block;
    font-weight: 400;
    color: #555;
    font-size: 0.5rem;
    margin-top: 1px;
}
.ve-type-sample {
    color: #d6d9e2;
    line-height: 1.3;
}
.ve-type-top {
    border-left: 2px solid #f59e0b;
    padding-left: 10px;
}
.ve-type-top .ve-type-sample {
    background: linear-gradient(90deg, #f4f5f8, #fcd34d);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f4f5f8;
}

/* ══════════════════════════════════════════════════════════════════════
   Gestalt Proximity
   ══════════════════════════════════════════════════════════════════════ */
.ve-gestalt-wrap {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-gestalt-box {
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-gestalt-box:nth-child(2) {
    animation-delay: 0.2s;
}
.ve-gestalt-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: #888;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ve-dots-flat {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 90px;
    margin: 0 auto;
}
.ve-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #4b4f5c;
    display: inline-block;
}
.ve-dots-grouped .ve-dot {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}
.ve-dots-grouped {
    display: flex;
    gap: 24px;
    justify-content: center;
}
.ve-dot-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

/* ══════════════════════════════════════════════════════════════════════
   Contrast Demo
   ══════════════════════════════════════════════════════════════════════ */
.ve-contrast-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-contrast-card {
    width: 120px;
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    animation: ve-fadeUp 0.4s ease both;
}
.ve-contrast-card:nth-child(2) {
    animation-delay: 0.1s;
}
.ve-contrast-card:nth-child(3) {
    animation-delay: 0.2s;
}
.ve-contrast-text {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 8px;
}
.ve-contrast-ratio {
    font-size: 0.55rem;
    opacity: 0.7;
    margin-bottom: 6px;
}
.ve-contrast-badge {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.ve-contrast-badge .ve-ic {
    width: 11px;
    height: 11px;
}
.ve-contrast-badge.fail {
    background: rgba(239, 83, 80, 0.2);
    color: #ef5350;
}
.ve-contrast-badge.aa {
    background: rgba(255, 183, 77, 0.2);
    color: #ffb74d;
}
.ve-contrast-badge.aaa {
    background: rgba(102, 187, 106, 0.2);
    color: #66bb6a;
}

/* ══════════════════════════════════════════════════════════════════════
   Touch Targets
   ══════════════════════════════════════════════════════════════════════ */
.ve-touch-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: flex-end;
}
.ve-touch-item {
    text-align: center;
}
.ve-touch-target {
    border: 2px solid #4b4f5c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
    transition: all 0.3s;
    cursor: pointer;
}
.ve-touch-target .ve-ic {
    width: 60%;
    height: 60%;
}
.ve-touch-target:hover {
    border-color: #8b5cf6;
}
.ve-touch-ok {
    border-color: #66bb6a;
}
.ve-touch-best {
    border-color: #fcd34d;
    background: rgba(252, 211, 77, 0.08);
    animation: ve-glow 2s ease infinite;
}
.ve-touch-label {
    font-size: 0.55rem;
    color: #999;
    font-weight: 600;
    line-height: 1.3;
}
.ve-touch-bad {
    color: #ef5350;
}
.ve-touch-good {
    color: #66bb6a;
}
.ve-touch-finger {
    text-align: center;
    margin-top: 8px;
    animation: ve-pulse 2s ease infinite;
}
.ve-touch-finger .ve-ic {
    width: 26px;
    height: 26px;
}

/* ══════════════════════════════════════════════════════════════════════
   System 1 vs System 2
   ══════════════════════════════════════════════════════════════════════ */
.ve-systems-wrap {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.ve-system-card {
    flex: 1;
    min-width: 140px;
    max-width: 180px;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-sys1 {
    background: #1a1a1a;
    border: 1px solid #ffa726;
    animation-delay: 0s;
}
.ve-sys2 {
    background: #1a1a1a;
    border: 1px solid #4fc3f7;
    animation-delay: 0.2s;
}
.ve-sys-icon {
    font-size: 1.5rem;
    margin-bottom: 6px;
}
.ve-sys-name {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fff;
}
.ve-sys-type {
    font-size: 0.6rem;
    font-weight: 800;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 4px 0 8px;
}
.ve-sys-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 8px;
}
.ve-sys-traits span {
    font-size: 0.5rem;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #aaa;
    font-weight: 600;
}
.ve-sys-example {
    font-size: 0.58rem;
    color: #777;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 8px;
}
.ve-sys-pct {
    font-size: 0.65rem;
    font-weight: 800;
    color: #ccc;
}
.ve-sys1 .ve-sys-pct {
    color: #ffa726;
}
.ve-sys2 .ve-sys-pct {
    color: #4fc3f7;
}
.ve-systems-vs {
    font-size: 0.7rem;
    font-weight: 800;
    color: #555;
    letter-spacing: 2px;
}

/* ══════════════════════════════════════════════════════════════════════
   Cialdini's 7 Principles
   ══════════════════════════════════════════════════════════════════════ */
.ve-cialdini-ring {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.ve-cialdini-item {
    width: 80px;
    text-align: center;
    padding: 10px 6px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-top: 3px solid var(--ring-color, #666);
    animation: ve-scaleIn 0.4s ease both;
    transition: transform 0.2s;
}
.ve-cialdini-item:hover {
    transform: translateY(-3px);
}
.ve-cialdini-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.ve-cialdini-name {
    font-size: 0.55rem;
    font-weight: 800;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ve-cialdini-brand {
    font-size: 0.5rem;
    color: #777;
    margin-top: 3px;
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   SUCCESs Model
   ══════════════════════════════════════════════════════════════════════ */
.ve-success-row {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-success-letter {
    width: 70px;
    text-align: center;
    padding: 10px 4px;
    animation: ve-fadeUp 0.4s ease both;
}
.ve-sl-char {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #2a2a2a;
    border: 2px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: #fff;
    margin: 0 auto 6px;
}
.ve-sl-word {
    font-size: 0.55rem;
    font-weight: 700;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ve-sl-example {
    font-size: 0.48rem;
    color: #777;
    margin-top: 4px;
    line-height: 1.3;
    font-style: italic;
}

/* ══════════════════════════════════════════════════════════════════════
   STEPPS Chain
   ══════════════════════════════════════════════════════════════════════ */
.ve-stepps-chain {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.ve-stepps-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 10px;
    width: 90px;
    text-align: center;
    animation: ve-scaleIn 0.4s ease both;
    transition: border-color 0.3s;
}
.ve-stepps-link:hover {
    border-color: #666;
}
.ve-stepps-icon {
    font-size: 1.1rem;
}
.ve-stepps-link strong {
    font-size: 0.5rem;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.ve-stepps-desc {
    font-size: 0.48rem;
    color: #777;
    line-height: 1.3;
}

/* ══════════════════════════════════════════════════════════════════════
   StoryBrand SB7
   ══════════════════════════════════════════════════════════════════════ */
.ve-sb7-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ve-sb7-step {
    text-align: center;
    padding: 8px;
    width: 72px;
    animation: ve-fadeUp 0.4s ease both;
}
.ve-sb7-step:nth-child(1) {
    animation-delay: 0s;
}
.ve-sb7-step:nth-child(3) {
    animation-delay: 0.1s;
}
.ve-sb7-step:nth-child(5) {
    animation-delay: 0.2s;
}
.ve-sb7-step:nth-child(7) {
    animation-delay: 0.3s;
}
.ve-sb7-step:nth-child(9) {
    animation-delay: 0.4s;
}
.ve-sb7-icon {
    font-size: 1.2rem;
    margin-bottom: 4px;
}
.ve-sb7-label {
    font-size: 0.55rem;
    font-weight: 800;
    color: #ccc;
    text-transform: uppercase;
}
.ve-sb7-desc {
    font-size: 0.45rem;
    color: #777;
    margin-top: 2px;
    line-height: 1.3;
}
.ve-sb7-arrow {
    color: #555;
    font-size: 0.9rem;
    margin-top: -16px;
}
.ve-sb7-outcomes {
    display: flex;
    gap: 12px;
    justify-content: center;
}
.ve-sb7-fail,
.ve-sb7-success {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.65rem;
    font-weight: 700;
    text-align: center;
    animation: ve-fadeUp 0.4s ease 0.5s both;
}
.ve-sb7-fail {
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid rgba(239, 83, 80, 0.3);
    color: #ef5350;
}
.ve-sb7-success {
    background: rgba(102, 187, 106, 0.1);
    border: 1px solid rgba(102, 187, 106, 0.3);
    color: #66bb6a;
}
.ve-sb7-fail span,
.ve-sb7-success span {
    display: block;
    font-size: 0.5rem;
    font-weight: 400;
    margin-top: 2px;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════
   Hook Model Cycle
   ══════════════════════════════════════════════════════════════════════ */
.ve-hook-wrap {
    display: flex;
    justify-content: center;
}
.ve-hook-cycle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 200px;
}
.ve-hook-step {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #444;
    text-align: center;
    animation: ve-fadeUp 0.4s ease both;
}
.ve-hook-trigger {
    border-left: 3px solid #4fc3f7;
}
.ve-hook-action {
    border-left: 3px solid #66bb6a;
}
.ve-hook-reward {
    border-left: 3px solid #ffa726;
}
.ve-hook-invest {
    border-left: 3px solid #ef5350;
}
.ve-hook-icon {
    font-size: 1rem;
}
.ve-hook-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #ddd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ve-hook-eg {
    font-size: 0.5rem;
    color: #777;
    margin-top: 2px;
    line-height: 1.3;
}
.ve-hook-arrow {
    color: #555;
    font-size: 0.9rem;
    font-weight: 700;
}
.ve-ha-4 {
    color: #888;
    font-size: 1.2rem;
    margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════
   Fogg Behavior Model
   ══════════════════════════════════════════════════════════════════════ */
.ve-fogg-wrap {
    text-align: center;
}
.ve-fogg-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ve-fogg-var {
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    background: #1a1a1a;
    border: 1px solid #444;
    min-width: 70px;
    animation: ve-scaleIn 0.4s ease both;
}
.ve-fogg-m {
    border-top: 3px solid #ef5350;
}
.ve-fogg-a {
    border-top: 3px solid #66bb6a;
}
.ve-fogg-t {
    border-top: 3px solid #4fc3f7;
}
.ve-fogg-letter {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
}
.ve-fogg-name {
    font-size: 0.5rem;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.ve-fogg-eg {
    font-size: 0.48rem;
    color: #666;
    margin-top: 4px;
    font-style: italic;
    line-height: 1.3;
}
.ve-fogg-op {
    font-size: 1.2rem;
    font-weight: 900;
    color: #666;
}
.ve-fogg-rule {
    font-size: 0.65rem;
    color: #ef5350;
    font-weight: 700;
    margin-top: 14px;
    padding: 8px;
    background: rgba(239, 83, 80, 0.08);
    border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   Headline Anatomy
   ══════════════════════════════════════════════════════════════════════ */
.ve-headline-wrap {
    text-align: center;
}
.ve-headline-example {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ddd;
    padding: 16px;
    background: #1a1a1a;
    border-radius: 10px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.ve-hl-part {
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: default;
    transition: all 0.3s;
}
.ve-hl-part::after {
    content: attr(data-label);
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.45rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}
.ve-hl-part:hover::after {
    opacity: 1;
}
.ve-hl-number {
    background: rgba(79, 195, 247, 0.15);
    color: #4fc3f7;
}
.ve-hl-number::after {
    color: #4fc3f7;
}
.ve-hl-power {
    background: rgba(206, 147, 216, 0.15);
    color: #ce93d8;
}
.ve-hl-power::after {
    color: #ce93d8;
}
.ve-hl-topic {
    color: #ccc;
}
.ve-hl-topic::after {
    color: #999;
}
.ve-hl-benefit {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}
.ve-hl-benefit::after {
    color: #66bb6a;
}
.ve-hl-urgency {
    background: rgba(255, 167, 38, 0.15);
    color: #ffa726;
}
.ve-hl-urgency::after {
    color: #ffa726;
}
.ve-headline-formulas {
    text-align: left;
    max-width: 340px;
    margin: 0 auto;
}
.ve-hl-formula {
    font-size: 0.65rem;
    color: #888;
    padding: 4px 0;
    border-bottom: 1px solid #1a1a1a;
    line-height: 1.5;
}
.ve-hl-formula strong {
    color: #ccc;
}

/* ══════════════════════════════════════════════════════════════════════
   F-Pattern & Thumb Zone
   ══════════════════════════════════════════════════════════════════════ */
.ve-pattern-row {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.ve-pattern-box {
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-pattern-box:nth-child(2) {
    animation-delay: 0.2s;
}
.ve-pattern-label {
    font-size: 0.6rem;
    font-weight: 800;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}
.ve-f-screen {
    width: 140px;
    height: 100px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ve-f-line {
    height: 6px;
    border-radius: 3px;
    animation: ve-slideRight 0.6s ease both;
}
.ve-f-1 {
    width: 95%;
    background: rgba(239, 83, 80, 0.5);
    animation-delay: 0.3s;
}
.ve-f-2 {
    width: 80%;
    background: rgba(239, 83, 80, 0.35);
    animation-delay: 0.5s;
}
.ve-f-3 {
    width: 30%;
    background: rgba(239, 83, 80, 0.25);
    animation-delay: 0.7s;
}
.ve-f-4 {
    width: 25%;
    background: rgba(239, 83, 80, 0.15);
    animation-delay: 0.9s;
}
.ve-f-5 {
    width: 20%;
    background: rgba(239, 83, 80, 0.08);
    animation-delay: 1.1s;
}

.ve-thumb-phone {
    width: 90px;
    height: 160px;
    border: 2px solid #444;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ve-thumb-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5rem;
    font-weight: 700;
}
.ve-tz-hard {
    background: rgba(239, 83, 80, 0.15);
    color: #ef5350;
}
.ve-tz-ok {
    background: rgba(255, 183, 77, 0.15);
    color: #ffb74d;
}
.ve-tz-easy {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
}
.ve-pattern-note {
    font-size: 0.55rem;
    color: #777;
    margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════════════════
   Landing Page Psychology Zones
   ══════════════════════════════════════════════════════════════════════ */
.ve-landing-phone {
    width: 200px;
    margin: 0 auto;
    border: 2px solid #444;
    border-radius: 16px;
    overflow: hidden;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-lp-zone {
    padding: 10px 12px;
    border-bottom: 1px solid #222;
    text-align: center;
    transition: background 0.3s;
    cursor: default;
}
.ve-lp-zone:hover {
    background: rgba(255, 255, 255, 0.03);
}
.ve-lp-zone span {
    font-size: 0.6rem;
    font-weight: 700;
    color: #ccc;
    display: block;
}
.ve-lp-psych {
    font-size: 0.48rem;
    color: #777;
    margin-top: 2px;
}
.ve-lp-head {
    background: rgba(79, 195, 247, 0.08);
}
.ve-lp-sub {
    background: rgba(206, 147, 216, 0.05);
}
.ve-lp-cta {
    background: rgba(102, 187, 106, 0.08);
}
.ve-lp-proof {
    background: rgba(255, 183, 77, 0.05);
}
.ve-lp-feat {
    background: rgba(255, 255, 255, 0.02);
}

/* ══════════════════════════════════════════════════════════════════════
   Responsive — Visual Explainers
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .ve-card {
        padding: 16px;
    }
    .ve-bridge-wrap {
        gap: 10px;
    }
    .ve-bridge-item {
        min-width: 100px;
    }
    .ve-systems-wrap {
        flex-direction: column;
        align-items: center;
    }
    .ve-system-card {
        max-width: 240px;
    }
    .ve-systems-vs {
        margin: 4px 0;
    }
    .ve-flow-row {
        gap: 4px;
    }
    .ve-flow-circle {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    .ve-fidelity-row {
        gap: 10px;
    }
    .ve-headline-example {
        font-size: 0.9rem;
        padding: 12px;
    }
    .ve-sb7-flow {
        gap: 2px;
    }
    .ve-sb7-step {
        width: 60px;
        padding: 6px;
    }
}
@media (max-width: 480px) {
    .ve-card {
        padding: 12px;
        border-radius: 12px;
    }
    .ve-title {
        font-size: 0.65rem;
    }
    .ve-flow-arrow {
        display: none;
    }
    .ve-flow-row {
        flex-direction: column;
        gap: 8px;
    }
    .ve-sb7-arrow {
        display: none;
    }
    .ve-sb7-flow {
        flex-direction: column;
        gap: 6px;
    }
    .ve-sb7-step {
        width: 100%;
    }
    .ve-fidelity-row {
        flex-direction: column;
        align-items: center;
    }
    .ve-fogg-equation {
        gap: 4px;
    }
    .ve-fogg-var {
        min-width: 56px;
        padding: 8px;
    }
    .ve-fogg-letter {
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   REUSABLE SVG ILLUSTRATION SYSTEM (v2 — flat-modern, brand + gold)
   New standard for all visual explainers. Reuse .ve-illus-grid / .ve-scene
   and the figure/animation classes; ride the existing .ve-bridge-tag/.desc.
   ══════════════════════════════════════════════════════════════════════ */
.ve-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}
.ve-illus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 6px;
}
.ve-illus-card {
    text-align: center;
    animation: ve-fadeUp 0.5s ease both;
}
.ve-illus-card:nth-child(2) {
    animation-delay: 0.12s;
}
.ve-illus-card:nth-child(3) {
    animation-delay: 0.24s;
}
.ve-scene {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
    border: 1px solid #20222b;
    border-radius: 12px;
    background: radial-gradient(120% 100% at 50% 0%, #14161e 0%, #0b0c11 100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.28s ease, border-color 0.28s ease;
}
/* Hover lift — invites interaction (engagement hook) */
.ve-illus-card:hover .ve-scene {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    border-color: #2c2f3a;
}
/* Figure walks smoothly across a good bridge */
.ve-walk {
    animation: veWalk 3.6s ease-in-out infinite;
}
/* Alternating leg swing — makes the figure actually walk */
.ve-walk .ve-leg-l,
.ve-walk .ve-leg-r {
    transform-box: fill-box;
    transform-origin: 50% 0%;
}
.ve-walk .ve-leg-l {
    animation: veStepA 0.9s ease-in-out infinite;
}
.ve-walk .ve-leg-r {
    animation: veStepB 0.9s ease-in-out infinite;
}
@keyframes veStepA {
    0%,
    100% {
        transform: rotate(13deg);
    }
    50% {
        transform: rotate(-13deg);
    }
}
@keyframes veStepB {
    0%,
    100% {
        transform: rotate(-13deg);
    }
    50% {
        transform: rotate(13deg);
    }
}
@keyframes veWalk {
    0% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(33px) translateY(-1.5px);
    }
    50% {
        transform: translateX(66px) translateY(0);
    }
    75% {
        transform: translateX(33px) translateY(-1.5px);
    }
    100% {
        transform: translateX(0) translateY(0);
    }
}
/* Figure teeters at the broken edge of a bad bridge */
.ve-teeter {
    transform-box: fill-box;
    transform-origin: 50% 95%;
    animation: veTeeter 1.7s ease-in-out infinite;
}
@keyframes veTeeter {
    0%,
    100% {
        transform: rotate(-8deg);
    }
    50% {
        transform: rotate(8deg);
    }
}
/* Soft pulsing gold accents (rail lights, highlights) */
.ve-glow {
    animation: veGlow 2.4s ease-in-out infinite;
}
@keyframes veGlow {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 1;
    }
}
/* Boxes/bars reveal upward from a baseline (8pt grid, charts).
   Uses opacity + translateY (safe on SVG rects — scaleY+fill-box can
   collapse the element in some engines). */
.ve-grow {
    animation: veGrow 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes veGrow {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ve-walk,
    .ve-teeter,
    .ve-glow,
    .ve-grow,
    .ve-walk .ve-leg-l,
    .ve-walk .ve-leg-r,
    .ve-touch-finger,
    .ve-touch-best {
        animation: none;
    }
    .ve-illus-card:hover .ve-scene {
        transform: none;
    }
}

/* Shared sizing for inline vector icons used across the C1 visuals. */
.ve-ic {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* C4 (Digital Marketing) — inline-SVG icon sizing inside emoji slots */
.ve-sys-icon .ve-ic {
    width: 26px;
    height: 26px;
}
.ve-cialdini-icon .ve-ic,
.ve-sb7-icon .ve-ic {
    width: 22px;
    height: 22px;
}
.ve-stepps-icon .ve-ic {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}
.ve-hook-icon .ve-ic {
    width: 20px;
    height: 20px;
}
.ve-sb7-fail .ve-ic,
.ve-sb7-success .ve-ic,
.ve-tz-easy .ve-ic {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}

/* ── Mobile: stack multi-panel visuals so they stay readable ──
   On phones, 3 side-by-side comparison panels get squished to ~110px and
   look broken. Stack them full-width instead. */
@media (max-width: 560px) {
    .ve-card {
        padding: 18px 14px;
    }
    .ve-illus-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ve-bridge-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .ve-bridge-item {
        max-width: 100%;
        min-width: 0;
    }
    .ve-pillars-row {
        gap: 8px;
        height: 120px;
    }
    .ve-flow-row {
        gap: 4px;
    }
}