:root {
    --black: #090909;
    --paper: #f5f5f0;
    --orange: #ff4d19;
    --orange2: #ff914d;
    --red: #a02d37;
    --line: #d2d2cb;
    --darkline: #282828;
    --muted: #777;
    --wrap: 1280px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body.sv3 {
    margin: 0;
    background: var(--paper);
    color: #111;
    font-family: Manrope,sans-serif;
    overflow-x: hidden
}

.sv3-shell {
    width: min(var(--wrap),calc(100% - 80px));
    margin: auto
}

.sv3-mono {
    font: 9px "DM Mono",monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #777
}

.sv3-mono.orange,.orange {
    color: var(--orange)
}

.sv3-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 10070
}

.sv3-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--orange)
}

.sv3-label-row {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    font: 9px "DM Mono",monospace;
    letter-spacing: .1em;
    color: #777;
    text-transform: uppercase
}

.sv3-label-row .num {
    color: var(--orange)
}

.sv3-label-row.dark {
    border-color: var(--darkline)
}

.sv3-hero {
    min-height: 100svh;
    background: var(--black);
    color: #fff;
    overflow: hidden;
    position: relative
}

.sv3-hero:after {
    content: "";
    position: absolute;
    right: -20vw;
    bottom: -30vw;
    width: 65vw;
    height: 65vw;
    background: radial-gradient(circle,rgba(255,77,25,.15),transparent 68%);
    pointer-events: none
}

.sv3-topline {
    display: flex;
    justify-content: space-between;
    padding-top: 29px;
    color: #5e5e5e;
    font: 9px "DM Mono",monospace;
    letter-spacing: .08em;
    text-transform: uppercase
}

.sv3-topline b {
    color: var(--orange);
    font-weight: 400
}

.sv3-hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: center;
    gap: 50px;
    min-height: calc(100svh - 105px);
    padding: 65px 0 45px
}

.sv3-hero-copy {
    position: relative;
    z-index: 2
}

.sv3-hero h1 {
    font-size: clamp(68px,8vw,120px);
    line-height: .79;
    letter-spacing: -.095em;
    margin: 22px 0 0;
    font-weight: 800
}

.sv3-hero h1 em {
    font-style: normal;
    color: var(--orange)
}

.sv3-hero-dek {
    font-size: 18px;
    line-height: 1.7;
    color: #969696;
    max-width: 620px;
    margin: 35px 0
}

.sv3-hero-cta {
    display: flex;
    align-items: center;
    gap: 28px
}

.sv3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    text-decoration: none;
    font: 9px "DM Mono",monospace;
    letter-spacing: .05em;
    padding: 16px 17px;
    transition: .3s
}

.orange-btn {
    min-width: 205px;
    color: #fff;
    background: linear-gradient(135deg,var(--orange2),var(--red))
}

.orange-btn:hover {
    transform: translateY(-8px) rotate(-1.5deg)
}

.sv3-btn span {
    font-size: 15px
}

.sv3-scroll {
    color: #777;
    text-decoration: none;
    font: 9px "DM Mono",monospace
}

.sv3-scroll:hover {
    color: #fff
}

.sv3-interface {
    height: 590px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1200px
}

.ui-browser {
    width: 88%;
    height: 66%;
    border: 1px solid #383838;
    background: #0e0e0e;
    box-shadow: 0 50px 100px rgba(0,0,0,.55);
    transform: rotateY(-9deg) rotateX(4deg);
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
    position: relative;
    z-index: 2
}

.sv3-interface:hover .ui-browser {
    transform: rotateY(-2deg) rotateX(1deg) translateY(-7px)
}

.ui-browser-top {
    height: 30px;
    border-bottom: 1px solid #252525;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    color: #555;
    font: 7px "DM Mono",monospace
}

.ui-browser-top i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #444
}

.ui-browser-top span {
    margin: auto
}

.ui-browser-body {
    padding: 20px 25px
}

.ui-nav {
    display: flex;
    gap: 18px;
    align-items: center;
    font: 7px "DM Mono",monospace;
    color: #666
}

.ui-nav strong {
    margin-right: auto;
    color: #eee;
    font-size: 12px
}

.ui-hero-line {
    margin-top: 55px;
    position: relative
}

.ui-hero-line small {
    font: 6px "DM Mono",monospace;
    color: var(--orange)
}

.ui-hero-line h2 {
    font-size: 52px;
    line-height: .78;
    letter-spacing: -.08em;
    margin: 15px 0
}

.ui-hero-line h2 span {
    color: #666
}

.ui-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    color: var(--orange);
    font-size: 28px
}

.ui-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
    margin-top: 40px
}

.ui-blocks i {
    height: 42px;
    background: #181818;
    border: 1px solid #242424
}

.ui-card {
    position: absolute;
    z-index: 4;
    padding: 12px 15px;
    background: #101010;
    border: 1px solid #333;
    min-width: 105px;
    box-shadow: 0 15px 35px #000;
    animation: uiFloat 5s ease-in-out infinite
}

.ui-card small {
    display: block;
    font: 7px "DM Mono",monospace;
    color: #777
}

.ui-card strong {
    font: 27px Manrope;
    color: #eee
}

.ui-card-a {
    top: 12%;
    left: 0
}

.ui-card-b {
    right: 0;
    top: 40%;
    animation-delay: -1.8s
}

.ui-card-c {
    left: 9%;
    bottom: 12%;
    animation-delay: -3s
}

.ui-cursor {
    position: absolute;
    z-index: 5;
    right: 10%;
    bottom: 17%;
    font-size: 22px;
    color: var(--orange);
    animation: cursorPulse 2s infinite
}

.ui-coordinate {
    position: absolute;
    right: 2%;
    top: 5%;
    font: 7px/1.6 "DM Mono",monospace;
    color: #4e4e4e;
    text-align: right
}

@keyframes uiFloat {
    50% {
        transform: translateY(-13px) rotate(1deg)
    }
}

@keyframes cursorPulse {
    50% {
        transform: scale(1.35);
        opacity: .55
    }
}

.sv3-hero-bottom {
    display: flex;
    justify-content: space-between;
    color: #555;
    font: 8px "DM Mono",monospace;
    letter-spacing: .1em;
    padding-bottom: 24px
}

.sv3-truth {
    padding: 120px 0 135px
}

.truth-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 110px;
    padding: 72px 0 80px
}

.truth-grid h2 {
    font-size: clamp(53px,6.5vw,88px);
    line-height: .84;
    letter-spacing: -.085em;
    margin: 0
}

.truth-copy {
    align-self: end;
    max-width: 470px;
    color: #666;
    font-size: 16px;
    line-height: 1.8
}

.truth-copy p {
    margin: 0 0 20px
}

.truth-copy strong {
    color: #111
}

.decision-strip {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.decision-strip div {
    min-height: 150px;
    padding: 18px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column
}

.decision-strip div:last-child {
    border: 0
}

.decision-strip small {
    font: 8px "DM Mono",monospace;
    color: var(--orange)
}

.decision-strip strong {
    font-size: 18px;
    line-height: 1;
    letter-spacing: -.04em;
    margin-top: auto
}

.sv3-transformation {
    background: var(--black);
    color: #fff;
    padding: 115px 0 140px;
    overflow: hidden
}

.transform-intro {
    padding: 70px 0 55px
}

.transform-intro h2 {
    font-size: clamp(55px,6.7vw,94px);
    line-height: .83;
    letter-spacing: -.09em;
    margin: 15px 0
}

.transform-intro h2 span {
    color: #666
}

.transform-intro h2 b {
    color: var(--orange);
    font-weight: 800
}

.transform-stage {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    min-height: 400px;
    border-top: 1px solid var(--darkline);
    border-bottom: 1px solid var(--darkline)
}

.transform-side {
    padding: 35px 25px
}

.transform-side small {
    font: 8px "DM Mono",monospace;
    color: #666
}

.transform-side div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #292929;
    padding: 24px 0;
    font: 12px "DM Mono",monospace
}

.transform-side i {
    font-style: normal;
    color: #666
}

.transform-side.after i {
    color: var(--orange)
}

.transform-axis {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #292929;
    border-right: 1px solid #292929;
    font-size: 35px;
    color: var(--orange)
}

.sv3-craft {
    padding: 120px 0 130px
}

.craft-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 70px 0 55px
}

.craft-heading h2 {
    font-size: clamp(55px,6.5vw,90px);
    line-height: .83;
    letter-spacing: -.09em;
    margin: 0
}

.craft-heading h2 span {
    color: #777
}

.craft-heading p {
    max-width: 260px;
    color: #777;
    font-size: 14px;
    line-height: 1.6;
    margin: 0
}

.craft-list {
    border-top: 1px solid var(--line)
}

.craft {
    display: grid;
    grid-template-columns: 90px 1fr 45px;
    gap: 25px;
    align-items: start;
    padding: 27px 0;
    border-bottom: 1px solid var(--line);
    transition: .35s
}

.craft:hover {
    padding-left: 14px;
    background: linear-gradient(90deg,rgba(255,77,25,.035),transparent)
}

.craft-no {
    font: 9px "DM Mono",monospace;
    color: var(--orange)
}

.craft h3 {
    font-size: 28px;
    letter-spacing: -.05em;
    margin: 0 0 6px
}

.craft p {
    max-width: 650px;
    font-size: 14px;
    line-height: 1.65;
    color: #777;
    margin: 0
}

.craft>strong {
    font-size: 19px;
    font-weight: 400;
    color: #999;
    text-align: right
}

.craft:hover>strong {
    color: var(--orange);
    transform: translate(3px,-3px)
}

.sv3-signature {
    background: #e8e8e1;
    padding: 115px 0 130px;
    overflow: hidden
}

.sv3-signature .sv3-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center
}

.signature-visual {
    height: 500px;
    background: #111;
    position: relative;
    overflow: hidden;
    border: 1px solid #222
}

.sig-word {
    position: absolute;
    font-size: clamp(40px,5vw,72px);
    font-weight: 800;
    letter-spacing: -.08em;
    color: #fff
}

.sig-a {
    top: 12%;
    left: 9%
}

.sig-b {
    top: 41%;
    left: 28%;
    color: var(--orange)
}

.sig-c {
    bottom: 11%;
    left: 9%;
    color: #777
}

.sig-line {
    position: absolute;
    height: 1px;
    width: 80%;
    left: 10%;
    top: 34%;
    background: #333;
    transform: rotate(-9deg)
}

.sig-line.second {
    top: 64%;
    transform: rotate(11deg)
}

.sig-orb {
    position: absolute;
    width: 140px;
    height: 140px;
    border: 1px solid #444;
    border-radius: 50%;
    right: -30px;
    top: 35%;
    box-shadow: 0 0 70px rgba(255,77,25,.15)
}

.signature-copy h2 {
    font-size: clamp(48px,5.5vw,76px);
    line-height: .84;
    letter-spacing: -.08em;
    margin: 18px 0 30px
}

.signature-copy h2 em {
    color: #777;
    font-style: normal
}

.signature-copy>p {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    max-width: 480px
}

.sv3-diagnostic {
    background: #111;
    color: #fff;
    padding: 115px 0 130px
}

.diagnostic-heading {
    padding: 70px 0 55px
}

.diagnostic-heading h2 {
    font-size: clamp(55px,6.7vw,92px);
    line-height: .82;
    letter-spacing: -.09em;
    margin: 15px 0
}

.diagnostic-list {
    border-top: 1px solid var(--darkline)
}

.diagnostic {
    width: 100%;
    background: none;
    color: #fff;
    border: 0;
    border-bottom: 1px solid var(--darkline);
    padding: 25px 0;
    display: grid;
    grid-template-columns: 50px 1fr 35px;
    gap: 15px;
    text-align: left;
    cursor: pointer;
    align-items: start
}

.diagnostic>span {
    font: 9px "DM Mono",monospace;
    color: var(--orange)
}

.diagnostic>b {
    font: 22px Manrope;
    letter-spacing: -.04em;
    font-weight: 600
}

.diagnostic>i {
    font: 20px "DM Mono",monospace;
    color: #777;
    font-style: normal;
    text-align: right;
    transition: .3s
}

.diagnostic em {
    display: none;
    grid-column: 2/3;
    color: #777;
    font: 13px/1.7 Manrope;
    font-style: normal;
    padding-top: 12px;
    max-width: 650px
}

.diagnostic.open>i {
    transform: rotate(45deg);
    color: var(--orange)
}

.diagnostic.open em {
    display: block
}

.sv3-process {
    padding: 120px 0 130px
}

.process-title {
    padding: 70px 0 60px
}

.process-title h2 {
    font-size: clamp(55px,6.7vw,92px);
    line-height: .83;
    letter-spacing: -.09em;
    margin: 0
}

.process-title h2 span {
    color: var(--orange)
}

.process-rail {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.process-card {
    min-height: 290px;
    padding: 18px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column
}

.process-card:last-child {
    border: 0
}

.process-card>span {
    font: 9px "DM Mono",monospace;
    color: var(--orange)
}

.process-card h3 {
    font-size: 24px;
    letter-spacing: -.05em;
    margin: auto 0 7px
}

.process-card p {
    font-size: 12px;
    line-height: 1.55;
    color: #777;
    margin: 0
}

.sv3-engagement {
    padding: 120px 0 135px;
    background: #e8e8e1
}

.engagement-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 100px;
    padding-top: 70px
}

.engagement-intro h2 {
    font-size: clamp(50px,5.8vw,78px);
    line-height: .84;
    letter-spacing: -.085em;
    margin: 18px 0 30px
}

.engagement-intro h2 span {
    color: #777
}

.engagement-intro>p:last-child {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    max-width: 430px
}

.engagement-options {
    border-top: 1px solid #bbb
}

.engage {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 8px;
    padding: 25px 0;
    border-bottom: 1px solid #bbb
}

.engage>span {
    font: 9px "DM Mono",monospace;
    color: var(--orange)
}

.engage h3 {
    font-size: 26px;
    letter-spacing: -.05em;
    margin: 0 0 6px
}

.engage p {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.6;
    color: #666;
    margin: 0 0 13px
}

.engage a {
    grid-row: 3;
    font: 8px "DM Mono",monospace;
    text-decoration: none;
    grid-column: 2;
}

.engage a:hover {
    color: var(--orange)
}

.sv3-proof {
    background: var(--black);
    color: #fff;
    padding: 115px 0 140px
}

.proof-top {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 70px 0 50px
}

.proof-top h2 {
    font-size: clamp(58px,6.7vw,92px);
    line-height: .8;
    letter-spacing: -.09em;
    margin: 0
}

.proof-top a {
    font: 9px "DM Mono",monospace;
    text-decoration: none;
    border: 1px solid #333;
    padding: 14px 16px
}

.proof-top a:hover {
    border-color: #777
}

.proof-cards {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 15px
}

.proof-main,.proof-side {
    text-decoration: none
}

.proof-image {
    height: 390px;
    border: 1px solid #2a2a2a;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .4s
}

.proof-main:hover .proof-image,.proof-side:hover .proof-image {
    transform: translateY(-6px);
    border-color: #555
}

.proof-image span,.proof-image small {
    font: 8px "DM Mono",monospace;
    color: #777
}

.proof-image strong {
    font-size: 45px;
    line-height: .84;
    letter-spacing: -.08em
}

.proof-image small {
    color: var(--orange)
}

.proof-main .proof-image {
    background: radial-gradient(circle at 75% 30%,rgba(255,77,25,.12),transparent 38%),#101010
}

.proof-side .proof-image {
    background: #15100f
}

.proof-caption {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    color: #777;
    font: 8px "DM Mono",monospace
}

.proof-caption b {
    font-weight: 400;
    color: #ddd
}

.sv3-faq {
    padding: 120px 0 135px
}

.faq-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 110px;
    padding-top: 70px
}

.faq-grid>h2 {
    font-size: clamp(50px,5.7vw,78px);
    line-height: .84;
    letter-spacing: -.085em;
    margin: 0
}

.faq-list {
    border-top: 1px solid var(--line)
}

.faq-list details {
    border-bottom: 1px solid var(--line)
}

.faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 23px 35px 23px 0;
    font-size: 17px;
    font-weight: 700;
    position: relative
}

.faq-list summary::-webkit-details-marker {
    display: none
}

.faq-list summary:after {
    content: "+";
    position: absolute;
    right: 0;
    font: 19px "DM Mono",monospace;
    color: #777
}

.faq-list details[open] summary:after {
    content: "−";
    color: var(--orange)
}

.faq-list p {
    font-size: 14px;
    line-height: 1.75;
    color: #777;
    margin: 0;
    padding: 0 40px 25px 0
}

.sv3-close {
    background: var(--black);
    color: #fff;
    padding: 135px 0 110px;
    min-height: 80vh;
    display: flex;
    align-items: center
}

.sv3-close h2 {
    font-size: clamp(60px,8.3vw,120px);
    line-height: .78;
    letter-spacing: -.095em;
    margin: 18px 0 85px
}

.sv3-close h2 em {
    font-style: normal;
    color: var(--orange)
}

.close-row {
    border-top: 1px solid #2a2a2a;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: end
}

.close-row p {
    font: 10px/1.7 "DM Mono",monospace;
    color: #777;
    margin: 0
}

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

.reveal.is-visible {
    opacity: 1;
    transform: none
}

@media(max-width: 1050px) {
    .sv3-hero-grid {
        grid-template-columns:1fr
    }

    .sv3-interface {
        height: 480px;
        max-width: 700px;
        margin: auto
    }

    .truth-grid,.sv3-signature .sv3-shell,.engagement-grid,.faq-grid {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .process-rail {
        grid-template-columns: repeat(3,1fr)
    }

    .process-card:nth-child(3) {
        border-right: 0
    }

    .process-card:nth-child(n+4) {
        border-top: 1px solid var(--line)
    }
}

@media(max-width: 760px) {
    .sv3-shell {
        width:calc(100% - 40px)
    }

    .sv3-hero h1 {
        font-size: 16vw
    }

    .sv3-hero-dek {
        font-size: 16px
    }

    .sv3-interface {
        height: 400px
    }

    .ui-browser {
        width: 92%;
        height: 65%
    }

    .ui-hero-line h2 {
        font-size: 39px
    }

    .sv3-truth,.sv3-craft,.sv3-process,.sv3-engagement,.sv3-faq {
        padding: 85px 0
    }

    .sv3-transformation,.sv3-diagnostic,.sv3-proof,.sv3-signature {
        padding: 85px 0
    }

    .truth-grid {
        padding: 50px 0
    }

    .truth-grid h2,.transform-intro h2,.craft-heading h2,.diagnostic-heading h2,.process-title h2,.engagement-intro h2,.proof-top h2,.faq-grid>h2 {
        font-size: 48px
    }

    .decision-strip {
        grid-template-columns: 1fr 1fr
    }

    .decision-strip div:nth-child(2) {
        border-right: 0
    }

    .decision-strip div:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }

    .transform-stage {
        grid-template-columns: 1fr;
        min-height: 0
    }

    .transform-axis {
        height: 60px;
        border-left: 0;
        border-right: 0;
        border-top: 1px solid #292929;
        border-bottom: 1px solid #292929
    }

    .transform-side {
        padding: 25px
    }

    .craft-heading {
        display: block
    }

    .craft-heading p {
        margin-top: 25px
    }

    .craft {
        grid-template-columns: 50px 1fr 25px
    }

    .craft h3 {
        font-size: 24px
    }

    .signature-visual {
        height: 390px
    }

    .diagnostic>b {
        font-size: 17px
    }

    .process-rail {
        grid-template-columns: 1fr 1fr
    }

    .process-card:nth-child(3) {
        border-right: 1px solid var(--line)
    }

    .process-card:nth-child(even) {
        border-right: 0
    }

    .process-card:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }

    .proof-cards {
        grid-template-columns: 1fr
    }

    .proof-top {
        display: block
    }

    .proof-top a {
        display: inline-block;
        margin-top: 25px
    }

    .close-row {
        display: block
    }

    .close-row .sv3-btn {
        margin-top: 25px
    }
}

@media(max-width: 480px) {
    .sv3-shell {
        width:calc(100% - 30px)
    }

    .sv3-topline span:last-child {
        display: none
    }

    .sv3-hero h1 {
        font-size: 18vw
    }

    .sv3-hero-cta {
        flex-direction: column;
        align-items: flex-start
    }

    .sv3-interface {
        height: 330px
    }

    .ui-card {
        min-width: 75px;
        padding: 8px
    }

    .ui-card strong {
        font-size: 20px
    }

    .ui-browser {
        height: 62%
    }

    .ui-hero-line {
        margin-top: 30px
    }

    .ui-hero-line h2 {
        font-size: 29px
    }

    .truth-grid h2,.transform-intro h2,.craft-heading h2,.diagnostic-heading h2,.process-title h2,.engagement-intro h2,.proof-top h2,.faq-grid>h2 {
        font-size: 42px
    }

    .decision-strip strong {
        font-size: 14px
    }

    .decision-strip div {
        min-height: 125px
    }

    .signature-visual {
        height: 330px
    }

    .sig-word {
        font-size: 35px
    }

    .process-card {
        min-height: 215px
    }

    .sv3-close h2 {
        font-size: 17vw
    }
}

@media(prefers-reduced-motion:reduce) {
    *,*:before,*:after {
        animation: none!important;
        transition: none!important;
        scroll-behavior: auto!important
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}


/* =========================================================
   DEVSID SERVICE PAGES — SHARED HEADER CTA
   Matches the orange hero CTA treatment across all services.
   ========================================================= */

.sv3-service-page .header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    min-height: 47px;
    padding: 0 18px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(
        135deg,
        #ff914d 0%,
        #a02d37 70%
    );
    color: #fff;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .035em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition:
        color .25s ease,
        background .5s ease,
        transform .3s ease;
    transform-origin: center;
}

.sv3-service-page .header-cta:hover {
    background: linear-gradient(
        135deg,
        #ff914d 0%,
        #a02d37 100%
    );
    color: #fff;
    transform: translateY(-10px) rotate(-2deg);
}

.sv3-service-page .header-cta:focus-visible {
    outline: 2px solid #ff914d;
    outline-offset: 4px;
}

.sv3-service-page .header-cta-arrow {
    display: inline-block;
    line-height: 1;
    transition: transform .3s ease;
}

.sv3-service-page .header-cta:hover .header-cta-arrow {
    transform: translate(3px, -3px);
}

/* Keep the service hero CTAs visually consistent with the header CTA. */
.sv3-service-page .sv3-btn.orange-btn {
    min-height: 47px;
    padding: 0 18px;
    gap: 22px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(
        135deg,
        #ff914d 0%,
        #a02d37 70%
    );
    color: #fff;
    font-family: "DM Mono", monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .035em;
    text-transform: uppercase;
    transition:
        color .25s ease,
        background .5s ease,
        transform .3s ease;
}

.sv3-service-page .sv3-btn.orange-btn:hover {
    background: linear-gradient(
        135deg,
        #ff914d 0%,
        #a02d37 100%
    );
    color: #fff;
    transform: translateY(-10px) rotate(-2deg);
}

.sv3-service-page .sv3-btn.orange-btn span {
    transition: transform .3s ease;
}

.sv3-service-page .sv3-btn.orange-btn:hover span {
    transform: translate(3px, -3px);
}

@media (max-width: 767px) {
    .sv3-service-page .header-cta {
        gap: 14px;
        min-height: 43px;
        padding: 0 14px;
    }

    .sv3-service-page .sv3-btn.orange-btn {
        gap: 16px;
        min-height: 45px;
        padding: 0 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv3-service-page .header-cta,
    .sv3-service-page .header-cta-arrow,
    .sv3-service-page .sv3-btn.orange-btn,
    .sv3-service-page .sv3-btn.orange-btn span {
        transition: none !important;
    }

    .sv3-service-page .header-cta:hover,
    .sv3-service-page .sv3-btn.orange-btn:hover {
        transform: none !important;
    }

    .sv3-service-page .header-cta:hover .header-cta-arrow,
    .sv3-service-page .sv3-btn.orange-btn:hover span {
        transform: none !important;
    }
}

/* =========================================================
   DEVSID.IN — SERVICE PAGE VISUAL SYSTEM
   Page-specific hero art, transformation diagrams and signature
   visuals for all six core service pages.
   ========================================================= */

/* Gradient highlight used for the key words in service headlines. */
.sv3-service-page .hero-title-highlight {
    display: inline;
    background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: inherit;
}

/* Prevent inherited generic heading emphasis from flattening the gradient. */
.sv3-service-page .sv3-hero h1 .hero-title-highlight,
.sv3-service-page h2 .hero-title-highlight {
    background-image: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Shared custom visual stage treatment */
.sv3-service-page .sv3-interface {
    isolation: isolate;
    overflow: hidden;
}
.sv3-service-page .sv3-interface > * {
    box-sizing: border-box;
}
.sv3-service-page .signature-visual {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.sv3-service-page .signature-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sv3-service-page .signature-visual > * {
    position: relative;
    z-index: 1;
}

/* =========================================================
   WEBSITE DESIGN — browser mockup refinements
   ========================================================= */
.sv3-service-page .sv3-interface:not(.wd-code-stage):not(.bi-mark-field):not(.bl-launch-stage):not(.bs-map):not(.dx-experience-stage) {
    min-height: 450px;
}
.sv3-service-page .ui-noise {
    position: absolute;
    inset: 5%;
    opacity: .45;
    background-image: radial-gradient(#555 0.7px, transparent .7px);
    background-size: 13px 13px;
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
.sv3-service-page .ui-browser {
    border-radius: 3px;
    overflow: hidden;
    transform: rotateY(-8deg) rotateX(3deg);
}
.sv3-service-page .ui-browser-body {
    min-height: 100%;
}
.sv3-service-page .ui-card {
    min-width: 90px;
    box-shadow: 0 15px 45px rgba(0,0,0,.35);
    animation: sv3-float 5s ease-in-out infinite;
}
.sv3-service-page .ui-card-b { animation-delay: -1.5s; }
.sv3-service-page .ui-card-c { animation-delay: -3s; }
.sv3-service-page .ui-cursor {
    animation: sv3-cursor-drift 6s ease-in-out infinite;
}

/* =========================================================
   DIGITAL EXPERIENCE — interaction stage
   ========================================================= */
.dx-hero .sv3-hero-grid { grid-template-columns: 1fr 1fr; }
.dx-experience-stage {
    min-height: 590px;
    background:
        radial-gradient(ellipse at 55% 48%, rgba(255,77,25,.16), transparent 52%),
        #0b0b0b;
}
.dx-grid, .wd-code-stage:before, .bi-mark-field:before, .bs-map:before {
    position: absolute;
    inset: 0;
    content: "";
    background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size: 38px 38px;
    mask-image: radial-gradient(ellipse, #000 20%, transparent 78%);
    pointer-events: none;
}
.dx-screen {
    position: relative;
    z-index: 2;
    width: 68%;
    height: 66%;
    border: 1px solid #3a3a3a;
    background: linear-gradient(145deg,#171717,#090909);
    box-shadow: 0 35px 90px rgba(0,0,0,.6), 0 0 55px rgba(255,77,25,.08);
    transform: perspective(900px) rotateY(-9deg) rotateX(3deg);
    animation: dx-screen-hover 7s ease-in-out infinite;
}
.dx-screen-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 16px;
    border-bottom:1px solid #303030;
    color:#777;
    font:8px "DM Mono",monospace;
    letter-spacing:.08em;
}
.dx-screen-head b { color:#ff914d; font-weight:400; }
.dx-screen-body { padding:38px 30px; position:relative; }
.dx-screen-body small { color:#ff914d; font:9px "DM Mono",monospace; letter-spacing:.16em; }
.dx-screen-body strong {
    display:block;
    margin-top:20px;
    color:#f5f5f0;
    font-size:clamp(34px,4vw,58px);
    line-height:.83;
    letter-spacing:-.085em;
    font-weight:800;
}
.dx-screen-body strong i { color:#ff914d; font-style:normal; }
.dx-scroll-line { width:1px; height:40px; background:linear-gradient(#ff914d,transparent); margin-top:30px; animation:dx-line-pulse 2s ease-in-out infinite; }
.dx-scroll-label { display:block; margin-top:10px; color:#777; font:7px "DM Mono",monospace; letter-spacing:.1em; }
.dx-cursor-ring {
    position:absolute; z-index:4; width:76px; height:76px; border:1px solid rgba(255,145,77,.75);
    border-radius:50%; left:62%; top:38%; box-shadow:0 0 30px rgba(255,77,25,.16);
    animation:dx-cursor 7s ease-in-out infinite;
}
.dx-dot { position:absolute; z-index:3; width:6px; height:6px; border-radius:50%; background:#ff914d; box-shadow:0 0 18px #ff4d19; }
.dx-dot-a { top:21%; left:24%; }.dx-dot-b { right:15%; top:34%; animation-delay:-.7s; }.dx-dot-c { bottom:19%; left:29%; animation-delay:-1.4s; }
.dx-float {
    position:absolute; z-index:5; padding:12px 14px; border:1px solid #333; background:rgba(15,15,15,.92);
    color:#888; font:8px "DM Mono",monospace; letter-spacing:.08em; box-shadow:0 15px 40px rgba(0,0,0,.35);
    animation:sv3-float 5s ease-in-out infinite;
}
.dx-float b { color:#ff914d; font-weight:400; margin-left:8px; }
.dx-float-a { top:17%; right:5%; }.dx-float-b { bottom:22%; left:3%; animation-delay:-1.6s; }.dx-float-c { bottom:12%; right:8%; animation-delay:-3s; }
.dx-flow-stage {
    min-height:470px; margin-top:55px; position:relative; display:grid; grid-template-columns:repeat(4,1fr);
    align-items:center; gap:15px; padding:80px 30px 105px; background:#101010; color:#fff; overflow:hidden;
}
.dx-flow-stage:before {
    content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%,rgba(255,77,25,.14),transparent 50%);
}
.dx-flow-node {
    position:relative; z-index:2; min-height:145px; padding:20px 16px; border:1px solid #343434;
    background:#151515; display:flex; flex-direction:column; justify-content:space-between;
    transition:transform .35s,border-color .35s;
}
.dx-flow-node:hover { transform:translateY(-8px); border-color:#ff914d; }
.dx-flow-node small { color:#ff914d; font:9px "DM Mono",monospace; }
.dx-flow-node b { font-size:20px; letter-spacing:-.05em; }
.dx-flow-node span { color:#858585; font-size:11px; line-height:1.5; }
.dx-flow-core {
    position:absolute; z-index:3; left:50%; bottom:18px; transform:translateX(-50%);
    padding:12px 25px; border:1px solid rgba(255,145,77,.55); background:#17110f; text-align:center;
}
.dx-flow-core span { display:block; color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.13em; }
.dx-flow-core strong { display:block; margin-top:5px; font-size:17px; line-height:.9; letter-spacing:-.05em; }
.dx-flow-line { position:absolute; z-index:1; top:50%; height:1px; background:linear-gradient(90deg,transparent,#ff914d,transparent); transform-origin:left; opacity:.65; }
.flow-line-a { left:20%; width:20%; }.flow-line-b { left:40%; width:20%; }.flow-line-c { left:60%; width:20%; }
.dx-flow-caption { position:absolute; bottom:15px; right:20px; color:#666; font:7px "DM Mono",monospace; letter-spacing:.1em; }
.dx-lab {
    background:radial-gradient(circle at 50% 45%,rgba(255,77,25,.16),transparent 42%),#0b0b0b;
    border:1px solid #282828;
}
.dx-lab:after { content:""; position:absolute; inset:9%; border:1px solid #303030; border-radius:50%; box-shadow:0 0 0 35px rgba(255,255,255,.015),0 0 0 70px rgba(255,255,255,.012); }
.dx-lab .lab-orbit { position:absolute; width:65%; height:65%; border:1px dashed rgba(255,145,77,.5); border-radius:50%; left:17.5%; top:17.5%; animation:dx-orbit 24s linear infinite; }
.dx-lab .lab-card { position:absolute; z-index:3; padding:14px 17px; background:#151515; border:1px solid #393939; color:#ddd; font:9px "DM Mono",monospace; }
.dx-lab .lab-card:nth-of-type(2) { left:8%; top:16%; }.dx-lab .lab-card:nth-of-type(3) { right:8%; top:25%; }.dx-lab .lab-card:nth-of-type(4) { left:18%; bottom:15%; }
.dx-lab .lab-head,.dx-lab .lab-status { position:absolute; z-index:3; color:#777; font:8px "DM Mono",monospace; letter-spacing:.1em; }
.dx-lab .lab-head { top:20px; left:22px; }.dx-lab .lab-status { bottom:20px; right:22px; }
.dx-lab .lab-cursor { position:absolute; z-index:4; left:48%; top:43%; color:#ff914d; font-size:40px; animation:dx-cursor 5s ease-in-out infinite; }
.dx-proof-lynk { background:radial-gradient(circle at 80% 20%,rgba(255,145,77,.22),transparent 35%),#121212; }
.dx-proof-pixel { background:linear-gradient(135deg,#191919,#0c0c0c); }

/* =========================================================
   WEBSITE DEVELOPMENT — code editor and architecture
   ========================================================= */
.wd-hero .sv3-hero-grid { grid-template-columns:1fr 1fr; }
.wd-code-stage { min-height:590px; background:radial-gradient(circle at 50% 50%,rgba(255,77,25,.13),transparent 52%),#0a0a0a; }
.wd-browser {
    position:relative; z-index:2; width:78%; border:1px solid #3b3b3b; background:#111;
    box-shadow:0 35px 90px rgba(0,0,0,.6); transform:perspective(900px) rotateY(-8deg);
    animation:wd-browser-float 7s ease-in-out infinite;
}
.wd-browser-top { height:38px; display:flex; align-items:center; gap:6px; padding:0 14px; border-bottom:1px solid #303030; color:#777; font:8px "DM Mono",monospace; }
.wd-browser-top i { width:6px; height:6px; border-radius:50%; background:#555; }
.wd-browser-top i:first-child { background:#ff914d; }.wd-browser-top span { margin-left:10px; }
.wd-code { padding:30px 24px 18px; color:#b9b9b9; font:clamp(8px,.85vw,11px)/2 "DM Mono",monospace; min-height:260px; }
.wd-code b { color:#ff914d; font-weight:400; }.wd-code em { color:#b58bdb; font-style:normal; }.wd-code strong { color:#a8c98b; font-weight:400; }.wd-code span { color:#72b9d4; }
.wd-code .indent { padding-left:22px; }.wd-code .indent2 { padding-left:44px; }
.wd-cursor { display:inline-block; color:#ff914d; animation:wd-blink 1s steps(2) infinite; }
.wd-status { display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid #303030; color:#8b8b8b; font:8px "DM Mono",monospace; }
.wd-status strong { color:#9ad18b; font-size:14px; }.wd-status small { margin-left:auto; color:#666; }
.wd-float { position:absolute; z-index:4; padding:12px 15px; border:1px solid #383838; background:#151515; color:#777; font:8px "DM Mono",monospace; box-shadow:0 15px 35px #0008; animation:sv3-float 5s ease-in-out infinite; }
.wd-float strong { color:#ff914d; font-weight:400; margin-left:8px; }.wd-float-a { top:19%; right:2%; }.wd-float-b { bottom:23%; left:2%; animation-delay:-1.5s; }.wd-float-c { bottom:12%; right:7%; animation-delay:-3s; }
.wd-system-stage {
    min-height:470px; margin-top:55px; position:relative; display:grid; grid-template-columns:repeat(4,1fr);
    align-items:center; gap:20px; padding:65px 30px; overflow:hidden; background:#101010; color:#fff;
}
.wd-system-stage:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(255,77,25,.13),transparent 48%); }
.wd-node { position:relative; z-index:2; min-height:115px; padding:18px; border:1px solid #383838; background:#171717; display:flex; flex-direction:column; justify-content:space-between; }
.wd-node span { color:#999; font:8px "DM Mono",monospace; letter-spacing:.1em; }.wd-node strong { color:#ff914d; font-size:30px; letter-spacing:-.06em; }
.wd-core { position:absolute; z-index:3; left:50%; bottom:16px; transform:translateX(-50%); text-align:center; padding:10px 22px; background:#20130f; border:1px solid #9b5034; }
.wd-core small { display:block; color:#ddd; font:10px/1.1 "DM Mono",monospace; }.wd-core b { display:block; color:#ff914d; font:8px "DM Mono",monospace; margin-top:6px; }
.wd-wire { position:absolute; top:50%; height:1px; background:linear-gradient(90deg,transparent,#ff914d,transparent); opacity:.55; }
.wire-a { left:16%; width:20%; }.wire-b { left:36%; width:20%; }.wire-c { left:56%; width:20%; }.wire-d { left:76%; width:12%; }
.wd-system-caption { position:absolute; right:18px; top:16px; color:#666; font:7px/1.7 "DM Mono",monospace; text-align:right; letter-spacing:.08em; }
.wd-engine-board { padding:35px; background:radial-gradient(circle at 50% 50%,rgba(255,77,25,.15),transparent 48%),#0b0b0b; border:1px solid #292929; }
.wd-engine-board:before { background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:32px 32px; }
.wd-engine-board .engine-title { font-size:clamp(25px,4vw,48px); color:#fff; letter-spacing:-.08em; }
.wd-engine-board .engine-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:35px; }
.wd-engine-board .engine-metric { padding:15px; border:1px solid #353535; background:#121212; }
.wd-engine-board .engine-metric span { display:block; color:#777; font:8px "DM Mono",monospace; }.wd-engine-board .engine-metric strong { display:block; margin-top:8px; color:#ff914d; font-size:25px; }
.wd-engine-board .engine-orb { position:absolute; width:110px; height:110px; border:1px solid #ff914d; border-radius:50%; right:12%; top:20%; box-shadow:0 0 45px #ff4d1922,inset 0 0 30px #ff4d191c; animation:dx-orbit 18s linear infinite; }
.wd-engine-board .engine-line { height:1px; background:linear-gradient(90deg,transparent,#ff914d,transparent); margin-top:22px; }
.wd-proof-lynk { background:radial-gradient(circle at 80% 20%,rgba(255,145,77,.2),transparent 35%),#111; }
.wd-proof-pixel { background:linear-gradient(145deg,#171717,#090909); }

/* =========================================================
   BRAND IDENTITY — mark field and identity system
   ========================================================= */
.bi-hero .sv3-hero-grid { grid-template-columns:1fr 1fr; }
.bi-mark-field { min-height:590px; background:radial-gradient(circle at 50% 48%,rgba(255,77,25,.15),transparent 48%),#0b0b0b; }
.bi-paper { position:absolute; width:58%; height:66%; left:21%; top:17%; background:#e8e5dc; transform:rotate(-5deg); box-shadow:0 30px 80px #0009; }
.bi-mark { position:absolute; z-index:2; left:50%; top:48%; transform:translate(-50%,-50%); font-size:clamp(150px,19vw,250px); line-height:1; font-weight:800; letter-spacing:-.12em; color:#111; }
.bi-mark.mark-outline { color:transparent; -webkit-text-stroke:1px rgba(255,77,25,.85); transform:translate(-43%,-54%) scale(1.03); }
.bi-mark.mark-cut { color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.25); transform:translate(-58%,-44%) scale(.96); }
.bi-token { position:absolute; z-index:4; padding:10px 12px; background:#151515; border:1px solid #393939; color:#aaa; font:8px "DM Mono",monospace; letter-spacing:.08em; box-shadow:0 10px 30px #0008; }
.token-a { top:17%; left:3%; }.token-b { top:25%; right:2%; }.token-c { bottom:18%; left:7%; }
.bi-type-sample { position:absolute; z-index:3; right:10%; bottom:13%; color:#ff914d; font-size:54px; font-weight:800; letter-spacing:-.1em; }
.bi-orange-block { position:absolute; z-index:1; width:55px; height:55px; background:linear-gradient(135deg,#ff914d,#a02d37); right:20%; top:15%; transform:rotate(18deg); }
.bi-cross { position:absolute; z-index:3; width:20px; height:20px; }.bi-cross:before,.bi-cross:after { content:""; position:absolute; background:#ff914d; }.bi-cross:before { width:1px; height:100%; left:50%; }.bi-cross:after { height:1px; width:100%; top:50%; }
.bic-a { left:13%; top:42%; }.bic-b { right:13%; bottom:34%; }
.bi-coordinates { position:absolute; z-index:4; left:22px; bottom:18px; color:#777; font:7px/1.7 "DM Mono",monospace; letter-spacing:.08em; }
.bi-identity-stage { min-height:470px; position:relative; margin-top:55px; background:#111; color:#fff; overflow:hidden; display:grid; place-items:center; }
.bi-identity-stage:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at center,rgba(255,77,25,.18),transparent 45%); }
.bi-identity-core { position:relative; z-index:3; width:190px; height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ff914d; border-radius:50%; background:#17110f; box-shadow:0 0 70px #ff4d1922; text-align:center; }
.bi-identity-core span { color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.13em; }.bi-identity-core strong { margin-top:10px; font-size:24px; line-height:.9; letter-spacing:-.06em; }
.bi-fragment { position:absolute; z-index:2; width:70px; height:70px; display:grid; place-items:center; border:1px solid #393939; background:#191919; color:#ff914d; font-size:28px; box-shadow:0 15px 35px #0008; animation:sv3-float 6s ease-in-out infinite; }
.fragment-a { left:17%; top:18%; }.fragment-b { right:18%; top:20%; animation-delay:-1s; }.fragment-c { left:22%; bottom:17%; animation-delay:-2s; }.fragment-d { right:22%; bottom:16%; animation-delay:-3s; }.fragment-e { left:50%; top:8%; animation-delay:-4s; }
.bi-identity-label { position:absolute; z-index:3; color:#888; font:8px "DM Mono",monospace; letter-spacing:.12em; }.label-a { left:8%; top:50%; }.label-b { right:8%; top:48%; }.label-c { left:30%; bottom:7%; }.label-d { right:30%; bottom:7%; }
.bi-system-board { padding:35px; background:linear-gradient(135deg,#e8e5dc,#d8d5cc); color:#111; }
.bi-system-board:before { background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px); background-size:30px 30px; }
.bi-system-board .board-title { color:#111; font-size:clamp(24px,4vw,46px); line-height:.9; letter-spacing:-.08em; }
.bi-system-board .board-mark { position:absolute; right:12%; top:13%; font-size:clamp(90px,14vw,170px); font-weight:800; letter-spacing:-.12em; color:#111; }
.bi-system-board .board-type { margin-top:28px; font-size:34px; font-weight:800; letter-spacing:-.08em; }
.bi-system-board .board-colour { display:flex; gap:7px; margin-top:20px; }.bi-system-board .board-colour i { display:block; width:42px; height:42px; background:#111; }.bi-system-board .board-colour i:nth-child(2) { background:#ff914d; }.bi-system-board .board-colour i:nth-child(3) { background:#a02d37; }.bi-system-board .board-rule { height:1px; background:#aaa; margin-top:24px; }
.bi-proof-icor { background:radial-gradient(circle at 80% 15%,rgba(255,145,77,.2),transparent 35%),#111; }.bi-proof-hitasha { background:linear-gradient(135deg,#211716,#0d0d0d); }

/* =========================================================
   BRAND LAUNCH — launch sequence and launch map
   ========================================================= */
.bl-hero .sv3-hero-grid { grid-template-columns:1fr 1fr; }
.bl-launch-stage { min-height:590px; background:radial-gradient(circle at 50% 48%,rgba(255,77,25,.2),transparent 50%),#090909; }
.bl-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse,#000 20%,transparent 75%); animation:bl-grid-shift 18s linear infinite; }
.bl-countdown { position:absolute; z-index:4; top:10%; left:8%; display:flex; flex-direction:column; gap:7px; color:#777; font:8px "DM Mono",monospace; letter-spacing:.1em; }
.bl-countdown strong { color:#f5f5f0; font-size:20px; letter-spacing:.08em; }.bl-countdown span { color:#ff914d; font-size:7px; }
.bl-orbit { position:absolute; left:50%; top:49%; border:1px solid rgba(255,145,77,.35); border-radius:50%; transform:translate(-50%,-50%); }
.bl-orbit:after { content:""; position:absolute; width:7px; height:7px; top:50%; left:-4px; border-radius:50%; background:#ff914d; box-shadow:0 0 18px #ff4d19; }
.bl-orbit.orbit-a { width:58%; aspect-ratio:1; animation:bl-orbit-spin 18s linear infinite; }.bl-orbit.orbit-b { width:78%; aspect-ratio:1; border-style:dashed; animation:bl-orbit-spin 28s linear infinite reverse; }
.bl-core { position:absolute; z-index:3; left:50%; top:49%; transform:translate(-50%,-50%); width:190px; height:190px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px solid rgba(255,145,77,.75); border-radius:50%; background:radial-gradient(circle,#26150f,#0d0d0d 70%); box-shadow:0 0 60px #ff4d1928,inset 0 0 40px #ff4d191a; animation:bl-core-pulse 4s ease-in-out infinite; }
.bl-core span { color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.15em; }.bl-core strong { margin-top:10px; color:#fff; font-size:38px; line-height:.8; letter-spacing:-.08em; }
.bl-chip { position:absolute; z-index:5; padding:11px 13px; background:#151515; border:1px solid #3a3a3a; color:#999; font:8px "DM Mono",monospace; letter-spacing:.08em; box-shadow:0 12px 35px #0008; animation:sv3-float 5s ease-in-out infinite; }
.bl-chip b { color:#ff914d; margin-left:8px; font-weight:400; }.chip-a { top:30%; left:2%; }.chip-b { top:30%; right:2%; animation-delay:-1s; }.chip-c { bottom:24%; left:4%; animation-delay:-2s; }.chip-d { bottom:22%; right:4%; animation-delay:-3s; }
.bl-signal { position:absolute; z-index:2; width:5px; height:5px; border-radius:50%; background:#ff914d; box-shadow:0 0 20px #ff4d19; animation:bl-signal-pulse 2s ease-in-out infinite; }
.signal-a { left:23%; top:24%; }.signal-b { right:22%; top:60%; animation-delay:-.7s; }.signal-c { left:36%; bottom:14%; animation-delay:-1.4s; }
.bl-status { position:absolute; z-index:4; bottom:9%; right:8%; color:#777; font:8px "DM Mono",monospace; letter-spacing:.1em; }.bl-status strong { color:#ff914d; margin-left:9px; font-weight:400; }
.bl-launch-map { position:relative; min-height:560px; margin-top:55px; overflow:hidden; background:radial-gradient(circle at center,rgba(255,77,25,.12),transparent 45%),#111; border:1px solid #292929; color:#fff; }
.bl-launch-map:before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:40px 40px; }
.bl-map-center { position:absolute; z-index:3; left:50%; top:48%; transform:translate(-50%,-50%); width:145px; height:145px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ff914d; border-radius:50%; background:#1b120f; box-shadow:0 0 55px #ff4d192b; text-align:center; }
.bl-map-center small { color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.15em; }.bl-map-center strong { margin-top:8px; font-size:27px; line-height:.8; letter-spacing:-.07em; }
.bl-map-node { position:absolute; z-index:3; min-width:130px; padding:15px; display:flex; justify-content:space-between; gap:18px; border:1px solid #383838; background:#171717; box-shadow:0 12px 30px #0008; color:#aaa; font:8px "DM Mono",monospace; letter-spacing:.08em; transition:transform .3s,border-color .3s; }
.bl-map-node b { color:#ff914d; font-weight:400; }.bl-map-node:hover { border-color:#ff914d; }
.bl-map-node.map-one { left:50%; top:8%; transform:translateX(-50%); }.bl-map-node.map-one:hover { transform:translateX(-50%) translateY(-5px); }
.bl-map-node.map-two { right:8%; top:31%; }.bl-map-node.map-three { right:13%; bottom:13%; }.bl-map-node.map-four { left:13%; bottom:13%; }.bl-map-node.map-five { left:8%; top:31%; }
.bl-map-line { position:absolute; z-index:1; height:1px; background:linear-gradient(90deg,transparent,#ff914d,transparent); transform-origin:left center; opacity:.65; }
.line-1 { width:27%; left:50%; top:25%; transform:rotate(55deg); }.line-2 { width:25%; left:61%; top:57%; transform:rotate(75deg); }.line-3 { width:27%; left:50%; top:69%; transform:rotate(180deg); }.line-4 { width:25%; left:39%; top:57%; transform:rotate(105deg); }.line-5 { width:27%; left:50%; top:25%; transform:rotate(125deg); }
.bl-map-caption { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#666; font:8px "DM Mono",monospace; letter-spacing:.12em; }
.bl-control-board { padding:35px; background:radial-gradient(circle at 80% 20%,rgba(255,77,25,.16),transparent 40%),#0c0c0c; border:1px solid #303030; color:#fff; }
.control-head { display:flex; justify-content:space-between; padding-bottom:20px; border-bottom:1px solid #333; color:#888; font:8px "DM Mono",monospace; letter-spacing:.1em; }.control-head b { color:#ff914d; font-weight:400; }
.control-main { display:flex; align-items:center; gap:18px; padding:25px 0; border-bottom:1px solid #333; }.control-main small { color:#888; font:8px "DM Mono",monospace; }.control-main strong { color:#ff914d; font-size:clamp(40px,6vw,65px); letter-spacing:-.09em; }.control-main i { height:5px; flex:1; background:linear-gradient(90deg,#ff914d 94%,#333 94%); }
.control-row { display:grid; grid-template-columns:1fr 1fr 25px; align-items:center; gap:10px; padding:15px 0; border-bottom:1px solid #292929; color:#888; font:8px "DM Mono",monospace; }.control-row b { color:#ddd; font-weight:400; }.control-row em { color:#ff914d; font-style:normal; text-align:right; }
.control-footer { display:flex; justify-content:space-between; padding-top:20px; color:#777; font:8px "DM Mono",monospace; }.control-footer strong { color:#ff914d; font-weight:400; }
.bl-proof-hitasha { background:linear-gradient(135deg,#231716,#0c0c0c); }.bl-proof-icor { background:radial-gradient(circle at 80% 20%,rgba(255,145,77,.2),transparent 36%),#111; }

/* =========================================================
   BRAND STRATEGY — positioning map, signal field, compass
   ========================================================= */
.bs-hero .sv3-hero-grid { grid-template-columns:1fr 1fr; }
.bs-map { min-height:590px; background:radial-gradient(circle at center,rgba(255,77,25,.14),transparent 50%),#0b0b0b; }
.bs-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:38px 38px; mask-image:radial-gradient(ellipse,#000 20%,transparent 78%); }
.bs-cross { position:absolute; z-index:2; width:20px; height:20px; }.bs-cross:before,.bs-cross:after { content:""; position:absolute; background:#ff914d; }.bs-cross:before { left:50%; height:100%; width:1px; }.bs-cross:after { top:50%; width:100%; height:1px; }.bs-x1 { left:15%; top:22%; }.bs-x2 { right:13%; bottom:21%; }
.bs-axis { position:absolute; z-index:1; background:linear-gradient(90deg,transparent,#555,transparent); }.axis-x { height:1px; left:10%; right:10%; top:50%; }.axis-y { width:1px; top:10%; bottom:10%; left:50%; background:linear-gradient(transparent,#555,transparent); }
.bs-zone { position:absolute; z-index:2; padding:9px 12px; border:1px solid #353535; background:#141414; color:#888; font:8px "DM Mono",monospace; letter-spacing:.1em; }.zone-a { left:12%; top:18%; }.zone-b { right:9%; top:27%; }.zone-c { left:18%; bottom:17%; }
.bs-position { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); width:160px; height:160px; border:1px solid #ff914d; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:#1b120f; box-shadow:0 0 60px #ff4d1928; text-align:center; }
.bs-position small { color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.12em; }.bs-position strong { color:#fff; font-size:28px; line-height:1.2; }.bs-position b { color:#ddd; font-size:13px; line-height:1; letter-spacing:-.03em; }
.bs-signal { position:absolute; z-index:3; padding:10px 12px; border:1px solid #393939; background:#151515; color:#aaa; font:8px "DM Mono",monospace; }.sig-a { left:5%; top:42%; }.sig-b { right:4%; top:56%; }.sig-c { left:37%; bottom:8%; }
.bs-coords { position:absolute; right:18px; bottom:17px; color:#666; font:7px/1.7 "DM Mono",monospace; text-align:right; }
.bs-decision .num { color:#ff914d; }
.bs-signal-field { min-height:440px; margin-top:55px; position:relative; display:grid; place-items:center; overflow:hidden; background:#111; color:#fff; }
.bs-signal-field:before { content:""; position:absolute; width:300px; height:300px; border:1px solid #393939; border-radius:50%; box-shadow:0 0 0 45px #ffffff05,0 0 0 90px #ffffff04,0 0 0 135px #ffffff03; }
.noise-word { position:absolute; color:#555; font:clamp(10px,1.3vw,16px) "DM Mono",monospace; letter-spacing:.15em; animation:bs-noise-drift 8s ease-in-out infinite; }
.n1 { left:10%; top:17%; }.n2 { right:10%; top:21%; animation-delay:-1s; }.n3 { left:7%; top:49%; animation-delay:-2s; }.n4 { right:8%; top:52%; animation-delay:-3s; }.n5 { left:18%; bottom:15%; animation-delay:-4s; }.n6 { right:18%; bottom:14%; animation-delay:-5s; }.n7 { left:38%; top:8%; animation-delay:-6s; }.n8 { right:38%; bottom:8%; animation-delay:-7s; }
.signal-core { position:relative; z-index:3; width:190px; height:190px; border-radius:50%; border:1px solid #ff914d; background:radial-gradient(circle,#29160f,#101010 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 0 70px #ff4d192c; }
.signal-core small { color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.13em; }.signal-core strong { margin-top:10px; font-size:24px; line-height:.9; letter-spacing:-.06em; }
.signal-ring { position:absolute; width:260px; height:260px; border:1px dashed rgba(255,145,77,.45); border-radius:50%; animation:dx-orbit 30s linear infinite; }
.bs-compass { background:radial-gradient(circle at center,rgba(255,77,25,.14),transparent 43%),#0b0b0b; border:1px solid #292929; }
.compass-ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid rgba(255,145,77,.3); border-radius:50%; }.ring-1 { width:48%; aspect-ratio:1; }.ring-2 { width:76%; aspect-ratio:1; border-style:dashed; animation:dx-orbit 35s linear infinite; }
.compass-axis { position:absolute; left:50%; top:50%; background:#555; transform:translate(-50%,-50%); }.ca-x { width:76%; height:1px; }.ca-y { height:76%; width:1px; }
.compass-arrow { position:absolute; left:50%; top:50%; transform:translate(-50%,-70%); color:#ff914d; font-size:100px; text-shadow:0 0 35px #ff4d19; animation:bs-compass-pulse 3s ease-in-out infinite; }
.compass-label { position:absolute; z-index:3; color:#aaa; font:8px "DM Mono",monospace; letter-spacing:.12em; }.cl-top { top:10%; left:50%; transform:translateX(-50%); }.cl-right { right:7%; top:50%; }.cl-bottom { bottom:10%; left:50%; transform:translateX(-50%); }.cl-left { left:7%; top:50%; }
.compass-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:105px; height:105px; display:grid; place-items:center; border-radius:50%; background:#1a120f; border:1px solid #ff914d; color:#fff; text-align:center; font:10px/1.1 "DM Mono",monospace; letter-spacing:.1em; }
.bs-proof-icor { background:radial-gradient(circle at 80% 20%,rgba(255,145,77,.2),transparent 36%),#111; }.bs-proof-hitasha { background:linear-gradient(135deg,#211716,#0d0d0d); }

/* Shared visual refinements */
.sv3-service-page .proof-image { overflow:hidden; position:relative; }
.sv3-service-page .proof-image:after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 25%,rgba(255,145,77,.09),transparent 70%); transform:translateX(-120%); transition:transform .8s ease; pointer-events:none; }
.sv3-service-page .proof-main:hover .proof-image:after,
.sv3-service-page .proof-side:hover .proof-image:after { transform:translateX(120%); }
.sv3-service-page .proof-image strong { position:relative; z-index:1; }
.sv3-service-page .sv3-hero h1 { max-width: 850px; }
.sv3-service-page .truth-grid h2,
.sv3-service-page .transform-intro h2,
.sv3-service-page .signature-copy h2,
.sv3-service-page .engagement-intro h2,
.sv3-service-page .faq-grid > h2 { text-wrap: balance; }
.sv3-service-page .craft-heading h2 span,
.sv3-service-page .process-title h2 span,
.sv3-service-page .proof-top h2 span,
.sv3-service-page .engagement-intro h2 span {
    background:linear-gradient(45deg,#ff914d 0%,#a02d37 50%,#383838 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}

/* Motion */
@keyframes sv3-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
@keyframes sv3-cursor-drift { 0%,100% { transform:translate(0,0); } 50% { transform:translate(22px,-15px); } }
@keyframes dx-screen-hover { 0%,100% { transform:perspective(900px) rotateY(-9deg) rotateX(3deg) translateY(0); } 50% { transform:perspective(900px) rotateY(-5deg) rotateX(1deg) translateY(-9px); } }
@keyframes dx-line-pulse { 0%,100% { opacity:.4; transform:scaleY(.75); transform-origin:top; } 50% { opacity:1; transform:scaleY(1.15); transform-origin:top; } }
@keyframes dx-cursor { 0%,100% { transform:translate(0,0); } 40% { transform:translate(-28px,18px); } 70% { transform:translate(18px,-15px); } }
@keyframes dx-orbit { to { transform:rotate(360deg); } }
@keyframes wd-browser-float { 0%,100% { transform:perspective(900px) rotateY(-8deg) translateY(0); } 50% { transform:perspective(900px) rotateY(-4deg) translateY(-8px); } }
@keyframes wd-blink { 50% { opacity:0; } }
@keyframes bl-grid-shift { to { background-position:34px 34px; } }
@keyframes bl-orbit-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes bl-core-pulse { 0%,100% { box-shadow:0 0 45px #ff4d1922,inset 0 0 25px #ff4d191a; } 50% { box-shadow:0 0 85px #ff4d1944,inset 0 0 40px #ff4d1928; } }
@keyframes bl-signal-pulse { 0%,100% { opacity:.35; transform:scale(.7); } 50% { opacity:1; transform:scale(1.5); } }
@keyframes bs-noise-drift { 0%,100% { transform:translate(0,0); opacity:.55; } 50% { transform:translate(10px,-12px); opacity:1; } }
@keyframes bs-compass-pulse { 0%,100% { text-shadow:0 0 20px #ff4d19; } 50% { text-shadow:0 0 45px #ff4d19; } }

/* Tablet */
@media (max-width:1050px) {
    .dx-hero .sv3-hero-grid,.wd-hero .sv3-hero-grid,.bi-hero .sv3-hero-grid,.bl-hero .sv3-hero-grid,.bs-hero .sv3-hero-grid { grid-template-columns:1fr; }
    .dx-experience-stage,.wd-code-stage,.bi-mark-field,.bl-launch-stage,.bs-map { max-width:720px; width:100%; margin:25px auto 0; }
    .dx-flow-stage,.wd-system-stage { grid-template-columns:repeat(2,1fr); padding-bottom:110px; }
    .dx-flow-node,.wd-node { min-height:125px; }
    .dx-flow-line,.wd-wire { display:none; }
}

/* Mobile */
@media (max-width:760px) {
    .dx-experience-stage,.wd-code-stage,.bi-mark-field,.bl-launch-stage,.bs-map { min-height:420px; height:420px; }
    .dx-screen { width:76%; height:65%; }
    .dx-screen-body { padding:28px 20px; }
    .dx-screen-body strong { font-size:38px; }
    .dx-float,.wd-float { padding:9px 10px; font-size:7px; }
    .dx-flow-stage,.wd-system-stage { min-height:540px; grid-template-columns:1fr 1fr; gap:9px; padding:35px 12px 100px; }
    .dx-flow-node { min-height:130px; padding:13px 10px; }
    .dx-flow-node b { font-size:16px; }.dx-flow-node span { font-size:10px; }
    .wd-node { min-height:100px; padding:13px; }.wd-node strong { font-size:24px; }
    .wd-browser { width:88%; }.wd-code { padding:20px 13px; font-size:8px; }
    .wd-status { padding:10px; font-size:7px; }.wd-status small { font-size:6px; }
    .bi-paper { width:68%; left:16%; height:63%; top:18%; }
    .bi-mark { font-size:190px; }.bi-token { font-size:7px; padding:8px; }
    .bi-identity-stage { min-height:420px; }
    .bi-fragment { width:52px; height:52px; font-size:21px; }
    .bi-identity-core { width:150px; height:150px; }.bi-identity-core strong { font-size:20px; }
    .bl-core { width:150px; height:150px; }.bl-core strong { font-size:31px; }
    .bl-orbit.orbit-a { width:66%; }.bl-orbit.orbit-b { width:88%; }
    .bl-chip { font-size:7px; padding:9px; }.chip-a { left:1%; top:30%; }.chip-b { right:1%; top:30%; }.chip-c { left:1%; bottom:23%; }.chip-d { right:1%; bottom:23%; }
    .bl-countdown { top:6%; left:5%; }.bl-status { bottom:6%; right:5%; }
    .bl-launch-map { min-height:520px; }
    .bl-map-center { width:112px; height:112px; }.bl-map-center strong { font-size:22px; }
    .bl-map-node { min-width:105px; padding:11px 9px; font-size:7px; gap:8px; }
    .bl-map-node.map-one { top:7%; }.bl-map-node.map-two { right:2%; top:31%; }.bl-map-node.map-three { right:3%; bottom:14%; }.bl-map-node.map-four { left:3%; bottom:14%; }.bl-map-node.map-five { left:2%; top:31%; }
    .bl-map-caption { font-size:6px; letter-spacing:.07em; }
    .bl-control-board { padding:22px; }
    .control-main { gap:10px; }.control-main strong { font-size:44px; }
    .bs-position { width:135px; height:135px; }.bs-position b { font-size:11px; }
    .bs-zone,.bs-signal { font-size:6px; padding:7px; }
    .bs-signal-field { min-height:380px; }
    .signal-core { width:155px; height:155px; }.signal-core strong { font-size:20px; }
    .signal-ring { width:210px; height:210px; }
    .noise-word { font-size:8px; letter-spacing:.08em; }
    .bs-compass { min-height:390px; }
    .compass-label { font-size:7px; }.compass-arrow { font-size:75px; }
    .compass-core { width:85px; height:85px; font-size:8px; }
}

@media (max-width:480px) {
    .dx-experience-stage,.wd-code-stage,.bi-mark-field,.bl-launch-stage,.bs-map { min-height:350px; height:350px; }
    .dx-screen { width:80%; height:62%; }.dx-screen-body strong { font-size:31px; }
    .dx-cursor-ring { width:48px; height:48px; }
    .dx-float-a { right:1%; }.dx-float-b { left:1%; }.dx-float-c { right:1%; }
    .dx-flow-stage,.wd-system-stage { min-height:500px; gap:7px; padding-left:8px; padding-right:8px; }
    .dx-flow-node { min-height:118px; padding:10px 8px; }.dx-flow-node b { font-size:14px; }.dx-flow-node span { font-size:9px; }
    .wd-browser { width:94%; }.wd-code { font-size:7px; padding:15px 9px; }.wd-status small { display:none; }
    .bi-mark { font-size:150px; }.bi-type-sample { font-size:38px; }
    .bi-identity-stage { min-height:360px; }.bi-fragment { width:42px; height:42px; font-size:18px; }
    .bl-core { width:125px; height:125px; }.bl-core strong { font-size:26px; }
    .bl-chip { font-size:6px; padding:7px; }.bl-countdown strong { font-size:16px; }
    .bl-launch-map { min-height:440px; }.bl-map-center { width:92px; height:92px; }.bl-map-center strong { font-size:18px; }
    .bl-map-node { min-width:88px; font-size:6px; padding:9px 7px; }
    .bl-map-node.map-two { right:1%; }.bl-map-node.map-five { left:1%; }
    .bl-map-caption { bottom:10px; }
    .control-row { padding:11px 0; font-size:7px; }.control-main strong { font-size:38px; }
    .bs-position { width:115px; height:115px; }.bs-position small { font-size:7px; }.bs-position b { font-size:9px; }
    .bs-zone { font-size:5px; padding:6px; }.bs-signal { font-size:5px; padding:6px; }
    .bs-signal-field { min-height:330px; }.signal-core { width:130px; height:130px; }.signal-core strong { font-size:17px; }
    .compass-label { font-size:6px; }.compass-core { width:72px; height:72px; }
}

/* Respect reduced motion preferences. */
@media (prefers-reduced-motion:reduce) {
    .dx-screen,.dx-cursor-ring,.dx-dot,.dx-float,.dx-scroll-line,.dx-lab .lab-orbit,.dx-lab .lab-cursor,
    .wd-browser,.wd-float,.wd-cursor,.bi-fragment,.bl-grid,.bl-orbit,.bl-core,.bl-chip,.bl-signal,
    .signal-ring,.noise-word,.compass-ring,.compass-arrow,.ui-card,.ui-cursor {
        animation:none !important;
    }
}


/* Fine-grained styling for the exact elements used in the supplied page markup. */
.dx-lab .lab-card {
    left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(310px,58%); padding:25px; z-index:3;
    background:rgba(18,18,18,.94); border:1px solid #414141;
    box-shadow:0 25px 70px #0009;
}
.dx-lab .lab-card small { display:block; color:#ff914d; font:8px "DM Mono",monospace; letter-spacing:.1em; }
.dx-lab .lab-card strong { display:block; margin:20px 0; color:#fff; font-size:clamp(25px,3vw,40px); line-height:.88; letter-spacing:-.08em; }
.dx-lab .lab-card strong i { color:#ff914d; font-style:normal; }
.dx-lab .lab-card button { border:0; border-top:1px solid #383838; padding:12px 0 0; background:none; color:#aaa; font:8px "DM Mono",monospace; cursor:default; }
.dx-lab .lab-card button span { color:#ff914d; margin-left:10px; }
.dx-lab .lab-orbit.two { width:48%; height:48%; left:26%; top:26%; border-color:rgba(255,255,255,.18); animation-direction:reverse; }
.dx-lab .lab-status { display:flex; gap:9px; align-items:center; }
.dx-lab .lab-status b { color:#ff914d; font-weight:400; }
.wd-engine-board { min-height:450px; }
.wd-engine-board .engine-title { position:absolute; top:28px; left:32px; z-index:3; font:8px "DM Mono",monospace; color:#ff914d; letter-spacing:.12em; }
.wd-engine-board .engine-grid { position:absolute; inset:0; margin:0; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:35px 35px; opacity:.6; }
.wd-engine-board .engine-orb { display:flex; flex-direction:column; justify-content:center; align-items:center; color:#fff; font:8px "DM Mono",monospace; }
.wd-engine-board .engine-orb span { color:#ff914d; }.wd-engine-board .engine-orb strong { margin-top:6px; font-size:12px; }
.wd-engine-board .engine-metric { position:absolute; z-index:2; width:25%; min-height:78px; padding:13px; border:1px solid #393939; background:rgba(17,17,17,.92); }
.wd-engine-board .engine-metric small { display:block; color:#777; font:7px "DM Mono",monospace; letter-spacing:.1em; }
.wd-engine-board .engine-metric b { display:block; margin-top:8px; color:#ff914d; font-size:15px; letter-spacing:-.03em; }
.wd-engine-board .metric-one { left:8%; top:25%; }.wd-engine-board .metric-two { right:8%; top:25%; }
.wd-engine-board .metric-three { left:8%; bottom:15%; }.wd-engine-board .metric-four { right:8%; bottom:15%; }
.wd-engine-board .engine-line { position:absolute; z-index:1; left:30%; width:40%; height:1px; background:linear-gradient(90deg,transparent,#ff914d,transparent); }
.wd-engine-board .line-one { top:38%; }.wd-engine-board .line-two { top:66%; }
.wd-engine-board .engine-footer { position:absolute; left:32px; right:32px; bottom:22px; color:#666; font:7px "DM Mono",monospace; letter-spacing:.1em; text-align:center; }
.bi-system-board .board-type span { display:block; margin-top:5px; color:#777; font:7px "DM Mono",monospace; letter-spacing:.1em; }
.bi-system-board .board-colour { display:inline-block; width:44px; height:44px; margin:20px 7px 0 0; background:#111; vertical-align:top; }
.bi-system-board .board-colour.two { background:#ff914d; }.bi-system-board .board-colour.three { background:#a02d37; }
.bi-system-board .board-caption { position:absolute; right:28px; bottom:25px; color:#777; font:7px/1.7 "DM Mono",monospace; text-align:right; }
@media(max-width:760px) {
    .dx-lab .lab-card { width:65%; padding:18px; }
    .wd-engine-board { min-height:390px; padding:22px; }
    .wd-engine-board .engine-metric { width:29%; padding:9px; }
    .wd-engine-board .engine-metric b { font-size:11px; }
    .wd-engine-board .engine-orb { width:85px; height:85px; right:calc(50% - 42px); top:calc(50% - 42px); }
    .wd-engine-board .engine-title { top:18px; left:20px; }
    .wd-engine-board .engine-footer { left:12px; right:12px; bottom:12px; font-size:6px; }
    .bi-system-board { padding:22px; }
    .bi-system-board .board-mark { right:8%; top:20%; font-size:100px; }
    .bi-system-board .board-caption { right:15px; bottom:14px; font-size:6px; }
}

/* =========================================================
   FINAL FIX — SHARED SERVICE PAGE HIGHLIGHT + LAYOUT SAFETY
   ========================================================= */
.sv3-service-page .hero-title-highlight {
    background: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: inherit;
}
.sv3-service-page .sv3-hero h1 .hero-title-highlight,
.sv3-service-page h2 .hero-title-highlight {
    display: inline;
    background-image: linear-gradient(45deg, #ff914d 0%, #a02d37 50%, #383838 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.sv3-service-page .sv3-hero h1 em.hero-title-highlight,
.sv3-service-page h2 em.hero-title-highlight {
    font-style: normal;
}
@media (max-width: 760px) {
    .sv3-service-page .sv3-shell { width: min(100% - 36px, 1280px); }
    .sv3-service-page .sv3-hero-grid { gap: 26px; padding-top: 48px; }
    .sv3-service-page .sv3-hero h1 { font-size: clamp(48px, 12vw, 76px); line-height: .88; }
    .sv3-service-page .sv3-interface { height: 420px; min-height: 420px; }
    .sv3-service-page .sv3-hero-cta { flex-wrap: wrap; gap: 16px; }
}
@media (max-width: 480px) {
    .sv3-service-page .sv3-shell { width: calc(100% - 32px); }
    .sv3-service-page .sv3-topline { gap: 12px; font-size: 7px; }
    .sv3-service-page .sv3-topline span:last-child { text-align: right; }
    .sv3-service-page .sv3-hero h1 { font-size: clamp(43px, 12vw, 60px); }
    .sv3-service-page .sv3-interface { height: 350px; min-height: 350px; }
    .sv3-service-page .sv3-hero-dek { font-size: 15px; line-height: 1.65; }
}