/* service_ui_ux_design.html — extracted internal + inline styles */
    .ux-mock { border-radius: 1rem; background: #fff; box-shadow: 0 2rem 4rem rgba(30, 34, 72, .14); overflow: hidden; }
    .ux-mock__bar { display: flex; align-items: center; gap: .35rem; padding: .7rem .9rem; background: #f4f5fb; border-bottom: 1px solid #eceef5; }
    .ux-mock__dot { width: .6rem; height: .6rem; border-radius: 50%; background: #d7dbe8; }
    .ux-mock__dot.r { background: #ff6b6b; } .ux-mock__dot.y { background: #ffcf5c; } .ux-mock__dot.g { background: #4bd08b; }
    .ux-mock__url { flex: 1; margin-left: .6rem; height: 1.15rem; border-radius: 1rem; background: #e7eaf3; }
    .ux-swatch { width: 100%; padding-top: 100%; border-radius: .65rem; }
    .ux-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 2rem;
        background: #fff; box-shadow: 0 .4rem 1.1rem rgba(30,34,72,.08); font-weight: 600; font-size: .82rem; margin: .28rem; }
    .ux-chip i { color: #747ed1; }

    /* Before / After reveal */
    .ux-ba { position: relative; }
    .ux-ba .ba-before { filter: grayscale(.35); }
    .ux-ba .tag { position: absolute; top: .9rem; z-index: 3; font-size: .72rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: .08em; padding: .3rem .7rem; border-radius: 2rem; }
    .ux-ba .tag-before { left: .9rem; background: #ffe3e3; color: #e03131; }
    .ux-ba .tag-after { right: .9rem; background: #d3f9d8; color: #2b8a3e; }

    /* Fake "old" cramped UI */
    .old-ui { background: #eceada; padding: 1.1rem; font-family: Georgia, serif; }
    .old-ui .oh { background: #7a6f57; color: #fff; padding: .45rem .6rem; font-size: .72rem; letter-spacing: .02em; }
    .old-ui .orow { display: flex; gap: .35rem; margin-top: .5rem; }
    .old-ui .ocell { flex: 1; background: #fff; border: 1px solid #cfc7b0; height: .8rem; }
    .old-ui .obtn { margin-top: .7rem; display: inline-block; background: #b7ac8e; color: #fff; font-size: .68rem; padding: .3rem .7rem; }
    .old-ui .otext { height: .5rem; background: #d8d0bb; margin-top: .4rem; border-radius: 2px; }

    /* Fresh "new" UI */
    .new-ui { padding: 1.1rem; background: linear-gradient(135deg,#f5f3ff 0%,#eef4ff 100%); }
    .new-ui .nhero { background: linear-gradient(120deg,#747ed1,#5f8cff); border-radius: .8rem; padding: .9rem; color: #fff; }
    .new-ui .npill { display: inline-block; background: rgba(255,255,255,.25); border-radius: 2rem; padding: .18rem .6rem; font-size: .62rem; font-weight: 700; }
    .new-ui .nbtn { display: inline-block; background: #fff; color: #5f6ac4; font-weight: 700; font-size: .68rem; padding: .34rem .8rem; border-radius: 2rem; margin-top: .55rem; }
    .new-ui .ncards { display: flex; gap: .5rem; margin-top: .7rem; }
    .new-ui .ncard { flex: 1; background: #fff; border-radius: .6rem; padding: .55rem; box-shadow: 0 .4rem 1rem rgba(95,108,196,.12); }
    .new-ui .ndot { width: 1.5rem; height: 1.5rem; border-radius: .5rem; background: linear-gradient(135deg,#ffd43b,#ff922b); margin-bottom: .4rem; }
    .new-ui .nline { height: .42rem; border-radius: 2px; background: #e5e9f7; margin-top: .32rem; }
    .new-ui .nline.sh { width: 65%; }

    /* Type-scale demo */
    .type-scale > div { border-bottom: 1px dashed #e4e7f2; padding: .55rem 0; display: flex; align-items: baseline; justify-content: space-between; }
    .type-scale small { color: #9aa1bd; font-weight: 600; }

    .step-dot { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        font-weight: 700; color: #fff; font-size: 1.05rem; }

    .glow-card { transition: transform .35s ease, box-shadow .35s ease; }
    .glow-card:hover { transform: translateY(-.5rem); box-shadow: 0 2rem 3rem rgba(116,126,209,.22) !important; }

/* generated classes for inline styles */
.gen-1 { top: 10%; left: 3%; }
.gen-2 { bottom: 4%; right: 2%; }
.gen-3 { z-index: 2; }
.gen-4 { bottom: -1.5rem; right: -1rem; width: 92%; height: 92%; z-index: 0 !important; }
.gen-5 { z-index: 1; }
.gen-6 { background:transparent; }
.gen-7 { background:linear-gradient(135deg,#748ffc,#5f3dc4); }
.gen-8 { background:linear-gradient(135deg,#63e6be,#0ca678); }
.gen-9 { top: 6%; left: -1.6rem; z-index: 2; max-width: 12rem; }
.gen-10 { bottom: 4%; right: -1.6rem; z-index: 2; max-width: 12.5rem; }
.gen-11 { z-index: 3; }
.gen-12 { width:90%; }
.gen-13 { width:80%; }
.gen-14 { width:95%; }
.gen-15 { width:70%; }
.gen-16 { width:88%; }
.gen-17 { box-shadow:0 2rem 4rem rgba(116,126,209,.28); }
.gen-18 { flex:2; }
.gen-19 { background:linear-gradient(135deg,#ff922b,#e8590c); }
.gen-20 { background:#5f3dc4; }
.gen-21 { background:#748ffc; }
.gen-22 { background:#63e6be; }
.gen-23 { background:#ffd43b; }
.gen-24 { background:#ff922b; }
.gen-25 { background:#ff6b6b; }
.gen-26 { background:#e9ecf5; }
.gen-27 { background:#1e2248; }
.gen-28 { font-size:1.6rem; }
.gen-29 { font-size:1.2rem; }
.gen-30 { font-size:1rem; }
.gen-31 { font-size:.85rem; }
.gen-32 { top: -30%; left: -4%; }
.gen-33 { background:linear-gradient(135deg,#845ef7,#5f3dc4); }
.gen-34 { background:linear-gradient(135deg,#5c7cfa,#4263eb); }
.gen-35 { background:linear-gradient(135deg,#22b8cf,#0c8599); }
.gen-36 { background:linear-gradient(135deg,#20c997,#0ca678); }
.gen-37 { background:linear-gradient(135deg,#fab005,#f08c00); }
.gen-38 { min-height:9rem; }
.gen-39 { padding:.7rem; }
.gen-40 { background:rgba(255,255,255,.5);margin-top:.5rem; }
.gen-41 { background:rgba(255,255,255,.4); }
.gen-42 { gap:.4rem; }
.gen-43 { background:#5f3dc4;width:2rem;padding-top:2rem; }
.gen-44 { background:#748ffc;width:2rem;padding-top:2rem; }
.gen-45 { background:#63e6be;width:2rem;padding-top:2rem; }
.gen-46 { margin-top:.6rem; }
.gen-47 { height: 130px; }